From 2ba23320d8589593bbe85a2f1e5496d6df2ff79a Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Fri, 18 Oct 2024 15:21:34 +0200
Subject: [PATCH] feat: Optional and hint stories (#1669)

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 storybook/src/components/Label/Label.docs.mdx | 19 ++++++++++++++++++-
 .../src/components/Label/Label.stories.tsx    | 12 ++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/storybook/src/components/Label/Label.docs.mdx b/storybook/src/components/Label/Label.docs.mdx
index 82b1229d00..7411db7887 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,20 @@ import README from "../../../../packages/css/src/components/label/README.md?raw"
 <Primary />
 
 <Controls />
+
+## Examples
+
+### Optional
+
+Use the `optional` prop to indicate that the user doesn’t need to fill in the field to submit the form.
+
+<Canvas of={LabelStories.Optional} />
+
+### With hint
+
+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’.
+
+<Canvas of={LabelStories.WithHint} />
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<typeof meta>
 
 export const Default: Story = {}
+
+export const Optional: Story = {
+  args: {
+    optional: true,
+  },
+}
+
+export const WithHint: Story = {
+  args: {
+    hint: 'not required',
+  },
+}