Commit Graph

18 Commits

Author SHA1 Message Date
02510caf18 Match sort button size to filters, more spacing above results count
- Sort button: remove fontSize override so it inherits Button small size
- Results count: mt 2 → 3 for more breathing room below controls

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 17:24:11 +11:00
7b8cb65a63 Move List/Map toggle to floating overlay on map panel
- View toggle: floating in top-left of map panel with shadow + paper bg
- Control bar: just Filters + Sort (consistent heights, no overflow)
- Results count: bumped mt from 1 to 2 for more breathing room
- Both ProvidersStep and VenueStep updated

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 17:21:06 +11:00
e67c6342e9 Refine control bar: single-line layout, compact sort, labelled toggle
- All controls on one line: [List|Map] [Filters] [↕ Recommended]
- Sort: compact menu button replaces bulky TextField select
- View toggle: "List" / "Map" text labels alongside icons
- Results count: own line below controls
- Sort pushed right with ml:auto for visual separation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 17:09:52 +11:00
e3090e6aed Add sort dropdown + list/map view toggle to ProvidersStep & VenueStep
New control bar below search on both listing pages:
- Left: results count (passive)
- Right: sort select (Recommended/Nearest/Price), list/map toggle, filters

Sort: compact TextField select with 4 options, 0.813rem font.
View toggle: MUI ToggleButtonGroup with list/map icons, brand highlight.
Control bar wraps gracefully on narrow panels (flex-wrap).

New types: ProviderSortBy, VenueSortBy, ListViewMode.
Stories updated with interactive sort + view state.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 16:47:50 +11:00
a3069b2ee6 VenueStep structured filters: venue type, services, tradition
Replace generic chip filters with structured VenueFilterValues:
- Location: chip-in-input (same pattern as ProvidersStep)
- Venue type: wrapping chip multi-select (Chapel, Church, Cathedral,
  Outdoor Venue, Hall/Room, Mosque, Temple)
- Additional services: switches (Video Streaming, Photo Display)
- Service tradition: autocomplete with type-to-search (21 options)

New VenueFilterValues interface, EMPTY_VENUE_FILTERS export.
New story: WithActiveFilters (Chapel + video + Catholic).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 16:29:30 +11:00
e73ccf36dd CartButton molecule + progress bar on all wizard layouts
- New CartButton molecule: outlined pill trigger with receipt icon,
  "Your Plan" label + formatted total in brand colour. Click opens
  DialogShell with items grouped by section via LineItem, total row,
  empty state. Mobile collapses to icon + price.
- WizardLayout: remove STEPPER_VARIANTS whitelist — stepper bar now
  renders on any layout variant when progressStepper/runningTotal props
  are provided (StepperBar already returns null when both empty)
- Thread progressStepper + runningTotal props to DateTimeStep, VenueStep,
  SummaryStep, PaymentStep (joins 8 pages that already had them)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 15:19:20 +11:00
7a06f89e84 ConfirmationStep redesign, page tweaks across wizard
- ConfirmationStep: animated SVG tick, "What happens next" warm card,
  bullet-point layout, contactPhone prop, link-based secondary actions
- VenueStep + ProvidersStep: sticky search bar padding fix, off-white
  bg behind card lists
- IntroStep, CemeteryStep, CrematoriumStep, DateTimeStep: add divider
  under subheading for visual separation
- CoffinsStep: h4 heading (matches VenueStep/ProvidersStep list layout),
  sidebar headings h5 → h6

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 15:09:12 +11:00
3d339b4b0b ProvidersStep + VenueStep: heading scrolls, search/filters stay pinned
- Heading + subheading now scroll with listings (not sticky)
- Search bar + filters + results count remain sticky at top
- Subtle divider border on sticky section for visual segmentation
- Consistent pattern across both list-map pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 20:18:00 +11:00
ac6828d925 VenueStep click-to-navigate, new VenueDetailStep, CoffinDetailsStep detail-toggles
- VenueStep: simplified to click-to-navigate (like ProvidersStep)
  - Removed selection state, Continue button, inline detail, service toggles
  - Clicking a venue card triggers onSelectVenue navigation
- VenueDetailStep: new page with detail-toggles layout
  - Left: venue image, description, features
  - Right: name, location, type, price, Add Venue CTA, address, religions, service toggles
- CoffinDetailsStep: switched from centered-form to detail-toggles layout
  - Left: coffin image, description
  - Right: name, price, Add Coffin CTA, specs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 20:12:12 +11:00
1faa320f4b Feedback iteration: DialogShell, page consistency, popup standardisation
- Add DialogShell atom — shared dialog container (header, scrollable body, footer)
- Refactor FilterPanel to use DialogShell (Popover → centered Dialog)
- Refactor ArrangementDialog to use DialogShell
- Remove PreviewStep + AuthGateStep pages (consolidated into ArrangementDialog, D-E)
- IntroStep: static subheading, top-left aligned toggle button content
- ProvidersStep: h4 heading "Find a funeral director", location search with pin icon,
  filter moved below search right-aligned, map fill fix, hover scrollbar
- VenueStep: same consistency fixes (h4 heading, filter layout, location icon, map fix)
- PackagesStep: grouped packages ("Matching your preferences" / "Other packages from
  [Provider]"), removed budget filter + Most Popular badge, clickable provider card,
  onArrange replaces onContinue, h4 heading
- WizardLayout: list-map left panel gets thin scrollbar visible on hover

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 12:20:26 +11:00
88e409b019 Quality pass 2: sticky header breathing room, a11y labels, semantic tokens
Visual fixes:
- Sticky headers: add pt: 2 so scrolling content doesn't bleed
  flush against the heading (ProvidersStep, VenueStep)

Accessibility:
- ProvidersStep: add role="list" to provider list container
  (aria-label needs a semantic role to be announced)
- VenueStep: add aria-label to search TextField (placeholder
  alone is not a reliable label for screen readers)

Token consistency:
- Map placeholders: var(--fa-color-sage-50) → var(--fa-color-surface-cool)
  (use semantic token, not primitive) in ProvidersStep, VenueStep
- ArrangementDialog: var(--fa-color-brand-50) → var(--fa-color-surface-warm)
  for package summary background
- ArrangementDialog: replace Box component="a" with Link atom
  for terms and conditions (consistent focus/hover styling)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 08:24:31 +11:00
ae4bcef4c9 Quality pass: fix P0 audit findings across FilterPanel, ArrangementDialog, steps
FilterPanel (4 P0 + 2 P1 fixes):
- Add forwardRef (project convention)
- Use React.useId() for unique popover/heading IDs (was static)
- Change aria-describedby to aria-controls (correct ARIA pattern)
- Add role="dialog" + aria-labelledby on Popover paper
- Popover header now uses label prop (was hardcoded "Filters")
- Clear all font size uses theme.typography.caption (was hardcoded)
- Badge uses aria-hidden + visually-hidden text (cleaner SR output)
- Add maxHeight + overflow scroll to body, aria-label on Done button

ArrangementDialog (3 P0 + 1 P1 fixes):
- Add forwardRef
- Focus management: titleRef focused on step change via useEffect
- Add aria-live region announcing step transitions to screen readers
- Fix borderRadius from 3 to 2 (theme convention)

Sticky header padding (visual fix):
- ProvidersStep + VenueStep: mx/px now responsive { xs: -2/2, md: -3/3 }
  matching the panel's px: { xs: 2, md: 3 } — fixes mobile misalignment

CoffinDetailsStep:
- Wrap CTA area in form element with onSubmit + aria-busy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-30 08:22:06 +11:00
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
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