|
|
cc87827c39
|
Add FuneralFinder v2 — quick-form stepped search widget
- 4-step vertical form: intent, planning-for, type, location
- Sequential unlock: each step enables when the previous is filled
- Step circles (48px, brand-200) transition to brand-500 check on completion
- Connector lines between circles for visual progression
- Conditional logic: arrange-now auto-sets step 2 to "Someone else"
- CTA disabled until location filled, trust signal below
- Display serif heading + subheading with divider
- Critique 33/40 (Good), Audit 18/20 (Excellent)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
2026-03-26 17:27:18 +11:00 |
|
|
|
d7dddb0773
|
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>
|
2026-03-26 09:15:07 +11:00 |
|
