New ProgressBar component

Signed-off-by: Steven Locke <slocke@pivotal.io>

spec/pivotal-ui-react/progress-bar/progress-bar_spec.js

@@ -0,0 +1,53 @@
+import '../spec_helper';
+import {ProgressBar} from '../../../src/react/progress-bar';
+
+describe('ProgressBar', () => {
+  let subject;
+
+  beforeEach(() => {
+    subject = ReactDOM.render(<ProgressBar/>, root);
+  });
+
+  it('renders a progress background div', () => {
+    expect('.pui-progress').toExist();
+  });
+
+  it('renders a progress foreground div', () => {
+    expect('.pui-progress .pui-progress-bar').toHaveAttr('role', 'progressbar');
+    expect('.pui-progress .pui-progress-bar').toHaveAttr('aria-valuemax', '100');
+    expect('.pui-progress .pui-progress-bar').toHaveAttr('aria-valuemin', '0');
+    expect('.pui-progress .pui-progress-bar').toHaveAttr('aria-valuenow', '0');
+    expect('.pui-progress .pui-progress-bar').toHaveAttr('style', 'width: 0%;');
+  });
+
+  describe('when given a className', () => {
+    beforeEach(() => {
+      subject::setProps({className: 'custom-class'});
+    });
+
+    it('applies the class to the outer div', () => {
+      expect('.pui-progress').toHaveClass('custom-class');
+    });
+  });
+
+  describe('when given a barClassName', () => {
+    beforeEach(() => {
+      subject::setProps({barClassName: 'custom-bar-class'});
+    });
+
+    it('applies the class to the progress bar', () => {
+      expect('.pui-progress .pui-progress-bar').toHaveClass('custom-bar-class');
+    });
+  });
+
+  describe('when given a value', () => {
+    beforeEach(() => {
+      subject::setProps({value: 78});
+    });
+
+    it('sets the attributes of the progress bar accordingly', () => {
+      expect('.pui-progress .pui-progress-bar').toHaveAttr('aria-valuenow', '78');
+      expect('.pui-progress .pui-progress-bar').toHaveAttr('style', 'width: 78%;');
+    });
+  });
+});

src/css/progress-bars/index.js

@@ -1,5 +1,4 @@
 try {
-  require('../common');
   require('./progress-bars.css');
 } catch(e) {
 }

src/css/progress-bars/progress-bars.scss

@@ -1,14 +1,14 @@
 @import "../pui-variables";
 
-.progress {
+.progress, .pui-progress {
   background-color: $navy-9;
 
   overflow: hidden;
 
   min-height: $base-unit;
 }
 
-.progress-bar {
+.progress-bar, .pui-progress-bar {
   -webkit-transition: width .6s ease;
   transition: width .6s ease;
 
@@ -23,12 +23,12 @@
   }
 }
 
-.progress-bar[aria-valuenow="1"],
-.progress-bar[aria-valuenow="2"] {
+.progress-bar[aria-valuenow="1"], .pui-progress-bar[aria-valuenow="1"],
+.progress-bar[aria-valuenow="2"], .pui-progress-bar[aria-valuenow="2"] {
   min-width: 3%;
 }
 
-.progress-bar[aria-valuenow="0"] {
+.progress-bar[aria-valuenow="0"], .pui-progress-bar[aria-valuenow="0"] {
   color: $text-color;
   min-width: 3%;
   background: transparent;

src/react/progress-bar/index.js

@@ -0,0 +1 @@
+export {ProgressBar} from './progress-bar';

src/react/progress-bar/progress-bar.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+export class ProgressBar extends React.Component {
+  static propTypes = {
+    barClassName: PropTypes.string,
+    value: PropTypes.number.isRequired
+  };
+
+  static defaultProps = {
+    value: 0
+  };
+
+  componentDidMount() {
+    require('../../css/progress-bars');
+  }
+
+  render() {
+    const {barClassName, className, value} = this.props;
+    return (
+      <div {...{className: classnames('pui-progress', className)}}>
+        <div {...{
+          className: classnames('pui-progress-bar', barClassName),
+          role: 'progressbar',
+          'aria-valuemax': 100,
+          'aria-valuemin': 0,
+          'aria-valuenow': value,
+          style: {width: `${value}%`}
+        }}/>
+      </div>
+    );
+  }
+}