app/react/stories/Forms/RadioSelect.stories.tsx
import React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { fn } from '@storybook/test';
import { RadioSelect } from 'app/V2/Components/Forms';
import { LEGACY_createStore as createStore } from 'V2/shared/testingHelpers';
import { Provider } from 'react-redux';
const meta: Meta<typeof RadioSelect> = {
title: 'Forms/RadioSelect',
component: RadioSelect,
args: {
onChange: fn(),
},
};
type Story = StoryObj<typeof RadioSelect>;
const Primary: Story = {
render: args => (
<Provider store={createStore()}>
<div className="tw-content">
<RadioSelect
legend={args.legend}
options={args.options}
name={args.name}
onChange={args.onChange}
orientation={args.orientation}
/>
</div>
</Provider>
),
};
const Basic: Story = {
...Primary,
args: {
legend: 'Choose your favorite country',
name: 'country',
options: [
{
id: 'united-state',
label: 'USA',
value: 'united-state',
},
{ label: 'Germany', value: 'germany' },
{
id: 'spain',
label: 'Spain',
value: 'spain',
defaultChecked: true,
},
{
id: 'uk',
label: 'United Kingdom',
value: 'uk',
disabled: true,
},
{ id: 'china', label: 'China', value: 'china' },
],
onChange: action('changed'),
},
};
const Horizontal: Story = {
...Primary,
args: {
...Basic.args,
orientation: 'horizontal',
},
};
export { Basic, Horizontal };
export default meta;