Add Progress Component

.gitignore

@@ -12,3 +12,4 @@ bower_components/
 testBundle.js
 docs/build
 docgenInfo.json
+.idea/

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,65 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+import $ from 'jquery';
+import META from 'src/utils/Meta';
+
+export default class Progress extends Component {
+  static propTypes = {
+    autoSuccess: PropTypes.bool,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    label: PropTypes.string,
+    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({
+      onActive: this.props.onActive,
+      onChange: this.props.onChange,
+      onError: this.props.onError,
+      onSuccess: this.props.onSuccess,
+      onWarning: this.props.onWarning,
+      percent: this.props.percent,
+    });
+  }
+
+  static _meta = {
+    library: META.library.stardust,
+    name: 'Progress',
+    type: META.type.module,
+  };
+
+  plugin() {
+    return this.element.progress(...arguments);
+  }
+
+  render() {
+    const classes = classNames(
+      'sd-progress',
+      'ui',
+      this.props.className,
+      'progress',
+    );
+
+    return (
+      <div {...this.props} className={classes}>
+        <div className='bar'>
+          <div className='progress'/>
+        </div>
+        {this.props.children}
+      </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,18 @@
+import React from 'react';
+import {Progress} from 'stardust';
+
+describe('Progress', () => {
+  it('should be able to receive children', () => {
+    render(
+      <Progress>
+        <div className='new-child' />
+      </Progress>
+    ).scryClass('new-child');
+  });
+  it('should create a div with the class of bar', () => {
+    render(<Progress />).scryClass('bar');
+  });
+  it('should create a div with the class of progress', () => {
+    render(<Progress />).scryClass('progress');
+  });
+});