@kadconsulting/dry
Version:
KAD Reusable Component Library
89 lines • 2.72 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import LoadingOverlay from './LoadingOverlay';
const meta = {
title: 'Components/Feedback/LoadingOverlay',
component: LoadingOverlay,
argTypes: {
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
defaultValue: 'LoadingOverlay-test-id',
},
isLoading: {
control: 'boolean',
description: 'Determines if the loading overlay is visible',
},
componentName: {
control: 'text',
description: 'Name of the component being loaded',
},
logo: {
control: 'object',
description: 'Logo object with src property',
},
className: {
control: 'text',
description: 'Additional CSS class names',
},
id: {
control: 'text',
description: 'ID for the component',
},
},
};
export default meta;
export const Default = {
args: {
'data-testid': 'LoadingOverlay-test-id',
isLoading: true,
componentName: 'Example Component',
logo: { src: 'https://via.placeholder.com/150' },
},
};
export const NotLoading = {
args: {
...Default.args,
isLoading: false,
},
};
export const CustomComponentName = {
args: {
...Default.args,
componentName: 'Custom Component',
},
};
export const WithCustomLogo = {
args: {
...Default.args,
logo: { src: 'https://via.placeholder.com/150?text=Custom+Logo' },
},
};
export const WithCustomClassName = {
args: {
...Default.args,
className: 'custom-loading-overlay',
},
};
export const WithCustomId = {
args: {
...Default.args,
id: 'custom-loading-overlay-id',
},
};
export const AnimatedLogo = {
render: (args) => (_jsx("div", { style: { width: '300px', height: '300px' }, children: _jsx(LoadingOverlay, { ...args }) })),
args: {
...Default.args,
logo: { src: 'https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif' },
},
};
export const LongComponentName = {
args: {
...Default.args,
componentName: 'Very Long Component Name That Might Wrap',
},
};
export const MultipleInstances = {
render: () => (_jsxs("div", { children: [_jsx(LoadingOverlay, { isLoading: true, componentName: 'Component 1', logo: { src: 'https://via.placeholder.com/150?text=Logo+1' } }), _jsx(LoadingOverlay, { isLoading: true, componentName: 'Component 2', logo: { src: 'https://via.placeholder.com/150?text=Logo+2' } })] })),
};
//# sourceMappingURL=LoadingOverlay.stories.js.map