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:
39
src/components/atoms/Divider/Divider.tsx
Normal file
39
src/components/atoms/Divider/Divider.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user