Skip to content

Commit b2fa438

Browse files
brandonlenzbrandonlenz
authored
docs(storybook): Update Storybook Stories to CSF3 (#3489)
1 parent 5cd3803 commit b2fa438

77 files changed

Lines changed: 7744 additions & 7202 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/Accordion/Accordion.stories.tsx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React, { type JSX } from 'react'
1+
import React from 'react'
22
import { Accordion, AccordionItemProps } from './Accordion'
3+
import type { Meta, StoryObj } from '@storybook/react-vite'
34

4-
export default {
5+
const meta = {
56
title: 'Components/Accordion',
67
component: Accordion,
78
parameters: {
@@ -15,7 +16,10 @@ Source: https://designsystem.digital.gov/components/accordion/
1516
},
1617
},
1718
},
18-
}
19+
} satisfies Meta<typeof Accordion>
20+
21+
export default meta
22+
type Story = StoryObj<typeof meta>
1923

2024
const testItems: AccordionItemProps[] = [
2125
{
@@ -100,17 +104,17 @@ const testItems: AccordionItemProps[] = [
100104
},
101105
]
102106

103-
export const Borderless = (): JSX.Element => (
104-
<Accordion bordered={false} items={testItems} />
105-
)
107+
export const Borderless: Story = {
108+
args: { bordered: false, items: testItems },
109+
}
106110

107-
export const Bordered = (): JSX.Element => (
108-
<Accordion bordered={true} items={testItems} />
109-
)
111+
export const Bordered: Story = {
112+
args: { bordered: true, items: testItems },
113+
}
110114

111-
export const Multiselectable = (): JSX.Element => (
112-
<Accordion items={testItems} multiselectable={true} />
113-
)
115+
export const Multiselectable: Story = {
116+
args: { items: testItems, multiselectable: true },
117+
}
114118

115119
const customTestItems: AccordionItemProps[] = [
116120
{
@@ -166,6 +170,6 @@ const customTestItems: AccordionItemProps[] = [
166170
},
167171
]
168172

169-
export const CustomTitles = (): JSX.Element => (
170-
<Accordion bordered={true} items={customTestItems} />
171-
)
173+
export const CustomTitles: Story = {
174+
args: { bordered: true, items: customTestItems },
175+
}

‎src/components/Alert/Alert.stories.tsx‎

Lines changed: 118 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React, { type JSX } from 'react'
1+
import React from 'react'
2+
import type { Meta, StoryObj } from '@storybook/react-vite'
23
import { Alert } from './Alert'
34

45
import { Button } from '../Button/Button'
56

6-
export default {
7+
const meta: Meta<typeof Alert> = {
78
title: 'Components/Alert',
89
component: Alert,
910
parameters: {
@@ -19,116 +20,139 @@ Source: https://designsystem.digital.gov/components/alert/
1920
},
2021
}
2122

23+
export default meta
24+
type Story = StoryObj<typeof meta>
25+
2226
const testText = (
2327
<>
2428
Lorem ipsum dolor sit amet, <a href="#test">consectetur adipiscing</a> elit,
2529
sed do eiusmod.
2630
</>
2731
)
2832

29-
export const Success = (): JSX.Element => (
30-
<Alert type="success" heading="Success status" headingLevel="h4">
31-
{testText}
32-
</Alert>
33-
)
34-
35-
export const Warning = (): JSX.Element => (
36-
<Alert type="warning" heading="Warning status" headingLevel="h4">
37-
{testText}
38-
</Alert>
39-
)
40-
41-
export const Error = (): JSX.Element => (
42-
<Alert type="error" heading="Error status" headingLevel="h4">
43-
{testText}
44-
</Alert>
45-
)
46-
47-
export const Info = (): JSX.Element => (
48-
<Alert type="info" heading="Informative status" headingLevel="h4">
49-
{testText}
50-
</Alert>
51-
)
52-
53-
export const Slim = (): JSX.Element => (
54-
<>
55-
<Alert type="success" headingLevel="h4" slim>
56-
{testText}
57-
</Alert>
58-
<Alert type="warning" headingLevel="h4" slim>
59-
{testText}
60-
</Alert>
61-
<Alert type="error" headingLevel="h4" slim>
33+
export const Success: Story = {
34+
render: () => (
35+
<Alert type="success" heading="Success status" headingLevel="h4">
6236
{testText}
6337
</Alert>
64-
<Alert type="info" headingLevel="h4" slim>
65-
{testText}
66-
</Alert>
67-
</>
68-
)
38+
),
39+
}
6940

70-
export const NoIcon = (): JSX.Element => (
71-
<>
72-
<Alert type="success" headingLevel="h4" noIcon>
73-
{testText}
74-
</Alert>
75-
<Alert type="warning" headingLevel="h4" noIcon>
76-
{testText}
77-
</Alert>
78-
<Alert type="error" headingLevel="h4" noIcon>
41+
export const Warning: Story = {
42+
render: () => (
43+
<Alert type="warning" heading="Warning status" headingLevel="h4">
7944
{testText}
8045
</Alert>
81-
<Alert type="info" headingLevel="h4" noIcon>
82-
{testText}
83-
</Alert>
84-
</>
85-
)
46+
),
47+
}
8648

87-
export const SlimNoIcon = (): JSX.Element => (
88-
<>
89-
<Alert type="success" headingLevel="h4" slim noIcon>
90-
{testText}
91-
</Alert>
92-
<Alert type="warning" headingLevel="h4" slim noIcon>
49+
export const Error: Story = {
50+
render: () => (
51+
<Alert type="error" heading="Error status" headingLevel="h4">
9352
{testText}
9453
</Alert>
95-
<Alert type="error" headingLevel="h4" slim noIcon>
96-
{testText}
97-
</Alert>
98-
<Alert type="info" headingLevel="h4" slim noIcon>
54+
),
55+
}
56+
57+
export const Info: Story = {
58+
render: () => (
59+
<Alert type="info" heading="Informative status" headingLevel="h4">
9960
{testText}
10061
</Alert>
101-
</>
102-
)
62+
),
63+
}
10364

104-
export const HeadingLevels = (): JSX.Element => (
105-
<>
106-
<h1>Heading Level 1</h1>
107-
<Alert type="info" heading="Heading level 2" headingLevel="h2">
65+
export const Slim: Story = {
66+
render: () => (
67+
<>
68+
<Alert type="success" headingLevel="h4" slim>
69+
{testText}
70+
</Alert>
71+
<Alert type="warning" headingLevel="h4" slim>
72+
{testText}
73+
</Alert>
74+
<Alert type="error" headingLevel="h4" slim>
75+
{testText}
76+
</Alert>
77+
<Alert type="info" headingLevel="h4" slim>
78+
{testText}
79+
</Alert>
80+
</>
81+
),
82+
}
83+
84+
export const NoIcon: Story = {
85+
render: () => (
86+
<>
87+
<Alert type="success" headingLevel="h4" noIcon>
88+
{testText}
89+
</Alert>
90+
<Alert type="warning" headingLevel="h4" noIcon>
91+
{testText}
92+
</Alert>
93+
<Alert type="error" headingLevel="h4" noIcon>
94+
{testText}
95+
</Alert>
96+
<Alert type="info" headingLevel="h4" noIcon>
97+
{testText}
98+
</Alert>
99+
</>
100+
),
101+
}
102+
103+
export const SlimNoIcon: Story = {
104+
render: () => (
105+
<>
106+
<Alert type="success" headingLevel="h4" slim noIcon>
107+
{testText}
108+
</Alert>
109+
<Alert type="warning" headingLevel="h4" slim noIcon>
110+
{testText}
111+
</Alert>
112+
<Alert type="error" headingLevel="h4" slim noIcon>
113+
{testText}
114+
</Alert>
115+
<Alert type="info" headingLevel="h4" slim noIcon>
116+
{testText}
117+
</Alert>
118+
</>
119+
),
120+
}
121+
122+
export const HeadingLevels: Story = {
123+
render: () => (
124+
<>
125+
<h1>Heading Level 1</h1>
126+
<Alert type="info" heading="Heading level 2" headingLevel="h2">
127+
{testText}
128+
</Alert>
129+
</>
130+
),
131+
}
132+
133+
export const WithCTA: Story = {
134+
render: () => (
135+
<Alert
136+
type="warning"
137+
heading="Warning status"
138+
headingLevel="h4"
139+
cta={
140+
<Button type="button" outline>
141+
Click here
142+
</Button>
143+
}>
108144
{testText}
109145
</Alert>
110-
</>
111-
)
112-
113-
export const WithCTA = (): JSX.Element => (
114-
<Alert
115-
type="warning"
116-
heading="Warning status"
117-
headingLevel="h4"
118-
cta={
119-
<Button type="button" outline>
120-
Click here
121-
</Button>
122-
}>
123-
{testText}
124-
</Alert>
125-
)
146+
),
147+
}
126148

127-
export const WithValidation = (): JSX.Element => (
128-
<Alert type="info" heading="Code requirements" headingLevel="h4" validation>
129-
<ul>
130-
<li>Use at least one uppercase character</li>
131-
<li>Use at least one number</li>
132-
</ul>
133-
</Alert>
134-
)
149+
export const WithValidation: Story = {
150+
render: () => (
151+
<Alert type="info" heading="Code requirements" headingLevel="h4" validation>
152+
<ul>
153+
<li>Use at least one uppercase character</li>
154+
<li>Use at least one number</li>
155+
</ul>
156+
</Alert>
157+
),
158+
}

0 commit comments

Comments
 (0)