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:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user