Add ProviderCard molecule — first molecule in design system
First molecule component. Listing card for funeral providers on the provider select screen (map + scrollable list layout). - Verified providers: hero image, 48px logo overlay, "Trusted Partner" badge, name, location, reviews, capability badge, footer with price - Unverified providers: text-only with same content alignment - 7 component tokens (image height, logo size, footer/content spacing) - Composes Card (interactive, padding="none") + Badge + Typography - Capability badges accept arbitrary label + colour (categories may change) - Footer bar with warm brand.100 bg, "Packages from $X >" - 9 Storybook stories including mixed list layout demo - Decisions D026-D030 logged Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -264,3 +264,17 @@ the correct token for any design property.
|
||||
|-----------|-----------|---------|-------------|
|
||||
| radio.size.default | 20px | Radio | Outer circle size |
|
||||
| radio.dotSize.default | 10px | Radio | Inner selected dot size |
|
||||
|
||||
### ProviderCard
|
||||
|
||||
`tokens/component/providerCard.json`
|
||||
|
||||
| Token path | Value / Reference | Used by | Description |
|
||||
|-----------|-----------|---------|-------------|
|
||||
| providerCard.image.height | 180px | ProviderCard | Hero image fixed height |
|
||||
| providerCard.logo.size | 48px | ProviderCard | Logo circle diameter |
|
||||
| providerCard.footer.background | → color.brand.100 (#F7ECDF) | ProviderCard | Warm beige footer bar |
|
||||
| providerCard.footer.paddingX | → spacing.4 (16px) | ProviderCard | Footer horizontal padding |
|
||||
| providerCard.footer.paddingY | → spacing.3 (12px) | ProviderCard | Footer vertical padding |
|
||||
| providerCard.content.padding | → spacing.4 (16px) | ProviderCard | Content area padding |
|
||||
| providerCard.content.gap | → spacing.2 (8px) | ProviderCard | Gap between content rows |
|
||||
|
||||
Reference in New Issue
Block a user