From c0c4cb8fe24c5bb22e6a641f33f18de190b97e25 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Wed, 13 Dec 2023 10:26:35 +0100
Subject: [PATCH] Documentation and renamed stories

---
 packages/css/src/components/header/README.md        | 13 +++++++++++++
 .../storybook-react/src/Header/Header.docs.mdx      |  6 +++++-
 .../storybook-react/src/Header/Header.stories.tsx   |  8 +++++++-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/css/src/components/header/README.md b/packages/css/src/components/header/README.md
index 6c67b6a977..ba950562cc 100644
--- a/packages/css/src/components/header/README.md
+++ b/packages/css/src/components/header/README.md
@@ -1 +1,14 @@
 # Header
+
+Een Header biedt een container aan waarmee je een logo van de Gemeente Amsterdam, subsite titel en page menu kan tonen.
+
+## Richtlijnen
+
+- Gebruik de Header altijd wanneer je site gehost wordt op amsterdam.nl of één van de subdomeinen.
+- Het page menu kan maximaal 5 items bevatten, inclusief menu en zoeken.
+- Wanneer je een lange subsite titel hebt, gebruik dan geen of zo min mogelijk page menu items.
+
+## Referenties
+
+- Een Header is een [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) en kan gebruikt worden om de navigatie van een pagina te groeperen.
+- [WCAG 3.2.3](https://wcag.com/designers/3-2-3-consistent-navigation/) Consistent Navigation: Navigatie menu's die op meerdere pagina's voorkomen, zijn consistent.
diff --git a/storybook/storybook-react/src/Header/Header.docs.mdx b/storybook/storybook-react/src/Header/Header.docs.mdx
index 4964721012..382e8adc62 100644
--- a/storybook/storybook-react/src/Header/Header.docs.mdx
+++ b/storybook/storybook-react/src/Header/Header.docs.mdx
@@ -12,10 +12,14 @@ import README from "../../../../packages/css/src/components/header/README.md?raw
 
 <Canvas of={HeaderStories.WithLogoVariant} />
 
+## With subsite title
+
+<Canvas of={HeaderStories.WithTitle} />
+
 ## With menu
 
 <Canvas of={HeaderStories.WithHeaderMenu} />
 
 ## In a Grid with title and menu
 
-<Canvas of={HeaderStories.WithBoth} />
+<Canvas of={HeaderStories.WithTitleAndMenu} />
diff --git a/storybook/storybook-react/src/Header/Header.stories.tsx b/storybook/storybook-react/src/Header/Header.stories.tsx
index 3034bbaa8f..70a8c1e01c 100644
--- a/storybook/storybook-react/src/Header/Header.stories.tsx
+++ b/storybook/storybook-react/src/Header/Header.stories.tsx
@@ -26,6 +26,12 @@ export const WithLogoVariant: Story = {
   },
 }
 
+export const WithTitle: Story = {
+  args: {
+    title: 'Aan de Amsterdamse grachten',
+  },
+}
+
 export const WithHeaderMenu: Story = {
   args: {
     menu: (
@@ -43,7 +49,7 @@ export const WithHeaderMenu: Story = {
   },
 }
 
-export const WithBoth: Story = {
+export const WithTitleAndMenu: Story = {
   decorators: [
     (Story) => (
       <Screen>