From 9488e8f355a18715ed7fd86acb7e0364a18469db Mon Sep 17 00:00:00 2001 From: Rose Bonner Date: Tue, 9 Jan 2024 14:32:42 +0000 Subject: [PATCH] Adds autodocs to new design system Also refactors some older components to use newer Storybook components. --- .storybook/main.js | 3 +- .storybook/preview.js | 20 ++++++ .../components/Badge/Badge.stories.tsx | 15 ++--- .../components/Button/Button.stories.tsx | 65 ++++++++++++------- .../components/Icon/Icon.stories.tsx | 1 + .../InputField/InputField.stories.tsx | 1 + .../RadioInput/RadioInput.stories.tsx | 1 - .../components/Switch/Switch.stories.tsx | 1 + .../components/TextArea/TextArea.stories.tsx | 1 + 9 files changed, 73 insertions(+), 35 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index 55ca45e6d..642b20289 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -46,7 +46,8 @@ module.exports = { }; }, docsPage: { - docs: 'automatic', + autodocs: 'tag', + defaultName: 'Documentation', }, staticDirs: ['../public'], }; diff --git a/.storybook/preview.js b/.storybook/preview.js index 49b27f5ef..9fb092e2e 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -2,6 +2,14 @@ import 'resize-observer-polyfill'; import providersDecorator from './providersDecorator'; +import { + Title, + Subtitle, + Description, + Primary, + Controls, + Stories, +} from '@storybook/blocks'; import { MockedProvider } from '@apollo/client/testing'; // Import design system component styles for our Stories. @@ -15,6 +23,18 @@ export const parameters = { date: /Date$/, }, }, + docs: { + page: () => ( + <> + + <Subtitle /> + <Description /> + <Primary /> + <Controls /> + <Stories /> + </> + ), + }, apolloClient: { MockedProvider, // any props you want to pass to MockedProvider on every story diff --git a/src/design-system/components/Badge/Badge.stories.tsx b/src/design-system/components/Badge/Badge.stories.tsx index 935eb7c6e..b4029713b 100644 --- a/src/design-system/components/Badge/Badge.stories.tsx +++ b/src/design-system/components/Badge/Badge.stories.tsx @@ -1,16 +1,15 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; import Badge from './Badge'; export default { title: 'Design-System/Badge', component: Badge, -} as ComponentMeta<typeof Badge>; + tags: ['autodocs'], +} as Meta; -const Template: ComponentStory<typeof Badge> = (args) => <Badge {...args} />; - -export const Primary = Template.bind({}); - -Primary.args = { - children: 'Primary badge', +export const Default: StoryObj<typeof Badge> = { + render: () => { + return <Badge>Badge</Badge>; + }, }; diff --git a/src/design-system/components/Button/Button.stories.tsx b/src/design-system/components/Button/Button.stories.tsx index 37389de45..54be5ee08 100644 --- a/src/design-system/components/Button/Button.stories.tsx +++ b/src/design-system/components/Button/Button.stories.tsx @@ -1,4 +1,4 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { Meta, StoryObj } from '@storybook/react'; import Button from './Button'; import Icon from '../Icon/Icon'; @@ -6,35 +6,50 @@ import Icon from '../Icon/Icon'; export default { title: 'Design-System/Button', component: Button, + tags: ['autodocs'], + args: { + variant: 'primary', + htmlElement: 'button', + href: 'www.google.com', + }, argTypes: { - children: { table: { disable: true } }, - variant: { table: { disable: true } }, + variant: { + options: ['primary', 'secondary'], + control: { type: 'radio' }, + }, + htmlElement: { + options: ['button', 'a'], + control: { type: 'radio' }, + }, + href: { + control: 'text', + description: 'Only required when using the button as a link', + }, }, - args: { href: 'www.google.com' }, -} as ComponentMeta<typeof Button>; - -const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />; +} as Meta; -export const Primary = Template.bind({}); - -Primary.args = { - children: <span>Primary button</span>, - variant: 'primary', - htmlElement: 'button', +export const Primary: StoryObj<typeof Button> = { + render: (args) => { + return <Button {...args}>Primary</Button>; + }, }; -export const Secondary = Template.bind({}); - -Secondary.args = { - children: 'Secondary button', - variant: 'secondary', - htmlElement: 'button', +export const Secondary: StoryObj<typeof Button> = { + render: () => { + return ( + <Button variant="secondary" htmlElement="button"> + Secondary + </Button> + ); + }, }; -export const WithIcon = Template.bind({}); - -WithIcon.args = { - children: <Icon icon="xmark" size="small" />, - variant: 'secondary', - htmlElement: 'button', +export const WithIcon: StoryObj<typeof Button> = { + render: () => { + return ( + <Button variant="secondary" htmlElement="button"> + <Icon icon="xmark" size="small" /> + </Button> + ); + }, }; diff --git a/src/design-system/components/Icon/Icon.stories.tsx b/src/design-system/components/Icon/Icon.stories.tsx index 41ae4cb64..567cd6ddc 100644 --- a/src/design-system/components/Icon/Icon.stories.tsx +++ b/src/design-system/components/Icon/Icon.stories.tsx @@ -4,6 +4,7 @@ import Icon from './Icon'; export default { title: 'Design-System/Icon', + tags: ['autodocs'], component: Icon, args: { icon: 'list', diff --git a/src/design-system/components/InputField/InputField.stories.tsx b/src/design-system/components/InputField/InputField.stories.tsx index 282266f79..ab082de5b 100644 --- a/src/design-system/components/InputField/InputField.stories.tsx +++ b/src/design-system/components/InputField/InputField.stories.tsx @@ -9,6 +9,7 @@ export default { args: { placeholder: 'Enter a location e.g. London', }, + tags: ['autodocs'], parameters: { iframeHeight: 200, docs: { diff --git a/src/design-system/components/RadioInput/RadioInput.stories.tsx b/src/design-system/components/RadioInput/RadioInput.stories.tsx index 317eafb87..c1736f644 100644 --- a/src/design-system/components/RadioInput/RadioInput.stories.tsx +++ b/src/design-system/components/RadioInput/RadioInput.stories.tsx @@ -4,7 +4,6 @@ import Radio from './RadioInput'; export default { title: 'Design-System/Form Elements/Radio Input', - tags: ['autodocs'], args: { defaultChecked: false, diff --git a/src/design-system/components/Switch/Switch.stories.tsx b/src/design-system/components/Switch/Switch.stories.tsx index 267586a07..32ddc9838 100644 --- a/src/design-system/components/Switch/Switch.stories.tsx +++ b/src/design-system/components/Switch/Switch.stories.tsx @@ -6,6 +6,7 @@ import { useState } from 'react'; const meta: Meta<typeof Switch> = { title: 'Design-System/Form Elements/Switch', component: Switch, + tags: ['autodocs'], }; export default meta; diff --git a/src/design-system/components/TextArea/TextArea.stories.tsx b/src/design-system/components/TextArea/TextArea.stories.tsx index 448b3b51c..264569b0c 100644 --- a/src/design-system/components/TextArea/TextArea.stories.tsx +++ b/src/design-system/components/TextArea/TextArea.stories.tsx @@ -5,6 +5,7 @@ import TextArea from './TextArea'; const meta: Meta<typeof TextArea> = { title: 'Design-System/Form Elements/TextArea', component: TextArea, + tags: ['autodocs'], }; export default meta;