@kadconsulting/dry
Version:
KAD Reusable Component Library
109 lines • 3.34 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Image from './Image';
const meta = {
title: 'Components/@primitives/Image',
component: Image,
tags: ['autodocs'],
argTypes: {
src: {
control: 'text',
description: 'The source URL of the image',
},
alt: {
control: 'text',
description: 'Alternative text for the image',
},
className: {
control: 'text',
description: 'Additional CSS class names',
},
width: {
control: 'number',
description: 'Width of the image',
},
height: {
control: 'number',
description: 'Height of the image',
},
loading: {
control: 'radio',
options: ['lazy', 'eager'],
description: 'Image loading behavior',
},
},
};
export default meta;
export const Default = {
args: {
src: 'https://via.placeholder.com/150',
alt: 'Placeholder Image',
},
};
export const WithCustomDimensions = {
args: {
...Default.args,
width: 200,
height: 100,
},
};
export const WithCustomClass = {
args: {
...Default.args,
className: 'custom-image-class',
},
};
export const LazyLoaded = {
args: {
...Default.args,
loading: 'lazy',
},
};
export const ResponsiveImage = {
args: {
src: 'https://via.placeholder.com/800x400',
alt: 'Responsive Image',
style: { width: '100%', height: 'auto', maxWidth: '800px' },
},
};
export const BackgroundImage = {
render: (args) => (_jsx("div", { style: {
width: '300px',
height: '200px',
backgroundImage: `url(${args.src})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
} })),
args: {
src: 'https://via.placeholder.com/300x200',
},
};
export const MultipleImages = {
render: (args) => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-around' }, children: [_jsx(Image, { ...args, src: 'https://via.placeholder.com/100x100?text=1', alt: 'Image 1' }), _jsx(Image, { ...args, src: 'https://via.placeholder.com/100x100?text=2', alt: 'Image 2' }), _jsx(Image, { ...args, src: 'https://via.placeholder.com/100x100?text=3', alt: 'Image 3' })] })),
};
export const WithFallback = {
render: (args) => (_jsx(Image, { ...args, onError: (e) => {
e.currentTarget.onerror = null;
e.currentTarget.src = 'https://via.placeholder.com/150?text=Fallback';
} })),
args: {
src: 'https://non-existent-image-url.jpg',
alt: 'Image with Fallback',
},
};
// This story demonstrates how the Image might look in a NextJS environment
export const NextJSImage = {
args: {
src: 'https://via.placeholder.com/300',
alt: 'NextJS Optimized Image',
width: 300,
height: 300,
},
parameters: {
docs: {
description: {
story: 'This represents how the Image would render in a NextJS environment. Note that in Storybook, it will still render as a regular image unless properly configured.',
},
},
},
};
//# sourceMappingURL=Image.stories.js.map