richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update registry and session log with final MiniCard/MapPin/MapPopup state

Browse Source 
All three components iterated with user feedback and approved.
Registry updated with final APIs. Session log captures all decisions
from the iteration rounds.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-04-06 21:05:06 +10:00
parent 723cdf908a
commit eb26242ece
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/memory/session-log.md
View File

@@ -49,16 +49,20 @@ Each entry follows this structure:
- User has components to change/build — shifting to that work
**Work completed (continued):**
- **MiniCard molecule (new):** Compact vertical card for grids, recommendations, and map popups. Image + title + optional price/badges/chips/meta (location, rating, capacity). 3 component tokens (miniCard.image.height 120px, content.padding 12px, content.gap 4px). Audit: 20/20 after P2 fixes (aria-label on rating, aria-hidden on decorative icons).
- **MapPin atom (new):** Airbnb-style price-pill map markers. Two variants: pill (price label + downward nub) and dot (no price). Verified = brand palette (gold bg, copper text), unverified = neutral grey. Active state inverts colours + scale-up. 6 component tokens. Pure CSS for Mapbox/Google Maps overlay. role="button" + keyboard + focus ring.
- **MapPopup molecule (new):** Floating card for map pin click context. Paper with image + name + price + meta row + "View details" link + downward nub. Drop-shadow filter. Verified badge inside image. 260px fixed width.
- **MiniCard molecule (new + iterated):** Compact vertical card. Image + verified icon-only badge (copper circle, top-right) + title (h6, 2-line max with tooltip on truncation) + meta row + price + badges + chips. Hierarchy: title → meta → price → badges → chips. 3 component tokens. Audit: 20/20.
- **MapPin atom (new + redesigned):** Two-line label map marker: name (bold, truncated 180px) + "From $X" (centred, semibold 600). Name optional for price-only variant. Verified = brand palette, unverified = grey. Active inverts + scale. Padding bumped from 8px to 12px for readability. Pure CSS. role="button" + keyboard + focus ring.
- **MapPopup molecule (new + iterated):** Clickable floating card (onClick). Image + verified icon badge (matches MiniCard) + name (1-line, tooltip on truncation) + meta + price. Hierarchy matches MiniCard. No-image fallback shows inline verified icon + text. Nub + drop-shadow. 260px wide.
- **Component tokens:** miniCard.json and mapPin.json added to Style Dictionary, rebuilt CSS/JS/TS outputs (407 declarations total).
**Decisions made:**
- MiniCard uses `h6` for title (smaller than ProviderCard's `h5`), `caption` for meta, `body2` for price
- MapPin pill is 28px tall with 12px font — compact for map density
- MapPin dot is 12px — below 44px touch target but standard for map markers (map libraries add hit areas)
- MapPopup is 260px wide with 100px image — compact for map overlay context
- MiniCard verified badge is icon-only circle (not text chip) — compact, matches map popup
- MapPin redesigned from price-only pill to two-line name+price label — transparency and clarity
- MapPin price centred under name — left-aligned looked unbalanced (visually reviewed)
- MapPin price weight 600 (semibold) — 500 was too thin at 11px
- MapPin padding 12px (was 8px) — names were tight against edges
- MapPopup whole card clickable — removed "View details" link
- MapPopup name 1-line limit (was 2) with tooltip — tighter for map context
- Chips in MiniCard rendered as soft default Badges (no interactive Chip atom) for visual simplicity
---