@kadconsulting/dry
Version:
KAD Reusable Component Library
99 lines • 2.85 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// CLI Version 1.0.1
// Component Version 1.0.0
import React from 'react';
import ToggleInput from './ToggleInput';
const meta = {
title: 'Components/Form/ToggleInput',
component: ToggleInput,
argTypes: {
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
defaultValue: 'ToggleInput-test-id',
},
text: {
control: 'text',
description: 'Label text for the toggle input',
},
checked: {
control: 'boolean',
description: 'Whether the toggle is checked or not',
},
onChange: {
action: 'changed',
description: 'Function called when the toggle state changes',
},
className: {
control: 'text',
description: 'Additional CSS class names',
},
id: {
control: 'text',
description: 'ID for the toggle input container',
},
},
};
export default meta;
export const Default = {
args: {
'data-testid': 'ToggleInput-test-id',
text: 'Toggle Me',
checked: false,
},
};
export const Checked = {
args: {
...Default.args,
checked: true,
},
};
export const WithCustomText = {
args: {
...Default.args,
text: 'Custom Toggle Label',
},
};
export const WithCustomClassName = {
args: {
...Default.args,
className: 'custom-toggle-class',
},
};
export const WithCustomId = {
args: {
...Default.args,
id: 'custom-toggle-id',
},
};
export const InteractiveToggle = {
render: (args) => {
const [isChecked, setIsChecked] = React.useState(args.checked);
return (_jsx(ToggleInput, { ...args, checked: isChecked, onChange: () => setIsChecked(!isChecked) }));
},
args: {
...Default.args,
},
};
export const MultipleToggles = {
render: () => (_jsxs("div", { children: [_jsx(ToggleInput, { text: 'Toggle 1', checked: false, onChange: () => { } }), _jsx(ToggleInput, { text: 'Toggle 2', checked: true, onChange: () => { } }), _jsx(ToggleInput, { text: 'Toggle 3', checked: false, onChange: () => { } })] })),
};
export const WithLongText = {
args: {
...Default.args,
text: 'This is a very long label for the toggle input to test how it handles wrapping and layout',
},
};
export const Disabled = {
args: {
...Default.args,
passProps: { disabled: true },
},
};
export const CustomRendering = {
render: (args) => (_jsx("div", { style: { padding: '20px', background: '#f0f0f0' }, children: _jsx(ToggleInput, { ...args }) })),
args: {
...Default.args,
},
};
//# sourceMappingURL=ToggleInput.stories.js.map