Merge pull request #557 from BoostIO/feature-todo-percentage

display percentage of achievement of todo in markdown

browser/components/TodoListPercentage.styl

@@ -0,0 +1,13 @@
+.percentageBar
+  position absolute
+  background-color #bcbcbc
+  height 20px
+  width 100%
+
+.progressBar
+  background-color #52d8a5
+  height 20px
+  text-align center
+
+.progressBar p
+  color white

browser/components/TodolistPercentage.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Percentage of todo achievement.
+ */
+
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TodoListPercentage.styl'
+
+/**
+ * @param {number} percentageOfTodo
+ */
+
+const TodoListPercentage = ({
+  percentageOfTodo
+}) => (
+  <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
+    <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
+      <p styleName='percentageText'>{percentageOfTodo}%</p>
+    </div>
+  </div>
+)
+
+TodoListPercentage.propTypes = {
+  percentageOfTodo: PropTypes.number.isRequired
+}
+
+export default CSSModules(TodoListPercentage, styles)