diff --git a/package.json b/package.json index b0129bede2..19991a4221 100644 --- a/package.json +++ b/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" } } diff --git a/src/index.js b/src/index.js index c7592f3122..560784345a 100644 --- a/src/index.js +++ b/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, diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js new file mode 100644 index 0000000000..1c77311321 --- /dev/null +++ b/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 ( +
+ ); + }; + + renderStandardBar = () => { + const label = ( +
+ {this.props.children} +
+ ); + + return ( +
+
+
+
+ {this.props.children && label} +
+ ); + }; + + render() { + const classes = classNames( + 'sd-progress', + 'ui', + this.props.className, + 'progress', + ); + + const isAttached = _.contains(this.props.className, 'attached'); + return ( +
+ {isAttached ? this.renderAttachedBar() : this.renderStandardBar()} +
+ ); + } +} diff --git a/test/mocks/SemanticjQuery-mock.js b/test/mocks/SemanticjQuery-mock.js index 65bde39ea5..3c5693ff14 100644 --- a/test/mocks/SemanticjQuery-mock.js +++ b/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(), }; diff --git a/test/specs/modules/Progress/Progress-test.js b/test/specs/modules/Progress/Progress-test.js new file mode 100644 index 0000000000..986dad0143 --- /dev/null +++ b/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( + + Child + + ).assertText('Child'); + }); + + it('should create a div with the class of bar', () => { + render().findClass('bar'); + }); + + it('should create two progress divs if un-attached', () => { + render() + .scryClass('progress') + .should.have.a.lengthOf(2); + }); + + it('should not create extra progress div if attached', () => { + render() + .scryClass('progress') + .should.have.a.lengthOf(1); + }); +});