101 lines
2.0 KiB
TypeScript
101 lines
2.0 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
import { fn } from 'storybook/test';
|
|
|
|
import ChatIcon from '@/material-icons/400-24px/chat.svg?react';
|
|
import DownloadIcon from '@/material-icons/400-24px/download.svg?react';
|
|
import HeadphonesIcon from '@/material-icons/400-24px/headphones.svg?react';
|
|
|
|
import { Button, IconButton } from './redesign';
|
|
|
|
const iconArgType = {
|
|
control: 'select',
|
|
options: ['chat', 'download', 'audio'],
|
|
mapping: {
|
|
chat: ChatIcon,
|
|
download: DownloadIcon,
|
|
audio: HeadphonesIcon,
|
|
},
|
|
} as const;
|
|
|
|
const meta = {
|
|
title: 'Redesign/Button',
|
|
component: Button,
|
|
args: {
|
|
children: 'Action',
|
|
size: 'md',
|
|
variant: 'solid',
|
|
color: 'neutral',
|
|
disabled: false,
|
|
loading: false,
|
|
as: 'button',
|
|
onClick: fn(),
|
|
},
|
|
argTypes: {
|
|
children: {
|
|
control: 'text',
|
|
},
|
|
as: {
|
|
control: 'inline-radio',
|
|
options: ['button', 'a', 'link'],
|
|
},
|
|
size: {
|
|
control: 'inline-radio',
|
|
options: ['xs', 'sm', 'md', 'lg'],
|
|
},
|
|
variant: {
|
|
control: 'inline-radio',
|
|
options: ['solid', 'ghost'],
|
|
},
|
|
color: {
|
|
control: 'inline-radio',
|
|
options: ['neutral', 'accent', 'tonal', 'destructive'],
|
|
},
|
|
leadingIcon: iconArgType,
|
|
trailingIcon: iconArgType,
|
|
onClick: {
|
|
table: {
|
|
disable: true,
|
|
},
|
|
},
|
|
},
|
|
} satisfies Meta<typeof Button>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Default: Story = {};
|
|
|
|
export const IconLeading: Story = {
|
|
args: {
|
|
leadingIcon: ChatIcon,
|
|
},
|
|
};
|
|
|
|
export const IconTrailing: Story = {
|
|
args: {
|
|
trailingIcon: HeadphonesIcon,
|
|
},
|
|
};
|
|
|
|
export const IconOnly: Story = {
|
|
render(args) {
|
|
return <IconButton {...args} icon={args.leadingIcon ?? ChatIcon} />;
|
|
},
|
|
args: {
|
|
leadingIcon: ChatIcon,
|
|
},
|
|
};
|
|
|
|
export const Link: Story = {
|
|
render(args) {
|
|
if (args.as === 'link') {
|
|
return <Button {...args} to='/example' />;
|
|
}
|
|
return <Button {...args} />;
|
|
},
|
|
args: {
|
|
as: 'link',
|
|
},
|
|
};
|