Names were too tight against the pill edges, especially on longer
provider names. Bumped token from spacing.2 to spacing.3.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
MiniCard: compact vertical card for grids, recommendations, and map
popups. Image + title + optional price/badges/chips/meta. Lighter
than ProviderCard — no verified tiers, no logo. Audit: 20/20.
MapPin tokens added (build next): price-pill markers for map views.
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>
- 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>
