Initial commit: FA Design System source files
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>
This commit is contained in:
36
src/components/atoms/Link/Link.tsx
Normal file
36
src/components/atoms/Link/Link.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user