@elliemae/ds-notification-badge 2.0.0-alpha.9 → 2.0.0-next.12

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;

package/cjs/style.js

@@ -13,32 +13,60 @@ const Wrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:fit-content;"]);
 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');
+})(["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';
@@ -46,14 +74,23 @@ const NumericBadge = /*#__PURE__*/styled__default["default"](GenericBadge).withC
 });
 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.9",
+  "version": "2.0.0-next.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Notification Badge",
   "module": "./esm/index.js",
@@ -48,12 +48,12 @@
     "uid": "~2.0.0"
   },
   "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/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"
-  ]
-}