- Step flow, state management, conditional logic map
- Smart defaults and CTA submit behaviour
- Props reference and sub-component index
- Guide for adding new steps
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Extend one-question-at-a-time pattern through all steps (type, service, location)
- CTA + location always visible at bottom; smart defaults for missing optional fields
- Minimum search requirements: intent + location; type/service/themes default to "all"
- Funeral types: Cremation, Burial, Water Burial (QLD only) + Explore All as TypeCard
- Service preference step (conditional): With a service / No service / I'm flexible
- Theme preferences (eco-friendly, budget-friendly, religious specialisation) as optional
sub-option within type step
- StepHeading sub-component: bodyLg centered, distinct from card labels
- CompletedRows: generous py:1.5 spacing, caption-size "Change" with aria-label
- Loading prop on CTA button, location validation (3+ chars)
- Divider under subheading for visual structure
- Main heading upgraded to h2 with display font
- Audit: 14/20 (Good), Critique: 29/40 (Good)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Complete rewrite of the interaction model:
Before: numbered steps + uppercase overline labels + cramped option cards
→ felt like a government form, not gentle guidance
After: conversational questions with generous choice cards
→ "How can we help you today?" not "1. I'M HERE TO"
Key changes:
- Questions as warm sentences, not uppercase labels
- ChoiceCards: generous padding (20px × 16px), descriptions explaining
each option, check icon on selection
- TypePills: pill-shaped buttons with proper touch targets for funeral types
- CompletedRow: "I'm here to: **Arrange a funeral now** · Change"
— explicit, accessible, no hidden pencil icon
- Only shows one question at a time — true progressive disclosure
- CTA only appears once location step is reached
- No step numbers, no badges — the vertical flow IS the progression
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mt/pt bumped from 1.5 (12px) to 2 (16px), add pb: 0.5 (4px) so
the text sits more centred between the border-top and the content below.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
PackageDetail:
- Warm header band (surface.warm) with "Package" overline, h3 name,
h5 price in brand colour — creates distinct decision zone
- Section headings bumped to h6 (16px/600) — clear hierarchy vs
LineItem body2 (14px/500)
- Divider + subtext before Extras: "These items can be added to your
package at additional cost"
- Top padding increased, content padding increased (py: 3)
- Remove redundant textTransform/letterSpacing on overline (P2 fix)
LineItem:
- Item gap increased in PackageContents story (12px → 16px)
Audit: 19/20 (Excellent). 0 P0, 0 P1.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- LineItem: add aria-label to info icon for screen readers (P1)
- PackageDetail: stack CTA buttons vertically on narrow screens (P2)
- PackageDetail: section headings use component="h3" for hierarchy (P2)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
LineItem (molecule):
- Name + optional info tooltip + optional price
- Allowance asterisk, total variant (bold + top border)
- Reusable for package contents, order summaries, invoices
ProviderCardCompact (molecule):
- Horizontal layout: image left, name + location + rating right
- Used at top of Package Select page to show selected provider
PackageDetail (organism):
- Right-side detail panel for Package Select page
- Name/price header, Make Arrangement + Compare CTAs
- Grouped LineItem sections, total row, T&C footer
- PackageSelectPage story: full page with filter chips, package
list (ServiceOption), sticky detail panel, and Navigation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- ArrangementForm reverted to planned — need more building blocks first
- Footer: extract shared overline + contact link sx, use overlineSm variant
- Footer: remove hardcoded fontSize/fontWeight on contact links
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Footer:
- Dark espresso (brand.950) bg, inverse white text
- Logo, tagline, contact (phone/email), link group columns, legal bar
- Semantic HTML: <footer>, <nav> per group, <ul> for lists
- Critique 38/40, P2 fixes applied (legal link size, nav landmarks)
ServiceSelector:
- Single-select panel for arrangement flow
- Composes ServiceOption × n + Typography + Button (radiogroup)
- Auto-disables continue when nothing selected
- 7 stories incl. InArrangementFlow with StepIndicator
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Promote all 11 atoms, 6 molecules, 1 organism from review → done
- Navigation: grey bg (surface.subtle), real FA logo SVGs, add Provider Portal
- Navigation: remove mobileTrailing prop and MobilePriceTracker story
- Add staticDirs to Storybook config for brand assets
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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>
