import type { Meta, StoryObj } from '@storybook/react-vite' import { Card } from './Card' const Body = ({ title = 'Item one', line = 'A line about the item.' }: { title?: string; line?: string }) => (

{title} {line}

) const meta = { title: 'Primitives/Card', component: Card, args: { fill: 'surface', className: 'w-[280px] p-3', children: }, argTypes: { fill: { control: 'inline-radio', options: ['surface', 'elevated', 'inset', 'none'] }, hover: { control: 'inline-radio', options: ['none', 'hairline', 'fill'] }, attention: { control: 'inline-radio', options: [undefined, 'accent', 'warning'] }, children: { control: false }, }, } satisfies Meta export default meta type Story = StoryObj /** On the page: the surface fill and the default hairline. */ export const Surface: Story = {} /** On something already filled — a column of cards: the elevated fill and the default hairline. */ export const Elevated: Story = { args: { fill: 'elevated', className: 'p-2' }, render: (args) => ( } /> ), } /** Inside something filled: the inset fill and the subtle hairline. */ export const Inset: Story = { args: { fill: 'inset' }, render: (args) => (

Text, then a card inside it.

), } /** A hairline alone: the subtle one, no fill. */ export const HairlineOnly: Story = { args: { fill: 'none' } } /** The whole card is a link: point at it and its hairline goes one step stronger. */ export const AsALink: Story = { args: { href: '#' } } /** Cards in a feed: each lights up when pointed at, with no hairline until then. One is selected, one asks to be looked at, one is urgent. */ export const InAFeed: Story = { parameters: { controls: { disable: true } }, render: () => (

{}} className="p-3"> {}} className="p-3"> {}} className="p-3"> {}} className="p-3">

), } /** Its menu is open: the pointer is on the menu, outside the card, and the card stays lit under it. */ export const HeldWhileItsMenuIsOpen: Story = { args: { hover: 'fill', quietUntilHover: true, hovered: true, onClick: () => {}, className: 'p-3' } } /** Being changed in place: the selected fill and the accent hairline. */ export const Active: Story = { args: { active: true, hover: 'fill' } } /** It stands for something that could not be read: the hairline is dashed. */ export const Unreadable: Story = { args: { unreadable: true, children: This can’t be shown here. }, } /** The four fills, each where it belongs. */ export const AllFills: Story = { parameters: { controls: { disable: true } }, render: () => (

), } /** `clip`: a strip that runs edge to edge is cut to the card's rounded corners. */ export const Clip: Story = { parameters: { controls: { disable: true } }, render: () => (

Huddle

What the card is about.

), }