Init

Preview: http://dashboards.webkom.co/react/airframe

app/components/Wizard/Wizard.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+
+import './../../styles/components/wizard.scss';
+
+export class Wizard extends React.Component {
+    static propTypes = {
+        children: PropTypes.node,
+        onStepChanged: PropTypes.func,
+        activeStep: PropTypes.string,
+        initialActiveStep: PropTypes.string
+    }
+
+    componentDidMount() {
+        const { initialActiveStep, activeStep, onStepChanged } = this.props;
+
+        if (activeStep && !onStepChanged) {
+            // eslint-disable-next-line no-console
+            console.warn(
+                'Warning: You need to provide onStepChanged props if you want the ' +
+                'component to be controlled. For uncontrolled type, use initialActiveStep.'
+            );
+        }
+
+        if (!onStepChanged) {
+            this.setState({
+                activeStep: initialActiveStep || activeStep
+            })
+        }
+    }
+
+    stepClick(id) {
+        this.setState({
+            activeStep: id
+        });
+
+        this.props.onStepChanged(id);
+    }
+
+    getActiveStep() {
+        const { activeStep, onStepChanged } = this.props;
+        if (_.isUndefined(activeStep) || _.isUndefined(onStepChanged)) {
+            return this.state.activeStep;
+        }
+        return this.props.activeStep;
+    }
+
+    render() {
+        const { children } = this.props;
+        const activeStep = this.getActiveStep();
+
+        return (
+            <div className='wizard'>
+                {
+                    _.map(children, (child, index) => (
+                        React.cloneElement(child, {
+                            onClick: () => {this.stepClick(child.props.id || '')},
+                            active: child.props.id === activeStep,
+                            key: index
+                        })
+                    ))
+                }
+            </div>
+        );
+    }
+}

app/components/Wizard/WizardStep.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export const WizardStep = props => {
+    const stepClass = classNames({
+        'wizard-step--active': props.active,
+        'wizard-step--complete': props.complete,
+        'wizard-step--disabled': props.disabled
+    }, 'wizard-step', props.className);
+
+    return (
+        <a href="javascript:;" className={stepClass} onClick={() => !props.disabled && props.onClick()}>
+            <div className='wizard-step__icon'>
+                { !props.complete ? props.icon : props.successIcon }
+            </div>
+            <div className='wizard-step__content'>
+                { props.children }
+            </div>
+        </a>
+    )
+};
+
+WizardStep.defaultProps = {
+    successIcon: (<i className='fa fa-check fa-fw'></i>),
+    onClick: () => {}
+}
+
+WizardStep.propTypes = {
+    active: PropTypes.bool,
+    complete: PropTypes.bool,
+    disabled: PropTypes.bool,
+    className: PropTypes.string,
+    id: PropTypes.string.required,
+    onClick: PropTypes.func.required,
+    icon: PropTypes.node,
+    successIcon: PropTypes.node,
+    children: PropTypes.node
+}

app/components/Wizard/index.js

@@ -0,0 +1,6 @@
+import { Wizard } from './Wizard';
+import { WizardStep } from './WizardStep';
+
+Wizard.Step = WizardStep;
+
+export default Wizard;