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:
2026-03-25 17:39:03 +11:00
parent c10a5e4e1c
commit f31e37c837
10 changed files with 843 additions and 3 deletions

View File

@@ -37,7 +37,9 @@ duplicates) and MUST update it after completing one.
| Component | Status | Composed of | Notes |
|-----------|--------|-------------|-------|
| FormField | planned | Input + Typography (label) + Typography (helper) | Standard form field with label and validation |
| PriceCard | planned | Card + Typography + Badge + Button | Service pricing display |
| ProviderCard | review | Card + Typography + Badge | Provider listing card. Verified: image + logo + "Trusted Partner" badge. Unverified: text-only. Capability badges (arbitrary label + colour). Footer with "Packages from $X >". 7 component tokens. |
| VenueCard | planned | Card + Typography + Badge | Venue listing card. Always has photo, location, capacity, price. Simpler than ProviderCard. |
| MapCard | planned | Card + Typography + Badge | Compact horizontal map popup card. Deferred until map integration. |
| ServiceOption | planned | Card + Typography + Chip + Icon | Selectable service item |
| SearchBar | planned | Input + Icon + Button | Search with submit |
| StepIndicator | planned | Typography + Badge + Divider | Multi-step flow progress |