diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index f8a5114..593be7d 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -56,7 +56,7 @@ duplicates) and MUST update it after completing one. | 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). | -| FuneralFinderV3 | done | Typography + Button + Divider + Select + MenuItem + OutlinedInput + custom StatusCard/SectionLabel | Hero search widget v3 — clean form with status cards. Glassmorphism container (backdrop-blur, semi-transparent white). Two side-by-side tappable StatusCards (Immediate Need / Pre-planning) with warm tonal fills. Funeral type Select + location OutlinedInput with location pin icon — both use warm brand-100 fill, no border, no focus ring (per design). Overline section labels (brand-800). CTA always active — validates on click, scrolls to first missing field. Required: status + location. Funeral type defaults to "show all". WAI-ARIA roving tabindex on radiogroup. aria-labelledby via useId(). Critique: 33/40 (Good). Audit: 18/20 (Excellent). | +| FuneralFinderV3 | done | Typography + Button + Divider + Select + MenuItem + OutlinedInput + custom StatusCard/SectionLabel | Hero search widget v3 — clean form with status cards. Standard card container (surface.raised, card shadow). "How Can We Help" section: two side-by-side StatusCards (Immediate Need default-selected / Pre-planning) — white bg, neutral border, brand border + warm bg when selected, stack on mobile. "Funeral Type" Select + "Location" OutlinedInput with pin icon — standard outlined fields, no focus ring (per design). Overline section labels (text.secondary). CTA "Find Funeral Directors →" always active — validates on click, scrolls to first missing field. Required: status + location. Funeral type defaults to "show all". Dividers after header and before CTA. WAI-ARIA roving tabindex on radiogroup. aria-labelledby via useId(). 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). | diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index 537f5b8..1cd5ebc 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -23,46 +23,46 @@ Each entry follows this structure: ## Sessions -### Session 2026-03-26f — FuneralFinder v3 build +### Session 2026-03-26f — FuneralFinder v3 build + polish **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) +- Created FuneralFinderV3 — clean vertical form based on user's Figma layout (5919:29445), restyled to FA design system +- Two side-by-side StatusCards (Immediate Need default-selected / Pre-planning), stack on mobile +- Standard card container (surface.raised, card shadow) — initially built with glassmorphism, user redirected to standard palette +- Overline section labels (text.secondary) for "How Can We Help", "Funeral Type", "Location" +- Standard outlined fields (white bg, neutral border, brand border on focus, no focus ring per user request) +- Location input with LocationOnOutlined pin icon +- CTA "Find Funeral Directors →" always active — validates on click, scrolls to first missing field +- Dividers after header and before CTA for visual rhythm - 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 +- WAI-ARIA roving tabindex on radiogroup, aria-labelledby via React.useId() +- Semantic tokens throughout (border-brand, surface-warm, text-brand, interactive-focus, text-disabled) +- Error messages conditionally rendered in aria-live regions (brand copper tone — gentle validation) +- First pass scored Critique 33/40, Audit 13/20 → iterated on all findings → re-audit 18/20 +- Polish pass: revised copy, fixed spacing, defaults, label rename **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 +- Status cards replace V2's step-circle + dropdown — simpler, more visual, side-by-side on desktop +- Standard design system styling (user clarified Figma was for structure only, not colour scheme) +- "Immediate Need" selected by default — most common use case, status error essentially unreachable +- Section renamed from "Current Status" (programmatic) to "How Can We Help" (warm, human) +- Copy: "A recent loss or one expected soon" — "expected soon" differentiates from pre-planning gently +- Copy: "Planning ahead for yourself or a loved one" — "planning ahead" reinforces non-urgency +- No sequential unlock — all fields accessible immediately +- CTA always active — validates on click, scrolls to missing field +- Form simplified to 3 fields (status, funeral type, location) vs V2's 4 - 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 +- Error colour uses text.brand (copper) not feedback.error (red) — intentional for funeral context **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 +- Decision: V1 vs V2 vs V3 for production **Next steps:** -- User review of V3 in Storybook -- Decision: V1 vs V2 vs V3 for production -- If V3 chosen: location autocomplete, possible mobile refinements +- User to review final V3 in Storybook +- If V3 chosen: location autocomplete, possible further refinements ---