- New VenueServicesStep (step 7c): venue-specific service toggles
with compact venue card, availability notices, AddOnOption toggles
with "View more" for long descriptions, conditional tally total
- AddOnOption: price colour changed from text.secondary to primary
(copper) for consistency with all other price displays in the system
- 5 stories: Default, WithNotice, PrePlanning, WithSelections, Minimal
- Component registry updated with VenueDetailStep + VenueServicesStep
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New molecule:
- FilterPanel: Popover-based reusable filter trigger with active
count badge, Clear all, Done actions. D-C: Popover for MVP.
Step integrations:
- ProvidersStep: inline Chip filter bar → FilterPanel Popover,
search bar + filter button side-by-side in sticky header
- VenueStep: same pattern, filter chips moved into Popover
- CoffinsStep (D-F): grid-sidebar layout → wide-form (full-width
4-col grid), category + price selects moved into FilterPanel
WizardLayout:
- Added wide-form variant (maxWidth lg, single column) for
card grids that benefit from full width
- wide-form included in STEPPER_VARIANTS for progress bar
Storybook:
- FilterPanel stories: Default, WithActiveFilters, SelectFilters,
CustomLabel
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
User reviewed all 15 steps, provided feedback. 7-batch iteration plan
created with all design decisions resolved. Next: Batch 1 (atom fixes).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Documented the two-layer error styling inconsistency and recommended fix
- Added form error colour normalisation as Phase 4 item in review plan
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Downloaded from vercel-labs/agent-skills — 3500+ lines of React/Next.js
performance optimization rules with code examples. Referenced by /review-component.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- 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>
- Step flow, state management, conditional logic map
- Smart defaults and CTA submit behaviour
- Props reference and sub-component index
- Guide for adding new steps
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
LineItem (molecule):
- Name + optional info tooltip + optional price
- Allowance asterisk, total variant (bold + top border)
- Reusable for package contents, order summaries, invoices
ProviderCardCompact (molecule):
- Horizontal layout: image left, name + location + rating right
- Used at top of Package Select page to show selected provider
PackageDetail (organism):
- Right-side detail panel for Package Select page
- Name/price header, Make Arrangement + Compare CTAs
- Grouped LineItem sections, total row, T&C footer
- PackageSelectPage story: full page with filter chips, package
list (ServiceOption), sticky detail panel, and Navigation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- ArrangementForm reverted to planned — need more building blocks first
- Footer: extract shared overline + contact link sx, use overlineSm variant
- Footer: remove hardcoded fontSize/fontWeight on contact links
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Footer:
- Dark espresso (brand.950) bg, inverse white text
- Logo, tagline, contact (phone/email), link group columns, legal bar
- Semantic HTML: <footer>, <nav> per group, <ul> for lists
- Critique 38/40, P2 fixes applied (legal link size, nav landmarks)
ServiceSelector:
- Single-select panel for arrangement flow
- Composes ServiceOption × n + Typography + Button (radiogroup)
- Auto-disables continue when nothing selected
- 7 stories incl. InArrangementFlow with StepIndicator
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Promote all 11 atoms, 6 molecules, 1 organism from review → done
- Navigation: grey bg (surface.subtle), real FA logo SVGs, add Provider Portal
- Navigation: remove mobileTrailing prop and MobilePriceTracker story
- Add staticDirs to Storybook config for brand assets
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- component-registry: 3 atoms moved from planned → review
- session-log: Session 25n continued — atoms batch build
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Logo: circle → 64px rounded rectangle (8px radius), positioned fully
inside image area with white border + shadow
- Footer removed — redundant since whole card is clickable and price
is already in content area
- Price: split "Packages from" (body2) + price (h6/500wt) for lighter
ecommerce feel, replaces blocky labelLg/700
- Verified badge bumped to medium size for visibility
- Capability badge: medium size, trailing info icon + capabilityDescription
tooltip prop for plain-language definitions on hover
- Unverified cards: 3px top accent bar, list on neutral.50 background
- Caption/CaptionSm weight: 400 → 500 system-wide (extends D019)
- Meta row: body2 → caption size for clearer tertiary hierarchy
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Switch:
- Wraps MUI Switch with FA brand tokens
- Bordered pill track (Figma Style One), brand.500 fill when active
- 4 component tokens: track width/height/borderRadius, thumb size
- Stories include interactive service add-ons demo
Radio:
- Wraps MUI Radio with FA brand tokens
- Brand.500 fill when selected, neutral.400 unchecked
- 2 component tokens: outer size, dot size
- Stories include card selection and payment method patterns
Also:
- Added ColourToggle and Slider to component registry (deferred)
- Updated token registry and session log
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Interactive tag for filtering, selection, and dismissible labels
- Wraps MUI Chip with FA tokens: 12 component tokens (height, padding, font, icon sizes)
- Two variants (filled/outlined) × two colours (default/primary) × two sizes (sm/md)
- Custom `selected` prop promotes to brand colour with warm bg (outlined)
- MUI theme overrides: soft tonal fills, branded outlines, hover/focus states
- 10 Storybook stories including interactive filter and removable tag demos
- Preflight passed all 5 checks
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
