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:
40
src/components/atoms/IconButton/IconButton.tsx
Normal file
40
src/components/atoms/IconButton/IconButton.tsx
Normal 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;
|
||||
Reference in New Issue
Block a user