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

[18/n][Storybook] Switch update argTypes and add stories (#55)

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

84
packages/frontend/src/stories/Components/Switch.stories.tsx
View File

@ -17,7 +17,10 @@ const meta: Meta<typeof Switch> = {
control: 'object',
},
onCheckedChange: {
action: 'onCheckedChange',
action: 'checkedChange',
},
fullWidth: {
control: 'boolean',
},
},
};
@ -26,26 +29,65 @@ export default meta;
type Story = StoryObj<typeof Switch>;
export const Default: Story = {
render: ({ label, description, wrapperProps, onCheckedChange }) => (
<Switch
label={label}
description={description}
wrapperProps={wrapperProps}
checked={false}
onCheckedChange={onCheckedChange}
/>
),
};
export const Default: Story = {};
export const Checked: Story = {
render: ({ label, description, wrapperProps, onCheckedChange }) => (
<Switch
label={label}
description={description}
wrapperProps={wrapperProps}
checked={true}
onCheckedChange={onCheckedChange}
/>
),
args: {
checked: true,
},
};
export const Disabled: Story = {
args: {
disabled: true,
},
};
export const WithLabel: Story = {
args: {
label: 'Label',
},
};
export const WithDescription: Story = {
args: {
description: 'Description',
},
};
export const WithWrapperProps: Story = {
args: {
wrapperProps: {
style: {
border: '1px solid red',
},
},
},
};
export const WithLabelAndDescription: Story = {
args: {
label: 'Label',
description: 'Description',
},
};
export const WithLabelAndDescriptionAndWrapperProps: Story = {
args: {
label: 'Label',
description: 'Description',
wrapperProps: {
style: {
border: '1px solid red',
},
},
},
};
export const FullWidthWithLabelAndDescription: Story = {
args: {
fullWidth: true,
label: 'Label',
description: 'Description',
},
};