@asante-org/atlascopco-vt-litesitegenerator 3.0.7 → 3.0.9

package/dist/index.esm.js

@@ -77,55 +77,117 @@ var LsgBanner = function (_a) {
   }, cta.label)));
 };
 
+function cardVariantClass(variant) {
+  switch (variant) {
+    case "onlyText":
+      return "lsg-card--only-text";
+    case "withIcon":
+      return "lsg-card--with-icon";
+    case "withImage":
+    default:
+      return "lsg-card--with-image";
+  }
+}
 var LsgCard = function (_a) {
+  var _b;
   var title = _a.title,
+    preTitle = _a.preTitle,
+    subtitle = _a.subtitle,
     description = _a.description,
     imageUrl = _a.imageUrl,
-    _b = _a.imageAlt,
-    imageAlt = _b === void 0 ? "" : _b,
+    _c = _a.imageAlt,
+    imageAlt = _c === void 0 ? "" : _c,
+    iconUrl = _a.iconUrl,
+    _d = _a.iconAlt,
+    iconAlt = _d === void 0 ? "" : _d,
     href = _a.href,
-    cta = _a.cta;
-  var inner = /*#__PURE__*/React.createElement(React.Fragment, null, imageUrl && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-card__image"
+    cta = _a.cta,
+    _e = _a.variant,
+    variant = _e === void 0 ? "withImage" : _e,
+    className = _a.className;
+  var resolvedIconUrl = iconUrl !== null && iconUrl !== void 0 ? iconUrl : imageUrl;
+  var actionLabel = (_b = cta === null || cta === void 0 ? void 0 : cta.label) !== null && _b !== void 0 ? _b : "Read more";
+  var cardClassName = ["lsg-card", cardVariantClass(variant), className].filter(Boolean).join(" ");
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, variant === "withImage" && imageUrl && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-card__media"
   }, /*#__PURE__*/React.createElement("img", {
     src: imageUrl,
     alt: imageAlt,
     loading: "lazy"
   })), /*#__PURE__*/React.createElement("div", {
-    className: "lsg-card__body"
-  }, /*#__PURE__*/React.createElement("h3", {
+    className: "lsg-card__content"
+  }, variant === "withIcon" && resolvedIconUrl && /*#__PURE__*/React.createElement("div", {
+    className: "lsg-card__icon",
+    "aria-hidden": iconAlt ? undefined : true
+  }, /*#__PURE__*/React.createElement("img", {
+    src: resolvedIconUrl,
+    alt: iconAlt,
+    loading: "lazy"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "lsg-card__top"
+  }, preTitle && /*#__PURE__*/React.createElement("span", {
+    className: "lsg-card__pre-title"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "lsg-card__pre-title-dot",
+    "aria-hidden": "true"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "lsg-card__pre-title-text"
+  }, preTitle), /*#__PURE__*/React.createElement("span", {
+    className: "lsg-card__pre-title-arrow",
+    "aria-hidden": "true"
+  }, "\u2192")), /*#__PURE__*/React.createElement("h3", {
     className: "lsg-card__title"
-  }, title), description && /*#__PURE__*/React.createElement("p", {
+  }, title), subtitle && /*#__PURE__*/React.createElement("h4", {
+    className: "lsg-card__subtitle"
+  }, subtitle)), /*#__PURE__*/React.createElement("div", {
+    className: "lsg-card__bottom"
+  }, description && /*#__PURE__*/React.createElement("p", {
     className: "lsg-card__description"
-  }, description), cta && !href && /*#__PURE__*/React.createElement("div", {
-    className: "lsg-card__footer"
-  }, /*#__PURE__*/React.createElement(LsgButton, {
-    href: cta.href,
-    external: cta.external,
-    variant: "primary"
-  }, cta.label))));
-  if (href) {
-    return /*#__PURE__*/React.createElement("article", {
-      className: "lsg-card"
-    }, /*#__PURE__*/React.createElement("a", {
-      href: href,
-      className: "lsg-card__link",
-      "aria-label": title
-    }, inner));
-  }
+  }, description), (href || cta) && (href ? /*#__PURE__*/React.createElement("span", {
+    className: "lsg-card__cta",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "lsg-card__cta-label"
+  }, actionLabel), /*#__PURE__*/React.createElement("span", {
+    className: "lsg-card__cta-arrow",
+    "aria-hidden": "true"
+  }, "\u2192")) : /*#__PURE__*/React.createElement("a", {
+    className: "lsg-card__cta",
+    href: cta === null || cta === void 0 ? void 0 : cta.href,
+    target: (cta === null || cta === void 0 ? void 0 : cta.external) ? "_blank" : undefined,
+    rel: (cta === null || cta === void 0 ? void 0 : cta.external) ? "noreferrer noopener" : undefined
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "lsg-card__cta-label"
+  }, actionLabel), /*#__PURE__*/React.createElement("span", {
+    className: "lsg-card__cta-arrow",
+    "aria-hidden": "true"
+  }, "\u2192"))))));
   return /*#__PURE__*/React.createElement("article", {
-    className: "lsg-card"
-  }, inner);
+    className: cardClassName,
+    "data-lsg-card-variant": variant
+  }, href ? /*#__PURE__*/React.createElement("a", {
+    href: href,
+    className: "lsg-card__link",
+    "aria-label": title
+  }, content) : /*#__PURE__*/React.createElement("div", {
+    className: "lsg-card__link"
+  }, content));
 };
-/** Renders a responsive grid of LsgCard items. */
+/** Renders the AEM/Storybook compatible responsive card grid. */
 var LsgCards = function (_a) {
-  var cards = _a.cards;
+  var cards = _a.cards,
+    _b = _a.columns,
+    columns = _b === void 0 ? 3 : _b,
+    className = _a.className;
+  var listClassName = ["lsg-cards", "lsg-cards--cols-".concat(columns), className].filter(Boolean).join(" ");
   return /*#__PURE__*/React.createElement("ul", {
-    className: "lsg-cards"
-  }, cards.map(function (card, i) {
-    var _a;
+    className: listClassName,
+    "data-columns": columns
+  }, cards.map(function (card, index) {
+    var _a, _b, _c;
     return /*#__PURE__*/React.createElement("li", {
-      key: (_a = card.href) !== null && _a !== void 0 ? _a : i
+      className: "lsg-cards__item",
+      key: (_c = (_a = card.href) !== null && _a !== void 0 ? _a : (_b = card.cta) === null || _b === void 0 ? void 0 : _b.href) !== null && _c !== void 0 ? _c : "".concat(card.title, "-").concat(index)
     }, /*#__PURE__*/React.createElement(LsgCard, card));
   }));
 };