@kadconsulting/dry/dist/src/components/ToggleInput/ToggleInput.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 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