Skip to content

Commit 61c6352

Browse files
marissahuysentruytmarissahuysentruyt
committed
feat(status-light): add new stories
1 parent 6437e69 commit 61c6352

File tree

1 file changed

+173
-77
lines changed

1 file changed

+173
-77
lines changed

‎second-gen/packages/swc/components/status-light/stories/status-light.stories.ts‎

Lines changed: 173 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -10,88 +10,184 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212
import { html, TemplateResult } from 'lit';
13+
import { styleMap } from 'lit/directives/style-map.js';
14+
import type { Meta, StoryObj as Story } from '@storybook/web-components';
15+
import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
16+
17+
import { StatusLight } from '@swc/components/status-light';
1318

1419
import '@swc/components/status-light';
1520

16-
export default {
17-
component: 'swc-status-light',
21+
// ────────────────
22+
// METADATA
23+
// ────────────────
24+
25+
const { args, argTypes } = getStorybookHelpers('swc-status-light');
26+
27+
argTypes.variant = {
28+
...argTypes.variant,
29+
name: 'Variant',
30+
description:
31+
'Changes the color of the status dot. The variant list includes both semantic and non-semantic options.',
32+
type: { name: 'string', required: true },
33+
table: {
34+
type: { summary: 'string' },
35+
defaultValue: { summary: 'info' },
36+
category: 'Component',
37+
},
38+
control: { type: 'select' },
39+
options: StatusLight.VARIANTS,
40+
};
41+
42+
argTypes.size = {
43+
name: 'Size',
44+
type: { name: 'string', required: false },
45+
description: 'The size of the status light dot. The default size is `m`.',
46+
control: { type: 'select' },
47+
options: StatusLight.VALID_SIZES,
48+
table: {
49+
type: { summary: 'string' },
50+
defaultValue: { summary: 'm' },
51+
category: 'Component',
52+
},
53+
};
54+
55+
args['default-slot'] = {
56+
name: 'Default slot',
57+
type: { name: 'string', required: false },
58+
description: 'The text label of the status light.',
59+
control: { type: 'text' },
60+
table: {
61+
type: { summary: 'string' },
62+
defaultValue: { summary: '' },
63+
},
64+
};
65+
66+
const meta: Meta = {
1867
title: 'Status light',
68+
component: 'swc-status-light',
69+
argTypes,
70+
parameters: {},
71+
args: {
72+
['default-slot']: 'Status light',
73+
variant: 'info',
74+
size: 'm',
75+
},
76+
// this render explicitly binds the args to the component (particularly helpful for the size property) so the Storybook controls work as expected
77+
render: (args) =>
78+
html`<swc-status-light .size=${args.size} variant=${args.variant}
79+
>${args['default-slot']}</swc-status-light
80+
>`,
81+
tags: ['migrated'],
1982
};
2083

21-
export const s = (): TemplateResult => html`
22-
<swc-status-light size="s" variant="positive">positive</swc-status-light>
23-
<swc-status-light size="s" variant="negative">negative</swc-status-light>
24-
<swc-status-light size="s" variant="notice">notice</swc-status-light>
25-
<swc-status-light size="s" variant="info">info</swc-status-light>
26-
<swc-status-light size="s" variant="neutral">neutral</swc-status-light>
27-
<swc-status-light size="s" variant="yellow">yellow</swc-status-light>
28-
<swc-status-light size="s" variant="fuchsia">fuchsia</swc-status-light>
29-
<swc-status-light size="s" variant="indigo">indigo</swc-status-light>
30-
<swc-status-light size="s" variant="seafoam">seafoam</swc-status-light>
31-
<swc-status-light size="s" variant="chartreuse"
32-
>chartreuse</swc-status-light
33-
>
34-
<swc-status-light size="s" variant="magenta">magenta</swc-status-light>
35-
<swc-status-light size="s" variant="celery">celery</swc-status-light>
36-
<swc-status-light size="s" variant="purple">purple</swc-status-light>
37-
`;
38-
39-
export const m = (): TemplateResult => html`
40-
<swc-status-light size="m" variant="positive">positive</swc-status-light>
41-
<swc-status-light size="m" variant="negative">negative</swc-status-light>
42-
<swc-status-light size="m" variant="notice">notice</swc-status-light>
43-
<swc-status-light size="m" variant="info">info</swc-status-light>
44-
<swc-status-light size="m" variant="neutral">neutral</swc-status-light>
45-
<swc-status-light size="m" variant="yellow">yellow</swc-status-light>
46-
<swc-status-light size="m" variant="fuchsia">fuchsia</swc-status-light>
47-
<swc-status-light size="m" variant="indigo">indigo</swc-status-light>
48-
<swc-status-light size="m" variant="seafoam">seafoam</swc-status-light>
49-
<swc-status-light size="m" variant="chartreuse"
50-
>chartreuse</swc-status-light
51-
>
52-
<swc-status-light size="m" variant="magenta">magenta</swc-status-light>
53-
<swc-status-light size="m" variant="celery">celery</swc-status-light>
54-
<swc-status-light size="m" variant="purple">purple</swc-status-light>
55-
`;
56-
57-
export const l = (): TemplateResult => html`
58-
<swc-status-light size="l" variant="positive">positive</swc-status-light>
59-
<swc-status-light size="l" variant="negative">negative</swc-status-light>
60-
<swc-status-light size="l" variant="notice">notice</swc-status-light>
61-
<swc-status-light size="l" variant="info">info</swc-status-light>
62-
<swc-status-light size="l" variant="neutral">neutral</swc-status-light>
63-
<swc-status-light size="l" variant="yellow">yellow</swc-status-light>
64-
<swc-status-light size="l" variant="fuchsia">fuchsia</swc-status-light>
65-
<swc-status-light size="l" variant="indigo">indigo</swc-status-light>
66-
<swc-status-light size="l" variant="seafoam">seafoam</swc-status-light>
67-
<swc-status-light size="l" variant="chartreuse"
68-
>chartreuse</swc-status-light
69-
>
70-
<swc-status-light size="l" variant="magenta">magenta</swc-status-light>
71-
<swc-status-light size="l" variant="celery">celery</swc-status-light>
72-
<swc-status-light size="l" variant="purple">purple</swc-status-light>
73-
`;
74-
75-
export const XL = (): TemplateResult => html`
76-
<swc-status-light size="xl" variant="positive">positive</swc-status-light>
77-
<swc-status-light size="xl" variant="negative">negative</swc-status-light>
78-
<swc-status-light size="xl" variant="notice">notice</swc-status-light>
79-
<swc-status-light size="xl" variant="info">info</swc-status-light>
80-
<swc-status-light size="xl" variant="neutral">neutral</swc-status-light>
81-
<swc-status-light size="xl" variant="yellow">yellow</swc-status-light>
82-
<swc-status-light size="xl" variant="fuchsia">fuchsia</swc-status-light>
83-
<swc-status-light size="xl" variant="indigo">indigo</swc-status-light>
84-
<swc-status-light size="xl" variant="seafoam">seafoam</swc-status-light>
85-
<swc-status-light size="xl" variant="chartreuse"
86-
>chartreuse</swc-status-light
87-
>
88-
<swc-status-light size="xl" variant="magenta">magenta</swc-status-light>
89-
<swc-status-light size="xl" variant="celery">celery</swc-status-light>
90-
<swc-status-light size="xl" variant="purple">purple</swc-status-light>
91-
`;
84+
export default meta;
9285

93-
export const disabledTrue = (): TemplateResult => html`
94-
<swc-status-light variant="positive" disabled>positive</swc-status-light>
95-
`;
86+
// ───────────────
87+
// STORIES
88+
// ───────────────
89+
90+
type StatusLightVariant = typeof StatusLight.prototype.variant;
91+
type StatusLightSize = typeof StatusLight.prototype.size;
92+
93+
/**
94+
* Status lights should always include a label with text that clearly communicates the kind of status being shown. Color alone is not enough to communicate the status. Do not change the text color to match the dot.
95+
*/
96+
export const Default: Story = {};
9697

97-
disabledTrue.storyName = 'disabled: true';
98+
/** When the text is too long for the horizontal space available, it wraps to form another line. */
99+
export const TextWrapping: Story = {
100+
render: () =>
101+
html` <swc-status-light style="max-inline-size: 200px">
102+
This is a very long status light label that wraps when it reaches
103+
its max inline size
104+
</swc-status-light>`,
105+
tags: ['!dev'],
106+
};
107+
TextWrapping.storyName = 'Text wrapping';
108+
109+
/**
110+
* When status lights have a semantic meaning, they use semantic colors. Use these variants for the following statuses:
111+
* - Informative (active, in use, live, published)
112+
* - Neutral (archived, deleted, paused, draft, not started, ended)
113+
* - Positive (approved, complete, success, new, purchased, licensed)
114+
* - Notice (needs approval, pending, scheduled, syncing, indexing, processing)
115+
* - Negative (error, alert, rejected, failed)
116+
*
117+
* Semantic status lights should never be used for color coding categories or labels, and vice versa.
118+
*/
119+
export const SemanticVariants: Story = {
120+
render: () =>
121+
CONTAINER(
122+
StatusLight.VARIANTS_SEMANTIC.map(
123+
(variant: StatusLightVariant) => html`
124+
<swc-status-light variant="${variant as StatusLightVariant}"
125+
>${capitalize(variant)}</swc-status-light
126+
>
127+
`
128+
)
129+
),
130+
tags: ['!dev'],
131+
};
132+
SemanticVariants.storyName = 'Semantic variants';
133+
134+
/**
135+
* When status lights are used to color code categories and labels that are commonly found in data visualization, they use label colors. The ideal usage for these is when there are 8 or fewer categories or labels being color coded.
136+
*/
137+
export const NonsemanticVariants: Story = {
138+
render: () =>
139+
CONTAINER(
140+
StatusLight.VARIANTS_COLOR.map(
141+
(variant: StatusLightVariant) => html`
142+
<swc-status-light variant="${variant as StatusLightVariant}"
143+
>${capitalize(variant)}</swc-status-light
144+
>
145+
`
146+
)
147+
),
148+
tags: ['!dev'],
149+
};
150+
NonsemanticVariants.storyName = 'Non-semantic variants';
151+
152+
/**
153+
* Status lights come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
154+
*/
155+
export const Sizes: Story = {
156+
render: () =>
157+
CONTAINER(
158+
StatusLight.VALID_SIZES.map(
159+
(size: StatusLightSize) => html`
160+
<swc-status-light size="${size}">${size}</swc-status-light>
161+
`
162+
)
163+
),
164+
tags: ['!dev'],
165+
};
166+
167+
// ────────────────────────
168+
// HELPER FUNCTIONS
169+
// ────────────────────────
170+
171+
/* @todo Pull this up into a utility function for all components to leverage */
172+
function capitalize(str?: string): string {
173+
if (typeof str !== 'string') {
174+
return '';
175+
}
176+
return str.charAt(0).toUpperCase() + str.slice(1);
177+
}
178+
179+
/* @todo Pull this up into a decorator for all stories to leverage */
180+
function CONTAINER(content: TemplateResult<1>[]): TemplateResult {
181+
return html`<div
182+
style=${styleMap({
183+
display: 'flex',
184+
gap: 'var(--spectrum-spacing-200)',
185+
'flex-wrap': 'wrap',
186+
'justify-content': 'center',
187+
// Used 80ch because that's generally considered the maximum readable width for text in a web page.
188+
'max-inline-size': '80ch',
189+
})}
190+
>
191+
${content}
192+
</div>`;
193+
}

0 commit comments

Comments
 (0)