@kadconsulting/dry
Version:
KAD Reusable Component Library
96 lines • 2.66 kB
JavaScript
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