Merge pull request #121 from TechnologyAdvice/feature/progress

Add Progress Component

Author: eanplatter

package.json

@@ -83,7 +83,7 @@
     "sinon-chai": "^2.8.0",
     "through2": "^2.0.0",
     "watch": "^0.16.0",
-    "webpack": "^1.12.2",
-    "webpack-dev-server": "^1.12.0"
+    "webpack": "1.12.1",
+    "webpack-dev-server": "1.10.1"
   }
 }

src/index.js

@@ -30,6 +30,7 @@ import Segments from 'src/elements/Segment/Segments';
 
 // Modules
 import Checkbox from 'src/modules/Checkbox/Checkbox';
+import Progress from 'src/modules/Progress/Progress';
 import Modal from 'src/modules/Modal/Modal';
 import ModalContent from 'src/modules/Modal/ModalContent';
 import ModalFooter from 'src/modules/Modal/ModalFooter';
@@ -74,11 +75,12 @@ export default {
 
   // Modules
   Checkbox,
+  Dropdown,
   Modal,
   ModalContent,
   ModalFooter,
   ModalHeader,
-  Dropdown,
+  Progress,
 
   // Views
   Item,

src/modules/Progress/Progress.js

@@ -0,0 +1,95 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+import $ from 'jquery';
+import META from 'src/utils/Meta';
+import _ from 'lodash';
+
+export default class Progress extends Component {
+  static propTypes = {
+    autoSuccess: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    label: PropTypes.oneOf(['ratio', 'percent']),
+    limitValues: PropTypes.bool,
+    onActive: PropTypes.func,
+    onChange: PropTypes.func,
+    onError: PropTypes.func,
+    onSuccess: PropTypes.func,
+    onWarning: PropTypes.func,
+    percent: PropTypes.number,
+    precision: PropTypes.number,
+    random: PropTypes.bool,
+    showActivity: PropTypes.bool,
+    total: PropTypes.bool,
+    value: PropTypes.bool,
+  };
+
+  componentDidMount() {
+    this.element = $(this.refs.element);
+    this.element.progress({
+      autoSuccess: this.props.autoSuccess,
+      label: this.props.label,
+      limitValues: this.props.limitValues,
+      onActive: this.props.onActive,
+      onChange: this.props.onChange,
+      onError: this.props.onError,
+      onSuccess: this.props.onSuccess,
+      onWarning: this.props.onWarning,
+      percent: this.props.percent,
+      precision: this.props.precision,
+      random: this.props.random,
+      showActivity: this.props.showActivity,
+      total: this.props.total,
+      value: this.props.value,
+    });
+  }
+
+  static _meta = {
+    library: META.library.stardust,
+    name: 'Progress',
+    type: META.type.module,
+  };
+
+  plugin() {
+    return this.element.progress(...arguments);
+  }
+
+  renderAttachedBar = () => {
+    return (
+      <div className='bar' />
+    );
+  };
+
+  renderStandardBar = () => {
+    const label = (
+      <div className='label'>
+        {this.props.children}
+      </div>
+    );
+
+    return (
+      <div>
+        <div className='bar'>
+          <div className='progress'/>
+        </div>
+        {this.props.children && label}
+      </div>
+    );
+  };
+
+  render() {
+    const classes = classNames(
+      'sd-progress',
+      'ui',
+      this.props.className,
+      'progress',
+    );
+
+    const isAttached = _.contains(this.props.className, 'attached');
+    return (
+      <div {...this.props} className={classes}>
+        {isAttached ? this.renderAttachedBar() : this.renderStandardBar()}
+      </div>
+    );
+  }
+}

test/mocks/SemanticjQuery-mock.js

@@ -22,6 +22,7 @@ const jQueryPlugins = {
   dropdown: sandbox.stub().returnsThis(),
   modal: sandbox.stub().returnsThis(),
   popup: sandbox.stub().returnsThis(),
+  progress: sandbox.stub().returnsThis(),
   transition: sandbox.stub().returnsThis(),
 };
 

test/specs/modules/Progress/Progress-test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Progress} from 'stardust';
+
+describe.only('Progress', () => {
+  it('should be able to receive children', () => {
+    render(
+      <Progress>
+        Child
+      </Progress>
+    ).assertText('Child');
+  });
+
+  it('should create a div with the class of bar', () => {
+    render(<Progress />).findClass('bar');
+  });
+
+  it('should create two progress divs if un-attached', () => {
+    render(<Progress />)
+      .scryClass('progress')
+      .should.have.a.lengthOf(2);
+  });
+
+  it('should not create extra progress div if attached', () => {
+    render(<Progress className='attached' />)
+      .scryClass('progress')
+      .should.have.a.lengthOf(1);
+  });
+});