Start working on stepper component, test and working on horizontal st…

…epper using the same DOM structure

Add npm script coverage.

components/stepper/Stepper.scss

@@ -0,0 +1,191 @@
+
+.Stepper {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.Stepper-step-back {
+  display: none;
+}
+
+$no-steps: 10;
+
+// -- vertical --
+// titles
+@for $i from 1 through $no-steps {
+  .Stepper > .Stepper-title:nth-of-type(#{$i}) {
+    order: #{$i * 2 - 1};
+  }
+}
+
+// steps
+@for $i from 1 through $no-steps {
+  .Stepper > .Stepper-step:nth-of-type(#{$i}) {
+    order: #{$i * 2};
+  }
+}
+
+// -- horizontal --
+@include medium {
+  .Stepper--horizontal {
+    flex-direction: row;
+    padding: 0 24px;
+  }
+
+  .Stepper--horizontal .Stepper-circle {
+    margin: 0 8px;
+  }
+
+  .Stepper--horizontal .Stepper-title {
+    height: 72px;
+  }
+
+  .Stepper--horizontal .Stepper-title:last-of-type {
+    flex: 0;
+  }
+
+  .Stepper--horizontal > .Stepper-step .Stepper-line-wrapper,
+  .Stepper--horizontal .Stepper-title:last-of-type .Stepper-line-wrapper {
+    display: none;
+  }
+
+  .Stepper--horizontal > .Stepper-title .Stepper-line-wrapper {
+    flex: 1;
+    margin-left: 8px;
+  }
+
+  .Stepper--horizontal > .Stepper-title .Stepper-line {
+    height: 1px;
+    width: 100%;
+  }
+
+  .Stepper--horizontal > .Stepper-step > .Stepper-body {
+    min-height: 0;
+  }
+
+  // titles
+  @for $i from 1 through $no-steps {
+    .Stepper--horizontal > .Stepper-title:nth-of-type(#{$i}) {
+      order: #{$i};
+    }
+  }
+
+  // steps
+  @for $i from 1 through $no-steps {
+    .Stepper--horizontal > .Stepper-step:nth-of-type(#{$i}) {
+      order: $no-steps + 1;
+    }
+  }
+
+  .Stepper-footer {
+    justify-content: flex-end;
+  }
+
+  .Stepper-step-back {
+    display: flex;
+    align-self: flex-start;
+    flex: 1;
+  }
+
+  .Stepper-step-next,
+  .Stepper-step-cancel {
+    align-self: flex-end;
+  }
+}
+
+.Stepper-circle-wrapper > .Stepper-circle ~ .Stepper-line-wrapper {
+  display: none;
+}
+
+.Stepper-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+}
+
+.Stepper-circle:not(.Stepper--error) {
+  border-radius: 50%;
+  background-color: #bdbdbd;
+  color: #fff;
+}
+
+.Stepper--error > .Stepper-title-text,
+.Stepper--error > .Stepper-step-optional {
+  color: #f44336;
+}
+
+.Stepper--error svg {
+  fill: #f44336;
+}
+
+.Stepper-links {
+  display: flex;
+  flex-direction: row;
+}
+
+.Stepper-step {
+  flex-basis: 100%;
+}
+
+.Stepper-title {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: #bdbdbd;
+  flex: 1;
+  white-space: nowrap;
+}
+
+.Stepper-title.is-active {
+  color: #000;
+}
+
+.Stepper-title.is-active > .Stepper-circle-wrapper > .Stepper-circle:not(.Stepper--error) {
+  background-color: #2196f3;
+  color: #fff;
+}
+
+.Stepper-body {
+  display: flex;
+  min-height: 24px;
+}
+
+.Stepper-body.is-last {
+  min-height: 0;
+}
+
+.Stepper-line-wrapper {
+  display: flex;
+  justify-content: center;
+  width: 24px;
+}
+
+.Stepper-line {
+  width: 1px;
+  background-color: #bdbdbd;
+}
+
+.Stepper-content-wrapper {
+  flex: 1;
+}
+
+.Stepper-content {
+  margin-left: 12px;
+}
+
+.Stepper-footer {
+  display: flex;
+  margin-top: 16px;
+  // button has outer margin of 4
+  padding-left: 8px;
+}
+
+.Stepper-title.is-active > .Stepper-title-text-wrapper:not(.Stepper--error) > .Stepper-step-optional {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.54);
+}

components/stepper/index.js

@@ -0,0 +1,164 @@
+
+import React from 'react'
+import classnames from 'classnames'
+import {Subscriber} from 'react-broadcast'
+import {Icon, Button} from '../../'
+import {Link, Match} from 'react-router'
+
+export const StepperStepFooter = ({labelBack, labelNext, labelCancel, onBack, onNext, onCancel}) => (
+  <div className='Stepper-footer'>
+    {(labelBack)
+      ? <div className='Stepper-step-back'>
+        <Button onClick={onBack}>
+          {labelBack}
+        </Button>
+      </div>
+      : null
+    }
+    {(labelNext && onNext)
+      ? <div className='Stepper-step-next'>
+        <Button onClick={onNext}>
+          {labelNext}
+        </Button>
+      </div>
+      : null
+    }
+    {(labelCancel && onCancel)
+      ? <div className='Stepper-step-cancel'>
+        <Button onClick={onCancel}>
+          {labelCancel}
+        </Button>
+      </div>
+      : null
+    }
+  </div>
+)
+
+const StepLink = ({index, step, isActive}) => (
+  <Link
+    className='Stepper-title'
+    activeClassName='is-active'
+    to={step.href}
+  >
+    <div className={classnames(
+      'Stepper-circle-wrapper',
+      {'Stepper-circle-wrapper--alternative': step.alternative}
+    )}>
+      <div className={classnames(
+        'Stepper-circle',
+        {'Stepper--error': step.error},
+        {'is-active': isActive}
+      )}>
+        {step.error
+          ? Icon['ReportProblem']()
+          : index + 1
+        }
+      </div>
+      <StepLine />
+    </div>
+    <div className={classnames(
+        'Stepper-title-text-wrapper',
+        {'Stepper--error': step.error}
+      )}>
+      <div className='Stepper-title-text'>
+        {step.title}
+      </div>
+      {step.optional || step.error
+        ? <div className={'Stepper-step-optional'}>
+          {step.error ? step.error.message : step.optional}
+        </div>
+        : null
+      }
+    </div>
+    <StepLine />
+  </Link>
+)
+
+const StepLine = () => (
+  <div className='Stepper-line-wrapper'>
+    <div className='Stepper-line' />
+  </div>
+)
+
+const Step = ({index, step, isActive, isLast, onNext, onCancel, onError}) => (
+  <div className='Stepper-step'>
+    <div className={classnames('Stepper-body', {
+      'is-last': isLast
+    })}>
+      <StepLine />
+      <div className='Stepper-content-wrapper'>
+        <div className='Stepper-content'>
+          <Match pattern={step.href} render={() => (
+            <step.component
+              index={index}
+              isLast={isLast}
+              cancel={() => onCancel()}
+              back={() => onNext(index - 1)}
+              next={() => onNext(index + 1)}
+              error={(message) => onError(message)}
+            />
+          )} />
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+export class Stepper extends React.Component {
+
+  static contextTypes = {
+    router: React.PropTypes.object
+  }
+
+  onNext = (index) => {
+    const next = this.props.steps[index]
+    if (next) {
+      this.context.router.transitionTo(next.href)
+    }
+  }
+
+  render () {
+    return (
+      <Subscriber channel='location'>
+        {location => (
+          <div className={classnames('Stepper', {
+            'Stepper--horizontal': this.props.horizontal
+          })}>
+            {this.props.steps.map((s, i) => (
+              <StepLink
+                key={i}
+                index={i}
+                step={s}
+                isActive={location.pathname === s.href}
+              />
+            ))}
+            {this.props.steps.map((s, i) => (
+              <Step
+                key={i}
+                index={i}
+                step={s}
+                isActive={location.pathname === s.href}
+                isLast={this.props.steps.length - 1 === i}
+                onNext={(index) => this.onNext(index)}
+                onCancel={() => this.props.onCancel(i)}
+                onError={(message) => this.props.onError(i, message)}
+              />
+            ))}
+          </div>
+        )}
+      </Subscriber>
+    )
+  }
+}
+
+Stepper.propTypes = {
+  steps: React.PropTypes.arrayOf(React.PropTypes.shape({
+    title: React.PropTypes.string.isRequired,
+    href: React.PropTypes.string.isRequired,
+    component: React.PropTypes.func.isRequired,
+    optional: React.PropTypes.string
+  })).isRequired,
+  horizontal: React.PropTypes.bool,
+  onCancel: React.PropTypes.func,
+  onError: React.PropTypes.func
+}