@asante-org/atlascopco-vt-litesitegenerator 3.0.20 → 3.0.23

package/dist/index.esm.js

@@ -11,9 +11,10 @@ function _extends() {
 }
 
 var LsgButton = function (_a) {
-  var children = _a.children;
-    _a.variant;
-    var _c = _a.disabled,
+  var children = _a.children,
+    _b = _a.variant,
+    variant = _b === void 0 ? "primary" : _b,
+    _c = _a.disabled,
     disabled = _c === void 0 ? false : _c,
     href = _a.href,
     onClick = _a.onClick,
@@ -23,7 +24,7 @@ var LsgButton = function (_a) {
     className = _e === void 0 ? "" : _e,
     _f = _a.external,
     external = _f === void 0 ? false : _f;
-  var classNames = ["lsg-button", disabled ? "lsg-button--disabled" : "", className].filter(Boolean).join(" ");
+  var classNames = ["lsg-button", "lsg-button--".concat(variant), disabled ? "lsg-button--disabled" : "", className].filter(Boolean).join(" ");
   if (href) {
     return /*#__PURE__*/React.createElement("a", _extends({
       href: disabled ? undefined : href,
@@ -45,36 +46,94 @@ var LsgButton = function (_a) {
   }, children);
 };
 
+function bannerClassName(layout, mobileMediaPosition, className) {
+  return ["lsg-banner", "lsg-banner--".concat(layout), "lsg-banner--mobile-media-".concat(mobileMediaPosition), className].filter(Boolean).join(" ");
+}
 var LsgBanner = function (_a) {
   var heading = _a.heading,
+    preTitle = _a.preTitle,
     eyebrow = _a.eyebrow,
+    body = _a.body,
     copy = _a.copy,
+    ctas = _a.ctas,
     cta = _a.cta,
+    mediaType = _a.mediaType,
     imageUrl = _a.imageUrl,
     _b = _a.imageAlt,
-    imageAlt = _b === void 0 ? "" : _b;
+    imageAlt = _b === void 0 ? "" : _b,
+    videoUrl = _a.videoUrl,
+    videoPoster = _a.videoPoster,
+    _c = _a.videoControls,
+    videoControls = _c === void 0 ? true : _c,
+    _d = _a.videoAutoPlay,
+    videoAutoPlay = _d === void 0 ? false : _d,
+    _e = _a.videoMuted,
+    videoMuted = _e === void 0 ? true : _e,
+    _f = _a.videoLoop,
+    videoLoop = _f === void 0 ? false : _f,
+    _g = _a.layout,
+    layout = _g === void 0 ? "media-left" : _g,
+    _h = _a.mobileMediaPosition,
+    mobileMediaPosition = _h === void 0 ? "top" : _h,
+    _j = _a.headingTag,
+    headingTag = _j === void 0 ? "h1" : _j,
+    className = _a.className;
+  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: "lsg-banner"
-  }, imageUrl && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__background",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("img", {
+    className: bannerClassName(layout, mobileMediaPosition, 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",
     src: imageUrl,
     alt: imageAlt
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "lsg-banner__inner"
-  }, eyebrow && /*#__PURE__*/React.createElement("span", {
-    className: "lsg-banner__eyebrow"
-  }, eyebrow), /*#__PURE__*/React.createElement("h1", {
+  }) : 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), copy && /*#__PURE__*/React.createElement("p", {
-    className: "lsg-banner__copy"
-  }, copy), cta && /*#__PURE__*/React.createElement(LsgButton, {
-    href: cta.href,
-    external: cta.external,
-    variant: "primary",
-    className: "lsg-banner__cta"
-  }, cta.label)));
+  }, 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);
+  })))));
 };
 
 function cardVariantClass(variant) {