Richie
74ee0b87da
- Add `selected` prop: brand border (warm gold) + warm background tint (brand.50) - Add hover background fill (neutral.50) for interactive cards - Add 3 new card tokens: border.selected, background.hover, background.selected - Add stories: Selected, OptionSelect (single-select), MultiSelect (toggle), OnDifferentBackgrounds (white vs grey surface comparison) - Informed by FA 1.0 Figma ListItemPurchaseOption pattern (node 2349:39505) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import MuiCard from '@mui/material/Card';
|
|
import type { CardProps as MuiCardProps } from '@mui/material/Card';
|
|
import CardContent from '@mui/material/CardContent';
|
|
|
|
// ─── Types ───────────────────────────────────────────────────────────────────
|
|
|
|
/** Props for the FA Card component */
|
|
export interface CardProps extends Omit<MuiCardProps, 'raised' | 'variant'> {
|
|
/** Visual style: "elevated" uses shadow, "outlined" uses border */
|
|
variant?: 'elevated' | 'outlined';
|
|
/** Adds hover background fill, shadow lift, and pointer cursor for clickable cards */
|
|
interactive?: boolean;
|
|
/** Highlights the card as selected — brand border + warm background tint */
|
|
selected?: boolean;
|
|
/** Padding preset: "default" (24px), "compact" (16px), "none" (no wrapper) */
|
|
padding?: 'default' | 'compact' | 'none';
|
|
/** Content to render inside the card */
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
// ─── Component ───────────────────────────────────────────────────────────────
|
|
|
|
/**
|
|
* Content container for the FA design system.
|
|
*
|
|
* Wraps MUI Card with FA brand tokens, two visual variants (elevated/outlined),
|
|
* optional hover interactivity, selected state, and padding presets.
|
|
*
|
|
* Variant mapping from design:
|
|
* - `elevated` (default) — shadow.md resting, white background
|
|
* - `outlined` — neutral border, no shadow, white background
|
|
*
|
|
* Use `interactive` for clickable cards (PriceCard, ServiceOption) —
|
|
* adds background fill on hover, shadow lift, and cursor pointer.
|
|
*
|
|
* Use `selected` for option-select patterns — applies brand border
|
|
* (warm gold) and warm background tint (brand.50).
|
|
*
|
|
* Use `padding="none"` when composing with CardMedia or custom layouts
|
|
* that need full-bleed content.
|
|
*/
|
|
export const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
|
(
|
|
{
|
|
variant = 'elevated',
|
|
interactive = false,
|
|
selected = false,
|
|
padding = 'default',
|
|
children,
|
|
sx,
|
|
...props
|
|
},
|
|
ref,
|
|
) => {
|
|
// Map FA variant names to MUI Card variant
|
|
const muiVariant = variant === 'outlined' ? 'outlined' : undefined;
|
|
|
|
return (
|
|
<MuiCard
|
|
ref={ref}
|
|
variant={muiVariant}
|
|
elevation={0}
|
|
sx={[
|
|
// Selected state: brand border + warm background
|
|
selected && {
|
|
borderColor: 'var(--fa-card-border-selected)',
|
|
borderWidth: '2px',
|
|
borderStyle: 'solid',
|
|
backgroundColor: 'var(--fa-card-background-selected)',
|
|
},
|
|
// Interactive: hover fill + shadow lift + pointer
|
|
interactive && {
|
|
cursor: 'pointer',
|
|
'&:hover': {
|
|
backgroundColor: selected
|
|
? 'var(--fa-card-background-selected)'
|
|
: 'var(--fa-card-background-hover)',
|
|
boxShadow: variant === 'elevated' ? 'var(--fa-card-shadow-hover)' : undefined,
|
|
},
|
|
},
|
|
// Focus-visible for keyboard accessibility on interactive cards
|
|
interactive && {
|
|
'&:focus-visible': {
|
|
outline: (theme: Record<string, any>) =>
|
|
`2px solid ${theme.palette.primary.main}`,
|
|
outlineOffset: '2px',
|
|
},
|
|
},
|
|
...(Array.isArray(sx) ? sx : [sx]),
|
|
]}
|
|
{...props}
|
|
>
|
|
{padding !== 'none' ? (
|
|
<CardContent
|
|
sx={{
|
|
p: padding === 'compact' ? 4 : 6,
|
|
'&:last-child': {
|
|
pb: padding === 'compact' ? 4 : 6,
|
|
},
|
|
}}
|
|
>
|
|
{children}
|
|
</CardContent>
|
|
) : (
|
|
children
|
|
)}
|
|
</MuiCard>
|
|
);
|
|
},
|
|
);
|
|
|
|
Card.displayName = 'Card';
|
|
export default Card;
|