diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index 1eee4ad..a57afc2 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -28,6 +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. | | 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. | @@ -39,6 +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. | | 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. | diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index 11ca70e..27567d3 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -48,6 +48,19 @@ Each entry follows this structure: **Next steps:** - 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. +- **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 +- Chips in MiniCard rendered as soft default Badges (no interactive Chip atom) for visual simplicity + --- ### Session 2026-04-01 — FuneralFinder V4, HomePage V3/V4, Footer restyle