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:
23
tokens/component/venueCard.json
Normal file
23
tokens/component/venueCard.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"venueCard": {
|
||||
"$description": "VenueCard molecule tokens — listing card for service venues on the venue select screen. Always has a photo, location, capacity, and price. Simpler than ProviderCard — no verification tiers or logo.",
|
||||
"image": {
|
||||
"$type": "dimension",
|
||||
"$description": "Hero image area dimensions.",
|
||||
"height": { "$value": "180px", "$description": "Fixed image height — matches ProviderCard for consistent list layout when both card types appear in search results" }
|
||||
},
|
||||
"content": {
|
||||
"$description": "Content area spacing.",
|
||||
"padding": {
|
||||
"$type": "dimension",
|
||||
"$value": "{spacing.3}",
|
||||
"$description": "12px content padding — matches ProviderCard for visual consistency"
|
||||
},
|
||||
"gap": {
|
||||
"$type": "dimension",
|
||||
"$value": "{spacing.1}",
|
||||
"$description": "4px vertical gap between content rows — tight for compact listing cards"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user