@kadconsulting/dry
Version:
KAD Reusable Component Library
83 lines • 3.63 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import Card from './Card';
const meta = {
title: 'Components/Card',
component: Card,
tags: ['autodocs'],
argTypes: {
children: {
control: 'text',
description: 'Content to be rendered inside the card',
},
id: {
control: 'text',
description: 'ID for the card element',
},
className: {
control: 'text',
description: 'Additional CSS class names',
},
passProps: {
control: 'object',
description: 'Additional props to pass to the card component',
},
},
};
export default meta;
export const Default = {
args: {
children: 'This is a basic card',
},
};
export const WithCustomClassName = {
args: {
children: 'Card with custom class',
className: 'custom-card',
},
};
export const WithCustomId = {
args: {
children: 'Card with custom ID',
id: 'custom-card-id',
},
};
export const WithComplexContent = {
args: {
children: (_jsxs(_Fragment, { children: [_jsx("h2", { children: "Card Title" }), _jsx("p", { children: "This is a paragraph inside the card." }), _jsx("button", { children: "Click me" })] })),
},
};
export const WithPassProps = {
args: {
children: 'Card with custom data attribute',
passProps: {
'data-testid': 'card-test-id',
},
},
};
export const MultipleCards = {
render: (args) => (_jsxs("div", { style: { display: 'flex', gap: '20px' }, children: [_jsx(Card, { ...args, children: "Card 1" }), _jsx(Card, { ...args, children: "Card 2" }), _jsx(Card, { ...args, children: "Card 3" })] })),
};
export const NestedCards = {
render: (args) => (_jsxs(Card, { ...args, children: [_jsx("h2", { children: "Parent Card" }), _jsxs(Card, { ...args, children: [_jsx("h3", { children: "Child Card 1" }), _jsx("p", { children: "This is nested inside the parent card." })] }), _jsxs(Card, { ...args, children: [_jsx("h3", { children: "Child Card 2" }), _jsx("p", { children: "This is also nested inside the parent card." })] })] })),
};
export const CustomStyling = {
render: (args) => (_jsx("div", { style: { padding: '20px', background: '#f0f0f0' }, children: _jsxs(Card, { ...args, style: {
backgroundColor: '#ffffff',
boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
borderRadius: '8px',
padding: '20px',
}, children: [_jsx("h2", { style: { color: '#333', marginBottom: '10px' }, children: "Styled Card" }), _jsx("p", { style: { color: '#666' }, children: "This card has custom inline styling applied." })] }) })),
};
export const InteractiveCard = {
render: (args) => {
const [isExpanded, setIsExpanded] = React.useState(false);
return (_jsxs(Card, { ...args, style: {
cursor: 'pointer',
transition: 'all 0.3s ease',
maxHeight: isExpanded ? '300px' : '100px',
overflow: 'hidden',
}, onClick: () => setIsExpanded(!isExpanded), children: [_jsxs("h3", { children: ["Click to ", isExpanded ? 'Collapse' : 'Expand'] }), _jsx("p", { children: "This card expands and collapses when clicked." }), isExpanded && (_jsxs("div", { children: [_jsx("p", { children: "This content is only visible when the card is expanded." }), _jsx("p", { children: "You can add more details or components here." })] }))] }));
},
};
//# sourceMappingURL=Card.stories.js.map