cerc-io/snowballtools-base-mirror
16
0
Fork 0
mirror of https://github.com/snowball-tools/snowballtools-base.git synced 2024-12-22 12:37:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

[19/n][Storybook] Tag with typed themes (#57)

Browse Source
This commit is contained in:
Vivian Phung 2024-05-14 19:19:31 -04:00 committed by GitHub
commit 065b12e3d9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/frontend/src/stories/Components/Tag.stories.tsx
View File

@ -1,7 +1,17 @@
import { StoryObj, Meta } from '@storybook/react';
import { Tag } from 'components/shared/Tag';
import { CheckIcon, PlusIcon } from 'components/shared/CustomIcon';
import { Tag, TagTheme } from 'components/shared/Tag';
import { PlusIcon } from 'components/shared/CustomIcon';
const tagTypes: TagTheme['type'][] = [
'attention',
'negative',
'positive',
'emphasized',
'neutral',
];
const tagStyles: TagTheme['style'][] = ['default', 'minimal'];
const tagSizes: TagTheme['size'][] = ['xs', 'sm'];
const meta: Meta<typeof Tag> = {
title: 'Components/Tag',
@ -12,7 +22,7 @@ const meta: Meta<typeof Tag> = {
},
argTypes: {
children: {
control: 'text',
control: 'object',
},
leftIcon: {
control: 'object',
@ -22,15 +32,15 @@ const meta: Meta<typeof Tag> = {
},
type: {
control: 'select',
options: ['attention', 'negative', 'positive', 'emphasized', 'neutral'],
options: tagTypes,
},
style: {
control: 'select',
options: ['default', 'outlined'],
options: tagStyles,
},
size: {
control: 'select',
options: ['xs', 'sm'],
options: tagSizes,
},
},
};
@ -40,18 +50,6 @@ export default meta;
type Story = StoryObj<typeof Tag>;
export const Default: Story = {
render: ({ children, leftIcon, rightIcon, type, style, size, ...arg }) => (
<Tag
leftIcon={leftIcon}
rightIcon={rightIcon}
style={style}
type={type}
size={size}
{...arg}
>
{children}
</Tag>
),
args: {
children: 'Tag',
style: 'default',
@ -61,15 +59,13 @@ export const Default: Story = {
};
export const WithLeftIcon: Story = {
render: ({ ...arg }) => <Tag {...arg} />,
args: {
...Default.args,
leftIcon: <CheckIcon />,
leftIcon: <PlusIcon />,
},
};
export const WithRightIcon: Story = {
render: ({ ...arg }) => <Tag {...arg} />,
args: {
...Default.args,
rightIcon: <PlusIcon />,