Commit Graph

18 Commits

Author SHA1 Message Date
c5581c6e9f Batch 3: FilterPanel molecule + integration across 3 steps (D-C, D-F)
New molecule:
- FilterPanel: Popover-based reusable filter trigger with active
  count badge, Clear all, Done actions. D-C: Popover for MVP.

Step integrations:
- ProvidersStep: inline Chip filter bar → FilterPanel Popover,
  search bar + filter button side-by-side in sticky header
- VenueStep: same pattern, filter chips moved into Popover
- CoffinsStep (D-F): grid-sidebar layout → wide-form (full-width
  4-col grid), category + price selects moved into FilterPanel

WizardLayout:
- Added wide-form variant (maxWidth lg, single column) for
  card grids that benefit from full width
- wide-form included in STEPPER_VARIANTS for progress bar

Storybook:
- FilterPanel stories: Default, WithActiveFilters, SelectFilters,
  CustomLabel

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 22:24:54 +11:00
1c3cdbc101 Batch 2: List-map layout rework — 420px fixed column, sticky headers
- WizardLayout ListMapLayout: 420px fixed left column (D-B), flex:1
  right panel, back link rendered inside left panel instead of above
  the split (eliminates gap above map)
- LAYOUT_MAP type updated to accept backLink prop for list-map variant
- ProvidersStep: heading + search + filters wrapped in sticky Box
  that pins at top of scrollable left panel while card list scrolls
- VenueStep: same sticky header treatment, heading moved inside form
  for consistent wrapper structure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 22:18:52 +11:00
6ebd52f36f Batch 1: ToggleButtonGroup fixes, heading standardisation, spacing normalisation
- ToggleButtonGroup: increase label-to-options spacing (mb 1→2),
  top-align button content (flex-start), fix selected border
  CSS specificity by adding .Mui-selected in grouped selector
- Standardise all split-layout step headings from h4 to display3
  (ProvidersStep, PackagesStep, PreviewStep, VenueStep, CoffinsStep,
  CoffinDetailsStep) — matches D-A decision for brand warmth
- DateTimeStep: normalise section gaps (scheduling fieldset mb 3→4)
- CrematoriumStep: add subheading for consistency, normalise
  witness section spacing (mb 3→4)
- Fix input label clipping in PackagesStep and DateTimeStep
  (add pt: 0.5 to TextField containers for float-label clearance)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 22:13:03 +11:00
87249b6d9b Groom wizard steps 1-15: critique/harden/polish pass
- [P0] CrematoriumStep: Fix <option> → <MenuItem> in priority select
- [P1] All form steps: Add aria-busy={loading} + loading guard on submit
- [P1] Error messages: Replace color="error" (red) with copper
  (var(--fa-color-text-brand)) across ProvidersStep, PackagesStep,
  VenueStep, CrematoriumStep, CemeteryStep, CoffinsStep, PaymentStep
- [P2] IntroStep: "Has the person died?" → "Has this person passed away?"
- [P2] DateTimeStep: "About the person who died" → "who has passed"
- [P2] ProvidersStep: "Showing results from X" → "X providers found"
- [P2] Empty states: Add guidance text for ProvidersStep, PackagesStep,
  VenueStep, CoffinsStep empty results

Steps 4, 13, 15 passed with no issues.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:33:01 +11:00
1e91929411 Fix layout variants for VenueStep, CoffinsStep, CoffinDetailsStep
- VenueStep: centered-form → list-map (venue cards left, map slot right)
  Matches ProvidersStep pattern with vertical card stack + map placeholder
- CoffinsStep: centered-form → grid-sidebar (filter sidebar left, card grid right)
  Filters now in dedicated sidebar, cards fill the wider main area
- CoffinDetailsStep: centered-form → detail-toggles (profile left, options right)
  Coffin image + specs on left, option RadioGroups on right

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:16:01 +11:00
36757bcdb0 Add SummaryStep, PaymentStep, ConfirmationStep (wizard steps 13-15)
SummaryStep (step 13):
- Accordion sections with edit IconButtons linking back to each step
- dl/dt/dd definition list for label-value pairs
- Total bar with prominent price display (aria-live)
- Share plan icon button, deposit display
- Pre-planning: "Save your plan" CTA; at-need: "Confirm" CTA

PaymentStep (step 14):
- Payment plan (full/deposit) shown before method (amount before how)
- ToggleButtonGroup for plan + method selection
- Card: PayWay iframe slot with placeholder; Bank: account details display
- Terms checkbox with service agreement + privacy links
- Security reassurance (lock icon, no-surprise copy)

ConfirmationStep (step 15):
- Terminal page — no back button, no progress indicator
- At-need: "submitted" + callback timeframe + arranger contact
- Pre-planning: "saved" + return-anytime + family-ready copy
- Muted success icon (not celebratory), next-steps link buttons
- VenueCard selected prop also staged (from step 7 work)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:08:41 +11:00
77bac1478f Add AdditionalServicesStep page (wizard step 12)
- Merged from baseline steps 14 (optionals) + 15 (extras) per Rec #2
- Section 1: Complimentary inclusions (dressing, viewing, prayers, announcement)
- Section 2: Paid extras (catering, music, bearing, newspaper notice)
- Progressive disclosure: viewing → same venue radio, music → live musician → type
- Dependent field resets when parent toggled off
- AddOnOption reuse for all toggle rows
- Bearing as RadioGroup (family/professional/both)
- No upsell language — toggle design is inherently low-pressure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:02:18 +11:00
f8db8c19b2 Add CoffinDetailsStep page (wizard step 11)
- Coffin profile: image + specs grid + description + price note
- Three product option sections: handles, lining, name plate
- RadioGroup per section with branded selected state (brand border + warm bg)
- Price impact inline: "Included" for allowance items, "+$X" for upgrades
- Options hidden when not offered by provider (graceful empty state)
- Responsive: image stacks above details on mobile

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:00:41 +11:00
26a6d615da Add CoffinsStep page (wizard step 10)
- Coffin card grid (1/2/3 col responsive) with radiogroup pattern
- Category + price range filter dropdowns (reset page on filter change)
- "Most Popular" badge on popular coffins (Rec #10)
- Card shows image, name, category, price
- Pagination for large catalogues
- Australian terminology: "coffin" not "casket"
- Results count with aria-live, validation error with role="alert"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:59:09 +11:00
41901ed81d Add CemeteryStep page (wizard step 9)
- Progressive disclosure: "Have a plot?" → "Choose cemetery?" → card grid
- Dependent field resets (changing parent answer clears child selections)
- Cemetery card grid with radiogroup pattern + roving tabindex
- Pre-planning variant: softer subheading about provider arranging later
- "Provider can arrange this" shortcut skips grid entirely
- Grief-sensitive copy: "we need to find one" not "I don't have a plot"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:57:19 +11:00
1f9f7e2611 Add CrematoriumStep page (wizard step 8)
- Single crematorium: confirmation card (pre-selected), most common case
- Multiple crematoriums: card grid with radiogroup pattern + roving tabindex
- Witness question: "Will anyone follow the hearse?" with personalised helper text
- Special instructions: radio + progressive disclosure textarea via Collapse
- Personalised copy with deceased name ("escort [Name] to the crematorium")
- Pre-planning variant with softer helper text
- Australian terminology: "crematorium" not "crematory"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:55:34 +11:00
c28f8a2f29 Add VenueStep page (wizard step 7) + VenueCard selected prop
- Consolidated 3 baseline steps (venue select + venue detail + venue services) into 1
- CSS Grid venue card layout (1 col mobile, 2 col desktop) with radiogroup ARIA
- VenueCard extended with selected, role, aria-checked, tabIndex props
- Progressive disclosure: venue detail panel + service toggles after selection
- Service toggles via AddOnOption: photo presentation, livestream, recording
- Recording depends on streaming (auto-disabled when streaming off)
- Search input + filter chips for venue filtering
- Results count with aria-live, validation error with role="alert"
- Pre-planning variant with softer copy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:53:36 +11:00
2004fe10c0 Add DateTimeStep page (wizard step 6)
- Centered-form layout with two fieldset sections: name + scheduling
- Grief-sensitive labels: "Their first name", "About the person who died"
- Pre-planning variant: softer copy, "About the person" (no "who died")
- Date preference: ASAP / specific with progressive disclosure date picker
- Time preference: 5-option radio (no preference, morning, midday, afternoon, evening)
- Religion/service style: Autocomplete with 22 options
- Save-and-exit tertiary CTA
- showNameFields + showScheduling props for conditional visibility per funeral type

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:51:09 +11:00
9738e6e893 Add AuthGateStep page (wizard step 5)
- Centered-form layout with 3 progressive sub-steps: SSO/email → details → verify
- Google/Microsoft SSO buttons + email entry (sub-step 1)
- Name, phone, contact preference fields (sub-step 2) — phone optional when email-only
- 6-digit verification code entry (sub-step 3)
- Benefit framing ("Save your plan") not gate framing
- Responsive name fields (stacked on mobile, side-by-side on desktop)
- autoComplete + inputMode on all fields per WCAG 3.3.8
- Audit: 18/20 (Excellent), P1 fixed (responsive name fields)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:49:32 +11:00
42d87293fd Add PreviewStep page (wizard step 4)
Informational review step — no form fields. List-detail split:
ProviderCardCompact + "What happens next" numbered checklist + CTAs
(left), PackageDetail breakdown (right). Pre-planning variant shows
"Explore other options" tertiary CTA. Checklist reduces anxiety about
remaining steps. Pure presentation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:41:16 +11:00
a721f9cb1b Add PackagesStep page (wizard step 3)
List-detail split: ProviderCardCompact + selectable ServiceOption cards
(left), PackageDetail breakdown (right). Budget range filter (4 options),
"Most Popular" badge on qualifying packages. Radiogroup selection pattern
(ServiceOption has built-in role="radio"). Mobile Continue button visible
when detail panel stacks below. Grief-sensitive copy, pre-planning
variant. Pure presentation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:39:28 +11:00
fa20599b67 Add ProvidersStep page (wizard step 2) + audit fixes
ProvidersStep: list-map split layout with provider card list (left)
and map slot (right). SearchBar + filter chips + radiogroup card
selection pattern. Back link, results count with aria-live,
grief-sensitive copy with pre-planning variant. Pure presentation.

Audit fixes (18/20):
- P1: Move role="radio" + aria-checked onto ProviderCard (focusable)
- P3: Add aria-live="polite" on results count
- ProviderCard: extend props to accept HTML/ARIA passthrough, add
  rest spread to Card for role/aria-checked/aria-label support

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:36:27 +11:00
2631a2e4bb Add IntroStep page (wizard step 1) + audit fixes
IntroStep: urgency-sensitive segmentation entry point. ToggleButtonGroup
for forWhom (Myself/Someone else) with progressive disclosure revealing
hasPassedAway (Yes/No) via Collapse. Auto-sets hasPassedAway="no" when
forWhom="myself". Grief-sensitive copy adapts subheading per selection.
Pure presentation — props in, callbacks out.

Audit fixes (18/20 → 20/20):
- P1: Add <main> landmark wrapper in WizardLayout (all variants)
- P2: Wrap IntroStep fields in <form> for landmark + Enter-to-submit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 14:26:53 +11:00