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

Gov UI Component Library Typscript Build

import { html } from "lit-html";
import "../../global/animate.min.css";
/**
 * Accordion component that allows users to toggle sections of content, enabling a stacked view where sections can be expanded or collapsed individually.
 * This helps in reducing page clutter and enhances readability.
 */
export default {
    title: 'Components/Accordion',
    tags: ['autodocs'],
    parameters: {
        actions: {
            handles: ['onClick'], // Tracks click events
        }
    },
    argTypes: {
        openIndex: {
            control: 'number',
            description: 'Sets the accordoian item that is expanded.',
            table: {
                type: { summary: 'number' },
                defaultValue: { summary: 'none' },
                category: 'Attributes',
            },
        },
        accordionItems: {
            control: 'object', // Allows for dynamic control over accordion items
            description: 'An array of objects representing each accordion item, containing `title` and `content` fields.',
            table: {
                type: { summary: 'Array<{ title: string, content: string }>' },
                defaultValue: { summary: '[{ title: "Accordion Item #1", content: "Content for item #1" }]' },
                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',
            },
        },
    },
};
const Template = (args) => html `
  <gov-accordion
    open-index="${args.openIndex}"
    animation-delay="${args.animationDelay}"
    animation="${args.animation}"
    animation-speed="${args.animationSpeed}"
  >
    ${args.accordionItems.map(item => html `
      <gov-accordion-item title="${item.title}" .innerHTML="${item.content}">
      </gov-accordion-item>
    `)}
  </gov-accordion>
`;
export const Accordion = Template.bind({});
Accordion.args = {
    openIndex: 3,
    accordionItems: [
        {
            title: 'Getting Started',
            content: 'Learn the basics of how to get started with our platform. This includes creating an account, setting up your profile, and navigating the dashboard.'
        },
        {
            title: 'Features Overview',
            content: 'Explore the key features of our product, including advanced analytics, customizable workflows, and integration with third-party tools.'
        },
        {
            title: 'Pricing Plans',
            content: 'Understand our flexible pricing plans that cater to businesses of all sizes. Choose the plan that best fits your needs and budget.'
        },
        {
            title: 'FAQs and Support',
            content: 'Find answers to frequently asked questions and learn how to get in touch with our support team for assistance.'
        },
    ],
    animation: '',
    animationDelay: '2s',
    animationSpeed: 'slow',
};
//# sourceMappingURL=gov-accordion.stories.js.map