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:
@@ -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' && (
|
||||
|
||||
Reference in New Issue
Block a user