diff --git a/.eslintrc.js b/.eslintrc.js index 7d30b92..46306fd 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -55,7 +55,12 @@ module.exports = { 'jsx-a11y/role-has-required-aria-props': 2, 'jsx-a11y/role-supports-aria-props': 2, 'max-len': 0, - 'newline-per-chained-call': 0, + 'newline-per-chained-call': [ + 'error', + { + ignoreChainWithDepth: 3, + }, + ], 'no-confusing-arrow': 0, 'no-console': 1, 'no-underscore-dangle': 0, @@ -70,9 +75,11 @@ module.exports = { 'react/jsx-filename-extension': 0, 'react/jsx-no-target-blank': 0, 'react/jsx-uses-vars': 2, + 'react/jsx-props-no-spreading': 0, 'react/require-default-props': 0, 'react/require-extension': 0, 'react/self-closing-comp': 0, + 'react/state-in-constructor': 0, 'react/sort-comp': 0, 'require-yield': 0, }, diff --git a/.prettierrc b/.prettierrc index 2aa0504..650da5b 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { + "arrowParens": "avoid", "semi": false, "singleQuote": true, "tabWidth": 2, diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 42ede5c..5676096 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,9 +1,9 @@ -module.exports = function({ config }) { +module.exports = function ({ config }) { config.module.rules.push({ test: /\.stories\.jsx?$/, loaders: [ { - loader: require.resolve('@storybook/addon-storysource/loader'), + loader: require.resolve('@storybook/source-loader'), options: { prettierConfig: { semi: false, diff --git a/app/components/Anchor/__snapshots__/Anchor.test.js.snap b/app/components/Anchor/__snapshots__/Anchor.test.js.snap index 8de1709..af75266 100644 --- a/app/components/Anchor/__snapshots__/Anchor.test.js.snap +++ b/app/components/Anchor/__snapshots__/Anchor.test.js.snap @@ -101,7 +101,7 @@ exports[`Anchor renders and matches snapshot 1`] = ` stroke-width="2" /> -
Click Me diff --git a/app/components/AutoSaveFormField/AutoSaveFormField.js b/app/components/AutoSaveFormField/AutoSaveFormField.js index fe9ef09..908aefe 100644 --- a/app/components/AutoSaveFormField/AutoSaveFormField.js +++ b/app/components/AutoSaveFormField/AutoSaveFormField.js @@ -39,21 +39,41 @@ const AutoSaveFormField = ({ onSave, name, value, ...rest }) => { const Status = () => { if (success) return ( - + ) if (error) return ( - + ) diff --git a/app/components/AutoSaveFormField/__snapshots__/AutoSaveFormField.test.js.snap b/app/components/AutoSaveFormField/__snapshots__/AutoSaveFormField.test.js.snap index efd5a0d..a53aeb2 100644 --- a/app/components/AutoSaveFormField/__snapshots__/AutoSaveFormField.test.js.snap +++ b/app/components/AutoSaveFormField/__snapshots__/AutoSaveFormField.test.js.snap @@ -3,32 +3,28 @@ exports[`AutoSaveFormField renders and matches snapshot 1`] = `
-
-
+ class="StyledBox-sc-13pk1d4-0 gmReJc FormField__FormFieldContentBox-m9hood-1" + />
diff --git a/app/components/Avatar/Avatar.doc.js b/app/components/Avatar/Avatar.doc.js index 888fc17..6776ec5 100644 --- a/app/components/Avatar/Avatar.doc.js +++ b/app/components/Avatar/Avatar.doc.js @@ -1,12 +1,10 @@ import { describe, PropTypes } from 'react-desc' export const doc = Avatar => { - const DocumentedAvatar = describe(Avatar) - .description('A Avatar') - .usage( - `import { Avatar } from 'components/Avatar'; + const DocumentedAvatar = describe(Avatar).description('A Avatar').usage( + `import { Avatar } from 'components/Avatar'; `, - ) + ) DocumentedAvatar.propTypes = { id: PropTypes.string diff --git a/app/components/Avatar/__snapshots__/Avatar.test.js.snap b/app/components/Avatar/__snapshots__/Avatar.test.js.snap index 283af50..ad78911 100644 --- a/app/components/Avatar/__snapshots__/Avatar.test.js.snap +++ b/app/components/Avatar/__snapshots__/Avatar.test.js.snap @@ -3,10 +3,10 @@ exports[`Avatar renders and matches snapshot 1`] = `
diff --git a/app/components/Box/stories/Box.Border.stories.js b/app/components/Box/stories/Box.Border.stories.js index 68c15e5..c4f3369 100644 --- a/app/components/Box/stories/Box.Border.stories.js +++ b/app/components/Box/stories/Box.Border.stories.js @@ -44,7 +44,14 @@ storiesOf('Box', module) {['solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'].map( type => ( - + {type} ), diff --git a/app/components/Box/stories/Box.Round.stories.js b/app/components/Box/stories/Box.Round.stories.js index 2c08a9d..e3ce20b 100644 --- a/app/components/Box/stories/Box.Round.stories.js +++ b/app/components/Box/stories/Box.Round.stories.js @@ -46,7 +46,14 @@ storiesOf('Box', module) ))} - + left rounded corner px value diff --git a/app/components/Box/stories/Box.Simple.stories.js b/app/components/Box/stories/Box.Simple.stories.js index ce58238..238f0d2 100644 --- a/app/components/Box/stories/Box.Simple.stories.js +++ b/app/components/Box/stories/Box.Simple.stories.js @@ -30,7 +30,10 @@ storiesOf('Box', module) diff --git a/app/components/Box/stories/Box.Size.stories.js b/app/components/Box/stories/Box.Size.stories.js index 48f3a86..f604c55 100644 --- a/app/components/Box/stories/Box.Size.stories.js +++ b/app/components/Box/stories/Box.Size.stories.js @@ -24,7 +24,10 @@ storiesOf('Box', module) align="center" justify="center" background="brand" - overflow={{ horizontal: 'hidden', vertical: 'scroll' }} + overflow={{ + horizontal: 'hidden', + vertical: 'scroll', + }} > {Array(20) .fill() diff --git a/app/components/Button/__snapshots__/Button.test.js.snap b/app/components/Button/__snapshots__/Button.test.js.snap index 5e53196..20caca0 100644 --- a/app/components/Button/__snapshots__/Button.test.js.snap +++ b/app/components/Button/__snapshots__/Button.test.js.snap @@ -2,10 +2,10 @@ exports[`Button active + primary 1`] = `
`; exports[`Button basic 1`] = `
`; @@ -715,21 +615,6 @@ exports[`renders label 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - overflow: hidden; -} - -.c6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - box-sizing: border-box; - max-width: 100%; - min-width: 0; - min-height: 0; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; } .c3 { @@ -787,18 +672,13 @@ exports[`renders label 1`] = ` > test label
-
-
+ className="c5 FormField__FormFieldContentBox-m9hood-1" + />
`; diff --git a/app/components/FormContainer/FormContainer.doc.js b/app/components/FormContainer/FormContainer.doc.js index 4087e2e..5b114e6 100644 --- a/app/components/FormContainer/FormContainer.doc.js +++ b/app/components/FormContainer/FormContainer.doc.js @@ -1,12 +1,10 @@ import { describe, PropTypes } from 'react-desc' export const doc = FormContainer => { - const DocumentedFormContainer = describe(FormContainer) - .description('A FormContainer') - .usage( - `import { FormContainer } from 'components/FormContainer'; + const DocumentedFormContainer = describe(FormContainer).description('A FormContainer').usage( + `import { FormContainer } from 'components/FormContainer'; `, - ) + ) DocumentedFormContainer.propTypes = { id: PropTypes.string diff --git a/app/components/FormContainer/__snapshots__/FormContainer.test.js.snap b/app/components/FormContainer/__snapshots__/FormContainer.test.js.snap index 9db9846..fcb27af 100644 --- a/app/components/FormContainer/__snapshots__/FormContainer.test.js.snap +++ b/app/components/FormContainer/__snapshots__/FormContainer.test.js.snap @@ -3,7 +3,7 @@ exports[`FormContainer renders and matches snapshot 1`] = `
diff --git a/app/components/GenericError/GenericError.doc.js b/app/components/GenericError/GenericError.doc.js index 69730be..4a26bdd 100644 --- a/app/components/GenericError/GenericError.doc.js +++ b/app/components/GenericError/GenericError.doc.js @@ -1,12 +1,10 @@ import { describe, PropTypes } from 'react-desc' export const doc = GenericError => { - const DocumentedGenericError = describe(GenericError) - .description('A GenericError') - .usage( - `import { GenericError } from 'components/GenericError'; + const DocumentedGenericError = describe(GenericError).description('A GenericError').usage( + `import { GenericError } from 'components/GenericError'; `, - ) + ) DocumentedGenericError.propTypes = { id: PropTypes.string diff --git a/app/components/GenericError/__snapshots__/GenericError.test.js.snap b/app/components/GenericError/__snapshots__/GenericError.test.js.snap index bc18b79..485fb44 100644 --- a/app/components/GenericError/__snapshots__/GenericError.test.js.snap +++ b/app/components/GenericError/__snapshots__/GenericError.test.js.snap @@ -3,10 +3,10 @@ exports[`GenericError renders and matches snapshot 1`] = `

Could not load data. Try refreshing your page. diff --git a/app/components/GenericLoading/GenericLoading.doc.js b/app/components/GenericLoading/GenericLoading.doc.js index ae00a3f..1fb0e7c 100644 --- a/app/components/GenericLoading/GenericLoading.doc.js +++ b/app/components/GenericLoading/GenericLoading.doc.js @@ -1,12 +1,10 @@ import { describe, PropTypes } from 'react-desc' export const doc = GenericLoading => { - const DocumentedGenericLoading = describe(GenericLoading) - .description('A GenericLoading') - .usage( - `import { GenericLoading } from 'components/GenericLoading'; + const DocumentedGenericLoading = describe(GenericLoading).description('A GenericLoading').usage( + `import { GenericLoading } from 'components/GenericLoading'; `, - ) + ) DocumentedGenericLoading.propTypes = { id: PropTypes.string diff --git a/app/components/GenericLoading/__snapshots__/GenericLoading.test.js.snap b/app/components/GenericLoading/__snapshots__/GenericLoading.test.js.snap index e4b0d2b..6299bc3 100644 --- a/app/components/GenericLoading/__snapshots__/GenericLoading.test.js.snap +++ b/app/components/GenericLoading/__snapshots__/GenericLoading.test.js.snap @@ -3,10 +3,10 @@ exports[`GenericLoading renders and matches snapshot 1`] = `

Loading... diff --git a/app/components/Grid/Grid.test.js b/app/components/Grid/Grid.test.js index a882aac..8f34e35 100644 --- a/app/components/Grid/Grid.test.js +++ b/app/components/Grid/Grid.test.js @@ -34,7 +34,12 @@ test('Grid columns renders', () => { - + , ) const tree = component.toJSON() @@ -48,10 +53,26 @@ test('Grid areas renders', () => { rows={['xxsmall', 'medium', 'xsmall']} columns={['3/4', '1/4']} areas={[ - { name: 'header', start: [0, 0], end: [0, 1] }, - { name: 'main', start: [1, 0], end: [1, 0] }, - { name: 'sidebar', start: [1, 1], end: [1, 1] }, - { name: 'footer', start: [2, 0], end: [2, 1] }, + { + name: 'header', + start: [0, 0], + end: [0, 1], + }, + { + name: 'main', + start: [1, 0], + end: [1, 0], + }, + { + name: 'sidebar', + start: [1, 1], + end: [1, 1], + }, + { + name: 'footer', + start: [2, 0], + end: [2, 1], + }, ]} /> , diff --git a/app/components/Grid/stories/Grid.Layout.stories.js b/app/components/Grid/stories/Grid.Layout.stories.js index 8aff21b..0cb8fd0 100644 --- a/app/components/Grid/stories/Grid.Layout.stories.js +++ b/app/components/Grid/stories/Grid.Layout.stories.js @@ -24,9 +24,21 @@ storiesOf('Grid', module) rows={['auto', 'flex']} columns={['auto', 'flex']} areas={[ - { name: 'header', start: [0, 0], end: [1, 0] }, - { name: 'sidebar', start: [0, 1], end: [0, 1] }, - { name: 'main', start: [1, 1], end: [1, 1] }, + { + name: 'header', + start: [0, 0], + end: [1, 0], + }, + { + name: 'sidebar', + start: [0, 1], + end: [0, 1], + }, + { + name: 'main', + start: [1, 1], + end: [1, 1], + }, ]} > @@ -44,12 +59,21 @@ storiesOf('Grid', module) width="small" animation={[ { type: 'fadeIn', duration: 300 }, - { type: 'slideRight', size: 'xlarge', duration: 150 }, + { + type: 'slideRight', + size: 'xlarge', + duration: 150, + }, ]} > {['First', 'Second', 'Third'].map(name => ( diff --git a/app/components/Grid/stories/Grid.Percentages.stories.js b/app/components/Grid/stories/Grid.Percentages.stories.js index 1e0d3d2..7cef550 100644 --- a/app/components/Grid/stories/Grid.Percentages.stories.js +++ b/app/components/Grid/stories/Grid.Percentages.stories.js @@ -22,8 +22,16 @@ const Percentages = () => ( { - const DocumentedHeader = describe(Header) - .description('A Header') - .usage( - `import { Header } from 'components/Header'; + const DocumentedHeader = describe(Header).description('A Header').usage( + `import { Header } from 'components/Header';
`, - ) + ) DocumentedHeader.propTypes = { id: PropTypes.string diff --git a/app/components/Header/__snapshots__/Header.test.js.snap b/app/components/Header/__snapshots__/Header.test.js.snap index 6c09b5a..f84f2c3 100644 --- a/app/components/Header/__snapshots__/Header.test.js.snap +++ b/app/components/Header/__snapshots__/Header.test.js.snap @@ -3,10 +3,10 @@ exports[`Header renders and matches snapshot 1`] = `
diff --git a/app/components/Layer/Layer.doc.js b/app/components/Layer/Layer.doc.js index bfa661c..21810fb 100644 --- a/app/components/Layer/Layer.doc.js +++ b/app/components/Layer/Layer.doc.js @@ -1,12 +1,10 @@ import { describe, PropTypes } from 'react-desc' export const doc = Layer => { - const DocumentedLayer = describe(Layer) - .description('A Layer') - .usage( - `import { Layer } from 'components/Layer'; + const DocumentedLayer = describe(Layer).description('A Layer').usage( + `import { Layer } from 'components/Layer'; `, - ) + ) DocumentedLayer.propTypes = { id: PropTypes.string diff --git a/app/components/Layer/__snapshots__/Layer.test.js.snap b/app/components/Layer/__snapshots__/Layer.test.js.snap index a2c3e03..cf970bf 100644 --- a/app/components/Layer/__snapshots__/Layer.test.js.snap +++ b/app/components/Layer/__snapshots__/Layer.test.js.snap @@ -3,7 +3,7 @@ exports[`Layer renders and matches snapshot 1`] = `
`; diff --git a/app/components/Link/Link.doc.js b/app/components/Link/Link.doc.js index acd1274..2d213a4 100644 --- a/app/components/Link/Link.doc.js +++ b/app/components/Link/Link.doc.js @@ -1,12 +1,10 @@ import { describe, PropTypes } from 'react-desc' export const doc = Link => { - const DocumentedLink = describe(Link) - .description('A Link') - .usage( - `import { Link } from 'components/Link'; + const DocumentedLink = describe(Link).description('A Link').usage( + `import { Link } from 'components/Link'; `, - ) + ) DocumentedLink.propTypes = { id: PropTypes.string diff --git a/app/components/Link/__snapshots__/Link.test.js.snap b/app/components/Link/__snapshots__/Link.test.js.snap index 528cd88..a2cc5a8 100644 --- a/app/components/Link/__snapshots__/Link.test.js.snap +++ b/app/components/Link/__snapshots__/Link.test.js.snap @@ -3,10 +3,10 @@ exports[`Link renders and matches snapshot 1`] = `
diff --git a/app/components/List/Wrapper.js b/app/components/List/Wrapper.js index 5246537..cb089e0 100644 --- a/app/components/List/Wrapper.js +++ b/app/components/List/Wrapper.js @@ -1,6 +1,8 @@ import styled from 'styled-components' -const Wrapper = styled.div.attrs(props => ({ ...props }))` +const Wrapper = styled.div.attrs(props => ({ + ...props, +}))` padding: 0; margin: 0; width: 100%; diff --git a/app/components/LogoHeader/LogoHeader.doc.js b/app/components/LogoHeader/LogoHeader.doc.js index e45c290..574dd6c 100644 --- a/app/components/LogoHeader/LogoHeader.doc.js +++ b/app/components/LogoHeader/LogoHeader.doc.js @@ -1,12 +1,10 @@ import { describe, PropTypes } from 'react-desc' export const doc = LogoHeader => { - const DocumentedLogoHeader = describe(LogoHeader) - .description('A LogoHeader') - .usage( - `import { LogoHeader } from 'components/LogoHeader'; + const DocumentedLogoHeader = describe(LogoHeader).description('A LogoHeader').usage( + `import { LogoHeader } from 'components/LogoHeader'; `, - ) + ) DocumentedLogoHeader.propTypes = { id: PropTypes.string diff --git a/app/components/LogoHeader/__snapshots__/LogoHeader.test.js.snap b/app/components/LogoHeader/__snapshots__/LogoHeader.test.js.snap index 433ffba..04574ad 100644 --- a/app/components/LogoHeader/__snapshots__/LogoHeader.test.js.snap +++ b/app/components/LogoHeader/__snapshots__/LogoHeader.test.js.snap @@ -3,13 +3,13 @@ exports[`LogoHeader renders and matches snapshot 1`] = `
diff --git a/app/components/Menu/Menu.doc.js b/app/components/Menu/Menu.doc.js index c481e67..5a8e2f4 100644 --- a/app/components/Menu/Menu.doc.js +++ b/app/components/Menu/Menu.doc.js @@ -1,12 +1,10 @@ import { describe, PropTypes } from 'react-desc' export const doc = Menu => { - const DocumentedMenu = describe(Menu) - .description('A Menu') - .usage( - `import { Menu } from 'components/Menu'; + const DocumentedMenu = describe(Menu).description('A Menu').usage( + `import { Menu } from 'components/Menu'; `, - ) + ) DocumentedMenu.propTypes = { id: PropTypes.string diff --git a/app/components/Menu/__snapshots__/Menu.test.js.snap b/app/components/Menu/__snapshots__/Menu.test.js.snap index 17ee3ec..e905aea 100644 --- a/app/components/Menu/__snapshots__/Menu.test.js.snap +++ b/app/components/Menu/__snapshots__/Menu.test.js.snap @@ -3,22 +3,22 @@ exports[`Menu renders and matches snapshot 1`] = `
- -
+ +
Forgot Password?
diff --git a/app/components/RangeInput/RangeInput.doc.js b/app/components/RangeInput/RangeInput.doc.js index 0bbf206..670ef47 100644 --- a/app/components/RangeInput/RangeInput.doc.js +++ b/app/components/RangeInput/RangeInput.doc.js @@ -1,12 +1,10 @@ import { describe, PropTypes } from 'react-desc' export const doc = RangeInput => { - const DocumentedRangeInput = describe(RangeInput) - .description('A RangeInput') - .usage( - `import { RangeInput } from 'components/RangeInput'; + const DocumentedRangeInput = describe(RangeInput).description('A RangeInput').usage( + `import { RangeInput } from 'components/RangeInput'; `, - ) + ) DocumentedRangeInput.propTypes = { id: PropTypes.string diff --git a/app/components/RangeInput/__snapshots__/RangeInput.test.js.snap b/app/components/RangeInput/__snapshots__/RangeInput.test.js.snap index cb38fe9..dded2e7 100644 --- a/app/components/RangeInput/__snapshots__/RangeInput.test.js.snap +++ b/app/components/RangeInput/__snapshots__/RangeInput.test.js.snap @@ -3,10 +3,10 @@ exports[`RangeInput renders and matches snapshot 1`] = `
diff --git a/app/components/Select/__snapshots__/Select.test.js.snap b/app/components/Select/__snapshots__/Select.test.js.snap index ca3cbae..e00560b 100644 --- a/app/components/Select/__snapshots__/Select.test.js.snap +++ b/app/components/Select/__snapshots__/Select.test.js.snap @@ -4,21 +4,21 @@ exports[`Select renders and matches snapshot 1`] = `
@@ -83,7 +93,13 @@ class MultiSelect extends Component { {selected && selected.length ? ( selected.map(index => this.renderOptions(ALL_OPTIONS[index])) ) : ( - + Select Option )} @@ -93,7 +109,9 @@ class MultiSelect extends Component { selected={selected} disabled={[2, 6]} onChange={({ selected: nextSelected }) => { - this.setState({ selected: nextSelected.sort() }) + this.setState({ + selected: nextSelected.sort(), + }) }} > {this.renderOption} diff --git a/app/components/Table/__snapshots__/Table.test.js.snap b/app/components/Table/__snapshots__/Table.test.js.snap index d2cdd33..77c717d 100644 --- a/app/components/Table/__snapshots__/Table.test.js.snap +++ b/app/components/Table/__snapshots__/Table.test.js.snap @@ -3,42 +3,42 @@ exports[`Table renders and matches snapshot 1`] = `
diff --git a/app/components/TemplateHeader/__snapshots__/TemplateHeader.test.js.snap b/app/components/TemplateHeader/__snapshots__/TemplateHeader.test.js.snap index 3c16cdf..4d2aca6 100644 --- a/app/components/TemplateHeader/__snapshots__/TemplateHeader.test.js.snap +++ b/app/components/TemplateHeader/__snapshots__/TemplateHeader.test.js.snap @@ -135,17 +135,13 @@ exports[`TemplateHeader renders and matches snapshot 1`] = ` class="c5" href="/" > - - Home - + Home - - Features - + Features diff --git a/app/components/TextInput/TextInput.test.js b/app/components/TextInput/TextInput.test.js index ecbe52d..3ac487d 100644 --- a/app/components/TextInput/TextInput.test.js +++ b/app/components/TextInput/TextInput.test.js @@ -31,7 +31,9 @@ describe('TextInput', () => { expect(input.value).toBe('') // empty before - fireEvent.change(input, { target: { value: 'Good Day' } }) + fireEvent.change(input, { + target: { value: 'Good Day' }, + }) expect(input.value).toBe('Good Day') }) diff --git a/app/components/TextInput/__snapshots__/TextInput.test.js.snap b/app/components/TextInput/__snapshots__/TextInput.test.js.snap index e40b84f..5b582e9 100644 --- a/app/components/TextInput/__snapshots__/TextInput.test.js.snap +++ b/app/components/TextInput/__snapshots__/TextInput.test.js.snap @@ -3,11 +3,11 @@ exports[`TextInput renders and matches snapshot 1`] = `
diff --git a/app/components/Toggle/__snapshots__/Toggle.test.js.snap b/app/components/Toggle/__snapshots__/Toggle.test.js.snap index 2fa00ad..2d4f85d 100644 --- a/app/components/Toggle/__snapshots__/Toggle.test.js.snap +++ b/app/components/Toggle/__snapshots__/Toggle.test.js.snap @@ -2,7 +2,7 @@ exports[`Toggle should contain default text 1`] = `

Name

Email

Amount @@ -47,39 +47,39 @@ exports[`Table renders and matches snapshot 1`] = `

Eric
eric@gmail.com
$45 @@ -87,36 +87,36 @@ exports[`Table renders and matches snapshot 1`] = `
Chris
chris@gmail.com
$45 @@ -124,36 +124,36 @@ exports[`Table renders and matches snapshot 1`] = `
Shanna
shanna@gmail.com
$45 @@ -162,32 +162,32 @@ exports[`Table renders and matches snapshot 1`] = `