File size: 1,736 Bytes
eb1202c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | // @ts-nocheck
import { Card, CardActions, CardDescription, CardTitle } from "./card"
import { Button } from "./button"
const docs = `### Overview
Surface container for grouping related content and actions.
Pair with \`Button\` or \`Tag\` for quick actions.
### API
- Optional: \`variant\` (normal, error, warning, success, info).
- Accepts standard div props.
### Variants and states
- Semantic variants for status-driven messaging.
### Behavior
- Pure presentational container.
### Accessibility
- Provide headings or aria labels when used in isolation.
### Theming/tokens
- Uses \`data-component="card"\` with variant data attributes.
`
export default {
title: "UI/Card",
id: "components-card",
component: Card,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
args: {
variant: "normal",
},
argTypes: {
variant: {
control: "select",
options: ["normal", "error", "warning", "success", "info"],
},
},
render: (props: { variant?: "normal" | "error" | "warning" | "success" | "info" }) => {
return (
<Card variant={props.variant}>
<CardTitle variant={props.variant}>Card title</CardTitle>
<CardDescription>Small supporting text.</CardDescription>
<CardActions>
<Button size="small" variant="secondary">
Action
</Button>
</CardActions>
</Card>
)
},
}
export const Normal = {}
export const Error = {
args: {
variant: "error",
},
}
export const Warning = {
args: {
variant: "warning",
},
}
export const Success = {
args: {
variant: "success",
},
}
export const Info = {
args: {
variant: "info",
},
}
|