diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index 5a2a14b..45cdf30 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -31,6 +31,8 @@ duplicates) and MUST update it after completing one. | ColourToggle | planned | inactive, hover, active, locked × single, two-colour × desktop, mobile | | Circular colour swatch picker for products. Custom component. Deferred until product detail organisms. | | Slider | planned | single, range × desktop, mobile | | Price range filter. Wraps MUI Slider. Deferred until search/filtering molecules. | | Link | done | underline: hover/always/none × any MUI colour | color.text.brand (copper brand.600, 4.8:1), color.interactive.active | Navigation text link. Wraps MUI Link. Copper default, underline on hover, focus ring. | +| Collapse | done | in/out × unmountOnExit | (none — uses MUI defaults) | Progressive disclosure wrapper. Thin MUI Collapse wrapper with unmountOnExit default. Slide-down animation for wizard field reveal. | +| ToggleButtonGroup | done | exclusive single-select × small, medium, large × error × fullWidth + descriptions | color.neutral.100-200, color.brand.50/100, color.interactive.focus, color.feedback.error | Button-select for binary/small-set choices. Fieldset/legend a11y, external label, helper/error text. Brand styling on selected. | ## Molecules @@ -61,6 +63,18 @@ duplicates) and MUST update it after completing one. | 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). | +## Templates + +| Component | Status | Composed of | Notes | +|-----------|--------|-------------|-------| +| WizardLayout | done | Container + Box + Link + Typography + Navigation (slot) + StepIndicator (slot) | Page-level layout for arrangement wizard. 5 variants: centered-form, list-map, list-detail, grid-sidebar, detail-toggles. Nav slot, sticky help bar, optional back link, optional progress stepper + running total. `
` landmark wrapper. | + +## Pages + +| Component | Status | Composed of | Notes | +|-----------|--------|-------------|-------| +| IntroStep | done | WizardLayout (centered-form) + ToggleButtonGroup × 2 + Collapse + Typography + Button + Divider | Wizard step 1 — entry point. forWhom (Myself/Someone else) + hasPassedAway (Yes/No) with progressive disclosure. Auto-sets hasPassedAway="no" for "Myself". `
` wrapper, aria-live subheading, grief-sensitive copy. Pure presentation. Audit: 18/20 → 20/20 after fixes. | + ## Future enhancements Deferred items that should be addressed when the relevant components or patterns diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index 83b4bbd..bbc1e89 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -26,6 +26,41 @@ Each entry follows this structure: ## Sessions +### Session 2026-03-29 — Wizard Phase 0 + Phase 1 (foundation + IntroStep) + +**Agent(s):** Claude Opus 4.6 (1M context) + +**Work completed:** +- **Phase 0 — Foundation components:** + - WizardLayout template: 5 layout variants (centered-form, list-map, list-detail, grid-sidebar, detail-toggles), nav slot, sticky help bar, back link, progress stepper + running total, `
` landmark + - Collapse atom: thin MUI Collapse wrapper with unmountOnExit for progressive disclosure + - ToggleButtonGroup atom: exclusive single-select with fieldset/legend a11y, FA brand styling, descriptions, error state +- **Phase 1 — IntroStep page:** + - Wizard step 1 using centered-form layout + - forWhom + hasPassedAway ToggleButtonGroups with progressive disclosure via Collapse + - Auto-sets hasPassedAway="no" when forWhom="myself" (pre-planning) + - Grief-sensitive copy adapts subheading per selection state + - `` wrapper for landmark + Enter-to-submit + - aria-live on subheading, tabIndex=-1 on heading for focus management + - Pure presentation — props in, callbacks out +- **Audit:** IntroStep scored 18/20, fixed P1 (`
` landmark) and P2 (`` wrapper) → 20/20 + +**Decisions made:** +- Templates live at `src/components/templates/` (new atomic tier) +- Pages live at `src/components/pages/` (new atomic tier) +- WizardLayout uses `
` wrapper around all variants (not per-variant) +- ToggleButtonGroup uses `HTMLFieldSetElement` ref (not `HTMLDivElement`) due to `component="fieldset"` + +**Open questions:** +- None + +**Next steps:** +- Phase 2: Build Step 2 (Providers) — list-map layout variant +- Continue building wizard steps in spec order +- Retroactive review backlog still pending (molecules audit, organisms normalize) + +--- + ### Session 2026-03-27b — Retroactive review Phase 1 + 2.1, wizard planning **Agent(s):** Claude Opus 4.6 (1M context)