deep-stack/snowballtools-base
3
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Actions Activity

[13/n][Storybook] Radio argTypes update (#50)

Browse Source
This commit is contained in:
Vivian Phung 2024-05-14 17:37:58 -04:00 committed by GitHub
commit 1c05ba8822
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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 { 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'][] = [ const radioOrientation: RadioTheme['orientation'][] = [
'horizontal', 'horizontal',
'vertical', 'vertical',
]; ];
const radioOptions: RadioOption[] = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
];
const meta: Meta<typeof Radio> = { const meta: Meta<typeof Radio> = {
title: 'Components/Radio', title: 'Components/Radio',
@ -20,11 +26,22 @@ const meta: Meta<typeof Radio> = {
options: radioOrientation, options: radioOrientation,
}, },
value: { value: {
control: 'text', control: 'object',
}, },
onValueChange: { 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>; type Story = StoryObj<typeof Radio>;
export const Default: Story = { export const Default: Story = {
render: ({ options, orientation, value, onValueChange }) => ( render: ({ options, orientation, value, onValueChange, ...args }) => (
<Radio <Radio
options={options} options={options}
orientation={orientation} orientation={orientation}
value={value} value={value}
onValueChange={onValueChange} onValueChange={onValueChange}
{...args}
/> />
), ),
args: { args: {
options: [ options: radioOptions,
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
],
orientation: 'horizontal', orientation: 'horizontal',
value: 'option1', value: 'option1',
onValueChange: (value: string) => console.log(value), onValueChange: (value) => console.log(value),
}, },
}; };
export const Vertical: Story = { export const Vertical: Story = {
render: ({ options, orientation, value, onValueChange }) => ( render: ({ options, orientation, value, onValueChange, ...args }) => (
<Radio <Radio
options={options} options={options}
orientation={orientation} orientation={orientation}
value={value} value={value}
onValueChange={onValueChange} onValueChange={onValueChange}
{...args}
/> />
), ),
args: { args: {
options: [ options: radioOptions,
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
],
orientation: 'vertical', orientation: 'vertical',
value: 'option1', 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',
}, },
}; };