gov-gui/dist/collection/components/gov-modal/gov-modal.stories.js

Gov UI Component Library Typscript Build

import { html } from "lit-html";
import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
import "../../global/animate.min.css";
/** Modals are overlay elements that require user interaction before they can return to the main interface. They are typically used for dialogs, forms, or additional information. */
export default {
    title: 'Components/Modal',
    tags: ['autodocs'],
    parameters: {
        actions: {
            handles: ['click'],
        },
    },
    argTypes: {
        isOpenChange: {
            control: 'event',
            action: 'isOpenChange',
            description: 'Emitted for two-way binding.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: () => { } },
                category: 'Events',
            },
        },
        confirm: {
            control: 'event',
            action: 'confirm',
            description: 'Emits when the confirm button is clicked.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: () => { } },
                category: 'Events',
            },
        },
        cancel: {
            control: 'event',
            action: 'cancel',
            description: 'Emits when the cancel button is clicked.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: () => { } },
                category: 'Events',
            },
        },
        opened: {
            control: 'event',
            action: 'opened',
            description: 'Emits when the modal opens.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: () => { } },
                category: 'Events',
            },
        },
        closed: {
            control: 'event',
            action: 'closed',
            description: 'Emits when the modal closes.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: () => { } },
                category: 'Events',
            },
        },
        header: {
            control: "text",
            description: 'The header text displayed at the top of the modal.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        subHeader: {
            control: "text",
            description: 'The subheader text displayed at the top of the modal.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        size: {
            control: 'select',
            options: ['small', 'medium', 'large'],
            description: 'Sets the size of the modal.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'medium' },
                category: 'Attributes',
            },
        },
        isOpen: {
            control: 'boolean',
            description: 'Controls the visibility of the modal.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Attributes',
            },
        },
        cancelButtonText: {
            control: "text",
            description: 'Text for the cancel button.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'Cancel' },
                category: 'Attributes',
            },
        },
        confirmButtonText: {
            control: "text",
            description: 'Text for the confirm button.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'Confirm' },
                category: 'Attributes',
            },
        },
        showCancelButton: {
            control: 'boolean',
            description: 'Toggles visibility of the cancel button.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: true },
                category: 'Attributes',
            },
        },
        showConfirmButton: {
            control: 'boolean',
            description: 'Toggles visibility of the confirm button.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: true },
                category: 'Attributes',
            },
        },
        backdropClose: {
            control: 'boolean',
            description: 'Allows modal to be closed by clicking on the backdrop.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: true },
                category: 'Attributes',
            },
        },
        disableClose: {
            control: 'boolean',
            description: 'Disables all manual closing of the modal.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Attributes',
            },
        },
        fullscreen: {
            control: 'boolean',
            description: 'Toggles fullscreen modal.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: false },
                category: 'Attributes',
            },
        },
        closeOnEsc: {
            control: 'boolean',
            description: 'Allows modal to be closed with the ESC key.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: true },
                category: 'Attributes',
            },
        },
        showHeader: {
            control: 'boolean',
            description: 'Toggles the header visibility.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: true },
                category: 'Attributes',
            },
        },
        showSubHeader: {
            control: 'boolean',
            description: 'Toggles the header visibility.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: true },
                category: 'Attributes',
            },
        },
        showFooter: {
            control: 'boolean',
            description: 'Toggles the footer visibility.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: true },
                category: 'Attributes',
            },
        },
        animation: {
            control: 'select',
            options: ["",
                "bounce", "flash", "pulse", "rubberBand", "shakeX", "shakeY", "headShake", "swing", "tada", "wobble", "jello", "heartBeat",
                "backInDown", "backInLeft", "backInRight", "backInUp",
                "backOutDown", "backOutLeft", "backOutRight", "backOutUp",
                "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp",
                "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp",
                "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeInTopLeft", "fadeInTopRight", "fadeInBottomLeft", "fadeInBottomRight",
                "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "fadeOutTopLeft", "fadeOutTopRight", "fadeOutBottomRight", "fadeOutBottomLeft",
                "flip", "flipInX", "flipInY", "flipOutX", "flipOutY",
                "lightSpeedInRight", "lightSpeedInLeft", "lightSpeedOutRight", "lightSpeedOutLeft",
                "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight",
                "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight",
                "hinge", "jackInTheBox", "rollIn", "rollOut",
                "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp",
                "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp",
                "slideInDown", "slideInLeft", "slideInRight", "slideInUp",
                "slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp"
            ],
            description: 'Selects the animation effect to apply to the component.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Animations',
            },
        },
        animationDelay: {
            control: 'select',
            options: ["2s", "3s", "4s", "5s"],
            description: 'Sets the delay before the animation begins (in seconds).',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '2s' },
                category: 'Animations',
            },
        },
        animationSpeed: {
            control: 'select',
            options: ["slow", "slower", "fast", "faster"],
            description: 'Controls how quickly the animation plays.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Animations',
            },
        },
        content: {
            control: "text",
            description: 'The header text displayed at the top of the modal.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Testing',
            },
        },
    },
};
const Template = (args) => html `
<div style="height: 300px; display:flex; align-items: center; justify-content:center;">
</div>
  <gov-modal 
    header="${args.header}" 
    subheader="${args.subHeader}" 
    size="${args.size}" 
    is-open="${args.isOpen}"
    cancel-button-text="${args.cancelButtonText}" 
    confirm-button-text="${args.confirmButtonText}"
    show-cancel-button="${args.showCancelButton}"
    show-confirm-button="${args.showConfirmButton}"
    backdrop-close="${args.backdropClose}"
    disable-close="${args.disableClose}"
    fullscreen="${args.fullscreen}"
    close-on-esc="${args.closeOnEsc}"
    show-header="${args.showHeader}"
    show-sub-header="${args.showSubHeader}"
    show-footer="${args.showFooter}"
    @confirm="${args.confirm}"
    @cancel="${args.cancel}"
    @opened="${args.opened}"
    @closed="${args.closed}"
    @is-open-change="${args.isOpenChange}"
    animation-delay="${args.animationDelay}"
    animation="${args.animation}"
    animation-speed="${args.animationSpeed}">
    ${args.content ? unsafeHTML(args.content) : ''}
  </gov-modal>`;
export const Modal = Template.bind({});
Modal.args = {
    header: 'Header Text',
    subHeader: 'Sub Header Text',
    size: 'medium',
    isOpen: true,
    cancelButtonText: 'Cancel',
    confirmButtonText: 'Confirm',
    showCancelButton: true,
    showConfirmButton: true,
    backdropClose: true,
    disableClose: false,
    fullscreen: false,
    closeOnEsc: true,
    showHeader: true,
    showSubHeader: true,
    showFooter: true,
    content: '',
    animation: '',
    animationDelay: '',
    animationSpeed: '',
};
//# sourceMappingURL=gov-modal.stories.js.map