@laerdal/life-react-components 1.4.1-dev.21 → 1.4.1-dev.23.full

package/dist/Banners/Banner.cjs

@@ -69,7 +69,8 @@ var Banner = function Banner(_ref) {
       link = _ref.link,
       onClose = _ref.onClose,
       icon = _ref.icon,
-      noIcon = _ref.noIcon;
+      noIcon = _ref.noIcon,
+      linkAction = _ref.linkAction;
 
   var _React$useState = React.useState(window.innerWidth),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -83,202 +84,100 @@ var Banner = function Banner(_ref) {
 
     window.addEventListener('resize', handleResize);
   });
+  var bannerParams = {
+    typeColor: _styles.COLORS.primary_100,
+    accentColor: _styles.COLORS.primary_700,
+    hoverColor: _styles.COLORS.primary_20,
+    closeIconColor: _styles.COLORS.primary_500,
+    icon: _SystemIcons.Tip,
+    containerType: 'neutral',
+    focusBgColor: _styles.COLORS.primary_200
+  };
   var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
 
-  switch (formatTypeToLowerCase) {
-    case 'warning':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
-        "data-testid": testId,
-        $type: _styles.COLORS.warning_100,
-        link: _styles.COLORS.warning_700,
-        hover: _styles.COLORS.warning_20,
-        bottom: bottom,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
-          $color: _styles.COLORS.warning_700,
-          className: size,
-          children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Help, {
-            color: _styles.COLORS.warning_700,
-            size: "24px"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
-              size: size,
-              width: width,
-              color: _styles.COLORS.warning_700,
-              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
-                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
-                href: link,
-                variant: "default",
-                children: linkText
-              })]
-            })
-          }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
-              $type: formatTypeToLowerCase,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-                variant: "secondary",
-                shape: "circular",
-                useTransparentBackground: true,
-                focusBackgroundColor: _styles.COLORS.warning_200,
-                action: function action() {
-                  return onClose();
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
-                  color: _styles.COLORS.warning_500,
-                  size: "24px"
-                })
-              })
-            })
-          })]
-        })
-      });
-
-    case 'critical':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
-        "data-testid": testId,
-        $type: _styles.COLORS.critical_100,
-        link: _styles.COLORS.critical_700,
-        hover: _styles.COLORS.critical_20,
-        bottom: bottom,
-        className: size,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
-          $color: _styles.COLORS.critical_700,
-          className: size,
-          children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
-            color: _styles.COLORS.critical_700,
-            size: "24px"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
-              size: size,
-              width: width,
-              color: _styles.COLORS.critical_700,
-              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
-                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
-                href: link,
-                variant: "default",
-                children: linkText
-              })]
-            })
-          }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
-              $type: formatTypeToLowerCase,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-                variant: "secondary",
-                shape: "circular",
-                useTransparentBackground: true,
-                focusBackgroundColor: _styles.COLORS.critical_200,
-                action: function action() {
-                  return onClose();
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
-                  color: _styles.COLORS.critical_500,
-                  size: "24px"
-                })
-              })
-            })
-          })]
-        })
-      });
+  if (formatTypeToLowerCase == 'warning') {
+    bannerParams.typeColor = _styles.COLORS.warning_100;
+    bannerParams.accentColor = _styles.COLORS.warning_700;
+    bannerParams.focusBgColor = _styles.COLORS.warning_200;
+    bannerParams.hoverColor = _styles.COLORS.warning_20;
+    bannerParams.icon = _SystemIcons.Help;
+    bannerParams.closeIconColor = _styles.COLORS.warning_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+  } else if (formatTypeToLowerCase == 'critical') {
+    bannerParams.typeColor = _styles.COLORS.critical_100;
+    bannerParams.accentColor = _styles.COLORS.critical_700;
+    bannerParams.focusBgColor = _styles.COLORS.critical_200;
+    bannerParams.hoverColor = _styles.COLORS.critical_20;
+    bannerParams.icon = _SystemIcons.TechnicalWarning;
+    bannerParams.closeIconColor = _styles.COLORS.critical_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+  } else if (formatTypeToLowerCase == 'positive') {
+    bannerParams.typeColor = _styles.COLORS.correct_100;
+    bannerParams.accentColor = _styles.COLORS.correct_700;
+    bannerParams.focusBgColor = _styles.COLORS.correct_200;
+    bannerParams.hoverColor = _styles.COLORS.correct_20;
+    bannerParams.icon = _SystemIcons.ThumbsUp;
+    bannerParams.closeIconColor = _styles.COLORS.correct_500;
+    bannerParams.containerType = formatTypeToLowerCase;
+  }
 
-    case 'positive':
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
-        "data-testid": testId,
-        $type: _styles.COLORS.correct_100,
-        link: _styles.COLORS.correct_700,
-        hover: _styles.COLORS.correct_20,
-        bottom: bottom,
-        className: size,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
-          $color: _styles.COLORS.correct_700,
-          className: size,
-          children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ThumbsUp, {
-            color: _styles.COLORS.correct_700,
-            size: "24px"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
-              size: size,
-              width: width,
-              color: _styles.COLORS.correct_700,
-              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
-                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
-                href: link,
-                variant: "default",
-                children: linkText
-              })]
-            })
-          }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
-              $type: formatTypeToLowerCase,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-                variant: "secondary",
-                shape: "circular",
-                useTransparentBackground: true,
-                focusBackgroundColor: _styles.COLORS.correct_200,
-                action: function action() {
-                  return onClose();
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
-                  color: _styles.COLORS.correct_500,
-                  size: "24px"
-                })
-              })
-            })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
+    "data-testid": testId,
+    $type: bannerParams.typeColor,
+    link: bannerParams.accentColor,
+    hover: bannerParams.hoverColor,
+    bottom: bottom,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
+      $color: bannerParams.accentColor,
+      className: size,
+      children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(bannerParams.icon, {
+        color: bannerParams.accentColor,
+        size: "24px"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
+          size: size,
+          width: width,
+          color: bannerParams.accentColor,
+          children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
+            id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
+            onClick: function onClick(e) {
+              if (linkAction) {
+                e.preventDefault();
+                linkAction(e);
+              }
+            },
+            href: link,
+            variant: "default",
+            children: linkText
           })]
         })
-      });
-
-    default:
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
-        "data-testid": testId,
-        $type: _styles.COLORS.primary_100,
-        link: _styles.COLORS.primary_700,
-        hover: _styles.COLORS.primary_20,
-        bottom: bottom,
-        className: size,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
-          $color: _styles.COLORS.primary_700,
-          className: size,
-          children: [icon ? icon : noIcon ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Tip, {
-            color: _styles.COLORS.primary_700,
-            size: "24px"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContentWrapper, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_typography.ComponentResponsive, {
-              size: size,
-              width: width,
-              color: _styles.COLORS.primary_700,
-              children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
-                id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
-                href: link,
-                variant: "default",
-                children: linkText
-              })]
+      }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
+          $type: bannerParams.containerType,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            variant: "secondary",
+            shape: "circular",
+            useTransparentBackground: true,
+            focusBackgroundColor: bannerParams.focusBgColor,
+            action: function action() {
+              return onClose();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
+              color: bannerParams.closeIconColor,
+              size: "24px"
             })
-          }), onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonWrapper, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
-              $type: "neutral",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-                variant: "secondary",
-                shape: "circular",
-                useTransparentBackground: true,
-                focusBackgroundColor: _styles.COLORS.primary_200,
-                action: function action() {
-                  return onClose();
-                },
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Close, {
-                  color: _styles.COLORS.primary_500,
-                  size: "24px"
-                })
-              })
-            })
-          })]
+          })
         })
-      });
-  }
+      })]
+    })
+  });
 };
 
 Banner.propTypes = {
   type: _propTypes.default.string,
   link: _propTypes.default.string,
   linkText: _propTypes.default.string,
+  linkAction: _propTypes.default.func,
   hover: _propTypes.default.string,
   bottom: _propTypes.default.bool,
   testId: _propTypes.default.string,

package/dist/Banners/Banner.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_20","Math","floor","random","warning_200","warning_500","critical_100","critical_700","critical_20","critical_200","critical_500","correct_700","correct_20","correct_200","correct_500","primary_100","primary_700","primary_20","primary_200","primary_500","hover"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAOA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,4hBACL,UAACC,KAAD;AAAA,SAA8BA,KAAK,CAACC,KAAN,GAAcD,KAAK,CAACC,KAApB,GAA4BC,eAAOC,WAAjE;AAAA,CADK,EAIVD,eAAOE,KAJG,EAKL,UAACJ,KAAD;AAAA,SAA8BA,KAAK,CAACK,MAAN,GAAe,MAAf,GAAwB,GAAtD;AAAA,CALK,EAUfC,oBAAYC,MAVG,EAafD,oBAAYE,KAbG,EA4BR,UAACR,KAAD;AAAA,SAAwBA,KAAK,CAACS,IAA9B;AAAA,CA5BQ,CAArB;;AAgCA,IAAMC,YAAY,GAAGZ,0BAAOC,GAAV,iZACd,UAACC,KAAD;AAAA,SAAW,mCAAkBW,2BAAmBC,OAArC,EAA8CZ,KAAK,CAACa,MAApD,CAAX;AAAA,CADc,EAMdP,oBAAYC,MANE,EASdD,oBAAYE,KATE,CAAlB;;AA4BA,IAAMM,aAAa,GAAGhB,0BAAOC,GAAV,8GAAnB;;AAIA,IAAMgB,eAAe,GAAGjB,0BAAOC,GAAV,uHAEjB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,KAAN,GAAc,6BAAeD,KAAK,CAACC,KAArB,CAAd,GAA4C,IAAxD;AAAA,CAFiB,CAArB;;AAKA,IAAMe,oBAAoB,GAAGlB,0BAAOC,GAAV,yMAA1B;;AAsBA,IAAMkB,MAA4C,GAAG,SAA/CA,MAA+C,OAAqF;AAAA,MAAlFC,IAAkF,QAAlFA,IAAkF;AAAA,MAA5EC,IAA4E,QAA5EA,IAA4E;AAAA,MAAtEC,QAAsE,QAAtEA,QAAsE;AAAA,MAA5Df,MAA4D,QAA5DA,MAA4D;AAAA,MAApDgB,MAAoD,QAApDA,MAAoD;AAAA,MAA5CC,QAA4C,QAA5CA,QAA4C;AAAA,MAAlCb,IAAkC,QAAlCA,IAAkC;AAAA,MAA5Bc,OAA4B,QAA5BA,OAA4B;AAAA,MAAnBC,IAAmB,QAAnBA,IAAmB;AAAA,MAAbC,MAAa,QAAbA,MAAa;;AACxI,wBAA0BC,KAAK,CAACC,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AACAL,EAAAA,KAAK,CAACM,SAAN,CAAgB,YAAM;AACpB,aAASC,YAAT,GAAwB;AACtBF,MAAAA,QAAQ,CAACH,MAAM,CAACC,UAAR,CAAR;AACD;;AACDD,IAAAA,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;AACD,GALD;AAOA,MAAME,qBAAqB,GAAGhB,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEiB,WAAN,EAA9B;;AACA,UAAQD,qBAAR;AACE,SAAK,SAAL;AACE,0BACE,qBAAC,eAAD;AAAiB,uBAAad,MAA9B;AAAsC,QAAA,KAAK,EAAEnB,eAAOmC,WAApD;AAAiE,QAAA,IAAI,EAAEnC,eAAOoC,WAA9E;AAA2F,QAAA,KAAK,EAAEpC,eAAOqC,UAAzG;AAAqH,QAAA,MAAM,EAAElC,MAA7H;AAAA,+BACE,sBAAC,YAAD;AAAc,UAAA,MAAM,EAAEH,eAAOoC,WAA7B;AAA0C,UAAA,SAAS,EAAEpB,IAArD;AAAA,qBACGM,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,qBAAC,iBAAD;AAAM,YAAA,KAAK,EAAEvB,eAAOoC,WAApB;AAAiC,YAAA,IAAI,EAAC;AAAtC,YADjC,eAEE,qBAAC,oBAAD;AAAA,mCACE,sBAAC,+BAAD;AAAqB,cAAA,IAAI,EAAEpB,IAA3B;AAAiC,cAAA,KAAK,EAAEY,KAAxC;AAA+C,cAAA,KAAK,EAAE5B,eAAOoC,WAA7D;AAAA,yBACGlB,QADH,cAEGX,IAAI,IAAIa,QAAR,iBACC,qBAAC,oBAAD;AAAW,gBAAA,EAAE,YAAKkB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAL,gBAAb;AAAyE,gBAAA,IAAI,EAAEjC,IAA/E;AAAqF,gBAAA,OAAO,EAAC,SAA7F;AAAA,0BACGa;AADH,gBAHJ;AAAA;AADF,YAFF,EAYGC,OAAO,iBACN,qBAAC,aAAD;AAAA,mCACE,qBAAC,eAAD;AAAiB,cAAA,KAAK,EAAEY,qBAAxB;AAAA,qCACE,qBAAC,kBAAD;AAAY,gBAAA,OAAO,EAAC,WAApB;AAAgC,gBAAA,KAAK,EAAC,UAAtC;AAAiD,gBAAA,wBAAwB,MAAzE;AAA0E,gBAAA,oBAAoB,EAAEjC,eAAOyC,WAAvG;AAAoH,gBAAA,MAAM,EAAE;AAAA,yBAAMpB,OAAO,EAAb;AAAA,iBAA5H;AAAA,uCACE,qBAAC,kBAAD;AAAO,kBAAA,KAAK,EAAErB,eAAO0C,WAArB;AAAkC,kBAAA,IAAI,EAAC;AAAvC;AADF;AADF;AADF,YAbJ;AAAA;AADF,QADF;;AA0BF,SAAK,UAAL;AACE,0BACE,qBAAC,eAAD;AAAiB,uBAAavB,MAA9B;AAAsC,QAAA,KAAK,EAAEnB,eAAO2C,YAApD;AAAkE,QAAA,IAAI,EAAE3C,eAAO4C,YAA/E;AAA6F,QAAA,KAAK,EAAE5C,eAAO6C,WAA3G;AAAwH,QAAA,MAAM,EAAE1C,MAAhI;AAAwI,QAAA,SAAS,EAAEa,IAAnJ;AAAA,+BACE,sBAAC,YAAD;AAAc,UAAA,MAAM,EAAEhB,eAAO4C,YAA7B;AAA2C,UAAA,SAAS,EAAE5B,IAAtD;AAAA,qBACGM,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,qBAAC,6BAAD;AAAkB,YAAA,KAAK,EAAEvB,eAAO4C,YAAhC;AAA8C,YAAA,IAAI,EAAC;AAAnD,YADjC,eAEE,qBAAC,oBAAD;AAAA,mCACE,sBAAC,+BAAD;AAAqB,cAAA,IAAI,EAAE5B,IAA3B;AAAiC,cAAA,KAAK,EAAEY,KAAxC;AAA+C,cAAA,KAAK,EAAE5B,eAAO4C,YAA7D;AAAA,yBACG1B,QADH,cAEGX,IAAI,IAAIa,QAAR,iBACC,qBAAC,oBAAD;AAAW,gBAAA,EAAE,YAAKkB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAL,gBAAb;AAAyE,gBAAA,IAAI,EAAEjC,IAA/E;AAAqF,gBAAA,OAAO,EAAC,SAA7F;AAAA,0BACGa;AADH,gBAHJ;AAAA;AADF,YAFF,EAYGC,OAAO,iBACN,qBAAC,aAAD;AAAA,mCACE,qBAAC,eAAD;AAAiB,cAAA,KAAK,EAAEY,qBAAxB;AAAA,qCACE,qBAAC,kBAAD;AAAY,gBAAA,OAAO,EAAC,WAApB;AAAgC,gBAAA,KAAK,EAAC,UAAtC;AAAiD,gBAAA,wBAAwB,MAAzE;AAA0E,gBAAA,oBAAoB,EAAEjC,eAAO8C,YAAvG;AAAqH,gBAAA,MAAM,EAAE;AAAA,yBAAMzB,OAAO,EAAb;AAAA,iBAA7H;AAAA,uCACE,qBAAC,kBAAD;AAAO,kBAAA,KAAK,EAAErB,eAAO+C,YAArB;AAAmC,kBAAA,IAAI,EAAC;AAAxC;AADF;AADF;AADF,YAbJ;AAAA;AADF,QADF;;AA0BF,SAAK,UAAL;AACE,0BACE,qBAAC,eAAD;AAAiB,uBAAa5B,MAA9B;AAAsC,QAAA,KAAK,EAAEnB,eAAOC,WAApD;AAAiE,QAAA,IAAI,EAAED,eAAOgD,WAA9E;AAA2F,QAAA,KAAK,EAAEhD,eAAOiD,UAAzG;AAAqH,QAAA,MAAM,EAAE9C,MAA7H;AAAqI,QAAA,SAAS,EAAEa,IAAhJ;AAAA,+BACE,sBAAC,YAAD;AAAc,UAAA,MAAM,EAAEhB,eAAOgD,WAA7B;AAA0C,UAAA,SAAS,EAAEhC,IAArD;AAAA,qBACGM,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,qBAAC,qBAAD;AAAU,YAAA,KAAK,EAAEvB,eAAOgD,WAAxB;AAAqC,YAAA,IAAI,EAAC;AAA1C,YADjC,eAEE,qBAAC,oBAAD;AAAA,mCACE,sBAAC,+BAAD;AAAqB,cAAA,IAAI,EAAEhC,IAA3B;AAAiC,cAAA,KAAK,EAAEY,KAAxC;AAA+C,cAAA,KAAK,EAAE5B,eAAOgD,WAA7D;AAAA,yBACG9B,QADH,cAEGX,IAAI,IAAIa,QAAR,iBACC,qBAAC,oBAAD;AAAW,gBAAA,EAAE,YAAKkB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAL,gBAAb;AAAyE,gBAAA,IAAI,EAAEjC,IAA/E;AAAqF,gBAAA,OAAO,EAAC,SAA7F;AAAA,0BACGa;AADH,gBAHJ;AAAA;AADF,YAFF,EAYGC,OAAO,iBACN,qBAAC,aAAD;AAAA,mCACE,qBAAC,eAAD;AAAiB,cAAA,KAAK,EAAEY,qBAAxB;AAAA,qCACE,qBAAC,kBAAD;AAAY,gBAAA,OAAO,EAAC,WAApB;AAAgC,gBAAA,KAAK,EAAC,UAAtC;AAAiD,gBAAA,wBAAwB,MAAzE;AAA0E,gBAAA,oBAAoB,EAAEjC,eAAOkD,WAAvG;AAAoH,gBAAA,MAAM,EAAE;AAAA,yBAAM7B,OAAO,EAAb;AAAA,iBAA5H;AAAA,uCACE,qBAAC,kBAAD;AAAO,kBAAA,KAAK,EAAErB,eAAOmD,WAArB;AAAkC,kBAAA,IAAI,EAAC;AAAvC;AADF;AADF;AADF,YAbJ;AAAA;AADF,QADF;;AA0BF;AACE,0BACE,qBAAC,eAAD;AAAiB,uBAAahC,MAA9B;AAAsC,QAAA,KAAK,EAAEnB,eAAOoD,WAApD;AAAiE,QAAA,IAAI,EAAEpD,eAAOqD,WAA9E;AAA2F,QAAA,KAAK,EAAErD,eAAOsD,UAAzG;AAAqH,QAAA,MAAM,EAAEnD,MAA7H;AAAqI,QAAA,SAAS,EAAEa,IAAhJ;AAAA,+BACE,sBAAC,YAAD;AAAc,UAAA,MAAM,EAAEhB,eAAOqD,WAA7B;AAA0C,UAAA,SAAS,EAAErC,IAArD;AAAA,qBACGM,IAAI,GAAGA,IAAH,GAAUC,MAAM,GAAG,IAAH,gBAAU,qBAAC,gBAAD;AAAK,YAAA,KAAK,EAAEvB,eAAOqD,WAAnB;AAAgC,YAAA,IAAI,EAAC;AAArC,YADjC,eAEE,qBAAC,oBAAD;AAAA,mCACE,sBAAC,+BAAD;AAAqB,cAAA,IAAI,EAAErC,IAA3B;AAAiC,cAAA,KAAK,EAAEY,KAAxC;AAA+C,cAAA,KAAK,EAAE5B,eAAOqD,WAA7D;AAAA,yBACGnC,QADH,cAEGX,IAAI,IAAIa,QAAR,iBACC,qBAAC,oBAAD;AAAW,gBAAA,EAAE,YAAKkB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAL,gBAAb;AAAyE,gBAAA,IAAI,EAAEjC,IAA/E;AAAqF,gBAAA,OAAO,EAAC,SAA7F;AAAA,0BACGa;AADH,gBAHJ;AAAA;AADF,YAFF,EAYGC,OAAO,iBACN,qBAAC,aAAD;AAAA,mCACE,qBAAC,eAAD;AAAiB,cAAA,KAAK,EAAC,SAAvB;AAAA,qCACE,qBAAC,kBAAD;AAAY,gBAAA,OAAO,EAAC,WAApB;AAAgC,gBAAA,KAAK,EAAC,UAAtC;AAAiD,gBAAA,wBAAwB,MAAzE;AAA0E,gBAAA,oBAAoB,EAAErB,eAAOuD,WAAvG;AAAoH,gBAAA,MAAM,EAAE;AAAA,yBAAMlC,OAAO,EAAb;AAAA,iBAA5H;AAAA,uCACE,qBAAC,kBAAD;AAAO,kBAAA,KAAK,EAAErB,eAAOwD,WAArB;AAAkC,kBAAA,IAAI,EAAC;AAAvC;AADF;AADF;AADF,YAbJ;AAAA;AADF,QADF;AAnFJ;AA8GD,CAxHD;;;AAXEvC,EAAAA,I;AACAV,EAAAA,I;AACAa,EAAAA,Q;AACAqC,EAAAA,K;AACAtD,EAAAA,M;AACAgB,EAAAA,M;AACAG,EAAAA,I;AACAD,EAAAA,O;AACAE,EAAAA,M;;eA6HaR,M","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  const formatTypeToLowerCase = type?.toLowerCase();\n  switch (formatTypeToLowerCase) {\n    case 'warning':\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n          <BannerCenter $color={COLORS.warning_700} className={size}>\n            {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={COLORS.warning_200} action={() => onClose()}>\n                    <Close color={COLORS.warning_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'critical':\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n          <BannerCenter $color={COLORS.critical_700} className={size}>\n            {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={COLORS.critical_200} action={() => onClose()}>\n                    <Close color={COLORS.critical_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    case 'positive':\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n          <BannerCenter $color={COLORS.correct_700} className={size}>\n            {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type={formatTypeToLowerCase}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={COLORS.correct_200} action={() => onClose()}>\n                    <Close color={COLORS.correct_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n    default:\n      return (\n        <BannerContainer data-testid={testId} $type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n          <BannerCenter $color={COLORS.primary_700} className={size}>\n            {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type=\"neutral\">\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={COLORS.primary_200} action={() => onClose()}>\n                    <Close color={COLORS.primary_500} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>\n      );\n  }\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}
+{"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","Help","warning_500","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","correct_700","correct_200","correct_20","ThumbsUp","correct_500","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport { stringify } from 'querystring';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n  background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n  min-height: 48px;\n  display: flex;\n  color: ${COLORS.black};\n  margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n  button:last-child {\n    line-height: 0;\n    margin: 0 0 0 8px;\n    ${BREAKPOINTS.MEDIUM} {\n      margin: 0 0 0 16px;\n    }\n    ${BREAKPOINTS.LARGE} {\n      margin: 0 0 0 32px;\n    }\n    &.small {\n      margin: 0 0 0 8px;\n    }\n    &.medium {\n      margin: 0 0 0 16px;\n    }\n    &.large {\n      margin: 0 0 0 32px;\n    }\n  }\n\n  a {\n    color: ${(props: BannerProps) => props.link} !important;\n  }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n  ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n  display: flex;\n  width: 100%;\n  margin: 0 16px;\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 32px;\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 56px;\n  }\n  &.small {\n    margin: 0 16px;\n  }\n  &.medium {\n    margin: 0 32px;\n  }\n  &.large {\n    margin: 0 56px;\n  }\n\n  > svg {\n    flex-shrink: 0;\n    margin: 12px 0;\n  }\n`;\n\nconst ButtonWrapper = styled.div`\n  margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n  display: contents;\n  ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  margin: 12px 0;\n  &:not(:first-child) {\n    margin-left: 8px;\n  }\n`;\n\ntype BannerProps = {\n  size?: Size.Small | Size.Medium | Size.Large;\n  type?: string;\n  link?: string;\n  linkText?: string;\n  linkAction?: (ev: React.MouseEvent) => void;\n  hover?: string;\n  bottom?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  onClose?: () => void;\n  noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  let bannerParams = {\n    typeColor: COLORS.primary_100,\n    accentColor: COLORS.primary_700, \n    hoverColor: COLORS.primary_20,\n    closeIconColor: COLORS.primary_500,\n    icon: Tip,\n    containerType: 'neutral',\n    focusBgColor: COLORS.primary_200\n  };\n  const formatTypeToLowerCase = type?.toLowerCase();\n  if(formatTypeToLowerCase == 'warning')\n  {\n    bannerParams.typeColor = COLORS.warning_100;\n    bannerParams.accentColor = COLORS.warning_700;\n    bannerParams.focusBgColor = COLORS.warning_200;\n    bannerParams.hoverColor = COLORS.warning_20;\n    bannerParams.icon = Help;\n    bannerParams.closeIconColor = COLORS.warning_500;\n    bannerParams.containerType = formatTypeToLowerCase;\n  }\n  else if (formatTypeToLowerCase == 'critical')\n  {\n    bannerParams.typeColor = COLORS.critical_100;\n    bannerParams.accentColor = COLORS.critical_700;\n    bannerParams.focusBgColor = COLORS.critical_200;\n    bannerParams.hoverColor = COLORS.critical_20;\n    bannerParams.icon = TechnicalWarning;\n    bannerParams.closeIconColor = COLORS.critical_500;\n    bannerParams.containerType = formatTypeToLowerCase;\n  }\n  else if (formatTypeToLowerCase == 'positive')\n  {\n    bannerParams.typeColor = COLORS.correct_100;\n    bannerParams.accentColor = COLORS.correct_700;\n    bannerParams.focusBgColor = COLORS.correct_200;\n    bannerParams.hoverColor = COLORS.correct_20;\n    bannerParams.icon = ThumbsUp;\n    bannerParams.closeIconColor = COLORS.correct_500;\n    bannerParams.containerType = formatTypeToLowerCase;\n  }\n\n  return <BannerContainer data-testid={testId} $type={bannerParams.typeColor} \n          link={bannerParams.accentColor} \n          hover={bannerParams.hoverColor} bottom={bottom}>\n          <BannerCenter $color={bannerParams.accentColor} className={size}>\n            {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n            <BannerContentWrapper>\n              <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n                {children}&nbsp;&nbsp;\n                {link && linkText && (\n                  <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} \n                    onClick={(e) => {\n                      if(linkAction) {\n                        e.preventDefault();\n                        linkAction(e);\n                      }\n                    }}\n                    href={link} variant=\"default\">\n                    {linkText}\n                  </HyperLink>\n                )}\n              </ComponentResponsive>\n            </BannerContentWrapper>\n            {onClose && (\n              <ButtonWrapper>\n                <ButtonContainer $type={bannerParams.containerType}>\n                  <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n                    <Close color={bannerParams.closeIconColor} size=\"24px\" />\n                  </IconButton>\n                </ButtonContainer>\n              </ButtonWrapper>\n            )}\n          </BannerCenter>\n        </BannerContainer>;\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}

package/dist/Banners/Banner.d.ts

@@ -5,6 +5,7 @@ declare type BannerProps = {
     type?: string;
     link?: string;
     linkText?: string;
+    linkAction?: (ev: React.MouseEvent) => void;
     hover?: string;
     bottom?: boolean;
     testId?: string;