Adds progress bar component (#548)

* Adds progress bar component

frontend/components/ProgressBar/ProgressBar.jsx

@@ -0,0 +1,27 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { round } from 'lodash';
+
+const baseClass = 'progress-bar';
+
+class ProgressBar extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    max: PropTypes.number.isRequired,
+    value: PropTypes.number.isRequired,
+  };
+
+  render () {
+    const { className, max, value } = this.props;
+    const percentComplete = `${(round((value / (max || 1)) * 100, 0))}%`;
+    const wrapperClassName = classnames(baseClass, className);
+
+    return (
+      <div className={wrapperClassName}>
+        <div style={{ width: percentComplete }} />
+      </div>
+    );
+  }
+}
+
+export default ProgressBar;

frontend/components/ProgressBar/_styles.scss

@@ -0,0 +1,12 @@
+.progress-bar {
+  background-color: $success-light;
+  height: 10px;
+  overflow: hidden;
+
+  div {
+    background-color: $success;
+    height: 100%;
+    overflow: hidden;
+    transition: width 300ms ease-in;
+  }
+}

frontend/components/ProgressBar/index.js

@@ -0,0 +1 @@
+export default from './ProgressBar';

frontend/pages/HomePage/HomePage.jsx

@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 
-import Avatar from '../../components/Avatar';
-import Rocker from '../../components/buttons/Rocker';
-import paths from '../../router/paths';
-import userInterface from '../../interfaces/user';
+import Avatar from 'components/Avatar';
+import paths from 'router/paths';
+import ProgressBar from 'components/ProgressBar';
+import userInterface from 'interfaces/user';
 
 export class HomePage extends Component {
   static propTypes = {
@@ -16,19 +16,13 @@ export class HomePage extends Component {
     const { user } = this.props;
     const { LOGOUT } = paths;
     const baseClass = 'home-page';
-    const rockerOpts = {
-      aText: 'List',
-      aIcon: 'list-select',
-      bText: 'Grid',
-      bIcon: 'grid-select',
-    };
 
     return (
       <div className={baseClass}>
         {user && <Avatar size="small" className={`${baseClass}__avatar`} user={user} />}
         <span>You are successfully logged in! </span>
         {user && <Link to={LOGOUT}>Logout</Link>}
-        <Rocker name="view-type" value="grid" options={rockerOpts} />
+        <ProgressBar className={`${baseClass}__progress-bar`} max={100} value={35} />
       </div>
     );
   }

frontend/pages/HomePage/_styles.scss

@@ -5,4 +5,9 @@
     margin-right: $pad-xsmall;
     vertical-align: middle;
   }
+
+  &__progress-bar {
+    margin-top: $pad-base;
+    width: 378px;
+  }
 }