@elliemae/ds-notification-badge 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/NotificationBadge.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var react = require('react');
 var reactDesc = require('react-desc');
 var propTypes = require('./prop-types.js');
@@ -12,14 +13,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const NotificationBadge = ({
-  type,
-  value,
-  size,
-  disabled,
-  position,
-  Component
-}) => {
+const NotificationBadge = _ref => {
+  let {
+    type,
+    value,
+    size,
+    disabled,
+    position,
+    Component
+  } = _ref;
   const Badge = type === 'number' ? style.NumericBadge : style.DotBadge;
   const relatedComponentRef = react.useRef(null);
   const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;
@@ -40,14 +42,14 @@ const NotificationBadge = ({
     top = relatedComponentHeight / 2;
   }
 
-  return /*#__PURE__*/_jsx__default['default'](style.Wrapper, {}, void 0, renderBadge && /*#__PURE__*/_jsx__default['default'](Badge, {
+  return /*#__PURE__*/_jsx__default["default"](style.Wrapper, {}, void 0, renderBadge && /*#__PURE__*/_jsx__default["default"](Badge, {
     size: size,
     value: value,
     disabled: disabled,
     top: top,
     left: left,
     right: right
-  }, void 0, type === 'number' && value), Component && /*#__PURE__*/_jsx__default['default'](Component, {
+  }, void 0, type === 'number' && value), Component && /*#__PURE__*/_jsx__default["default"](Component, {
     innerRef: relatedComponentRef
   }));
 };

package/cjs/index.js

@@ -8,4 +8,4 @@ var NotificationBadge = require('./NotificationBadge.js');
 
 exports.NotificationBadge = NotificationBadge.NotificationBadge;
 exports.NotificationBadgeWithSchema = NotificationBadge.NotificationBadgeWithSchema;
-exports.default = NotificationBadge.NotificationBadge;
+exports["default"] = NotificationBadge.NotificationBadge;

package/cjs/style.js

@@ -8,52 +8,89 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const Wrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-lsxuo6-0"
 })(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
-const GenericBadge = /*#__PURE__*/styled__default['default'].span.withConfig({
+const GenericBadge = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-lsxuo6-1"
-})(["position:relative;top:", ";left:", ";right:", ";"], ({
-  top
-}) => top ? `${top}px` : 'unset', ({
-  left
-}) => left ? `${left}px` : 'unset', ({
-  right
-}) => right ? `${right}px` : 'unset');
-const NumericBadge = /*#__PURE__*/styled__default['default'](GenericBadge).withConfig({
+})(["position:relative;top:", ";left:", ";right:", ";"], _ref => {
+  let {
+    top
+  } = _ref;
+  return top ? "".concat(top, "px") : 'unset';
+}, _ref2 => {
+  let {
+    left
+  } = _ref2;
+  return left ? "".concat(left, "px") : 'unset';
+}, _ref3 => {
+  let {
+    right
+  } = _ref3;
+  return right ? "".concat(right, "px") : 'unset';
+});
+const NumericBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
   componentId: "sc-lsxuo6-2"
-})(["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:", ";"], ({
-  value
-}) => value > 9 ? '0 5px' : '0', ({
-  disabled,
-  theme
-}) => disabled ? theme.colors.neutral[500] : theme.colors.danger[900], ({
-  value
-}) => value > 9 ? '10px' : '50%', ({
-  size
-}) => size === 'l' ? '16px' : '12px', ({
-  size
-}) => size === 'l' ? '400' : '600', ({
-  size
-}) => size === 'l' ? '21px' : '15px', ({
-  size,
-  value
-}) => {
+})(["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 => {
+  let {
+    value
+  } = _ref4;
+  return value > 9 ? '0 5px' : '0';
+}, _ref5 => {
+  let {
+    disabled,
+    theme
+  } = _ref5;
+  return disabled ? theme.colors.neutral[500] : theme.colors.danger[900];
+}, _ref6 => {
+  let {
+    value
+  } = _ref6;
+  return value > 9 ? '10px' : '50%';
+}, _ref7 => {
+  let {
+    size
+  } = _ref7;
+  return size === 'l' ? '16px' : '12px';
+}, _ref8 => {
+  let {
+    size
+  } = _ref8;
+  return size === 'l' ? '400' : '600';
+}, _ref9 => {
+  let {
+    size
+  } = _ref9;
+  return size === 'l' ? '21px' : '15px';
+}, _ref10 => {
+  let {
+    size,
+    value
+  } = _ref10;
   if (size === 'l' && value > 9) return '30px';
   if (size === 'l' && value <= 9) return '21px';
   if (size === 's' && value > 9) return '21px';
   if (size === 's' && value <= 9) return '15px';
 });
-const DotBadge = /*#__PURE__*/styled__default['default'](GenericBadge).withConfig({
+const DotBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withConfig({
   componentId: "sc-lsxuo6-3"
-})(["background-color:", ";width:", ";height:", ";border-radius:100%;"], ({
-  disabled,
-  theme
-}) => disabled ? theme.colors.neutral[500] : theme.colors.brand[500], ({
-  size
-}) => size === 'l' ? '15px' : '10px', ({
-  size
-}) => size === 'l' ? '15px' : '10px');
+})(["background-color:", ";width:", ";height:", ";border-radius:100%;"], _ref11 => {
+  let {
+    disabled,
+    theme
+  } = _ref11;
+  return disabled ? theme.colors.neutral[500] : theme.colors.brand[500];
+}, _ref12 => {
+  let {
+    size
+  } = _ref12;
+  return size === 'l' ? '15px' : '10px';
+}, _ref13 => {
+  let {
+    size
+  } = _ref13;
+  return size === 'l' ? '15px' : '10px';
+});
 
 exports.DotBadge = DotBadge;
 exports.GenericBadge = GenericBadge;

package/esm/NotificationBadge.js

@@ -1,17 +1,19 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useEffect } from 'react';
 import { describe } from 'react-desc';
 import { notificationBadgeProps, defaultProps } from './prop-types.js';
 import { Wrapper, NumericBadge, DotBadge } from './style.js';
 
-const NotificationBadge = ({
-  type,
-  value,
-  size,
-  disabled,
-  position,
-  Component
-}) => {
+const NotificationBadge = _ref => {
+  let {
+    type,
+    value,
+    size,
+    disabled,
+    position,
+    Component
+  } = _ref;
   const Badge = type === 'number' ? NumericBadge : DotBadge;
   const relatedComponentRef = useRef(null);
   const renderBadge = (relatedComponentRef === null || relatedComponentRef === void 0 ? void 0 : relatedComponentRef.current) || !Component;

package/esm/style.js

@@ -5,32 +5,60 @@ const Wrapper = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
 const GenericBadge = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-lsxuo6-1"
-})(["position:relative;top:", ";left:", ";right:", ";"], ({
-  top
-}) => top ? `${top}px` : 'unset', ({
-  left
-}) => left ? `${left}px` : 'unset', ({
-  right
-}) => right ? `${right}px` : 'unset');
+})(["position:relative;top:", ";left:", ";right:", ";"], _ref => {
+  let {
+    top
+  } = _ref;
+  return top ? "".concat(top, "px") : 'unset';
+}, _ref2 => {
+  let {
+    left
+  } = _ref2;
+  return left ? "".concat(left, "px") : 'unset';
+}, _ref3 => {
+  let {
+    right
+  } = _ref3;
+  return right ? "".concat(right, "px") : 'unset';
+});
 const NumericBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
   componentId: "sc-lsxuo6-2"
-})(["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:", ";"], ({
-  value
-}) => value > 9 ? '0 5px' : '0', ({
-  disabled,
-  theme
-}) => disabled ? theme.colors.neutral[500] : theme.colors.danger[900], ({
-  value
-}) => value > 9 ? '10px' : '50%', ({
-  size
-}) => size === 'l' ? '16px' : '12px', ({
-  size
-}) => size === 'l' ? '400' : '600', ({
-  size
-}) => size === 'l' ? '21px' : '15px', ({
-  size,
-  value
-}) => {
+})(["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 => {
+  let {
+    value
+  } = _ref4;
+  return value > 9 ? '0 5px' : '0';
+}, _ref5 => {
+  let {
+    disabled,
+    theme
+  } = _ref5;
+  return disabled ? theme.colors.neutral[500] : theme.colors.danger[900];
+}, _ref6 => {
+  let {
+    value
+  } = _ref6;
+  return value > 9 ? '10px' : '50%';
+}, _ref7 => {
+  let {
+    size
+  } = _ref7;
+  return size === 'l' ? '16px' : '12px';
+}, _ref8 => {
+  let {
+    size
+  } = _ref8;
+  return size === 'l' ? '400' : '600';
+}, _ref9 => {
+  let {
+    size
+  } = _ref9;
+  return size === 'l' ? '21px' : '15px';
+}, _ref10 => {
+  let {
+    size,
+    value
+  } = _ref10;
   if (size === 'l' && value > 9) return '30px';
   if (size === 'l' && value <= 9) return '21px';
   if (size === 's' && value > 9) return '21px';
@@ -38,13 +66,22 @@ const NumericBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
 });
 const DotBadge = /*#__PURE__*/styled(GenericBadge).withConfig({
   componentId: "sc-lsxuo6-3"
-})(["background-color:", ";width:", ";height:", ";border-radius:100%;"], ({
-  disabled,
-  theme
-}) => disabled ? theme.colors.neutral[500] : theme.colors.brand[500], ({
-  size
-}) => size === 'l' ? '15px' : '10px', ({
-  size
-}) => size === 'l' ? '15px' : '10px');
+})(["background-color:", ";width:", ";height:", ";border-radius:100%;"], _ref11 => {
+  let {
+    disabled,
+    theme
+  } = _ref11;
+  return disabled ? theme.colors.neutral[500] : theme.colors.brand[500];
+}, _ref12 => {
+  let {
+    size
+  } = _ref12;
+  return size === 'l' ? '15px' : '10px';
+}, _ref13 => {
+  let {
+    size
+  } = _ref13;
+  return size === 'l' ? '15px' : '10px';
+});
 
 export { DotBadge, GenericBadge, NumericBadge, Wrapper };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-notification-badge",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Notification Badge",
   "module": "./esm/index.js",
@@ -44,16 +44,15 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "react-desc": "~4.1.3",
-    "uid": "~2.0.0"
+    "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/NotificationBadge.d.ts

@@ -1,3 +1,4 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 import { NotificactionBadge as props } from './index.d';
 declare const NotificationBadge: {
@@ -9,13 +10,47 @@ declare const NotificationBadge: {
         position: string;
     };
     propTypes: {
-        type: any;
-        value: any;
-        size: any;
-        disabled: any;
-        position: any;
-        Component: any;
+        type: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        value: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        size: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        disabled: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        position: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        Component: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const NotificationBadgeWithSchema: any;
+declare const NotificationBadgeWithSchema: {
+    (props?: props | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { NotificationBadge, NotificationBadgeWithSchema };

package/types/prop-types.d.ts

@@ -1,10 +1,41 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 export declare const notificationBadgeProps: {
-    type: any;
-    value: any;
-    size: any;
-    disabled: any;
-    position: any;
-    Component: any;
+    type: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    value: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    size: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    disabled: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    position: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    Component: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
 };
 export declare const defaultProps: {
     type: string;

package/types/style.d.ts

@@ -1,4 +1,4 @@
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const GenericBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const NumericBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const DotBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const GenericBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const NumericBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const DotBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}