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',
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user