Beatrice Dellacà
f1c7e245aa
All checks were successful
continuous-integration/drone/push Build is passing
99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Chip } from './Chip';
|
|
|
|
const meta = {
|
|
title: 'Components/Chip',
|
|
component: Chip,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Compact badge/chip component with solid or outlined style. `tone` accepts a Tailwind color token (for example `cyan-700`) and resolves it to the correct border/background/text color at runtime.',
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
variant: {
|
|
description: 'Chip visual style.',
|
|
options: ['solid', 'outlined'],
|
|
control: 'inline-radio',
|
|
table: { type: { summary: "'solid' | 'outlined'" } },
|
|
},
|
|
tone: {
|
|
description:
|
|
'Tailwind color token (format: `<color>-<shade>`, for example `cyan-700`, `indigo-600`, `rose-500`).',
|
|
control: 'text',
|
|
table: { type: { summary: 'string' } },
|
|
},
|
|
as: {
|
|
description:
|
|
"Root tag or component to render (for example `'span'`, `'a'`, `'button'`).",
|
|
control: false,
|
|
table: { type: { summary: 'ElementType' } },
|
|
},
|
|
className: {
|
|
description: 'Extra CSS classes for the root element.',
|
|
control: 'text',
|
|
table: { type: { summary: 'string' } },
|
|
},
|
|
children: {
|
|
description: 'Text or React node rendered inside the chip.',
|
|
control: 'text',
|
|
table: { type: { summary: 'ReactNode' } },
|
|
},
|
|
},
|
|
args: {
|
|
children: 'Published',
|
|
variant: 'solid',
|
|
},
|
|
} satisfies Meta<typeof Chip>;
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const SolidDefault: Story = {};
|
|
|
|
export const OutlinedIndigo: Story = {
|
|
args: {
|
|
variant: 'outlined',
|
|
tone: 'indigo-700',
|
|
children: 'Draft',
|
|
},
|
|
};
|
|
|
|
export const OutlinedCyan: Story = {
|
|
args: {
|
|
variant: 'outlined',
|
|
tone: 'cyan-700',
|
|
children: 'Archived',
|
|
},
|
|
};
|
|
|
|
export const ToneMatrix: Story = {
|
|
render: () => (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Chip variant="solid">Default</Chip>
|
|
<Chip variant="solid" tone="indigo-700">
|
|
Indigo
|
|
</Chip>
|
|
<Chip variant="solid" tone="cyan-700">
|
|
Cyan
|
|
</Chip>
|
|
<Chip variant="solid" tone="rose-600">
|
|
Rose
|
|
</Chip>
|
|
<Chip variant="outlined">Default</Chip>
|
|
<Chip variant="outlined" tone="indigo-700">
|
|
Indigo
|
|
</Chip>
|
|
<Chip variant="outlined" tone="cyan-700">
|
|
Cyan
|
|
</Chip>
|
|
<Chip variant="outlined" tone="rose-600">
|
|
Rose
|
|
</Chip>
|
|
</div>
|
|
),
|
|
};
|