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