@kadconsulting/dry/dist/src/components/NewToggle/NewToggle.stories.js

KAD Reusable Component Library

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