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

Add Switch and Radio atom components

Browse Source 
Switch:
- Wraps MUI Switch with FA brand tokens
- Bordered pill track (Figma Style One), brand.500 fill when active
- 4 component tokens: track width/height/borderRadius, thumb size
- Stories include interactive service add-ons demo

Radio:
- Wraps MUI Radio with FA brand tokens
- Brand.500 fill when selected, neutral.400 unchecked
- 2 component tokens: outer size, dot size
- Stories include card selection and payment method patterns

Also:
- Added ColourToggle and Slider to component registry (deferred)
- Updated token registry and session log

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-25 17:04:37 +11:00
parent b2349d6c78
commit c10a5e4e1c
14 changed files with 529 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -456,6 +456,46 @@ Each entry follows this structure:
- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
**Next steps:**
- User to review Chip in Storybook
- ~~User to review Chip in Storybook~~ ✓ Approved
- ~~Consider running /audit or /critique on completed atoms to establish baseline scores~~ ✓ Done
- Begin PriceCard molecule (depends on Card + Badge + Typography + Button + Chip)
- Consider running /audit or /critique on completed atoms to establish baseline scores
### Session 2026-03-25k — Audit, P1 fixes, Switch + Radio atoms
**Agent(s):** Claude Opus (via conversation)
**Work completed:**
- Ran /audit on all 5 completed atoms (Button, Typography, Input, Card, Badge)
- Average score: 18/20 (Excellent)
- 2 P1 issues identified and fixed, 7 P2s documented, 5 P3s noted
- Fixed P1: Button loading state now announces to screen readers (aria-busy + visually-hidden text)
- Fixed P1: Card interactive now has tabIndex={0} and role="button" for keyboard operability
- Fixed P2: Card Record<string, any> → Theme type for type safety
- Reviewed Parsons 1.0 Figma "Toggles" board (node 2322:42538) — identified 4 new atoms: Switch, Radio, ColourToggle, Slider
- Added all 4 to component registry (ColourToggle and Slider deferred)
- Created switch component tokens (`tokens/component/switch.json`): track width/height/borderRadius, thumb size — 4 tokens
- Created radio component tokens (`tokens/component/radio.json`): size, dotSize — 2 tokens
- Updated MUI theme with MuiSwitch overrides: bordered pill track, brand.500 active fill, focus-visible ring
- Updated MUI theme with MuiRadio overrides: neutral.400 unchecked, brand.500 checked, hover states
- Created Switch component — thin MUI wrapper with forwardRef
- Created Radio component — thin MUI wrapper with forwardRef
- Created Switch stories (4): Default, States, ServiceAddOns (interactive add-on toggle demo), WithLabels
- Created Radio stories (5): Default, States, RadioGroup, CardSelection (interactive card + radio demo), PaymentMethod
- Preflight passed all 5 checks
**Decisions made:**
- Switch implements Figma "Style One" (bordered pill) only — other styles deferred as variants if needed
- Switch/Radio are ultra-thin wrappers — all styling via MUI theme overrides, no component-level sx
- ColourToggle and Slider deferred until their consuming organisms are built
**Component status at end of session:**
- **Done (5):** Button, Typography, Input, Card, Badge
- **Review (3):** Chip, Switch, Radio
- **Planned (6 atoms):** IconButton, Icon, Avatar, Divider, ColourToggle, Slider, Link
- **Planned (5 molecules):** FormField, PriceCard, ServiceOption, SearchBar, StepIndicator
- **Planned (5 organisms):** ServiceSelector, PricingTable, ArrangementForm, Navigation, Footer
**Next steps:**
- User to review Switch and Radio in Storybook
- Begin PriceCard molecule
- Address P2 audit issues in a future cleanup pass