@synerise/ds-badge 0.5.7 → 0.6.2
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/CHANGELOG.md +29 -0
- package/README.md +7 -2
- package/dist/Badge.styles.js +1 -1
- package/dist/Badge.types.d.ts +4 -2
- package/dist/Badge.types.js +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,35 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@0.6.1...@synerise/ds-badge@0.6.2) (2022-04-05)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-badge
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.6.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@0.6.0...@synerise/ds-badge@0.6.1) (2022-03-24)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @synerise/ds-badge
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
# [0.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@0.5.7...@synerise/ds-badge@0.6.0) (2022-03-24)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Features
|
|
26
|
+
|
|
27
|
+
* **badge:** allows to use customColor as string ([30febbc](https://github.com/Synerise/synerise-design/commit/30febbc13293cd2936cdf6946a2bc4d289059f60))
|
|
28
|
+
* **badge:** backward compatibility for customColor props ([89954fb](https://github.com/Synerise/synerise-design/commit/89954fb3bc9b2763e3be480b77e3a7b75668750b))
|
|
29
|
+
* **badge:** updates types ([2f4bba3](https://github.com/Synerise/synerise-design/commit/2f4bba3fae451ac49b8c3345332e428bd077f4ce))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
6
35
|
## [0.5.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@0.5.6...@synerise/ds-badge@0.5.7) (2022-03-14)
|
|
7
36
|
|
|
8
37
|
**Note:** Version bump only for package @synerise/ds-badge
|
package/README.md
CHANGED
|
@@ -71,9 +71,9 @@ import Badge from '@synerise/ds-badge'
|
|
|
71
71
|
|
|
72
72
|
| Property | Description | Type | Default |
|
|
73
73
|
| ------------------ | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------- |
|
|
74
|
-
| backgroundColor | Customize the badge color |
|
|
74
|
+
| backgroundColor | Customize the badge color | Color | - |
|
|
75
75
|
| backgroundColorHue | Customize brightness of color | `900` / `800` / `700` / `600` / `500` / `400` / `300` / `200` / `100` / `050` | - |
|
|
76
|
-
|
|
|
76
|
+
| customColor | Customize the badge dot color | `red` | - |
|
|
77
77
|
| count | Number to show in the badge counter | ReactNode | |
|
|
78
78
|
| dot | Display a red dot instead of a counter | boolean | `false` |
|
|
79
79
|
| flag | Show the badge as a flag | boolean | `false` |
|
|
@@ -88,3 +88,8 @@ import Badge from '@synerise/ds-badge'
|
|
|
88
88
|
| textColorHue | Customize brightness of color | `900` / `800` / `700` / `600` / `500` / `400` / `300` / `200` / `100` / `050` | - |
|
|
89
89
|
| title | Text shown when a cursor is hovered over the badge | string | count |
|
|
90
90
|
|
|
91
|
+
### Color
|
|
92
|
+
|
|
93
|
+
| Values |
|
|
94
|
+
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
95
|
+
| `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` / `blue-600` / `green-600` / `mars-600` / `purple-600` / `cyan-600` / `yellow-600` / `violet-600` / `blue-700` / `green-700` / `mars-700` / `purple-700` / `cyan-700` / `yellow-700` / `violet-700` / `blue-500` / `green-500` / `mars-500` / `purple-500` / `cyan-500` / `yellow-500` / `violet-500` |
|
package/dist/Badge.styles.js
CHANGED
|
@@ -36,5 +36,5 @@ export default styled(function (_ref) {
|
|
|
36
36
|
}, function (props) {
|
|
37
37
|
return props.theme.palette[props.textColor + "-" + props.textColorHue];
|
|
38
38
|
}, function (props) {
|
|
39
|
-
return css(["", " ", " ", " ", " ", " ", " ", ";"], props.
|
|
39
|
+
return css(["", " ", " ", " ", " ", " ", " ", ";"], props.customColor && css([".ant-badge-dot,.ant-badge-status-dot{background-color:", ";}"], props.customColor.indexOf('-') >= 0 ? props.theme.palette[props.customColor] : props.theme.palette[props.customColor + "-600"]), props.status === 'active' && !props.customColor && css([".ant-badge-status-active{background-color:", ";}"], props.theme.palette['green-600']), props.status === 'inactive' && !props.customColor && css([".ant-badge-status-inactive{background-color:", ";}"], props.theme.palette['grey-400']), props.status === 'blocked' && !props.customColor && css([".ant-badge-status-blocked{background-color:", ";}"], props.theme.palette['red-600']), props.status === 'processing' && !props.customColor && css([".ant-badge-status-processing{background-color:", ";}"], props.theme.palette['blue-600']), props.outlined && css([".ant-badge-count{box-shadow:0 0 0 1px ", ";}"], props.theme.palette.white), (!!props.flag || !!props.status) && css([".ant-badge-dot{box-shadow:none;&.ant-badge-status-processing{display:inline-block;position:absolute;}}.ant-badge-dot,.ant-badge-status-dot{overflow:visible;border:2px solid ", ";width:10px;height:10px;&::before{display:flex;content:", ";transform:translate3d(-2px,-2px,0);", " transform-origin:center;}&::after{display:flex;content:", ";transform:translate3d(-5px,-5px,0);", " transform-origin:center;}}"], props.theme.palette.white, props.flag ? '""' : 'none', props.pulsing && css(["animation:", " 2s infinite;position:absolute;top:0;left:0;width:10px;height:10px;background-color:inherit;border-radius:50%;"], beforeElementAnimation), props.flag ? '""' : 'none', props.pulsing && css(["animation:", " 2s infinite;position:absolute;top:0;left:0;width:16px;height:16px;background-color:inherit;border-radius:50%;"], afterElementAnimation)));
|
|
40
40
|
});
|
package/dist/Badge.types.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { BadgeProps as AntBadgeProps } from 'antd/lib/badge';
|
|
2
|
-
|
|
2
|
+
import { DefaultColor } from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
|
|
3
|
+
export declare const color: readonly ["red", "green", "grey", "yellow", "blue", "pink", "mars", "orange", "fern", "cyan", "purple", "violet", "white", "transparent"];
|
|
4
|
+
export declare type Color = typeof color[number];
|
|
3
5
|
export declare type ColorHue = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100' | '050';
|
|
4
6
|
export declare type Status = 'active' | 'inactive' | 'blocked' | 'processing' | undefined;
|
|
5
7
|
export interface BadgeProps extends Omit<AntBadgeProps, 'status'> {
|
|
@@ -11,5 +13,5 @@ export interface BadgeProps extends Omit<AntBadgeProps, 'status'> {
|
|
|
11
13
|
backgroundColorHue?: ColorHue;
|
|
12
14
|
textColorHue?: ColorHue;
|
|
13
15
|
pulsing?: boolean;
|
|
14
|
-
customColor?: Color;
|
|
16
|
+
customColor?: Color | DefaultColor;
|
|
15
17
|
}
|
package/dist/Badge.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var color = ['red', 'green', 'grey', 'yellow', 'blue', 'pink', 'mars', 'orange', 'fern', 'cyan', 'purple', 'violet', 'white', 'transparent'];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-badge",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.2",
|
|
4
4
|
"description": "Badge UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"react": ">=16.9.0 < 17.0.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@synerise/ds-utils": "^0.21.
|
|
43
|
+
"@synerise/ds-utils": "^0.21.9"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
|
|
46
46
|
}
|