Skip to content

Commit 28c68c9

Browse files
jeffreylauwersjeffreylauwers
authored
Merge pull request #112 from jeffreylauwers/chore/story-consistency-button-variants
chore(storybook): ButtonLink en LinkButton stories in lijn brengen met Button en Link
2 parents 0b8691c + 2d41776 commit 28c68c9

3 files changed

Lines changed: 264 additions & 81 deletions

File tree

‎packages/components-html/src/button-link/button-link.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
pointer-events: none blokkeert ook hover/active (Button's :not(:disabled) matcht
1616
altijd op <a>, dus we kunnen niet op die guards vertrouwen). */
1717
.dsn-button-link[aria-disabled='true'] {
18-
opacity: 0.5;
18+
background-color: var(--dsn-button-disabled-background-color);
19+
color: var(--dsn-button-disabled-color);
20+
border-color: var(--dsn-button-disabled-border-color);
1921
cursor: not-allowed;
2022
pointer-events: none;
2123
}

‎packages/storybook/src/ButtonLink.stories.tsx‎

Lines changed: 239 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,10 @@ export const Default: Story = {};
175175
// VARIANTEN
176176
// =============================================================================
177177

178+
export const Strong: Story = {
179+
args: { variant: 'strong' },
180+
};
181+
178182
export const DefaultVariant: Story = {
179183
name: 'Default variant',
180184
args: { variant: 'default' },
@@ -184,6 +188,14 @@ export const Subtle: Story = {
184188
args: { variant: 'subtle' },
185189
};
186190

191+
export const Small: Story = {
192+
args: { size: 'small' },
193+
};
194+
195+
export const Large: Story = {
196+
args: { size: 'large' },
197+
};
198+
187199
export const Disabled: Story = {
188200
args: { disabled: true },
189201
};
@@ -192,23 +204,197 @@ export const External: Story = {
192204
args: { href: 'https://example.com', external: true },
193205
};
194206

207+
export const FullWidth: Story = {
208+
args: { fullWidth: true },
209+
};
210+
211+
export const NegativeSentiment: Story = {
212+
name: 'Negative sentiment',
213+
args: { variant: 'strong-negative' },
214+
};
215+
216+
export const PositiveSentiment: Story = {
217+
name: 'Positive sentiment',
218+
args: { variant: 'strong-positive' },
219+
};
220+
195221
export const WithIconStart: Story = {
196222
name: 'With icon start',
197-
args: { iconStart: <Icon name="arrow-left" aria-hidden /> },
223+
render: () => (
224+
<div
225+
style={{
226+
display: 'flex',
227+
gap: '0.5rem',
228+
alignItems: 'center',
229+
flexWrap: 'wrap',
230+
}}
231+
>
232+
<ButtonLink
233+
href="/"
234+
variant="strong"
235+
iconStart={<Icon name="check" aria-hidden />}
236+
>
237+
{TEKST}
238+
</ButtonLink>
239+
<ButtonLink
240+
href="/"
241+
variant="default"
242+
iconStart={<Icon name="edit" aria-hidden />}
243+
>
244+
{TEKST}
245+
</ButtonLink>
246+
<ButtonLink
247+
href="/"
248+
variant="subtle"
249+
iconStart={<Icon name="download" aria-hidden />}
250+
>
251+
{TEKST}
252+
</ButtonLink>
253+
<ButtonLink
254+
href="/"
255+
variant="strong-negative"
256+
iconStart={<Icon name="trash" aria-hidden />}
257+
>
258+
{TEKST}
259+
</ButtonLink>
260+
</div>
261+
),
198262
};
199263

200264
export const WithIconEnd: Story = {
201265
name: 'With icon end',
202-
args: { iconEnd: <Icon name="arrow-right" aria-hidden /> },
266+
render: () => (
267+
<div
268+
style={{
269+
display: 'flex',
270+
gap: '0.5rem',
271+
alignItems: 'center',
272+
flexWrap: 'wrap',
273+
}}
274+
>
275+
<ButtonLink
276+
href="/"
277+
variant="strong"
278+
iconEnd={<Icon name="arrow-right" aria-hidden />}
279+
>
280+
{TEKST}
281+
</ButtonLink>
282+
<ButtonLink
283+
href="/"
284+
variant="default"
285+
iconEnd={<Icon name="arrow-right" aria-hidden />}
286+
>
287+
{TEKST}
288+
</ButtonLink>
289+
<ButtonLink
290+
href="/"
291+
variant="subtle"
292+
iconEnd={<Icon name="chevron-down" aria-hidden />}
293+
>
294+
{TEKST}
295+
</ButtonLink>
296+
</div>
297+
),
298+
};
299+
300+
export const WithIconStartAndEnd: Story = {
301+
name: 'With icon start and end',
302+
render: () => (
303+
<div
304+
style={{
305+
display: 'flex',
306+
gap: '0.5rem',
307+
alignItems: 'center',
308+
flexWrap: 'wrap',
309+
}}
310+
>
311+
<ButtonLink
312+
href="/"
313+
variant="strong"
314+
iconStart={<Icon name="check" aria-hidden />}
315+
iconEnd={<Icon name="arrow-right" aria-hidden />}
316+
>
317+
{TEKST}
318+
</ButtonLink>
319+
<ButtonLink
320+
href="/"
321+
variant="default"
322+
iconStart={<Icon name="edit" aria-hidden />}
323+
iconEnd={<Icon name="chevron-down" aria-hidden />}
324+
>
325+
{TEKST}
326+
</ButtonLink>
327+
</div>
328+
),
329+
};
330+
331+
export const IconSizes: Story = {
332+
name: 'Icon sizes per button size',
333+
render: () => (
334+
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
335+
<ButtonLink
336+
href="/"
337+
size="small"
338+
iconStart={<Icon name="check" aria-hidden />}
339+
>
340+
{TEKST}
341+
</ButtonLink>
342+
<ButtonLink
343+
href="/"
344+
size="default"
345+
iconStart={<Icon name="check" aria-hidden />}
346+
>
347+
{TEKST}
348+
</ButtonLink>
349+
<ButtonLink
350+
href="/"
351+
size="large"
352+
iconStart={<Icon name="check" aria-hidden />}
353+
>
354+
{TEKST}
355+
</ButtonLink>
356+
</div>
357+
),
203358
};
204359

205360
export const IconOnly: Story = {
206361
name: 'Icon only',
207-
args: {
208-
iconOnly: true,
209-
iconStart: <Icon name="download" aria-hidden />,
210-
children: 'Download',
211-
},
362+
render: () => (
363+
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
364+
<ButtonLink
365+
href="/"
366+
variant="strong"
367+
iconOnly
368+
iconStart={<Icon name="plus" aria-hidden />}
369+
>
370+
Toevoegen
371+
</ButtonLink>
372+
<ButtonLink
373+
href="/"
374+
variant="default"
375+
iconOnly
376+
iconStart={<Icon name="settings" aria-hidden />}
377+
>
378+
Instellingen
379+
</ButtonLink>
380+
<ButtonLink
381+
href="/"
382+
variant="subtle"
383+
iconOnly
384+
iconStart={<Icon name="x" aria-hidden />}
385+
>
386+
Sluiten
387+
</ButtonLink>
388+
<ButtonLink
389+
href="/"
390+
variant="strong-negative"
391+
iconOnly
392+
iconStart={<Icon name="trash" aria-hidden />}
393+
>
394+
Verwijderen
395+
</ButtonLink>
396+
</div>
397+
),
212398
};
213399

214400
// =============================================================================
@@ -227,12 +413,12 @@ export const AllVariants: Story = {
227413
flexWrap: 'wrap',
228414
}}
229415
>
230-
<ButtonLink href="/">{TEKST} (strong)</ButtonLink>
416+
<ButtonLink href="/">{TEKST}</ButtonLink>
231417
<ButtonLink href="/" variant="default">
232-
{TEKST} (default)
418+
{TEKST}
233419
</ButtonLink>
234420
<ButtonLink href="/" variant="subtle">
235-
{TEKST} (subtle)
421+
{TEKST}
236422
</ButtonLink>
237423
</div>
238424
<div
@@ -244,13 +430,13 @@ export const AllVariants: Story = {
244430
}}
245431
>
246432
<ButtonLink href="/" variant="strong-negative">
247-
{TEKST} (strong-negative)
433+
{TEKST}
248434
</ButtonLink>
249435
<ButtonLink href="/" variant="default-negative">
250-
{TEKST} (default-negative)
436+
{TEKST}
251437
</ButtonLink>
252438
<ButtonLink href="/" variant="subtle-negative">
253-
{TEKST} (subtle-negative)
439+
{TEKST}
254440
</ButtonLink>
255441
</div>
256442
<div
@@ -262,50 +448,56 @@ export const AllVariants: Story = {
262448
}}
263449
>
264450
<ButtonLink href="/" variant="strong-positive">
265-
{TEKST} (strong-positive)
451+
{TEKST}
266452
</ButtonLink>
267453
<ButtonLink href="/" variant="default-positive">
268-
{TEKST} (default-positive)
454+
{TEKST}
269455
</ButtonLink>
270456
<ButtonLink href="/" variant="subtle-positive">
271-
{TEKST} (subtle-positive)
272-
</ButtonLink>
273-
</div>
274-
<div
275-
style={{
276-
display: 'flex',
277-
gap: '0.5rem',
278-
alignItems: 'center',
279-
flexWrap: 'wrap',
280-
}}
281-
>
282-
<ButtonLink href="/" size="small">
283-
{TEKST} (small)
284-
</ButtonLink>
285-
<ButtonLink href="/">{TEKST} (default)</ButtonLink>
286-
<ButtonLink href="/" size="large">
287-
{TEKST} (large)
288-
</ButtonLink>
289-
</div>
290-
<div
291-
style={{
292-
display: 'flex',
293-
gap: '0.5rem',
294-
alignItems: 'center',
295-
flexWrap: 'wrap',
296-
}}
297-
>
298-
<ButtonLink href="/" disabled>
299-
{TEKST} (disabled)
300-
</ButtonLink>
301-
<ButtonLink href="https://example.com" external>
302-
{TEKST} (external)
457+
{TEKST}
303458
</ButtonLink>
304459
</div>
305460
</div>
306461
),
307462
};
308463

464+
export const AllSizes: Story = {
465+
name: 'All sizes',
466+
render: () => (
467+
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
468+
<ButtonLink href="/" size="small">
469+
{TEKST}
470+
</ButtonLink>
471+
<ButtonLink href="/">{TEKST}</ButtonLink>
472+
<ButtonLink href="/" size="large">
473+
{TEKST}
474+
</ButtonLink>
475+
</div>
476+
),
477+
};
478+
479+
export const AllStates: Story = {
480+
name: 'All states',
481+
render: () => (
482+
<div
483+
style={{
484+
display: 'flex',
485+
gap: '0.5rem',
486+
alignItems: 'center',
487+
flexWrap: 'wrap',
488+
}}
489+
>
490+
<ButtonLink href="/">{TEKST}</ButtonLink>
491+
<ButtonLink href="/" disabled>
492+
{TEKST}
493+
</ButtonLink>
494+
<ButtonLink href="https://example.com" external>
495+
{TEKST}
496+
</ButtonLink>
497+
</div>
498+
),
499+
};
500+
309501
// =============================================================================
310502
// TEKST VARIANTEN
311503
// =============================================================================

0 commit comments

Comments
 (0)