Update memory files — VenueCard, P2 fixes, ProviderCard audit
- component-registry: VenueCard → review status - token-registry: Add venueCard tokens (3) - session-log: Session 25n — VenueCard build, P2 fixes, ProviderCard audit Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -38,7 +38,7 @@ duplicates) and MUST update it after completing one.
|
|||||||
|-----------|--------|-------------|-------|
|
|-----------|--------|-------------|-------|
|
||||||
| FormField | planned | Input + Typography (label) + Typography (helper) | Standard form field with label and validation |
|
| FormField | planned | Input + Typography (label) + Typography (helper) | Standard form field with label and validation |
|
||||||
| ProviderCard | review | Card + Typography + Badge + Tooltip | Provider listing card. Verified: image + logo (64px rounded rect) + "Verified" badge. Unverified: text-only with top accent bar. Capability badges with info icon + tooltip. Price split typography. No footer. 4 component tokens. |
|
| ProviderCard | review | Card + Typography + Badge + Tooltip | Provider listing card. Verified: image + logo (64px rounded rect) + "Verified" badge. Unverified: text-only with top accent bar. Capability badges with info icon + tooltip. Price split typography. No footer. 4 component tokens. |
|
||||||
| VenueCard | planned | Card + Typography + Badge | Venue listing card. Always has photo, location, capacity, price. Simpler than ProviderCard. |
|
| VenueCard | review | Card + Typography | Venue listing card. Always has photo + location + capacity ("X guests") + price ("From $X"). No verification tiers, no logo, no badges. 3 component tokens. Critique: 33/40. |
|
||||||
| MapCard | planned | Card + Typography + Badge | Compact horizontal map popup card. Deferred until map integration. |
|
| MapCard | planned | Card + Typography + Badge | Compact horizontal map popup card. Deferred until map integration. |
|
||||||
| ServiceOption | planned | Card + Typography + Chip + Icon | Selectable service item |
|
| ServiceOption | planned | Card + Typography + Chip + Icon | Selectable service item |
|
||||||
| SearchBar | planned | Input + Icon + Button | Search with submit |
|
| SearchBar | planned | Input + Icon + Button | Search with submit |
|
||||||
|
|||||||
@@ -577,6 +577,54 @@ Each entry follows this structure:
|
|||||||
- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
|
- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
|
||||||
|
|
||||||
**Next steps:**
|
**Next steps:**
|
||||||
- Build VenueCard molecule (simpler — always has photo, location, capacity, price)
|
- ~~Build VenueCard molecule~~ ✓ Done
|
||||||
- Consider MapCard as a deferred item until map integration
|
- ~~Address P2 audit issues~~ ✓ Done
|
||||||
- Address P2 audit issues in a future cleanup pass
|
- ~~Audit ProviderCard v2~~ ✓ Done (17/20, P2s fixed)
|
||||||
|
|
||||||
|
### Session 2026-03-25n — VenueCard molecule, P2 fixes, ProviderCard audit
|
||||||
|
|
||||||
|
**Agent(s):** Claude Opus (via conversation)
|
||||||
|
|
||||||
|
**Work completed:**
|
||||||
|
- Reviewed Figma venue card design (node 2997:83018) — photo + name + location + capacity + price
|
||||||
|
- Created venueCard component tokens (`tokens/component/venueCard.json`): image.height (180px), content.padding (spacing.3), content.gap (spacing.1) — 3 tokens
|
||||||
|
- Built VenueCard molecule (`src/components/molecules/VenueCard/VenueCard.tsx`):
|
||||||
|
- Composes Card (interactive, padding="none") + Typography
|
||||||
|
- Hero image with `role="img"` + aria-label for screen readers
|
||||||
|
- Meta row: location (pin icon) + capacity with "guests" suffix for clarity
|
||||||
|
- Price with "From" qualifier (split typography like ProviderCard)
|
||||||
|
- No verification tiers, no logo, no badges — simpler than ProviderCard
|
||||||
|
- Created 6 Storybook stories: Default, ListLayout, EdgeCases, Responsive, OnDifferentBackgrounds, InteractiveDemo
|
||||||
|
- Ran /critique on VenueCard: 33/40 (Good). Applied P2 fixes before commit:
|
||||||
|
- Capacity: bare number → "X guests" for visible context
|
||||||
|
- Price: bare "$900" → "From $900" for transparency
|
||||||
|
- Image: added `role="img"` + `aria-label` for screen readers
|
||||||
|
- Fixed 6 P2 audit issues across atom components:
|
||||||
|
- Input: `Record<string, any>` → `Theme` type on boxShadow accessor
|
||||||
|
- Button: documented aria-label requirement for icon-only usage
|
||||||
|
- Badge: documented aria-label for icon-only badges
|
||||||
|
- Switch: strengthened a11y docs with FormControlLabel example
|
||||||
|
- Radio: strengthened a11y docs with RadioGroup + FormControlLabel example
|
||||||
|
- Chip: documented aria-label for icon-only deletable chips
|
||||||
|
- Ran /audit on ProviderCard v2: 17/20 (Good). Fixed 3 P2s:
|
||||||
|
- Hero image: added `role="img"` + `aria-label` for screen readers
|
||||||
|
- Logo shadow: hardcoded rgba → `var(--fa-shadow-sm)`
|
||||||
|
- Logo border: hardcoded white → `var(--fa-color-white)`
|
||||||
|
|
||||||
|
**Decisions made:**
|
||||||
|
- VenueCard follows same token structure as ProviderCard (image.height, content.padding, content.gap) for visual consistency in list views
|
||||||
|
- Capacity shows "X guests" suffix — bare number was confusing in critique
|
||||||
|
- Price shows "From $X" — matches ProviderCard's "Packages from" pattern for transparency
|
||||||
|
|
||||||
|
**Component status at end of session:**
|
||||||
|
- **Done (8):** Button, Typography, Input, Card, Badge, Chip, Switch, Radio
|
||||||
|
- **Review (2 molecules):** ProviderCard (v2, audit 17/20), VenueCard (critique 33/40)
|
||||||
|
- **Planned (6 atoms):** IconButton, Icon, Avatar, Divider, ColourToggle, Slider, Link
|
||||||
|
- **Planned (4 molecules):** MapCard, ServiceOption, SearchBar, StepIndicator, FormField
|
||||||
|
- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
|
||||||
|
|
||||||
|
**Next steps:**
|
||||||
|
- User to review VenueCard in Storybook
|
||||||
|
- Build next molecule (ServiceOption — selectable card for arrangement items) or next atoms (IconButton, Avatar, Divider, Link)
|
||||||
|
- Consider MapCard as deferred until map integration
|
||||||
|
- Remaining P3s: InfoOutlinedIcon sizing in ProviderCard, image loading placeholder, accent bar 3px→4px
|
||||||
|
|||||||
@@ -276,3 +276,13 @@ the correct token for any design property.
|
|||||||
| providerCard.logo.borderRadius | → borderRadius.md (8px) | ProviderCard | Rounded rectangle corners |
|
| providerCard.logo.borderRadius | → borderRadius.md (8px) | ProviderCard | Rounded rectangle corners |
|
||||||
| providerCard.content.padding | → spacing.3 (12px) | ProviderCard | Content area padding |
|
| providerCard.content.padding | → spacing.3 (12px) | ProviderCard | Content area padding |
|
||||||
| providerCard.content.gap | → spacing.1 (4px) | ProviderCard | Gap between content rows |
|
| providerCard.content.gap | → spacing.1 (4px) | ProviderCard | Gap between content rows |
|
||||||
|
|
||||||
|
### VenueCard
|
||||||
|
|
||||||
|
`tokens/component/venueCard.json`
|
||||||
|
|
||||||
|
| Token path | Value / Reference | Used by | Description |
|
||||||
|
|-----------|-----------|---------|-------------|
|
||||||
|
| venueCard.image.height | 180px | VenueCard | Hero image fixed height — matches ProviderCard for list consistency |
|
||||||
|
| venueCard.content.padding | → spacing.3 (12px) | VenueCard | Content area padding |
|
||||||
|
| venueCard.content.gap | → spacing.1 (4px) | VenueCard | Gap between content rows |
|
||||||
|
|||||||
Reference in New Issue
Block a user