eventx-design-system
Version:
Design System do EventX
74 lines (73 loc) • 2.08 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card } from './Card';
const meta = {
title: 'Components/Card',
component: Card,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
variant: {
control: { type: 'select' },
options: ['default', 'elevated', 'outlined'],
},
padding: {
control: { type: 'select' },
options: ['sm', 'md', 'lg', 'xl'],
},
interactive: {
control: { type: 'boolean' },
},
},
};
export default meta;
export const Default = {
args: {
children: 'Conteúdo do card',
},
};
export const Elevated = {
args: {
variant: 'elevated',
children: 'Card com elevação',
},
};
export const Outlined = {
args: {
variant: 'outlined',
children: 'Card com borda',
},
};
export const SmallPadding = {
args: {
padding: 'sm',
children: 'Card com padding pequeno',
},
};
export const LargePadding = {
args: {
padding: 'lg',
children: 'Card com padding grande',
},
};
export const ExtraLargePadding = {
args: {
padding: 'xl',
children: 'Card com padding extra grande',
},
};
export const Interactive = {
args: {
interactive: true,
children: 'Card interativo (hover para ver efeito)',
},
};
export const WithTitle = {
args: {
children: (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#333' }, children: "T\u00EDtulo do Card" }), _jsx("p", { style: { margin: 0, color: '#666' }, children: "Este \u00E9 um exemplo de card com t\u00EDtulo e conte\u00FAdo." })] })),
},
};
export const AllVariants = {
render: () => (_jsxs("div", { style: { display: 'flex', gap: '16px', flexWrap: 'wrap' }, children: [_jsx(Card, { variant: "default", children: "Default" }), _jsx(Card, { variant: "elevated", children: "Elevated" }), _jsx(Card, { variant: "outlined", children: "Outlined" })] })),
};