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

@@ -0,0 +1,40 @@
import React from 'react';
import MuiIconButton from '@mui/material/IconButton';
import type { IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';
// ─── Types ───────────────────────────────────────────────────────────────────
/** Props for the FA IconButton component */
export interface IconButtonProps extends MuiIconButtonProps {}
// ─── Component ───────────────────────────────────────────────────────────────
/**
* Icon-only button for the FA design system.
*
* Square button containing a single icon — used for close buttons, menu
* toggles, toolbar actions, and anywhere a text label would be redundant.
* Wraps MUI IconButton with FA brand tokens and consistent sizing.
*
* Sizes use the same height scale as Button:
* - `small` — 32px (compact toolbars, card actions)
* - `medium` — 40px (default, general actions)
* - `large` — 48px (mobile CTAs, meets 44px touch target)
*
* **Accessibility**: Always provide an `aria-label` prop. Icon-only
* buttons have no visible text, so screen readers rely entirely on
* the aria-label to announce the action.
* ```tsx
* <IconButton aria-label="Close dialog">
* <CloseIcon />
* </IconButton>
* ```
*/
export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
(props, ref) => {
return <MuiIconButton ref={ref} {...props} />;
},
);
IconButton.displayName = 'IconButton';
export default IconButton;