Batch 3: FilterPanel molecule + integration across 3 steps (D-C, D-F)
New molecule: - FilterPanel: Popover-based reusable filter trigger with active count badge, Clear all, Done actions. D-C: Popover for MVP. Step integrations: - ProvidersStep: inline Chip filter bar → FilterPanel Popover, search bar + filter button side-by-side in sticky header - VenueStep: same pattern, filter chips moved into Popover - CoffinsStep (D-F): grid-sidebar layout → wide-form (full-width 4-col grid), category + price selects moved into FilterPanel WizardLayout: - Added wide-form variant (maxWidth lg, single column) for card grids that benefit from full width - wide-form included in STEPPER_VARIANTS for progress bar Storybook: - FilterPanel stories: Default, WithActiveFilters, SelectFilters, CustomLabel Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,7 @@ import MenuItem from '@mui/material/MenuItem';
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import type { SxProps, Theme } from '@mui/material/styles';
|
||||
import { WizardLayout } from '../../templates/WizardLayout';
|
||||
import { FilterPanel } from '../../molecules/FilterPanel';
|
||||
import { Card } from '../../atoms/Card';
|
||||
import { Badge } from '../../atoms/Badge';
|
||||
import { Typography } from '../../atoms/Typography';
|
||||
@@ -142,223 +143,20 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
|
||||
sx,
|
||||
}) => {
|
||||
const displayCount = totalCount ?? coffins.length;
|
||||
const activeFilterCount =
|
||||
(values.categoryFilter !== 'all' ? 1 : 0) + (values.priceFilter !== 'all' ? 1 : 0);
|
||||
|
||||
const handleFilterChange = (field: 'categoryFilter' | 'priceFilter', value: string) => {
|
||||
onChange({ ...values, [field]: value, page: 1 });
|
||||
};
|
||||
|
||||
// ─── Sidebar content (filters) ───
|
||||
const sidebar = (
|
||||
<Box sx={{ py: { xs: 0, md: 2 } }}>
|
||||
<Typography variant="h5" sx={{ mb: 2, display: { xs: 'none', md: 'block' } }}>
|
||||
Filters
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<TextField
|
||||
select
|
||||
label="Categories"
|
||||
value={values.categoryFilter}
|
||||
onChange={(e) => handleFilterChange('categoryFilter', e.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
{categories.map((cat) => (
|
||||
<MenuItem key={cat.value} value={cat.value}>
|
||||
{cat.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
select
|
||||
label="Price range"
|
||||
value={values.priceFilter}
|
||||
onChange={(e) => handleFilterChange('priceFilter', e.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
{priceRanges.map((range) => (
|
||||
<MenuItem key={range.value} value={range.value}>
|
||||
{range.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
// ─── Main content (card grid) ───
|
||||
const mainContent = (
|
||||
<Box
|
||||
component="form"
|
||||
noValidate
|
||||
aria-busy={loading}
|
||||
onSubmit={(e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!loading) onContinue();
|
||||
}}
|
||||
>
|
||||
{/* Page heading */}
|
||||
<Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
|
||||
Choose a coffin
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
{isPrePlanning
|
||||
? 'Browse the range to get an idea of styles and pricing. You can change your selection later.'
|
||||
: 'Browse the range available with your selected provider. Use the filters to narrow your options.'}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 3, display: 'block' }}>
|
||||
Selecting a coffin within your package allowance won't change your total. Coffins
|
||||
outside the allowance will adjust the price.
|
||||
</Typography>
|
||||
|
||||
{/* Results count */}
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
sx={{ mb: 2, display: 'block' }}
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {displayCount} coffin{displayCount !== 1 ? 's' : ''}
|
||||
</Typography>
|
||||
|
||||
{/* Coffin card grid */}
|
||||
<Box
|
||||
role="radiogroup"
|
||||
aria-label="Available coffins"
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: {
|
||||
xs: '1fr',
|
||||
sm: 'repeat(2, 1fr)',
|
||||
lg: 'repeat(3, 1fr)',
|
||||
},
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
{coffins.map((coffin, index) => (
|
||||
<Card
|
||||
key={coffin.id}
|
||||
interactive
|
||||
selected={coffin.id === values.selectedCoffinId}
|
||||
padding="none"
|
||||
onClick={() => onChange({ ...values, selectedCoffinId: coffin.id })}
|
||||
role="radio"
|
||||
aria-checked={coffin.id === values.selectedCoffinId}
|
||||
tabIndex={
|
||||
values.selectedCoffinId === null
|
||||
? index === 0
|
||||
? 0
|
||||
: -1
|
||||
: coffin.id === values.selectedCoffinId
|
||||
? 0
|
||||
: -1
|
||||
}
|
||||
sx={{ overflow: 'hidden' }}
|
||||
>
|
||||
{/* Image */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height: 180,
|
||||
backgroundImage: `url(${coffin.imageUrl})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundColor: 'var(--fa-color-surface-subtle)',
|
||||
}}
|
||||
role="img"
|
||||
aria-label={`Photo of ${coffin.name}`}
|
||||
>
|
||||
{coffin.isPopular && (
|
||||
<Box sx={{ position: 'absolute', top: 8, left: 8 }}>
|
||||
<Badge variant="soft" color="brand" aria-label="Most popular choice">
|
||||
Most Popular
|
||||
</Badge>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ p: 2 }}>
|
||||
<Typography variant="h6" maxLines={2} sx={{ mb: 0.5 }}>
|
||||
{coffin.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
{coffin.category}
|
||||
</Typography>
|
||||
<Typography variant="h6" color="primary">
|
||||
${coffin.price.toLocaleString('en-AU')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{coffins.length === 0 && (
|
||||
<Box sx={{ py: 6, textAlign: 'center', gridColumn: '1 / -1' }}>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
|
||||
No coffins match your selected filters.
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Try adjusting the category or price range.
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Validation error */}
|
||||
{errors?.selectedCoffinId && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 2, color: 'var(--fa-color-text-brand)' }}
|
||||
role="alert"
|
||||
>
|
||||
{errors.selectedCoffinId}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
|
||||
<Pagination
|
||||
count={totalPages}
|
||||
page={values.page}
|
||||
onChange={(_, page) => onChange({ ...values, page })}
|
||||
color="primary"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Divider sx={{ my: 3 }} />
|
||||
|
||||
{/* CTAs */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexDirection: { xs: 'column-reverse', sm: 'row' },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
{onSaveAndExit ? (
|
||||
<Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
|
||||
Save and continue later
|
||||
</Button>
|
||||
) : (
|
||||
<Box />
|
||||
)}
|
||||
<Button type="submit" variant="contained" size="large" loading={loading}>
|
||||
Continue
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
const handleFilterClear = () => {
|
||||
onChange({ ...values, categoryFilter: 'all', priceFilter: 'all', page: 1 });
|
||||
};
|
||||
|
||||
return (
|
||||
<WizardLayout
|
||||
variant="grid-sidebar"
|
||||
variant="wide-form"
|
||||
navigation={navigation}
|
||||
progressStepper={progressStepper}
|
||||
runningTotal={runningTotal}
|
||||
@@ -367,9 +165,208 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
|
||||
onBack={onBack}
|
||||
hideHelpBar={hideHelpBar}
|
||||
sx={sx}
|
||||
secondaryPanel={mainContent}
|
||||
>
|
||||
{sidebar}
|
||||
<Box
|
||||
component="form"
|
||||
noValidate
|
||||
aria-busy={loading}
|
||||
onSubmit={(e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!loading) onContinue();
|
||||
}}
|
||||
>
|
||||
{/* Page heading */}
|
||||
<Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
|
||||
Choose a coffin
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
{isPrePlanning
|
||||
? 'Browse the range to get an idea of styles and pricing. You can change your selection later.'
|
||||
: 'Browse the range available with your selected provider. Use the filters to narrow your options.'}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mb: 3, display: 'block' }}>
|
||||
Selecting a coffin within your package allowance won't change your total. Coffins
|
||||
outside the allowance will adjust the price.
|
||||
</Typography>
|
||||
|
||||
{/* Filter button + results count */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
<FilterPanel activeCount={activeFilterCount} onClear={handleFilterClear} minWidth={300}>
|
||||
<TextField
|
||||
select
|
||||
label="Category"
|
||||
value={values.categoryFilter}
|
||||
onChange={(e) => handleFilterChange('categoryFilter', e.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
{categories.map((cat) => (
|
||||
<MenuItem key={cat.value} value={cat.value}>
|
||||
{cat.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
|
||||
<TextField
|
||||
select
|
||||
label="Price range"
|
||||
value={values.priceFilter}
|
||||
onChange={(e) => handleFilterChange('priceFilter', e.target.value)}
|
||||
fullWidth
|
||||
>
|
||||
{priceRanges.map((range) => (
|
||||
<MenuItem key={range.value} value={range.value}>
|
||||
{range.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</FilterPanel>
|
||||
|
||||
<Typography variant="caption" color="text.secondary" aria-live="polite">
|
||||
Showing {displayCount} coffin{displayCount !== 1 ? 's' : ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Coffin card grid — full width (D-F) */}
|
||||
<Box
|
||||
role="radiogroup"
|
||||
aria-label="Available coffins"
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: {
|
||||
xs: '1fr',
|
||||
sm: 'repeat(2, 1fr)',
|
||||
md: 'repeat(3, 1fr)',
|
||||
lg: 'repeat(4, 1fr)',
|
||||
},
|
||||
gap: 2,
|
||||
mb: 3,
|
||||
}}
|
||||
>
|
||||
{coffins.map((coffin, index) => (
|
||||
<Card
|
||||
key={coffin.id}
|
||||
interactive
|
||||
selected={coffin.id === values.selectedCoffinId}
|
||||
padding="none"
|
||||
onClick={() => onChange({ ...values, selectedCoffinId: coffin.id })}
|
||||
role="radio"
|
||||
aria-checked={coffin.id === values.selectedCoffinId}
|
||||
tabIndex={
|
||||
values.selectedCoffinId === null
|
||||
? index === 0
|
||||
? 0
|
||||
: -1
|
||||
: coffin.id === values.selectedCoffinId
|
||||
? 0
|
||||
: -1
|
||||
}
|
||||
sx={{ overflow: 'hidden' }}
|
||||
>
|
||||
{/* Image */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height: 180,
|
||||
backgroundImage: `url(${coffin.imageUrl})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundColor: 'var(--fa-color-surface-subtle)',
|
||||
}}
|
||||
role="img"
|
||||
aria-label={`Photo of ${coffin.name}`}
|
||||
>
|
||||
{coffin.isPopular && (
|
||||
<Box sx={{ position: 'absolute', top: 8, left: 8 }}>
|
||||
<Badge variant="soft" color="brand" aria-label="Most popular choice">
|
||||
Most Popular
|
||||
</Badge>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ p: 2 }}>
|
||||
<Typography variant="h6" maxLines={2} sx={{ mb: 0.5 }}>
|
||||
{coffin.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
|
||||
{coffin.category}
|
||||
</Typography>
|
||||
<Typography variant="h6" color="primary">
|
||||
${coffin.price.toLocaleString('en-AU')}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{coffins.length === 0 && (
|
||||
<Box sx={{ py: 6, textAlign: 'center', gridColumn: '1 / -1' }}>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
|
||||
No coffins match your selected filters.
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Try adjusting the category or price range.
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Validation error */}
|
||||
{errors?.selectedCoffinId && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mb: 2, color: 'var(--fa-color-text-brand)' }}
|
||||
role="alert"
|
||||
>
|
||||
{errors.selectedCoffinId}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
|
||||
<Pagination
|
||||
count={totalPages}
|
||||
page={values.page}
|
||||
onChange={(_, page) => onChange({ ...values, page })}
|
||||
color="primary"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Divider sx={{ my: 3 }} />
|
||||
|
||||
{/* CTAs */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexDirection: { xs: 'column-reverse', sm: 'row' },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
{onSaveAndExit ? (
|
||||
<Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
|
||||
Save and continue later
|
||||
</Button>
|
||||
) : (
|
||||
<Box />
|
||||
)}
|
||||
<Button type="submit" variant="contained" size="large" loading={loading}>
|
||||
Continue
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</WizardLayout>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user