feat(NavigationCard): Add navigation card built on CardFrame

[m7kvqbe1]

Related issue

N/A

Overview

Adds a new NavigationCard component: a clickable card built on the existing CardFrame primitive, with a themed icon panel, a title, an optional description and a chevron affordance. Intended for landing/home screens that link into the major areas of an app.

Link to preview

N/A

Reason

Consuming apps have been hand-rolling bespoke "clickable card" navigation on their landing pages. This provides a single, accessible, tokenised component so those snowflakes can be replaced with a shared one.

Work carried out

• NavigationCard built on CardFrame, with a themed icon panel, title, optional description and chevron
• Whole card clickable via a stretched ::after on the supplied link, keeping a single element in the accessibility tree (icon and chevron aria-hidden)
• Framework-agnostic link prop (mirrors SidebarNavItem) so consumers pass their own next/link / router Link / <a>
• color prop from NAVIGATION_CARD_COLOR (action | success | warning | danger | neutral, default action) driving icon panel, chevron and hover/focus states
• Constants/types (ValueOf), partials/ with barrel, ComponentWithClass + JSDoc props, registered in the package barrel
• Storybook stories under Components/Navigation Card (Default with controls, WithoutIcon, Colours)
• Unit tests (RTL + jest-styled-components) — title/href, description, icon presence/absence, chevron, className pass-through, prop spread, link click, per-colour tint

Screenshot

Developer notes

• The card intentionally has no nested <button>: a real button can't live inside the card-wide link, so the whole card is the link and the chevron signals navigation.
• The consumer's link element supplies the title text; its descendant anchor is styled and stretched — no cloneElement needed.
• types, lint and the component test suite pass locally.

[chromatic-com]

Tip

All tests passed and all changes approved!

🟢 UI Tests: 4 changes accepted as baselines
🟢 UI Review: Approved by Tom Humphris
Storybook Publish: 258 stories published

[markhigham]

LGTM Some FYI comments.

• Mixed grids with and without icons. The icon panel disappears entirely when no icon is passed, so a grid mixing both variants gets ragged left alignment and inconsistent card heights. If mixing is expected, the docs should say "don't," or the layout should reserve the space.

• Text selection is dead. The stretched overlay sits over the description, so users can't select/copy the description text. For "Browse and download all received files" that's probably fine, but if descriptions ever carry
  meaningful data (filenames, counts), it'll frustrate people. Worth deciding consciously.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud