@elliemae/ds-notification-badge 2.0.0-next.7 → 2.0.0-rc.10

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.
@@ -13,14 +13,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
13
13
 
14
14
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
15
15
 
16
- const NotificationBadge = ({
17
- type,
18
- value,
19
- size,
20
- disabled,
21
- position,
22
- Component
23
- }) => {
16
+ const NotificationBadge = _ref => {
17
+ let {
18
+ type,
19
+ value,
20
+ size,
21
+ disabled,
22
+ position,
23
+ Component
24
+ } = _ref;
24
25
  const Badge = type === 'number' ? style.NumericBadge : style.DotBadge;
25
26
  const relatedComponentRef = react.useRef(null);
26
27
  const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;
package/cjs/style.js CHANGED
@@ -13,32 +13,60 @@ const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
13
13
  })(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
14
14
  const GenericBadge = /*#__PURE__*/styled__default["default"].span.withConfig({
15
15
  componentId: "sc-lsxuo6-1"
16
- })(["position:relative;top:", ";left:", ";right:", ";"], ({
17
- top
18
- }) => top ? "".concat(top, "px") : 'unset', ({
19
- left
20
- }) => left ? "".concat(left, "px") : 'unset', ({
21
- right
22
- }) => right ? "".concat(right, "px") : 'unset');
16
+ })(["position:relative;top:", ";left:", ";right:", ";"], _ref => {
17
+ let {
18
+ top
19
+ } = _ref;
20
+ return top ? "".concat(top, "px") : 'unset';
21
+ }, _ref2 => {
22
+ let {
23
+ left
24
+ } = _ref2;
25
+ return left ? "".concat(left, "px") : 'unset';
26
+ }, _ref3 => {
27
+ let {
28
+ right
29
+ } = _ref3;
30
+ return right ? "".concat(right, "px") : 'unset';
31
+ });
23
32
  const NumericBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
24
33
  componentId: "sc-lsxuo6-2"
25
- })(["display:flex;justify-content:center;align-items:center;width:fit-content;color:#fff;padding:", ";padding-top:2px;background-color:", ";border-radius:", ";font-size:", ";font-weight:", ";height:", ";min-width:", ";"], ({
26
- value
27
- }) => value > 9 ? '0 5px' : '0', ({
28
- disabled,
29
- theme
30
- }) => disabled ? theme.colors.neutral[500] : theme.colors.danger[900], ({
31
- value
32
- }) => value > 9 ? '10px' : '50%', ({
33
- size
34
- }) => size === 'l' ? '16px' : '12px', ({
35
- size
36
- }) => size === 'l' ? '400' : '600', ({
37
- size
38
- }) => size === 'l' ? '21px' : '15px', ({
39
- size,
40
- value
41
- }) => {
34
+ })(["display:flex;justify-content:center;align-items:center;width:fit-content;color:#fff;padding:", ";padding-top:2px;background-color:", ";border-radius:", ";font-size:", ";font-weight:", ";height:", ";min-width:", ";"], _ref4 => {
35
+ let {
36
+ value
37
+ } = _ref4;
38
+ return value > 9 ? '0 5px' : '0';
39
+ }, _ref5 => {
40
+ let {
41
+ disabled,
42
+ theme
43
+ } = _ref5;
44
+ return disabled ? theme.colors.neutral[500] : theme.colors.danger[900];
45
+ }, _ref6 => {
46
+ let {
47
+ value
48
+ } = _ref6;
49
+ return value > 9 ? '10px' : '50%';
50
+ }, _ref7 => {
51
+ let {
52
+ size
53
+ } = _ref7;
54
+ return size === 'l' ? '16px' : '12px';
55
+ }, _ref8 => {
56
+ let {
57
+ size
58
+ } = _ref8;
59
+ return size === 'l' ? '400' : '600';
60
+ }, _ref9 => {
61
+ let {
62
+ size
63
+ } = _ref9;
64
+ return size === 'l' ? '21px' : '15px';
65
+ }, _ref10 => {
66
+ let {
67
+ size,
68
+ value
69
+ } = _ref10;
42
70
  if (size === 'l' && value > 9) return '30px';
43
71
  if (size === 'l' && value <= 9) return '21px';
44
72
  if (size === 's' && value > 9) return '21px';
@@ -46,14 +74,23 @@ const NumericBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withC
46
74
  });
47
75
  const DotBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
48
76
  componentId: "sc-lsxuo6-3"
49
- })(["background-color:", ";width:", ";height:", ";border-radius:100%;"], ({
50
- disabled,
51
- theme
52
- }) => disabled ? theme.colors.neutral[500] : theme.colors.brand[500], ({
53
- size
54
- }) => size === 'l' ? '15px' : '10px', ({
55
- size
56
- }) => size === 'l' ? '15px' : '10px');
77
+ })(["background-color:", ";width:", ";height:", ";border-radius:100%;"], _ref11 => {
78
+ let {
79
+ disabled,
80
+ theme
81
+ } = _ref11;
82
+ return disabled ? theme.colors.neutral[500] : theme.colors.brand[500];
83
+ }, _ref12 => {
84
+ let {
85
+ size
86
+ } = _ref12;
87
+ return size === 'l' ? '15px' : '10px';
88
+ }, _ref13 => {
89
+ let {
90
+ size
91
+ } = _ref13;
92
+ return size === 'l' ? '15px' : '10px';
93
+ });
57
94
 
58
95
  exports.DotBadge = DotBadge;
59
96
  exports.GenericBadge = GenericBadge;
@@ -5,14 +5,15 @@ import { describe } from 'react-desc';
5
5
  import { notificationBadgeProps, defaultProps } from './prop-types.js';
6
6
  import { Wrapper, NumericBadge, DotBadge } from './style.js';
7
7
 
8
- const NotificationBadge = ({
9
- type,
10
- value,
11
- size,
12
- disabled,
13
- position,
14
- Component
15
- }) => {
8
+ const NotificationBadge = _ref => {
9
+ let {
10
+ type,
11
+ value,
12
+ size,
13
+ disabled,
14
+ position,
15
+ Component
16
+ } = _ref;
16
17
  const Badge = type === 'number' ? NumericBadge : DotBadge;
17
18
  const relatedComponentRef = useRef(null);
18
19
  const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;
package/esm/style.js CHANGED
@@ -5,32 +5,60 @@ const Wrapper = /*#__PURE__*/styled.div.withConfig({
5
5
  })(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
6
6
  const GenericBadge = /*#__PURE__*/styled.span.withConfig({
7
7
  componentId: "sc-lsxuo6-1"
8
- })(["position:relative;top:", ";left:", ";right:", ";"], ({
9
- top
10
- }) => top ? "".concat(top, "px") : 'unset', ({
11
- left
12
- }) => left ? "".concat(left, "px") : 'unset', ({
13
- right
14
- }) => right ? "".concat(right, "px") : 'unset');
8
+ })(["position:relative;top:", ";left:", ";right:", ";"], _ref => {
9
+ let {
10
+ top
11
+ } = _ref;
12
+ return top ? "".concat(top, "px") : 'unset';
13
+ }, _ref2 => {
14
+ let {
15
+ left
16
+ } = _ref2;
17
+ return left ? "".concat(left, "px") : 'unset';
18
+ }, _ref3 => {
19
+ let {
20
+ right
21
+ } = _ref3;
22
+ return right ? "".concat(right, "px") : 'unset';
23
+ });
15
24
  const NumericBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
16
25
  componentId: "sc-lsxuo6-2"
17
- })(["display:flex;justify-content:center;align-items:center;width:fit-content;color:#fff;padding:", ";padding-top:2px;background-color:", ";border-radius:", ";font-size:", ";font-weight:", ";height:", ";min-width:", ";"], ({
18
- value
19
- }) => value > 9 ? '0 5px' : '0', ({
20
- disabled,
21
- theme
22
- }) => disabled ? theme.colors.neutral[500] : theme.colors.danger[900], ({
23
- value
24
- }) => value > 9 ? '10px' : '50%', ({
25
- size
26
- }) => size === 'l' ? '16px' : '12px', ({
27
- size
28
- }) => size === 'l' ? '400' : '600', ({
29
- size
30
- }) => size === 'l' ? '21px' : '15px', ({
31
- size,
32
- value
33
- }) => {
26
+ })(["display:flex;justify-content:center;align-items:center;width:fit-content;color:#fff;padding:", ";padding-top:2px;background-color:", ";border-radius:", ";font-size:", ";font-weight:", ";height:", ";min-width:", ";"], _ref4 => {
27
+ let {
28
+ value
29
+ } = _ref4;
30
+ return value > 9 ? '0 5px' : '0';
31
+ }, _ref5 => {
32
+ let {
33
+ disabled,
34
+ theme
35
+ } = _ref5;
36
+ return disabled ? theme.colors.neutral[500] : theme.colors.danger[900];
37
+ }, _ref6 => {
38
+ let {
39
+ value
40
+ } = _ref6;
41
+ return value > 9 ? '10px' : '50%';
42
+ }, _ref7 => {
43
+ let {
44
+ size
45
+ } = _ref7;
46
+ return size === 'l' ? '16px' : '12px';
47
+ }, _ref8 => {
48
+ let {
49
+ size
50
+ } = _ref8;
51
+ return size === 'l' ? '400' : '600';
52
+ }, _ref9 => {
53
+ let {
54
+ size
55
+ } = _ref9;
56
+ return size === 'l' ? '21px' : '15px';
57
+ }, _ref10 => {
58
+ let {
59
+ size,
60
+ value
61
+ } = _ref10;
34
62
  if (size === 'l' && value > 9) return '30px';
35
63
  if (size === 'l' && value <= 9) return '21px';
36
64
  if (size === 's' && value > 9) return '21px';
@@ -38,13 +66,22 @@ const NumericBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
38
66
  });
39
67
  const DotBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
40
68
  componentId: "sc-lsxuo6-3"
41
- })(["background-color:", ";width:", ";height:", ";border-radius:100%;"], ({
42
- disabled,
43
- theme
44
- }) => disabled ? theme.colors.neutral[500] : theme.colors.brand[500], ({
45
- size
46
- }) => size === 'l' ? '15px' : '10px', ({
47
- size
48
- }) => size === 'l' ? '15px' : '10px');
69
+ })(["background-color:", ";width:", ";height:", ";border-radius:100%;"], _ref11 => {
70
+ let {
71
+ disabled,
72
+ theme
73
+ } = _ref11;
74
+ return disabled ? theme.colors.neutral[500] : theme.colors.brand[500];
75
+ }, _ref12 => {
76
+ let {
77
+ size
78
+ } = _ref12;
79
+ return size === 'l' ? '15px' : '10px';
80
+ }, _ref13 => {
81
+ let {
82
+ size
83
+ } = _ref13;
84
+ return size === 'l' ? '15px' : '10px';
85
+ });
49
86
 
50
87
  export { DotBadge, GenericBadge, NumericBadge, Wrapper };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-notification-badge",
3
- "version": "2.0.0-next.7",
3
+ "version": "2.0.0-rc.10",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Notification Badge",
6
6
  "module": "./esm/index.js",
@@ -44,16 +44,15 @@
44
44
  "build": "node ../../scripts/build/build.js"
45
45
  },
46
46
  "dependencies": {
47
- "react-desc": "~4.1.3",
48
- "uid": "~2.0.0"
47
+ "react-desc": "~4.1.3"
49
48
  },
50
49
  "devDependencies": {
51
- "styled-components": "~5.3.1"
50
+ "styled-components": "~5.3.3"
52
51
  },
53
52
  "peerDependencies": {
54
53
  "react": "^17.0.2",
55
54
  "react-dom": "^17.0.2",
56
- "styled-components": "^5.3.1"
55
+ "styled-components": "^5.3.3"
57
56
  },
58
57
  "publishConfig": {
59
58
  "access": "public",
@@ -1,3 +1,4 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  /// <reference types="react" />
2
3
  import { NotificactionBadge as props } from './index.d';
3
4
  declare const NotificationBadge: {
@@ -9,13 +10,47 @@ declare const NotificationBadge: {
9
10
  position: string;
10
11
  };
11
12
  propTypes: {
12
- type: any;
13
- value: any;
14
- size: any;
15
- disabled: any;
16
- position: any;
17
- Component: any;
13
+ type: {
14
+ defaultValue<T = unknown>(arg: T): {
15
+ deprecated: import("react-desc").PropTypesDescValidator;
16
+ };
17
+ isRequired: import("react-desc").PropTypesDescValidator;
18
+ };
19
+ value: {
20
+ defaultValue<T = unknown>(arg: T): {
21
+ deprecated: import("react-desc").PropTypesDescValidator;
22
+ };
23
+ isRequired: import("react-desc").PropTypesDescValidator;
24
+ };
25
+ size: {
26
+ defaultValue<T = unknown>(arg: T): {
27
+ deprecated: import("react-desc").PropTypesDescValidator;
28
+ };
29
+ isRequired: import("react-desc").PropTypesDescValidator;
30
+ };
31
+ disabled: {
32
+ defaultValue<T = unknown>(arg: T): {
33
+ deprecated: import("react-desc").PropTypesDescValidator;
34
+ };
35
+ isRequired: import("react-desc").PropTypesDescValidator;
36
+ };
37
+ position: {
38
+ defaultValue<T = unknown>(arg: T): {
39
+ deprecated: import("react-desc").PropTypesDescValidator;
40
+ };
41
+ isRequired: import("react-desc").PropTypesDescValidator;
42
+ };
43
+ Component: {
44
+ defaultValue<T = unknown>(arg: T): {
45
+ deprecated: import("react-desc").PropTypesDescValidator;
46
+ };
47
+ isRequired: import("react-desc").PropTypesDescValidator;
48
+ };
18
49
  };
19
50
  };
20
- declare const NotificationBadgeWithSchema: any;
51
+ declare const NotificationBadgeWithSchema: {
52
+ (props?: props | undefined): JSX.Element;
53
+ propTypes: unknown;
54
+ toTypescript: () => import("react-desc").TypescriptSchema;
55
+ };
21
56
  export { NotificationBadge, NotificationBadgeWithSchema };
@@ -1,10 +1,41 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  export declare const notificationBadgeProps: {
2
- type: any;
3
- value: any;
4
- size: any;
5
- disabled: any;
6
- position: any;
7
- Component: any;
3
+ type: {
4
+ defaultValue<T = unknown>(arg: T): {
5
+ deprecated: import("react-desc").PropTypesDescValidator;
6
+ };
7
+ isRequired: import("react-desc").PropTypesDescValidator;
8
+ };
9
+ value: {
10
+ defaultValue<T = unknown>(arg: T): {
11
+ deprecated: import("react-desc").PropTypesDescValidator;
12
+ };
13
+ isRequired: import("react-desc").PropTypesDescValidator;
14
+ };
15
+ size: {
16
+ defaultValue<T = unknown>(arg: T): {
17
+ deprecated: import("react-desc").PropTypesDescValidator;
18
+ };
19
+ isRequired: import("react-desc").PropTypesDescValidator;
20
+ };
21
+ disabled: {
22
+ defaultValue<T = unknown>(arg: T): {
23
+ deprecated: import("react-desc").PropTypesDescValidator;
24
+ };
25
+ isRequired: import("react-desc").PropTypesDescValidator;
26
+ };
27
+ position: {
28
+ defaultValue<T = unknown>(arg: T): {
29
+ deprecated: import("react-desc").PropTypesDescValidator;
30
+ };
31
+ isRequired: import("react-desc").PropTypesDescValidator;
32
+ };
33
+ Component: {
34
+ defaultValue<T = unknown>(arg: T): {
35
+ deprecated: import("react-desc").PropTypesDescValidator;
36
+ };
37
+ isRequired: import("react-desc").PropTypesDescValidator;
38
+ };
8
39
  };
9
40
  export declare const defaultProps: {
10
41
  type: string;
package/types/style.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export declare const GenericBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
3
- export declare const NumericBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
4
- export declare const DotBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
1
+ export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2
+ export declare const GenericBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const NumericBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
4
+ export declare const DotBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;