Add FuneralFinder organism — hero search with stepped flow
Procedural stepped search widget for the homepage: 1. "I'm here to" — Arrange now / Pre-plan (radiogroup) 2. "I'm planning for" — Myself / Someone else (conditional, pre-plan only) 3. "Type of funeral" — dynamic Chip list from prop 4. Location — suburb or postcode input 5. CTA: "Find funeral directors" (disabled until complete) Features: - Progressive disclosure: steps unlock sequentially - Brand checkmarks + edit icon on completed steps - Click completed value to revert (only resets dependents) - Step numbering adjusts when conditional step hidden - Trust signal: "Free to use · No obligation" Audit: 17/20 (Good). P1/P2 fixes applied: - Location input aria-label for screen readers - Option groups wrapped in role="radiogroup" - Completed values have edit icon affordance - Heading uses display font CSS variable - CheckCircleIcon aria-hidden 5 stories: Default, FewerTypes, CustomHeading, InHeroDesktop, InHeroMobile Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -54,6 +54,7 @@ duplicates) and MUST update it after completing one.
|
||||
| ServiceSelector | done | ServiceOption × n + Typography + Button | Single-select service panel for arrangement flow. Heading + subheading + ServiceOption list (radiogroup) + optional continue Button. Manages selection state via selectedId/onSelect. maxDescriptionLines pass-through. |
|
||||
| PricingTable | planned | PriceCard × n + Typography | Comparative pricing display |
|
||||
| PackageDetail | done | LineItem × n + Typography + Button + Divider | Right-side package detail panel. Warm header band (surface.warm) with "Package" overline, name, price (brand colour), Make Arrangement + Compare (with loading) buttons. Sections (before total) + total + extras (after total, with subtext). T&C grey footer. Audit: 19/20. Maps to Figma Package Select (5405:181955). |
|
||||
| FuneralFinder | review | Typography + Button + Chip + Input + custom OptionCard | Hero search widget. Procedural stepped flow: Intent → Planning For (conditional) → Funeral Type (chips, dynamic) → Location → CTA. Brand checkmarks on completion, edit icon to revert, radiogroup semantics. Audit: 17/20 → fixes applied. |
|
||||
| ArrangementForm | planned | StepIndicator + ServiceSelector + AddOnOption + Button + Typography | Multi-step arrangement wizard. Deferred — build remaining atoms/molecules first. |
|
||||
| Navigation | done | AppBar + Link + IconButton + Button + Divider + Drawer | Responsive site header. Desktop: logo left, links right, optional CTA. Mobile: hamburger + drawer with nav items, CTA, help footer. Sticky, grey surface bg (surface.subtle). Real FA logo from brandassets/. Maps to Figma Main Nav (14:108) + Mobile Header (2391:41508). |
|
||||
| Footer | done | Link × n + Typography + Divider + Container + Grid | Dark espresso (brand.950) site footer. Logo + tagline + contact (phone/email) + link group columns + legal bar. Semantic HTML (footer, nav, ul). Critique: 38/40 (Excellent). |
|
||||
|
||||
Reference in New Issue
Block a user