@fvc/badge 1.0.1 → 1.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 +122 -0
- package/package.json +11 -1
package/README.md
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# @fvc/badge
|
|
2
|
+
|
|
3
|
+
`@fvc/badge` provides a FE-VIS styled badge primitive on top of Ant Design Badge. It keeps the Ant Design Badge API familiar while applying the design-system success colour token and a custom CSS prefix.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @fvc/badge
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Peer Dependencies
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
bun add react antd
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Import
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { Badge } from '@fvc/badge';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { Badge } from '@fvc/badge';
|
|
27
|
+
|
|
28
|
+
export function StatusIndicator() {
|
|
29
|
+
return <Badge status="success" text="Active" />;
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Common Usage
|
|
34
|
+
|
|
35
|
+
### Status Badge
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
<Badge status="success" text="Active" />
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Count Badge
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
<Badge count={5}>
|
|
45
|
+
<NotificationIcon />
|
|
46
|
+
</Badge>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Dot Badge
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
<Badge dot>
|
|
53
|
+
<MessageIcon />
|
|
54
|
+
</Badge>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Zero Count
|
|
58
|
+
|
|
59
|
+
By default antd hides a zero count. Use `showZero` to display it.
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<Badge count={0} showZero>
|
|
63
|
+
<InboxIcon />
|
|
64
|
+
</Badge>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Props
|
|
68
|
+
|
|
69
|
+
| Prop | Type | Description |
|
|
70
|
+
| --- | --- | --- |
|
|
71
|
+
| `status` | `'success'` | Status indicator variant. Currently only `'success'` is supported. |
|
|
72
|
+
| `testId` | `string` | Maps to `data-testid`. |
|
|
73
|
+
| *All `BadgeProps`* | — | All Ant Design Badge props are supported (`count`, `dot`, `showZero`, `overflowCount`, `offset`, `color`, `text`, etc.) except `text`, `prefixCls`, `scrollNumberPrefixCls`, and `status` which are managed internally. |
|
|
74
|
+
|
|
75
|
+
## Consumer Example
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import { Badge } from '@fvc/badge';
|
|
79
|
+
|
|
80
|
+
export function RecordStatus({ isActive }: { isActive: boolean }) {
|
|
81
|
+
if (!isActive) return null;
|
|
82
|
+
|
|
83
|
+
return (
|
|
84
|
+
<Badge
|
|
85
|
+
status="success"
|
|
86
|
+
text="Active"
|
|
87
|
+
testId="record-status-badge"
|
|
88
|
+
/>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
## Testing
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
<Badge status="success" text="Active" testId="status-badge" />
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
screen.getByTestId('status-badge');
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## CSS Customisation
|
|
104
|
+
|
|
105
|
+
```css
|
|
106
|
+
:root {
|
|
107
|
+
/* Success dot and count background */
|
|
108
|
+
--green-400: #4caf50;
|
|
109
|
+
|
|
110
|
+
/* Success text colour */
|
|
111
|
+
--badge-active-color-100: #ffffff;
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Development
|
|
116
|
+
|
|
117
|
+
```bash
|
|
118
|
+
bun run lint
|
|
119
|
+
bun run type-check
|
|
120
|
+
bun run test
|
|
121
|
+
bun run build
|
|
122
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fvc/badge",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2-rc.0",
|
|
4
|
+
"keywords": [
|
|
5
|
+
"react",
|
|
6
|
+
"react-component",
|
|
7
|
+
"fvc",
|
|
8
|
+
"fe-vis-core",
|
|
9
|
+
"ui",
|
|
10
|
+
"badge",
|
|
11
|
+
"design-system",
|
|
12
|
+
"antd"
|
|
13
|
+
],
|
|
4
14
|
"main": "./dist/lib/index.js",
|
|
5
15
|
"types": "./dist/lib/badge/src/index.d.ts",
|
|
6
16
|
"files": [
|