From c8dfbe97e334b9abc7c8ffd918b198c5066f2ae2 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 17 Oct 2024 13:09:40 +0200 Subject: [PATCH 1/3] Optional and hint stories --- storybook/src/components/Label/Label.docs.mdx | 16 +++++++++++++++- storybook/src/components/Label/Label.stories.tsx | 12 ++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/storybook/src/components/Label/Label.docs.mdx b/storybook/src/components/Label/Label.docs.mdx index 82b1229d00..de05ff7fc5 100644 --- a/storybook/src/components/Label/Label.docs.mdx +++ b/storybook/src/components/Label/Label.docs.mdx @@ -1,6 +1,6 @@ {/* @license CC0-1.0 */} -import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; +import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as LabelStories from "./Label.stories.tsx"; import README from "../../../../packages/css/src/components/label/README.md?raw"; @@ -11,3 +11,17 @@ import README from "../../../../packages/css/src/components/label/README.md?raw" + +## Examples + +### Optional + +Use the `optional` prop to indicate that the field is optional. + + + +### With hint + +Use the `hint` prop to either customize the text for the optional property or to privide another type of remark. + + diff --git a/storybook/src/components/Label/Label.stories.tsx b/storybook/src/components/Label/Label.stories.tsx index 47bc929c98..e16d7dfbda 100644 --- a/storybook/src/components/Label/Label.stories.tsx +++ b/storybook/src/components/Label/Label.stories.tsx @@ -27,3 +27,15 @@ export default meta type Story = StoryObj export const Default: Story = {} + +export const Optional: Story = { + args: { + optional: true, + }, +} + +export const WithHint: Story = { + args: { + hint: 'not required', + }, +} From b0f8c27f178e609e07dd396e720f0f268a096440 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 17 Oct 2024 16:13:45 +0200 Subject: [PATCH 2/3] Update storybook/src/components/Label/Label.docs.mdx Co-authored-by: Vincent Smedinga --- storybook/src/components/Label/Label.docs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/src/components/Label/Label.docs.mdx b/storybook/src/components/Label/Label.docs.mdx index de05ff7fc5..e9dccc1ba3 100644 --- a/storybook/src/components/Label/Label.docs.mdx +++ b/storybook/src/components/Label/Label.docs.mdx @@ -16,7 +16,7 @@ import README from "../../../../packages/css/src/components/label/README.md?raw" ### Optional -Use the `optional` prop to indicate that the field is optional. +Use the `optional` prop to indicate that the user doesn’t need to fill in the field to submit the form. From a08ef6dec5319175af501583fe5542ec3c5d53c2 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 17 Oct 2024 16:14:04 +0200 Subject: [PATCH 3/3] Update storybook/src/components/Label/Label.docs.mdx Co-authored-by: Vincent Smedinga --- storybook/src/components/Label/Label.docs.mdx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/storybook/src/components/Label/Label.docs.mdx b/storybook/src/components/Label/Label.docs.mdx index e9dccc1ba3..7411db7887 100644 --- a/storybook/src/components/Label/Label.docs.mdx +++ b/storybook/src/components/Label/Label.docs.mdx @@ -22,6 +22,9 @@ Use the `optional` prop to indicate that the user doesn’t need to fill in the ### With hint -Use the `hint` prop to either customize the text for the optional property or to privide another type of remark. +Use the `hint` prop to either customize the text for the optional property or provide another type of remark. + +Note: ensure the hint meets [language level B1](https://www.amsterdam.nl/schrijfwijzer/heldere-taal-basis-onze-huisstijl/). +For the same reason, the default hint text in Dutch is ‘niet verplicht’, not ‘optioneel’.