- StepperBar: stepper centred at 700px max-width, cart hugs right edge
- StepIndicator: bump desktop label fontSize to 0.875rem for readability
- DateTimeStep story: demo progress bar + cart in context
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- New CartButton molecule: outlined pill trigger with receipt icon,
"Your Plan" label + formatted total in brand colour. Click opens
DialogShell with items grouped by section via LineItem, total row,
empty state. Mobile collapses to icon + price.
- WizardLayout: remove STEPPER_VARIANTS whitelist — stepper bar now
renders on any layout variant when progressStepper/runningTotal props
are provided (StepperBar already returns null when both empty)
- Thread progressStepper + runningTotal props to DateTimeStep, VenueStep,
SummaryStep, PaymentStep (joins 8 pages that already had them)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Switch from wide-form to grid-sidebar (viewport-locked, independent scroll)
- Sidebar: heading, allowance info bubble (conditional), category menu with
expandable subcategories, dual-knob price slider with editable inputs,
sort by dropdown, clear all filters, save-and-exit link
- Grid: coffin cards with thumbnail hover preview, equal-height cards,
subtle bg for white-bg product photos, colour count, Most Popular badge
- Card click navigates to CoffinDetailsStep (no Continue button)
- 20 coffins per page max before pagination
- WizardLayout grid-sidebar: wider sidebar (28%), overflowX hidden,
vertical scroll at all breakpoints, viewport-lock on desktop only
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Added maxWidth: 1200px + mx: auto to constrain content width
- Increased panel padding (px: 5 both sides)
- Left 58% / right 42% split for better reading width
- No longer edge-to-edge — content is readable and centered
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Removed top padding from list-map scroll container (pt: 0)
- Back link gets its own pt: 1.5 wrapper for breathing room
- Sticky search bar now pins flush against nav when scrolled
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- list-map variant now uses height: 100vh + overflow: hidden on outer wrapper
- Only the left panel scrolls (overflowY: auto already set)
- Map panel stays fixed, help bar pins to bottom
- Added minHeight: 0 on main element to prevent flex overflow
- Other layout variants unchanged (still use minHeight: 100vh)
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>
- WizardLayout ListMapLayout: 420px fixed left column (D-B), flex:1
right panel, back link rendered inside left panel instead of above
the split (eliminates gap above map)
- LAYOUT_MAP type updated to accept backLink prop for list-map variant
- ProvidersStep: heading + search + filters wrapped in sticky Box
that pins at top of scrollable left panel while card list scrolls
- VenueStep: same sticky header treatment, heading moved inside form
for consistent wrapper structure
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- centered-form: single column ~600px for form steps (intro, auth, etc.)
- list-map: 40/60 split for provider search (card list + map)
- list-detail: 40/60 master-detail for package selection
- grid-sidebar: 25/75 filter sidebar + card grid (coffins)
- detail-toggles: 50/50 hero image + product info (venue/coffin details)
Common elements: nav slot, sticky help bar, optional back link,
optional progress stepper + running total (grid-sidebar, detail-toggles).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
