├── .babelrc ├── example ├── index.html └── main.js ├── README.md ├── lib ├── utils.js ├── types │ ├── Basic.less │ ├── Circle.less │ ├── Point.js │ ├── Circle.js │ ├── Basic.js │ └── Point.less └── index.js ├── .gitignore ├── webpack.config.example.js ├── LICENSE ├── webpack.config.js ├── package.json └── dist ├── react-steps.js └── react-steps.js.map /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react", 5 | "stage-0" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React-steps example 6 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-steps 2 | Steps component for react 3 | 4 | Demo : http://jakubzloczewski.github.io/react-steps/ 5 | 6 | ## Instructions 7 | 8 | To install this module run: 9 | ```sh 10 | npm install react-steps 11 | ``` 12 | 13 | require it inside of your app 14 | ```js 15 | var Steps = require('react-steps'); 16 | ``` 17 | 18 | to compile example with webpack 19 | 20 | ```sh 21 | npm run build && npm run buildExample 22 | ``` 23 | 24 | Tu run example localy just open ./example/index.html in browser 25 | -------------------------------------------------------------------------------- /lib/utils.js: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames'; 2 | 3 | function mergeStyles(styleClassNames, propStyles = {}, stylesObj = {}, otherStyle = {}) { 4 | const classNamesObj = Object.keys(stylesObj) 5 | .map(key => stylesObj[key] ? styleClassNames[key] : null); 6 | const style = Object.keys(stylesObj) 7 | .reduce((acc, key) => stylesObj[key] ? {...acc, ...propStyles[key]} : acc, {}); 8 | 9 | return { 10 | style: {...style, ...otherStyle}, 11 | className: classNames(classNamesObj), 12 | }; 13 | } 14 | 15 | export {mergeStyles} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | .idea 30 | /example/dist/bundle.js.map 31 | /example/dist/bundle.js 32 | -------------------------------------------------------------------------------- /webpack.config.example.js: -------------------------------------------------------------------------------- 1 | /*global module, process*/ 2 | "use strict"; 3 | var webpack = require('webpack'); 4 | var path = require('path'); 5 | 6 | module.exports = { 7 | entry: './example/main.js', 8 | output: { 9 | path: './example/dist/', 10 | filename: 'bundle.js', 11 | }, 12 | resolve: { 13 | alias: { 14 | 'react-steps': path.resolve(__dirname, 'dist/react-steps.js') 15 | } 16 | }, 17 | plugins: [ 18 | new webpack.DefinePlugin({ 19 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'dev') 20 | }), 21 | new webpack.optimize.UglifyJsPlugin({ 22 | compress: {warnings: false}, 23 | sourceMap: false, 24 | mangle: true 25 | }) 26 | ], 27 | module: { 28 | loaders: [ 29 | { 30 | test: /\.js$/, 31 | exclude: /(node_modules|dist)/, 32 | loader: 'babel' 33 | } 34 | ] 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /lib/types/Basic.less: -------------------------------------------------------------------------------- 1 | .item { 2 | display: inline-block; 3 | margin: 0.5em; 4 | height: 30px; 5 | line-height: 30px; 6 | border-radius: 0.4em; 7 | background: linear-gradient(to bottom, #7d7e7d 20%, #565656 100%); 8 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); 9 | text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 0px; 10 | white-space: nowrap; 11 | } 12 | 13 | .itemFlat { 14 | background: #7d7e7d; 15 | } 16 | 17 | .activeItem { 18 | background: linear-gradient(to bottom, #f9c667 0%, #f79621 100%) 19 | } 20 | 21 | .activeFlatItem { 22 | background: #F8A50A; 23 | } 24 | 25 | .doneItem { 26 | background: linear-gradient(to bottom, #a4b357 0%, #75890c 100%) 27 | } 28 | 29 | .doneFlatItem { 30 | background: #81941F; 31 | } 32 | 33 | .arrow { 34 | display: inline-block; 35 | position: relative; 36 | margin-bottom: -18px; 37 | bottom: 9px; 38 | } 39 | 40 | .number { 41 | display: inline-block; 42 | padding: 0 0.5em 0 0.85em; 43 | } 44 | 45 | .text { 46 | display: inline-block; 47 | font-size: 0.8em; 48 | padding: 0 1em; 49 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Jakub Złoczewski 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /*global module, process*/ 2 | "use strict"; 3 | var webpack = require('webpack'); 4 | 5 | var dev = process.env.NODE_ENV === 'development'; 6 | 7 | module.exports = { 8 | devtool: dev ? '#eval-cheap-module-source-map' : null, 9 | entry: './lib/index.js', 10 | output: { 11 | path: './dist/', 12 | filename: 'react-steps.js', 13 | libraryTarget: 'umd' 14 | }, 15 | externals: { 16 | 'react': 'react' 17 | }, 18 | plugins: [ 19 | new webpack.SourceMapDevToolPlugin({ 20 | filename: 'react-steps.js.map' 21 | }), 22 | new webpack.optimize.UglifyJsPlugin({ 23 | exclude: /node_modules/, 24 | compress: {warnings: false}, 25 | sourceMap: true, 26 | mangle: false 27 | }) 28 | ], 29 | module: { 30 | loaders: [ 31 | { 32 | test: /\.less$/, 33 | loader: 'style!css?modules&localIdentName=' + ( dev ? '[name]__[local]___[hash:base64:5]' : '[hash:base64:5]' ) + '!less' 34 | }, 35 | { 36 | test: /\.js$/, 37 | loader: 'babel' 38 | } 39 | ] 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /lib/types/Circle.less: -------------------------------------------------------------------------------- 1 | @size: 45px; 2 | 3 | .item { 4 | display: inline-block; 5 | margin: 0.5em; 6 | } 7 | 8 | .number { 9 | display: inline-block; 10 | height: @size; 11 | width: @size; 12 | border-radius: @size; 13 | line-height: @size; 14 | text-align: center; 15 | background: linear-gradient(to bottom, #7d7e7d 20%, #565656 100%); 16 | text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 0; 17 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); 18 | margin-right: 0.5em; 19 | } 20 | 21 | .itemFlatNumber { 22 | background: #7d7e7d; 23 | } 24 | 25 | .activeItemNumber { 26 | background: linear-gradient(to bottom, #f9c667 0%, #f79621 100%); 27 | } 28 | 29 | .activeFlatItemNumber { 30 | background: #F8A50A; 31 | } 32 | 33 | .doneItemNumber { 34 | background: linear-gradient(to bottom, #a4b357 0%, #75890c 100%); 35 | } 36 | 37 | .doneFlatItemNumber { 38 | background: #81941F; 39 | } 40 | 41 | .arrow { 42 | margin-bottom: -5px 43 | } 44 | 45 | .text { 46 | color: #706D6D; 47 | font-weight: 300; 48 | font-size: 0.8em; 49 | padding: 0.1em; 50 | } 51 | 52 | .status { 53 | color: #706D6D; 54 | font-weight: 700; 55 | font-size: 0.8em; 56 | padding: 0.1em; 57 | } 58 | 59 | .labels { 60 | display: inline-block; 61 | } 62 | -------------------------------------------------------------------------------- /lib/types/Point.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | import styles from './Point.less'; 5 | import {mergeStyles} from '../utils'; 6 | 7 | export default class Point extends React.Component { 8 | render() { 9 | const {item, flat, idx, isFirst, isLast, style} = this.props; 10 | 11 | return ( 12 |
13 |
18 | 19 |
20 |
{idx + 1}
28 |
29 | 30 |
{item.text}
31 |
32 | ); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /lib/types/Circle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | import styles from './Circle.less'; 5 | import {mergeStyles} from '../utils'; 6 | 7 | const size = 45; 8 | 9 | export default class Circle extends React.Component { 10 | render() { 11 | const {item, flat, idx} = this.props; 12 | 13 | var status = 'This Step is Undone.'; 14 | 15 | if (item.isActive) { 16 | status = 'This Step is Active.'; 17 | } else if (item.isDone) { 18 | status = 'This Step is Done.'; 19 | } 20 | 21 | return ( 22 |
23 |
{idx + 1}
31 |
32 |
{item.text}
33 |
{status}
34 |
35 |
36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | import React from 'react' 3 | 4 | import {mergeStyles} from './utils'; 5 | import Circle from './types/Circle.js'; 6 | import Basic from './types/Basic.js'; 7 | import Point from './types/Point.js'; 8 | 9 | var style = { 10 | main: { 11 | display: 'block', 12 | flexWrap: 'wrap', 13 | fontFamily: '"Helvetica Neue", Helvetica, Arial', 14 | fontWeight: 800, 15 | color: '#f3f3f3' 16 | } 17 | }; 18 | 19 | class Steps extends React.Component { 20 | render() { 21 | const {flat, type} = this.props; 22 | const propStyles = this.props.styles || {}; 23 | const items = this.props.items.map((item, idx, list) => { 24 | if (type === 'circle') { 25 | return ; 26 | } else if (type === 'point') { 27 | return ; 32 | } else { 33 | return ; 34 | } 35 | }); 36 | 37 | return ( 38 |
39 | {items} 40 |
41 | ); 42 | } 43 | } 44 | 45 | export default Steps; 46 | -------------------------------------------------------------------------------- /lib/types/Basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import styles from './Basic.less'; 4 | import {mergeStyles} from '../utils'; 5 | 6 | class Arrow extends React.Component { 7 | render() { 8 | var {width, height} = this.props; 9 | return ( 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | ); 19 | } 20 | } 21 | 22 | export default class Basic extends React.Component { 23 | render() { 24 | const {item, flat, idx} = this.props; 25 | 26 | return ( 27 |
35 | {idx + 1} 36 | 37 | {item.text} 38 |
39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-steps", 3 | "version": "0.0.6", 4 | "description": "Steps component for react", 5 | "main": "dist/react-steps.js", 6 | "scripts": { 7 | "prepublish": "npm build", 8 | "build": "webpack", 9 | "buildExample": "NODE_ENV=production webpack --config webpack.config.example.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/jakubzloczewski/react-steps.git" 14 | }, 15 | "author": { 16 | "name": "Jakub Złoczewski", 17 | "email": "jzlocz@gmail.com", 18 | "url": "https://github.com/jakubzloczewski" 19 | }, 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/jakubzloczewski/react-steps/issues" 23 | }, 24 | "homepage": "https://github.com/jakubzloczewski/react-steps#readlsme", 25 | "devDependencies": { 26 | "babel-core": "6.17.0", 27 | "babel-loader": "6.2.5", 28 | "babel-preset-es2015": "6.16.0", 29 | "babel-preset-react": "6.16.0", 30 | "babel-preset-stage-0": "6.16.0", 31 | "classnames": "2.2.5", 32 | "css-loader": "0.25.0", 33 | "less": "2.7.1", 34 | "less-loader": "2.2.3", 35 | "react": "15.3.2", 36 | "react-dom": "15.3.2", 37 | "style-loader": "0.13.1", 38 | "webpack": "1.13.2" 39 | }, 40 | "readme": "# react-steps\r\nSteps component for react\r\n\r\nDemo : http://jakubzloczewski.github.io/react-steps/\r\n\r\n## Instructions\r\n\r\nTo install this module run:\r\n```sh\r\nnpm install react-steps\r\n```\r\n\r\nrequire it inside of your app\r\n```js\r\nvar Steps = require('react-steps');\r\n```\r\n\r\nto compile example with webpack\r\n\r\n```sh\r\nwebpack\r\n```\r\n\r\nTu run example localy just open ./example/index.html in browser\r\n", 41 | "readmeFilename": "README.md", 42 | "gitHead": "58a0c759fc030f1e5bcf58a1b908931a81b9766e", 43 | "_id": "react-steps@0.0.3-c", 44 | "_shasum": "8da54945d1c952cab273d0d663f6970c7f26b7e4", 45 | "_from": "react-steps@0.0.3-c" 46 | } 47 | -------------------------------------------------------------------------------- /lib/types/Point.less: -------------------------------------------------------------------------------- 1 | @size: 30px; 2 | @border: 1px solid rgba(100, 100, 100, 0.2); 3 | @outlineSize: 8px; 4 | 5 | .item { 6 | position: relative; 7 | text-align: center; 8 | display: inline-block; 9 | margin: 0.5em 0; 10 | } 11 | 12 | .number { 13 | position: relative; 14 | display: inline-block; 15 | top: @outlineSize / 2; 16 | height: @size; 17 | width: @size; 18 | border-radius: @size; 19 | line-height: @size; 20 | text-align: center; 21 | background: linear-gradient(to bottom, #7d7e7d 20%, #565656 100%); 22 | text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 0; 23 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); 24 | } 25 | 26 | .itemFlatNumber { 27 | background: #7d7e7d; 28 | } 29 | 30 | .activeItemNumber { 31 | background: linear-gradient(to bottom, #f9c667 0%, #f79621 100%); 32 | } 33 | 34 | .activeFlatItemNumber { 35 | background: #F8A50A; 36 | } 37 | 38 | .doneItemNumber { 39 | background: linear-gradient(to bottom, #a4b357 0%, #75890c 100%); 40 | } 41 | 42 | .doneFlatItemNumber { 43 | background: #81941F; 44 | } 45 | 46 | .arrow { 47 | margin-bottom: -5px; 48 | } 49 | 50 | .text { 51 | color: #706D6D; 52 | font-weight: 700; 53 | font-size: 0.7em; 54 | padding: 0.5em; 55 | } 56 | 57 | .status { 58 | color: #706D6D; 59 | font-weight: 700; 60 | font-size: 0.8em; 61 | padding: 0.1em; 62 | } 63 | 64 | .outline { 65 | box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.2), inset 0 2px 0 0 rgba(200, 200, 200, 0.1); 66 | display: block; 67 | position: absolute; 68 | z-index: 1; 69 | width: 100%; 70 | top: 10px; 71 | height: 9px; 72 | border-top: @border; 73 | border-bottom: @border; 74 | } 75 | 76 | .numberOutline { 77 | position: relative; 78 | z-index: 2; 79 | box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.3), inset 0 2px 0 0 rgba(200, 200, 200, 0.2), inset 0 -1px 0 0 rgba(200, 200, 200, 0.3), inset 0 -2px 0 0 rgba(200, 200, 200, 0.2); 80 | background: #fff; 81 | display: inline-block; 82 | text-align: center; 83 | height: @size + @outlineSize; 84 | width: @size + @outlineSize; 85 | left: auto; 86 | right: auto; 87 | margin-left: -(@outlineSize / 2); 88 | margin-top: -(@outlineSize / 2); 89 | border-radius: @size + @outlineSize; 90 | } 91 | 92 | .outlineFirst { 93 | border-left: @border; 94 | border-bottom-left-radius: 9px; 95 | border-top-left-radius: 9px; 96 | } 97 | 98 | .outlineLast { 99 | border-right: @border; 100 | border-bottom-right-radius: 9px; 101 | border-top-right-radius: 9px; 102 | } 103 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import React from 'react'; 4 | import {render} from 'react-dom'; 5 | import Steps from 'react-steps'; 6 | 7 | var json = [ 8 | { 9 | "text": "First finished step", 10 | "isActive": false, 11 | "isDone": true 12 | }, 13 | { 14 | "text": "Second finished step", 15 | "isActive": false, 16 | "isDone": true 17 | }, 18 | { 19 | "text": "Active step", 20 | "isActive": true, 21 | "isDone": false 22 | }, 23 | { 24 | "text": "Unfinished step", 25 | "isActive": false, 26 | "isDone": false 27 | } 28 | ]; 29 | 30 | class Example extends React.Component { 31 | render() { 32 | return ( 33 |
39 | {this.props.children} 40 |
41 | ); 42 | } 43 | } 44 | 45 | class Code extends React.Component { 46 | render() { 47 | return ( 48 |
51 | 
 52 |                     {this.props.children}
 53 |
54 |
55 | ); 56 | } 57 | } 58 | 59 | class App extends React.Component { 60 | render() { 61 | const {data} = this.props; 62 | 63 | return ( 64 |
65 | 66 | {""} 67 | 68 | 69 | 70 | 71 | {''} 72 | 74 | 75 | 76 | 77 | {""} 78 | 79 | 80 | 81 | 82 | {""} 83 | 84 | 85 | 86 | 87 | {""} 88 | 89 | 90 | 91 | 92 | {""} 93 | 94 | 95 | 96 | 97 | {""} 98 | 99 | 100 |
101 | ); 102 | } 103 | } 104 | 105 | render(, document.getElementById("app")); 106 | -------------------------------------------------------------------------------- /dist/react-steps.js: -------------------------------------------------------------------------------- 1 | !function(root,factory){if("object"==typeof exports&&"object"==typeof module)module.exports=factory(require("react"));else if("function"==typeof define&&define.amd)define(["react"],factory);else{var a=factory("object"==typeof exports?require("react"):root.react);for(var i in a)("object"==typeof exports?exports:root)[i]=a[i]}}(this,function(__WEBPACK_EXTERNAL_MODULE_1__){return function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:!1};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.p="",__webpack_require__(0)}([function(module,exports,__webpack_require__){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{"default":obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(self,call){if(!self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!call||"object"!=typeof call&&"function"!=typeof call?self:call}function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:!1,writable:!0,configurable:!0}}),superClass&&(Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(target){for(var i=1;i1&&void 0!==arguments[1]?arguments[1]:{},stylesObj=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},otherStyle=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},classNamesObj=Object.keys(stylesObj).map(function(key){return stylesObj[key]?styleClassNames[key]:null}),style=Object.keys(stylesObj).reduce(function(acc,key){return stylesObj[key]?_extends({},acc,propStyles[key]):acc},{});return{style:_extends({},style,otherStyle),className:(0,_classnames2["default"])(classNamesObj)}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.mergeStyles=void 0;var _extends=Object.assign||function(target){for(var i=1;i=0&&styleElementsInsertedAtTop.splice(idx,1)}function createStyleElement(options){var styleElement=document.createElement("style");return styleElement.type="text/css",insertStyleElement(options,styleElement),styleElement}function createLinkElement(options){var linkElement=document.createElement("link");return linkElement.rel="stylesheet",insertStyleElement(options,linkElement),linkElement}function addStyle(obj,options){var styleElement,update,remove;if(options.singleton){var styleIndex=singletonCounter++;styleElement=singletonElement||(singletonElement=createStyleElement(options)),update=applyToSingletonTag.bind(null,styleElement,styleIndex,!1),remove=applyToSingletonTag.bind(null,styleElement,styleIndex,!0)}else obj.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(styleElement=createLinkElement(options),update=updateLink.bind(null,styleElement),remove=function(){removeStyleElement(styleElement),styleElement.href&&URL.revokeObjectURL(styleElement.href)}):(styleElement=createStyleElement(options),update=applyToTag.bind(null,styleElement),remove=function(){removeStyleElement(styleElement)});return update(obj),function(newObj){if(newObj){if(newObj.css===obj.css&&newObj.media===obj.media&&newObj.sourceMap===obj.sourceMap)return;update(obj=newObj)}else remove()}}function applyToSingletonTag(styleElement,index,remove,obj){var css=remove?"":obj.css;if(styleElement.styleSheet)styleElement.styleSheet.cssText=replaceText(index,css);else{var cssNode=document.createTextNode(css),childNodes=styleElement.childNodes;childNodes[index]&&styleElement.removeChild(childNodes[index]),childNodes.length?styleElement.insertBefore(cssNode,childNodes[index]):styleElement.appendChild(cssNode)}}function applyToTag(styleElement,obj){var css=obj.css,media=obj.media;if(media&&styleElement.setAttribute("media",media),styleElement.styleSheet)styleElement.styleSheet.cssText=css;else{for(;styleElement.firstChild;)styleElement.removeChild(styleElement.firstChild);styleElement.appendChild(document.createTextNode(css))}}function updateLink(linkElement,obj){var css=obj.css,sourceMap=obj.sourceMap;sourceMap&&(css+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))))+" */");var blob=new Blob([css],{type:"text/css"}),oldSrc=linkElement.href;linkElement.href=URL.createObjectURL(blob),oldSrc&&URL.revokeObjectURL(oldSrc)}var stylesInDom={},memoize=function(fn){var memo;return function(){return"undefined"==typeof memo&&(memo=fn.apply(this,arguments)),memo}},isOldIE=memoize(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),getHeadElement=memoize(function(){return document.head||document.getElementsByTagName("head")[0]}),singletonElement=null,singletonCounter=0,styleElementsInsertedAtTop=[];module.exports=function(list,options){options=options||{},"undefined"==typeof options.singleton&&(options.singleton=isOldIE()),"undefined"==typeof options.insertAt&&(options.insertAt="bottom");var styles=listToStyles(list);return addStylesToDom(styles,options),function(newList){for(var mayRemove=[],i=0;i 1 && arguments[1] !== undefined ? arguments[1] : {};\n\t var stylesObj = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\t var otherStyle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n\t\n\t var classNamesObj = Object.keys(stylesObj).map(function (key) {\n\t return stylesObj[key] ? styleClassNames[key] : null;\n\t });\n\t var style = Object.keys(stylesObj).reduce(function (acc, key) {\n\t return stylesObj[key] ? _extends({}, acc, propStyles[key]) : acc;\n\t }, {});\n\t\n\t return {\n\t style: _extends({}, style, otherStyle),\n\t className: (0, _classnames2.default)(classNamesObj)\n\t };\n\t}\n\t\n\texports.mergeStyles = mergeStyles;\n\n/***/ },\n/* 3 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;'use strict';\n\t\n\tvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\t\n\t/*!\n\t Copyright (c) 2016 Jed Watson.\n\t Licensed under the MIT License (MIT), see\n\t http://jedwatson.github.io/classnames\n\t*/\n\t/* global define */\n\t\n\t(function () {\n\t\t'use strict';\n\t\n\t\tvar hasOwn = {}.hasOwnProperty;\n\t\n\t\tfunction classNames() {\n\t\t\tvar classes = [];\n\t\n\t\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\t\tvar arg = arguments[i];\n\t\t\t\tif (!arg) continue;\n\t\n\t\t\t\tvar argType = typeof arg === 'undefined' ? 'undefined' : _typeof(arg);\n\t\n\t\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\t\tclasses.push(arg);\n\t\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\t\tclasses.push(classNames.apply(null, arg));\n\t\t\t\t} else if (argType === 'object') {\n\t\t\t\t\tfor (var key in arg) {\n\t\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\n\t\t\treturn classes.join(' ');\n\t\t}\n\t\n\t\tif (typeof module !== 'undefined' && module.exports) {\n\t\t\tmodule.exports = classNames;\n\t\t} else if (\"function\" === 'function' && _typeof(__webpack_require__(4)) === 'object' && __webpack_require__(4)) {\n\t\t\t// register as 'classnames', consistent with npm package name\n\t\t\t!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {\n\t\t\t\treturn classNames;\n\t\t\t}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\t\t} else {\n\t\t\twindow.classNames = classNames;\n\t\t}\n\t})();\n\n/***/ },\n/* 4 */\n/***/ function(module, exports) {\n\n\t/* WEBPACK VAR INJECTION */(function(__webpack_amd_options__) {module.exports = __webpack_amd_options__;\r\n\t\n\t/* WEBPACK VAR INJECTION */}.call(exports, {}))\n\n/***/ },\n/* 5 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\t\n\tvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\t\n\tvar _react = __webpack_require__(1);\n\t\n\tvar _react2 = _interopRequireDefault(_react);\n\t\n\tvar _classnames = __webpack_require__(3);\n\t\n\tvar _classnames2 = _interopRequireDefault(_classnames);\n\t\n\tvar _Circle = __webpack_require__(6);\n\t\n\tvar _Circle2 = _interopRequireDefault(_Circle);\n\t\n\tvar _utils = __webpack_require__(2);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\tfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\t\n\tfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\t\n\tfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\t\n\tvar size = 45;\n\t\n\tvar Circle = function (_React$Component) {\n\t _inherits(Circle, _React$Component);\n\t\n\t function Circle() {\n\t _classCallCheck(this, Circle);\n\t\n\t return _possibleConstructorReturn(this, (Circle.__proto__ || Object.getPrototypeOf(Circle)).apply(this, arguments));\n\t }\n\t\n\t _createClass(Circle, [{\n\t key: 'render',\n\t value: function render() {\n\t var _props = this.props,\n\t item = _props.item,\n\t flat = _props.flat,\n\t idx = _props.idx;\n\t\n\t\n\t var status = 'This Step is Undone.';\n\t\n\t if (item.isActive) {\n\t status = 'This Step is Active.';\n\t } else if (item.isDone) {\n\t status = 'This Step is Done.';\n\t }\n\t\n\t return _react2.default.createElement(\n\t 'div',\n\t (0, _utils.mergeStyles)(_Circle2.default, this.props.styles, { item: true }),\n\t _react2.default.createElement(\n\t 'div',\n\t (0, _utils.mergeStyles)(_Circle2.default, this.props.styles, {\n\t number: true,\n\t itemFlatNumber: flat,\n\t activeFlatItemNumber: flat && item.isActive,\n\t activeItemNumber: !flat && item.isActive,\n\t doneFlatItemNumber: flat && item.isDone,\n\t doneItemNumber: !flat && item.isDone\n\t }),\n\t idx + 1\n\t ),\n\t _react2.default.createElement(\n\t 'div',\n\t (0, _utils.mergeStyles)(_Circle2.default, this.props.styles, { labels: true }),\n\t _react2.default.createElement(\n\t 'div',\n\t (0, _utils.mergeStyles)(_Circle2.default, this.props.styles, { text: true }),\n\t item.text\n\t ),\n\t _react2.default.createElement(\n\t 'div',\n\t (0, _utils.mergeStyles)(_Circle2.default, this.props.styles, { status: true }),\n\t status\n\t )\n\t )\n\t );\n\t }\n\t }]);\n\t\n\t return Circle;\n\t}(_react2.default.Component);\n\t\n\texports.default = Circle;\n\n/***/ },\n/* 6 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t// style-loader: Adds some css to the DOM by adding a