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