cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki 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 { 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',
},
};