Skip to content

feat(Navigation): MenuLink + MenuButton + gedeelde menu-item tokens (v5.18.0)#135

Merged
jeffreylauwers merged 1 commit intomainfrom
feature/menu-link
Apr 4, 2026
Merged

feat(Navigation): MenuLink + MenuButton + gedeelde menu-item tokens (v5.18.0)#135
jeffreylauwers merged 1 commit intomainfrom
feature/menu-link

Conversation

@jeffreylauwers
Copy link
Copy Markdown
Owner

Summary

  • MenuLink — navigatielink met level-hiërarchie (1–4), current-staat (aria-current="page"), uitklapknop (aria-expanded), iconStart, iconEnd, numberBadge
  • MenuButton — navigatieknop voor JS-acties, visueel consistent met MenuLink; ondersteunt iconStart, iconEnd, dotBadge (zweeft rechtsboven de tekst)
  • Gedeelde menu-item.json tokens — één token-set (--dsn-menu-item-*) gedeeld door beide componenten; MenuLink heeft alleen current.* en level-indent als eigen tokens

Wijzigingen

  • 3 nieuwe componenten: MenuLink, MenuButton (+ BreadcrumbNavigation reeds op main)
  • 1225 tests, 60 test suites — allemaal groen
  • Design tokens: menu-item.json (shared) + menu-link.json (MenuLink-specifiek)
  • Volledige Storybook-documentatie voor beide componenten
  • Docs en changelog bijgewerkt voor v5.18.0

Test plan

  • pnpm test — alle 1225 tests groen
  • pnpm --filter storybook exec tsc --noEmit — 0 TypeScript-fouten
  • pnpm lint — 0 lint-fouten
  • Storybook: MenuLink en MenuButton stories correct, RTL + LongText varianten werken
  • DotBadge zweeft rechtsboven de tekst bij MenuButton
  • MenuLink current-state toont aria-current="page" en bold tekst
  • Uitklapknop toont aria-expanded correct

🤖 Generated with Claude Code

- MenuButton component: <button> visueel identiek aan MenuLink
  - iconStart, iconEnd, dotBadge props
  - dotBadge zweeft rechtsboven de tekst via position:relative op label
  - 13 React tests
- menu-item.json: gedeelde tokens voor MenuLink én MenuButton (dsn.menu-item.*)
  - menu-link.json gereduceerd tot alleen current.* en level-indent tokens
  - menu-button.json verwijderd
- Kleurverwijzingen MenuLink + MenuButton: action-1 → action-2 (consistent met Link)
- Storybook: iconStart/iconEnd/dotBadge select argTypes, renderSingle helper, volledige docs
- Docs: README.md, docs/README.md, docs/03-components.md, docs/changelog.md bijgewerkt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@jeffreylauwers jeffreylauwers merged commit c4550c3 into main Apr 4, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant