@kadconsulting/dry
Version:
KAD Reusable Component Library
58 lines • 1.9 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 NewToggle from './NewToggle';
const meta = {
title: 'Components/Form/NewToggle',
component: NewToggle,
argTypes: {
text: {
control: 'text',
description: 'Label text for the toggle',
},
checked: {
control: 'boolean',
description: 'Whether the toggle is checked or not',
},
onChange: {
action: 'changed',
description: 'Function called when the toggle state changes',
},
},
};
export default meta;
export const Default = {
args: {
text: 'Toggle me',
checked: false,
},
};
export const Checked = {
args: {
...Default.args,
checked: true,
},
};
export const LongLabel = {
args: {
...Default.args,
text: 'This is a very long label for the toggle switch to test how it handles extended text',
},
};
export const WithCustomStyling = {
render: (args) => (_jsx("div", { style: { padding: '20px', background: '#f0f0f0' }, children: _jsx(NewToggle, { ...args }) })),
args: {
...Default.args,
},
};
export const InteractiveExample = {
render: () => {
const [isChecked, setIsChecked] = React.useState(false);
return (_jsx(NewToggle, { text: `Toggle is ${isChecked ? 'ON' : 'OFF'}`, checked: isChecked, onChange: () => setIsChecked(!isChecked) }));
},
};
export const MultipleToggles = {
render: () => (_jsxs("div", { children: [_jsx(NewToggle, { text: 'Option 1', checked: false, onChange: () => { } }), _jsx(NewToggle, { text: 'Option 2', checked: true, onChange: () => { } }), _jsx(NewToggle, { text: 'Option 3', checked: false, onChange: () => { } })] })),
};
//# sourceMappingURL=NewToggle.stories.js.map