puppy-lib-components
Version:
A modern TypeScript React component library with generic UI components and football pickem domain components
80 lines (79 loc) • 4.79 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card, CardHeader, CardContent, CardFooter } from './Card';
import { Button } from '../Button';
import { Badge } from '../Badge';
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: ['none', 'sm', 'md', 'lg'],
},
interactive: {
control: { type: 'boolean' },
},
},
};
export default meta;
export const Default = {
args: {
children: 'This is a simple card with default styling.',
},
};
export const WithHeader = {
render: () => (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx("h3", { style: { margin: 0, fontSize: '1.25rem', fontWeight: '600' }, children: "Card Title" }) }), _jsx(CardContent, { children: _jsx("p", { style: { margin: 0, color: 'var(--gray-600)' }, children: "This is the card content. It can contain any React elements." }) })] })),
};
export const WithFooter = {
render: () => (_jsxs(Card, { children: [_jsx(CardContent, { children: _jsx("p", { style: { margin: 0, color: 'var(--gray-600)' }, children: "This card has a footer with action buttons." }) }), _jsx(CardFooter, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem' }, children: [_jsx(Button, { variant: "outline", size: "sm", children: "Cancel" }), _jsx(Button, { size: "sm", children: "Save" })] }) })] })),
};
export const Complete = {
render: () => (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("h3", { style: { margin: 0, fontSize: '1.25rem', fontWeight: '600' }, children: "Project Card" }), _jsx(Badge, { variant: "success", children: "Active" })] }) }), _jsxs(CardContent, { children: [_jsx("p", { style: { margin: '0 0 1rem 0', color: 'var(--gray-600)' }, children: "This is a complete card example with header, content, and footer sections." }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }, children: [_jsx(Badge, { variant: "primary", children: "React" }), _jsx(Badge, { variant: "default", children: "TypeScript" }), _jsx(Badge, { variant: "info", children: "Storybook" })] })] }), _jsx(CardFooter, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem' }, children: [_jsx(Button, { variant: "outline", size: "sm", children: "View" }), _jsx(Button, { variant: "outline", size: "sm", children: "Edit" }), _jsx(Button, { size: "sm", children: "Share" })] }) })] })),
};
export const Elevated = {
args: {
variant: 'elevated',
children: 'This card has an elevated shadow effect.',
},
};
export const Outlined = {
args: {
variant: 'outlined',
children: 'This card has a prominent border outline.',
},
};
export const Interactive = {
args: {
interactive: true,
children: 'This card is interactive and responds to hover and click events.',
},
};
export const NoPadding = {
args: {
padding: 'none',
children: (_jsx("div", { style: { padding: '1rem' }, children: "This card has no default padding, so we add it manually to the content." })),
},
};
export const SmallPadding = {
args: {
padding: 'sm',
children: 'This card has small padding.',
},
};
export const LargePadding = {
args: {
padding: 'lg',
children: 'This card has large padding.',
},
};
export const AllVariants = {
render: () => (_jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' }, children: [_jsx(Card, { variant: "default", style: { width: '200px' }, children: _jsxs(CardContent, { children: [_jsx("h4", { style: { margin: '0 0 0.5rem 0' }, children: "Default" }), _jsx("p", { style: { margin: 0, fontSize: '0.875rem', color: 'var(--gray-600)' }, children: "Standard card with subtle border" })] }) }), _jsx(Card, { variant: "elevated", style: { width: '200px' }, children: _jsxs(CardContent, { children: [_jsx("h4", { style: { margin: '0 0 0.5rem 0' }, children: "Elevated" }), _jsx("p", { style: { margin: 0, fontSize: '0.875rem', color: 'var(--gray-600)' }, children: "Card with shadow elevation" })] }) }), _jsx(Card, { variant: "outlined", style: { width: '200px' }, children: _jsxs(CardContent, { children: [_jsx("h4", { style: { margin: '0 0 0.5rem 0' }, children: "Outlined" }), _jsx("p", { style: { margin: 0, fontSize: '0.875rem', color: 'var(--gray-600)' }, children: "Card with prominent border" })] }) })] })),
};