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>
40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import MuiDivider from '@mui/material/Divider';
|
|
import type { DividerProps as MuiDividerProps } from '@mui/material/Divider';
|
|
|
|
// ─── Types ───────────────────────────────────────────────────────────────────
|
|
|
|
/** Props for the FA Divider component */
|
|
export type DividerProps = MuiDividerProps;
|
|
|
|
// ─── Component ───────────────────────────────────────────────────────────────
|
|
|
|
/**
|
|
* Visual separator for the FA design system.
|
|
*
|
|
* Thin line for separating content sections, navigation groups, or
|
|
* list items. Wraps MUI Divider with FA border tokens.
|
|
*
|
|
* Orientations:
|
|
* - `horizontal` (default) — full-width horizontal line
|
|
* - `vertical` — full-height vertical line (use inside flex containers)
|
|
*
|
|
* Variants:
|
|
* - `fullWidth` (default) — spans the full container
|
|
* - `inset` — indented from the left (for list item separators)
|
|
* - `middle` — indented from both sides
|
|
*
|
|
* Usage:
|
|
* ```tsx
|
|
* <Divider />
|
|
* <Divider orientation="vertical" flexItem />
|
|
* <Divider variant="inset" />
|
|
* ```
|
|
*/
|
|
export const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
|
|
return <MuiDivider ref={ref} {...props} />;
|
|
});
|
|
|
|
Divider.displayName = 'Divider';
|
|
export default Divider;
|