Merge 398e203 into 93f675f

react/Stepper.jsx

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {pickRest} from '../lib/utils'
+
+import Icon from './Icon'
+
+// Step
+export const Step = () => null
+
+Step.propTypes = {
+  active: PropTypes.bool,
+  complete: PropTypes.bool,
+  title: PropTypes.string.isRequired
+}
+
+// Stepper
+export class Stepper extends React.Component {
+  static propTypes = {
+    children: PropTypes.any.isRequired,
+    index: PropTypes.number.isRequired,
+    vertical: PropTypes.bool
+  }
+
+  render () {
+    const [mods, {children, ...rest}] = pickRest(this.props, ['vertical'])
+
+    let content = null
+    const steps = (Array.isArray(children) ? children : [children]).map((s, i) => {
+      const active = i === this.props.index
+      const complete = i < this.props.index
+      if (active) content = s.props.children
+      return (
+        <div block='stepper' elem='step' mods={{active, complete}} key={i}>
+          <span block='stepper__step' elem='indicator'>{active || complete ? <Icon k='check' /> : i}</span>
+          <span block='stepper__step' elem='title'>{s.props.title}</span>
+          <div block='stepper__step' elem='bar' />
+        </div>
+      )
+    })
+
+    return (
+      <div block='stepper' mods={mods} {...rest}>
+        <div block='stepper' elem='steps'>{steps}</div>
+        <div block='stepper' elem='content'>{content}</div>
+      </div>
+    )
+  }
+}

sass/_library.scss

@@ -13,6 +13,7 @@
 @import 'inc/pagination';
 @import 'inc/panel';
 @import 'inc/reset';
+@import 'inc/stepper';
 @import 'inc/tab';
 @import 'inc/text';
 @import 'inc/tooltip';

sass/inc/_stepper.scss

@@ -0,0 +1,59 @@
+
+.stepper {
+  &__content {
+    padding: 32px;
+  }
+
+  &__steps {
+
+  }
+
+  &__step {
+    color: $secondary;
+    display: inline-block;
+    font-size: 14px;
+    line-height: 19px;
+
+    $self: &;
+
+    &--active {
+      #{$self}__indicator {
+        background-color: $primary;
+        color: $white;
+        padding: 9px 12px;
+      }
+    }
+
+    &--complete {
+      #{$self}__indicator {
+        background-color: $black;
+        color: $secondary;
+        padding: 9px 12px;
+      }
+    }
+
+    &__bar {
+      border-top: 1px solid $secondary;
+      display: inline-block;
+      height: 5px;
+      margin-right: 21px;
+      margin-top: -2px;
+      min-width: 100px;
+      width: 100px;
+    }
+
+    &__indicator {
+      background-color: $black;
+      border-radius: 50%;
+      color: $white;
+      font-size: 16px;
+      height: 35px;
+      line-height: 21px;
+      margin-right: 9px;
+      padding: 7px 13px;
+      width: 35px;
+    }
+
+    &__title { margin-right: 40px; }
+  }
+}

test/Stepper.test.js

@@ -0,0 +1,55 @@
+/* global describe, it */
+import React from 'react'
+import expect from 'must'
+import { shallow } from 'enzyme'
+import Button from '../react/Button'
+import {Step, Stepper} from '../react/Stepper'
+
+describe('<Step />', () => {
+  const wrapper = shallow(<Step title='Test'>Testing</Step>)
+
+  it('renders no children', () => {
+    expect(wrapper.children()).to.have.length(0)
+  })
+})
+
+describe('<Stepper />', () => {
+  let index = 0
+  const handleBack = () => { index-- }
+  const handleNext = () => { index++ }
+  const wrapper = shallow(
+    <Stepper index={index}>
+      <Step title='Test 1'>
+        <p>Alpha</p>
+        <Button outline onClick={handleNext}>Next</Button>
+      </Step>
+      <Step title='Test 2'>
+        <p>Bravo</p>
+        <Button outline onClick={handleBack}>Back</Button>
+        <Button outline onClick={handleNext}>Next</Button>
+      </Step>
+    </Stepper>
+  )
+
+  it('renders as a div', () => {
+    expect(wrapper.is('div')).to.be.true()
+    expect(wrapper.hasClass('stepper')).to.be.true()
+  })
+
+  it('moves index for next step', () => {
+    wrapper.find('.stepper__content').childAt(1).simulate('click')
+    expect(index).to.equal(1)
+  })
+
+  it('converts children into array if single step', () => {
+    const wrapper2 = shallow(
+      <Stepper index={0}>
+        <Step title='Test 1'>
+          <p>Alpha</p>
+          <Button outline onClick={f => f}>Next</Button>
+        </Step>
+      </Stepper>
+    )
+    expect(!!wrapper2).to.be.true()
+  })
+})

todo/App.jsx

@@ -14,6 +14,7 @@ import {Navbar, NavbarLink} from '../react/Navbar'
 import PaginationDemo from './Section/PaginationDemo'
 import PanelDemo from './Section/PanelDemo'
 import SelectInputDemo from './Section/SelectInputDemo'
+import StepperDemo from './Section/StepperDemo'
 import TabDemo from './Section/TabDemo'
 import TextInputDemo from './Section/TextInputDemo'
 import TooltipDemo from './Section/TooltipDemo'
@@ -59,6 +60,7 @@ class App extends React.Component {
           <MenuDemo />
           <TabDemo />
           <PaginationDemo />
+          <StepperDemo />
         </div>
         <div style={{height: 100}} />
       </div>

todo/Section/StepperDemo.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import Button from '../../react/Button'
+import {Step, Stepper} from '../../react/Stepper'
+
+export default class StepperDemo extends React.Component {
+  state = {
+    index: 0
+  }
+
+  handleBack = () => this.setState({index: this.state.index <= 0 ? 0 : this.state.index - 1})
+
+  handleNext = () => this.setState({index: this.state.index >= 2 ? 2 : this.state.index + 1})
+
+  render () {
+    return (
+      <div>
+        <h3>Stepper</h3>
+        <Stepper index={this.state.index}>
+          <Step title='Initialize Hardware'>
+            <p>How do we know that rain isn't tears falling from sad clouds?</p>
+            <Button outline onClick={this.handleNext}>Next</Button>
+          </Step>
+          <Step title='Encrypt Wallet'>
+            <p>They could be but you've never asked a cloud, have you?</p>
+            <Button outline onClick={this.handleBack}>Back</Button>
+            <Button outline onClick={this.handleNext}>Next</Button>
+          </Step>
+          <Step title='Begin!'>
+            <p>Birds fly but ostriches can’t and they are birds. I wonder if there is a reason behind that.</p>
+            <Button outline onClick={this.handleBack}>Back</Button>
+            <Button outline onClick={this.handleNext}>Finish</Button>
+          </Step>
+        </Stepper>
+      </div>
+    )
+  }
+}