- 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>
- Thumbnails now 4:3 aspect ratio instead of square
- Renamed thumbnailSize → thumbnailHeight, width calculated from ratio
- Default 64px height × 85px width
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
New ImageGallery molecule:
- Hero display area with thumbnail strip below
- Hover thumbnail to preview in hero, click to lock selection
- First image selected by default, brand border on active thumb
- Keyboard accessible (Enter/Space to select)
- Single image mode (no thumbnails), horizontal scroll for many
- Stories: Default, SingleImage, TwoImages, CustomSizes
VenueDetailStep + CoffinDetailsStep:
- Replaced static hero Box with ImageGallery component
- Added optional images[] field to VenueDetail and CoffinProfile types
- Falls back to single imageUrl when images not provided
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>
Thread Card's selected state (brand border + warm bg) through
ProviderCard for the radiogroup selection pattern in ProvidersStep.
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>
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>
- 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>
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>
- 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>
User feedback:
- "Trusted Partner" → "Verified" badge text
- Override Card hover bg fill (grey blended with shadow) — shadow lift only
- Logo 48px → 56px, removed white border (shadow only)
- Tightened spacing: content padding 16→12px, gap 8→4px, footer py 12→8px
/critique findings (27/40 → fixes applied):
- P1: Price promoted from footer into content area as bold primary text
- P2: Footer simplified to "View packages >" CTA with space-between
- Image fallback changed from grey to warm brand.50
- Name truncation relaxed to maxLines={2} for mobile
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
