Refine ProviderCard v2 — logo, price, badges, footer, unverified treatment
- Logo: circle → 64px rounded rectangle (8px radius), positioned fully inside image area with white border + shadow - Footer removed — redundant since whole card is clickable and price is already in content area - Price: split "Packages from" (body2) + price (h6/500wt) for lighter ecommerce feel, replaces blocky labelLg/700 - Verified badge bumped to medium size for visibility - Capability badge: medium size, trailing info icon + capabilityDescription tooltip prop for plain-language definitions on hover - Unverified cards: 3px top accent bar, list on neutral.50 background - Caption/CaptionSm weight: 400 → 500 system-wide (extends D019) - Meta row: body2 → caption size for clearer tertiary hierarchy Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -537,7 +537,46 @@ Each entry follows this structure:
|
||||
- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
|
||||
|
||||
**Next steps:**
|
||||
- User to review ProviderCard in Storybook — especially ListLayout story for verified/unverified alignment
|
||||
- ~~User to review ProviderCard in Storybook~~ ✓ Feedback received, iterated in session 25m
|
||||
|
||||
### Session 2026-03-25m — ProviderCard v2 refinements from user feedback
|
||||
|
||||
**Agent(s):** Claude Opus (via conversation)
|
||||
|
||||
**Work completed:**
|
||||
- Iterated on ProviderCard based on 5 feedback items from user review
|
||||
- **Logo**: circle → 64px rounded rectangle (8px radius, `borderRadius.md`). Positioned fully inside image area (absolute, bottom-left) with white border + shadow. Eliminates dead space — name sits directly below image.
|
||||
- **Footer removed**: "View packages >" bar was redundant (whole card is clickable, price already in content). Removed 3 footer tokens (`footer.background`, `.paddingX`, `.paddingY`).
|
||||
- **Price typography**: Split into "Packages from" (body2, 14px, secondary) + price (h6, 16px, weight 500, primary). Lighter, streamlined ecommerce feel vs old blocky labelLg/700.
|
||||
- **Verified badge**: Bumped from `size="small"` to `size="medium"` for visibility.
|
||||
- **Capability badge**: Bumped to `size="medium"`. Added trailing `InfoOutlinedIcon` and new `capabilityDescription` prop — wraps badge in MUI Tooltip on hover/focus for plain-language definitions of industry jargon.
|
||||
- **Unverified card differentiation**: 3px `borderTop` (neutral.200) as visual anchor. ListLayout story now on neutral.50 background.
|
||||
- **Caption weight fix (system-wide)**: Caption and CaptionSm bumped from fontWeight 400 (Regular) → 500 (Medium) in semantic typography tokens. Aligns with D019 — user found Regular too light for Montserrat.
|
||||
- **Meta row**: Location/reviews dropped from body2 (14px) → caption (12px) with 14px icons for clearer tertiary hierarchy.
|
||||
- Updated all stories with `capabilityDescription` tooltips for 3 capability types
|
||||
- Preflight passed all 5 checks
|
||||
|
||||
**Decisions made:**
|
||||
- Logo positioned fully inside image (no overlap into content) — tried flex-row overlap approach first but it "dug into" the photo and pushed the name sideways
|
||||
- Footer removal: card's interactive hover + price in content are sufficient affordance
|
||||
- Caption weight 500: extends D019 (body weight = Medium) to all Montserrat text variants. Only display (Noto Serif SC) stays at 400 per D018.
|
||||
- Info icon for capability badges: trailing position (after label), `cursor: help` when tooltip active
|
||||
|
||||
**Token changes:**
|
||||
- `providerCard.logo.size`: 56px → 64px
|
||||
- `providerCard.logo.borderRadius`: new, → `{borderRadius.md}` (8px)
|
||||
- `providerCard.footer.*`: 3 tokens removed (footer eliminated)
|
||||
- `typography.caption.fontWeight`: `{fontWeight.regular}` → `{fontWeight.medium}`
|
||||
- `typography.captionSm.fontWeight`: `{fontWeight.regular}` → `{fontWeight.medium}`
|
||||
|
||||
**Component status at end of session:**
|
||||
- **Done (8):** Button, Typography, Input, Card, Badge, Chip, Switch, Radio
|
||||
- **Review (1 molecule):** ProviderCard (v2, user approved direction)
|
||||
- **Planned (6 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:**
|
||||
- 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