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

Gov UI Component Library Typscript Build

import "../../global/animate.min.css";
/**
 * Pagination divides content into discrete pages, allowing users to navigate through them easily.
 * It is particularly useful for large datasets or lists, improving readability and accessibility.
 * This component handles user interaction with the dataset by updating the current page and firing events
 * when the user navigates to a different page.
 */
export default {
    title: 'Components/Pagination',
    tags: ['autodocs'],
    parameters: {
        actions: {
            handles: ['pageChanged'], // Triggers when the page is changed
        },
    },
    argTypes: {
        totalPages: {
            control: 'number',
            description: 'The total number of pages available for navigation.',
            table: {
                type: { summary: 'number' },
                defaultValue: { summary: 1 },
                category: 'Attributes',
            },
        },
        currentPage: {
            control: 'number',
            description: 'The currently selected page in the pagination.',
            table: {
                type: { summary: 'number' },
                defaultValue: { summary: 1 },
                category: 'Attributes',
            },
        },
        showFirstLast: {
            control: 'boolean',
            description: 'Shows skip to first and skip to last buttons.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: true },
                category: 'Attributes',
            },
        },
        maxVisible: {
            control: 'number',
            description: 'Maximum pages to show at once.',
            table: {
                type: { summary: 'number' },
                defaultValue: { summary: 5 },
                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) => {
    const pagination = document.createElement('gov-pagination');
    pagination.totalPages = args.totalPages;
    pagination.currentPage = args.currentPage;
    pagination.showFirstLast = args.showFirstLast;
    pagination.maxVisible = args.maxVisible;
    pagination.animation = args.animation;
    pagination.animationDelay = args.animationDelay;
    pagination.animationSpeed = args.animationSpeed;
    pagination.addEventListener('pageChanged', (event) => {
        args.currentPage = event.detail;
        pagination.currentPage = args.currentPage;
    });
    return pagination;
};
export const Pagination = Template.bind({});
Pagination.args = {
    totalPages: 5,
    currentPage: 1,
    showFirstLast: false,
    maxVisible: 5,
    animation: '',
    animationDelay: '',
    animationSpeed: '',
};
Pagination.parameters = {
    docs: {
        source: {
            code: `<gov-pagination 
  totalPages="${Pagination.args.totalPages}" 
  currentPage="${Pagination.args.currentPage}"
  showFirstLast="${Pagination.args.showFirstLast}"
  maxVisible="${Pagination.args.maxVisible}"
  animation-delay="${Pagination.args.animationDelay}"
animation="${Pagination.args.animation}"
animation-speed="${Pagination.args.animationSpeed}">
</gov-pagination>`,
        },
    },
};
//# sourceMappingURL=gov-pagination.stories.js.map