Add VenueCard molecule — venue listing card for service venue select screen

- 3 component tokens (image.height, content.padding, content.gap)
- Composes Card (interactive) + Typography, consistent with ProviderCard patterns
- Hero image with role="img" aria-label for screen readers
- Meta row: location (pin icon) + capacity with "guests" suffix for clarity
- Price with "From" qualifier for transparency (split typography like ProviderCard)
- 6 Storybook stories: Default, ListLayout, EdgeCases, Responsive, OnDifferentBackgrounds, InteractiveDemo
- Critique score: 33/40 (Good) — P2 fixes applied (capacity label, price context, image a11y)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-25 19:51:53 +11:00
parent 891ded2fdb
commit 9323b52376
6 changed files with 475 additions and 0 deletions

View File

@@ -83,6 +83,9 @@ export const SwitchTrackWidth = "44px"; // Track width — slightly narrower tha
export const SwitchTrackHeight = "24px"; // Track height
export const SwitchTrackBorderRadius = "9999px"; // Pill shape
export const SwitchThumbSize = "18px"; // Thumb diameter — sits inside the track with 3px inset
export const VenueCardImageHeight = "180px"; // Fixed image height — matches ProviderCard for consistent list layout when both card types appear in search results
export const VenueCardContentPadding = "12px"; // 12px content padding — matches ProviderCard for visual consistency
export const VenueCardContentGap = "4px"; // 4px vertical gap between content rows — tight for compact listing cards
export const ColorBrand50 = "#fef9f5"; // Lightest warm tint — warm section backgrounds
export const ColorBrand100 = "#f7ecdf"; // Light warm — hover backgrounds, subtle fills
export const ColorBrand200 = "#ebdac8"; // Warm light — secondary backgrounds, divider tones