CartButton molecule + progress bar on all wizard layouts

- 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>
This commit is contained in:
2026-03-31 15:19:20 +11:00
parent 7a06f89e84
commit e73ccf36dd
8 changed files with 302 additions and 6 deletions

View File

@@ -381,8 +381,7 @@ const LAYOUT_MAP: Record<
'detail-toggles': DetailTogglesLayout,
};
/** Variants that show the stepper/total bar */
const STEPPER_VARIANTS: WizardLayoutVariant[] = ['wide-form', 'grid-sidebar', 'detail-toggles'];
/* Stepper bar renders on any variant when progressStepper or runningTotal is provided */
// ─── Component ───────────────────────────────────────────────────────────────
@@ -396,8 +395,8 @@ const STEPPER_VARIANTS: WizardLayoutVariant[] = ['wide-form', 'grid-sidebar', 'd
* - **grid-sidebar**: Filter sidebar + card grid (coffins)
* - **detail-toggles**: Hero image + info column (venue, coffin details)
*
* All variants share: navigation slot, optional back link, sticky help bar.
* Grid-sidebar and detail-toggles add: progress stepper, running total widget.
* All variants share: navigation slot, optional back link, sticky help bar,
* and optional progress stepper + running total bar (shown when props provided).
*/
export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
(
@@ -418,7 +417,6 @@ export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
ref,
) => {
const LayoutComponent = LAYOUT_MAP[variant];
const showStepper = STEPPER_VARIANTS.includes(variant);
return (
<Box
@@ -446,7 +444,7 @@ export const WizardLayout = React.forwardRef<HTMLDivElement, WizardLayoutProps>(
{navigation}
{/* Stepper + running total bar (grid-sidebar, detail-toggles only) */}
{showStepper && <StepperBar stepper={progressStepper} total={runningTotal} />}
<StepperBar stepper={progressStepper} total={runningTotal} />
{/* Back link — inside left panel for list-map/detail-toggles, above content for others */}
{showBackLink && variant !== 'list-map' && variant !== 'detail-toggles' && (