@elliemae/ds-notification-badge 2.2.0-alpha.4 → 3.0.0-next.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.
@@ -1,82 +1,62 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
- var NotificationBadge_exports = {};
29
- __export(NotificationBadge_exports, {
30
- NotificationBadge: () => NotificationBadge,
31
- NotificationBadgeWithSchema: () => NotificationBadgeWithSchema
32
- });
33
- var React = __toESM(require("react"));
34
- var import_react = __toESM(require("react"));
35
- var import_react_desc = require("react-desc");
36
- var import_prop_types = require("./prop-types");
37
- var import_style = require("./style");
38
- const NotificationBadge = ({
39
- type,
40
- value,
41
- size,
42
- disabled,
43
- position,
44
- Component
45
- }) => {
46
- const Badge = type === "number" ? import_style.NumericBadge : import_style.DotBadge;
47
- const relatedComponentRef = (0, import_react.useRef)(null);
48
- const renderBadge = relatedComponentRef?.current || !Component;
49
- const [relatedComponentHeight, setRelatedComponentHeight] = (0, import_react.useState)(0);
50
- const [relatedComponentWidth, setRelatedComponentWidth] = (0, import_react.useState)(0);
51
- (0, import_react.useEffect)(() => {
52
- const relatedComponent = relatedComponentRef?.current;
53
- setRelatedComponentHeight(relatedComponent?.offsetHeight);
54
- setRelatedComponentWidth(relatedComponent?.offsetWidth);
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _jsx = require('@babel/runtime/helpers/jsx');
6
+ require('core-js/modules/web.dom-collections.iterator.js');
7
+ var react = require('react');
8
+ var reactDesc = require('react-desc');
9
+ var propTypes = require('./prop-types.js');
10
+ var style = require('./style.js');
11
+
12
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
+
14
+ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
15
+
16
+ const NotificationBadge = _ref => {
17
+ let {
18
+ type,
19
+ value,
20
+ size,
21
+ disabled,
22
+ position,
23
+ Component
24
+ } = _ref;
25
+ const Badge = type === 'number' ? style.NumericBadge : style.DotBadge;
26
+ const relatedComponentRef = react.useRef(null);
27
+ const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;
28
+ const [relatedComponentHeight, setRelatedComponentHeight] = react.useState(0);
29
+ const [relatedComponentWidth, setRelatedComponentWidth] = react.useState(0);
30
+ react.useEffect(() => {
31
+ const relatedComponent = relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current;
32
+ setRelatedComponentHeight(relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetHeight);
33
+ setRelatedComponentWidth(relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetWidth);
55
34
  }, [relatedComponentRef]);
56
35
  let top;
57
36
  let right;
58
37
  let left;
38
+
59
39
  if (Component) {
60
- if (position === "right")
61
- left = relatedComponentWidth / 2;
62
- if (position === "left")
63
- right = relatedComponentWidth / 2;
40
+ if (position === 'right') left = relatedComponentWidth / 2;
41
+ if (position === 'left') right = relatedComponentWidth / 2;
64
42
  top = relatedComponentHeight / 2;
65
43
  }
66
- return /* @__PURE__ */ import_react.default.createElement(import_style.Wrapper, null, renderBadge && /* @__PURE__ */ import_react.default.createElement(Badge, {
67
- size,
68
- value,
69
- disabled,
70
- top,
71
- left,
72
- right
73
- }, type === "number" && value), Component && /* @__PURE__ */ import_react.default.createElement(Component, {
44
+
45
+ return /*#__PURE__*/_jsx__default["default"](style.Wrapper, {}, void 0, renderBadge && /*#__PURE__*/_jsx__default["default"](Badge, {
46
+ size: size,
47
+ value: value,
48
+ disabled: disabled,
49
+ top: top,
50
+ left: left,
51
+ right: right
52
+ }, void 0, type === 'number' && value), Component && /*#__PURE__*/_jsx__default["default"](Component, {
74
53
  innerRef: relatedComponentRef
75
54
  }));
76
55
  };
77
- NotificationBadge.defaultProps = import_prop_types.defaultProps;
78
- NotificationBadge.propTypes = import_prop_types.notificationBadgeProps;
79
- const NotificationBadgeWithSchema = (0, import_react_desc.describe)(NotificationBadge);
80
- NotificationBadgeWithSchema.propTypes = import_prop_types.notificationBadgeProps;
81
- module.exports = __toCommonJS(NotificationBadge_exports);
82
- //# sourceMappingURL=NotificationBadge.js.map
56
+
57
+ NotificationBadge.defaultProps = propTypes.defaultProps;
58
+ const NotificationBadgeWithSchema = reactDesc.describe(NotificationBadge);
59
+ NotificationBadgeWithSchema.propTypes = propTypes.notificationBadgeProps;
60
+
61
+ exports.NotificationBadge = NotificationBadge;
62
+ exports.NotificationBadgeWithSchema = NotificationBadgeWithSchema;
package/cjs/index.d.js CHANGED
@@ -1,27 +1,2 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __reExport = (target, module2, copyDefault, desc) => {
9
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
10
- for (let key of __getOwnPropNames(module2))
11
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
12
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
13
- }
14
- return target;
15
- };
16
- var __toESM = (module2, isNodeMode) => {
17
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
18
- };
19
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
20
- return (module2, temp) => {
21
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
22
- };
23
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
24
- var index_d_exports = {};
25
- var React = __toESM(require("react"));
26
- module.exports = __toCommonJS(index_d_exports);
27
- //# sourceMappingURL=index.d.js.map
1
+ 'use strict';
2
+
package/cjs/index.js CHANGED
@@ -1,36 +1,11 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
- var src_exports = {};
29
- __export(src_exports, {
30
- default: () => import_NotificationBadge.NotificationBadge
31
- });
32
- var React = __toESM(require("react"));
33
- __reExport(src_exports, require("./NotificationBadge"));
34
- var import_NotificationBadge = require("./NotificationBadge");
35
- module.exports = __toCommonJS(src_exports);
36
- //# sourceMappingURL=index.js.map
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var NotificationBadge = require('./NotificationBadge.js');
6
+
7
+
8
+
9
+ exports.NotificationBadge = NotificationBadge.NotificationBadge;
10
+ exports.NotificationBadgeWithSchema = NotificationBadge.NotificationBadgeWithSchema;
11
+ exports["default"] = NotificationBadge.NotificationBadge;
package/cjs/prop-types.js CHANGED
@@ -1,50 +1,23 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
- var prop_types_exports = {};
29
- __export(prop_types_exports, {
30
- defaultProps: () => defaultProps,
31
- notificationBadgeProps: () => notificationBadgeProps
32
- });
33
- var React = __toESM(require("react"));
34
- var import_react_desc = require("react-desc");
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var reactDesc = require('react-desc');
6
+
35
7
  const notificationBadgeProps = {
36
- type: import_react_desc.PropTypes.oneOf(["number", "dot"]).description("type of badge: number or dot"),
37
- value: import_react_desc.PropTypes.number.description("value of the numeric badge"),
38
- size: import_react_desc.PropTypes.oneOf(["s", "l"]).description("size of the badge: s or l"),
39
- disabled: import_react_desc.PropTypes.bool.description("whether the badge is disabled"),
40
- position: import_react_desc.PropTypes.oneOf(["left", "right"]).description("position of the badge with the related component"),
41
- Component: import_react_desc.PropTypes.func.description("Related component")
8
+ type: reactDesc.PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),
9
+ value: reactDesc.PropTypes.number.description('value of the numeric badge'),
10
+ size: reactDesc.PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),
11
+ disabled: reactDesc.PropTypes.bool.description('whether the badge is disabled'),
12
+ position: reactDesc.PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),
13
+ Component: reactDesc.PropTypes.func.description('Related component')
42
14
  };
43
15
  const defaultProps = {
44
- type: "number",
45
- size: "s",
16
+ type: 'number',
17
+ size: 's',
46
18
  disabled: false,
47
- position: "right"
19
+ position: 'right'
48
20
  };
49
- module.exports = __toCommonJS(prop_types_exports);
50
- //# sourceMappingURL=prop-types.js.map
21
+
22
+ exports.defaultProps = defaultProps;
23
+ exports.notificationBadgeProps = notificationBadgeProps;
package/cjs/style.js CHANGED
@@ -1,81 +1,98 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
- var style_exports = {};
29
- __export(style_exports, {
30
- DotBadge: () => DotBadge,
31
- GenericBadge: () => GenericBadge,
32
- NumericBadge: () => NumericBadge,
33
- Wrapper: () => Wrapper
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var styled = require('styled-components');
6
+
7
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
+
9
+ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
10
+
11
+ const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
12
+ componentId: "sc-lsxuo6-0"
13
+ })(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
14
+ const GenericBadge = /*#__PURE__*/styled__default["default"].span.withConfig({
15
+ componentId: "sc-lsxuo6-1"
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';
34
31
  });
35
- var React = __toESM(require("react"));
36
- var import_styled_components = __toESM(require("styled-components"));
37
- const Wrapper = import_styled_components.default.div`
38
- display: flex;
39
- flex-direction: column;
40
- justify-content: center;
41
- align-items: center;
42
- width: fit-content;
43
- `;
44
- const GenericBadge = import_styled_components.default.span`
45
- position: relative;
46
- top: ${({ top }) => top ? `${top}px` : "unset"};
47
- left: ${({ left }) => left ? `${left}px` : "unset"};
48
- right: ${({ right }) => right ? `${right}px` : "unset"};
49
- `;
50
- const NumericBadge = (0, import_styled_components.default)(GenericBadge)`
51
- display: flex;
52
- justify-content: center;
53
- align-items: center;
54
- width: fit-content;
55
- color: #fff;
56
- padding: ${({ value }) => value > 9 ? "0 5px" : "0"};
57
- padding-top: 2px;
58
- background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};
59
- border-radius: ${({ value }) => value > 9 ? "10px" : "50%"};
60
- font-size: ${({ size }) => size === "l" ? "16px" : "12px"};
61
- font-weight: ${({ size }) => size === "l" ? "400" : "600"};
62
- height: ${({ size }) => size === "l" ? "21px" : "15px"};
63
- min-width: ${({ size, value }) => {
64
- if (size === "l" && value > 9)
65
- return "30px";
66
- if (size === "l" && value <= 9)
67
- return "21px";
68
- if (size === "s" && value > 9)
69
- return "21px";
70
- if (size === "s" && value <= 9)
71
- return "15px";
72
- }};
73
- `;
74
- const DotBadge = (0, import_styled_components.default)(GenericBadge)`
75
- background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};
76
- width: ${({ size }) => size === "l" ? "15px" : "10px"};
77
- height: ${({ size }) => size === "l" ? "15px" : "10px"};
78
- border-radius: 100%;
79
- `;
80
- module.exports = __toCommonJS(style_exports);
81
- //# sourceMappingURL=style.js.map
32
+ const NumericBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
33
+ componentId: "sc-lsxuo6-2"
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;
70
+ if (size === 'l' && value > 9) return '30px';
71
+ if (size === 'l' && value <= 9) return '21px';
72
+ if (size === 's' && value > 9) return '21px';
73
+ if (size === 's' && value <= 9) return '15px';
74
+ });
75
+ const DotBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
76
+ componentId: "sc-lsxuo6-3"
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
+ });
94
+
95
+ exports.DotBadge = DotBadge;
96
+ exports.GenericBadge = GenericBadge;
97
+ exports.NumericBadge = NumericBadge;
98
+ exports.Wrapper = Wrapper;
@@ -1,53 +1,53 @@
1
- import * as React from "react";
2
- import React2, { useState, useEffect, useRef } from "react";
3
- import { describe } from "react-desc";
4
- import { notificationBadgeProps, defaultProps } from "./prop-types";
5
- import { Wrapper, NumericBadge, DotBadge } from "./style";
6
- const NotificationBadge = ({
7
- type,
8
- value,
9
- size,
10
- disabled,
11
- position,
12
- Component
13
- }) => {
14
- const Badge = type === "number" ? NumericBadge : DotBadge;
1
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import 'core-js/modules/web.dom-collections.iterator.js';
3
+ import { useRef, useState, useEffect } from 'react';
4
+ import { describe } from 'react-desc';
5
+ import { notificationBadgeProps, defaultProps } from './prop-types.js';
6
+ import { Wrapper, NumericBadge, DotBadge } from './style.js';
7
+
8
+ const NotificationBadge = _ref => {
9
+ let {
10
+ type,
11
+ value,
12
+ size,
13
+ disabled,
14
+ position,
15
+ Component
16
+ } = _ref;
17
+ const Badge = type === 'number' ? NumericBadge : DotBadge;
15
18
  const relatedComponentRef = useRef(null);
16
- const renderBadge = relatedComponentRef?.current || !Component;
19
+ const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;
17
20
  const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);
18
21
  const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);
19
22
  useEffect(() => {
20
- const relatedComponent = relatedComponentRef?.current;
21
- setRelatedComponentHeight(relatedComponent?.offsetHeight);
22
- setRelatedComponentWidth(relatedComponent?.offsetWidth);
23
+ const relatedComponent = relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current;
24
+ setRelatedComponentHeight(relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetHeight);
25
+ setRelatedComponentWidth(relatedComponent === null || relatedComponent === void 0 ? void 0 : relatedComponent.offsetWidth);
23
26
  }, [relatedComponentRef]);
24
27
  let top;
25
28
  let right;
26
29
  let left;
30
+
27
31
  if (Component) {
28
- if (position === "right")
29
- left = relatedComponentWidth / 2;
30
- if (position === "left")
31
- right = relatedComponentWidth / 2;
32
+ if (position === 'right') left = relatedComponentWidth / 2;
33
+ if (position === 'left') right = relatedComponentWidth / 2;
32
34
  top = relatedComponentHeight / 2;
33
35
  }
34
- return /* @__PURE__ */ React2.createElement(Wrapper, null, renderBadge && /* @__PURE__ */ React2.createElement(Badge, {
35
- size,
36
- value,
37
- disabled,
38
- top,
39
- left,
40
- right
41
- }, type === "number" && value), Component && /* @__PURE__ */ React2.createElement(Component, {
36
+
37
+ return /*#__PURE__*/_jsx(Wrapper, {}, void 0, renderBadge && /*#__PURE__*/_jsx(Badge, {
38
+ size: size,
39
+ value: value,
40
+ disabled: disabled,
41
+ top: top,
42
+ left: left,
43
+ right: right
44
+ }, void 0, type === 'number' && value), Component && /*#__PURE__*/_jsx(Component, {
42
45
  innerRef: relatedComponentRef
43
46
  }));
44
47
  };
48
+
45
49
  NotificationBadge.defaultProps = defaultProps;
46
- NotificationBadge.propTypes = notificationBadgeProps;
47
50
  const NotificationBadgeWithSchema = describe(NotificationBadge);
48
51
  NotificationBadgeWithSchema.propTypes = notificationBadgeProps;
49
- export {
50
- NotificationBadge,
51
- NotificationBadgeWithSchema
52
- };
53
- //# sourceMappingURL=NotificationBadge.js.map
52
+
53
+ export { NotificationBadge, NotificationBadgeWithSchema };
package/esm/index.d.js CHANGED
@@ -1,2 +1 @@
1
- import * as React from "react";
2
- //# sourceMappingURL=index.d.js.map
1
+
package/esm/index.js CHANGED
@@ -1,7 +1 @@
1
- import * as React from "react";
2
- export * from "./NotificationBadge";
3
- import { NotificationBadge } from "./NotificationBadge";
4
- export {
5
- NotificationBadge as default
6
- };
7
- //# sourceMappingURL=index.js.map
1
+ export { NotificationBadge, NotificationBadgeWithSchema, NotificationBadge as default } from './NotificationBadge.js';
package/esm/prop-types.js CHANGED
@@ -1,21 +1,18 @@
1
- import * as React from "react";
2
- import { PropTypes } from "react-desc";
1
+ import { PropTypes } from 'react-desc';
2
+
3
3
  const notificationBadgeProps = {
4
- type: PropTypes.oneOf(["number", "dot"]).description("type of badge: number or dot"),
5
- value: PropTypes.number.description("value of the numeric badge"),
6
- size: PropTypes.oneOf(["s", "l"]).description("size of the badge: s or l"),
7
- disabled: PropTypes.bool.description("whether the badge is disabled"),
8
- position: PropTypes.oneOf(["left", "right"]).description("position of the badge with the related component"),
9
- Component: PropTypes.func.description("Related component")
4
+ type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),
5
+ value: PropTypes.number.description('value of the numeric badge'),
6
+ size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),
7
+ disabled: PropTypes.bool.description('whether the badge is disabled'),
8
+ position: PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),
9
+ Component: PropTypes.func.description('Related component')
10
10
  };
11
11
  const defaultProps = {
12
- type: "number",
13
- size: "s",
12
+ type: 'number',
13
+ size: 's',
14
14
  disabled: false,
15
- position: "right"
15
+ position: 'right'
16
16
  };
17
- export {
18
- defaultProps,
19
- notificationBadgeProps
20
- };
21
- //# sourceMappingURL=prop-types.js.map
17
+
18
+ export { defaultProps, notificationBadgeProps };
package/esm/style.js CHANGED
@@ -1,52 +1,87 @@
1
- import * as React from "react";
2
- import styled from "styled-components";
3
- const Wrapper = styled.div`
4
- display: flex;
5
- flex-direction: column;
6
- justify-content: center;
7
- align-items: center;
8
- width: fit-content;
9
- `;
10
- const GenericBadge = styled.span`
11
- position: relative;
12
- top: ${({ top }) => top ? `${top}px` : "unset"};
13
- left: ${({ left }) => left ? `${left}px` : "unset"};
14
- right: ${({ right }) => right ? `${right}px` : "unset"};
15
- `;
16
- const NumericBadge = styled(GenericBadge)`
17
- display: flex;
18
- justify-content: center;
19
- align-items: center;
20
- width: fit-content;
21
- color: #fff;
22
- padding: ${({ value }) => value > 9 ? "0 5px" : "0"};
23
- padding-top: 2px;
24
- background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};
25
- border-radius: ${({ value }) => value > 9 ? "10px" : "50%"};
26
- font-size: ${({ size }) => size === "l" ? "16px" : "12px"};
27
- font-weight: ${({ size }) => size === "l" ? "400" : "600"};
28
- height: ${({ size }) => size === "l" ? "21px" : "15px"};
29
- min-width: ${({ size, value }) => {
30
- if (size === "l" && value > 9)
31
- return "30px";
32
- if (size === "l" && value <= 9)
33
- return "21px";
34
- if (size === "s" && value > 9)
35
- return "21px";
36
- if (size === "s" && value <= 9)
37
- return "15px";
38
- }};
39
- `;
40
- const DotBadge = styled(GenericBadge)`
41
- background-color: ${({ disabled, theme }) => disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};
42
- width: ${({ size }) => size === "l" ? "15px" : "10px"};
43
- height: ${({ size }) => size === "l" ? "15px" : "10px"};
44
- border-radius: 100%;
45
- `;
46
- export {
47
- DotBadge,
48
- GenericBadge,
49
- NumericBadge,
50
- Wrapper
51
- };
52
- //# sourceMappingURL=style.js.map
1
+ import styled from 'styled-components';
2
+
3
+ const Wrapper = /*#__PURE__*/styled.div.withConfig({
4
+ componentId: "sc-lsxuo6-0"
5
+ })(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
6
+ const GenericBadge = /*#__PURE__*/styled.span.withConfig({
7
+ componentId: "sc-lsxuo6-1"
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
+ });
24
+ const NumericBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
25
+ componentId: "sc-lsxuo6-2"
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;
62
+ if (size === 'l' && value > 9) return '30px';
63
+ if (size === 'l' && value <= 9) return '21px';
64
+ if (size === 's' && value > 9) return '21px';
65
+ if (size === 's' && value <= 9) return '15px';
66
+ });
67
+ const DotBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
68
+ componentId: "sc-lsxuo6-3"
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
+ });
86
+
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.2.0-alpha.4",
3
+ "version": "3.0.0-next.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Notification Badge",
6
6
  "module": "./esm/index.js",
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/NotificationBadge.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react';\nimport { describe } from 'react-desc';\nimport { notificationBadgeProps, defaultProps } from './prop-types';\nimport { NotificactionBadge as props } from './index.d';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge = ({\n type,\n value,\n size,\n disabled,\n position,\n Component,\n}: props): JSX.Element => {\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef(null);\n const renderBadge = relatedComponentRef?.current || !Component;\n const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);\n const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);\n\n useEffect(() => {\n const relatedComponent = relatedComponentRef?.current;\n setRelatedComponentHeight(relatedComponent?.offsetHeight);\n setRelatedComponentWidth(relatedComponent?.offsetWidth);\n }, [relatedComponentRef]);\n\n let top;\n let right;\n let left;\n\n if (Component) {\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n }\n\n return (\n <Wrapper>\n {renderBadge && (\n <Badge\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n >\n {type === 'number' && value}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\n </Wrapper>\n );\n};\n\nNotificationBadge.defaultProps = defaultProps;\nNotificationBadge.propTypes = notificationBadgeProps;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = notificationBadgeProps;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmD;AACnD,wBAAyB;AACzB,wBAAqD;AAErD,mBAAgD;AAEhD,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,QAAQ,SAAS,WAAW,4BAAe;AACjD,QAAM,sBAAsB,yBAAO;AACnC,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,6BAA6B,2BAAS;AACrE,QAAM,CAAC,uBAAuB,4BAA4B,2BAAS;AAEnE,8BAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB;AAC5C,6BAAyB,kBAAkB;AAAA,KAC1C,CAAC;AAEJ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,MAAI,WAAW;AACb,QAAI,aAAa;AAAS,aAAO,wBAAwB;AACzD,QAAI,aAAa;AAAQ,cAAQ,wBAAwB;AACzD,UAAM,yBAAyB;AAAA;AAGjC,SACE,mDAAC,sBAAD,MACG,eACC,mDAAC,OAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,SAAS,YAAY,QAGzB,aAAa,mDAAC,WAAD;AAAA,IAAW,UAAU;AAAA;AAAA;AAKzC,kBAAkB,eAAe;AACjC,kBAAkB,YAAY;AAC9B,MAAM,8BAA8B,gCAAS;AAC7C,4BAA4B,YAAY;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/index.d.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export interface NotificactionBadge {\n type?: string;\n value?: number;\n size?: string;\n disabled?: boolean;\n position?: string;\n Component?: () => JSX.Element;\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
6
- "names": []
7
- }
package/cjs/index.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export * from './NotificationBadge';\nexport { NotificationBadge as default } from './NotificationBadge';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,+BAA6C;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const notificationBadgeProps = {\n type: PropTypes.oneOf(['number', 'dot']).description(\n 'type of badge: number or dot',\n ),\n value: PropTypes.number.description('value of the numeric badge'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n position: PropTypes.oneOf(['left', 'right']).description(\n 'position of the badge with the related component',\n ),\n Component: PropTypes.func.description('Related component'),\n};\n\nexport const defaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,yBAAyB;AAAA,EACpC,MAAM,4BAAU,MAAM,CAAC,UAAU,QAAQ,YACvC;AAAA,EAEF,OAAO,4BAAU,OAAO,YAAY;AAAA,EACpC,MAAM,4BAAU,MAAM,CAAC,KAAK,MAAM,YAAY;AAAA,EAC9C,UAAU,4BAAU,KAAK,YAAY;AAAA,EACrC,UAAU,4BAAU,MAAM,CAAC,QAAQ,UAAU,YAC3C;AAAA,EAEF,WAAW,4BAAU,KAAK,YAAY;AAAA;AAGjC,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA;",
6
- "names": []
7
- }
package/cjs/style.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import styled from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n`;\n\nexport const GenericBadge = styled.span`\n position: relative;\n top: ${({ top }) => (top ? `${top}px` : 'unset')};\n left: ${({ left }) => (left ? `${left}px` : 'unset')};\n right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ value }) => (value > 9 ? '0 5px' : '0')};\n padding-top: 2px;\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};\n border-radius: ${({ value }) => (value > 9 ? '10px' : '50%')};\n font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, value }) => {\n if (size === 'l' && value > 9) return '30px';\n if (size === 'l' && value <= 9) return '21px';\n if (size === 's' && value > 9) return '21px';\n if (size === 's' && value <= 9) return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)`\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAEZ,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,iCAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,UAAW,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,WAAY,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,YAAa,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,sCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMtB,CAAC,EAAE,YAAa,QAAQ,IAAI,UAAU;AAAA;AAAA,sBAE7B,CAAC,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,OAAO;AAAA,mBAC5C,CAAC,EAAE,YAAa,QAAQ,IAAI,SAAS;AAAA,eACzC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,WAAY,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,YAAY;AAChC,MAAI,SAAS,OAAO,QAAQ;AAAG,WAAO;AACtC,MAAI,SAAS,OAAO,SAAS;AAAG,WAAO;AACvC,MAAI,SAAS,OAAO,QAAQ;AAAG,WAAO;AACtC,MAAI,SAAS,OAAO,SAAS;AAAG,WAAO;AAAA;AAAA;AAIpC,MAAM,WAAW,sCAAO;AAAA,sBACT,CAAC,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA,WACnD,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/NotificationBadge.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useEffect, useRef } from 'react';\nimport { describe } from 'react-desc';\nimport { notificationBadgeProps, defaultProps } from './prop-types';\nimport { NotificactionBadge as props } from './index.d';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge = ({\n type,\n value,\n size,\n disabled,\n position,\n Component,\n}: props): JSX.Element => {\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef(null);\n const renderBadge = relatedComponentRef?.current || !Component;\n const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);\n const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);\n\n useEffect(() => {\n const relatedComponent = relatedComponentRef?.current;\n setRelatedComponentHeight(relatedComponent?.offsetHeight);\n setRelatedComponentWidth(relatedComponent?.offsetWidth);\n }, [relatedComponentRef]);\n\n let top;\n let right;\n let left;\n\n if (Component) {\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n }\n\n return (\n <Wrapper>\n {renderBadge && (\n <Badge\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n >\n {type === 'number' && value}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\n </Wrapper>\n );\n};\n\nNotificationBadge.defaultProps = defaultProps;\nNotificationBadge.propTypes = notificationBadgeProps;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = notificationBadgeProps;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEA,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACwB;AACxB,QAAM,QAAQ,SAAS,WAAW,eAAe;AACjD,QAAM,sBAAsB,OAAO;AACnC,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,6BAA6B,SAAS;AACrE,QAAM,CAAC,uBAAuB,4BAA4B,SAAS;AAEnE,YAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB;AAC5C,6BAAyB,kBAAkB;AAAA,KAC1C,CAAC;AAEJ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,MAAI,WAAW;AACb,QAAI,aAAa;AAAS,aAAO,wBAAwB;AACzD,QAAI,aAAa;AAAQ,cAAQ,wBAAwB;AACzD,UAAM,yBAAyB;AAAA;AAGjC,SACE,qCAAC,SAAD,MACG,eACC,qCAAC,OAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,SAAS,YAAY,QAGzB,aAAa,qCAAC,WAAD;AAAA,IAAW,UAAU;AAAA;AAAA;AAKzC,kBAAkB,eAAe;AACjC,kBAAkB,YAAY;AAC9B,MAAM,8BAA8B,SAAS;AAC7C,4BAA4B,YAAY;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "AAAA;",
6
- "names": []
7
- }
package/esm/index.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './NotificationBadge';\nexport { NotificationBadge as default } from './NotificationBadge';\n"],
5
- "mappings": "AAAA;ACAA;AACA;",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/prop-types.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const notificationBadgeProps = {\n type: PropTypes.oneOf(['number', 'dot']).description(\n 'type of badge: number or dot',\n ),\n value: PropTypes.number.description('value of the numeric badge'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n position: PropTypes.oneOf(['left', 'right']).description(\n 'position of the badge with the related component',\n ),\n Component: PropTypes.func.description('Related component'),\n};\n\nexport const defaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n"],
5
- "mappings": "AAAA;ACAA;AAEO,MAAM,yBAAyB;AAAA,EACpC,MAAM,UAAU,MAAM,CAAC,UAAU,QAAQ,YACvC;AAAA,EAEF,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,MAAM,UAAU,MAAM,CAAC,KAAK,MAAM,YAAY;AAAA,EAC9C,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,UAAU,UAAU,MAAM,CAAC,QAAQ,UAAU,YAC3C;AAAA,EAEF,WAAW,UAAU,KAAK,YAAY;AAAA;AAGjC,MAAM,eAAe;AAAA,EAC1B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA;",
6
- "names": []
7
- }
package/esm/style.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n`;\n\nexport const GenericBadge = styled.span`\n position: relative;\n top: ${({ top }) => (top ? `${top}px` : 'unset')};\n left: ${({ left }) => (left ? `${left}px` : 'unset')};\n right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ value }) => (value > 9 ? '0 5px' : '0')};\n padding-top: 2px;\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};\n border-radius: ${({ value }) => (value > 9 ? '10px' : '50%')};\n font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, value }) => {\n if (size === 'l' && value > 9) return '30px';\n if (size === 'l' && value <= 9) return '21px';\n if (size === 's' && value > 9) return '21px';\n if (size === 's' && value <= 9) return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)`\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],
5
- "mappings": "AAAA;ACAA;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,OAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,UAAW,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,WAAY,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,YAAa,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMtB,CAAC,EAAE,YAAa,QAAQ,IAAI,UAAU;AAAA;AAAA,sBAE7B,CAAC,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,OAAO;AAAA,mBAC5C,CAAC,EAAE,YAAa,QAAQ,IAAI,SAAS;AAAA,eACzC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,WAAY,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,YAAY;AAChC,MAAI,SAAS,OAAO,QAAQ;AAAG,WAAO;AACtC,MAAI,SAAS,OAAO,SAAS;AAAG,WAAO;AACvC,MAAI,SAAS,OAAO,QAAQ;AAAG,WAAO;AACtC,MAAI,SAAS,OAAO,SAAS;AAAG,WAAO;AAAA;AAAA;AAIpC,MAAM,WAAW,OAAO;AAAA,sBACT,CAAC,EAAE,UAAU,YAC/B,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,MAAM;AAAA,WACnD,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,WAAY,SAAS,MAAM,SAAS;AAAA;AAAA;",
6
- "names": []
7
- }