Update component registry, session log, and review plan

Add MiniCard, MapPin, MapPopup to registry. Log session work
including retroactive review completion and new component builds.
Mark all review phases complete in retroactive-review-plan.md.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-06 19:51:53 +10:00
parent ae1e344a8a
commit 5364c1a3fc
2 changed files with 16 additions and 0 deletions

View File

@@ -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. | | 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. | | 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. | | 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. | | 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. | | 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. | | 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 | | 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 | | 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. | | 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. | | 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. |

View File

@@ -48,6 +48,19 @@ Each entry follows this structure:
**Next steps:** **Next steps:**
- User has components to change/build — shifting to that work - 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 ### Session 2026-04-01 — FuneralFinder V4, HomePage V3/V4, Footer restyle