This commit is contained in:
@@ -3,85 +3,85 @@ import { PlusIcon } from '@heroicons/react/24/solid';
|
||||
import { Button } from './Button';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Button',
|
||||
component: Button,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Polymorphic button component: renders a native `<button>` or a React Router `<Link>` when `to` is provided.',
|
||||
},
|
||||
title: 'Components/Button',
|
||||
component: Button,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Polymorphic button component: renders a native `<button>` or a React Router `<Link>` when `to` is provided.',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
label: {
|
||||
description: 'Visible button label text.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
argTypes: {
|
||||
label: {
|
||||
description: 'Visible button label text.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
type: {
|
||||
description: 'Base visual style.',
|
||||
options: ['solid', 'outlined', 'noborder'],
|
||||
control: 'inline-radio',
|
||||
table: { type: { summary: "'solid' | 'outlined' | 'noborder'" } },
|
||||
},
|
||||
variant: {
|
||||
description:
|
||||
'Color variant. If omitted: `primary` for `solid`, `secondary` for the other types.',
|
||||
options: ['primary', 'secondary', 'important'],
|
||||
control: 'inline-radio',
|
||||
table: { type: { summary: "'primary' | 'secondary' | 'important'" } },
|
||||
},
|
||||
size: {
|
||||
description: 'Button size.',
|
||||
options: ['sm', 'md', 'lg', 'full'],
|
||||
control: 'inline-radio',
|
||||
table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
|
||||
},
|
||||
to: {
|
||||
description: 'Navigation path. When set, the component renders a `<Link>`.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
htmlType: {
|
||||
description: 'HTML button type used when rendering a native `<button>`.',
|
||||
options: ['button', 'submit', 'reset'],
|
||||
control: 'inline-radio',
|
||||
table: { type: { summary: "'button' | 'submit' | 'reset'" } },
|
||||
},
|
||||
disabled: {
|
||||
description: 'Disables interaction and hover/click states.',
|
||||
control: 'boolean',
|
||||
table: { type: { summary: 'boolean' } },
|
||||
},
|
||||
icon: {
|
||||
description: 'Optional icon component (for example Heroicons).',
|
||||
control: false,
|
||||
table: { type: { summary: 'ElementType' } },
|
||||
},
|
||||
ariaLabel: {
|
||||
description: 'Accessible label. Falls back to `label` when not provided.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
className: {
|
||||
description: 'Extra CSS classes for the root element.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
onClick: {
|
||||
description: 'Click handler callback.',
|
||||
action: 'clicked',
|
||||
table: { type: { summary: 'MouseEventHandler<HTMLElement>' } },
|
||||
},
|
||||
},
|
||||
type: {
|
||||
description: 'Base visual style.',
|
||||
options: ['solid', 'outlined', 'noborder'],
|
||||
control: 'inline-radio',
|
||||
table: { type: { summary: "'solid' | 'outlined' | 'noborder'" } },
|
||||
args: {
|
||||
type: 'solid',
|
||||
variant: 'primary',
|
||||
size: 'md',
|
||||
label: 'Save',
|
||||
},
|
||||
variant: {
|
||||
description:
|
||||
'Color variant. If omitted: `primary` for `solid`, `secondary` for the other types.',
|
||||
options: ['primary', 'secondary', 'important'],
|
||||
control: 'inline-radio',
|
||||
table: { type: { summary: "'primary' | 'secondary' | 'important'" } },
|
||||
},
|
||||
size: {
|
||||
description: 'Button size.',
|
||||
options: ['sm', 'md', 'lg', 'full'],
|
||||
control: 'inline-radio',
|
||||
table: { type: { summary: "'sm' | 'md' | 'lg' | 'full'" } },
|
||||
},
|
||||
to: {
|
||||
description: 'Navigation path. When set, the component renders a `<Link>`.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
htmlType: {
|
||||
description: 'HTML button type used when rendering a native `<button>`.',
|
||||
options: ['button', 'submit', 'reset'],
|
||||
control: 'inline-radio',
|
||||
table: { type: { summary: "'button' | 'submit' | 'reset'" } },
|
||||
},
|
||||
disabled: {
|
||||
description: 'Disables interaction and hover/click states.',
|
||||
control: 'boolean',
|
||||
table: { type: { summary: 'boolean' } },
|
||||
},
|
||||
icon: {
|
||||
description: 'Optional icon component (for example Heroicons).',
|
||||
control: false,
|
||||
table: { type: { summary: 'ElementType' } },
|
||||
},
|
||||
ariaLabel: {
|
||||
description: 'Accessible label. Falls back to `label` when not provided.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
className: {
|
||||
description: 'Extra CSS classes for the root element.',
|
||||
control: 'text',
|
||||
table: { type: { summary: 'string' } },
|
||||
},
|
||||
onClick: {
|
||||
description: 'Click handler callback.',
|
||||
action: 'clicked',
|
||||
table: { type: { summary: 'MouseEventHandler<HTMLElement>' } },
|
||||
},
|
||||
},
|
||||
args: {
|
||||
type: 'solid',
|
||||
variant: 'primary',
|
||||
size: 'md',
|
||||
label: 'Save',
|
||||
},
|
||||
} satisfies Meta<typeof Button>;
|
||||
|
||||
export default meta;
|
||||
@@ -90,49 +90,49 @@ type Story = StoryObj<typeof meta>;
|
||||
export const SolidPrimary: Story = {};
|
||||
|
||||
export const SolidImportant: Story = {
|
||||
args: {
|
||||
type: 'solid',
|
||||
variant: 'important',
|
||||
label: 'Delete',
|
||||
},
|
||||
args: {
|
||||
type: 'solid',
|
||||
variant: 'important',
|
||||
label: 'Delete',
|
||||
},
|
||||
};
|
||||
|
||||
export const OutlinedSecondary: Story = {
|
||||
args: {
|
||||
type: 'outlined',
|
||||
variant: 'secondary',
|
||||
label: 'Cancel',
|
||||
},
|
||||
args: {
|
||||
type: 'outlined',
|
||||
variant: 'secondary',
|
||||
label: 'Cancel',
|
||||
},
|
||||
};
|
||||
|
||||
export const IconOnly: Story = {
|
||||
args: {
|
||||
icon: PlusIcon,
|
||||
label: undefined,
|
||||
ariaLabel: 'Add item',
|
||||
},
|
||||
args: {
|
||||
icon: PlusIcon,
|
||||
label: undefined,
|
||||
ariaLabel: 'Add item',
|
||||
},
|
||||
};
|
||||
|
||||
export const LinkButton: Story = {
|
||||
args: {
|
||||
to: '/demo',
|
||||
label: 'Go to demo',
|
||||
},
|
||||
args: {
|
||||
to: '/demo',
|
||||
label: 'Go to demo',
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
disabled: true,
|
||||
},
|
||||
args: {
|
||||
disabled: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const SizeMatrix: Story = {
|
||||
render: (args) => (
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
<Button {...args} size="sm" label="Small" />
|
||||
<Button {...args} size="md" label="Medium" />
|
||||
<Button {...args} size="lg" label="Large" />
|
||||
<Button {...args} size="full" label="Full width" />
|
||||
</div>
|
||||
),
|
||||
render: (args) => (
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
<Button {...args} size="sm" label="Small" />
|
||||
<Button {...args} size="md" label="Medium" />
|
||||
<Button {...args} size="lg" label="Large" />
|
||||
<Button {...args} size="full" label="Full width" />
|
||||
</div>
|
||||
),
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user