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

2
docs/memory/component-registry.md
View File

@@ -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. | | 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. | | 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. | | 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 | | SearchBar | planned | Input + Icon + Button | Search with submit |
| StepIndicator | planned | Typography + Badge + Divider | Multi-step flow progress | | StepIndicator | planned | Typography + Badge + Divider | Multi-step flow progress |

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 - **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
**Next steps:** **Next steps:**
- User to review IconButton, Divider, Link in Storybook - ~~User to review IconButton, Divider, Link in Storybook~~ ✓ Approved
- Build ServiceOption molecule (core arrangement flow interaction) - ~~Build ServiceOption molecule~~ ✓ Done
- Consider building Navigation organism (now that IconButton + Link are available)
### 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 - Remaining P3s: InfoOutlinedIcon sizing in ProviderCard, image loading placeholder, accent bar 3px→4px