Add CemeteryStep page (wizard step 9)
- Progressive disclosure: "Have a plot?" → "Choose cemetery?" → card grid - Dependent field resets (changing parent answer clears child selections) - Cemetery card grid with radiogroup pattern + roving tabindex - Pre-planning variant: softer subheading about provider arranging later - "Provider can arrange this" shortcut skips grid entirely - Grief-sensitive copy: "we need to find one" not "I don't have a plot" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
243
src/components/pages/CemeteryStep/CemeteryStep.stories.tsx
Normal file
243
src/components/pages/CemeteryStep/CemeteryStep.stories.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useState } from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { CemeteryStep } from './CemeteryStep';
|
||||
import type { CemeteryStepValues, CemeteryStepErrors, Cemetery } from './CemeteryStep';
|
||||
import { Navigation } from '../../organisms/Navigation';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||||
|
||||
const FALogo = () => (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Box
|
||||
component="img"
|
||||
src="/brandlogo/logo-full.svg"
|
||||
alt="Funeral Arranger"
|
||||
sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
|
||||
/>
|
||||
<Box
|
||||
component="img"
|
||||
src="/brandlogo/logo-short.svg"
|
||||
alt="Funeral Arranger"
|
||||
sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const nav = (
|
||||
<Navigation
|
||||
logo={<FALogo />}
|
||||
items={[
|
||||
{ label: 'FAQ', href: '/faq' },
|
||||
{ label: 'Contact Us', href: '/contact' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
const sampleCemeteries: Cemetery[] = [
|
||||
{
|
||||
id: 'rookwood',
|
||||
name: 'Rookwood Cemetery',
|
||||
location: 'Lidcombe, NSW',
|
||||
price: 4500,
|
||||
},
|
||||
{
|
||||
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 = {
|
||||
burialOwn: null,
|
||||
burialCustom: null,
|
||||
selectedCemeteryId: null,
|
||||
};
|
||||
|
||||
// ─── Meta ────────────────────────────────────────────────────────────────────
|
||||
|
||||
const meta: Meta<typeof CemeteryStep> = {
|
||||
title: 'Pages/CemeteryStep',
|
||||
component: CemeteryStep,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof CemeteryStep>;
|
||||
|
||||
// ─── Interactive (default) ──────────────────────────────────────────────────
|
||||
|
||||
/** Fully interactive — progressive disclosure flow */
|
||||
export const Default: Story = {
|
||||
render: () => {
|
||||
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 (
|
||||
<CemeteryStep
|
||||
values={values}
|
||||
onChange={(v) => {
|
||||
setValues(v);
|
||||
setErrors({});
|
||||
}}
|
||||
onContinue={handleContinue}
|
||||
onBack={() => alert('Back')}
|
||||
onSaveAndExit={() => alert('Save')}
|
||||
errors={errors}
|
||||
cemeteries={sampleCemeteries}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Has existing plot ──────────────────────────────────────────────────────
|
||||
|
||||
/** User already owns a burial plot — short confirmation */
|
||||
export const HasExistingPlot: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CemeteryStepValues>({
|
||||
...defaultValues,
|
||||
burialOwn: 'yes',
|
||||
});
|
||||
return (
|
||||
<CemeteryStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
cemeteries={sampleCemeteries}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Provider arranges ──────────────────────────────────────────────────────
|
||||
|
||||
/** User wants provider to arrange — no cemetery grid */
|
||||
export const ProviderArranges: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CemeteryStepValues>({
|
||||
...defaultValues,
|
||||
burialOwn: 'no',
|
||||
burialCustom: 'no',
|
||||
});
|
||||
return (
|
||||
<CemeteryStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
cemeteries={sampleCemeteries}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Cemetery grid visible ──────────────────────────────────────────────────
|
||||
|
||||
/** User wants to choose — cemetery grid revealed */
|
||||
export const CemeteryGridVisible: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CemeteryStepValues>({
|
||||
...defaultValues,
|
||||
burialOwn: 'no',
|
||||
burialCustom: 'yes',
|
||||
});
|
||||
return (
|
||||
<CemeteryStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
cemeteries={sampleCemeteries}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Cemetery selected ──────────────────────────────────────────────────────
|
||||
|
||||
/** 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 */
|
||||
export const PrePlanning: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CemeteryStepValues>({ ...defaultValues });
|
||||
return (
|
||||
<CemeteryStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
cemeteries={sampleCemeteries}
|
||||
isPrePlanning
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── 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}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user