AddOnOption:
- Move price to its own row below heading (was squeezed between name and switch)
- Switch pins to top-right with alignItems: flex-start
- Long headings now wrap cleanly without layout pressure
Both AddOnOption + ServiceOption:
- Add optional maxDescriptionLines prop for CSS line-clamp truncation
- "View more" / "View less" toggle appears only when text is actually truncated
- Omit prop for no limit (default, backwards compatible)
- stopPropagation on toggle so clicking it doesn't trigger card selection
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Explicit button height via input token CSS vars for pixel-perfect alignment
- Reduced InputAdornment start margin (mr: 0.5) to bring search icon closer to text
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Maps to Figma Main Nav (14:108) desktop + Mobile Header (2391:41508)
- Desktop: logo left, nav links right, optional CTA button
- Mobile: hamburger + drawer with nav items, CTA, and help footer
- Sticky header with warm surface background and border
- Composes AppBar, Link, IconButton, Button, Divider, Drawer
- 6 stories: Default, WithCTA, WithPageContent (sticky scroll demo),
Minimal, ExtendedNavigation, MobilePriceTracker
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- component-registry: 3 atoms moved from planned → review
- session-log: Session 25n continued — atoms batch build
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Logo: circle → 64px rounded rectangle (8px radius), positioned fully
inside image area with white border + shadow
- Footer removed — redundant since whole card is clickable and price
is already in content area
- Price: split "Packages from" (body2) + price (h6/500wt) for lighter
ecommerce feel, replaces blocky labelLg/700
- Verified badge bumped to medium size for visibility
- Capability badge: medium size, trailing info icon + capabilityDescription
tooltip prop for plain-language definitions on hover
- Unverified cards: 3px top accent bar, list on neutral.50 background
- Caption/CaptionSm weight: 400 → 500 system-wide (extends D019)
- Meta row: body2 → caption size for clearer tertiary hierarchy
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
User feedback:
- "Trusted Partner" → "Verified" badge text
- Override Card hover bg fill (grey blended with shadow) — shadow lift only
- Logo 48px → 56px, removed white border (shadow only)
- Tightened spacing: content padding 16→12px, gap 8→4px, footer py 12→8px
/critique findings (27/40 → fixes applied):
- P1: Price promoted from footer into content area as bold primary text
- P2: Footer simplified to "View packages >" CTA with space-between
- Image fallback changed from grey to warm brand.50
- Name truncation relaxed to maxLines={2} for mobile
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Switch:
- Wraps MUI Switch with FA brand tokens
- Bordered pill track (Figma Style One), brand.500 fill when active
- 4 component tokens: track width/height/borderRadius, thumb size
- Stories include interactive service add-ons demo
Radio:
- Wraps MUI Radio with FA brand tokens
- Brand.500 fill when selected, neutral.400 unchecked
- 2 component tokens: outer size, dot size
- Stories include card selection and payment method patterns
Also:
- Added ColourToggle and Slider to component registry (deferred)
- Updated token registry and session log
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Button:
- Add aria-busy={loading} for assistive technology
- Add visually-hidden "Loading" text for screen readers
- Mark CircularProgress as aria-hidden (decorative)
Card:
- Add tabIndex={0} and role="button" when interactive
- Fix Record<string, any> → Theme type for type safety
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Bump small chip label padding from MUI default 8px to 12px (spacing.3)
to match medium size — pill border-radius eats into perceived spacing.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Interactive tag for filtering, selection, and dismissible labels
- Wraps MUI Chip with FA tokens: 12 component tokens (height, padding, font, icon sizes)
- Two variants (filled/outlined) × two colours (default/primary) × two sizes (sm/md)
- Custom `selected` prop promotes to brand colour with warm bg (outlined)
- MUI theme overrides: soft tonal fills, branded outlines, hover/focus states
- 10 Storybook stories including interactive filter and removable tag demos
- Preflight passed all 5 checks
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add lg tokens: height 32px, paddingX 16px, fontSize 14px, iconSize 16px
- Refactor component to use size map instead of ternary
- Update stories: Sizes now shows all three, CompleteMatrix includes large
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Reserve 2px border on all cards (transparent for elevated, coloured
for outlined) so selected state only changes colour, not width
- Add 150ms ease-in-out transitions for border-color and background-color
consistent with Button/Input interactive timing
- Remove borderWidth/borderStyle from selected sx (now handled by theme)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Runs 5 checks before commit: TypeScript compilation, Storybook build,
token sync verification, hardcoded values scan, and component exports.
Integrates with the git workflow to catch issues before they hit the repo.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
