Update session log and registry with steps 1-4 progress
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -74,6 +74,9 @@ duplicates) and MUST update it after completing one.
|
||||
| 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". `<form>` wrapper, aria-live subheading, grief-sensitive copy. Pure presentation. Audit: 18/20 → 20/20 after fixes. |
|
||||
| ProvidersStep | done | WizardLayout (list-map) + ProviderCard + SearchBar + Chip + Typography + Button | Wizard step 2 — provider selection. List-map split: provider cards w/ radiogroup + search + filter chips (left), map slot (right). aria-live results count, back link. ProviderCard extended with HTML/ARIA passthrough. Audit: 18/20. |
|
||||
| PackagesStep | done | WizardLayout (list-detail) + ProviderCardCompact + ServiceOption + PackageDetail + Badge + TextField + Typography + Button | Wizard step 3 — package selection. List-detail split: compact provider + budget filter + package list w/ radiogroup (left), PackageDetail breakdown (right). "Most Popular" badge. Mobile Continue button. |
|
||||
| PreviewStep | done | WizardLayout (list-detail) + ProviderCardCompact + PackageDetail + Typography + Button + List + Divider | Wizard step 4 — package review. Informational (no form fields). "What happens next" numbered checklist. Pre-planning shows "Explore other options" tertiary CTA. |
|
||||
|
||||
## Future enhancements
|
||||
|
||||
|
||||
@@ -26,38 +26,44 @@ Each entry follows this structure:
|
||||
|
||||
## Sessions
|
||||
|
||||
### Session 2026-03-29 — Wizard Phase 0 + Phase 1 (foundation + IntroStep)
|
||||
### Session 2026-03-29 — Wizard Phase 0 through Phase 4 (foundation + steps 1-4)
|
||||
|
||||
**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, `<main>` 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
|
||||
- `<form>` 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 (`<main>` landmark) and P2 (`<form>` wrapper) → 20/20
|
||||
- WizardLayout template: 5 layout variants, nav slot, sticky help bar, back link, progress stepper + running total, `<main>` landmark
|
||||
- Collapse atom: thin MUI Collapse wrapper with unmountOnExit
|
||||
- ToggleButtonGroup atom: exclusive single-select with fieldset/legend a11y, FA brand styling
|
||||
- **Phase 1 — IntroStep (step 1):**
|
||||
- Centered-form layout, forWhom + hasPassedAway with progressive disclosure
|
||||
- Auto-sets hasPassedAway="no" for "Myself", grief-sensitive copy adapts
|
||||
- Audit 18→20/20 after fixes (`<main>` landmark, `<form>` wrapper)
|
||||
- **Phase 2 — ProvidersStep (step 2):**
|
||||
- List-map split: provider cards w/ radiogroup + search + filter chips (left), map slot (right)
|
||||
- ProviderCard extended with selected prop + HTML/ARIA passthrough
|
||||
- Audit 18/20, P1 fixed (radio on focusable Card)
|
||||
- **Phase 3 — PackagesStep (step 3):**
|
||||
- List-detail split: ProviderCardCompact + budget filter + ServiceOption list (left), PackageDetail (right)
|
||||
- "Most Popular" badge, mobile Continue button
|
||||
- **Phase 4 — PreviewStep (step 4):**
|
||||
- Informational review, "What happens next" numbered checklist
|
||||
- Pre-planning variant shows "Explore other options" tertiary CTA
|
||||
|
||||
**Approach:** First pass of all steps (build + quick audit + P0/P1 fixes only), then grooming pass (critique/harden/polish/normalize) across the full flow.
|
||||
|
||||
**Decisions made:**
|
||||
- Templates live at `src/components/templates/` (new atomic tier)
|
||||
- Pages live at `src/components/pages/` (new atomic tier)
|
||||
- WizardLayout uses `<main>` wrapper around all variants (not per-variant)
|
||||
- ToggleButtonGroup uses `HTMLFieldSetElement` ref (not `HTMLDivElement`) due to `component="fieldset"`
|
||||
- Templates at `src/components/templates/`, Pages at `src/components/pages/`
|
||||
- ProviderCard/ServiceOption: ARIA passthrough for radiogroup patterns
|
||||
- First-pass approach: build all steps, then groom — user confirmed
|
||||
|
||||
**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)
|
||||
- Step 5 (Auth Gate) — centered-form layout, account creation/login
|
||||
- Continue through remaining steps (6-18)
|
||||
- Retroactive review backlog still pending
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user