@digital-b2c/coreui-kit 0.5.4 → 0.5.5

package/dist/index.cjs

@@ -1636,13 +1636,19 @@ var Teaser5050WithCta2 = Object.assign(Teaser5050WithCta, {
 
 // src/components/UpcomingEventCard/UpcomingEventCard.module.scss
 var UpcomingEventCard_module_default = {
-  hidden: "UpcomingEventCard_module_hidden",
-  image: "UpcomingEventCard_module_image",
-  "text-content": "UpcomingEventCard_module_text-content",
-  cta: "UpcomingEventCard_module_cta",
+  "event-card": "UpcomingEventCard_module_event-card",
+  "event-card-content": "UpcomingEventCard_module_event-card-content",
+  "event-card-image": "UpcomingEventCard_module_event-card-image",
+  "event-card-text-content": "UpcomingEventCard_module_event-card-text-content",
   date: "UpcomingEventCard_module_date",
   location: "UpcomingEventCard_module_location",
-  description: "UpcomingEventCard_module_description"
+  description: "UpcomingEventCard_module_description",
+  "event-card-footer": "UpcomingEventCard_module_event-card-footer",
+  horizontal: "UpcomingEventCard_module_horizontal",
+  "event-card-cta": "UpcomingEventCard_module_event-card-cta",
+  hidden: "UpcomingEventCard_module_hidden",
+  "cta-without-image": "UpcomingEventCard_module_cta-without-image",
+  vertical: "UpcomingEventCard_module_vertical"
 };
 var UpcomingEventCard = ({
   className,
@@ -1651,38 +1657,74 @@ var UpcomingEventCard = ({
   title,
   location,
   description,
-  cta
+  cta,
+  direction = "horizontal",
+  showImage = true
 }) => {
   const { is } = useViewPort_default();
   const hasCtaWithoutImage = cta && cta.url && !image;
-  const isBelowTablet = is("tablet", "below");
+  const hasCTAandImage = Boolean(cta && cta.url && image);
+  const hasImage = Boolean(image);
   const isBelowMobile = is("mobile-l", "below");
-  return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: clsx19__default.default(className), children: [
-    image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadProps(__spreadValues({}, image), { className: clsx19__default.default(UpcomingEventCard_module_default.image, className) })),
-    hasCtaWithoutImage && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", className: clsx19__default.default(isBelowTablet && UpcomingEventCard_module_default.hidden), href: cta.url, children: cta.label }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx19__default.default(UpcomingEventCard_module_default["text-content"], className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpcomingEventCard_module_default.date, children: date }),
-      title && /* @__PURE__ */ jsxRuntime.jsx("h3", { children: title }),
-      location && /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpcomingEventCard_module_default.location, children: location }),
-      description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: UpcomingEventCard_module_default.description, children: description }),
-      cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          variant: "secondary",
-          className: clsx19__default.default(!isBelowTablet && !image && UpcomingEventCard_module_default.hidden, UpcomingEventCard_module_default.cta),
-          fullWidth: isBelowMobile,
-          href: cta.url,
-          children: cta.label
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      className: clsx19__default.default(
+        "card",
+        UpcomingEventCard_module_default["event-card"],
+        UpcomingEventCard_module_default[direction],
+        hasCtaWithoutImage && UpcomingEventCard_module_default["cta-without-image"],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx19__default.default("card-content", UpcomingEventCard_module_default["event-card-content"]), children: [
+          showImage && image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadProps(__spreadValues({}, image), { className: clsx19__default.default("card-image", UpcomingEventCard_module_default["event-card-image"]) })),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx19__default.default("card-text-content", UpcomingEventCard_module_default["event-card-text-content"]), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpcomingEventCard_module_default.date, children: date }),
+            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: clsx19__default.default("card-text-title"), children: title }),
+            location && /* @__PURE__ */ jsxRuntime.jsx("span", { className: UpcomingEventCard_module_default.location, children: location }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx19__default.default("card-text-description", UpcomingEventCard_module_default.description), children: description }),
+            cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "secondary",
+                className: clsx19__default.default(
+                  "card-cta",
+                  UpcomingEventCard_module_default["event-card-cta"],
+                  !hasCTAandImage && UpcomingEventCard_module_default.hidden
+                ),
+                fullWidth: isBelowMobile,
+                href: cta.url,
+                icon: cta.icon,
+                children: cta.label
+              }
+            )
+          ] })
+        ] }),
+        cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: clsx19__default.default("card-footer", UpcomingEventCard_module_default["event-card-footer"], hasImage && UpcomingEventCard_module_default.hidden),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: "secondary",
+                className: clsx19__default.default("card-cta", UpcomingEventCard_module_default["event-card-cta"]),
+                fullWidth: isBelowMobile,
+                href: cta.url,
+                icon: cta.icon,
+                children: cta.label
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/components/Carousel/Carousel.module.scss
-var Carousel_module_default = {
-  "carousel-item": "Carousel_module_carousel-item"
-};
+var Carousel_module_default = {};
 var Carousel = (_a) => {
   var _b = _a, { slides, className } = _b, props = __objRest(_b, ["slides", "className"]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1690,22 +1732,38 @@ var Carousel = (_a) => {
     __spreadProps(__spreadValues({
       className: clsx19__default.default(Carousel_module_default.carousel, className),
       spaceBetween: 0,
-      slidesPerView: 1,
+      slidesPerView: "auto",
       modules: [modules.FreeMode],
       freeMode: { enabled: true, sticky: false, momentum: true },
       wrapperTag: "ul",
       loop: false
     }, props), {
-      children: slides.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(react$1.SwiperSlide, { tag: "li", className: Carousel_module_default["carousel-item"], children: slide }, index))
+      children: slides.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        react$1.SwiperSlide,
+        {
+          tag: "li",
+          className: clsx19__default.default(Carousel_module_default["carousel-item"], props.slideClass),
+          children: slide
+        },
+        index
+      ))
     })
   );
 };
 
 // src/widgets/EventList/EventList.module.scss
 var EventList_module_default = {
-  section: "EventList_module_section",
+  "event-list-module": "EventList_module_event-list-module",
+  "event-list-header-container": "EventList_module_event-list-header-container",
+  "event-list-wrapper": "EventList_module_event-list-wrapper",
+  vertical: "EventList_module_vertical",
   grey: "EventList_module_grey",
-  "header-container": "EventList_module_header-container"
+  "card-list-item": "EventList_module_card-list-item",
+  "card-item": "EventList_module_card-item",
+  horizontal: "EventList_module_horizontal",
+  "carousel-wrapper": "EventList_module_carousel-wrapper",
+  "carousel-list-item": "EventList_module_carousel-list-item",
+  "event-card": "EventList_module_event-card"
 };
 var EventListTitle = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
@@ -1717,22 +1775,69 @@ var EventList = ({ className, title, items, cta, variant, children }) => {
     title: EventListTitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
+  const isGrey = variant === "grey";
   const isBelowTablet = is("tablet", "below");
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: clsx19__default.default(EventList_module_default.section, variant && EventList_module_default[variant], className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: EventList_module_default["header-container"], children: [
-      titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: titleNode }),
-      cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(Button, { className: EventList_module_default.cta, variant: "nofillblack", href: cta.url, icon: "rightBlack", children: cta.label })
-    ] }),
-    variant === "grey" && isBelowTablet && /* @__PURE__ */ jsxRuntime.jsx(
-      Carousel,
-      {
-        className: EventList_module_default[variant],
-        slides: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(UpcomingEventCard, __spreadValues({ className: variant }, item), item.title))
-      }
-    ),
-    variant === "grey" && !isBelowTablet && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: clsx19__default.default(EventList_module_default[variant]), children: items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: variant, children: /* @__PURE__ */ jsxRuntime.jsx(UpcomingEventCard, __spreadProps(__spreadValues({}, item), { className: variant })) }, index)) }),
-    !variant && /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(UpcomingEventCard, __spreadValues({}, item)) }, index)) })
-  ] });
+  const cardDirection = isBelowTablet ? "vertical" : "horizontal";
+  const listDirection = isGrey ? "horizontal" : "vertical";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx19__default.default(
+        "event-list-module",
+        EventList_module_default["event-list-module"],
+        isGrey && EventList_module_default[variant],
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: clsx19__default.default(EventList_module_default["event-list-container"]), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: EventList_module_default["event-list-header-container"], children: [
+          titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: titleNode }),
+          cta && cta.url && /* @__PURE__ */ jsxRuntime.jsx(Button, { className: EventList_module_default.cta, variant: "nofillblack", href: cta.url, icon: cta.icon, children: cta.label })
+        ] }),
+        isGrey && isBelowTablet && /* @__PURE__ */ jsxRuntime.jsx(
+          Carousel,
+          {
+            wrapperClass: clsx19__default.default(EventList_module_default["carousel-wrapper"]),
+            slideClass: EventList_module_default["carousel-list-item"],
+            spaceBetween: 16,
+            slides: items.map((item) => {
+              var _a2, _b;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                UpcomingEventCard,
+                __spreadValues({
+                  className: isGrey && EventList_module_default["event-card"],
+                  direction: "vertical",
+                  showImage: false
+                }, item),
+                (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location
+              );
+            })
+          }
+        ),
+        isGrey && !isBelowTablet && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: clsx19__default.default(EventList_module_default["event-list-wrapper"], EventList_module_default["horizontal"], EventList_module_default[variant]), children: items == null ? void 0 : items.map((item, index) => {
+          var _a2, _b, _c;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "li",
+            {
+              className: clsx19__default.default(EventList_module_default["card-list-item"]),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                UpcomingEventCard,
+                __spreadProps(__spreadValues({}, item), {
+                  className: isGrey && EventList_module_default["card-item"],
+                  showImage: false,
+                  direction: "vertical"
+                })
+              )
+            },
+            (_c = (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location) != null ? _c : index
+          );
+        }) }),
+        !isGrey && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: clsx19__default.default(EventList_module_default["event-list-wrapper"], EventList_module_default[listDirection]), children: items == null ? void 0 : items.map((item, index) => {
+          var _a2, _b, _c;
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(UpcomingEventCard, __spreadProps(__spreadValues({}, item), { direction: cardDirection })) }, (_c = (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location) != null ? _c : index);
+        }) })
+      ] })
+    }
+  );
 };
 
 // src/widgets/EventList/index.ts
@@ -1857,7 +1962,7 @@ var TextCenterCtaInBottom = ({
       titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TextCenterCtaInBottom_module_default.title, children: titleNode }),
       subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TextCenterCtaInBottom_module_default.subtitle, children: subtitleNode })
     ] }),
-    (ctas == null ? void 0 : ctas.length) && /* @__PURE__ */ jsxRuntime.jsx(
+    !!(ctas == null ? void 0 : ctas.length) && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: clsx19__default.default(