Richie
933dca3f09
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>
41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
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;
|