@kadconsulting/dry
Version:
KAD Reusable Component Library
90 lines • 2.53 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
// CLI Version 1.1.0
// Component Version 1.1.0
import React from 'react';
import HeadingSection from './HeadingSection';
const meta = {
title: 'Components/Layout/HeadingSection',
component: HeadingSection,
argTypes: {
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
defaultValue: 'HeadingSection-test-id',
},
heading: {
control: 'text',
description: 'Main heading text',
},
supportingText: {
control: 'text',
description: 'Supporting text below the heading',
},
buttonInfo: {
control: 'object',
description: 'Button configuration',
},
logoImage: {
control: 'text',
description: 'URL for the logo image used in loading state',
},
onClick: {
action: 'clicked',
description: 'Function called when the button is clicked',
},
className: {
control: 'text',
description: 'Additional CSS class names',
},
},
};
export default meta;
export const Default = {
args: {
'data-testid': 'HeadingSection-test-id',
heading: 'Welcome to Our Website',
supportingText: 'Discover amazing features and services',
buttonInfo: {
buttonText: 'Get Started',
buttonLink: '#',
},
},
};
export const WithoutButton = {
args: {
...Default.args,
buttonInfo: undefined,
},
};
export const WithLogo = {
args: {
...Default.args,
logoImage: 'https://example.com/logo.png',
},
};
export const LoadingState = {
render: (args) => {
const [loading, setLoading] = React.useState(false);
return (_jsx(HeadingSection, { ...args, onClick: () => {
setLoading(true);
setTimeout(() => setLoading(false), 2000);
} }));
},
args: {
...Default.args,
logoImage: 'https://example.com/logo.png',
},
};
export const CustomStyling = {
args: {
...Default.args,
className: 'custom-heading-section',
},
};
export const CustomRendering = {
render: (args) => (_jsx("div", { style: { padding: '20px', background: '#f0f0f0' }, children: _jsx(HeadingSection, { ...args }) })),
args: {
...Default.args,
},
};
//# sourceMappingURL=HeadingSection.stories.js.map