Richie
4cafd84142
Copy of the Funeral Arranger design system components, theme, tokens, and Storybook config from the original Parsons project. Pre-upgrade baseline with React 18, MUI v5, Storybook 8. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import MuiLink from '@mui/material/Link';
|
|
import type { LinkProps as MuiLinkProps } from '@mui/material/Link';
|
|
|
|
// ─── Types ───────────────────────────────────────────────────────────────────
|
|
|
|
/** Props for the FA Link component */
|
|
export type LinkProps = MuiLinkProps;
|
|
|
|
// ─── Component ───────────────────────────────────────────────────────────────
|
|
|
|
/**
|
|
* Navigation text link for the FA design system.
|
|
*
|
|
* Inline or standalone text link with FA brand styling — copper colour
|
|
* (brand.600) for WCAG AA compliance on white backgrounds. Underline
|
|
* appears on hover by default.
|
|
*
|
|
* Wraps MUI Link with FA theme tokens. Uses `color.text.brand`
|
|
* (#B0610F, 4.8:1 contrast ratio on white).
|
|
*
|
|
* Usage:
|
|
* ```tsx
|
|
* <Link href="/faq">Frequently Asked Questions</Link>
|
|
* <Link href="/contact" color="text.secondary">Contact Us</Link>
|
|
* ```
|
|
*
|
|
* For button-styled links, use `Button` with `component="a"` and `href`.
|
|
* For navigation menu items, use Link with `underline="none"`.
|
|
*/
|
|
export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
|
|
return <MuiLink ref={ref} {...props} />;
|
|
});
|
|
|
|
Link.displayName = 'Link';
|
|
export default Link;
|