gov-gui/dist/collection/components/gov-card/gov-card.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";
/** Cards are flexible content containers that can hold a variety of elements such as images, text, and buttons.
 * They are commonly used to present information in a structured manner, allowing for easy interaction and engagement.
 * Cards can include headers, paragraphs, and action buttons to enhance user experience and drive specific actions. */
export default {
    title: 'Components/Cards',
    tags: ['autodocs'],
    parameters: {
        actions: {
            handles: ['cardButtonClicked'], // Handles card button click action
        },
    },
    argTypes: {
        cardTitle: {
            control: "text",
            description: 'The header text displayed at the top of the card.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        description: {
            control: "text",
            description: 'The main text content of the card.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        imageSrc: {
            control: "text",
            description: 'Path to the image displayed on the card.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        buttonText: {
            control: "text",
            description: 'Text displayed on the button.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'Learn More' },
                category: 'Attributes',
            },
        },
        showButton: {
            control: "boolean",
            description: 'Controls whether the button is displayed.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: true },
                category: 'Attributes',
            },
        },
        alignment: {
            control: 'select',
            options: ['vertical', 'horizontal'],
            description: 'Defines the layout alignment of the card (vertical or horizontal).',
            table: {
                type: { summary: 'vertical | horizontal' },
                defaultValue: { summary: 'vertical' },
                category: 'Attributes',
            },
        },
        imageClip: {
            control: 'select',
            options: ['cover', 'contain', 'fill', 'none'],
            description: 'Defines how image fits the allocated space.',
            table: {
                type: { summary: '' },
                defaultValue: { summary: 'cover' },
                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',
            },
        },
        cardButtonClicked: {
            action: 'cardButtonClicked',
            description: 'Event emitted when button is clicked.',
            table: {
                type: { summary: 'void' },
                defaultValue: { summary: () => { } },
                category: 'Events',
            },
        },
    },
};
const Template = (args) => html `
    <gov-card 
        card-title="${args.cardTitle}"
        description="${args.description}"
        image-src="${args.imageSrc}"
        button-text="${args.buttonText}"
        ?show-button="${args.showButton}"
        alignment="${args.alignment}"
        image-clip="${args.imageClip}"
        @cardButtonClicked="${args.cardButtonClicked}"
        animation-delay="${args.animationDelay}"
        animation="${args.animation}"
        animation-speed="${args.animationSpeed}"
    >
    ${args.content ? unsafeHTML(args.content) : ''}
</gov-card>
`;
export const Card = Template.bind({});
Card.args = {
    cardTitle: 'Card Header',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum...',
    imageSrc: 'https://picsum.photos/400/300',
    buttonText: 'Button',
    showButton: true,
    alignment: 'vertical',
    content: '',
    imageClip: 'fill',
    animation: '',
    animationDelay: '',
    animationSpeed: '',
};
//# sourceMappingURL=gov-card.stories.js.map