@kadconsulting/dry
Version:
KAD Reusable Component Library
87 lines • 2.22 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ImageCarousel from './ImageCarousel';
export default {
title: 'Components/ImageCarousel',
component: ImageCarousel,
argTypes: {
id: {
control: 'text',
description: 'ID for the component',
},
images: {
control: 'object',
description: 'Array of image objects to display',
},
className: {
control: 'text',
description: 'Additional CSS class for the component',
},
imgDivClassName: {
control: 'text',
description: 'Additional CSS class for the image container',
},
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
defaultValue: 'ImageCarousel-test-id',
},
},
};
const mockImages = [
{
attributes: {
url: 'https://picsum.photos/id/1018/1000/600/',
alternativeText: 'Image 1',
},
},
{
attributes: {
url: 'https://picsum.photos/id/1015/1000/600/',
alternativeText: 'Image 2',
},
},
{
attributes: {
url: 'https://picsum.photos/id/1019/1000/600/',
alternativeText: 'Image 3',
},
},
];
export const Default = {
args: {
id: 'default-carousel',
images: mockImages,
'data-testid': 'ImageCarousel-test-id',
},
};
export const CustomClasses = {
args: {
...Default.args,
className: 'custom-carousel-class',
imgDivClassName: 'custom-image-div-class',
},
};
export const SingleImage = {
args: {
...Default.args,
images: [mockImages[0]],
},
};
export const NoImages = {
args: {
...Default.args,
images: [],
},
};
export const CustomStyling = {
render: (args) => (_jsx("div", { style: {
padding: '20px',
background: '#f0f0f0',
maxWidth: '800px',
margin: '0 auto',
}, children: _jsx(ImageCarousel, { ...args }) })),
args: {
...Default.args,
},
};
//# sourceMappingURL=ImageCarousel.stories.js.map