Polish FuneralFinderV3 — copy, spacing, defaults, label tweaks

- Section labels use text.secondary instead of brand-800
- Rename "Current Status" → "How Can We Help" (warmer, less programmatic)
- Revise copy: "A recent loss or one expected soon" (clarifies imminent vs pre-plan)
- Pre-planning: "Planning ahead for yourself or a loved one"
- Default selection: Immediate Need selected on load
- Fix spacing: remove minHeight from error containers so gap is consistent
- Add divider between location section and CTA
- Mobile: status cards already stack (xs: 1fr)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-26 19:47:01 +11:00
parent b15c96fa44
commit 0a309a0240

View File

@@ -52,12 +52,12 @@ const STATUS_OPTIONS: { key: Status; title: string; description: string }[] = [
{ {
key: 'immediate', key: 'immediate',
title: 'Immediate Need', title: 'Immediate Need',
description: 'For a recent or expected loss', description: 'A recent loss or one expected soon',
}, },
{ {
key: 'preplanning', key: 'preplanning',
title: 'Pre-planning', title: 'Pre-planning',
description: 'For yourself or a loved one', description: 'Planning ahead for yourself or a loved one',
}, },
]; ];
@@ -95,7 +95,7 @@ function SectionLabel({
variant="overline" variant="overline"
component="div" component="div"
id={id} id={id}
sx={{ color: 'var(--fa-color-brand-800, #6B3C13)' }} sx={{ color: 'text.secondary' }}
> >
{children} {children}
</Typography> </Typography>
@@ -273,7 +273,7 @@ export const FuneralFinderV3 = React.forwardRef<
const locationLabelId = `${id}-location`; const locationLabelId = `${id}-location`;
// ─── State ─────────────────────────────────────────────── // ─── State ───────────────────────────────────────────────
const [status, setStatus] = React.useState<Status | ''>(''); const [status, setStatus] = React.useState<Status | ''>('immediate');
const [funeralType, setFuneralType] = React.useState<FuneralType | ''>(''); const [funeralType, setFuneralType] = React.useState<FuneralType | ''>('');
const [location, setLocation] = React.useState(''); const [location, setLocation] = React.useState('');
const [errors, setErrors] = React.useState<{ const [errors, setErrors] = React.useState<{
@@ -402,9 +402,9 @@ export const FuneralFinderV3 = React.forwardRef<
<Divider /> <Divider />
{/* ── Current Status ──────────────────────────────────── */} {/* ── How can we help ─────────────────────────────────── */}
<Box ref={statusSectionRef}> <Box ref={statusSectionRef}>
<SectionLabel id={statusLabelId}>Current Status</SectionLabel> <SectionLabel id={statusLabelId}>How Can We Help</SectionLabel>
<Box <Box
role="radiogroup" role="radiogroup"
aria-labelledby={statusLabelId} aria-labelledby={statusLabelId}
@@ -430,17 +430,18 @@ export const FuneralFinderV3 = React.forwardRef<
/> />
))} ))}
</Box> </Box>
<Box <Box aria-live="polite" sx={{ textAlign: 'center' }}>
sx={{ minHeight: '1.5rem', mt: 1, textAlign: 'center' }}
aria-live="polite"
>
{errors.status && ( {errors.status && (
<Typography <Typography
variant="caption" variant="caption"
role="alert" role="alert"
sx={{ color: 'var(--fa-color-text-brand, #B0610F)' }} sx={{
color: 'var(--fa-color-text-brand, #B0610F)',
display: 'block',
mt: 1,
}}
> >
Please select your current situation Please select how we can help
</Typography> </Typography>
)} )}
</Box> </Box>
@@ -520,15 +521,16 @@ export const FuneralFinderV3 = React.forwardRef<
}} }}
/> />
</Box> </Box>
<Box <Box aria-live="polite">
sx={{ minHeight: '1.5rem', mt: 1 }}
aria-live="polite"
>
{errors.location && ( {errors.location && (
<Typography <Typography
variant="caption" variant="caption"
role="alert" role="alert"
sx={{ color: 'var(--fa-color-text-brand, #B0610F)' }} sx={{
color: 'var(--fa-color-text-brand, #B0610F)',
display: 'block',
mt: 1,
}}
> >
Please enter a suburb or postcode Please enter a suburb or postcode
</Typography> </Typography>
@@ -536,6 +538,8 @@ export const FuneralFinderV3 = React.forwardRef<
</Box> </Box>
</Box> </Box>
<Divider />
{/* ── CTA ─────────────────────────────────────────────── */} {/* ── CTA ─────────────────────────────────────────────── */}
<Box> <Box>
<Button <Button