Skip to content

Commit 5f47931

Browse files
aaronbassettaaronbassett
committed
docs: add detailed stories for Status component variants
1 parent 547cb37 commit 5f47931

File tree

2 files changed

+360
-3
lines changed

2 files changed

+360
-3
lines changed

‎packages/component-library/src/Status/index.stories.module.scss

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@use "../theme";
2+
3+
.grid {
4+
display: grid;
5+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
6+
gap: theme.spacing(4);
7+
align-items: center;
8+
}
9+
10+
.combinationsGrid {
11+
display: flex;
12+
flex-direction: column;
13+
gap: theme.spacing(8);
14+
}
15+
16+
.styleSection {
17+
display: flex;
18+
flex-direction: column;
19+
gap: theme.spacing(4);
20+
}
21+
22+
.sectionTitle {
23+
margin: 0;
24+
font-size: theme.font-size("lg");
25+
font-weight: 600;
26+
color: theme.color("heading");
27+
}
28+
29+
.sizeSection {
30+
display: flex;
31+
flex-direction: column;
32+
gap: theme.spacing(2);
33+
}
34+
35+
.sizeTitle {
36+
margin: 0;
37+
font-size: theme.font-size("sm");
38+
font-weight: 500;
39+
color: theme.color("paragraph");
40+
}
41+
42+
.variantsRow {
43+
display: flex;
44+
flex-wrap: wrap;
45+
gap: theme.spacing(3);
46+
align-items: center;
47+
}
48+
49+
.variantGrid {
50+
display: grid;
51+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
52+
gap: theme.spacing(6);
53+
}
54+
55+
.sizeColumn {
56+
display: flex;
57+
flex-direction: column;
58+
gap: theme.spacing(3);
59+
60+
> h4 {
61+
margin: 0;
62+
font-size: theme.font-size("sm");
63+
font-weight: 600;
64+
color: theme.color("heading");
65+
}
66+
}
67+
68+
.examplesGrid {
69+
display: flex;
70+
flex-wrap: wrap;
71+
gap: theme.spacing(3);
72+
align-items: center;
73+
}

‎packages/component-library/src/Status/index.stories.tsx

Lines changed: 287 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
SIZES,
77
STYLES,
88
} from "./index.jsx";
9+
import styles from "./index.stories.module.scss";
910

1011
const meta = {
1112
component: StatusComponent,
@@ -38,14 +39,297 @@ const meta = {
3839
},
3940
},
4041
},
42+
tags: ["autodocs"],
4143
} satisfies Meta<typeof StatusComponent>;
4244
export default meta;
4345

44-
export const Status = {
46+
type Story = StoryObj<typeof StatusComponent>;
47+
48+
export const Default: Story = {
49+
args: {
50+
children: "Status",
51+
variant: "neutral",
52+
style: "filled",
53+
size: "md",
54+
},
55+
};
56+
57+
// Individual variant examples
58+
export const Neutral: Story = {
4559
args: {
46-
children: "A STATUS",
60+
children: "Neutral",
4761
variant: "neutral",
4862
style: "filled",
4963
size: "md",
5064
},
51-
} satisfies StoryObj<typeof StatusComponent>;
65+
};
66+
67+
export const Info: Story = {
68+
args: {
69+
children: "Info",
70+
variant: "info",
71+
style: "filled",
72+
size: "md",
73+
},
74+
};
75+
76+
export const Warning: Story = {
77+
args: {
78+
children: "Warning",
79+
variant: "warning",
80+
style: "filled",
81+
size: "md",
82+
},
83+
};
84+
85+
export const Error: Story = {
86+
args: {
87+
children: "Error",
88+
variant: "error",
89+
style: "filled",
90+
size: "md",
91+
},
92+
};
93+
94+
export const Data: Story = {
95+
args: {
96+
children: "Data",
97+
variant: "data",
98+
style: "filled",
99+
size: "md",
100+
},
101+
};
102+
103+
export const Success: Story = {
104+
args: {
105+
children: "Success",
106+
variant: "success",
107+
style: "filled",
108+
size: "md",
109+
},
110+
};
111+
112+
export const Disabled: Story = {
113+
args: {
114+
children: "Disabled",
115+
variant: "disabled",
116+
style: "filled",
117+
size: "md",
118+
},
119+
};
120+
121+
// All combinations grid
122+
export const AllCombinations: Story = {
123+
render: () => (
124+
<div className={styles.combinationsGrid}>
125+
{STYLES.map((style) => (
126+
<div key={style} className={styles.styleSection}>
127+
<h3 className={styles.sectionTitle}>{style.charAt(0).toUpperCase() + style.slice(1)} Style</h3>
128+
{SIZES.map((size) => (
129+
<div key={`${style}-${size}`} className={styles.sizeSection}>
130+
<h4 className={styles.sizeTitle}>Size: {size.toUpperCase()}</h4>
131+
<div className={styles.variantsRow}>
132+
{VARIANTS.map((variant) => (
133+
<StatusComponent
134+
key={`${style}-${size}-${variant}`}
135+
variant={variant}
136+
style={style}
137+
size={size}
138+
>
139+
{variant.charAt(0).toUpperCase() + variant.slice(1)}
140+
</StatusComponent>
141+
))}
142+
</div>
143+
</div>
144+
))}
145+
</div>
146+
))}
147+
</div>
148+
),
149+
};
150+
151+
// Grouped by variant
152+
export const NeutralAllStyles: Story = {
153+
render: () => (
154+
<div className={styles.grid}>
155+
<StatusComponent variant="neutral" style="filled" size="xs">Neutral Filled XS</StatusComponent>
156+
<StatusComponent variant="neutral" style="filled" size="md">Neutral Filled MD</StatusComponent>
157+
<StatusComponent variant="neutral" style="outline" size="xs">Neutral Outline XS</StatusComponent>
158+
<StatusComponent variant="neutral" style="outline" size="md">Neutral Outline MD</StatusComponent>
159+
</div>
160+
),
161+
};
162+
163+
export const InfoAllStyles: Story = {
164+
render: () => (
165+
<div className={styles.grid}>
166+
<StatusComponent variant="info" style="filled" size="xs">Info Filled XS</StatusComponent>
167+
<StatusComponent variant="info" style="filled" size="md">Info Filled MD</StatusComponent>
168+
<StatusComponent variant="info" style="outline" size="xs">Info Outline XS</StatusComponent>
169+
<StatusComponent variant="info" style="outline" size="md">Info Outline MD</StatusComponent>
170+
</div>
171+
),
172+
};
173+
174+
export const WarningAllStyles: Story = {
175+
render: () => (
176+
<div className={styles.grid}>
177+
<StatusComponent variant="warning" style="filled" size="xs">Warning Filled XS</StatusComponent>
178+
<StatusComponent variant="warning" style="filled" size="md">Warning Filled MD</StatusComponent>
179+
<StatusComponent variant="warning" style="outline" size="xs">Warning Outline XS</StatusComponent>
180+
<StatusComponent variant="warning" style="outline" size="md">Warning Outline MD</StatusComponent>
181+
</div>
182+
),
183+
};
184+
185+
export const ErrorAllStyles: Story = {
186+
render: () => (
187+
<div className={styles.grid}>
188+
<StatusComponent variant="error" style="filled" size="xs">Error Filled XS</StatusComponent>
189+
<StatusComponent variant="error" style="filled" size="md">Error Filled MD</StatusComponent>
190+
<StatusComponent variant="error" style="outline" size="xs">Error Outline XS</StatusComponent>
191+
<StatusComponent variant="error" style="outline" size="md">Error Outline MD</StatusComponent>
192+
</div>
193+
),
194+
};
195+
196+
export const DataAllStyles: Story = {
197+
render: () => (
198+
<div className={styles.grid}>
199+
<StatusComponent variant="data" style="filled" size="xs">Data Filled XS</StatusComponent>
200+
<StatusComponent variant="data" style="filled" size="md">Data Filled MD</StatusComponent>
201+
<StatusComponent variant="data" style="outline" size="xs">Data Outline XS</StatusComponent>
202+
<StatusComponent variant="data" style="outline" size="md">Data Outline MD</StatusComponent>
203+
</div>
204+
),
205+
};
206+
207+
export const SuccessAllStyles: Story = {
208+
render: () => (
209+
<div className={styles.grid}>
210+
<StatusComponent variant="success" style="filled" size="xs">Success Filled XS</StatusComponent>
211+
<StatusComponent variant="success" style="filled" size="md">Success Filled MD</StatusComponent>
212+
<StatusComponent variant="success" style="outline" size="xs">Success Outline XS</StatusComponent>
213+
<StatusComponent variant="success" style="outline" size="md">Success Outline MD</StatusComponent>
214+
</div>
215+
),
216+
};
217+
218+
export const DisabledAllStyles: Story = {
219+
render: () => (
220+
<div className={styles.grid}>
221+
<StatusComponent variant="disabled" style="filled" size="xs">Disabled Filled XS</StatusComponent>
222+
<StatusComponent variant="disabled" style="filled" size="md">Disabled Filled MD</StatusComponent>
223+
<StatusComponent variant="disabled" style="outline" size="xs">Disabled Outline XS</StatusComponent>
224+
<StatusComponent variant="disabled" style="outline" size="md">Disabled Outline MD</StatusComponent>
225+
</div>
226+
),
227+
};
228+
229+
// Grouped by style
230+
export const AllFilledVariants: Story = {
231+
render: () => (
232+
<div className={styles.variantGrid}>
233+
<div className={styles.sizeColumn}>
234+
<h4>XS Size</h4>
235+
{VARIANTS.map((variant) => (
236+
<StatusComponent key={variant} variant={variant} style="filled" size="xs">
237+
{variant}
238+
</StatusComponent>
239+
))}
240+
</div>
241+
<div className={styles.sizeColumn}>
242+
<h4>MD Size</h4>
243+
{VARIANTS.map((variant) => (
244+
<StatusComponent key={variant} variant={variant} style="filled" size="md">
245+
{variant}
246+
</StatusComponent>
247+
))}
248+
</div>
249+
</div>
250+
),
251+
};
252+
253+
export const AllOutlineVariants: Story = {
254+
render: () => (
255+
<div className={styles.variantGrid}>
256+
<div className={styles.sizeColumn}>
257+
<h4>XS Size</h4>
258+
{VARIANTS.map((variant) => (
259+
<StatusComponent key={variant} variant={variant} style="outline" size="xs">
260+
{variant}
261+
</StatusComponent>
262+
))}
263+
</div>
264+
<div className={styles.sizeColumn}>
265+
<h4>MD Size</h4>
266+
{VARIANTS.map((variant) => (
267+
<StatusComponent key={variant} variant={variant} style="outline" size="md">
268+
{variant}
269+
</StatusComponent>
270+
))}
271+
</div>
272+
</div>
273+
),
274+
};
275+
276+
// Real-world examples
277+
export const SystemStatuses: Story = {
278+
render: () => (
279+
<div className={styles.examplesGrid}>
280+
<StatusComponent variant="success" style="filled" size="md">Online</StatusComponent>
281+
<StatusComponent variant="error" style="filled" size="md">Offline</StatusComponent>
282+
<StatusComponent variant="warning" style="filled" size="md">Maintenance</StatusComponent>
283+
<StatusComponent variant="info" style="filled" size="md">Updating</StatusComponent>
284+
<StatusComponent variant="disabled" style="filled" size="md">Inactive</StatusComponent>
285+
</div>
286+
),
287+
};
288+
289+
export const ConnectionStates: Story = {
290+
render: () => (
291+
<div className={styles.examplesGrid}>
292+
<StatusComponent variant="success" style="outline" size="xs">Connected</StatusComponent>
293+
<StatusComponent variant="error" style="outline" size="xs">Disconnected</StatusComponent>
294+
<StatusComponent variant="warning" style="outline" size="xs">Reconnecting</StatusComponent>
295+
<StatusComponent variant="info" style="outline" size="xs">Authenticating</StatusComponent>
296+
</div>
297+
),
298+
};
299+
300+
export const DataQuality: Story = {
301+
render: () => (
302+
<div className={styles.examplesGrid}>
303+
<StatusComponent variant="data" style="filled" size="md">Live Data</StatusComponent>
304+
<StatusComponent variant="data" style="outline" size="md">Cached</StatusComponent>
305+
<StatusComponent variant="warning" style="filled" size="md">Stale</StatusComponent>
306+
<StatusComponent variant="error" style="filled" size="md">Invalid</StatusComponent>
307+
</div>
308+
),
309+
};
310+
311+
export const UserStatuses: Story = {
312+
render: () => (
313+
<div className={styles.examplesGrid}>
314+
<StatusComponent variant="success" style="filled" size="xs">Active</StatusComponent>
315+
<StatusComponent variant="neutral" style="filled" size="xs">Away</StatusComponent>
316+
<StatusComponent variant="warning" style="filled" size="xs">Busy</StatusComponent>
317+
<StatusComponent variant="disabled" style="filled" size="xs">Offline</StatusComponent>
318+
</div>
319+
),
320+
};
321+
322+
export const DeploymentStatuses: Story = {
323+
render: () => (
324+
<div className={styles.examplesGrid}>
325+
<StatusComponent variant="success" style="filled" size="md">Deployed</StatusComponent>
326+
<StatusComponent variant="info" style="filled" size="md">Building</StatusComponent>
327+
<StatusComponent variant="warning" style="filled" size="md">Queued</StatusComponent>
328+
<StatusComponent variant="error" style="filled" size="md">Failed</StatusComponent>
329+
<StatusComponent variant="neutral" style="filled" size="md">Cancelled</StatusComponent>
330+
</div>
331+
),
332+
};
333+
334+
// Legacy export for backwards compatibility
335+
export const Status = Default;

0 commit comments

Comments
 (0)