@asante-org/atlascopco-vt-litesitegenerator 3.8.4 → 3.8.5

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useId, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react';
+import React, { useId, useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -46,12 +46,87 @@ var LsgButton = function (_a) {
   }, children);
 };
 
-function bannerClassName(layout, mobileMediaPosition, background, className) {
-  return ["lsg-banner", "lsg-banner--".concat(layout), "lsg-banner--mobile-media-".concat(mobileMediaPosition),
-  // In AEM this class arrives on the decoration div instead; the SCSS only
-  // sets inherited custom properties, so either position works.
-  background ? "lsg-banner--bg-".concat(background) : "", className].filter(Boolean).join(" ");
+// ─────────────────────────────────────────────────────────────────────────────
+// AEM markup helpers
+//
+// The banner's content region is a parsys in AEM, filled by _cq_template with
+// Group > Title / Text / Button components. These helpers reproduce the HTML
+// those components (and their Sling decoration divs) emit on publish, so the
+// theme CSS written here applies to AEM unchanged. Reference page:
+// /content/vtba/varovac/en (wcmmode=disabled).
+// ─────────────────────────────────────────────────────────────────────────────
+var GRID_COLUMN = "aem-GridColumn aem-GridColumn--default--12";
+/** vtba/components/lsg/structure/group — a responsivegrid with two wrappers. */
+var AemGroup = function (_a) {
+  var styleClasses = _a.styleClasses,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ["lsg-group", styleClasses].filter(Boolean).join(" ")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "layout-container-color-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "layout-container-spacing-wrapper aem-Grid aem-Grid--12 aem-Grid--default--12 "
+  }, children)));
+};
+/**
+ * AEM decoration class for a grid column: the component's own class, then either
+ * its authored style classes or — when none are set — the component name.
+ */
+function columnClassName(componentClass, name, styleClass) {
+  return "".concat(componentClass, " ").concat(styleClass !== null && styleClass !== void 0 ? styleClass : name, " ").concat(GRID_COLUMN);
 }
+/** vtba/components/lsg/content/title — type "p" is the pre-title. */
+var AemTitle = function (_a) {
+  var Tag = _a.tag,
+    colour = _a.colour,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: columnClassName("cmp-lsg-title", "title", colour && "cmp-title__colour-".concat(colour))
+  }, /*#__PURE__*/React.createElement(Tag, {
+    className: "cmp-title__element".concat(Tag === "p" ? " cmp-title__element--pretitle" : "")
+  }, children));
+};
+/** vtba/components/lsg/content/text — core text v2 inside the decoration div. */
+var AemText = function (_a) {
+  var id = _a.id,
+    colour = _a.colour,
+    children = _a.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: columnClassName("cmp-lsg-text", "text", colour && "cmp-text__colour-".concat(colour))
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: "cmp-text"
+  }, /*#__PURE__*/React.createElement("p", null, children)));
+};
+/** vtba/components/lsg/content/button — the variant is a style class on the decoration div. */
+var AemButton = function (_a) {
+  var _b, _c;
+  var cta = _a.cta;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cmp-lsg-button button--".concat((_b = cta.variant) !== null && _b !== void 0 ? _b : "primary", " ").concat(GRID_COLUMN)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lsg-button-container"
+  }, /*#__PURE__*/React.createElement("a", {
+    className: "lsg-button",
+    href: (_c = cta.href) !== null && _c !== void 0 ? _c : "#",
+    target: cta.external ? "_blank" : undefined,
+    rel: cta.external ? "noopener noreferrer" : undefined,
+    onClick: cta.onClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "lsg-button__text"
+  }, cta.label))));
+};
+/** Same extension mapping as BannerModel.getVideoMimeType. */
+function videoMimeType(url) {
+  var path = url.split(/[?#]/)[0].toLowerCase();
+  if (path.endsWith(".mp4")) return "video/mp4";
+  if (path.endsWith(".webm")) return "video/webm";
+  if (path.endsWith(".ogg") || path.endsWith(".ogv")) return "video/ogg";
+  return undefined;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// LsgBanner
+// ─────────────────────────────────────────────────────────────────────────────
 var LsgBanner = function (_a) {
   var heading = _a.heading,
     preTitle = _a.preTitle,
@@ -60,10 +135,15 @@ var LsgBanner = function (_a) {
     copy = _a.copy,
     ctas = _a.ctas,
     cta = _a.cta,
+    preTitleColour = _a.preTitleColour,
+    headingColour = _a.headingColour,
+    bodyColour = _a.bodyColour,
     mediaType = _a.mediaType,
     imageUrl = _a.imageUrl,
     _b = _a.imageAlt,
     imageAlt = _b === void 0 ? "" : _b,
+    mediaHref = _a.mediaHref,
+    mediaTarget = _a.mediaTarget,
     videoUrl = _a.videoUrl,
     videoPoster = _a.videoPoster,
     _c = _a.videoControls,
@@ -79,65 +159,78 @@ var LsgBanner = function (_a) {
     _h = _a.mobileMediaPosition,
     mobileMediaPosition = _h === void 0 ? "top" : _h,
     background = _a.background,
+    accent = _a.accent,
     _j = _a.headingTag,
-    headingTag = _j === void 0 ? "h1" : _j,
+    headingTag = _j === void 0 ? "h2" : _j,
     className = _a.className;
+  var textId = "text-".concat(useId().replace(/[^a-zA-Z0-9]/g, ""));
   var resolvedPreTitle = preTitle !== null && preTitle !== void 0 ? preTitle : eyebrow;
   var resolvedBody = body !== null && body !== void 0 ? body : copy;
   var actions = ((ctas === null || ctas === void 0 ? void 0 : ctas.length) ? ctas : cta ? [cta] : []).slice(0, 3);
   var resolvedMediaType = mediaType !== null && mediaType !== void 0 ? mediaType : videoUrl ? "video" : "image";
   var hasMedia = layout !== "text-only" && (resolvedMediaType === "video" ? Boolean(videoUrl) : Boolean(imageUrl));
-  var HeadingTag = headingTag;
-  return /*#__PURE__*/React.createElement("section", {
-    className: bannerClassName(layout, mobileMediaPosition, background, className),
-    "data-lsg-is": "banner",
-    "data-lsg-banner-layout": layout,
-    "data-lsg-banner-mobile-media": mobileMediaPosition,
-    "data-lsg-banner-media": hasMedia ? resolvedMediaType : "none"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__shell"
-  }, hasMedia && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__media"
-  }, resolvedMediaType === "video" && videoUrl ? /*#__PURE__*/React.createElement("video", {
-    className: "lsg-banner__video",
-    src: videoUrl,
-    poster: videoPoster,
-    controls: videoControls,
-    autoPlay: videoAutoPlay,
-    muted: videoMuted,
-    loop: videoLoop,
-    playsInline: true,
-    "aria-label": imageAlt || heading
-  }) : imageUrl ? /*#__PURE__*/React.createElement("img", {
-    className: "lsg-banner__image",
+  var picture = /*#__PURE__*/React.createElement("picture", {
+    className: "lsg-banner__image"
+  }, /*#__PURE__*/React.createElement("img", {
     src: imageUrl,
-    alt: imageAlt
-  }) : null), /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__content"
-  }, resolvedPreTitle && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__pre-title"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "lsg-banner__pre-title-marker",
-    "aria-hidden": "true"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "lsg-banner__pre-title-text"
-  }, resolvedPreTitle)), /*#__PURE__*/React.createElement(HeadingTag, {
-    className: "lsg-banner__heading"
-  }, heading), resolvedBody && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__body"
-  }, /*#__PURE__*/React.createElement("p", null, resolvedBody)), actions.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__actions"
-  }, actions.map(function (action, index) {
-    var _a, _b;
-    return /*#__PURE__*/React.createElement(LsgButton, {
-      key: "".concat(action.label, "-").concat((_a = action.href) !== null && _a !== void 0 ? _a : "button", "-").concat(index),
-      href: action.href,
-      external: action.external,
-      variant: (_b = action.variant) !== null && _b !== void 0 ? _b : "primary",
-      onClick: action.onClick,
-      className: "lsg-banner__cta"
-    }, action.label);
-  })))));
+    alt: imageAlt,
+    loading: "lazy"
+  }));
+  return (
+    /*#__PURE__*/
+    // The Sling decoration div. Background / accent style-system classes land
+    // here in AEM, not on the section.
+    React.createElement("div", {
+      className: ["banner teaser", background && "lsg-banner--bg-".concat(background), accent && "lsg-banner--accent-".concat(accent), GRID_COLUMN, className].filter(Boolean).join(" ")
+    }, /*#__PURE__*/React.createElement("section", {
+      className: "lsg-banner lsg-banner--".concat(layout, " lsg-banner--mobile-media-").concat(mobileMediaPosition),
+      "data-lsg-is": "banner",
+      "data-lsg-banner-layout": layout,
+      "data-lsg-banner-mobile-media": mobileMediaPosition,
+      "data-lsg-banner-media": hasMedia ? resolvedMediaType : "none"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "lsg-banner__shell"
+    }, hasMedia && /*#__PURE__*/React.createElement("div", {
+      className: "lsg-banner__media"
+    }, resolvedMediaType === "video" && videoUrl ? /*#__PURE__*/React.createElement("video", {
+      className: "lsg-banner__video",
+      poster: videoPoster,
+      autoPlay: videoAutoPlay,
+      muted: videoMuted,
+      loop: videoLoop,
+      controls: videoControls,
+      playsInline: true,
+      "aria-label": imageAlt
+    }, /*#__PURE__*/React.createElement("source", {
+      src: videoUrl,
+      type: videoMimeType(videoUrl)
+    })) : mediaHref ? /*#__PURE__*/React.createElement("a", {
+      className: "lsg-banner__media-link",
+      href: mediaHref,
+      target: mediaTarget
+    }, picture) : picture), /*#__PURE__*/React.createElement("div", {
+      className: "lsg-banner__content"
+    }, /*#__PURE__*/React.createElement(AemGroup, {
+      styleClasses: "lsg-group-display--flex lsg-group-direction--column lsg-group-gap--16"
+    }, resolvedPreTitle && /*#__PURE__*/React.createElement(AemTitle, {
+      tag: "p",
+      colour: preTitleColour
+    }, resolvedPreTitle), /*#__PURE__*/React.createElement(AemTitle, {
+      tag: headingTag,
+      colour: headingColour
+    }, heading)), resolvedBody && /*#__PURE__*/React.createElement(AemGroup, null, /*#__PURE__*/React.createElement(AemText, {
+      id: textId,
+      colour: bodyColour
+    }, resolvedBody)), actions.length > 0 && /*#__PURE__*/React.createElement(AemGroup, {
+      styleClasses: "lsg-group-display--flex lsg-group-gap--16"
+    }, actions.map(function (action, index) {
+      var _a;
+      return /*#__PURE__*/React.createElement(AemButton, {
+        key: "".concat(action.label, "-").concat((_a = action.href) !== null && _a !== void 0 ? _a : "button", "-").concat(index),
+        cta: action
+      });
+    }))))))
+  );
 };
 
 function isSafeUrl$1(url) {