Documentation and renamed stories

Amsterdam · Dec 13, 2023 · c0c4cb8 · c0c4cb8
1 parent 739a6b8
commit c0c4cb8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>