Add FuneralFinder v3 — clean form with status cards + glassmorphism
- 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>
This commit is contained in:
@@ -23,6 +23,49 @@ Each entry follows this structure:
|
||||
|
||||
## Sessions
|
||||
|
||||
### Session 2026-03-26f — FuneralFinder v3 build
|
||||
|
||||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||||
|
||||
**Work completed:**
|
||||
- Created FuneralFinderV3 — clean vertical form approach based on user's Figma mockup (5919:29445)
|
||||
- Two side-by-side StatusCards (Immediate Need / Pre-planning) replace V2's dropdown + step circles
|
||||
- Glassmorphism container (backdrop-blur, semi-transparent white, warm-tinted border, deep shadow)
|
||||
- Overline section labels (uppercase, brand-800) for "Current Status", "Funeral Type", "Location"
|
||||
- Warm tonal field backgrounds (brand-100) with no visible border, no focus ring (per user request)
|
||||
- Location input with location pin icon (LocationOnOutlined)
|
||||
- CTA always active — validates on click, scrolls to first missing field (status or location)
|
||||
- Funeral type options: same as V2 + "Show all options"
|
||||
- WAI-ARIA roving tabindex on radiogroup (arrow-key navigation between status cards)
|
||||
- aria-labelledby via React.useId() for all fields
|
||||
- Semantic token usage: border-brand, surface-warm, text-brand, interactive-focus, text-disabled
|
||||
- Error messages conditionally rendered in aria-live regions (copper/brand tone, not red — gentle validation)
|
||||
- First pass scored Critique 33/40, Audit 13/20
|
||||
- Iterated on all P1-P3 findings, re-audit scored 18/20
|
||||
|
||||
**Decisions made:**
|
||||
- Status cards replace V2's step-circle + dropdown pattern — simpler, more visual, side-by-side on desktop
|
||||
- Glassmorphism is a V3 differentiator — works over hero images, degrades gracefully to opaque white
|
||||
- No sequential unlock — all fields accessible immediately (V2 locked steps until previous was filled)
|
||||
- CTA always active (V2 disabled CTA until location was filled) — validates on click, scrolls to missing field
|
||||
- Form simplified to 3 fields (status, funeral type, location) vs V2's 4 (intent, planning-for, type, location)
|
||||
- "Planning for" folded into StatusCard descriptions rather than separate field
|
||||
- Focus ring suppressed on Select/Input per user requirement — status cards retain focus-visible
|
||||
- Error colour uses text.brand (copper) not feedback.error (red) — intentional gentle tone for funeral context
|
||||
- Warm brand-tinted CTA shadow (brand.600 at 20% opacity) — no token for coloured shadows, commented
|
||||
|
||||
**Open questions:**
|
||||
- User to review V3 in Storybook — compare against V1 and V2
|
||||
- Location autocomplete integration still pending across all versions
|
||||
- Consider adding component tokens for the glassmorphism treatment if reused elsewhere
|
||||
|
||||
**Next steps:**
|
||||
- User review of V3 in Storybook
|
||||
- Decision: V1 vs V2 vs V3 for production
|
||||
- If V3 chosen: location autocomplete, possible mobile refinements
|
||||
|
||||
---
|
||||
|
||||
### Session 2026-03-26e — FuneralFinder v2 polish + consistency fixes
|
||||
|
||||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||||
|
||||
Reference in New Issue
Block a user