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

KAD Reusable Component Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Modal from './Modal';
export default {
    title: 'Components/Modal',
    tags: ['autodocs'],
    component: Modal,
    argTypes: {
        id: {
            control: 'text',
            description: 'The unique identifier for the modal',
        },
        isOpen: {
            control: 'boolean',
            description: 'Controls if the modal is open or closed',
        },
        onClose: {
            action: 'closed',
            description: 'Function to call when the modal requests to be closed',
        },
        headerText: {
            control: 'text',
            description: 'The header text of the modal',
        },
        subHeaderText: {
            control: 'text',
            description: 'The sub-header text of the modal',
        },
        leftButtonHandler: {
            action: 'leftButtonClicked',
            description: 'Function to call when the left button is clicked',
        },
        leftButtonText: {
            control: 'text',
            description: 'Text for the left button',
        },
        leftButtonType: {
            control: { type: 'select', options: ['default', 'primary', 'secondary'] },
            description: 'Type of the left button',
        },
        rightButtonText: {
            control: 'text',
            description: 'Text for the right button',
        },
        rightButtonType: {
            control: { type: 'select', options: ['default', 'primary', 'secondary'] },
            description: 'Type of the right button',
        },
        rightButtonHandler: {
            action: 'rightButtonClicked',
            description: 'Function to call when the right button is clicked',
        },
        leftButtonDisabled: {
            control: 'boolean',
            description: 'Is the left button disabled',
        },
        rightButtonDisabled: {
            control: 'boolean',
            description: 'Is the right button disabled',
        },
        leftButtonLoading: {
            control: 'boolean',
            description: 'Is the left button in a loading state',
        },
        rightButtonLoading: {
            control: 'boolean',
            description: 'Is the right button in a loading state',
        },
    },
    parameters: {
        actions: {
            handles: ['closed', 'leftButtonClicked', 'rightButtonClicked'],
        },
    },
};
export const Default = {
    args: {
        headerText: 'Default Modal',
        subHeaderText: 'This is a sub-header',
        leftButtonText: 'Cancel',
        rightButtonText: 'Confirm',
        isOpen: true,
    },
};
export const WithButtons = {
    args: {
        ...Default.args,
        leftButtonHandler: () => { },
        rightButtonHandler: () => { },
        leftButtonText: 'Cancel',
        rightButtonText: 'Confirm',
        leftButtonType: 'primary',
        rightButtonType: 'primary',
    },
};
export const DisabledButtons = {
    args: {
        ...WithButtons.args,
        leftButtonDisabled: true,
        rightButtonDisabled: true,
    },
};
export const LoadingStateButtons = {
    args: {
        ...WithButtons.args,
        leftButtonLoading: true,
        rightButtonLoading: true,
        leftButtonText: 'Cancel',
        rightButtonText: 'Confirm',
    },
};
export const NoCloseButton = {
    args: {
        ...Default.args,
        hasCloseButton: false,
    },
};
export const OnlyHeader = {
    args: {
        headerText: 'Only Header',
        isOpen: true,
    },
};
export const CustomContent = {
    args: {
        headerText: 'Custom Content',
        isOpen: true,
        leftButtonText: 'Cancel',
        rightButtonText: 'Confirm',
        children: (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("p", { children: "This is some custom content inside the modal." }), _jsx("p", { children: "You can add any React elements here." })] })),
    },
};
export const NoHeaderWithButtons = {
    args: {
        isOpen: true,
        leftButtonText: 'Cancel',
        rightButtonText: 'Confirm',
        leftButtonType: 'secondary',
        rightButtonType: 'primary',
    },
};
export const WithLongContent = {
    args: {
        headerText: 'Long Content',
        isOpen: true,
        leftButtonText: 'Cancel',
        rightButtonText: 'Confirm',
        children: (_jsx("div", { style: { padding: '20px' }, children: _jsxs("p", { children: ['Very '.repeat(100), " long content."] }) })),
    },
};
export const LightThemeModal = {
    args: {
        headerText: 'Light Theme',
        subHeaderText: 'A lighter modal theme',
        isOpen: true,
        isLight: true,
        leftButtonText: 'Cancel',
        rightButtonText: 'Confirm',
        children: (_jsx("div", { style: { padding: '20px' }, children: _jsx("p", { children: "This is a modal with a light theme." }) })),
    },
};
export const FullExample = {
    args: {
        headerText: 'Full Example',
        subHeaderText: 'All features enabled',
        isOpen: true,
        leftButtonText: 'Cancel',
        rightButtonText: 'Confirm',
        leftButtonType: 'secondary',
        rightButtonType: 'primary',
        leftButtonHandler: () => { },
        rightButtonHandler: () => { },
        leftButtonDisabled: false,
        rightButtonDisabled: false,
        leftButtonLoading: false,
        rightButtonLoading: false,
        hasCloseButton: true,
        children: (_jsx("div", { style: { padding: '20px' }, children: _jsx("p", { children: "This modal showcases all the features of the Modal component." }) })),
    },
};
//# sourceMappingURL=Modal.stories.js.map