Update memory — IconButton, Divider, Link atoms registered
- component-registry: 3 atoms moved from planned → review - session-log: Session 25n continued — atoms batch build Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -17,20 +17,20 @@ duplicates) and MUST update it after completing one.
|
|||||||
| Component | Status | Variants | Tokens used | Notes |
|
| Component | Status | Variants | Tokens used | Notes |
|
||||||
|-----------|--------|----------|-------------|-------|
|
|-----------|--------|----------|-------------|-------|
|
||||||
| Button | done | contained, soft, outlined, text × xs, small, medium, large × primary, secondary + loading, underline, fullWidth | button.height/paddingX/paddingY/fontSize/iconSize/iconGap/borderRadius, color.interactive.*, color.brand.100-300, color.neutral.200-700 | Primary interactive element. Merges Text Button from Figma. Soft variant = Figma's Secondary/Brand & Secondary/Grey. |
|
| Button | done | contained, soft, outlined, text × xs, small, medium, large × primary, secondary + loading, underline, fullWidth | button.height/paddingX/paddingY/fontSize/iconSize/iconGap/borderRadius, color.interactive.*, color.brand.100-300, color.neutral.200-700 | Primary interactive element. Merges Text Button from Figma. Soft variant = Figma's Secondary/Brand & Secondary/Grey. |
|
||||||
| IconButton | planned | contained, soft, outlined, text × small, medium, large | Reuses Button tokens | Icon-only button (close, menu, actions). Wrap MUI IconButton with FA theme. Build when Navigation/modals are needed. |
|
| IconButton | review | default, primary, secondary, error × small, medium, large | Reuses button.height/iconSize tokens, color.interactive.*, color.neutral.* | Icon-only button (close, menu, actions). Wraps MUI IconButton. Rounded rect, brand hover, focus ring. |
|
||||||
| Typography | done | displayHero, display1-3, displaySm, h1-h6, bodyLg, body1, body2, bodyXs, labelLg, label, labelSm, caption, captionSm, overline, overlineSm + maxLines, gutterBottom | typography.* (all semantic typography tokens), fontFamily.body, fontFamily.display | Text display system. Thin MUI wrapper with maxLines truncation. |
|
| Typography | done | displayHero, display1-3, displaySm, h1-h6, bodyLg, body1, body2, bodyXs, labelLg, label, labelSm, caption, captionSm, overline, overlineSm + maxLines, gutterBottom | typography.* (all semantic typography tokens), fontFamily.body, fontFamily.display | Text display system. Thin MUI wrapper with maxLines truncation. |
|
||||||
| Input | done | medium, small × default, hover, focus, error, success, disabled + startIcon, endIcon, required, multiline | input.height/paddingX/paddingY/fontSize/borderRadius/gap/iconSize, color.neutral.300-400, color.brand.500, color.feedback.error/success, color.text.secondary | External label pattern, branded focus ring, two sizes aligned with Button. Adds startIcon/endIcon and success state beyond Figma. |
|
| Input | done | medium, small × default, hover, focus, error, success, disabled + startIcon, endIcon, required, multiline | input.height/paddingX/paddingY/fontSize/borderRadius/gap/iconSize, color.neutral.300-400, color.brand.500, color.feedback.error/success, color.text.secondary | External label pattern, branded focus ring, two sizes aligned with Button. Adds startIcon/endIcon and success state beyond Figma. |
|
||||||
| Badge | review | soft, filled × default, brand, success, warning, error, info × small, medium + icon | badge.height/paddingX/fontSize/iconSize/iconGap/borderRadius, color.feedback.*, color.brand.200/700 | Status indicator pill. Soft (tonal) or filled (solid). 6 colours, 2 sizes, optional leading icon. |
|
| Badge | review | soft, filled × default, brand, success, warning, error, info × small, medium + icon | badge.height/paddingX/fontSize/iconSize/iconGap/borderRadius, color.feedback.*, color.brand.200/700 | Status indicator pill. Soft (tonal) or filled (solid). 6 colours, 2 sizes, optional leading icon. |
|
||||||
| Icon | planned | various sizes | | Icon wrapper component |
|
| Icon | planned | various sizes | | Icon wrapper component |
|
||||||
| Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation |
|
| Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation |
|
||||||
| Divider | planned | horizontal, vertical | | Visual separator |
|
| Divider | review | horizontal, vertical × fullWidth, inset, middle + text, flexItem | color.border.default (via palette.divider) | Visual separator. Wraps MUI Divider. Supports text children and orientation. |
|
||||||
| Chip | review | filled, outlined × small, medium × clickable, deletable, selected × default, primary | chip.height/paddingX/fontSize/iconSize/deleteIconSize/iconGap/borderRadius, color.neutral.200-700, color.brand.200-700 | Interactive tag. Wraps MUI Chip with FA tokens. Selected state promotes to brand colour. Filled uses soft tonal bg (like Badge). |
|
| Chip | review | filled, outlined × small, medium × clickable, deletable, selected × default, primary | chip.height/paddingX/fontSize/iconSize/deleteIconSize/iconGap/borderRadius, color.neutral.200-700, color.brand.200-700 | Interactive tag. Wraps MUI Chip with FA tokens. Selected state promotes to brand colour. Filled uses soft tonal bg (like Badge). |
|
||||||
| 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 | review | 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 | review | 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 | review | 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 | review | 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. |
|
||||||
| 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 | planned | default, subtle | | Navigation text |
|
| Link | review | 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. |
|
||||||
|
|
||||||
## Molecules
|
## Molecules
|
||||||
|
|
||||||
|
|||||||
@@ -624,7 +624,44 @@ 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 VenueCard in Storybook
|
- ~~User to review VenueCard in Storybook~~ ✓ Approved
|
||||||
- Build next molecule (ServiceOption — selectable card for arrangement items) or next atoms (IconButton, Avatar, Divider, Link)
|
- ~~Build next atoms (IconButton, Divider, Link)~~ ✓ Done
|
||||||
- Consider MapCard as deferred until map integration
|
|
||||||
|
### Session 2026-03-25n (continued) — IconButton, Divider, Link atoms
|
||||||
|
|
||||||
|
**Agent(s):** Claude Opus (via conversation)
|
||||||
|
|
||||||
|
**Work completed:**
|
||||||
|
- Built IconButton atom — wraps MUI IconButton with FA theme overrides:
|
||||||
|
- 3 sizes reusing Button height tokens (sm 32px, md 40px, lg 48px)
|
||||||
|
- Rounded rect shape (borderRadius.md), brand hover colours, focus ring
|
||||||
|
- 4 colour options: default, primary, secondary, error
|
||||||
|
- 5 stories including CommonUseCases (card toolbar, dialog close, nav toggle)
|
||||||
|
- Built Divider atom — wraps MUI Divider with FA border token:
|
||||||
|
- Horizontal/vertical orientation, fullWidth/inset/middle variants
|
||||||
|
- Text children support (MUI built-in)
|
||||||
|
- 6 stories including InContent and NavigationList patterns
|
||||||
|
- Built Link atom — wraps MUI Link with FA brand tokens:
|
||||||
|
- Copper colour (brand.600, 4.8:1 contrast) by default
|
||||||
|
- Underline on hover, focus-visible ring, fontWeight 500
|
||||||
|
- 7 stories including Inline (body text), Navigation, FooterLinks
|
||||||
|
- Added MuiIconButton, MuiDivider, MuiLink overrides to theme
|
||||||
|
|
||||||
|
**Decisions made:**
|
||||||
|
- IconButton uses rounded rect (borderRadius.md) not circle — consistent with Button. Circle can be achieved with sx if needed.
|
||||||
|
- Link defaults to underline="hover" — always-underlined links feel heavy in FA's clean aesthetic, but the underline is important for discoverability so it appears on hover.
|
||||||
|
- No new component tokens — IconButton reuses Button tokens, Divider uses palette.divider, Link uses palette colours.
|
||||||
|
|
||||||
|
**Component status at end of session:**
|
||||||
|
- **Done (8):** Button, Typography, Input, Card, Badge, Chip, Switch, Radio
|
||||||
|
- **Review (3 atoms):** IconButton, Divider, Link
|
||||||
|
- **Review (2 molecules):** ProviderCard (v2, audit 17/20), VenueCard (critique 33/40)
|
||||||
|
- **Planned (3 atoms):** Icon, Avatar, ColourToggle, Slider
|
||||||
|
- **Planned (4 molecules):** MapCard, ServiceOption, SearchBar, StepIndicator, FormField
|
||||||
|
- **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)
|
||||||
- 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
|
||||||
|
|||||||
Reference in New Issue
Block a user