diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index c2bf705..bdf5845 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -40,7 +40,7 @@ duplicates) and MUST update it after completing one. | 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 | 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 | +| ServiceOption | review | Card (interactive, selected) + Typography | Selectable service option for arrangement flow. Heading + optional price (right-aligned) + optional description. role="radio" + aria-checked. Disabled state with opacity token. Maps to Figma ListItemPurchaseOption. | | SearchBar | planned | Input + Icon + Button | Search with submit | | StepIndicator | planned | Typography + Badge + Divider | Multi-step flow progress | diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index 088f35e..611ddee 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -661,7 +661,46 @@ Each entry follows this structure: - **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer **Next steps:** -- User to review IconButton, Divider, Link in Storybook -- Build ServiceOption molecule (core arrangement flow interaction) -- Consider building Navigation organism (now that IconButton + Link are available) +- ~~User to review IconButton, Divider, Link in Storybook~~ ✓ Approved +- ~~Build ServiceOption molecule~~ ✓ Done + +### Session 2026-03-25n (continued) — ServiceOption molecule + +**Agent(s):** Claude Opus (via conversation) + +**Work completed:** +- Reviewed 2 Figma components: ListItemPurchaseOption (2349:39505) and ListItemAddItem (2350:40658) + - ListItemPurchaseOption: click-to-select card with 4 states (inactive, hover, active, active hover) + - ListItemAddItem: toggle with Switch — deferred as a future AddOnOption molecule +- Built ServiceOption molecule (`src/components/molecules/ServiceOption/ServiceOption.tsx`): + - Composes Card (interactive, selected) + Typography + - Heading row: name (h6) + optional price (h6, brand colour, right-aligned, nowrap) + - Optional description below (body2, text.secondary) + - Selected state via Card's built-in brand border + warm bg + - Disabled state with opacity token (--fa-opacity-disabled) + pointer-events: none + - role="radio" + aria-checked for proper single-select group semantics + - Uses card.padding.compact (16px) for content padding +- Created 7 stories: Default, Selected, ServiceTypeSelection (interactive radiogroup), + CoffinSelection (interactive 4-option), WithoutPrice, Disabled, EdgeCases +- No new tokens — ServiceOption reuses Card tokens (padding.compact, border.selected, etc.) + +**Decisions made:** +- ServiceOption uses role="radio" + aria-checked — correct for single-select groups within a radiogroup. Parent wraps in role="radiogroup". +- Price right-aligned in heading row — natural scanning pattern (name on left, cost on right, like a menu) +- No component-specific tokens needed — Card's existing tokens handle all visual states +- AddOnOption (ListItemAddItem with Switch) deferred — will compose Card + Switch when arrangement form organisms are built + +**Component status at end of session:** +- **Done (8):** Button, Typography, Input, Card, Badge, Chip, Switch, Radio +- **Review (3 atoms):** IconButton, Divider, Link +- **Review (3 molecules):** ProviderCard, VenueCard, ServiceOption +- **Planned (3 atoms):** Icon, Avatar, ColourToggle, Slider +- **Planned (3 molecules):** MapCard, SearchBar, StepIndicator, FormField +- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer + +**Next steps:** +- User to review ServiceOption in Storybook +- Build Navigation organism (IconButton + Link + Divider are now available) +- Build SearchBar molecule (Input + IconButton) +- Consider AddOnOption molecule (Card + Switch) when arrangement form is needed - Remaining P3s: InfoOutlinedIcon sizing in ProviderCard, image loading placeholder, accent bar 3px→4px