@fvc/card 3.0.1 → 3.0.2-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +233 -0
- package/package.json +14 -4
package/README.md
ADDED
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
# @fvc/card
|
|
2
|
+
|
|
3
|
+
`@fvc/card` provides FE-VIS styled card primitives on top of Ant Design Card. It keeps the Ant Design Card API familiar while adding type variants, height and scroll controls, active theme styling, overlay mode, and compound subcomponents for structured card content: `Card.Title`, `Card.Label`, and `Card.Value`.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @fvc/card
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Peer Dependencies
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
bun add react antd @fvc/box @fvc/typography @fvc/utils
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Import
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { Card } from '@fvc/card';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { Card } from '@fvc/card';
|
|
27
|
+
|
|
28
|
+
export function SummaryCard() {
|
|
29
|
+
return (
|
|
30
|
+
<Card>
|
|
31
|
+
<Card.Title>Total Revenue</Card.Title>
|
|
32
|
+
<Card.Label>This month</Card.Label>
|
|
33
|
+
<Card.Value>₼ 124,500</Card.Value>
|
|
34
|
+
</Card>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Variants
|
|
40
|
+
|
|
41
|
+
| Value | Description |
|
|
42
|
+
| --- | --- |
|
|
43
|
+
| `'inner'` | Inner card — white background, used for nested cards. |
|
|
44
|
+
| `'dark-gray'` | Dark gray background. |
|
|
45
|
+
| `'tab'` | Tab-style card — white background. |
|
|
46
|
+
| `'gray'` | Gray background. |
|
|
47
|
+
| `'round'` | Rounded corners with white background. |
|
|
48
|
+
|
|
49
|
+
## Common Usage
|
|
50
|
+
|
|
51
|
+
### Card Types
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
<Card type="inner">Inner card</Card>
|
|
55
|
+
<Card type="gray">Gray card</Card>
|
|
56
|
+
<Card type="round">Round card</Card>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### With Border
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<Card bordered borderColor="var(--blue-gray-200)">
|
|
63
|
+
Content
|
|
64
|
+
</Card>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Fixed Height with Scroll
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
<Card height={400} scroll>
|
|
71
|
+
{/* Long content */}
|
|
72
|
+
</Card>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Active Theme
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
<Card isActiveTheme>
|
|
79
|
+
Selected card
|
|
80
|
+
</Card>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Overlay (Clickable Card)
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
<Card overlay onClick={handleSelect}>
|
|
87
|
+
Clickable card
|
|
88
|
+
</Card>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Border Radius
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
<Card border={16}>Medium radius</Card>
|
|
95
|
+
<Card border={32}>Large radius</Card>
|
|
96
|
+
<Card disableBorderRadius>No radius</Card>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Structured Content
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
<Card>
|
|
103
|
+
<Card.Title>Contract #12345</Card.Title>
|
|
104
|
+
<Card.Label icon={<CalendarIcon />}>Signed date</Card.Label>
|
|
105
|
+
<Card.Value>12 June 2026</Card.Value>
|
|
106
|
+
</Card>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Value with Icon
|
|
110
|
+
|
|
111
|
+
```tsx
|
|
112
|
+
<Card.Value icon={<TrendUpIcon />} iconPosition="right" color="var(--green-500)" size={20} weight={700}>
|
|
113
|
+
+12.4%
|
|
114
|
+
</Card.Value>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Props
|
|
118
|
+
|
|
119
|
+
### Card
|
|
120
|
+
|
|
121
|
+
| Prop | Type | Description |
|
|
122
|
+
| --- | --- | --- |
|
|
123
|
+
| `type` | `'inner' \| 'dark-gray' \| 'tab' \| 'gray' \| 'round'` | Visual variant. |
|
|
124
|
+
| `bordered` | `boolean` | Show card border. Defaults to `false`. |
|
|
125
|
+
| `borderColor` | `string` | Custom border colour. |
|
|
126
|
+
| `border` | `'default' \| 16 \| 32` | Border radius size. |
|
|
127
|
+
| `disableBorderRadius` | `boolean` | Remove border radius. |
|
|
128
|
+
| `height` | `string \| number` | Exact height. |
|
|
129
|
+
| `minHeight` | `string \| number` | Minimum height. |
|
|
130
|
+
| `scroll` | `boolean` | Enable vertical scrolling. |
|
|
131
|
+
| `isActiveTheme` | `boolean` | Apply active theme styling. Defaults to `false`. |
|
|
132
|
+
| `overlay` | `boolean` | Show overlay with pointer cursor. Defaults to `false`. |
|
|
133
|
+
| `testId` | `string` | Maps to `data-testid`. |
|
|
134
|
+
| *All `CardProps`* | — | All Ant Design Card props (`title`, `extra`, `children`, `bodyStyle`, `headStyle`, etc.). |
|
|
135
|
+
|
|
136
|
+
### Card.Title
|
|
137
|
+
|
|
138
|
+
| Prop | Type | Description |
|
|
139
|
+
| --- | --- | --- |
|
|
140
|
+
| `children` | `ReactNode \| string` | Title text. |
|
|
141
|
+
| `testId` | `string` | Maps to `data-testid`. |
|
|
142
|
+
|
|
143
|
+
### Card.Label
|
|
144
|
+
|
|
145
|
+
| Prop | Type | Description |
|
|
146
|
+
| --- | --- | --- |
|
|
147
|
+
| `children` | `ReactNode \| string` | Label text. |
|
|
148
|
+
| `icon` | `ReactNode` | Icon displayed after the label. |
|
|
149
|
+
| `isEnableMargin` | `boolean` | Add top margin. Defaults to `true`. |
|
|
150
|
+
| `testId` | `string` | Maps to `data-testid`. |
|
|
151
|
+
|
|
152
|
+
### Card.Value
|
|
153
|
+
|
|
154
|
+
| Prop | Type | Description |
|
|
155
|
+
| --- | --- | --- |
|
|
156
|
+
| `children` | `ReactNode` | Value content. |
|
|
157
|
+
| `icon` | `ReactElement` | Icon displayed next to the value. |
|
|
158
|
+
| `iconPosition` | `'right' \| 'left'` | Icon position. Defaults to `'right'`. |
|
|
159
|
+
| `color` | `string` | Text colour. Defaults to `var(--body-text-color-1000)`. |
|
|
160
|
+
| `size` | `number` | Font size. Defaults to `16`. |
|
|
161
|
+
| `weight` | `number` | Font weight. Defaults to `500`. |
|
|
162
|
+
| `lineHeight` | `number` | Line height. Defaults to `20`. |
|
|
163
|
+
| `testId` | `string` | Maps to `data-testid`. |
|
|
164
|
+
|
|
165
|
+
## Consumer Example
|
|
166
|
+
|
|
167
|
+
```tsx
|
|
168
|
+
import { Card } from '@fvc/card';
|
|
169
|
+
|
|
170
|
+
export function MetricCard({ label, value, trend, isSelected, onSelect }) {
|
|
171
|
+
return (
|
|
172
|
+
<Card
|
|
173
|
+
type="inner"
|
|
174
|
+
bordered
|
|
175
|
+
isActiveTheme={isSelected}
|
|
176
|
+
overlay
|
|
177
|
+
onClick={onSelect}
|
|
178
|
+
testId="metric-card"
|
|
179
|
+
>
|
|
180
|
+
<Card.Title>{label}</Card.Title>
|
|
181
|
+
<Card.Label>Current period</Card.Label>
|
|
182
|
+
<Card.Value
|
|
183
|
+
icon={trend > 0 ? <TrendUpIcon /> : <TrendDownIcon />}
|
|
184
|
+
iconPosition="right"
|
|
185
|
+
color={trend > 0 ? 'var(--green-500)' : 'var(--red-500)'}
|
|
186
|
+
weight={700}
|
|
187
|
+
>
|
|
188
|
+
{value}
|
|
189
|
+
</Card.Value>
|
|
190
|
+
</Card>
|
|
191
|
+
);
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
## Testing
|
|
196
|
+
|
|
197
|
+
```tsx
|
|
198
|
+
<Card testId="summary-card">
|
|
199
|
+
<Card.Title>Total</Card.Title>
|
|
200
|
+
</Card>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
screen.getByTestId('summary-card');
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## CSS Customisation
|
|
208
|
+
|
|
209
|
+
```css
|
|
210
|
+
:root {
|
|
211
|
+
/* Default background */
|
|
212
|
+
--blue-20: #f0f4ff;
|
|
213
|
+
|
|
214
|
+
/* Inner / Tab / Round / Gray background */
|
|
215
|
+
--neutral-0: #ffffff;
|
|
216
|
+
|
|
217
|
+
/* Active theme */
|
|
218
|
+
--theme-primary: #e8f5e9;
|
|
219
|
+
--theme-secondary: #c8e6c9;
|
|
220
|
+
|
|
221
|
+
/* Text */
|
|
222
|
+
--body-text-color-1000: #1a1a1a;
|
|
223
|
+
}
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
## Development
|
|
227
|
+
|
|
228
|
+
```bash
|
|
229
|
+
bun run lint
|
|
230
|
+
bun run type-check
|
|
231
|
+
bun run test
|
|
232
|
+
bun run build
|
|
233
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fvc/card",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.2-rc.0",
|
|
4
|
+
"keywords": [
|
|
5
|
+
"react",
|
|
6
|
+
"react-component",
|
|
7
|
+
"fvc",
|
|
8
|
+
"fe-vis-core",
|
|
9
|
+
"ui",
|
|
10
|
+
"card",
|
|
11
|
+
"design-system",
|
|
12
|
+
"antd"
|
|
13
|
+
],
|
|
4
14
|
"main": "./dist/lib/index.js",
|
|
5
15
|
"types": "./dist/lib/card/src/index.d.ts",
|
|
6
16
|
"files": [
|
|
@@ -27,9 +37,9 @@
|
|
|
27
37
|
"test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
|
|
28
38
|
},
|
|
29
39
|
"peerDependencies": {
|
|
30
|
-
"@fvc/box": "^1.
|
|
31
|
-
"@fvc/typography": "^3.0.
|
|
32
|
-
"@fvc/utils": "^3.0.
|
|
40
|
+
"@fvc/box": "^1.1.2-rc.0",
|
|
41
|
+
"@fvc/typography": "^3.0.2-rc.0",
|
|
42
|
+
"@fvc/utils": "^3.0.2-rc.0",
|
|
33
43
|
"react": "^18.0.0",
|
|
34
44
|
"antd": "^5.0.0"
|
|
35
45
|
}
|