Merge pull request #137 from jeffreylauwers/chore/english-story-names

chore(Storybook): story-namen in het Engels voor MenuLink en MenuButton

Author: jeffreylauwers

.claude/commands/new-component-issue.md

@@ -257,6 +257,46 @@ Elke `.stories.tsx` volgt altijd deze sectievolgorde (met `// ===` comments als
 
 Geen `// HIGH CONTRAST` sectie — daar zijn we van af gestapt.
 
+**Story `name:` properties — altijd Engels:**
+
+De `export const` naam en de optionele `name:` string in het story-object moeten **altijd Engels** zijn. Dit geldt ook als de `export const` naam zichzelf al beschrijft — gebruik dan géén `name:` property.
+
+```ts
+// ✅ Correct — Engelse name property
+export const WithIconStart: Story = {
+  name: 'With icon start',
+  // ...
+};
+
+export const AllStates: Story = {
+  name: 'All states',
+  // ...
+};
+
+export const Current: Story = {
+  name: 'Current (active page)',
+  // ...
+};
+
+// ❌ Fout — Nederlandse name property
+export const WithIconStart: Story = {
+  name: 'Met icoon start', // ❌
+};
+
+export const AllStates: Story = {
+  name: 'Alle staten', // ❌
+};
+```
+
+Veelgebruikte Engelse vertalingen:
+- `'Met icoon start'` → `'With icon start'`
+- `'Met icoon end'` → `'With icon end'`
+- `'Alle staten'` → `'All states'`
+- `'Alle varianten'` → `'All variants'`
+- `'Volledig navigatiemenu'` → `'Full navigation menu'`
+- `'Niveau-hiërarchie'` → `'Level hierarchy'`
+- `'Uitgevouwen met subpagina's'` → `'Expanded with sub-pages'`
+
 ---
 
 ## Stap 4 — Toon ter review
@@ -289,3 +329,4 @@ Rapporteer de URL van het aangemaakte issue.
 - Labels zijn altijd `feat,component,needs refinement` — geen uitzonderingen voor nieuwe componenten
 - **Geen Figma-verwijzingen** — er is geen Figma in dit project; schrijf nooit "valideren in Figma", "zie Figma" of soortgelijke verwijzingen
 - **Token schrijfwijze** — controleer altijd of sub-groepen als geneste objecten zijn geschreven (zie stap 2e)
+- **Story namen altijd Engels** — zowel `export const` namen als `name:` properties in story-objecten zijn altijd Engelstalig; Nederlandse `name:` properties zijn een bug (zie voorbeelden in de Storybook story-structuur sectie hierboven)

packages/storybook/src/MenuButton.stories.tsx

@@ -149,23 +149,23 @@ export const Default: Story = {
 // =============================================================================
 
 export const WithIconStart: Story = {
-  name: 'Met icoon start',
+  name: 'With icon start',
   args: {
     iconStart: <Icon name="settings" aria-hidden />,
   },
   render: renderSingle,
 };
 
 export const WithIconEnd: Story = {
-  name: 'Met icoon end',
+  name: 'With icon end',
   args: {
     iconEnd: <Icon name="arrow-right" aria-hidden />,
   },
   render: renderSingle,
 };
 
 export const WithDotBadge: Story = {
-  name: 'Met DotBadge',
+  name: 'With DotBadge',
   args: {
     iconStart: <Icon name="bell" aria-hidden />,
     dotBadge: <DotBadge variant="negative" />,
@@ -196,7 +196,7 @@ export const LongText: Story = {
 // =============================================================================
 
 export const AllStates: Story = {
-  name: 'Alle staten',
+  name: 'All states',
   render: () => (
     <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
       <MenuButton>Standaard</MenuButton>

packages/storybook/src/MenuLink.stories.tsx

@@ -163,29 +163,29 @@ export const Default: Story = {
 // =============================================================================
 
 export const Current: Story = {
-  name: 'Current (actieve pagina)',
+  name: 'Current (active page)',
   args: { current: true },
   render: renderSingle,
 };
 
 export const WithIconStart: Story = {
-  name: 'Met icoon start',
+  name: 'With icon start',
   args: {
     iconStart: <Icon name="home" aria-hidden />,
   },
   render: renderSingle,
 };
 
 export const WithIconEnd: Story = {
-  name: 'Met icoon end',
+  name: 'With icon end',
   args: {
     iconEnd: <Icon name="arrow-right" aria-hidden />,
   },
   render: renderSingle,
 };
 
 export const WithNumberBadge: Story = {
-  name: 'Met NumberBadge',
+  name: 'With NumberBadge',
   args: {
     href: '/inbox',
     iconStart: <Icon name="mail" aria-hidden />,
@@ -196,7 +196,7 @@ export const WithNumberBadge: Story = {
 };
 
 export const WithExpandButton: Story = {
-  name: 'Met uitklapknop (subItems)',
+  name: 'With expand button (subItems)',
   args: {
     href: '/rapporten',
     children: 'Rapporten',
@@ -221,7 +221,7 @@ export const LongText: Story = {
 // =============================================================================
 
 export const Levels: Story = {
-  name: 'Niveau-hiërarchie (level 1–4)',
+  name: 'Level hierarchy (level 1–4)',
   render: () => (
     <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
       <MenuLink href="/rapporten" current>
@@ -241,7 +241,7 @@ export const Levels: Story = {
 };
 
 export const ExpandedWithSubItems: Story = {
-  name: "Uitgevouwen met subpagina's",
+  name: 'Expanded with sub-pages',
   render: () => (
     <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
       <MenuLink
@@ -266,7 +266,7 @@ export const ExpandedWithSubItems: Story = {
 };
 
 export const FullNavigation: Story = {
-  name: 'Volledig navigatiemenu',
+  name: 'Full navigation menu',
   render: () => (
     <nav aria-label="Primaire navigatie" style={{ maxWidth: '280px' }}>
       <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
@@ -315,7 +315,7 @@ export const FullNavigation: Story = {
 };
 
 export const AllStates: Story = {
-  name: 'Alle staten',
+  name: 'All states',
   render: () => (
     <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
       <MenuLink href="/standaard">Standaard</MenuLink>