From 7c9d71cc8465d5767f2a85dccc6fda8e6e0db05a Mon Sep 17 00:00:00 2001 From: Richie Date: Wed, 25 Mar 2026 19:58:51 +1100 Subject: [PATCH] =?UTF-8?q?Update=20memory=20files=20=E2=80=94=20VenueCard?= =?UTF-8?q?,=20P2=20fixes,=20ProviderCard=20audit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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) --- docs/memory/component-registry.md | 2 +- docs/memory/session-log.md | 54 +++++++++++++++++++++++++++++-- docs/memory/token-registry.md | 10 ++++++ 3 files changed, 62 insertions(+), 4 deletions(-) diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index 9b30e0f..778b586 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -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 | | 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. | | ServiceOption | planned | Card + Typography + Chip + Icon | Selectable service item | | SearchBar | planned | Input + Icon + Button | Search with submit | diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index ecad461..a8fc376 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -577,6 +577,54 @@ Each entry follows this structure: - **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 +- ~~Build VenueCard molecule~~ ✓ Done +- ~~Address P2 audit issues~~ ✓ Done +- ~~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` → `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 diff --git a/docs/memory/token-registry.md b/docs/memory/token-registry.md index 1e64dbb..d4af2ac 100644 --- a/docs/memory/token-registry.md +++ b/docs/memory/token-registry.md @@ -276,3 +276,13 @@ the correct token for any design property. | providerCard.logo.borderRadius | → borderRadius.md (8px) | ProviderCard | Rounded rectangle corners | | providerCard.content.padding | → spacing.3 (12px) | ProviderCard | Content area padding | | 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 |