From fca27e8aeb24f640f611a1ffe6ae7cc01f804417 Mon Sep 17 00:00:00 2001 From: Robbert Date: Fri, 20 Dec 2024 16:44:13 +0100 Subject: [PATCH] docs: improve story descriptions for Color Sample - improve story descriptions for Color Sample - update latest design tokens - add stories with black & white - use `aria-label` instead of `title` for SVG label --- .../storybook-non-conforming/package.json | 2 +- packages/storybook-test/package.json | 2 +- .../color-sample/color-sample.stories.tsx | 186 +++++++++++++++--- packages/storybook/package.json | 2 +- pnpm-lock.yaml | 18 +- 5 files changed, 167 insertions(+), 43 deletions(-) diff --git a/packages/storybook-non-conforming/package.json b/packages/storybook-non-conforming/package.json index c305db4f..181beee5 100644 --- a/packages/storybook-non-conforming/package.json +++ b/packages/storybook-non-conforming/package.json @@ -21,7 +21,7 @@ "@nl-design-system-candidate/storybook-shared": "workspace:*", "@nl-design-system-unstable/design-tokens-table-react": "1.0.0", "@nl-design-system-unstable/tokens-lib": "0.1.0", - "@nl-design-system-unstable/voorbeeld-design-tokens": "3.3.0", + "@nl-design-system-unstable/voorbeeld-design-tokens": "3.3.3", "@storybook/addon-a11y": "8.4.5", "@storybook/addon-controls": "8.4.5", "@storybook/addon-docs": "8.4.5", diff --git a/packages/storybook-test/package.json b/packages/storybook-test/package.json index 899b6162..6abad413 100644 --- a/packages/storybook-test/package.json +++ b/packages/storybook-test/package.json @@ -21,7 +21,7 @@ "@nl-design-system-candidate/storybook-shared": "workspace:*", "@nl-design-system-unstable/design-tokens-table-react": "1.0.0", "@nl-design-system-unstable/tokens-lib": "0.1.0", - "@nl-design-system-unstable/voorbeeld-design-tokens": "3.3.0", + "@nl-design-system-unstable/voorbeeld-design-tokens": "3.3.3", "@storybook/addon-a11y": "8.4.5", "@storybook/addon-controls": "8.4.5", "@storybook/addon-docs": "8.4.5", diff --git a/packages/storybook-test/stories/color-sample/color-sample.stories.tsx b/packages/storybook-test/stories/color-sample/color-sample.stories.tsx index 8e1f440f..a38af16d 100644 --- a/packages/storybook-test/stories/color-sample/color-sample.stories.tsx +++ b/packages/storybook-test/stories/color-sample/color-sample.stories.tsx @@ -41,17 +41,20 @@ export default meta; type Story = StoryObj; export const Default: Story = { - name: 'Color Sample voor "deep pink"', - args: { value: '#ff1493' }, + name: 'Color Sample voor een huisstijlkleur', + args: { value: '#154273' }, globals: { dir: 'ltr', lang: 'nl', + title: 'Huisstijlkleuren', }, parameters: { - ariaLabelledBy: 'De kleur "#ff1493".', + ariaLabelledBy: 'De kleur "lintblauw".', docs: { description: { - story: 'Een kleurstaal met beschrijving.', + story: `Een kleurstaal met beschrijving voor een doelgroep die gewend is met kleurcodes te werken. + +De Color Sample en de tekst staan in dezelfde Paragraph, dus het is duidelijk dat ze bij elkaar horen.`, }, }, status: { type: [] }, @@ -60,26 +63,86 @@ export const Default: Story = { const id = useId(); return ( + + {context.parameters['ariaLabelledBy']} + + ); + }, +}; + +export const SoloColorSample: Story = { + name: 'Color Sample als zelfstandige afbeelding met toegankelijke naam', + args: { + ['aria-label']: 'De kleur "#154273".', + value: '#154273', + }, + decorators: [ + (Story, context) => ( <> - - {context.parameters['ariaLabelledBy']} + {Story()} + {context.args['aria-label']} + ), + ...meta.decorators, + ], + globals: { + dir: 'ltr', + lang: 'nl', + title: 'De kleur "#154273".', + }, + parameters: { + docs: { + description: { + story: + 'Een kleurstaal met expliciete beschrijving in een `aria-label` attribuut, die helemaal los staat in een element staat die bedoeld is om gerelateerde inhoud te groeperen, zoals een Paragraph, Table Cell of List Item. Deze vorm mag alleen gebruikt worden als de kleur elders in de context toegelicht is.', + }, + }, + status: { type: [] }, + }, +}; + +export const White: Story = { + name: 'Color Sample voor de kleur wit', + args: { value: '#FFFFFF' }, + globals: { + dir: 'ltr', + lang: 'nl', + title: 'Huisstijlkleuren', + }, + parameters: { + ariaLabelledBy: 'De kleur "wit".', + docs: { + description: { + story: + 'Een kleurstaal met voor de kleur "wit". De kleurstaal is te herkennen op een lichte achtergrondkleur door een border-color met voldoende contrast.', + }, + }, + status: { type: [] }, + }, + render(props, context) { + const id = useId(); + + return ( + + {context.parameters['ariaLabelledBy']} + ); }, }; -export const SemiTransparentColorSample: Story = { - name: 'Color Sample met semi-transparente "deep pink"', - args: { value: '#ff14937f' }, +export const Black: Story = { + name: 'Color Sample voor de kleur zwart', + args: { value: '#000000' }, globals: { dir: 'ltr', lang: 'nl', + title: 'Huisstijlkleuren', }, parameters: { - ariaLabelledBy: 'De semi-transparante kleur "#ff14937f".', + ariaLabelledBy: 'De kleur "zwart".', docs: { description: { - story: 'Een kleurstaal met een semitransparante kleur en beschrijving.', + story: 'Een kleurstaal met voor de kleur "zwart".', }, }, status: { type: [] }, @@ -88,33 +151,94 @@ export const SemiTransparentColorSample: Story = { const id = useId(); return ( - <> - - {context.parameters['ariaLabelledBy']} - + + {context.parameters['ariaLabelledBy']} + ); }, }; -export const SoloColorSample: Story = { - name: 'Color Sample als afbeelding met toegankelijke naam', - args: { - title: 'De kleur "#ff1493".', - value: '#ff1493', +export const CssColorCode: Story = { + name: 'Color Sample voor CSS-kleurcode van "deep pink"', + args: { value: '#ff1493' }, + globals: { + dir: 'ltr', + lang: 'nl', }, + parameters: { + ariaLabelledBy: 'De kleur "#ff1493".', + docs: { + description: { + story: 'Een kleurstaal met beschrijving voor een doelgroep die gewend is met kleurcodes te werken.', + }, + }, + status: { type: [] }, + }, + render(props, context) { + const id = useId(); + + return ( + + {context.parameters['ariaLabelledBy']} + + ); + }, +}; + +export const TransparentColorSample: Story = { + name: 'Color Sample met een 100% transparante kleur', + args: { value: '#ffffff00' }, + globals: { + dir: 'ltr', + lang: 'nl', + }, + parameters: { + ariaLabelledBy: 'De 100% transparante kleur "#ffffff00".', + docs: { + description: { + story: + 'Een kleurstaal met een 100% transparante kleur en beschrijving, voor een doelgroep die gewend is [alpha-transparantie](https://en.wikipedia.org/wiki/Alpha_compositing) te beoordelen met een checkerboard pattern. De 8-cijferige hexadecimale kleurcode maakt ook duidelijk dat er transparantie is.', + }, + }, + status: { type: [] }, + }, + render(props, context) { + const id = useId(); + + return ( + + {context.parameters['ariaLabelledBy']} + + ); + }, +}; + +export const SemiTransparentColorSample: Story = { + name: 'Color Sample met semi-transparente "deep pink"', + args: { value: '#ff14937f' }, globals: { dir: 'ltr', lang: 'nl', }, parameters: { + ariaLabelledBy: 'De semi-transparante kleur "#ff14937f".', docs: { description: { story: - 'Een kleurstaal zonder expliciete beschrijving. Deze vorm mag alleen gebruikt worden als de kleur elders in de context toegelicht is.', + 'Een kleurstaal met een semitransparante kleur en beschrijving, voor een doelgroep die gewend is [alpha-transparantie](https://en.wikipedia.org/wiki/Alpha_compositing) te beoordelen met een checkerboard pattern. De 8-cijferige hexadecimale kleurcode maakt ook duidelijk dat er transparantie is.', }, }, status: { type: [] }, }, + render(props, context) { + const id = useId(); + + return ( + + {context.parameters['ariaLabelledBy']} + + ); + }, }; export const Arabic: Story = { @@ -129,7 +253,8 @@ export const Arabic: Story = { ariaLabelledBy: 'أخضر', docs: { description: { - story: 'Een kleurstaal met beschrijving in Arabisch.', + story: + 'Een kleurstaal met beschrijving in Arabisch, voor de kleur groen (["أخضر" in Arabisch](https://ar.wikipedia.org/wiki/أخضر)).', }, }, status: { type: [] }, @@ -138,10 +263,9 @@ export const Arabic: Story = { const id = useId(); return ( - <> - - {context.parameters['ariaLabelledBy']} - + + {context.parameters['ariaLabelledBy']} + ); }, }; @@ -159,7 +283,8 @@ export const Japanese: Story = { ariaLabelledBy: '緑', docs: { description: { - story: 'Een kleurstaal met beschrijving in het Japans.', + story: + 'Een kleurstaal met beschrijving in het Japans, voor de kleur groen (["緑" in Japans](https://ja.wikipedia.org/wiki/緑)).', }, }, status: { type: [] }, @@ -168,10 +293,9 @@ export const Japanese: Story = { const id = useId(); return ( - <> - - {context.parameters['ariaLabelledBy']} - + + {context.parameters['ariaLabelledBy']} + ); }, }; diff --git a/packages/storybook/package.json b/packages/storybook/package.json index d71e0930..b9b41d48 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -23,7 +23,7 @@ "@fontsource/fira-sans": "5.1.0", "@fontsource/source-serif-pro": "5.1.0", "@nl-design-system-candidate/storybook-shared": "workspace:*", - "@nl-design-system-unstable/voorbeeld-design-tokens": "3.3.0", + "@nl-design-system-unstable/voorbeeld-design-tokens": "3.3.3", "@storybook/addon-a11y": "8.4.5", "@storybook/addon-actions": "8.4.5", "@storybook/addon-docs": "8.4.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a85a05be..5e26e3ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -498,8 +498,8 @@ importers: specifier: workspace:* version: link:../storybook-shared '@nl-design-system-unstable/voorbeeld-design-tokens': - specifier: 3.3.0 - version: 3.3.0 + specifier: 3.3.3 + version: 3.3.3 '@storybook/addon-a11y': specifier: 8.4.5 version: 8.4.5(storybook@8.4.5(prettier@3.3.3)) @@ -576,8 +576,8 @@ importers: specifier: 0.1.0 version: 0.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.5(prettier@3.3.3)) '@nl-design-system-unstable/voorbeeld-design-tokens': - specifier: 3.3.0 - version: 3.3.0 + specifier: 3.3.3 + version: 3.3.3 '@storybook/addon-a11y': specifier: 8.4.5 version: 8.4.5(storybook@8.4.5(prettier@3.3.3)) @@ -684,8 +684,8 @@ importers: specifier: 0.1.0 version: 0.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.5(prettier@3.3.3)) '@nl-design-system-unstable/voorbeeld-design-tokens': - specifier: 3.3.0 - version: 3.3.0 + specifier: 3.3.3 + version: 3.3.3 '@storybook/addon-a11y': specifier: 8.4.5 version: 8.4.5(storybook@8.4.5(prettier@3.3.3)) @@ -1919,8 +1919,8 @@ packages: '@nl-design-system-unstable/tokens-lib@0.1.0': resolution: {integrity: sha512-KppSSPf5gNUeKwysRFYJDvF5k17h1Zp5szjrR8HfSwOWP3JnGjfyk9IeuvdiH4NbR2KwIfcvYvSoMGVvXBuvFA==} - '@nl-design-system-unstable/voorbeeld-design-tokens@3.3.0': - resolution: {integrity: sha512-ouUbcwlBMt0KHAhbpGGgllUk+knjbP1ijvfVfCIR3xw1eTZvPC+eo3JT/fb+61dcW670xbw3+C121PRfs/u8UA==} + '@nl-design-system-unstable/voorbeeld-design-tokens@3.3.3': + resolution: {integrity: sha512-r5TbUUapFwQI0SSFLBdbiF1qE+YjlV7haBKv3i3Y+PMkuEpo51l2lRRYEeuo0P11S8zjg+VQZLcERIO0fqf6BA==} '@nl-design-system/eslint-config@0.0.1': resolution: {integrity: sha512-zgKEBk0S88bkRX4zRihhoOidQtekpvOHWOOPl0aJhTy5aF2hyFzbzDTGjPgpseo0lDbwZjd7LUwLJevOj83WYg==} @@ -7642,7 +7642,7 @@ snapshots: - react-dom - storybook - '@nl-design-system-unstable/voorbeeld-design-tokens@3.3.0': {} + '@nl-design-system-unstable/voorbeeld-design-tokens@3.3.3': {} '@nl-design-system/eslint-config@0.0.1(eslint@9.14.0)(typescript@5.6.3)': dependencies: