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:
2026-03-25 18:28:28 +11:00
parent 811736dbb9
commit 891ded2fdb
9 changed files with 160 additions and 101 deletions

View File

@@ -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