@fvc/badge 1.0.0 → 1.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997
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/dist/lib/index.js +2 -2
- package/package.json +19 -3
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/dist/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Badge as e}from"antd";import t from"react";function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}"function"==typeof SuppressedError&&SuppressedError;var r,a={exports:{}};
|
|
2
2
|
/*!
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|
|
5
5
|
http://jedwatson.github.io/classnames
|
|
6
|
-
*/var s
|
|
6
|
+
*/var o,s=n((r||(r=1,o=a,function(){var e={}.hasOwnProperty;function t(){for(var e="",t=0;t<arguments.length;t++){var a=arguments[t];a&&(e=r(e,n(a)))}return e}function n(n){if("string"==typeof n||"number"==typeof n)return n;if("object"!=typeof n)return"";if(Array.isArray(n))return t.apply(null,n);if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]"))return n.toString();var a="";for(var o in n)e.call(n,o)&&n[o]&&(a=r(a,o));return a}function r(e,t){return t?e?e+" "+t:e+t:e}o.exports?(t.default=t,o.exports=t):window.classNames=t}()),a.exports));!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.fvc-badge {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.fvc-badge .fvc-badge-dot {\n width: 8px;\n height: 8px;\n position: relative;\n transform: none;\n}\n.fvc-badge .fvc-badge-dot.fvc-badge-status-success {\n background-color: var(--green-400);\n}\n.fvc-badge.fvc-badge-status .fvc-badge-status-dot {\n width: 8px;\n height: 8px;\n}\n.fvc-badge.fvc-badge-status .fvc-badge-status-success {\n background-color: var(--green-400);\n}\n.fvc-badge .fvc-badge-count {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n height: 16px;\n border-radius: 20px;\n padding-left: 5px;\n padding-right: 5px;\n box-shadow: none;\n font-family: "Montserrat", sans-serif;\n font-size: 10px;\n font-weight: 700;\n line-height: 100%;\n letter-spacing: 0;\n}\n.fvc-badge .fvc-badge-count.fvc-badge-status-success {\n background-color: var(--green-400);\n color: var(--badge-active-color-100);\n}');const c="fvc-badge",i=`${c}-scroll-number`,d=n=>{var{className:r,status:a="success",testId:o}=n,d=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}(n,["className","status","testId"]);const f=s(r);return t.createElement(e,Object.assign({},d,{"data-testid":o,className:f,prefixCls:c,scrollNumberPrefixCls:i,status:a}))};export{d as Badge};
|
package/package.json
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fvc/badge",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
|
|
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": [
|
|
@@ -18,9 +28,15 @@
|
|
|
18
28
|
}
|
|
19
29
|
},
|
|
20
30
|
"scripts": {
|
|
21
|
-
"build": "
|
|
31
|
+
"build": "rollup -c ./rollup.config.mjs",
|
|
32
|
+
"clean": "rm -rf dist && rm -rf .rollup.cache && rm -rf .turbo",
|
|
33
|
+
"lint": "eslint --config ../../eslint.config.js \"src/**/*.{ts,tsx}\"",
|
|
34
|
+
"lint:fix": "eslint --config ../../eslint.config.js \"src/**/*.{ts,tsx}\" --fix",
|
|
35
|
+
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
|
|
36
|
+
"type-check": "tsc --noEmit",
|
|
37
|
+
"test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
|
|
22
38
|
},
|
|
23
|
-
"
|
|
39
|
+
"peerDependencies": {
|
|
24
40
|
"react": "^18.0.0",
|
|
25
41
|
"antd": "^5.0.0"
|
|
26
42
|
}
|