richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CemeteryStep: rewrite to match live site

Browse Source 
- ToggleButtonGroups (Yes/No/Not sure) replace RadioGroups
- Select dropdown replaces card selection grid
- Progressive disclosure: own plot → locate it; no plot → preference?
- "Not sure" option on both questions for grief-sensitive escape hatch
- Component registry updated

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-30 22:09:40 +11:00
parent 52e42c3415
commit 14af8d1f5a
4 changed files with 152 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/memory/component-registry.md
View File

@@ -84,7 +84,7 @@ duplicates) and MUST update it after completing one.
| VenueDetailStep | done | WizardLayout (detail-toggles) + ImageGallery + Card + Chip + Typography + Button + Divider | Wizard step 7b — venue detail. Two-panel: gallery/description/features/location (left), name/meta/price/CTA/religions (right). Informational service preview. | | VenueDetailStep | done | WizardLayout (detail-toggles) + ImageGallery + Card + Chip + Typography + Button + Divider | Wizard step 7b — venue detail. Two-panel: gallery/description/features/location (left), name/meta/price/CTA/religions (right). Informational service preview. |
| VenueServicesStep | done | WizardLayout (centered-form) + AddOnOption + Card + Typography + Button + Divider | Wizard step 7c — venue services. Compact venue card, availability notices, AddOnOption toggles with "View more" for long descriptions. Follows VenueDetailStep. | | VenueServicesStep | done | WizardLayout (centered-form) + AddOnOption + Card + Typography + Button + Divider | Wizard step 7c — venue services. Compact venue card, availability notices, AddOnOption toggles with "View more" for long descriptions. Follows VenueDetailStep. |
| CrematoriumStep | done | WizardLayout (centered-form) + Card + Badge + ToggleButtonGroup + Typography + Button + Divider | Wizard step 8 — crematorium. Two variants: Service & Cremation (compact card + witness Yes/No toggle), Cremation Only (compact card + "Cremation Only" badge + "Included in Package" notice). Single pre-selected crematorium, no multi-select. | | CrematoriumStep | done | WizardLayout (centered-form) + Card + Badge + ToggleButtonGroup + Typography + Button + Divider | Wizard step 8 — crematorium. Two variants: Service & Cremation (compact card + witness Yes/No toggle), Cremation Only (compact card + "Cremation Only" badge + "Included in Package" notice). Single pre-selected crematorium, no multi-select. |
| CemeteryStep | done | WizardLayout (centered-form) + Card + RadioGroup + Collapse + Divider + Button | Wizard step 9 — cemetery. Triple progressive disclosure (have plot? → choose? → grid). Dependent field resets. | | CemeteryStep | done | WizardLayout (centered-form) + ToggleButtonGroup + Collapse + TextField (select) + Typography + Button + Divider | Wizard step 9 — cemetery. ToggleButtonGroups (Yes/No/Not sure) with progressive disclosure. Own plot → locate dropdown. No plot → preference? → select dropdown. No card grid. |
| CoffinsStep | done | WizardLayout (centered-form) + Card + Badge + TextField + MenuItem + Pagination + Divider + Button | Wizard step 10 — coffin selection. 3-col card grid with category/price filters. "Most Popular" badge. Pagination. | | CoffinsStep | done | WizardLayout (centered-form) + Card + Badge + TextField + MenuItem + Pagination + Divider + Button | Wizard step 10 — coffin selection. 3-col card grid with category/price filters. "Most Popular" badge. Pagination. |
| CoffinDetailsStep | done | WizardLayout (centered-form) + Paper + RadioGroup + Divider + Button | Wizard step 11 — coffin customisation. Profile (image + specs) + 3 option sections (handles, lining, nameplate). Branded selected state. | | CoffinDetailsStep | done | WizardLayout (centered-form) + Paper + RadioGroup + Divider + Button | Wizard step 11 — coffin customisation. Profile (image + specs) + 3 option sections (handles, lining, nameplate). Branded selected state. |
| AdditionalServicesStep | done | WizardLayout (centered-form) + Paper + AddOnOption + RadioGroup + Collapse + Divider + Button | Wizard step 12 — additional services. Section 1: complimentary. Section 2: paid extras. Multi-level progressive disclosure. | | AdditionalServicesStep | done | WizardLayout (centered-form) + Paper + AddOnOption + RadioGroup + Collapse + Divider + Button | Wizard step 12 — additional services. Section 1: complimentary. Section 2: paid extras. Multi-level progressive disclosure. |

134
src/components/pages/CemeteryStep/CemeteryStep.stories.tsx
View File

@@ -1,7 +1,7 @@
import { useState } from 'react'; import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react';
import { CemeteryStep } from './CemeteryStep'; import { CemeteryStep } from './CemeteryStep';
import type { CemeteryStepValues, CemeteryStepErrors, Cemetery } from './CemeteryStep'; import type { CemeteryStepValues, CemeteryOption } from './CemeteryStep';
import { Navigation } from '../../organisms/Navigation'; import { Navigation } from '../../organisms/Navigation';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
@@ -34,31 +34,19 @@ const nav = (
/> />
); );
const sampleCemeteries: Cemetery[] = [ const sampleCemeteries: CemeteryOption[] = [
{ { value: 'rookwood', label: 'Rookwood Cemetery' },
id: 'rookwood', { value: 'northern-suburbs', label: 'Northern Suburbs Memorial Gardens' },
name: 'Rookwood Cemetery', { value: 'macquarie-park', label: 'Macquarie Park Cemetery' },
location: 'Lidcombe, NSW', { value: 'pinegrove', label: 'Pinegrove Memorial Park' },
price: 4500, { value: 'waverley', label: 'Waverley Cemetery' },
}, { value: 'botany', label: 'Botany Cemetery' },
{
id: 'northern-suburbs',
name: 'Northern Suburbs Memorial Gardens',
location: 'North Ryde, NSW',
price: 5200,
},
{
id: 'macquarie-park',
name: 'Macquarie Park Cemetery',
location: 'Macquarie Park, NSW',
price: 4800,
},
]; ];
const defaultValues: CemeteryStepValues = { const defaultValues: CemeteryStepValues = {
burialOwn: null, ownPlot: null,
burialCustom: null, hasPreference: null,
selectedCemeteryId: null, selectedCemetery: '',
}; };
// ─── Meta ──────────────────────────────────────────────────────────────────── // ─── Meta ────────────────────────────────────────────────────────────────────
@@ -75,36 +63,19 @@ const meta: Meta<typeof CemeteryStep> = {
export default meta; export default meta;
type Story = StoryObj<typeof CemeteryStep>; type Story = StoryObj<typeof CemeteryStep>;
// ─── Interactive (default) ────────────────────────────────────────────────── // ─── Default ─────────────────────────────────────────────────────────────────
/** Fully interactive — progressive disclosure flow */ /** Initial state — no selections made */
export const Default: Story = { export const Default: Story = {
render: () => { render: () => {
const [values, setValues] = useState<CemeteryStepValues>({ ...defaultValues }); const [values, setValues] = useState<CemeteryStepValues>({ ...defaultValues });
const [errors, setErrors] = useState<CemeteryStepErrors>({});
const handleContinue = () => {
const newErrors: CemeteryStepErrors = {};
if (!values.burialOwn) newErrors.burialOwn = 'Please let us know about the burial plot.';
if (values.burialOwn === 'no' && !values.burialCustom)
newErrors.burialCustom = "Please let us know if you'd like to choose a specific cemetery.";
if (values.burialOwn === 'no' && values.burialCustom === 'yes' && !values.selectedCemeteryId)
newErrors.selectedCemeteryId = 'Please choose a cemetery.';
setErrors(newErrors);
if (Object.keys(newErrors).length === 0) alert('Continue');
};
return ( return (
<CemeteryStep <CemeteryStep
values={values} values={values}
onChange={(v) => { onChange={setValues}
setValues(v); onContinue={() => alert('Continue')}
setErrors({});
}}
onContinue={handleContinue}
onBack={() => alert('Back')} onBack={() => alert('Back')}
onSaveAndExit={() => alert('Save')} onSaveAndExit={() => alert('Save')}
errors={errors}
cemeteries={sampleCemeteries} cemeteries={sampleCemeteries}
navigation={nav} navigation={nav}
/> />
@@ -112,14 +83,14 @@ export const Default: Story = {
}, },
}; };
// ─── Has existing plot ────────────────────────────────────────────────────── // ─── Owns a plot ─────────────────────────────────────────────────────────────
/** User already owns a burial plot — short confirmation */ /** User owns a plot — shows "tell us where" + dropdown */
export const HasExistingPlot: Story = { export const OwnsPlot: Story = {
render: () => { render: () => {
const [values, setValues] = useState<CemeteryStepValues>({ const [values, setValues] = useState<CemeteryStepValues>({
...defaultValues, ...defaultValues,
burialOwn: 'yes', ownPlot: 'yes',
}); });
return ( return (
<CemeteryStep <CemeteryStep
@@ -127,6 +98,7 @@ export const HasExistingPlot: Story = {
onChange={setValues} onChange={setValues}
onContinue={() => alert('Continue')} onContinue={() => alert('Continue')}
onBack={() => alert('Back')} onBack={() => alert('Back')}
onSaveAndExit={() => alert('Save')}
cemeteries={sampleCemeteries} cemeteries={sampleCemeteries}
navigation={nav} navigation={nav}
/> />
@@ -134,15 +106,15 @@ export const HasExistingPlot: Story = {
}, },
}; };
// ─── Provider arranges ────────────────────────────────────────────────────── // ─── No plot, has preference ─────────────────────────────────────────────────
/** User wants provider to arrange — no cemetery grid */ /** No plot, has a preference — shows both questions + dropdown */
export const ProviderArranges: Story = { export const HasPreference: Story = {
render: () => { render: () => {
const [values, setValues] = useState<CemeteryStepValues>({ const [values, setValues] = useState<CemeteryStepValues>({
...defaultValues, ...defaultValues,
burialOwn: 'no', ownPlot: 'no',
burialCustom: 'no', hasPreference: 'yes',
}); });
return ( return (
<CemeteryStep <CemeteryStep
@@ -150,6 +122,7 @@ export const ProviderArranges: Story = {
onChange={setValues} onChange={setValues}
onContinue={() => alert('Continue')} onContinue={() => alert('Continue')}
onBack={() => alert('Back')} onBack={() => alert('Back')}
onSaveAndExit={() => alert('Save')}
cemeteries={sampleCemeteries} cemeteries={sampleCemeteries}
navigation={nav} navigation={nav}
/> />
@@ -157,15 +130,15 @@ export const ProviderArranges: Story = {
}, },
}; };
// ─── Cemetery grid visible ────────────────────────────────────────────────── // ─── No plot, no preference ──────────────────────────────────────────────────
/** User wants to choose — cemetery grid revealed */ /** No plot, no preference — provider will arrange */
export const CemeteryGridVisible: Story = { export const NoPreference: Story = {
render: () => { render: () => {
const [values, setValues] = useState<CemeteryStepValues>({ const [values, setValues] = useState<CemeteryStepValues>({
...defaultValues, ...defaultValues,
burialOwn: 'no', ownPlot: 'no',
burialCustom: 'yes', hasPreference: 'no',
}); });
return ( return (
<CemeteryStep <CemeteryStep
@@ -173,6 +146,7 @@ export const CemeteryGridVisible: Story = {
onChange={setValues} onChange={setValues}
onContinue={() => alert('Continue')} onContinue={() => alert('Continue')}
onBack={() => alert('Back')} onBack={() => alert('Back')}
onSaveAndExit={() => alert('Save')}
cemeteries={sampleCemeteries} cemeteries={sampleCemeteries}
navigation={nav} navigation={nav}
/> />
@@ -180,30 +154,7 @@ export const CemeteryGridVisible: Story = {
}, },
}; };
// ─── Cemetery selected ────────────────────────────────────────────────────── // ─── Pre-planning ────────────────────────────────────────────────────────────
/** Cemetery selected */
export const CemeterySelected: Story = {
render: () => {
const [values, setValues] = useState<CemeteryStepValues>({
burialOwn: 'no',
burialCustom: 'yes',
selectedCemeteryId: 'rookwood',
});
return (
<CemeteryStep
values={values}
onChange={setValues}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')}
cemeteries={sampleCemeteries}
navigation={nav}
/>
);
},
};
// ─── Pre-planning ───────────────────────────────────────────────────────────
/** Pre-planning variant */ /** Pre-planning variant */
export const PrePlanning: Story = { export const PrePlanning: Story = {
@@ -222,22 +173,3 @@ export const PrePlanning: Story = {
); );
}, },
}; };
// ─── Validation errors ──────────────────────────────────────────────────────
/** All errors showing */
export const WithErrors: Story = {
render: () => {
const [values, setValues] = useState<CemeteryStepValues>({ ...defaultValues });
return (
<CemeteryStep
values={values}
onChange={setValues}
onContinue={() => {}}
errors={{ burialOwn: 'Please let us know about the burial plot.' }}
cemeteries={sampleCemeteries}
navigation={nav}
/>
);
},
};

262
src/components/pages/CemeteryStep/CemeteryStep.tsx
View File

@@ -1,13 +1,10 @@
import React from 'react'; import React from 'react';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import FormControl from '@mui/material/FormControl'; import TextField from '@mui/material/TextField';
import FormLabel from '@mui/material/FormLabel'; import MenuItem from '@mui/material/MenuItem';
import FormControlLabel from '@mui/material/FormControlLabel';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import type { SxProps, Theme } from '@mui/material/styles'; import type { SxProps, Theme } from '@mui/material/styles';
import { WizardLayout } from '../../templates/WizardLayout'; import { WizardLayout } from '../../templates/WizardLayout';
import { Card } from '../../atoms/Card'; import { ToggleButtonGroup } from '../../atoms/ToggleButtonGroup';
import { Collapse } from '../../atoms/Collapse'; import { Collapse } from '../../atoms/Collapse';
import { Typography } from '../../atoms/Typography'; import { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button'; import { Button } from '../../atoms/Button';
@@ -15,29 +12,27 @@ import { Divider } from '../../atoms/Divider';
// ─── Types ─────────────────────────────────────────────────────────────────── // ─── Types ───────────────────────────────────────────────────────────────────
/** A cemetery available for selection */ /** A cemetery option for the dropdown */
export interface Cemetery { export interface CemeteryOption {
id: string; value: string;
name: string; label: string;
location: string;
price?: number;
} }
/** Form values for the cemetery step */ /** Form values for the cemetery step */
export interface CemeteryStepValues { export interface CemeteryStepValues {
/** Does the family already own a burial plot? */ /** Does the family already own a burial plot? */
burialOwn: 'yes' | 'no' | null; ownPlot: 'yes' | 'no' | 'unsure' | null;
/** Would they like to choose a specific cemetery? (when burialOwn=no) */ /** Do they have a preference for a cemetery? (when ownPlot ≠ yes) */
burialCustom: 'yes' | 'no' | null; hasPreference: 'yes' | 'no' | 'unsure' | null;
/** Selected cemetery ID */ /** Selected cemetery ID */
selectedCemeteryId: string | null; selectedCemetery: string;
} }
/** Field-level error messages */ /** Field-level error messages */
export interface CemeteryStepErrors { export interface CemeteryStepErrors {
burialOwn?: string; ownPlot?: string;
burialCustom?: string; hasPreference?: string;
selectedCemeteryId?: string; selectedCemetery?: string;
} }
/** Props for the CemeteryStep page component */ /** Props for the CemeteryStep page component */
@@ -46,7 +41,7 @@ export interface CemeteryStepProps {
values: CemeteryStepValues; values: CemeteryStepValues;
/** Callback when any field value changes */ /** Callback when any field value changes */
onChange: (values: CemeteryStepValues) => void; onChange: (values: CemeteryStepValues) => void;
/** Callback when the Continue button is clicked */ /** Callback when Continue is clicked */
onContinue: () => void; onContinue: () => void;
/** Callback for back navigation */ /** Callback for back navigation */
onBack?: () => void; onBack?: () => void;
@@ -54,10 +49,10 @@ export interface CemeteryStepProps {
onSaveAndExit?: () => void; onSaveAndExit?: () => void;
/** Field-level validation errors */ /** Field-level validation errors */
errors?: CemeteryStepErrors; errors?: CemeteryStepErrors;
/** Whether the Continue button is in a loading state */ /** Whether Continue is loading */
loading?: boolean; loading?: boolean;
/** Available cemeteries */ /** Available cemeteries for the dropdown */
cemeteries: Cemetery[]; cemeteries: CemeteryOption[];
/** Whether this is a pre-planning flow */ /** Whether this is a pre-planning flow */
isPrePlanning?: boolean; isPrePlanning?: boolean;
/** Navigation bar */ /** Navigation bar */
@@ -81,12 +76,10 @@ export interface CemeteryStepProps {
* burial-type funerals (Service & Burial, Graveside, Burial Only). * burial-type funerals (Service & Burial, Graveside, Burial Only).
* *
* Progressive disclosure flow: * Progressive disclosure flow:
* 1. "Do you have a burial plot?" → Yes/No * 1. "Do you already own a burial plot?" → Yes / No / Not sure
* 2. If No: "Would you like to choose a specific cemetery?" → Yes/No * 2a. Yes → "Tell us where it's located" + cemetery dropdown
* 3. If Yes to #2: Cemetery card grid * 2b. No/Not sure → "Do you have a preference?" → Yes / No / Not sure
* * 3. Preference Yes → "Select your preferred cemetery" + dropdown
* If the user already owns a plot, the cemetery grid can be shown
* for confirmation (passed via showGridForExistingPlot).
* *
* Pure presentation component — props in, callbacks out. * Pure presentation component — props in, callbacks out.
* *
@@ -108,31 +101,28 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
hideHelpBar, hideHelpBar,
sx, sx,
}) => { }) => {
const showCustomQuestion = values.burialOwn === 'no'; const showPreferenceQuestion = values.ownPlot === 'no' || values.ownPlot === 'unsure';
const showCemeteryGrid = values.burialOwn === 'no' && values.burialCustom === 'yes'; const showCemeteryForOwnPlot = values.ownPlot === 'yes';
const showCemeteryForPreference = showPreferenceQuestion && values.hasPreference === 'yes';
const handleBurialOwnChange = (value: string) => { const handleOwnPlotChange = (value: string | null) => {
onChange({ onChange({
...values, ...values,
burialOwn: value as CemeteryStepValues['burialOwn'], ownPlot: (value ?? null) as CemeteryStepValues['ownPlot'],
// Reset dependent fields when parent changes // Reset dependent fields
burialCustom: null, hasPreference: null,
selectedCemeteryId: null, selectedCemetery: '',
}); });
}; };
const handleBurialCustomChange = (value: string) => { const handlePreferenceChange = (value: string | null) => {
onChange({ onChange({
...values, ...values,
burialCustom: value as CemeteryStepValues['burialCustom'], hasPreference: (value ?? null) as CemeteryStepValues['hasPreference'],
selectedCemeteryId: null, selectedCemetery: '',
}); });
}; };
const handleCemeterySelect = (id: string) => {
onChange({ ...values, selectedCemeteryId: id });
};
return ( return (
<WizardLayout <WizardLayout
variant="centered-form" variant="centered-form"
@@ -152,7 +142,7 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
<Typography variant="body1" color="text.secondary" sx={{ mb: 5 }}> <Typography variant="body1" color="text.secondary" sx={{ mb: 5 }}>
{isPrePlanning {isPrePlanning
? "If you haven't decided on a cemetery yet, the funeral provider can help with this later." ? 'If you haven\u2019t decided on a cemetery yet, the funeral provider can help with this later.'
: 'Choose where the burial will take place.'} : 'Choose where the burial will take place.'}
</Typography> </Typography>
@@ -165,115 +155,97 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
if (!loading) onContinue(); if (!loading) onContinue();
}} }}
> >
{/* ─── Burial plot question ─── */} {/* ─── Question 1: Own a burial plot? ─── */}
<FormControl component="fieldset" sx={{ mb: 3, display: 'block' }}> <Box sx={{ mb: 4 }}>
<FormLabel component="legend" sx={{ mb: 1 }}> <ToggleButtonGroup
Do you already have a burial plot? label="Do you already own a burial plot?"
</FormLabel> options={[
<RadioGroup { value: 'yes', label: 'Yes' },
value={values.burialOwn ?? ''} { value: 'no', label: 'No' },
onChange={(e) => handleBurialOwnChange(e.target.value)} { value: 'unsure', label: 'Not sure' },
> ]}
<FormControlLabel value="yes" control={<Radio />} label="Yes, we have a plot" /> value={values.ownPlot}
<FormControlLabel value="no" control={<Radio />} label="No, we need to find one" /> onChange={handleOwnPlotChange}
</RadioGroup> error={!!errors?.ownPlot}
{errors?.burialOwn && ( helperText={errors?.ownPlot}
<Typography fullWidth
variant="body2" />
sx={{ mt: 0.5, color: 'var(--fa-color-text-brand)' }} </Box>
role="alert"
>
{errors.burialOwn}
</Typography>
)}
</FormControl>
{/* ─── Custom cemetery question (progressive disclosure) ─── */} {/* ─── Own plot: tell us where ─── */}
<Collapse in={showCustomQuestion}> <Collapse in={showCemeteryForOwnPlot}>
<FormControl component="fieldset" sx={{ mb: 3, display: 'block' }}> <Box sx={{ mb: 4 }}>
<FormLabel component="legend" sx={{ mb: 1 }}> <Typography variant="h5" component="h2" sx={{ mb: 3 }}>
Would you like to choose a specific cemetery? Tell us where the burial plot is located
</FormLabel> </Typography>
<RadioGroup
value={values.burialCustom ?? ''} <TextField
onChange={(e) => handleBurialCustomChange(e.target.value)} select
label="Cemetery"
value={values.selectedCemetery}
onChange={(e) => onChange({ ...values, selectedCemetery: e.target.value })}
placeholder="Select a cemetery"
fullWidth
error={!!errors?.selectedCemetery}
helperText={errors?.selectedCemetery}
> >
<FormControlLabel value="yes" control={<Radio />} label="Yes, I'd like to choose" /> <MenuItem value="" disabled>
<FormControlLabel Select a cemetery
value="no" </MenuItem>
control={<Radio />} {cemeteries.map((c) => (
label="No, the funeral provider can arrange this" <MenuItem key={c.value} value={c.value}>
/> {c.label}
</RadioGroup> </MenuItem>
{errors?.burialCustom && ( ))}
<Typography </TextField>
variant="body2" </Box>
sx={{ mt: 0.5, color: 'var(--fa-color-text-brand)' }}
role="alert"
>
{errors.burialCustom}
</Typography>
)}
</FormControl>
</Collapse> </Collapse>
{/* ─── Cemetery card grid (progressive disclosure) ─── */} {/* ─── Question 2: Have a preference? (when no plot) ─── */}
<Collapse in={showCemeteryGrid}> <Collapse in={showPreferenceQuestion}>
<Box sx={{ mb: 3 }}> <Box sx={{ mb: 4 }}>
<Typography variant="h5" sx={{ mb: 2 }}> <ToggleButtonGroup
Available cemeteries label="Do you have a preference for a cemetery?"
options={[
{ value: 'yes', label: 'Yes' },
{ value: 'no', label: 'No' },
{ value: 'unsure', label: 'Not sure' },
]}
value={values.hasPreference}
onChange={handlePreferenceChange}
error={!!errors?.hasPreference}
helperText={errors?.hasPreference}
fullWidth
/>
</Box>
</Collapse>
{/* ─── Preference: select cemetery ─── */}
<Collapse in={showCemeteryForPreference}>
<Box sx={{ mb: 4 }}>
<Typography variant="h5" component="h2" sx={{ mb: 3 }}>
Select your preferred cemetery
</Typography> </Typography>
<Box <TextField
role="radiogroup" select
aria-label="Available cemeteries" label="Cemetery"
sx={{ value={values.selectedCemetery}
display: 'grid', onChange={(e) => onChange({ ...values, selectedCemetery: e.target.value })}
gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)' }, placeholder="Select a cemetery"
gap: 2, fullWidth
}} error={!!errors?.selectedCemetery}
helperText={errors?.selectedCemetery}
> >
{cemeteries.map((cemetery, index) => ( <MenuItem value="" disabled>
<Card Select a cemetery
key={cemetery.id} </MenuItem>
interactive {cemeteries.map((c) => (
selected={cemetery.id === values.selectedCemeteryId} <MenuItem key={c.value} value={c.value}>
onClick={() => handleCemeterySelect(cemetery.id)} {c.label}
role="radio" </MenuItem>
aria-checked={cemetery.id === values.selectedCemeteryId}
tabIndex={
values.selectedCemeteryId === null
? index === 0
? 0
: -1
: cemetery.id === values.selectedCemeteryId
? 0
: -1
}
sx={{ p: 3 }}
>
<Typography variant="h5">{cemetery.name}</Typography>
<Typography variant="body2" color="text.secondary">
{cemetery.location}
</Typography>
{cemetery.price != null && (
<Typography variant="h6" color="primary" sx={{ mt: 1 }}>
${cemetery.price.toLocaleString('en-AU')}
</Typography>
)}
</Card>
))} ))}
</Box> </TextField>
{errors?.selectedCemeteryId && (
<Typography
variant="body2"
sx={{ mt: 1, color: 'var(--fa-color-text-brand)' }}
role="alert"
>
{errors.selectedCemeteryId}
</Typography>
)}
</Box> </Box>
</Collapse> </Collapse>

2
src/components/pages/CemeteryStep/index.ts
View File

@@ -3,5 +3,5 @@ export type {
CemeteryStepProps, CemeteryStepProps,
CemeteryStepValues, CemeteryStepValues,
CemeteryStepErrors, CemeteryStepErrors,
Cemetery, CemeteryOption,
} from './CemeteryStep'; } from './CemeteryStep';