From 8230c8944d2c275e9fb35cf3bf6b13a6452ee09a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 21 Apr 2020 16:51:58 +0800 Subject: [PATCH 1/8] Upgrade to 6.0 / Args --- .storybook/main.js | 6 - .storybook/preview.js | 23 +- package.json | 13 +- src/components/Avatar.stories.js | 3 +- src/components/AvatarList.stories.js | 24 +- src/components/Badge.stories.js | 10 +- src/components/Button.stories.js | 25 +- src/components/Checkbox.stories.js | 13 +- src/components/Highlight.stories.js | 33 +- src/components/Icon.stories.js | 11 +- src/components/Input.stories.js | 31 +- src/components/Link.stories.js | 15 +- src/components/ProgressDots.stories.js | 16 +- src/components/Radio.stories.js | 13 +- src/components/Select.stories.js | 28 +- src/components/Spinner.stories.js | 16 +- src/components/Subheading.stories.js | 2 +- src/components/tooltip/ListItem.stories.js | 55 +- yarn.lock | 3915 +++++++++++++------- 19 files changed, 2748 insertions(+), 1504 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 1d9d3676..93ced2ae 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,10 +1,4 @@ module.exports = { - presets: [{ - name: 'storybook-addon-deps/preset', - options: { - exclude: /^@babel/ - } - }], stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'], addons: [ '@storybook/addon-essentials', diff --git a/.storybook/preview.js b/.storybook/preview.js index 8d9fcb1b..46d06acc 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,17 +1,15 @@ import React from 'react'; -import { addDecorator, addParameters } from '@storybook/react'; -import { withA11y } from '@storybook/addon-a11y'; -import { DocsPage } from 'storybook-addon-deps/blocks'; import { loadFontsForStorybook } from '../src/utils/index'; import { GlobalStyle } from '../src/components/shared/global'; -addParameters({ +export const parameters = { + passArgsFirst: true, + actions: { argTypesRegex: '^on.*' }, options: { showRoots: true, }, - docs: { page: DocsPage }, - dependencies: { + dependencies: { //display only dependencies/dependents that have a story in storybook //by default this is false withStoriesOnly: true, @@ -19,15 +17,16 @@ addParameters({ //completely hide a dependency/dependents block if it has no elements //by default this is false hideEmpty: true, - } -}); + }, +}; -addDecorator(withA11y); -addDecorator(story => ( +const withGlobalStyle = storyFn => ( <> - {story()} + {storyFn()} -)); +); + +export const decorators = [withGlobalStyle]; loadFontsForStorybook(); diff --git a/package.json b/package.json index c138b3ea..ffcf6853 100644 --- a/package.json +++ b/package.json @@ -61,12 +61,12 @@ "@babel/plugin-transform-runtime": "^7.6.2", "@babel/preset-env": "^7.6.3", "@babel/preset-react": "^7.6.3", - "@storybook/addon-a11y": "^5.3.8", - "@storybook/addon-actions": "^5.3.8", - "@storybook/addon-docs": "^5.3.8", - "@storybook/addon-essentials": "^5.3.8", - "@storybook/addon-storysource": "^5.3.8", - "@storybook/react": "^5.3.8", + "@storybook/addon-a11y": "6.0.0-alpha.41", + "@storybook/addon-actions": "6.0.0-alpha.41", + "@storybook/addon-docs": "6.0.0-alpha.41", + "@storybook/addon-essentials": "6.0.0-alpha.41", + "@storybook/addon-storysource": "6.0.0-alpha.41", + "@storybook/react": "6.0.0-alpha.41", "auto": "^7.11.0", "babel-eslint": "^10.0.3", "babel-loader": "^8.0.6", @@ -91,7 +91,6 @@ "react": "^16.8.3", "react-dom": "^16.8.3", "sort-package-json": "^1.21.0", - "storybook-addon-deps": "^1.0.9", "storybook-chromatic": "^3.0.3" }, "peerDependencies": { diff --git a/src/components/Avatar.stories.js b/src/components/Avatar.stories.js index e09a0cc0..290e10df 100644 --- a/src/components/Avatar.stories.js +++ b/src/components/Avatar.stories.js @@ -4,12 +4,13 @@ import { Avatar } from './Avatar'; export default { title: 'Design System/Avatar', - parameters: { component: Avatar, }, }; +export const Basic = args => ; + export const large = () => (
diff --git a/src/components/AvatarList.stories.js b/src/components/AvatarList.stories.js index d644a9b3..a14fb763 100644 --- a/src/components/AvatarList.stories.js +++ b/src/components/AvatarList.stories.js @@ -35,19 +35,13 @@ export default { excludeStories: ['users'], }; -export const short = () => ; -export const ellipsized = () => ; -export const bigUserCount = () => ; - -bigUserCount.story = { - name: 'big userCount', +export const Basic = args => ; +Basic.story = { + args: { users }, }; - -export const smallSize = () => ; - -smallSize.story = { - name: 'small size', -}; - -export const loading = () => ; -export const empty = () => ; +export const Short = () => ; +export const Ellipsized = () => ; +export const BigUserCount = () => ; +export const SmallSize = () => ; +export const Loading = () => ; +export const Empty = () => ; diff --git a/src/components/Badge.stories.js b/src/components/Badge.stories.js index 0bc3e72d..75c128dc 100644 --- a/src/components/Badge.stories.js +++ b/src/components/Badge.stories.js @@ -7,7 +7,9 @@ export default { component: Badge, }; -export const all = () => ( +export const Basic = args => Badge; + +export const All = () => (
Positive Negative @@ -17,13 +19,9 @@ export const all = () => (
); -export const withIcon = () => ( +export const WithIcon = () => ( with icon ); - -withIcon.story = { - name: 'with icon', -}; diff --git a/src/components/Button.stories.js b/src/components/Button.stories.js index aa796c8b..e83b9c22 100644 --- a/src/components/Button.stories.js +++ b/src/components/Button.stories.js @@ -23,7 +23,10 @@ export default { component: Button, }; -export const buttons = () => ( +export const Basic = args => @@ -43,7 +46,7 @@ export const buttons = () => ( ); -export const sizes = () => ( +export const Sizes = () => ( <>
); - -anchorWrapper.story = { - name: 'anchor wrapper', -}; diff --git a/src/components/Checkbox.stories.js b/src/components/Checkbox.stories.js index 6d643e04..8154aaca 100644 --- a/src/components/Checkbox.stories.js +++ b/src/components/Checkbox.stories.js @@ -10,7 +10,10 @@ export default { component: Checkbox, }; -export const allCheckboxes = () => ( +export const Basic = args => ; +Basic.story = { args: { label: 'Basic', hideLabel: false } }; + +export const All = () => (
@@ -32,14 +35,10 @@ export const allCheckboxes = () => ( ); -allCheckboxes.story = { - name: 'all checkboxes', -}; - -export const unchecked = () => ( +export const Unchecked = () => ( ); -export const checked = () => ( +export const Checked = () => ( ); diff --git a/src/components/Highlight.stories.js b/src/components/Highlight.stories.js index 6158d4a8..4841bf1e 100644 --- a/src/components/Highlight.stories.js +++ b/src/components/Highlight.stories.js @@ -75,24 +75,9 @@ export default { component: Highlight, }; -export const allLanguages = () => ( - - {[ - bashCodeWithWrappers, - javascriptCodeWithWrappers, - typescriptCodeWithWrappers, - cssCodeWithWrappers, - jsonCodeWithWrappers, - yamlCodeWithWrappers, - ].join('')} - -); - -allLanguages.story = { - name: 'all languages', -}; +export const Basic = args => ; -export const bash = () => ( +export const Bash = () => ( <> Autoformat {bashCode} @@ -101,7 +86,7 @@ export const bash = () => ( ); -export const javascript = () => ( +export const Javascript = () => ( <> Autoformat {javascriptCode} @@ -110,7 +95,7 @@ export const javascript = () => ( ); -export const typescript = () => ( +export const Typescript = () => ( <> Autoformat {typescriptCode} @@ -119,7 +104,7 @@ export const typescript = () => ( ); -export const css = () => ( +export const CSS = () => ( <> Autoformat {cssCode} @@ -128,7 +113,7 @@ export const css = () => ( ); -export const json = () => ( +export const JSON = () => ( <> Autoformat {jsonCode} @@ -137,7 +122,7 @@ export const json = () => ( ); -export const yaml = () => ( +export const YAML = () => ( <> Autoformat {yamlCode} @@ -150,7 +135,7 @@ const SmallContainer = styled.div` max-width: 300px; `; -export const wrapping = () => ( +export const Wrapping = () => ( {javascriptCode} @@ -163,4 +148,4 @@ const StyledHighlight = styled(Highlight)` } `; -export const customStyling = () => {jsonCode}; +export const CustomStyling = () => {jsonCode}; diff --git a/src/components/Icon.stories.js b/src/components/Icon.stories.js index fd69a8b9..116e8379 100644 --- a/src/components/Icon.stories.js +++ b/src/components/Icon.stories.js @@ -53,7 +53,10 @@ export default { component: Icon, }; -export const labels = () => ( +export const Basic = args => ; +Basic.story = { args: { icon: 'watch' } }; + +export const Labels = () => ( <> There are {Object.keys(icons).length} icons @@ -67,7 +70,7 @@ export const labels = () => ( ); -export const noLabels = () => ( +export const NoLabels = () => ( {Object.keys(icons).map(key => ( @@ -77,13 +80,13 @@ export const noLabels = () => ( ); -export const inline = () => ( +export const Inline = () => ( <> this is an inline icon (default) ); -export const block = () => ( +export const Block = () => ( <> this is a block icon diff --git a/src/components/Input.stories.js b/src/components/Input.stories.js index 41f69a53..132dec14 100644 --- a/src/components/Input.stories.js +++ b/src/components/Input.stories.js @@ -10,7 +10,18 @@ export default { component: Input, }; -export const allInputs = () => ( +export const Basic = args => ; +Basic.story = { + args: { + label: 'label', + value: 'value', + appearance: 'pill', + orientation: 'horizontal', + hideLabel: false, + }, +}; + +export const All = () => (
(
); -allInputs.story = { - name: 'all inputs', -}; - -export const defaultStory = () => ( +export const Default = () => (
(
); -defaultStory.story = { - name: 'default', -}; - -export const secondary = () => ( +export const Secondary = () => (
(
); -export const tertiary = () => ( +export const Tertiary = () => (
(
); -export const pill = () => ( +export const Pill = () => ( ( /> ); -export const code = () => ( +export const Code = () => (
( +export const Basic = args => ; +Basic.story = { args: { children: 'link text', inverse: false } }; + +export const All = () => ( <> default{' '} @@ -39,33 +42,33 @@ export const all = () => ( ); -export const withArrow = () => ( +export const WithArrow = () => ( withArrow shows an arrow behind the link ); -export const containsIcon = () => ( +export const ContainsIcon = () => ( ); -export const icon = () => ( +export const WithIcon = () => ( Link with an icon in front ); -export const isButton = () => ( +export const IsButton = () => ( /* eslint-disable-next-line */ is actually a button ); -export const hasLinkWrapper = () => ( +export const HasLinkWrapper = () => ( <> {/* gatsby and styled-components don't work nicely together */} diff --git a/src/components/ProgressDots.stories.js b/src/components/ProgressDots.stories.js index f30962a3..b6ce0bca 100644 --- a/src/components/ProgressDots.stories.js +++ b/src/components/ProgressDots.stories.js @@ -5,14 +5,12 @@ import { ProgressDots } from './ProgressDots'; export default { title: 'Design System/ProgressDots', component: ProgressDots, + argTypes: { steps: { control: { type: 'range', max: 10 } } }, }; -export const loading = () => ; -export const starting = () => ; -export const halfway = () => ; -export const complete = () => ; -export const largeComplete = () => ; - -largeComplete.story = { - name: 'large complete', -}; +export const Basic = args => ; +export const Loading = () => ; +export const Starting = () => ; +export const Halfway = () => ; +export const Complete = () => ; +export const LargeComplete = () => ; diff --git a/src/components/Radio.stories.js b/src/components/Radio.stories.js index 819e7137..60474dce 100644 --- a/src/components/Radio.stories.js +++ b/src/components/Radio.stories.js @@ -10,7 +10,10 @@ export default { component: Radio, }; -export const allRadios = () => ( +export const Basic = args => ; +Basic.story = { args: { label: 'label', hideLabel: false } }; + +export const All = () => ( @@ -21,14 +24,10 @@ export const allRadios = () => ( ); -allRadios.story = { - name: 'all radios', -}; - -export const unchecked = () => ( +export const Unchecked = () => ( ); -export const checked = () => ( +export const Checked = () => ( ); diff --git a/src/components/Select.stories.js b/src/components/Select.stories.js index 017f38b4..5ed3899d 100644 --- a/src/components/Select.stories.js +++ b/src/components/Select.stories.js @@ -10,7 +10,19 @@ export default { component: Select, }; -export const allSelects = () => ( +export const Basic = args => ( ); -allSelects.story = { - name: 'All selects', -}; - -export const defaultStory = () => ( +export const Default = () => (
(
); -export const tertiary = () => ( +export const Tertiary = () => (
; -Basic.story = { - args: { - label: 'label', - value: 'value', - appearance: 'pill', - orientation: 'horizontal', - hideLabel: false, - }, -}; +export const Basic = argsStory({ + label: 'label', + value: 'value', + appearance: 'pill', + orientation: 'horizontal', + hideLabel: false, +}); export const All = () => ( diff --git a/src/components/Link.stories.js b/src/components/Link.stories.js index 8ced9586..ccd13842 100644 --- a/src/components/Link.stories.js +++ b/src/components/Link.stories.js @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import { argsStory } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { Icon } from './Icon'; @@ -19,8 +20,7 @@ export default { component: Link, }; -export const Basic = args => ; -Basic.story = { args: { children: 'link text', inverse: false } }; +export const Basic = argsStory({ children: 'link text', inverse: false }); export const All = () => ( <> diff --git a/src/components/ProgressDots.stories.js b/src/components/ProgressDots.stories.js index b6ce0bca..df2584eb 100644 --- a/src/components/ProgressDots.stories.js +++ b/src/components/ProgressDots.stories.js @@ -1,4 +1,4 @@ -import React from 'react'; +import { argsStory } from '@storybook/react'; import { ProgressDots } from './ProgressDots'; @@ -8,9 +8,9 @@ export default { argTypes: { steps: { control: { type: 'range', max: 10 } } }, }; -export const Basic = args => ; -export const Loading = () => ; -export const Starting = () => ; -export const Halfway = () => ; -export const Complete = () => ; -export const LargeComplete = () => ; +export const Basic = argsStory({}); +export const Loading = argsStory({ isLoading: true }); +export const Starting = argsStory({ steps: 4, progress: 1 }); +export const Halfway = argsStory({ steps: 4, progress: 2 }); +export const Complete = argsStory({ steps: 4, progress: 4 }); +export const LargeComplete = argsStory({ steps: 4, progress: 4, size: 'large' }); diff --git a/src/components/Radio.stories.js b/src/components/Radio.stories.js index 60474dce..baa05d6d 100644 --- a/src/components/Radio.stories.js +++ b/src/components/Radio.stories.js @@ -1,4 +1,5 @@ import React from 'react'; +import { argsStory } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { Radio } from './Radio'; @@ -10,8 +11,7 @@ export default { component: Radio, }; -export const Basic = args => ; -Basic.story = { args: { label: 'label', hideLabel: false } }; +export const Basic = argsStory({ label: 'label', hideLabel: false }); export const All = () => ( @@ -24,10 +24,11 @@ export const All = () => ( ); -export const Unchecked = () => ( - -); - -export const Checked = () => ( - -); +export const Unchecked = argsStory({ id: 'Mice', label: 'Mice', hideLabel: true, value: 'mice' }); +export const Checked = argsStory({ + id: 'Dogs', + label: 'Dogs', + hideLabel: true, + value: 'dogs', + checked: true, +}); diff --git a/src/components/Select.stories.js b/src/components/Select.stories.js index 5ed3899d..425abe89 100644 --- a/src/components/Select.stories.js +++ b/src/components/Select.stories.js @@ -1,4 +1,5 @@ import React from 'react'; +import { argsStory } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { Select } from './Select'; @@ -10,17 +11,14 @@ export default { component: Select, }; -export const Basic = args => ; +Basic.args = { label: 'label', value: 'value', appearance: 'pill', orientation: 'horizontal', hideLabel: false, -}); +}; export const All = () => (
diff --git a/src/components/Link.stories.js b/src/components/Link.stories.js index ccd13842..8784e855 100644 --- a/src/components/Link.stories.js +++ b/src/components/Link.stories.js @@ -1,6 +1,5 @@ import React from 'react'; import styled from 'styled-components'; -import { argsStory } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { Icon } from './Icon'; @@ -20,7 +19,8 @@ export default { component: Link, }; -export const Basic = argsStory({ children: 'link text', inverse: false }); +export const Basic = args => ; +Basic.args = { children: 'link text', inverse: false }; export const All = () => ( <> diff --git a/src/components/ProgressDots.stories.js b/src/components/ProgressDots.stories.js index df2584eb..dc7ddce3 100644 --- a/src/components/ProgressDots.stories.js +++ b/src/components/ProgressDots.stories.js @@ -1,5 +1,4 @@ -import { argsStory } from '@storybook/react'; - +import React from 'react'; import { ProgressDots } from './ProgressDots'; export default { @@ -8,9 +7,19 @@ export default { argTypes: { steps: { control: { type: 'range', max: 10 } } }, }; -export const Basic = argsStory({}); -export const Loading = argsStory({ isLoading: true }); -export const Starting = argsStory({ steps: 4, progress: 1 }); -export const Halfway = argsStory({ steps: 4, progress: 2 }); -export const Complete = argsStory({ steps: 4, progress: 4 }); -export const LargeComplete = argsStory({ steps: 4, progress: 4, size: 'large' }); +export const Basic = args => ; + +export const Loading = Basic.bind(); +Loading.args = { isLoading: true }; + +export const Starting = Basic.bind(); +Starting.args = { steps: 4, progress: 1 }; + +export const Halfway = Basic.bind(); +Halfway.args = { steps: 4, progress: 2 }; + +export const Complete = Basic.bind(); +Complete.args = { steps: 4, progress: 4 }; + +export const LargeComplete = Basic.bind(); +LargeComplete.args = { steps: 4, progress: 4, size: 'large' }; diff --git a/src/components/Radio.stories.js b/src/components/Radio.stories.js index baa05d6d..720addd5 100644 --- a/src/components/Radio.stories.js +++ b/src/components/Radio.stories.js @@ -1,5 +1,4 @@ import React from 'react'; -import { argsStory } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { Radio } from './Radio'; @@ -11,7 +10,8 @@ export default { component: Radio, }; -export const Basic = argsStory({ label: 'label', hideLabel: false }); +export const Basic = args => ; +Basic.args = { label: 'label', hideLabel: false }; export const All = () => ( @@ -24,11 +24,14 @@ export const All = () => ( ); -export const Unchecked = argsStory({ id: 'Mice', label: 'Mice', hideLabel: true, value: 'mice' }); -export const Checked = argsStory({ +export const Unchecked = Basic.bind(); +Unchecked.args = { id: 'Mice', label: 'Mice', hideLabel: true, value: 'mice' }; + +export const Checked = Basic.bind(); +Checked.args = { id: 'Dogs', label: 'Dogs', hideLabel: true, value: 'dogs', checked: true, -}); +}; diff --git a/src/components/Select.stories.js b/src/components/Select.stories.js index 425abe89..abb24b5f 100644 --- a/src/components/Select.stories.js +++ b/src/components/Select.stories.js @@ -1,5 +1,4 @@ import React from 'react'; -import { argsStory } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { Select } from './Select'; @@ -11,14 +10,15 @@ export default { component: Select, }; -export const Basic = argsStory({ +export const Basic = args =>