add Progress

Author: eanplatter

package.json

@@ -82,7 +82,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/modules/Progress/Progress.js

@@ -1,11 +1,13 @@
 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,
-    color: PropTypes.string,
     label: PropTypes.string,
     limitValues: PropTypes.bool,
     onActive: PropTypes.func,
@@ -29,22 +31,32 @@ export default class Progress extends Component {
       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 color = this.props.percent < 100 ? this.props.color : 'success'
     const classes = classNames(
       'sd-progress',
       'ui',
+      this.props.className,
       'progress',
-      color,
-      this.props.className
     );
+
     return (
-      <div className={classes} {...this.props}>
-        <div className='bar' style={{width: `${this.props.percent.toString()}%`}}>
-          <div className='progress' />
+      <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

@@ -2,7 +2,17 @@ import React from 'react';
 import {Progress} from 'stardust';
 
 describe('Progress', () => {
-  it('styles the bar\'s width after it\'s percent property', () => {
-    render(<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');
   });
 });