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

Update memory — ServiceOption molecule registered

Browse Source 
- component-registry: ServiceOption → review
- session-log: ServiceOption build, Figma patterns documented

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-25 20:36:23 +11:00
parent dfa599d567
commit 1ed8a026ef
2 changed files with 43 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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