Update registry and session log with final MiniCard/MapPin/MapPopup state
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:
@@ -28,7 +28,7 @@ duplicates) and MUST update it after completing one.
|
||||
| Card | done | elevated, outlined × default, compact, none padding × interactive × selected | card.borderRadius/padding/shadow/border/background, color.surface.raised/subtle/warm, color.border.default/brand, shadow.md/lg | Content container. Elevated (shadow) or outlined (border). Interactive adds hover bg fill + shadow lift. Selected adds brand border + warm bg. Three padding presets. |
|
||||
| Switch | done | bordered style × checked, unchecked, disabled | switch.track.width/height/borderRadius, switch.thumb.size, color.interactive.*, color.neutral.400 | Toggle for add-ons/options. Wraps MUI Switch. Bordered pill, brand.500 fill when active. From Parsons 1.0 Figma Style One. |
|
||||
| Radio | done | checked, unchecked, disabled | radio.size/dotSize, color.interactive.*, color.neutral.400 | Single-select option. Wraps MUI Radio. Brand.500 fill when selected. From Parsons 1.0 Figma. |
|
||||
| MapPin | done | pill (price label + nub), dot (no price) × verified, unverified × default, active | mapPin.height/paddingX/fontSize/borderRadius/dot.size/nub.size, color.brand.100-700, color.neutral.100-700 | Airbnb-style map marker. Verified = brand palette, unverified = neutral grey. Active inverts colours + scale-up. Pure CSS for map overlay use. role="button" + keyboard + focus ring. |
|
||||
| MapPin | done | name+price (two-line), name-only, price-only × verified, unverified × default, active | mapPin.paddingX/borderRadius/nub.size, color.brand.100-900, color.neutral.100-800 | Two-line label map marker: name (bold, truncated 180px) + "From $X" (centred, semibold). Name optional for price-only variant. Verified = brand palette, unverified = grey. Active inverts + scale. Pure CSS. role="button" + keyboard + focus ring. |
|
||||
| ColourToggle | planned | inactive, hover, active, locked × single, two-colour × desktop, mobile | | Circular colour swatch picker for products. Custom component. Deferred until product detail organisms. |
|
||||
| Slider | planned | single, range × desktop, mobile | | Price range filter. Wraps MUI Slider. Deferred until search/filtering molecules. |
|
||||
| Link | done | underline: hover/always/none × any MUI colour | color.text.brand (copper brand.600, 4.8:1), color.interactive.active | Navigation text link. Wraps MUI Link. Copper default, underline on hover, focus ring. |
|
||||
@@ -40,8 +40,8 @@ duplicates) and MUST update it after completing one.
|
||||
|
||||
| Component | Status | Composed of | Notes |
|
||||
|-----------|--------|-------------|-------|
|
||||
| MiniCard | done | Card + Typography + Badge | Compact vertical card for grids, recommendations, map popups. Image + title + optional price/badges/chips/meta (location, rating, capacity). 3 component tokens. Lighter than ProviderCard — no verified tiers, no logo overlay. Audit: 20/20. |
|
||||
| MapPopup | done | Paper + Typography + Badge + Link | Floating map popup anchored to MapPin. Compact provider/venue preview: image + name + price + meta + "View details" link. Downward nub + drop-shadow. Verified badge inside image. |
|
||||
| MiniCard | done | Card + Typography + Badge + Tooltip | Compact vertical card for grids, recommendations, map popups. Image + title + optional price/badges/chips/meta (location, rating, capacity). Verified = icon-only circle badge in image. Hierarchy: title → meta → price → badges → chips. Truncated title shows tooltip. 3 component tokens. Audit: 20/20. |
|
||||
| MapPopup | done | Paper + Typography + Tooltip | Floating map popup anchored to MapPin. Clickable card (onClick). Image + name (1 line, tooltip) + meta + price. Verified = icon-only circle badge in image (matches MiniCard). Hierarchy matches MiniCard. Nub + drop-shadow. 260px wide. |
|
||||
| FormField | planned | Input + Typography (label) + Typography (helper) | Standard form field with label and validation |
|
||||
| ProviderCard | done | 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 | done | 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. |
|
||||
|
||||
@@ -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
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user