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
|
// @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",
},
}
|
