diff --git a/.storybook/main.js b/.storybook/main.js index 1d9d3676..53ebee5c 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,15 +1,7 @@ module.exports = { - presets: [{ - name: 'storybook-addon-deps/preset', - options: { - exclude: /^@babel/ - } - }], stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'], addons: [ '@storybook/addon-essentials', - '@storybook/addon-docs', - '@storybook/addon-actions', '@storybook/addon-storysource', '@storybook/addon-a11y', ], diff --git a/.storybook/preview.js b/.storybook/preview.js index 8d9fcb1b..f039f346 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,33 +1,32 @@ 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 = { options: { showRoots: true, }, - docs: { page: DocsPage }, - dependencies: { - //display only dependencies/dependents that have a story in storybook - //by default this is false + // automatically create action args for all props that start with "on" + actions: { argTypesRegex: '^on.*' }, + dependencies: { + // display only dependencies/dependents that have a story in storybook + // by default this is false withStoriesOnly: true, - //completely hide a dependency/dependents block if it has no elements - //by default this is false + // 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..29ff5904 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-beta.20", + "@storybook/addon-actions": "6.0.0-beta.20", + "@storybook/addon-docs": "6.0.0-beta.20", + "@storybook/addon-essentials": "6.0.0-beta.20", + "@storybook/addon-storysource": "6.0.0-beta.20", + "@storybook/react": "6.0.0-beta.20", "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..3ef98453 100644 --- a/src/components/Avatar.stories.js +++ b/src/components/Avatar.stories.js @@ -4,12 +4,11 @@ import { Avatar } from './Avatar'; export default { title: 'Design System/Avatar', - - parameters: { - component: Avatar, - }, + 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..b0b966bf 100644 --- a/src/components/AvatarList.stories.js +++ b/src/components/AvatarList.stories.js @@ -1,5 +1,4 @@ import React from 'react'; - import { AvatarList } from './AvatarList'; import { Avatar } from './Avatar'; @@ -35,19 +34,23 @@ export default { excludeStories: ['users'], }; -export const short = () => ; -export const ellipsized = () => ; -export const bigUserCount = () => ; +export const Basic = args => ; +Basic.args = { users }; -bigUserCount.story = { - name: 'big userCount', -}; +export const Short = Basic.bind(); +Short.args = { users: users.slice(0, 2) }; -export const smallSize = () => ; +export const Ellipsized = Basic.bind(); +Ellipsized.args = { users }; -smallSize.story = { - name: 'small size', -}; +export const BigUserCount = Basic.bind(); +BigUserCount.args = { users, userCount: 100 }; + +export const SmallSize = Basic.bind(); +SmallSize.args = { users, userCount: 100, size: 'small' }; + +export const Loading = Basic.bind(); +Loading.args = { users: [], isLoading: true }; -export const loading = () => ; -export const empty = () => ; +export const Empty = Basic.bind(); +Empty.args = { users: [] }; 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..a9b9a0da 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..628caa70 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.args = { label: 'Basic', hideLabel: false }; + +export const All = () => (
@@ -32,14 +35,8 @@ export const allCheckboxes = () => ( ); -allCheckboxes.story = { - name: 'all checkboxes', -}; +export const Unchecked = Basic.bind(); +Unchecked.args = { id: 'Unchecked', label: 'Cats', hideLabel: true }; -export const unchecked = () => ( - -); - -export const checked = () => ( - -); +export const Checked = Basic.bind(); +Checked.args = { id: 'Checked', label: 'Cats', hideLabel: true, checked: true }; diff --git a/src/components/Highlight.stories.js b/src/components/Highlight.stories.js index 6158d4a8..dc4f0b30 100644 --- a/src/components/Highlight.stories.js +++ b/src/components/Highlight.stories.js @@ -75,24 +75,10 @@ export default { component: Highlight, }; -export const allLanguages = () => ( - - {[ - bashCodeWithWrappers, - javascriptCodeWithWrappers, - typescriptCodeWithWrappers, - cssCodeWithWrappers, - jsonCodeWithWrappers, - yamlCodeWithWrappers, - ].join('')} - -); - -allLanguages.story = { - name: 'all languages', -}; +export const Basic = args => ; +Basic.args = {}; -export const bash = () => ( +export const Bash = () => ( <> Autoformat {bashCode} @@ -101,7 +87,7 @@ export const bash = () => ( ); -export const javascript = () => ( +export const Javascript = () => ( <> Autoformat {javascriptCode} @@ -110,7 +96,7 @@ export const javascript = () => ( ); -export const typescript = () => ( +export const Typescript = () => ( <> Autoformat {typescriptCode} @@ -119,7 +105,7 @@ export const typescript = () => ( ); -export const css = () => ( +export const CSS = () => ( <> Autoformat {cssCode} @@ -128,7 +114,7 @@ export const css = () => ( ); -export const json = () => ( +export const JSON = () => ( <> Autoformat {jsonCode} @@ -137,7 +123,7 @@ export const json = () => ( ); -export const yaml = () => ( +export const YAML = () => ( <> Autoformat {yamlCode} @@ -150,7 +136,7 @@ const SmallContainer = styled.div` max-width: 300px; `; -export const wrapping = () => ( +export const Wrapping = () => ( {javascriptCode} @@ -163,4 +149,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..27e50859 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.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..59b52c11 100644 --- a/src/components/Input.stories.js +++ b/src/components/Input.stories.js @@ -10,7 +10,16 @@ export default { component: Input, }; -export const allInputs = () => ( +export const Basic = args => ; +Basic.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.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..dc7ddce3 100644 --- a/src/components/ProgressDots.stories.js +++ b/src/components/ProgressDots.stories.js @@ -1,18 +1,25 @@ import React from 'react'; - 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 = () => ; +export const Basic = args => ; -largeComplete.story = { - name: 'large complete', -}; +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 819e7137..720addd5 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.args = { label: 'label', hideLabel: false }; + +export const All = () => ( @@ -21,14 +24,14 @@ export const allRadios = () => ( ); -allRadios.story = { - name: 'all radios', -}; - -export const unchecked = () => ( - -); +export const Unchecked = Basic.bind(); +Unchecked.args = { id: 'Mice', label: 'Mice', hideLabel: true, value: 'mice' }; -export const checked = () => ( - -); +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 017f38b4..abb24b5f 100644 --- a/src/components/Select.stories.js +++ b/src/components/Select.stories.js @@ -10,7 +10,17 @@ 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 = () => (