@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.1

package/dist/alertRaw/alertRaw.js

@@ -1,11 +1,43 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.AlertRaw = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+injectString("cs", "Close", "Zav\u0159\xEDt");
+injectString("da-DK", "Close", "Luk");
+injectString("de", "Close", "Schlie\xDFen");
+injectString("en", "Close", "Close");
+injectString("es", "Close", "Cerrar");
+injectString("fi-FI", "Close", "Sulje");
+injectString("fr", "Close", "Fermer");
+injectString("fr-FR", "Close", "Fermer");
+injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("id", "Close", "Tutup");
+injectString("it", "Close", "Chiudere");
+injectString("ja", "Close", "\u9589\u3058\u308B");
+injectString("ko-KR", "Close", "\uB2EB\uAE30");
+injectString("ms", "Close", "Tutup");
+injectString("nb-NO", "Close", "Lukk");
+injectString("nl", "Close", "Sluiten");
+injectString("pl", "Close", "Zamknij");
+injectString("pt-BR", "Close", "Fechar");
+injectString("sk-SK", "Close", "Zatvor");
+injectString("sv", "Close", "St\xE4ng");
+injectString("th", "Close", "\u0E1B\u0E34\u0E14");
+injectString("tr", "Close", "Kapat");
+injectString("zh-Hans", "Close", "\u5173\u95ED");
+injectString("zh-TW", "Close", "\u95DC\u9589");
 const alertAnimation_1 = __importDefault(require("./components/alertAnimation"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const buttonType_1 = require("../button/buttonType");
@@ -21,57 +53,146 @@ const themeContext_1 = require("../utils/theme/themeContext");
 const textIconButton_1 = require("../textIconButton/textIconButton");
 const button_1 = require("../button/button");
 const typedIcons = {
-    error: iconException_1.IconException,
-    success: iconCheckRadio_1.IconCheckRadio,
-    warning: iconWarning_1.IconWarning,
-    info: iconInfoCircle_1.IconInfoCircle
+  error: iconException_1.IconException,
+  success: iconCheckRadio_1.IconCheckRadio,
+  warning: iconWarning_1.IconWarning,
+  info: iconInfoCircle_1.IconInfoCircle
 };
-const getIcon = (t) => typedIcons[t];
-const AlertRaw = ({ id, type, header, text, buttons, className, onClose, animation, isOpen, ref }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const isDrive = (0, useDrive_1.useDrive)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
-    const alertClasses = (0, classNames_1.classNames)([
-        "zen-alert",
-        `zen-alert--${type || "info"}`,
-        isDrive ? "zen-alert--drive" : "",
-        isMobile ? "zen-alert--mobile" : "",
-        dark ? "zen-dark" : "",
-        header ? "zen-alert--with-header" : "",
-        className || ""
-    ]);
-    const onFooterPrimaryClick = (0, react_1.useCallback)(() => {
-        var _a, _b;
-        (_b = (_a = buttons.primary).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-        onClose();
-    }, [buttons, onClose]);
-    const onFooterTertiaryClick = (0, react_1.useCallback)(() => {
-        var _a, _b;
-        (_b = (_a = buttons.tertiary) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-        onClose();
-    }, [buttons, onClose]);
-    const primaryButton = (0, react_1.useMemo)(() => {
-        if (buttons.primary.icon) {
-            return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { iconPosition: buttons.primary.iconPosition || textIconButton_1.ButtonIconPosition.Start, icon: buttons.primary.icon, onClick: onFooterPrimaryClick, link: buttons.primary.link, className: "zen-alert__button zen-alert__primary-button zen-alert__primary-button--" + (type || "info"), title: buttons.primary.title, type: buttonType_1.ButtonType.Secondary, children: buttons.primary.text });
-        }
-        return (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: onFooterPrimaryClick, link: buttons.primary.link, className: "zen-alert__button zen-alert__primary-button zen-alert__primary-button--" + (type || "info"), title: buttons.primary.title, type: buttonType_1.ButtonType.Secondary, children: buttons.primary.text });
-    }, [buttons.primary.icon, buttons.primary.iconPosition, buttons.primary.link, buttons.primary.text, buttons.primary.title, onFooterPrimaryClick, type]);
-    const tertiaryButton = (0, react_1.useMemo)(() => {
-        if (!buttons.tertiary) {
-            return null;
-        }
-        if (buttons.tertiary.icon) {
-            return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { iconPosition: buttons.tertiary.iconPosition || textIconButton_1.ButtonIconPosition.Start, icon: buttons.tertiary.icon, title: buttons.tertiary.title, type: buttonType_1.ButtonType.Tertiary, className: `zen-alert__button zen-alert__tertiary-button zen-alert__tertiary-button--${type || "info"}`, onClick: onFooterTertiaryClick, link: buttons.tertiary.link, children: buttons.tertiary.text });
-        }
-        return (0, jsx_runtime_1.jsx)(button_1.Button, { title: buttons.tertiary.title, type: buttonType_1.ButtonType.Tertiary, className: `zen-alert__button zen-alert__tertiary-button zen-alert__tertiary-button--${type || "info"}`, onClick: onFooterTertiaryClick, link: buttons.tertiary.link, children: buttons.tertiary.text });
-    }, [buttons.tertiary, onFooterTertiaryClick, type]);
-    return (0, jsx_runtime_1.jsx)(alertAnimation_1.default, { id: id, isOpen: isOpen, animation: animation, children: (0, jsx_runtime_1.jsx)("div", { role: "status", "aria-atomic": "true", "aria-live": "polite", ref: ref, className: alertClasses, id: id, children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-alert__body-container", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-alert__content", children: (0, jsx_runtime_1.jsx)("div", { className: "zen-alert__header-container", children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-alert__header", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-alert__icon", children: (0, react_1.createElement)(getIcon(type || "info"), {
-                                            size: isDrive ? "huge" : "large",
-                                            className: `zen-alert__icon--${type || "info"}`
-                                        }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-alert__body", children: [header && (0, jsx_runtime_1.jsx)("div", { className: `zen-alert__title zen-alert__title--${type || "info"}`, children: header }), (0, jsx_runtime_1.jsx)("div", { className: "zen-alert__text", children: text })] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-alert__actions", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-alert__close-button", `zen-alert__close-button--${type || "info"}`]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: isDrive ? "huge" : "large" }) }) })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-alert__body-actions", children: [tertiaryButton, primaryButton] })] }) }) });
+const getIcon = t => typedIcons[t];
+const AlertRaw = ({
+  id,
+  type,
+  header,
+  text,
+  buttons,
+  className,
+  onClose,
+  animation,
+  isOpen,
+  ref
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isDrive = (0, useDrive_1.useDrive)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const {
+    dark
+  } = (0, react_1.useContext)(themeContext_1.themeContext);
+  const alertClasses = (0, classNames_1.classNames)(["zen-alert", `zen-alert--${type || "info"}`, isDrive ? "zen-alert--drive" : "", isMobile ? "zen-alert--mobile" : "", dark ? "zen-dark" : "", header ? "zen-alert--with-header" : "", className || ""]);
+  const onFooterPrimaryClick = (0, react_1.useCallback)(() => {
+    var _a, _b;
+    (_b = (_a = buttons.primary).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+    onClose();
+  }, [buttons, onClose]);
+  const onFooterTertiaryClick = (0, react_1.useCallback)(() => {
+    var _a, _b;
+    (_b = (_a = buttons.tertiary) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+    onClose();
+  }, [buttons, onClose]);
+  const primaryButton = (0, react_1.useMemo)(() => {
+    if (buttons.primary.icon) {
+      return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+        iconPosition: buttons.primary.iconPosition || textIconButton_1.ButtonIconPosition.Start,
+        icon: buttons.primary.icon,
+        onClick: onFooterPrimaryClick,
+        link: buttons.primary.link,
+        className: "zen-alert__button zen-alert__primary-button zen-alert__primary-button--" + (type || "info"),
+        title: buttons.primary.title,
+        type: buttonType_1.ButtonType.Secondary,
+        children: buttons.primary.text
+      });
+    }
+    return (0, jsx_runtime_1.jsx)(button_1.Button, {
+      onClick: onFooterPrimaryClick,
+      link: buttons.primary.link,
+      className: "zen-alert__button zen-alert__primary-button zen-alert__primary-button--" + (type || "info"),
+      title: buttons.primary.title,
+      type: buttonType_1.ButtonType.Secondary,
+      children: buttons.primary.text
+    });
+  }, [buttons.primary.icon, buttons.primary.iconPosition, buttons.primary.link, buttons.primary.text, buttons.primary.title, onFooterPrimaryClick, type]);
+  const tertiaryButton = (0, react_1.useMemo)(() => {
+    if (!buttons.tertiary) {
+      return null;
+    }
+    if (buttons.tertiary.icon) {
+      return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+        iconPosition: buttons.tertiary.iconPosition || textIconButton_1.ButtonIconPosition.Start,
+        icon: buttons.tertiary.icon,
+        title: buttons.tertiary.title,
+        type: buttonType_1.ButtonType.Tertiary,
+        className: `zen-alert__button zen-alert__tertiary-button zen-alert__tertiary-button--${type || "info"}`,
+        onClick: onFooterTertiaryClick,
+        link: buttons.tertiary.link,
+        children: buttons.tertiary.text
+      });
+    }
+    return (0, jsx_runtime_1.jsx)(button_1.Button, {
+      title: buttons.tertiary.title,
+      type: buttonType_1.ButtonType.Tertiary,
+      className: `zen-alert__button zen-alert__tertiary-button zen-alert__tertiary-button--${type || "info"}`,
+      onClick: onFooterTertiaryClick,
+      link: buttons.tertiary.link,
+      children: buttons.tertiary.text
+    });
+  }, [buttons.tertiary, onFooterTertiaryClick, type]);
+  return (0, jsx_runtime_1.jsx)(alertAnimation_1.default, {
+    id: id,
+    isOpen: isOpen,
+    animation: animation,
+    children: (0, jsx_runtime_1.jsx)("div", {
+      role: "status",
+      "aria-atomic": "true",
+      "aria-live": "polite",
+      ref: ref,
+      className: alertClasses,
+      id: id,
+      children: (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-alert__body-container",
+        children: [(0, jsx_runtime_1.jsx)("div", {
+          className: "zen-alert__content",
+          children: (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-alert__header-container",
+            children: (0, jsx_runtime_1.jsxs)("div", {
+              className: "zen-alert__header",
+              children: [(0, jsx_runtime_1.jsx)("div", {
+                className: "zen-alert__icon",
+                children: (0, react_1.createElement)(getIcon(type || "info"), {
+                  size: isDrive ? "huge" : "large",
+                  className: `zen-alert__icon--${type || "info"}`
+                })
+              }), (0, jsx_runtime_1.jsxs)("div", {
+                className: "zen-alert__body",
+                children: [header && (0, jsx_runtime_1.jsx)("div", {
+                  className: `zen-alert__title zen-alert__title--${type || "info"}`,
+                  children: header
+                }), (0, jsx_runtime_1.jsx)("div", {
+                  className: "zen-alert__text",
+                  children: text
+                })]
+              }), (0, jsx_runtime_1.jsx)("div", {
+                className: "zen-alert__actions",
+                children: (0, jsx_runtime_1.jsx)("button", {
+                  type: "button",
+                  className: (0, classNames_1.classNames)(["zen-alert__close-button", `zen-alert__close-button--${type || "info"}`]),
+                  onClick: onClose,
+                  title: translate("Close"),
+                  "aria-label": translate("Close"),
+                  children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+                    size: isDrive ? "huge" : "large"
+                  })
+                })
+              })]
+            })
+          })
+        }), (0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-alert__body-actions",
+          children: [tertiaryButton, primaryButton]
+        })]
+      })
+    })
+  });
 };
 exports.AlertRaw = AlertRaw;
-exports.TRANSLATIONS = [
-    "Close"
-];
+exports.TRANSLATIONS = ["Close"];

package/dist/banner/bannerMultipLine.js

@@ -1,11 +1,43 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.BannerMultiline = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+injectString("cs", "Close", "Zav\u0159\xEDt");
+injectString("da-DK", "Close", "Luk");
+injectString("de", "Close", "Schlie\xDFen");
+injectString("en", "Close", "Close");
+injectString("es", "Close", "Cerrar");
+injectString("fi-FI", "Close", "Sulje");
+injectString("fr", "Close", "Fermer");
+injectString("fr-FR", "Close", "Fermer");
+injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("id", "Close", "Tutup");
+injectString("it", "Close", "Chiudere");
+injectString("ja", "Close", "\u9589\u3058\u308B");
+injectString("ko-KR", "Close", "\uB2EB\uAE30");
+injectString("ms", "Close", "Tutup");
+injectString("nb-NO", "Close", "Lukk");
+injectString("nl", "Close", "Sluiten");
+injectString("pl", "Close", "Zamknij");
+injectString("pt-BR", "Close", "Fechar");
+injectString("sk-SK", "Close", "Zatvor");
+injectString("sv", "Close", "St\xE4ng");
+injectString("th", "Close", "\u0E1B\u0E34\u0E14");
+injectString("tr", "Close", "Kapat");
+injectString("zh-Hans", "Close", "\u5173\u95ED");
+injectString("zh-TW", "Close", "\u95DC\u9589");
 const bannerUtils_1 = require("./bannerUtils");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const typeIcon_1 = __importDefault(require("./typeIcon"));
@@ -15,24 +47,100 @@ const button_1 = require("../button/button");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const react_1 = require("react");
 const useNodeText_1 = require("../utils/useNodeText");
-const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = bannerUtils_1.DEFAULT_BANNER_SIZE, primaryAction, id, className = "" }) => {
-    const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const bannerBlockClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__block");
-    const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");
-    const bannerMessageClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__message");
-    const closeButtonClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__close-button");
-    const contentRef = (0, react_1.useRef)(null);
-    const text = (0, useNodeText_1.useNodeText)(contentRef);
-    const linkClasses = (0, classNames_1.classNames)(["zen-banner__link", "zen-banner__link--" + type]);
-    const blockClassNames = (0, classNames_1.classNames)([
-        "zen-banner",
-        "zen-banner__block",
-        bannerBlockClassName || "",
-        bannerOptions.blockClassName, className,
-        "zen-banner__block--multiline",
-        "zen-banner__block--" + size
-    ]);
-    return (0, jsx_runtime_1.jsx)("div", { id: id, className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]), children: [header && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__multiline-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__header-container", children: [icon && header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__message-container", children: [icon && !header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { className: "zen-banner__icon-block--top-gap", type: type }), (0, jsx_runtime_1.jsx)("div", { ref: contentRef, title: text, className: (0, classNames_1.classNames)(["zen-banner__message", `zen-banner__message--${size}`, "zen-banner__message--multiline", bannerMessageClassName || ""]), children: children }), onClose && !header && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-banner__close-button zen-banner__close-button--top-gap", onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (action || primaryAction) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__action zen-banner__action--multiline", children: [action && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }) });
+const BannerMultiline = ({
+  children,
+  header,
+  type = "warning",
+  icon,
+  action,
+  onClose,
+  role,
+  ariaAtomic,
+  ariaLive,
+  size = bannerUtils_1.DEFAULT_BANNER_SIZE,
+  primaryAction,
+  id,
+  className = ""
+}) => {
+  const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const bannerBlockClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__block");
+  const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");
+  const bannerMessageClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__message");
+  const closeButtonClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__close-button");
+  const contentRef = (0, react_1.useRef)(null);
+  const text = (0, useNodeText_1.useNodeText)(contentRef);
+  const linkClasses = (0, classNames_1.classNames)(["zen-banner__link", "zen-banner__link--" + type]);
+  const blockClassNames = (0, classNames_1.classNames)(["zen-banner", "zen-banner__block", bannerBlockClassName || "", bannerOptions.blockClassName, className, "zen-banner__block--multiline", "zen-banner__block--" + size]);
+  return (0, jsx_runtime_1.jsx)("div", {
+    id: id,
+    className: blockClassNames,
+    role: role,
+    "aria-atomic": ariaAtomic,
+    "aria-live": ariaLive,
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: (0, classNames_1.classNames)(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]),
+      children: [header && (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-banner__multiline-container",
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-banner__header-container",
+          children: [icon && header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, {
+            type: type
+          }), header && (0, jsx_runtime_1.jsx)("div", {
+            className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]),
+            children: header
+          })]
+        }), onClose && (0, jsx_runtime_1.jsx)("button", {
+          type: "button",
+          className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]),
+          onClick: onClose,
+          title: translate("Close"),
+          "aria-label": translate("Close"),
+          children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+            size: bannerHeaderClassName ? "huge" : "large"
+          })
+        })]
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-banner__message-container",
+        children: [icon && !header && (0, jsx_runtime_1.jsx)(typeIcon_1.default, {
+          className: "zen-banner__icon-block--top-gap",
+          type: type
+        }), (0, jsx_runtime_1.jsx)("div", {
+          ref: contentRef,
+          title: text,
+          className: (0, classNames_1.classNames)(["zen-banner__message", `zen-banner__message--${size}`, "zen-banner__message--multiline", bannerMessageClassName || ""]),
+          children: children
+        }), onClose && !header && (0, jsx_runtime_1.jsx)("button", {
+          type: "button",
+          className: "zen-banner__close-button zen-banner__close-button--top-gap",
+          onClick: onClose,
+          title: translate("Close"),
+          "aria-label": translate("Close"),
+          children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+            size: bannerHeaderClassName ? "huge" : "large"
+          })
+        })]
+      }), (action || primaryAction) && (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-banner__action zen-banner__action--multiline",
+        children: [action && (0, jsx_runtime_1.jsx)(button_1.Button, {
+          className: linkClasses,
+          type: buttonType_1.ButtonType.Tertiary,
+          link: action.link,
+          target: action.target,
+          onClick: action.onClick,
+          children: action.text
+        }), primaryAction && (0, jsx_runtime_1.jsx)(button_1.Button, {
+          className: linkClasses,
+          type: buttonType_1.ButtonType.Primary,
+          link: primaryAction.link,
+          target: primaryAction.target,
+          onClick: primaryAction.onClick,
+          children: primaryAction.text
+        })]
+      })]
+    })
+  });
 };
-exports.BannerMultiline = BannerMultiline;
+exports.BannerMultiline = BannerMultiline;

package/dist/banner/bannerSingleLine.js

@@ -1,11 +1,43 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.BannerSingleLine = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+injectString("cs", "Close", "Zav\u0159\xEDt");
+injectString("da-DK", "Close", "Luk");
+injectString("de", "Close", "Schlie\xDFen");
+injectString("en", "Close", "Close");
+injectString("es", "Close", "Cerrar");
+injectString("fi-FI", "Close", "Sulje");
+injectString("fr", "Close", "Fermer");
+injectString("fr-FR", "Close", "Fermer");
+injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("id", "Close", "Tutup");
+injectString("it", "Close", "Chiudere");
+injectString("ja", "Close", "\u9589\u3058\u308B");
+injectString("ko-KR", "Close", "\uB2EB\uAE30");
+injectString("ms", "Close", "Tutup");
+injectString("nb-NO", "Close", "Lukk");
+injectString("nl", "Close", "Sluiten");
+injectString("pl", "Close", "Zamknij");
+injectString("pt-BR", "Close", "Fechar");
+injectString("sk-SK", "Close", "Zatvor");
+injectString("sv", "Close", "St\xE4ng");
+injectString("th", "Close", "\u0E1B\u0E34\u0E14");
+injectString("tr", "Close", "Kapat");
+injectString("zh-Hans", "Close", "\u5173\u95ED");
+injectString("zh-TW", "Close", "\u95DC\u9589");
 const button_1 = require("../button/button");
 const buttonType_1 = require("../button/buttonType");
 const typeIcon_1 = __importDefault(require("./typeIcon"));
@@ -16,17 +48,79 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const react_1 = require("react");
 const useNodeText_1 = require("../utils/useNodeText");
-const BannerSingleLine = ({ children, header, type = "warning", icon, action, onClose, size = bannerUtils_1.DEFAULT_BANNER_SIZE, role, ariaAtomic, ariaLive, className, primaryAction, id }) => {
-    const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");
-    const bannerMessageClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__message");
-    const closeButtonClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__close-button");
-    const isMobile = (0, useMobile_1.useMobile)();
-    const contentRef = (0, react_1.useRef)(null);
-    const text = (0, useNodeText_1.useNodeText)(contentRef);
-    const linkClasses = (0, classNames_1.classNames)(["zen-banner__link", "zen-banner__link--" + type]);
-    const blockClassNames = (0, classNames_1.classNames)(["zen-banner", "zen-banner__block", bannerOptions.blockClassName, className || "", "zen-banner__block--" + size]);
-    return (0, jsx_runtime_1.jsxs)("div", { id: id, className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-banner__content", `zen-banner__content--${size}`]), children: [icon && (0, jsx_runtime_1.jsx)(typeIcon_1.default, { type: type }), header && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]), children: header }), (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]), ref: contentRef, title: text, children: children }), (action || primaryAction) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-banner__action", children: [action && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && (0, jsx_runtime_1.jsx)(button_1.Button, { className: linkClasses, type: buttonType_1.ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }), onClose && (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] });
+const BannerSingleLine = ({
+  children,
+  header,
+  type = "warning",
+  icon,
+  action,
+  onClose,
+  size = bannerUtils_1.DEFAULT_BANNER_SIZE,
+  role,
+  ariaAtomic,
+  ariaLive,
+  className,
+  primaryAction,
+  id
+}) => {
+  const bannerOptions = (0, bannerUtils_1.getBannerOptions)(type);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const bannerHeaderClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__header");
+  const bannerMessageClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__message");
+  const closeButtonClassName = (0, useDriveClassName_1.useDriveClassName)("zen-banner__close-button");
+  const isMobile = (0, useMobile_1.useMobile)();
+  const contentRef = (0, react_1.useRef)(null);
+  const text = (0, useNodeText_1.useNodeText)(contentRef);
+  const linkClasses = (0, classNames_1.classNames)(["zen-banner__link", "zen-banner__link--" + type]);
+  const blockClassNames = (0, classNames_1.classNames)(["zen-banner", "zen-banner__block", bannerOptions.blockClassName, className || "", "zen-banner__block--" + size]);
+  return (0, jsx_runtime_1.jsxs)("div", {
+    id: id,
+    className: blockClassNames,
+    role: role,
+    "aria-atomic": ariaAtomic,
+    "aria-live": ariaLive,
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: (0, classNames_1.classNames)(["zen-banner__content", `zen-banner__content--${size}`]),
+      children: [icon && (0, jsx_runtime_1.jsx)(typeIcon_1.default, {
+        type: type
+      }), header && (0, jsx_runtime_1.jsx)("div", {
+        className: (0, classNames_1.classNames)(["zen-banner__header", bannerHeaderClassName || ""]),
+        children: header
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: (0, classNames_1.classNames)(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]),
+        ref: contentRef,
+        title: text,
+        children: children
+      }), (action || primaryAction) && (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-banner__action",
+        children: [action && (0, jsx_runtime_1.jsx)(button_1.Button, {
+          className: linkClasses,
+          type: buttonType_1.ButtonType.Tertiary,
+          link: action.link,
+          target: action.target,
+          onClick: action.onClick,
+          children: action.text
+        }), primaryAction && (0, jsx_runtime_1.jsx)(button_1.Button, {
+          className: linkClasses,
+          type: buttonType_1.ButtonType.Primary,
+          link: primaryAction.link,
+          target: primaryAction.target,
+          onClick: primaryAction.onClick,
+          children: primaryAction.text
+        })]
+      })]
+    }), onClose && (0, jsx_runtime_1.jsx)("button", {
+      type: "button",
+      className: (0, classNames_1.classNames)(["zen-banner__close-button", closeButtonClassName || ""]),
+      onClick: onClose,
+      title: translate("Close"),
+      "aria-label": translate("Close"),
+      children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+        size: bannerHeaderClassName ? "huge" : "large"
+      })
+    })]
+  });
 };
-exports.BannerSingleLine = BannerSingleLine;
+exports.BannerSingleLine = BannerSingleLine;