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

[13/n][Storybook] Radio argTypes update

Browse Source
This commit is contained in:
Vivian Phung 2024-05-14 16:15:27 -04:00 committed by Vivian Phung
parent 550ef91968
commit fd7d06b9e2
1 changed files with 47 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/frontend/src/stories/Components/Radio.stories.tsx
View File

@ -1,11 +1,17 @@
import { StoryObj, Meta } from '@storybook/react';
import { Radio, RadioTheme } from 'components/shared/Radio';
import { Radio, RadioOption, RadioTheme } from 'components/shared/Radio';
const radioVariants: RadioTheme['variant'][] = ['unstyled', 'card'];
const radioOrientation: RadioTheme['orientation'][] = [
'horizontal',
'vertical',
];
const radioOptions: RadioOption[] = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
];
const meta: Meta<typeof Radio> = {
title: 'Components/Radio',
@ -20,11 +26,22 @@ const meta: Meta<typeof Radio> = {
options: radioOrientation,
},
value: {
control: 'text',
control: 'object',
},
onValueChange: {
action: 'onValueChange',
action: 'valueChange',
},
variant: {
control: 'select',
options: radioVariants,
},
},
args: {
options: radioOptions,
orientation: 'horizontal',
value: 'option1',
onValueChange: (value: string) => console.log(value),
variant: 'unstyled',
},
};
@ -33,43 +50,56 @@ export default meta;
type Story = StoryObj<typeof Radio>;
export const Default: Story = {
render: ({ options, orientation, value, onValueChange }) => (
render: ({ options, orientation, value, onValueChange, ...args }) => (
<Radio
options={options}
orientation={orientation}
value={value}
onValueChange={onValueChange}
{...args}
/>
),
args: {
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
],
options: radioOptions,
orientation: 'horizontal',
value: 'option1',
onValueChange: (value: string) => console.log(value),
onValueChange: (value) => console.log(value),
},
};
export const Vertical: Story = {
render: ({ options, orientation, value, onValueChange }) => (
render: ({ options, orientation, value, onValueChange, ...args }) => (
<Radio
options={options}
orientation={orientation}
value={value}
onValueChange={onValueChange}
{...args}
/>
),
args: {
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
],
options: radioOptions,
orientation: 'vertical',
value: 'option1',
onValueChange: (value: string) => console.log(value),
onValueChange: (value) => console.log(value),
},
};
export const Card: Story = {
render: ({ options, orientation, value, onValueChange, ...args }) => (
<Radio
options={options}
orientation={orientation}
value={value}
onValueChange={onValueChange}
{...args}
/>
),
args: {
options: radioOptions,
orientation: 'horizontal',
value: 'option1',
onValueChange: (value: string) => console.log(value),
variant: 'card',
},
};