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>
- 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>
User reviewed all 15 steps, provided feedback. 7-batch iteration plan
created with all design decisions resolved. Next: Batch 1 (atom fixes).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- MuiOutlinedInput: error border and focus ring now use copper
(ColorTextBrand #B0610F) instead of red (ColorFeedbackError #BC2F2F)
- MuiFormHelperText: error text colour overridden to copper
- MuiFormLabel: error state stays neutral text (D024 reinforcement)
- ToggleButtonGroup: error border changed from error.main to copper
palette.error.main remains red for non-form uses (destructive buttons,
system alerts). Form validation is now fully warm/copper end-to-end.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Documented the two-layer error styling inconsistency and recommended fix
- Added form error colour normalisation as Phase 4 item in review plan
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- [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>
- 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>
- 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>
- 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>
- 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>
Thread Card's selected state (brand border + warm bg) through
ProviderCard for the radiogroup selection pattern in ProvidersStep.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
MUI ToggleButtonGroup wrapper with FA brand tokens. Exclusive
single-select with fieldset/legend a11y, external label, helper/error
text. Selected state uses brand.50 bg + brand border. Supports
optional description text per option. Used in wizard for binary
choices (Myself/Someone else, Yes/No).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Thin MUI Collapse wrapper with unmountOnExit default. Used in the
arrangement wizard to reveal fields after a selection is made
(slide-down animation). Stories include interactive toggle and
wizard field-reveal pattern demo.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- centered-form: single column ~600px for form steps (intro, auth, etc.)
- list-map: 40/60 split for provider search (card list + map)
- list-detail: 40/60 master-detail for package selection
- grid-sidebar: 25/75 filter sidebar + card grid (coffins)
- detail-toggles: 50/50 hero image + product info (venue/coffin details)
Common elements: nav slot, sticky help bar, optional back link,
optional progress stepper + running total (grid-sidebar, detail-toggles).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Downloaded from vercel-labs/agent-skills — 3500+ lines of React/Next.js
performance optimization rules with code examples. Referenced by /review-component.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Formatting-only changes across all component and story files.
No logic or behaviour changes — only whitespace, line breaks, and trailing commas.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Section labels use text.secondary instead of brand-800
- Rename "Current Status" → "How Can We Help" (warmer, less programmatic)
- Revise copy: "A recent loss or one expected soon" (clarifies imminent vs pre-plan)
- Pre-planning: "Planning ahead for yourself or a loved one"
- Default selection: Immediate Need selected on load
- Fix spacing: remove minHeight from error containers so gap is consistent
- Add divider between location section and CTA
- Mobile: status cards already stack (xs: 1fr)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Container: opaque white (surface.raised), standard card shadow/radius
- Status cards: white bg + neutral border, brand border + warm bg when selected
- Fields: white bg, neutral-200 border, brand border on focus, no focus ring
- CTA: standard Button contained, no custom shadows
- Keep: overline labels in brand-800, layout structure, form logic, a11y
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Two side-by-side StatusCards (Immediate Need / Pre-planning) with warm fills
- Glassmorphism container (backdrop-blur, semi-transparent white, deep shadow)
- Overline section labels, warm tonal field backgrounds (brand-100, no border)
- Funeral type Select + location Input with pin icon, no focus ring per design
- CTA always active — validates on click, scrolls to first missing field
- WAI-ARIA roving tabindex on radiogroup, aria-labelledby via useId()
- Semantic tokens throughout (border-brand, surface-warm, text-brand, etc.)
- Critique: 33/40 (Good), Audit: 18/20 (Excellent)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- StepCircle gets `active` prop — brand-500 fill with white number (used on step 1)
- Input in step 4 now matches selectSx: bgcolor, disabled (opacity + dashed),
error border, hover, focus — all consistent with steps 1-3
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
