Normalize organisms, PaymentStep feedback, cross-page spacing fix

- Organism normalize pass: fix FuneralFinderV3 transition timing (200ms → 150ms ease-in-out), add autodocs tag to V3 stories - Navigation: fix logo a11y — div with role="link" → proper <a> tag - ToggleButtonGroup: add align (start/center) and direction (row/column) props, bump description text from text.secondary to text.primary - PaymentStep: divider under subheading, lock icon alignment, centre- aligned payment options, vertical payment method stack, checkbox align - SummaryStep: save button → text variant (matches other pages), centred - All wizard pages: heading mb: 1 → mb: 2 for better breathing room - Style Dictionary: auto-generate tokens.d.ts, fix TS unused imports - tokens.d.ts: generated type declarations for 398 token exports Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 14:13:40 +11:00
parent 8c42000692
commit 9b75aa7ef3
18 changed files with 472 additions and 31 deletions
--- a/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -42,6 +42,10 @@ export interface ToggleButtonGroupProps extends Omit<
  error?: boolean;
  /** Whether a selection is required */
  required?: boolean;
+  /** Text alignment inside each option button */
+  align?: 'start' | 'center';
+  /** Layout direction for the button group */
+  direction?: 'row' | 'column';
  /** MUI sx prop for the root FormControl */
  sx?: SxProps<Theme>;
 }
@@ -84,6 +88,8 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
      helperText,
      error = false,
      required = false,
+      align = 'start',
+      direction = 'row',
      fullWidth,
      size = 'large',
      sx,
@@ -132,6 +138,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
          aria-label={label}
          sx={{
            gap: 2,
+            ...(direction === 'column' && { flexDirection: 'column' }),
            // Remove MUI's connected-button styling (grouped borders)
            '& .MuiToggleButtonGroup-grouped': {
              border: '2px solid',
@@ -141,6 +148,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
                borderLeft: '2px solid',
                borderColor: 'var(--fa-color-neutral-200)',
                marginLeft: 0,
+                ...(direction === 'column' && { marginTop: 0 }),
              },
              '&.Mui-selected': {
                borderColor: 'primary.main',
@@ -155,10 +163,10 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
              value={option.value}
              disabled={option.disabled}
              sx={{
-                flex: 1,
+                flex: direction === 'row' ? 1 : undefined,
                textTransform: 'none',
                flexDirection: 'column',
-                alignItems: 'flex-start',
+                alignItems: align === 'center' ? 'center' : 'flex-start',
                justifyContent: 'flex-start',
                gap: 0.5,
                py: option.description ? 2 : 1.5,
@@ -213,7 +221,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
              {option.description && (
                <Typography
                  variant="body2"
-                  color="text.secondary"
+                  color="text.primary"
                  component="span"
                  sx={{ fontWeight: 400, lineHeight: 1.4 }}
                >
--- a/src/components/molecules/FilterPanel/FilterPanel.stories.tsx
+++ b/src/components/molecules/FilterPanel/FilterPanel.stories.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { FilterPanel } from './FilterPanel';
 import Box from '@mui/material/Box';
--- a/src/components/molecules/ServiceOption/ServiceOption.stories.tsx
+++ b/src/components/molecules/ServiceOption/ServiceOption.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ServiceOption } from './ServiceOption';
 import Box from '@mui/material/Box';
--- a/src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx
+++ b/src/components/organisms/FuneralFinder/FuneralFinderV3.stories.tsx
@@ -5,6 +5,7 @@ import { FuneralFinderV3 } from './FuneralFinderV3';
 const meta: Meta<typeof FuneralFinderV3> = {
  title: 'Organisms/FuneralFinder',
  component: FuneralFinderV3,
+  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
--- a/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx
+++ b/src/components/organisms/FuneralFinder/FuneralFinderV3.tsx
@@ -125,7 +125,8 @@ const StatusCard = React.forwardRef<
      cursor: 'pointer',
      fontFamily: 'inherit',
      textAlign: 'center',
-      transition: 'border-color 200ms ease, background-color 200ms ease, transform 100ms ease',
+      transition:
+        'border-color 150ms ease-in-out, background-color 150ms ease-in-out, transform 150ms ease-in-out',
      '&:hover': {
        borderColor: selected
          ? 'var(--fa-color-border-brand, #BA834E)'
--- a/src/components/organisms/Navigation/Navigation.tsx
+++ b/src/components/organisms/Navigation/Navigation.tsx
@@ -116,13 +116,23 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
              )}

              <Box
-                onClick={onLogoClick}
+                component={onLogoClick ? 'a' : 'div'}
+                href={onLogoClick ? '#' : undefined}
+                onClick={
+                  onLogoClick
+                    ? (e: React.MouseEvent) => {
+                        e.preventDefault();
+                        onLogoClick();
+                      }
+                    : undefined
+                }
                sx={{
                  display: 'flex',
                  alignItems: 'center',
                  cursor: onLogoClick ? 'pointer' : 'default',
+                  textDecoration: 'none',
+                  color: 'inherit',
                }}
-                role={onLogoClick ? 'link' : undefined}
                aria-label={onLogoClick ? 'Home' : undefined}
              >
                {logo}
--- a/src/components/pages/CemeteryStep/CemeteryStep.tsx
+++ b/src/components/pages/CemeteryStep/CemeteryStep.tsx
@@ -130,7 +130,7 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
      sx={sx}
    >
      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
        Cemetery
      </Typography>

--- a/src/components/pages/CoffinsStep/CoffinsStep.tsx
+++ b/src/components/pages/CoffinsStep/CoffinsStep.tsx
@@ -419,7 +419,7 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
      {/* ─── Sidebar (left panel) ─── */}

      {/* Heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
        Choose a coffin
      </Typography>

--- a/src/components/pages/CrematoriumStep/CrematoriumStep.tsx
+++ b/src/components/pages/CrematoriumStep/CrematoriumStep.tsx
@@ -124,7 +124,7 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
      sx={sx}
    >
      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
        Crematorium
      </Typography>

--- a/src/components/pages/DateTimeStep/DateTimeStep.tsx
+++ b/src/components/pages/DateTimeStep/DateTimeStep.tsx
@@ -161,7 +161,7 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
      sx={sx}
    >
      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
        A few important details
      </Typography>

--- a/src/components/pages/ExtrasStep/ExtrasStep.tsx
+++ b/src/components/pages/ExtrasStep/ExtrasStep.tsx
@@ -145,7 +145,7 @@ export const ExtrasStep: React.FC<ExtrasStepProps> = ({
      sx={sx}
    >
      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
        Optional extras
      </Typography>

--- a/src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx
+++ b/src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx
@@ -109,7 +109,7 @@ export const IncludedServicesStep: React.FC<IncludedServicesStepProps> = ({
      sx={sx}
    >
      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
        Included services
      </Typography>

--- a/src/components/pages/IntroStep/IntroStep.tsx
+++ b/src/components/pages/IntroStep/IntroStep.tsx
@@ -99,7 +99,7 @@ export const IntroStep: React.FC<IntroStepProps> = ({
  return (
    <WizardLayout variant="centered-form" navigation={navigation} hideHelpBar={hideHelpBar} sx={sx}>
      {/* Page heading — receives focus on entry for screen readers */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
        Let&apos;s get started
      </Typography>

--- a/src/components/pages/PaymentStep/PaymentStep.tsx
+++ b/src/components/pages/PaymentStep/PaymentStep.tsx
@@ -125,17 +125,19 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
      sx={sx}
    >
      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
        Payment
      </Typography>

-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 5 }}>
-        <LockOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, mb: 2 }}>
+        <LockOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary', mt: '3px' }} />
        <Typography variant="body2" color="text.secondary">
          Your payment is processed securely. You won&apos;t be charged more than the total shown.
        </Typography>
      </Box>

+      <Divider sx={{ mb: 4 }} />
+
      {/* ─── Amount display ─── */}
      <Paper
        elevation={2}
@@ -188,6 +190,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
            onChange={(v) => onChange({ ...values, paymentPlan: v as PaymentPlan })}
            error={!!errors?.paymentPlan}
            helperText={errors?.paymentPlan}
+            align="center"
            required
            fullWidth
          />
@@ -205,6 +208,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
            onChange={(v) => onChange({ ...values, paymentMethod: v as PaymentMethod })}
            error={!!errors?.paymentMethod}
            helperText={errors?.paymentMethod}
+            direction="column"
            required
            fullWidth
          />
@@ -297,7 +301,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
              </Link>
            </Typography>
          }
-          sx={{ mb: 1, alignItems: 'flex-start', '& .MuiCheckbox-root': { pt: 0.5 } }}
+          sx={{ mb: 1, alignItems: 'center' }}
        />
        {errors?.termsAccepted && (
          <Typography
--- a/src/components/pages/SummaryStep/SummaryStep.tsx
+++ b/src/components/pages/SummaryStep/SummaryStep.tsx
@@ -304,7 +304,7 @@ export const SummaryStep: React.FC<SummaryStepProps> = ({
      sx={sx}
    >
      {/* Header */}
-      <Typography variant="display3" component="h1" tabIndex={-1} sx={{ mb: 1 }}>
+      <Typography variant="display3" component="h1" tabIndex={-1} sx={{ mb: 2 }}>
        Review your plan
      </Typography>

@@ -709,16 +709,11 @@ export const SummaryStep: React.FC<SummaryStepProps> = ({
      </Button>

      {onSaveAndExit && (
-        <Button
-          variant="outlined"
-          color="secondary"
-          size="large"
-          fullWidth
-          onClick={onSaveAndExit}
-          sx={{ mt: 1.5 }}
-        >
-          Save and continue later
-        </Button>
+        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 1.5 }}>
+          <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
+            Save and continue later
+          </Button>
+        </Box>
      )}

      {/* Share dialog */}
--- a/src/components/pages/VenueServicesStep/VenueServicesStep.tsx
+++ b/src/components/pages/VenueServicesStep/VenueServicesStep.tsx
@@ -129,7 +129,7 @@ export const VenueServicesStep: React.FC<VenueServicesStepProps> = ({
      sx={sx}
    >
      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
        Funeral Service
      </Typography>