Add VenueStep page (wizard step 7) + VenueCard selected prop

- Consolidated 3 baseline steps (venue select + venue detail + venue services) into 1
- CSS Grid venue card layout (1 col mobile, 2 col desktop) with radiogroup ARIA
- VenueCard extended with selected, role, aria-checked, tabIndex props
- Progressive disclosure: venue detail panel + service toggles after selection
- Service toggles via AddOnOption: photo presentation, livestream, recording
- Recording depends on streaming (auto-disabled when streaming off)
- Search input + filter chips for venue filtering
- Results count with aria-live, validation error with role="alert"
- Pre-planning variant with softer copy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-29 14:53:36 +11:00
parent 2004fe10c0
commit c28f8a2f29
4 changed files with 720 additions and 1 deletions

View File

@@ -20,8 +20,14 @@ export interface VenueCardProps {
capacity?: number;
/** Venue hire price in dollars */
price?: number;
/** Whether this card is the selected venue (brand border + warm bg) */
selected?: boolean;
/** Click handler — entire card is clickable */
onClick?: () => void;
/** HTML/ARIA passthrough for radiogroup patterns */
role?: string;
'aria-checked'?: boolean;
tabIndex?: number;
/** MUI sx prop for style overrides */
sx?: SxProps<Theme>;
}
@@ -57,13 +63,32 @@ const CONTENT_GAP = 'var(--fa-venue-card-content-gap)';
* ```
*/
export const VenueCard = React.forwardRef<HTMLDivElement, VenueCardProps>(
({ name, imageUrl, location, capacity, price, onClick, sx }, ref) => {
(
{
name,
imageUrl,
location,
capacity,
price,
selected = false,
onClick,
role,
'aria-checked': ariaChecked,
tabIndex,
sx,
},
ref,
) => {
return (
<Card
ref={ref}
interactive
selected={selected}
padding="none"
onClick={onClick}
role={role}
aria-checked={ariaChecked}
tabIndex={tabIndex}
sx={[
{
overflow: 'hidden',