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:
@@ -496,6 +496,48 @@ Each entry follows this structure:
|
||||
- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
|
||||
|
||||
**Next steps:**
|
||||
- User to review Switch and Radio in Storybook
|
||||
- Begin PriceCard molecule
|
||||
- ~~User to review Switch and Radio in Storybook~~ ✓ Approved
|
||||
- ~~Begin PriceCard molecule~~ ✓ Replaced with ProviderCard (see below)
|
||||
- Address P2 audit issues in a future cleanup pass
|
||||
|
||||
### Session 2026-03-25l — ProviderCard molecule (first molecule)
|
||||
|
||||
**Agent(s):** Claude Opus (via conversation)
|
||||
|
||||
**Work completed:**
|
||||
- Reviewed 3 Figma designs: Provider Cards (5503:44422), Service Venue (2997:83018), Map Pin Card (5369:140263)
|
||||
- Captured business context: verified vs unverified providers, Parsons partner strategy, map + list layout
|
||||
- Replaced generic "PriceCard" in registry with 3 specific molecules: ProviderCard, VenueCard, MapCard
|
||||
- Saved business context to auto-memory (project_listing_cards.md)
|
||||
- Created plan via /plan mode — component API, card structure, token plan, story plan
|
||||
- Created providerCard component tokens (`tokens/component/providerCard.json`): image.height, logo.size, footer.background/paddingX/paddingY, content.padding/gap — 7 tokens
|
||||
- Built ProviderCard molecule (`src/components/molecules/ProviderCard/ProviderCard.tsx`):
|
||||
- Composes Card (interactive, padding="none") + Badge + Typography
|
||||
- Verified variant: hero image (CSS bg-image cover), logo overlay (48px circle, absolute positioned, overlaps content), "Trusted Partner" badge (filled brand), capability badge
|
||||
- Unverified variant: text-only, same content area + footer
|
||||
- Footer bar: warm brand.100 bg, "Packages from $X" + ChevronRight
|
||||
- Accessibility: aria-label on reviews, aria-hidden on decorative icons, alt text on logo
|
||||
- All values from token CSS variables, no hardcoded hex
|
||||
- Created 9 Storybook stories: Default, VerifiedProvider, UnverifiedProvider, ListLayout (mixed), CapabilityVariants, EdgeCases, Responsive, OnDifferentBackgrounds, InteractiveDemo
|
||||
- Preflight passed all 5 checks
|
||||
- Logged D026-D030 in decisions log
|
||||
|
||||
**Decisions made:**
|
||||
- D026: Molecules compose atoms via sx — no MUI theme overrides
|
||||
- D027: Image as URL string (CSS bg-image), logo as URL string (<img>)
|
||||
- D028: Logo 48px (not 75px Figma) for card width proportion
|
||||
- D029: Footer built in via startingPrice prop, not a slot
|
||||
- D030: verified is explicit boolean, not derived from imageUrl
|
||||
|
||||
**Component status at end of session:**
|
||||
- **Done (7):** Button, Typography, Input, Card, Badge, Chip, Switch, Radio
|
||||
- **Review (1 molecule):** ProviderCard
|
||||
- **Planned (7 atoms):** IconButton, Icon, Avatar, Divider, ColourToggle, Slider, Link
|
||||
- **Planned (5 molecules):** VenueCard, MapCard, ServiceOption, SearchBar, StepIndicator, FormField
|
||||
- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
|
||||
|
||||
**Next steps:**
|
||||
- User to review ProviderCard in Storybook — especially ListLayout story for verified/unverified alignment
|
||||
- Build VenueCard molecule (simpler — always has photo, location, capacity, price)
|
||||
- Consider MapCard as a deferred item until map integration
|
||||
- Address P2 audit issues in a future cleanup pass
|
||||
|
||||
Reference in New Issue
Block a user