@synerise/ds-badge 1.0.42 → 1.0.44
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 +8 -0
- package/README.md +2 -2
- package/dist/Badge.d.ts +2 -4
- package/dist/Badge.js +14 -15
- package/dist/Badge.styles.d.ts +4 -4
- package/dist/Badge.styles.js +28 -32
- package/dist/Badge.types.d.ts +2 -2
- package/dist/Badge.types.js +4 -1
- package/dist/assets/style/index-tn0RQdqM.css +0 -0
- package/dist/index.js +4 -1
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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
|
+
## [1.0.44](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@1.0.43...@synerise/ds-badge@1.0.44) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-badge
|
|
9
|
+
|
|
10
|
+
## [1.0.43](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@1.0.42...@synerise/ds-badge@1.0.43) (2026-03-20)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-badge
|
|
13
|
+
|
|
6
14
|
## [1.0.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@1.0.41...@synerise/ds-badge@1.0.42) (2026-03-09)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-badge
|
package/README.md
CHANGED
|
@@ -73,7 +73,7 @@ import Badge from '@synerise/ds-badge'
|
|
|
73
73
|
| ------------------ | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------- |
|
|
74
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
|
-
| customColor | Customize the badge dot color | `
|
|
76
|
+
| customColor | Customize the badge dot color | `BadgeColor` or `DefaultColor` (e.g. `'blue-600'`) | - |
|
|
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` |
|
|
@@ -84,7 +84,7 @@ import Badge from '@synerise/ds-badge'
|
|
|
84
84
|
| showZero | Show the badge when the counter is zero | boolean | `false` |
|
|
85
85
|
| status | Set badge as a status dot | `active` / `inactive` / `blocked` / `processing` / `warning` | - |
|
|
86
86
|
| text | If `status` is set, `text` sets the display text of the status dot | string | '' |
|
|
87
|
-
| textColor | Customize text color in badge | `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` | - |
|
|
87
|
+
| textColor | Customize text color in badge | `red` / `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` / `white` / `transparent` | - |
|
|
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
|
|
package/dist/Badge.d.ts
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import '
|
|
3
|
-
import { type BadgeProps } from './Badge.types';
|
|
4
|
-
import './style/index.less';
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BadgeProps } from './Badge.types';
|
|
5
3
|
declare const Badge: ({ dot, ...props }: BadgeProps) => React.JSX.Element;
|
|
6
4
|
export default Badge;
|
package/dist/Badge.js
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import '@synerise/ds-core/dist/js/style';
|
|
6
|
-
import StyledBadge from './Badge.styles';
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import StyledBadge from "./Badge.styles.js";
|
|
7
3
|
import "./style/index.css";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
const Badge = ({
|
|
5
|
+
dot,
|
|
6
|
+
...props
|
|
7
|
+
}) => {
|
|
8
|
+
const {
|
|
9
|
+
status
|
|
10
|
+
} = props;
|
|
11
|
+
const isDot = dot !== void 0 ? dot : status !== void 0;
|
|
12
|
+
return /* @__PURE__ */ jsx(StyledBadge, { ...props, dot: isDot });
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
Badge as default
|
|
16
16
|
};
|
|
17
|
-
export default Badge;
|
package/dist/Badge.styles.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare const afterElementAnimation: import(
|
|
3
|
-
export declare const beforeElementAnimation: import(
|
|
4
|
-
declare const _default: import(
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export declare const afterElementAnimation: import('styled-components').Keyframes;
|
|
3
|
+
export declare const beforeElementAnimation: import('styled-components').Keyframes;
|
|
4
|
+
declare const _default: import('styled-components').StyledComponent<({ flag, outlined, backgroundColor, textColor, backgroundColorHue, textColorHue, pulsing, customColor, ...rest }: any) => React.JSX.Element, any, {}, never>;
|
|
5
5
|
export default _default;
|
package/dist/Badge.styles.js
CHANGED
|
@@ -1,38 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
if (props.backgroundColor === 'transparent') {
|
|
9
|
-
return 'transparent';
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import Badge from "antd/lib/badge";
|
|
3
|
+
import styled, { css, keyframes } from "styled-components";
|
|
4
|
+
import { macro } from "@synerise/ds-typography";
|
|
5
|
+
const getBackgroundColor = (props) => {
|
|
6
|
+
if (props.backgroundColor === "transparent") {
|
|
7
|
+
return "transparent";
|
|
10
8
|
}
|
|
11
|
-
if (props.backgroundColor ===
|
|
9
|
+
if (props.backgroundColor === "white") {
|
|
12
10
|
return props.theme.palette.white;
|
|
13
11
|
}
|
|
14
|
-
return props.theme.palette[props.backgroundColor
|
|
12
|
+
return props.theme.palette[`${props.backgroundColor}-${props.backgroundColorHue}`];
|
|
15
13
|
};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}).withConfig({
|
|
14
|
+
const afterElementAnimation = /* @__PURE__ */ keyframes(["0%{transform:translate3d(-5px,-5px,0) scale(0.3);opacity:0.9;}100%{transform:translate3d(-5px,-5px,0) scale(1.5);opacity:0;}"]);
|
|
15
|
+
const beforeElementAnimation = /* @__PURE__ */ keyframes(["0%{transform:translate3d(-2px,-2px,0) scale(0.5);opacity:0.9;}100%{transform:translate3d(-2px,-2px,0) scale(1.5);opacity:0;}"]);
|
|
16
|
+
const StyledBadge = styled(({
|
|
17
|
+
flag,
|
|
18
|
+
outlined,
|
|
19
|
+
backgroundColor,
|
|
20
|
+
textColor,
|
|
21
|
+
backgroundColorHue,
|
|
22
|
+
textColorHue,
|
|
23
|
+
pulsing,
|
|
24
|
+
customColor,
|
|
25
|
+
...rest
|
|
26
|
+
}) => /* @__PURE__ */ jsx(Badge, { ...rest })).withConfig({
|
|
30
27
|
displayName: "Badgestyles",
|
|
31
28
|
componentId: "sc-1ci72bj-0"
|
|
32
|
-
})(["&&{.ant-scroll-number-only{height:16px;&:last-of-type:not(:first-of-type) > p{padding-right:1px;}& > p{", ";color:inherit;line-height:16px;height:16px;font-weight:400;}}.ant-badge-count{box-shadow:none;height:16px;padding:0 3px;line-height:16px;min-width:16px;font-size:13px;background-color:", ";color:", ";}", ""], macro.h200,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
});
|
|
29
|
+
})(["&&{.ant-scroll-number-only{height:16px;&:last-of-type:not(:first-of-type) > p{padding-right:1px;}& > p{", ";color:inherit;line-height:16px;height:16px;font-weight:400;}}.ant-badge-count{box-shadow:none;height:16px;padding:0 3px;line-height:16px;min-width:16px;font-size:13px;background-color:", ";color:", ";}", ""], macro.h200, (props) => getBackgroundColor(props), (props) => props.theme.palette[`${props.textColor}-${props.textColorHue}`], (props) => 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))));
|
|
30
|
+
export {
|
|
31
|
+
afterElementAnimation,
|
|
32
|
+
beforeElementAnimation,
|
|
33
|
+
StyledBadge as default
|
|
34
|
+
};
|
package/dist/Badge.types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { BadgeProps as AntBadgeProps } from 'antd/lib/badge';
|
|
2
|
+
import { DefaultColor } from '@synerise/ds-core';
|
|
3
3
|
export declare const color: readonly ["red", "green", "grey", "yellow", "blue", "pink", "mars", "orange", "fern", "cyan", "purple", "violet", "white", "transparent"];
|
|
4
4
|
export type Color = (typeof color)[number];
|
|
5
5
|
export type ColorHue = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100' | '050';
|
package/dist/Badge.types.js
CHANGED
|
@@ -1 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
const color = ["red", "green", "grey", "yellow", "blue", "pink", "mars", "orange", "fern", "cyan", "purple", "violet", "white", "transparent"];
|
|
2
|
+
export {
|
|
3
|
+
color
|
|
4
|
+
};
|
|
File without changes
|
package/dist/index.js
CHANGED
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-badge",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.44",
|
|
4
4
|
"description": "Badge UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
26
|
-
"test": "vitest",
|
|
27
|
-
"test:watch": "
|
|
26
|
+
"test": "vitest run",
|
|
27
|
+
"test:watch": "vitest",
|
|
28
28
|
"types": "tsc --noEmit",
|
|
29
29
|
"check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
|
|
30
30
|
"upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-icon": "^1.
|
|
39
|
-
"@synerise/ds-typography": "^1.1.
|
|
38
|
+
"@synerise/ds-icon": "^1.15.1",
|
|
39
|
+
"@synerise/ds-typography": "^1.1.13"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@synerise/ds-core": "*",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"styled-components": "^5.3.3",
|
|
46
46
|
"vitest": "4"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
49
49
|
}
|