From de24035fb819bba6e40278e4b4ada9b565aff2e0 Mon Sep 17 00:00:00 2001 From: alimpens Date: Fri, 6 Sep 2024 14:14:09 +0200 Subject: [PATCH 1/5] Add Checkbox Field Set stories --- .../src/components/Checkbox/Checkbox.docs.mdx | 21 ++++ .../components/Checkbox/Checkbox.stories.tsx | 100 ++++++++++++++++++ 2 files changed, 121 insertions(+) diff --git a/storybook/src/components/Checkbox/Checkbox.docs.mdx b/storybook/src/components/Checkbox/Checkbox.docs.mdx index 610fcb2856..e71d3d8c07 100644 --- a/storybook/src/components/Checkbox/Checkbox.docs.mdx +++ b/storybook/src/components/Checkbox/Checkbox.docs.mdx @@ -17,3 +17,24 @@ import README from "../../../../packages/css/src/components/checkbox/README.md?r ### Long label + +### In a Field Set + +Use a Field Set to group several Checkboxes with a legend, description and / or an Error Message. + +Because of an [NVDA bug](https://github.com/nvaccess/nvda/issues/12718), we add the description text to the Field Set with `aria-labelledby`, +instead of `aria-describedby`. + +If you don’t need the description, remove its Paragraph and the Paragraphs `id` from the Field Set `aria-labelledby`. + +Check [the Field Set docs](/docs/components-forms-field-set--docs) for more information on configuring it. + + + +### In a Field Set with validation + +If the Checkbox can become invalid, add an Error Message component and its `id` to the `aria-labelledby` attribute of the Field Set. + +Check [the Field Set docs](/docs/components-forms-field-set--docs) for more information on configuring it. + + diff --git a/storybook/src/components/Checkbox/Checkbox.stories.tsx b/storybook/src/components/Checkbox/Checkbox.stories.tsx index 1577b408d3..c878291476 100644 --- a/storybook/src/components/Checkbox/Checkbox.stories.tsx +++ b/storybook/src/components/Checkbox/Checkbox.stories.tsx @@ -3,6 +3,7 @@ * Copyright Gemeente Amsterdam */ +import { Column, ErrorMessage, FieldSet, Paragraph } from '@amsterdam/design-system-react' import { Checkbox } from '@amsterdam/design-system-react/src' import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' @@ -56,3 +57,102 @@ export const LongLabel: Story = { 'Ik heb alle gegevens correct en volledig ingevuld. Ik begrijp dat een verhuizing via internet dezelfde juridische status heeft als een verhuizing met een geschreven geldige handtekening.', }, } + +export const InAFieldSet: Story = { + argTypes: { + checked: { + table: { disable: true }, + }, + children: { + table: { disable: true }, + }, + disabled: { + table: { disable: true }, + }, + indeterminate: { + table: { disable: true }, + }, + }, + render: ({ invalid }) => ( +
+ + De laatstgenoemde melding. + + {invalid && ( + + Geef aan waar uw laatstgenoemde melding over gaat. + + )} + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
+ ), +} + +export const InAFieldSetWithValidation: Story = { + args: { + invalid: true, + }, + argTypes: { + checked: { + table: { disable: true }, + }, + children: { + table: { disable: true }, + }, + disabled: { + table: { disable: true }, + }, + indeterminate: { + table: { disable: true }, + }, + }, + render: ({ invalid }) => ( +
+ + De laatstgenoemde melding. + + {invalid && ( + + Geef aan waar uw laatstgenoemde melding over gaat. + + )} + + + Horecabedrijf + + + Ander soort bedrijf + + + Evenement + + + Iets anders + + +
+ ), +} From 23e082da81bce3e552f4178091a8ee22a61394ae Mon Sep 17 00:00:00 2001 From: alimpens Date: Fri, 6 Sep 2024 14:15:20 +0200 Subject: [PATCH 2/5] Fix casing in Radio docs --- storybook/src/components/Radio/Radio.docs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/src/components/Radio/Radio.docs.mdx b/storybook/src/components/Radio/Radio.docs.mdx index 8b8a9e50a5..75ee926d65 100644 --- a/storybook/src/components/Radio/Radio.docs.mdx +++ b/storybook/src/components/Radio/Radio.docs.mdx @@ -16,7 +16,7 @@ import README from "../../../../packages/css/src/components/radio/README.md?raw" ### In a Field Set -Use a Field Set to group several Radios with a legend, description and / or an error message. +Use a Field Set to group several Radios with a legend, description and / or an Error Message. Add `role="radiogroup"` to the Field Set to have it explicitly announced as a radio group (the default role is just ‘group’). The ‘radio group’ role also allows using `aria-required` on Field Set; that isn’t allowed for the ‘group’ role. From b4f95e73f544ec14586852507ea3f3c57ec2e48b Mon Sep 17 00:00:00 2001 From: alimpens Date: Fri, 6 Sep 2024 14:34:17 +0200 Subject: [PATCH 3/5] Add Time Input docs --- .../components/TimeInput/TimeInput.docs.mdx | 18 +++++++++++ .../TimeInput/TimeInput.stories.tsx | 30 +++++++++++++++++++ 2 files changed, 48 insertions(+) diff --git a/storybook/src/components/TimeInput/TimeInput.docs.mdx b/storybook/src/components/TimeInput/TimeInput.docs.mdx index 4b0f7aaa9c..cc9eba6cc6 100644 --- a/storybook/src/components/TimeInput/TimeInput.docs.mdx +++ b/storybook/src/components/TimeInput/TimeInput.docs.mdx @@ -21,3 +21,21 @@ import README from "../../../../packages/css/src/components/time-input/README.md ### Disabled + +### In a Field + +Use a Field to group a Time Input with a Label, description and / or an Error Message. + +If you don’t need the description, remove its Paragraph and the `aria-describedby` from the Time Input. + +Check [the Field docs](/docs/components-forms-field--docs) for more information on configuring it. + + + +### In a Field with validation + +If the Time Input can become invalid, add an Error Message and its `id` to the `aria-describedby` attribute of the Time Input. + +Check [the Field docs](/docs/components-forms-field--docs) for more information on configuring it. + + diff --git a/storybook/src/components/TimeInput/TimeInput.stories.tsx b/storybook/src/components/TimeInput/TimeInput.stories.tsx index 1d0f16238a..4248203c0c 100644 --- a/storybook/src/components/TimeInput/TimeInput.stories.tsx +++ b/storybook/src/components/TimeInput/TimeInput.stories.tsx @@ -3,6 +3,7 @@ * Copyright Gemeente Amsterdam */ +import { ErrorMessage, Field, Label, Paragraph } from '@amsterdam/design-system-react' import { TimeInput } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' @@ -37,3 +38,32 @@ export const Disabled: Story = { disabled: true, }, } + +export const InAField: Story = { + render: (args) => ( + + + + Omschrijving. + + {args.invalid && Foutmelding.} + + + ), +} + +export const InAFieldWithValidation: Story = { + args: { + invalid: true, + }, + render: (args) => ( + + + + Omschrijving. + + {args.invalid && Foutmelding.} + + + ), +} From 6fc64905bf126917cf8f99cf3dc79dbd6f5c3485 Mon Sep 17 00:00:00 2001 From: alimpens Date: Fri, 6 Sep 2024 14:35:05 +0200 Subject: [PATCH 4/5] Allow inputs in Field to keep intrinsic size --- packages/css/src/components/field/field.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/css/src/components/field/field.scss b/packages/css/src/components/field/field.scss index 681d1f88ee..2a74dcfc78 100644 --- a/packages/css/src/components/field/field.scss +++ b/packages/css/src/components/field/field.scss @@ -4,6 +4,7 @@ */ .ams-field { + align-items: start; break-inside: avoid; display: flex; flex-direction: column; From 037bdd69ac77e0bcc754278d8ac442dcee688d1d Mon Sep 17 00:00:00 2001 From: alimpens Date: Fri, 6 Sep 2024 16:53:52 +0200 Subject: [PATCH 5/5] Add Select docs --- .../src/components/Select/Select.docs.mdx | 18 ++++ .../src/components/Select/Select.stories.tsx | 82 +++++++++++++------ 2 files changed, 77 insertions(+), 23 deletions(-) diff --git a/storybook/src/components/Select/Select.docs.mdx b/storybook/src/components/Select/Select.docs.mdx index 087e7d18d9..7ceaa1b6d4 100644 --- a/storybook/src/components/Select/Select.docs.mdx +++ b/storybook/src/components/Select/Select.docs.mdx @@ -34,3 +34,21 @@ The component requires a `label` attribute. ### Disabled + +### In a Field + +Use a Field to group a Select with a Label, description and / or an Error Message. + +If you don’t need the description, remove its Paragraph and the `aria-describedby` from the Select. + +Check [the Field docs](/docs/components-forms-field--docs) for more information on configuring it. + + + +### In a Field with validation + +If the Select can become invalid, add an Error Message and its `id` to the `aria-describedby` attribute of the Select. + +Check [the Field docs](/docs/components-forms-field--docs) for more information on configuring it. + + diff --git a/storybook/src/components/Select/Select.stories.tsx b/storybook/src/components/Select/Select.stories.tsx index 50639dd6e2..a58bd5b8d7 100644 --- a/storybook/src/components/Select/Select.stories.tsx +++ b/storybook/src/components/Select/Select.stories.tsx @@ -3,38 +3,41 @@ * Copyright Gemeente Amsterdam */ +import { ErrorMessage, Field, Label, Paragraph } from '@amsterdam/design-system-react' import { Select } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' +const optionList = [ + + Centrum + , + + Noord + , + + West + , + + Westpoort + , + + Nieuw-West + , + + Zuid + , + + Zuidoost + , +] + const meta = { title: 'Components/Forms/Select', component: Select, args: { invalid: false, disabled: false, - children: [ - - Centrum - , - - Noord - , - - West - , - - Westpoort - , - - Nieuw-West - , - - Zuid - , - - Zuidoost - , - ], + children: optionList, }, argTypes: { disabled: { @@ -111,3 +114,36 @@ export const Disabled: Story = { disabled: true, }, } + +export const InAField: Story = { + render: (args) => ( + + + + Omschrijving. + + {args.invalid && Foutmelding.} + + + ), +} + +export const InAFieldWithValidation: Story = { + args: { + invalid: true, + }, + render: (args) => ( + + + + Omschrijving. + + {args.invalid && Foutmelding.} + + + ), +}