Update registry + session log — FuneralFinder v2 complete
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -55,6 +55,7 @@ duplicates) and MUST update it after completing one.
|
||||
| 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 | done | Typography + Button + Chip + Input + Divider + Link + custom ChoiceCard/TypeCard/CompletedRow/StepHeading | Hero search widget v1. Full stepped conversational flow: Intent → Planning For (conditional) → Funeral Type + preferences (optional themes) → Service preference (conditional, auto-advance) → Location + CTA (always visible). Smart defaults — minimum search: intent + location. Types: Cremation, Burial, Water Burial (QLD only), Explore All. Service: With/No/Flexible. Themes: eco-friendly, budget-friendly, religious specialisation. Loading prop, location validation. Audit: 14/20 (Good). Critique: 29/40 (Good). Future: progress indicator, roving tabindex, location autocomplete. |
|
||||
| FuneralFinderV2 | done | Typography + Button + Input + Divider + Select + MenuItem + custom StepCircle | Hero search widget v2 — quick-form approach. 4-step vertical form with numbered circles (48px, brand-200 default → brand-500 completed) and connector lines. Steps: (1) Intent — 3 options, (2) Planning for — conditional auto-set for arrange-now, (3) Funeral type — 5 options, (4) Location — text input. Sequential unlock: each step enables when previous is filled. Display serif heading + subheading with divider. CTA disabled until location filled. Trust signal below CTA. Critique: 33/40 (Good). Audit: 18/20 (Excellent). |
|
||||
| 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). |
|
||||
|
||||
@@ -23,6 +23,43 @@ Each entry follows this structure:
|
||||
|
||||
## Sessions
|
||||
|
||||
### Session 2026-03-26d — FuneralFinder v2 build
|
||||
|
||||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||||
|
||||
**Work completed:**
|
||||
- Built FuneralFinderV2 from scratch — completely different approach from v1 (quick-form vs stepped wizard)
|
||||
- 4-step vertical form with 48px numbered circles (brand-200 default → brand-500 completed) and 3px connector lines
|
||||
- Steps: (1) Intent (3 options), (2) Planning for (conditional auto-set for arrange-now), (3) Funeral type (5 options), (4) Location
|
||||
- Sequential unlock logic: each step enables only when the previous is filled
|
||||
- Labels use brand-700 copper when active, text.disabled when locked
|
||||
- Selects match Input medium height (48px) via py: 14px
|
||||
- Display serif heading + body2 subheading with full-width divider
|
||||
- Default contained CTA (copper), disabled until location has 3+ chars
|
||||
- Trust signal "Free to use · No obligation" below CTA
|
||||
- Focus rings suppressed (subtle brand-400 border only)
|
||||
- Full accessibility: role="search", aria-required, aria-label on all fields
|
||||
- Multiple iteration rounds incorporating user feedback on sizing, alignment, colours, spacing, and layout
|
||||
- Ran /critique (33/40 Good) and /audit (18/20 Excellent) — fixed all P0/P1 issues
|
||||
|
||||
**Decisions made:**
|
||||
- v2 keeps v1 alongside — both exported from index.ts for comparison
|
||||
- Step circles use brand-200 warm fill (not neutral grey) for palette cohesion
|
||||
- "Plan a funeral for someone expected to pass soon" softened to "Plan ahead for someone who is unwell"
|
||||
- Connector lines use ::after on each StepCircle rather than container ::before (starts from circle bottom, not above)
|
||||
- Location input uses no icon, matches select styling (py: 14px, fontSize: 0.875rem)
|
||||
|
||||
**Open questions:**
|
||||
- Which version (v1 or v2) to proceed with for production? May keep both and A/B test
|
||||
- Connector line height (60px) is a magic number — works for single-line labels but would need adjustment if labels wrap
|
||||
|
||||
**Next steps:**
|
||||
- User to review in Storybook and decide on v1 vs v2 direction
|
||||
- If v2 chosen: add location autocomplete, consider progress summary state
|
||||
- Update docs/reference/ with v2 flow logic doc (similar to funeral-finder-logic.md for v1)
|
||||
|
||||
---
|
||||
|
||||
### Session 2026-03-26c — FuneralFinder v1 refinement and completion
|
||||
|
||||
**Agent(s):** Claude Opus 4.6 (1M context)
|
||||
|
||||
Reference in New Issue
Block a user