Add IconButton, Divider, and Link atom components

IconButton:
- Wraps MUI IconButton with FA theme (focus ring, brand hover colours)
- 3 sizes reusing Button height tokens: small 32px, medium 40px, large 48px
- 5 stories: Default, Sizes, Colours, States, CommonUseCases

Divider:
- Wraps MUI Divider with FA border token
- Horizontal/vertical, fullWidth/inset/middle variants, text support
- 6 stories: Default, Variants, Vertical, WithText, InContent, NavigationList

Link:
- Wraps MUI Link with FA brand colour (copper brand.600, 4.8:1 contrast)
- Underline on hover by default, focus-visible ring, fontWeight 500
- 7 stories: Default, UnderlineVariants, ColourVariants, Inline, Navigation,
  FooterLinks, OnDifferentBackgrounds

Theme: Added MuiIconButton, MuiDivider, MuiLink overrides

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-25 20:16:23 +11:00
parent 7c9d71cc84
commit 933dca3f09
10 changed files with 593 additions and 0 deletions

View File

@@ -679,6 +679,68 @@ export const theme = createTheme({
},
},
},
MuiIconButton: {
styleOverrides: {
root: {
borderRadius: parseInt(t.ButtonBorderRadiusDefault, 10),
transition: 'background-color 150ms ease-in-out, box-shadow 150ms ease-in-out',
'&:focus-visible': {
outline: `2px solid ${t.ColorInteractiveFocus}`,
outlineOffset: '2px',
},
},
sizeSmall: {
width: parseInt(t.ButtonHeightSm, 10),
height: parseInt(t.ButtonHeightSm, 10),
'& .MuiSvgIcon-root': { fontSize: t.ButtonIconSizeSm },
},
sizeMedium: {
width: parseInt(t.ButtonHeightMd, 10),
height: parseInt(t.ButtonHeightMd, 10),
'& .MuiSvgIcon-root': { fontSize: t.ButtonIconSizeMd },
},
sizeLarge: {
width: parseInt(t.ButtonHeightLg, 10),
height: parseInt(t.ButtonHeightLg, 10),
'& .MuiSvgIcon-root': { fontSize: t.ButtonIconSizeLg },
},
colorPrimary: {
color: t.ColorInteractiveDefault,
'&:hover': { backgroundColor: t.ColorBrand100 },
},
colorSecondary: {
color: t.ColorNeutral600,
'&:hover': { backgroundColor: t.ColorNeutral200 },
},
},
},
MuiDivider: {
styleOverrides: {
root: {
borderColor: t.ColorBorderDefault,
},
},
},
MuiLink: {
defaultProps: {
underline: 'hover',
},
styleOverrides: {
root: {
color: t.ColorTextBrand,
fontWeight: 500,
transition: 'color 150ms ease-in-out',
'&:hover': {
color: t.ColorInteractiveActive,
},
'&:focus-visible': {
outline: `2px solid ${t.ColorInteractiveFocus}`,
outlineOffset: '2px',
borderRadius: '2px',
},
},
},
},
MuiRadio: {
styleOverrides: {
root: {