Thin MUI Collapse wrapper with unmountOnExit default. Used in the
arrangement wizard to reveal fields after a selection is made
(slide-down animation). Stories include interactive toggle and
wizard field-reveal pattern demo.
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>
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>
Formatting-only changes across all component and story files.
No logic or behaviour changes — only whitespace, line breaks, and trailing commas.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Section labels use text.secondary instead of brand-800
- Rename "Current Status" → "How Can We Help" (warmer, less programmatic)
- Revise copy: "A recent loss or one expected soon" (clarifies imminent vs pre-plan)
- Pre-planning: "Planning ahead for yourself or a loved one"
- Default selection: Immediate Need selected on load
- Fix spacing: remove minHeight from error containers so gap is consistent
- Add divider between location section and CTA
- Mobile: status cards already stack (xs: 1fr)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Container: opaque white (surface.raised), standard card shadow/radius
- Status cards: white bg + neutral border, brand border + warm bg when selected
- Fields: white bg, neutral-200 border, brand border on focus, no focus ring
- CTA: standard Button contained, no custom shadows
- Keep: overline labels in brand-800, layout structure, form logic, a11y
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>
- StepCircle gets `active` prop — brand-500 fill with white number (used on step 1)
- Input in step 4 now matches selectSx: bgcolor, disabled (opacity + dashed),
error border, hover, focus — all consistent with steps 1-3
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>
- Extend one-question-at-a-time pattern through all steps (type, service, location)
- CTA + location always visible at bottom; smart defaults for missing optional fields
- Minimum search requirements: intent + location; type/service/themes default to "all"
- Funeral types: Cremation, Burial, Water Burial (QLD only) + Explore All as TypeCard
- Service preference step (conditional): With a service / No service / I'm flexible
- Theme preferences (eco-friendly, budget-friendly, religious specialisation) as optional
sub-option within type step
- StepHeading sub-component: bodyLg centered, distinct from card labels
- CompletedRows: generous py:1.5 spacing, caption-size "Change" with aria-label
- Loading prop on CTA button, location validation (3+ chars)
- Divider under subheading for visual structure
- Main heading upgraded to h2 with display font
- Audit: 14/20 (Good), Critique: 29/40 (Good)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Complete rewrite of the interaction model:
Before: numbered steps + uppercase overline labels + cramped option cards
→ felt like a government form, not gentle guidance
After: conversational questions with generous choice cards
→ "How can we help you today?" not "1. I'M HERE TO"
Key changes:
- Questions as warm sentences, not uppercase labels
- ChoiceCards: generous padding (20px × 16px), descriptions explaining
each option, check icon on selection
- TypePills: pill-shaped buttons with proper touch targets for funeral types
- CompletedRow: "I'm here to: **Arrange a funeral now** · Change"
— explicit, accessible, no hidden pencil icon
- Only shows one question at a time — true progressive disclosure
- CTA only appears once location step is reached
- No step numbers, no badges — the vertical flow IS the progression
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mt/pt bumped from 1.5 (12px) to 2 (16px), add pb: 0.5 (4px) so
the text sits more centred between the border-top and the content below.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
PackageDetail:
- Warm header band (surface.warm) with "Package" overline, h3 name,
h5 price in brand colour — creates distinct decision zone
- Section headings bumped to h6 (16px/600) — clear hierarchy vs
LineItem body2 (14px/500)
- Divider + subtext before Extras: "These items can be added to your
package at additional cost"
- Top padding increased, content padding increased (py: 3)
- Remove redundant textTransform/letterSpacing on overline (P2 fix)
LineItem:
- Item gap increased in PackageContents story (12px → 16px)
Audit: 19/20 (Excellent). 0 P0, 0 P1.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- LineItem: add aria-label to info icon for screen readers (P1)
- PackageDetail: stack CTA buttons vertically on narrow screens (P2)
- PackageDetail: section headings use component="h3" for hierarchy (P2)
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>
AddOnOption:
- Move price to its own row below heading (was squeezed between name and switch)
- Switch pins to top-right with alignItems: flex-start
- Long headings now wrap cleanly without layout pressure
Both AddOnOption + ServiceOption:
- Add optional maxDescriptionLines prop for CSS line-clamp truncation
- "View more" / "View less" toggle appears only when text is actually truncated
- Omit prop for no limit (default, backwards compatible)
- stopPropagation on toggle so clicking it doesn't trigger card selection
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Explicit button height via input token CSS vars for pixel-perfect alignment
- Reduced InputAdornment start margin (mr: 0.5) to bring search icon closer to text
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Maps to Figma Main Nav (14:108) desktop + Mobile Header (2391:41508)
- Desktop: logo left, nav links right, optional CTA button
- Mobile: hamburger + drawer with nav items, CTA, and help footer
- Sticky header with warm surface background and border
- Composes AppBar, Link, IconButton, Button, Divider, Drawer
- 6 stories: Default, WithCTA, WithPageContent (sticky scroll demo),
Minimal, ExtendedNavigation, MobilePriceTracker
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
