forked from bulwark-crypto/bulwark-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
203 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; } | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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() | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
) | ||
} | ||
} |