@elliemae/ds-banner 2.2.0 → 2.3.0-alpha.3

package/esm/utils/icons.js

@@ -1,28 +1,29 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { SuccessFill, InfoFill, AlertsDetailFill, WarningSquare } from '@elliemae/ds-icons';
-
+import * as React from "react";
+import React2 from "react";
+import { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from "@elliemae/ds-icons";
 const icons = {
-  success: /*#__PURE__*/_jsx(SuccessFill, {
+  success: /* @__PURE__ */ React2.createElement(SuccessFill, {
     fill: "#207e56",
     width: "20px",
     height: "20px"
   }),
-  info: /*#__PURE__*/_jsx(InfoFill, {
+  info: /* @__PURE__ */ React2.createElement(InfoFill, {
     fill: "#1e79c2",
     width: "20px",
     height: "20px"
   }),
-  danger: /*#__PURE__*/_jsx(AlertsDetailFill, {
+  danger: /* @__PURE__ */ React2.createElement(AlertsDetailFill, {
     fill: "#c64252",
     width: "20px",
     height: "20px"
   }),
-  warning: /*#__PURE__*/_jsx(WarningSquare, {
+  warning: /* @__PURE__ */ React2.createElement(WarningSquare, {
     fill: "#d17a00",
     width: "20px",
     height: "20px"
   })
 };
-
-export { icons };
+export {
+  icons
+};
+//# sourceMappingURL=icons.js.map

package/esm/utils/icons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/icons.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { AlertsDetailFill, InfoFill, SuccessFill, WarningSquare } from '@elliemae/ds-icons';\n\nexport const icons = {\n  success: <SuccessFill fill=\"#207e56\" width=\"20px\" height=\"20px\" />,\n  info: <InfoFill fill=\"#1e79c2\" width=\"20px\" height=\"20px\" />,\n  danger: <AlertsDetailFill fill=\"#c64252\" width=\"20px\" height=\"20px\" />,\n  warning: <WarningSquare fill=\"#d17a00\" width=\"20px\" height=\"20px\" />,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,QAAQ;AAAA,EACnB,SAAS,qCAAC,aAAD;AAAA,IAAa,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA,EACzD,MAAM,qCAAC,UAAD;AAAA,IAAU,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA,EACnD,QAAQ,qCAAC,kBAAD;AAAA,IAAkB,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA,EAC7D,SAAS,qCAAC,eAAD;AAAA,IAAe,MAAK;AAAA,IAAU,OAAM;AAAA,IAAO,QAAO;AAAA;AAAA;",
+  "names": []
+}

package/esm/utils/styleHelpers.js

@@ -1,44 +1,70 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import { kfrm, css } from '@elliemae/ds-system';
-import { BANNER_TYPES } from './bannerTypes.js';
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const slideIn = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n"])));
-const slideOut = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -100%, 0);\n  }\n"])));
-
-const spanContainer = height => kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ", "px;\n  }\n"])), height);
-
-const shrinkContainer = height => kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    height: ", "px;\n  }\n  100% {\n    height: 0px;\n  }\n"])), height);
-
-const handleBorderColor = (type, _ref) => {
-  let {
-    colors
-  } = _ref;
-
+import * as React from "react";
+import { kfrm, css } from "@elliemae/ds-system";
+import { BANNER_TYPES } from "./bannerTypes";
+const slideIn = kfrm`
+  0% {
+    transform: translate3d(0, -100%, 0);
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+`;
+const slideOut = kfrm`
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  60% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+`;
+const spanContainer = (height) => kfrm`
+  0% {
+    height: 0px;
+  }
+  100% {
+    height: ${height}px;
+  }
+`;
+const shrinkContainer = (height) => kfrm`
+  0% {
+    height: ${height}px;
+  }
+  100% {
+    height: 0px;
+  }
+`;
+const handleBorderColor = (type, { colors }) => {
   switch (type) {
     case BANNER_TYPES.SUCCESS:
       return colors.success[900];
-
     case BANNER_TYPES.INFO:
       return colors.brand[600];
-
     case BANNER_TYPES.WARNING:
       return colors.warning[900];
-
     case BANNER_TYPES.DANGER:
       return colors.danger[900];
   }
 };
-const handleAnimation = function (isAnimating, isOpen) {
-  let height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-
+const handleAnimation = (isAnimating, isOpen, height = null) => {
   if (isAnimating) {
     if (isOpen) {
-      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? spanContainer(height) : slideIn);
+      return css`
+        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
+      `;
     } else {
-      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in;\n      "])), height ? shrinkContainer(height) : slideOut);
+      return css`
+        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
+      `;
     }
   }
 };
-
-export { handleAnimation, handleBorderColor };
+export {
+  handleAnimation,
+  handleBorderColor
+};
+//# sourceMappingURL=styleHelpers.js.map

package/esm/utils/styleHelpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { kfrm, css } from '@elliemae/ds-system';\nimport type { FlattenSimpleInterpolation } from 'styled-components';\nimport { BANNER_TYPES } from './bannerTypes';\n\nconst slideIn = kfrm`\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n`;\n\nconst slideOut = kfrm`\n  0% {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translate3d(0, -100%, 0);\n  }\n`;\n\nconst spanContainer = (height: number) => kfrm`\n  0% {\n    height: 0px;\n  }\n  100% {\n    height: ${height}px;\n  }\n`;\n\nconst shrinkContainer = (height: number) => kfrm`\n  0% {\n    height: ${height}px;\n  }\n  100% {\n    height: 0px;\n  }\n`;\n\nexport const handleBorderColor = (type, { colors }): string => {\n  switch (type) {\n    case BANNER_TYPES.SUCCESS:\n      return colors.success[900];\n    case BANNER_TYPES.INFO:\n      return colors.brand[600];\n    case BANNER_TYPES.WARNING:\n      return colors.warning[900];\n    case BANNER_TYPES.DANGER:\n      return colors.danger[900];\n  }\n};\n\nexport const handleAnimation = (\n  isAnimating: boolean,\n  isOpen: boolean,\n  height: number | null = null,\n): FlattenSimpleInterpolation => {\n  if (isAnimating) {\n    if (isOpen) {\n      return css`\n        animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;\n      `;\n    } else {\n      return css`\n        animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;\n      `;\n    }\n  }\n};\n"],
+  "mappings": "AAAA;ACAA;AAEA;AAEA,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShB,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcjB,MAAM,gBAAgB,CAAC,WAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B;AAAA;AAAA;AAId,MAAM,kBAAkB,CAAC,WAAmB;AAAA;AAAA,cAE9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOP,MAAM,oBAAoB,CAAC,MAAM,EAAE,aAAqB;AAC7D,UAAQ;AAAA,SACD,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,MAAM;AAAA,SACjB,aAAa;AAChB,aAAO,OAAO,QAAQ;AAAA,SACnB,aAAa;AAChB,aAAO,OAAO,OAAO;AAAA;AAAA;AAIpB,MAAM,kBAAkB,CAC7B,aACA,QACA,SAAwB,SACO;AAC/B,MAAI,aAAa;AACf,QAAI,QAAQ;AACV,aAAO;AAAA,qBACQ,SAAS,cAAc,UAAU;AAAA;AAAA,WAE3C;AACL,aAAO;AAAA,qBACQ,SAAS,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-banner",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Banner",
   "module": "./esm/index.js",
@@ -60,9 +60,9 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0",
-    "@elliemae/ds-icons": "2.2.0",
-    "@elliemae/ds-system": "2.2.0",
+    "@elliemae/ds-button": "2.3.0-alpha.3",
+    "@elliemae/ds-icons": "2.3.0-alpha.3",
+    "@elliemae/ds-system": "2.3.0-alpha.3",
     "react-desc": "~4.1.2"
   },
   "devDependencies": {

package/types/DSBanner.d.ts

@@ -56,4 +56,4 @@ declare const DSBannerWithSchema: {
     toTypescript: () => import("react-desc").TypescriptSchema;
 };
 export default DSBanner;
-export { DSBannerWithSchema };
+export { DSBanner, DSBannerWithSchema };