@kadconsulting/dry
Version:
KAD Reusable Component Library
68 lines • 1.84 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import Toggle from './Toggle';
export default {
title: 'Components/Toggle',
component: Toggle,
argTypes: {
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
},
passProps: {
control: 'object',
description: 'Object containing extra props to pass',
},
title: { control: 'text' },
text: { control: 'text' },
size: {
control: 'select',
options: ['sm', 'md', 'custom'],
},
textLeft: { control: 'boolean' },
disabled: { control: 'boolean' },
loading: { control: 'boolean' },
tooltip: { control: 'text' },
customSize: {
control: 'object',
description: 'Custom size for the toggle if size is set to custom',
},
},
};
const Template = (args) => _jsx(Toggle, { ...args });
export const Default = Template.bind({});
Default.args = {
'data-testid': 'Toggle-test-id',
};
export const WithText = Template.bind({});
WithText.args = {
...Default.args,
title: 'Toggle Title',
text: 'Toggle Description',
};
export const CustomSize = Template.bind({});
CustomSize.args = {
...Default.args,
size: 'custom',
customSize: { width: 50, height: 30 },
};
export const Disabled = Template.bind({});
Disabled.args = {
...Default.args,
disabled: true,
};
export const Loading = Template.bind({});
Loading.args = {
...Default.args,
loading: true,
};
export const TooltipEnabled = Template.bind({});
TooltipEnabled.args = {
...Default.args,
tooltip: 'Toggle Tooltip',
};
export const TextOnLeft = Template.bind({});
TextOnLeft.args = {
...WithText.args,
textLeft: true,
};
//# sourceMappingURL=Toggle.stories.js.map