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

KAD Reusable Component Library

import { jsx as _jsx } from "react/jsx-runtime";
import CardCarousel from './CardCarousel';
import CardForStory from './CardForStory/CardForStory';
export default {
    title: 'Components/CardCarousel',
    component: CardCarousel,
    argTypes: {
        autoplay: {
            control: 'boolean',
            defaultValue: false,
        },
        bubbleSelector: {
            control: 'boolean',
            defaultValue: false,
        },
        interval: {
            control: 'number',
            defaultValue: 3000,
        },
        displayCount: {
            control: 'number',
            defaultValue: 3,
        },
    },
};
const Template = (args) => (_jsx(CardCarousel, { ...args }));
// Function to generate cards for demonstration
const generateCards = (count) => {
    const cards = [];
    for (let i = 0; i < count; i++) {
        cards.push(_jsx(CardForStory, { title: `Card ${i + 1}`, description: `This is the description for card ${i + 1}.`, index: i }));
    }
    return cards;
};
export const Default = Template.bind({});
Default.args = {
    cards: generateCards(20),
};
export const ButtonsBottom = Template.bind({});
ButtonsBottom.args = {
    cards: generateCards(20),
    buttonsBottom: true,
};
export const MoveOneAtATime = Template.bind({});
MoveOneAtATime.args = {
    cards: generateCards(20),
    moveOneAtATime: true,
};
export const AutoplayEnabled = Template.bind({});
AutoplayEnabled.args = {
    ...Default.args,
    autoplay: true,
};
export const MoveOneAtATimeBubbleSelectorEnabled = Template.bind({});
MoveOneAtATimeBubbleSelectorEnabled.args = {
    ...Default.args,
    bubbleSelector: true,
    moveOneAtATime: true,
};
export const BubbleSelectorEnabled = Template.bind({});
BubbleSelectorEnabled.args = {
    ...Default.args,
    bubbleSelector: true,
};
export const CustomInterval = Template.bind({});
CustomInterval.args = {
    ...Default.args,
    interval: 2000,
};
export const DisplaySingleCard = Template.bind({});
DisplaySingleCard.args = {
    cards: generateCards(20),
};
export const DisplayMultipleCards = Template.bind({});
DisplayMultipleCards.args = {
    cards: generateCards(20),
};
export const CustomCardWidth = Template.bind({});
CustomCardWidth.args = {
    cards: generateCards(20),
};
export const CustomDisplayCount = Template.bind({});
CustomDisplayCount.args = {
    cards: generateCards(20),
    displayCount: 4,
};
export const AllOptions = Template.bind({});
AllOptions.args = {
    cards: generateCards(20),
    autoplay: true,
    interval: 2500,
    displayCount: 2,
    displayButtons: true,
    bubbleSelector: true,
};
//# sourceMappingURL=CardCarousel.stories.js.map