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