├── .env ├── src ├── components │ ├── Item │ │ ├── Item.sass │ │ ├── index.js │ │ ├── Item.story.js │ │ └── Item.js │ ├── App │ │ ├── index.js │ │ ├── App.sass │ │ └── App.js │ ├── Box │ │ ├── index.js │ │ ├── Box.sass │ │ ├── Box.js │ │ └── Box.story.js │ ├── Form │ │ ├── index.js │ │ ├── Form.test.js │ │ ├── Form.js │ │ └── __snapshots__ │ │ │ └── Form.test.js.snap │ ├── Step │ │ ├── index.js │ │ ├── Step.story.js │ │ ├── Step.js │ │ └── Step.sass │ ├── Button │ │ ├── index.js │ │ ├── __snapshots__ │ │ │ └── Button.test.js.snap │ │ ├── Button.js │ │ ├── Button.sass │ │ ├── Button.story.js │ │ └── Button.test.js │ ├── Container │ │ ├── Container.sass │ │ ├── index.js │ │ ├── Container.test.js │ │ ├── __snapshots__ │ │ │ └── Container.test.js.snap │ │ ├── Container.js │ │ └── Container.story.js │ ├── Header │ │ ├── index.js │ │ ├── Header.sass │ │ ├── Header.js │ │ └── Header.story.js │ ├── StepsWrapper │ │ ├── StepsWrapper.sass │ │ ├── index.js │ │ ├── StepsWrapper.story.js │ │ └── StepsWrapper.js │ ├── InputText │ │ ├── index.js │ │ ├── InputText.sass │ │ ├── InputText.story.js │ │ └── InputText.js │ ├── SelectBox │ │ ├── index.js │ │ ├── SelectBox.sass │ │ ├── SelectBox.story.js │ │ └── SelectBox.js │ ├── InputToggle │ │ ├── index.js │ │ ├── InputToggle.story.js │ │ ├── InputToggle.sass │ │ └── InputToggle.js │ ├── ProgressBar │ │ ├── index.js │ │ ├── ProgressBar.sass │ │ ├── ProgressBar.story.js │ │ └── ProgressBar.js │ └── InputCheckBox │ │ ├── index.js │ │ ├── InputCheckBox.story.js │ │ ├── InputCheckBox.sass │ │ └── InputCheckBox.js ├── css │ ├── index.sass │ └── _variables.sass ├── containers │ ├── LastStep │ │ ├── index.js │ │ ├── container.js │ │ └── LastStep.js │ ├── ComposeAllForms │ │ ├── index.js │ │ ├── constants.js │ │ ├── actions.js │ │ ├── container.js │ │ ├── reducer.js │ │ └── ComposeAllForms.js │ ├── FirstStepForm │ │ ├── index.js │ │ ├── actions.js │ │ ├── constants.js │ │ ├── container.js │ │ ├── sagas.js │ │ ├── reducer.js │ │ └── FirstStepForm.js │ ├── FivethStepForm │ │ ├── index.js │ │ ├── constants.js │ │ ├── actions.js │ │ ├── container.js │ │ ├── reducer.js │ │ ├── FivethStepForm.js │ │ └── sagas.js │ ├── FourthStepForm │ │ ├── index.js │ │ ├── actions.js │ │ ├── constants.js │ │ ├── container.js │ │ ├── sagas.js │ │ ├── reducer.js │ │ └── FourthStepForm.js │ ├── SecondStepForm │ │ ├── index.js │ │ ├── actions.js │ │ ├── constants.js │ │ ├── container.js │ │ ├── sagas.js │ │ ├── reducer.js │ │ └── SecondStepForm.js │ └── ThirdStepForm │ │ ├── index.js │ │ ├── actions.js │ │ ├── constants.js │ │ ├── container.js │ │ ├── sagas.js │ │ ├── reducer.js │ │ └── ThirdStepForm.js ├── index.js ├── sagas │ └── index.js ├── api │ └── index.js └── store │ └── index.js ├── .babelrc ├── .eslintignore ├── .storybook ├── config.js └── webpack.config.js ├── .gitignore ├── public └── index.html ├── config └── webpack.rules.js ├── jestconfig.json ├── webpack.config.js ├── .eslintrc.js ├── package.json ├── README.md └── README-CREATE-REACT-APP.md /.env: -------------------------------------------------------------------------------- 1 | NODE_PATH=src/ -------------------------------------------------------------------------------- /src/components/Item/Item.sass: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/index.sass: -------------------------------------------------------------------------------- 1 | body 2 | margin: 0 3 | padding: 0 4 | -------------------------------------------------------------------------------- /src/components/App/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './App'; 2 | -------------------------------------------------------------------------------- /src/components/Box/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Box'; 2 | -------------------------------------------------------------------------------- /src/components/Form/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Form'; 2 | -------------------------------------------------------------------------------- /src/components/Item/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Item'; 2 | -------------------------------------------------------------------------------- /src/components/Step/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Step'; 2 | -------------------------------------------------------------------------------- /src/components/Button/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Button'; 2 | -------------------------------------------------------------------------------- /src/components/Container/Container.sass: -------------------------------------------------------------------------------- 1 | .container 2 | display: flex -------------------------------------------------------------------------------- /src/components/Header/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Header'; 2 | -------------------------------------------------------------------------------- /src/components/StepsWrapper/StepsWrapper.sass: -------------------------------------------------------------------------------- 1 | @import 'css/variables' 2 | -------------------------------------------------------------------------------- /src/components/Container/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Container'; 2 | -------------------------------------------------------------------------------- /src/components/InputText/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './InputText'; 2 | -------------------------------------------------------------------------------- /src/components/SelectBox/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './SelectBox'; 2 | -------------------------------------------------------------------------------- /src/containers/LastStep/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './container'; 2 | -------------------------------------------------------------------------------- /src/components/InputToggle/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './InputToggle'; 2 | -------------------------------------------------------------------------------- /src/components/ProgressBar/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './ProgressBar'; 2 | -------------------------------------------------------------------------------- /src/components/StepsWrapper/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './StepsWrapper'; 2 | -------------------------------------------------------------------------------- /src/containers/ComposeAllForms/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './container'; 2 | -------------------------------------------------------------------------------- /src/containers/FirstStepForm/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './container'; 2 | -------------------------------------------------------------------------------- /src/containers/FivethStepForm/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './container'; 2 | -------------------------------------------------------------------------------- /src/containers/FourthStepForm/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './container'; 2 | -------------------------------------------------------------------------------- /src/containers/SecondStepForm/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './container'; 2 | -------------------------------------------------------------------------------- /src/containers/ThirdStepForm/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './container'; 2 | -------------------------------------------------------------------------------- /src/components/InputCheckBox/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './InputCheckBox'; 2 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "react"], 3 | "plugins": ["transform-object-rest-spread"] 4 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | public/ 2 | node_modules/* 3 | **/node_modules/* 4 | *.config.js 5 | *.config.production.js 6 | src/**/*.test.js 7 | src/utils/**/*.js -------------------------------------------------------------------------------- /src/containers/ComposeAllForms/constants.js: -------------------------------------------------------------------------------- 1 | export const COMPOSE_FORM_UPDATE = 'COMPOSE_FORM_UPDATE'; 2 | export const COMPOSE_NEXT_STEP = 'COMPOSE_NEXT_STEP'; 3 | -------------------------------------------------------------------------------- /src/components/Header/Header.sass: -------------------------------------------------------------------------------- 1 | @import 'css/variables' 2 | 3 | .header 4 | border-bottom: 1px solid $gray-light 5 | padding-bottom: 20px 6 | margin-bottom: 20px 7 | -------------------------------------------------------------------------------- /src/components/Box/Box.sass: -------------------------------------------------------------------------------- 1 | @import 'css/variables' 2 | 3 | .box 4 | border: 1px solid $gray-light 5 | border-radius: $border-radius 6 | background-color: $background-default 7 | padding: 20px 8 | 9 | .content 10 | padding: 20px 0 -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | const context = require.context('../src', true, /\.story\.js$/); 4 | 5 | function loadStories() { 6 | context.keys().forEach(context); 7 | } 8 | 9 | configure(loadStories, module); -------------------------------------------------------------------------------- /src/containers/FirstStepForm/actions.js: -------------------------------------------------------------------------------- 1 | import { 2 | FIRST_STEP_CHANGE_CHECKBOX, 3 | } from './constants'; 4 | 5 | export const changeCheckBox = name => ({ 6 | type: FIRST_STEP_CHANGE_CHECKBOX, 7 | payload: { 8 | name, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /src/containers/FourthStepForm/actions.js: -------------------------------------------------------------------------------- 1 | import { 2 | FOURTH_STEP_CHANGE_SELECT, 3 | } from './constants'; 4 | 5 | export const onChangeSelect = value => ({ 6 | type: FOURTH_STEP_CHANGE_SELECT, 7 | payload: { 8 | value, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /src/containers/SecondStepForm/actions.js: -------------------------------------------------------------------------------- 1 | import { 2 | SECOND_STEP_CHANGE_RADIO, 3 | } from './constants'; 4 | 5 | export const changeRadio = name => ({ 6 | type: SECOND_STEP_CHANGE_RADIO, 7 | payload: { 8 | name, 9 | }, 10 | }); 11 | 12 | -------------------------------------------------------------------------------- /src/containers/ComposeAllForms/actions.js: -------------------------------------------------------------------------------- 1 | import { 2 | COMPOSE_FORM_UPDATE, 3 | } from './constants'; 4 | 5 | export const updateForm = (field, value) => ({ 6 | type: COMPOSE_FORM_UPDATE, 7 | payload: { 8 | field, 9 | value, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /src/containers/LastStep/container.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import LastStep from './LastStep'; 3 | 4 | /* istanbul ignore next */ 5 | const mapStateToProps = ({ dataForm }) => ({ 6 | dataForm, 7 | }); 8 | 9 | export default connect(mapStateToProps)(LastStep); 10 | -------------------------------------------------------------------------------- /src/containers/ComposeAllForms/container.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import ComposeAllForms from './ComposeAllForms'; 3 | 4 | /* istanbul ignore next */ 5 | const mapStateToProps = ({ dataForm }) => ({ dataForm }); 6 | 7 | export default connect(mapStateToProps)(ComposeAllForms); 8 | -------------------------------------------------------------------------------- /src/components/App/App.sass: -------------------------------------------------------------------------------- 1 | .app 2 | background: linear-gradient(to top right, rgba(255,82,99,0.9) 10%, rgba(255,115,129,0.9) 65%, rgba(252,189,1,0.9) 125%) 3 | background-image: linear-gradient(to right top, rgba(255, 82, 99, 0.9) 10%, rgba(255, 115, 129, 0.9) 65%, rgba(252, 189, 1, 0.9) 125%) 4 | height: 100vh -------------------------------------------------------------------------------- /src/containers/FirstStepForm/constants.js: -------------------------------------------------------------------------------- 1 | export const FIRST_STEP_CHANGE_CHECKBOX = 'FIRST_STEP_CHANGE_CHECKBOX'; 2 | export const FIRST_STEP_SHOW_PROGRESSBAR = 'FIRST_STEP_SHOW_PROGRESSBAR'; 3 | export const FIRST_STEP_HIDE_PROGRESSBAR = 'FIRST_STEP_HIDE_PROGRESSBAR'; 4 | export const FIRST_STEP_NEXT_STEP = 'FIRST_STEP_NEXT_STEP'; 5 | -------------------------------------------------------------------------------- /src/containers/FourthStepForm/constants.js: -------------------------------------------------------------------------------- 1 | export const FOURTH_STEP_CHANGE_SELECT = 'FOURTH_STEP_CHANGE_SELECT'; 2 | export const FOURTH_STEP_SHOW_PROGRESSBAR = 'FOURTH_STEP_SHOW_PROGRESSBAR'; 3 | export const FOURTH_STEP_HIDE_PROGRESSBAR = 'FOURTH_STEP_HIDE_PROGRESSBAR'; 4 | export const FOURTH_STEP_NEXT_STEP = 'FOURTH_STEP_NEXT_STEP'; 5 | -------------------------------------------------------------------------------- /src/containers/SecondStepForm/constants.js: -------------------------------------------------------------------------------- 1 | export const SECOND_STEP_CHANGE_RADIO = 'SECOND_STEP_CHANGE_RADIO'; 2 | export const SECOND_STEP_SHOW_PROGRESSBAR = 'SECOND_STEP_SHOW_PROGRESSBAR'; 3 | export const SECOND_STEP_HIDE_PROGRESSBAR = 'SECOND_STEP_HIDE_PROGRESSBAR'; 4 | export const SECOND_STEP_NEXT_STEP = 'SECOND_STEP_NEXT_STEP'; 5 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var webpackRules = require('../config/webpack.rules'); 3 | 4 | module.exports = (base) => { 5 | base.resolve.modules = ['node_modules', '../src']; 6 | base.module = Object.assign({}, base.module, { 7 | rules: webpackRules 8 | }) 9 | 10 | return base; 11 | }; 12 | -------------------------------------------------------------------------------- /src/components/Button/__snapshots__/Button.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Should component render text 1`] = ` 4 | 14 | 15 | `; 16 | -------------------------------------------------------------------------------- /src/components/Form/Form.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import uid from 'uid'; 3 | import { shallow, mount } from 'enzyme'; 4 | 5 | import Form from './Form'; 6 | 7 | test('Should component render text', () => { 8 | const text = 'text'; 9 | 10 | const wrapper = mount(
); 11 | 12 | expect(wrapper).toMatchSnapshot(); 13 | }); 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Provider } from 'react-redux'; 4 | 5 | import store from 'store'; 6 | import './css/index.sass'; 7 | import App from './components/App'; 8 | 9 | 10 | ReactDOM.render( 11 | 12 | 13 | 14 | , document.getElementById('root')); 15 | -------------------------------------------------------------------------------- /src/components/Item/Item.story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { withInfo, setDefaults } from '@storybook/addon-info'; 4 | 5 | import Item from './Item'; 6 | 7 | // addon-info 8 | setDefaults({ 9 | source: true, 10 | }); 11 | 12 | storiesOf('Item', module) 13 | .add('default', withInfo()(() => ( 14 | 15 | ))); 16 | -------------------------------------------------------------------------------- /src/containers/FivethStepForm/constants.js: -------------------------------------------------------------------------------- 1 | export const FIVETH_STEP_SUBMIT_FORM = 'FIVETH_STEP_SUBMIT_FORM'; 2 | export const FIVETH_STEP_SHOW_PROGRESSBAR = 'FIVETH_STEP_SHOW_PROGRESSBAR'; 3 | export const FIVETH_STEP_HIDE_PROGRESSBAR = 'FIVETH_STEP_HIDE_PROGRESSBAR'; 4 | export const FIVETH_STEP_NEXT_STEP = 'FIVETH_STEP_NEXT_STEP'; 5 | export const FIVETH_STEP_SHOW_MESSAGE = 'FIVETH_STEP_SHOW_MESSAGE'; 6 | -------------------------------------------------------------------------------- /src/css/_variables.sass: -------------------------------------------------------------------------------- 1 | // Fonts 2 | $font-stack: Helvetica, sans-serif; 3 | $font-size-sm: 12px 4 | $font-size-md: 18px 5 | $font-size-lg: 24px 6 | 7 | // Colors 8 | $gray-light: #aaa 9 | $gray-default: #848f99 10 | $background-default: #fff 11 | $default-blue: #14aaf5 12 | $light-blue: #32c1ff 13 | $light-blue-shadow: #95e0ff 14 | $red-warnning: #ff5263 15 | 16 | // Border 17 | $border-radius: 3px 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | /public/dist 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/containers/ThirdStepForm/actions.js: -------------------------------------------------------------------------------- 1 | import { 2 | THIRD_STEP_CHECK_TEXT, 3 | THIRD_STEP_CHANGE_INPUT, 4 | } from './constants'; 5 | 6 | export const checkText = value => ({ 7 | type: THIRD_STEP_CHECK_TEXT, 8 | payload: { 9 | value, 10 | }, 11 | }); 12 | 13 | export const changeInput = value => ({ 14 | type: THIRD_STEP_CHANGE_INPUT, 15 | payload: { 16 | value, 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /src/components/Container/Container.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import uid from 'uid'; 3 | import { shallow, mount } from 'enzyme'; 4 | 5 | import Container from './Container'; 6 | 7 | test('Should component render text', () => { 8 | const text = 'text'; 9 | 10 | const wrapper = mount({text}); 11 | 12 | expect(wrapper).toMatchSnapshot(); 13 | expect(wrapper.find('.container').text()).toEqual(text); 14 | }); 15 | -------------------------------------------------------------------------------- /src/containers/ThirdStepForm/constants.js: -------------------------------------------------------------------------------- 1 | export const THIRD_STEP_CHECK_TEXT = 'THIRD_STEP_CHECK_TEXT'; 2 | export const THIRD_STEP_SHOW_ERROR = 'THIRD_STEP_SHOW_ERROR'; 3 | export const THIRD_STEP_NEXT_STEP = 'THIRD_STEP_NEXT_STEP'; 4 | export const THIRD_STEP_CHANGE_INPUT = 'THIRD_STEP_CHANGE_INPUT'; 5 | export const THIRD_STEP_SHOW_PROGRESSSBAR = 'THIRD_STEP_SHOW_PROGRESSSBAR'; 6 | export const THIRD_STEP_HIDE_PROGRESSSBAR = 'THIRD_STEP_HIDE_PROGRESSSBAR'; 7 | 8 | -------------------------------------------------------------------------------- /src/components/Button/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import style from './Button.sass'; 5 | 6 | const Button = ({ onClick, text }) => ( 7 | 8 | ); 9 | 10 | Button.propTypes = { 11 | onClick: PropTypes.func.isRequired, 12 | text: PropTypes.string, 13 | }; 14 | 15 | Button.defaultProps = { 16 | text: '', 17 | }; 18 | 19 | export default Button; 20 | -------------------------------------------------------------------------------- /src/components/ProgressBar/ProgressBar.sass: -------------------------------------------------------------------------------- 1 | @import 'css/variables' 2 | 3 | .progress-bar 4 | background-color: rgba($light-blue, 0.2) 5 | padding: 0 6 | 7 | & > span 8 | display: inherit 9 | background-color: rgba($light-blue, 0.2) 10 | height: 15px 11 | animation-name: grow 12 | animation-duration: 3s 13 | animation-timing-function: linear 14 | width: 100% 15 | 16 | @keyframes grow 17 | from 18 | width: 0 19 | to 20 | width: 100% -------------------------------------------------------------------------------- /src/components/Button/Button.sass: -------------------------------------------------------------------------------- 1 | @import 'css/variables' 2 | 3 | 4 | .button 5 | border: 1px solid $default-blue 6 | border-radius: $border-radius 7 | background-color: $default-blue 8 | color: #fff 9 | font-size: $font-size-sm 10 | padding: 7px 10px 11 | outline: none 12 | 13 | &:hover 14 | cursor: pointer 15 | background: $light-blue 16 | border-color: $light-blue 17 | box-shadow: inset 0 0 transparent, 0 0 0 3px $light-blue-shadow 18 | transition: .2s 19 | 20 | -------------------------------------------------------------------------------- /config/webpack.rules.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, 3 | { 4 | test: /\.sass$/, 5 | use: [{ 6 | loader: "style-loader" 7 | }, { 8 | loader: "css-loader", 9 | options: { 10 | modules: true, 11 | sourceMap: true, 12 | localIdentName: '[local]___[hash:base64:5]', 13 | } 14 | }, { 15 | loader: "sass-loader", 16 | options: { 17 | includePaths: ["src"] 18 | } 19 | }] 20 | } 21 | ]; -------------------------------------------------------------------------------- /src/components/ProgressBar/ProgressBar.story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { withInfo, setDefaults } from '@storybook/addon-info'; 4 | 5 | import ProgressBar from './ProgressBar'; 6 | // addon-info 7 | setDefaults({ 8 | source: true, 9 | }); 10 | 11 | storiesOf('ProgressBar', module) 12 | .add('Default', withInfo({})(() => ( 13 | 14 | ))) 15 | .add('Duration .5s', withInfo({})(() => ( 16 | 17 | ))); 18 | -------------------------------------------------------------------------------- /src/containers/SecondStepForm/container.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import { changeRadio } from './actions'; 3 | import SecondStepForm from './SecondStepForm'; 4 | 5 | /* istanbul ignore next */ 6 | const mapStateToProps = ({ secondStepForm }) => ({ 7 | secondStepForm, 8 | }); 9 | 10 | /* istanbul ignore next */ 11 | const mapDispatchToProps = dispatch => ({ 12 | onClickRadio: name => dispatch(changeRadio(name)), 13 | }); 14 | 15 | export default connect(mapStateToProps, mapDispatchToProps)(SecondStepForm); 16 | -------------------------------------------------------------------------------- /src/components/ProgressBar/ProgressBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import style from './ProgressBar.sass'; 5 | 6 | const ProgressBar = ({ duration }) => ( 7 |
8 | {duration ? : } 9 |
10 | ); 11 | 12 | ProgressBar.propTypes = { 13 | duration: PropTypes.string, 14 | }; 15 | 16 | ProgressBar.defaultProps = { 17 | duration: '', 18 | }; 19 | 20 | export default ProgressBar; 21 | -------------------------------------------------------------------------------- /src/containers/FirstStepForm/container.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import { changeCheckBox } from './actions'; 3 | import FirstStepForm from './FirstStepForm'; 4 | 5 | /* istanbul ignore next */ 6 | const mapStateToProps = ({ firstStepForm }) => ({ 7 | firstStepForm, 8 | }); 9 | 10 | /* istanbul ignore next */ 11 | const mapDispatchToProps = dispatch => ({ 12 | onClickCheckBox: name => dispatch(changeCheckBox(name)), 13 | }); 14 | 15 | export default connect(mapStateToProps, mapDispatchToProps)(FirstStepForm); 16 | -------------------------------------------------------------------------------- /src/containers/FourthStepForm/container.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import { onChangeSelect } from './actions'; 3 | import FourthStepForm from './FourthStepForm'; 4 | 5 | /* istanbul ignore next */ 6 | const mapStateToProps = ({ fourthStepForm }) => ({ 7 | fourthStepForm, 8 | }); 9 | 10 | /* istanbul ignore next */ 11 | const mapDispatchToProps = dispatch => ({ 12 | onChangeSelect: value => dispatch(onChangeSelect(value)), 13 | }); 14 | 15 | export default connect(mapStateToProps, mapDispatchToProps)(FourthStepForm); 16 | -------------------------------------------------------------------------------- /src/components/Step/Step.story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { withInfo, setDefaults } from '@storybook/addon-info'; 4 | 5 | import Step from './Step'; 6 | 7 | // addon-info 8 | setDefaults({ 9 | source: true, 10 | }); 11 | 12 | storiesOf('Step', module) 13 | .add('Default', withInfo()(() => ( 14 | 15 | ))) 16 | .add('Pass 2', withInfo()(() => ( 17 | 18 | ))) 19 | .add('Completed', withInfo()(() => ( 20 | 21 | ))); 22 | 23 | -------------------------------------------------------------------------------- /src/components/Box/Box.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react'; 2 | import style from './Box.sass'; 3 | 4 | const Box = ({ header, footer, children }) => ( 5 |
6 | {header} 7 |
8 | {children} 9 |
10 | {footer} 11 |
12 | ); 13 | 14 | Box.propTypes = { 15 | header: PropTypes.node, 16 | children: PropTypes.node, 17 | footer: PropTypes.node, 18 | }; 19 | 20 | Box.defaultProps = { 21 | header: '', 22 | children: '', 23 | footer: '', 24 | }; 25 | 26 | export default Box; 27 | -------------------------------------------------------------------------------- /src/components/Button/Button.story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { withInfo, setDefaults } from '@storybook/addon-info'; 4 | import { action } from '@storybook/addon-actions'; 5 | 6 | import Button from './Button'; 7 | 8 | // addon-info 9 | setDefaults({ 10 | source: true, 11 | }); 12 | 13 | storiesOf('Button', module) 14 | .add('With text', withInfo()(() => ( 15 |