feat(Storybook): Add Navigation Page example with two-level Tab Navigation

[VincentSmedinga]

Describe the pull request

Link

• Story
• Full screen

What

Adds a Navigation Page example to the internal Storybook pages demonstrating two levels of Tab Navigation: a vertical sidebar for main sections and a horizontal bar for sub-items.

Why

There was no example showing how to combine vertical and horizontal Tab Navigation instances on a single page.
This pattern is common in internal applications with large data sets spread across multiple sections.

How

• A menuItems data file defines 7 main sections (Overzicht, Planning, Locatie, Documenten, Financiën, Betrokkenen, Communicatie) with slugs and descriptive icons, each containing 4–5 sub-items with their own slugs.
• The story manages active menu and sub-menu state through slugs and uses them as href values.
• Switching a main section resets the horizontal sub-navigation scroll position to the start.
• Each sub-item has cellHeights to simulate varying page layouts after navigation.
• A short docs page introduces the pattern.

Checklist

• Add or update unit tests
• Add or update documentation
• Add or update stories
• Add or update exports in index.* files
• Comment /chromatic test and verify visual regression tests pass
• Start the PR title with a Conventional Commit prefix, [as explained here](https://github.com/Amsterdam/design-system/blob/main/documentation/publishing.md?plain=1#L11).

Additional notes

• This is a Storybook-only change; no component source code is modified.
• This PR is on top of feat: Introduce Tab Navigation component #2552. Rebase onto develop before merging.

[Copilot]

Pull request overview

Adds a proof-of-concept “Navigation Page” example to Storybook, showcasing two-level internal navigation built with the newly introduced Tab Navigation component.

Changes:

• Introduces a new Tab Navigation component (React + CSS) including docs, design tokens, and unit tests.
• Adds Storybook stories/docs for Tab Navigation and a new internal “Navigation Page” example using nested Tab Navigation.
• Exports Tab Navigation from the React package barrel and wires the CSS into the components stylesheet index.

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
storybook/src/pages/internal/NavigationPage/NavigationPage.stories.tsx	Adds an internal page example demonstrating vertical + horizontal TabNavigation usage.
storybook/src/pages/internal/NavigationPage/NavigationPage.docs.mdx	Documentation page describing the Navigation Page example behavior.
storybook/src/pages/internal/NavigationPage/menuItems.tsx	Provides example menu/submenu configuration (labels, icons, slugs).
storybook/src/components/TabNavigation/TabNavigation.stories.tsx	Adds component stories (default, vertical, icons, many links) for TabNavigation.
storybook/src/components/TabNavigation/TabNavigation.test.stories.tsx	Adds visual/test stories for TabNavigation variants.
storybook/src/components/TabNavigation/TabNavigation.docs.mdx	Storybook docs page including README and design tokens table.
packages/react/src/TabNavigation/TabNavigation.tsx	Implements TabNavigation root with accessible naming + vertical variant class.
packages/react/src/TabNavigation/TabNavigationList.tsx	Implements TabNavigation.List with forwardRef and BEM class.
packages/react/src/TabNavigation/TabNavigationLink.tsx	Implements TabNavigation.Link supporting optional icon + custom link component.
packages/react/src/TabNavigation/*.test.tsx	Adds unit tests for TabNavigation, Link, and List.
packages/react/src/TabNavigation/index.ts	Exposes component and related prop types.
packages/react/src/index.ts	Re-exports TabNavigation from the main React entrypoint.
packages/css/src/components/tab-navigation/tab-navigation.scss	Adds styling for TabNavigation (horizontal/vertical, current state, hidden label to prevent layout shift).
packages/css/src/components/tab-navigation/README.md	Adds CSS-level documentation and usage guidelines.
packages/css/src/components/index.scss	Registers the new tab-navigation stylesheet in the components bundle.
packages-proprietary/tokens/src/components/ams/tab-navigation.tokens.json	Adds design tokens backing TabNavigation styles.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[RubenSibon]

See also my comments on #2552.

[VincentSmedinga]

/Chromatic test

[github-actions]

Coverage Report for React components

Status	Category	Percentage	Covered / Total
🟢	Lines	98.62%	715 / 725
🟢	Statements	97.64%	745 / 763
🟠	Functions	93.36%	183 / 196
🟢	Branches	97.92%	518 / 529

File Coverage

No changed files found.

Generated in workflow #40 for commit 5c30a1c by the Vitest Coverage Report Action

[github-actions]

Size Change: 0 B

Total Size: 59 kB

ℹ️ View Unchanged

Filename	Size
packages-proprietary/tokens/dist/compact.css	574 B
packages-proprietary/tokens/dist/index.css	8.84 kB
packages/css/dist/index.css	14 kB
packages/react/dist/index.esm.js	35.1 kB
packages/react/dist/index.js	464 B

_{compressed-size-action}

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[RubenSibon]

Approved, with one suggestion.

[VincentSmedinga]

/Chromatic test