@digital-b2c/coreui-kit 0.7.2 → 0.7.4

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ImgHTMLAttributes, ReactNode, Ref, AnchorHTMLAttributes, HTMLAttributes, FC, PropsWithChildren } from 'react';
+import React__default, { ImgHTMLAttributes, ReactNode, Ref, AnchorHTMLAttributes, HTMLAttributes, FC, PropsWithChildren, CSSProperties } from 'react';
 
 interface IPicture {
     src: string;
@@ -473,18 +473,18 @@ interface UpcomingEventCardProps {
     showImage?: boolean;
 }
 
-type EventListVariants = 'grey';
 interface EventListProps extends PropsWithChildren {
     className?: string;
-    variant?: EventListVariants;
     title?: ReactNode;
     items: UpcomingEventCardProps[];
     cta?: ICta & {
         icon?: IconType;
     };
+    backgroundColor?: CSSProperties['backgroundColor'];
+    variant?: 'internalEventList';
 }
 
-declare const EventList: (({ className, title, items, cta, variant, children }: EventListProps) => react_jsx_runtime.JSX.Element) & {
+declare const EventList: (({ className, title, items, cta, backgroundColor, variant, children, }: EventListProps) => react_jsx_runtime.JSX.Element) & {
     Title: ({ children }: EventListTitleProps) => react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ImgHTMLAttributes, ReactNode, Ref, AnchorHTMLAttributes, HTMLAttributes, FC, PropsWithChildren } from 'react';
+import React__default, { ImgHTMLAttributes, ReactNode, Ref, AnchorHTMLAttributes, HTMLAttributes, FC, PropsWithChildren, CSSProperties } from 'react';
 
 interface IPicture {
     src: string;
@@ -473,18 +473,18 @@ interface UpcomingEventCardProps {
     showImage?: boolean;
 }
 
-type EventListVariants = 'grey';
 interface EventListProps extends PropsWithChildren {
     className?: string;
-    variant?: EventListVariants;
     title?: ReactNode;
     items: UpcomingEventCardProps[];
     cta?: ICta & {
         icon?: IconType;
     };
+    backgroundColor?: CSSProperties['backgroundColor'];
+    variant?: 'internalEventList';
 }
 
-declare const EventList: (({ className, title, items, cta, variant, children }: EventListProps) => react_jsx_runtime.JSX.Element) & {
+declare const EventList: (({ className, title, items, cta, backgroundColor, variant, children, }: EventListProps) => react_jsx_runtime.JSX.Element) & {
     Title: ({ children }: EventListTitleProps) => react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.mjs

@@ -5,7 +5,7 @@ import gsap$1, { gsap } from 'gsap';
 import { useGSAP } from '@gsap/react';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { FreeMode, Navigation, Pagination as Pagination$1 } from 'swiper/modules';
+import { FreeMode, A11y, Navigation, Pagination as Pagination$1 } from 'swiper/modules';
 import 'swiper/css';
 
 var __defProp = Object.defineProperty;
@@ -389,7 +389,8 @@ var Button = (_a) => {
   }, isLink ? { href, isExternal } : {}), rest);
   return /* @__PURE__ */ jsxs(ConditionalWrapper, __spreadProps(__spreadValues({ wrapper: Anchor, fallback: "button", condition: isLink }, props), { children: [
     children,
-    logo ? /* @__PURE__ */ jsx(Picture, __spreadValues({ className: Button_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsx(Icon, { type: icon, className: Button_module_default.icon })
+    isExternal && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(opens in a new tab)" }),
+    logo ? /* @__PURE__ */ jsx(Picture, __spreadValues({ className: Button_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsx(Icon, { type: icon, className: Button_module_default.icon, "aria-hidden": "true" })
   ] }));
 };
 
@@ -1768,6 +1769,7 @@ var UpcomingEventCard_module_default = {
   description: "UpcomingEventCard_module_description",
   "event-card-footer": "UpcomingEventCard_module_event-card-footer",
   horizontal: "UpcomingEventCard_module_horizontal",
+  "event-card-show-image": "UpcomingEventCard_module_event-card-show-image",
   "event-card-cta": "UpcomingEventCard_module_event-card-cta",
   hidden: "UpcomingEventCard_module_hidden",
   "cta-without-image": "UpcomingEventCard_module_cta-without-image",
@@ -1802,27 +1804,38 @@ var UpcomingEventCard = ({
       children: [
         /* @__PURE__ */ jsxs("div", { className: clsx20("card-content", UpcomingEventCard_module_default["event-card-content"]), children: [
           showImage && image && /* @__PURE__ */ jsx(Picture, __spreadProps(__spreadValues({}, image), { className: clsx20("card-image", UpcomingEventCard_module_default["event-card-image"]) })),
-          /* @__PURE__ */ jsxs("div", { className: clsx20("card-text-content", UpcomingEventCard_module_default["event-card-text-content"]), children: [
-            /* @__PURE__ */ jsx("span", { className: UpcomingEventCard_module_default.date, children: date }),
-            title && /* @__PURE__ */ jsx("h3", { className: clsx20("card-text-title"), children: title }),
-            location && /* @__PURE__ */ jsx("span", { className: UpcomingEventCard_module_default.location, children: location }),
-            description && /* @__PURE__ */ jsx("div", { className: clsx20("card-text-description", UpcomingEventCard_module_default.description), children: description }),
-            cta && cta.url && /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "secondary",
-                className: clsx20(
-                  "card-cta",
-                  UpcomingEventCard_module_default["event-card-cta"],
-                  !hasCTAandImage && UpcomingEventCard_module_default.hidden
-                ),
-                fullWidth: isBelowMobile,
-                href: cta.url,
-                icon: cta.icon,
-                children: cta.label
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: clsx20(
+                "card-text-content",
+                UpcomingEventCard_module_default["event-card-text-content"],
+                (!showImage || !hasImage) && UpcomingEventCard_module_default["event-card-show-image"]
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: UpcomingEventCard_module_default.date, children: date }),
+                title && /* @__PURE__ */ jsx("h3", { className: clsx20("card-text-title"), children: title }),
+                location && /* @__PURE__ */ jsx("span", { className: UpcomingEventCard_module_default.location, children: location }),
+                description && /* @__PURE__ */ jsx("div", { className: clsx20("card-text-description", UpcomingEventCard_module_default.description), children: description }),
+                cta && cta.url && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    className: clsx20(
+                      "card-cta",
+                      UpcomingEventCard_module_default["event-card-cta"],
+                      !hasCTAandImage && UpcomingEventCard_module_default.hidden
+                    ),
+                    fullWidth: isBelowMobile,
+                    href: cta.url,
+                    icon: cta.icon,
+                    isExternal: cta == null ? void 0 : cta.isExternal,
+                    children: cta.label
+                  }
+                )
+              ]
+            }
+          )
         ] }),
         cta && cta.url && /* @__PURE__ */ jsx(
           "div",
@@ -1836,6 +1849,7 @@ var UpcomingEventCard = ({
                 fullWidth: isBelowMobile,
                 href: cta.url,
                 icon: cta.icon,
+                isExternal: cta == null ? void 0 : cta.isExternal,
                 children: cta.label
               }
             )
@@ -1849,22 +1863,35 @@ var UpcomingEventCard = ({
 // src/components/Carousel/Carousel.module.scss
 var Carousel_module_default = {};
 var Carousel = (_a) => {
-  var _b = _a, { slides, className } = _b, props = __objRest(_b, ["slides", "className"]);
+  var _b = _a, {
+    slides,
+    className,
+    ariaLabel = "Carousel"
+  } = _b, props = __objRest(_b, [
+    "slides",
+    "className",
+    "ariaLabel"
+  ]);
   return /* @__PURE__ */ jsx(
     Swiper,
     __spreadProps(__spreadValues({
+      a11y: {
+        enabled: true,
+        containerMessage: ariaLabel,
+        containerRoleDescriptionMessage: "carousel"
+      },
+      role: "region",
+      "aria-label": ariaLabel,
       className: clsx20(Carousel_module_default.carousel, className),
       spaceBetween: 0,
       slidesPerView: "auto",
-      modules: [FreeMode],
+      modules: [FreeMode, A11y],
       freeMode: { enabled: true, sticky: false, momentum: true },
-      wrapperTag: "ul",
       loop: false
     }, props), {
       children: slides.map((slide, index) => /* @__PURE__ */ jsx(
         SwiperSlide,
         {
-          tag: "li",
           className: clsx20(Carousel_module_default["carousel-item"], props.slideClass),
           children: slide
         },
@@ -1878,11 +1905,13 @@ var Carousel = (_a) => {
 var EventList_module_default = {
   "event-list-module": "EventList_module_event-list-module",
   "event-list-header-container": "EventList_module_event-list-header-container",
+  "event-list-title": "EventList_module_event-list-title",
   "event-list-wrapper": "EventList_module_event-list-wrapper",
   vertical: "EventList_module_vertical",
-  grey: "EventList_module_grey",
   "card-list-item": "EventList_module_card-list-item",
   "card-item": "EventList_module_card-item",
+  internalEventList: "EventList_module_internalEventList",
+  "events-page": "EventList_module_events-page",
   horizontal: "EventList_module_horizontal",
   "carousel-wrapper": "EventList_module_carousel-wrapper",
   "carousel-list-item": "EventList_module_carousel-list-item",
@@ -1891,35 +1920,52 @@ var EventList_module_default = {
 var EventListTitle = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
-var EventList = ({ className, title, items, cta, variant, children }) => {
+var EventList = ({
+  className,
+  title,
+  items,
+  cta,
+  backgroundColor,
+  variant,
+  children
+}) => {
   var _a;
   const { is } = useViewPort_default();
   const slots = resolveCompoundSlots(children, {
     title: EventListTitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
-  const isGrey = variant === "grey";
   const isBelowTablet = is("tablet", "below");
   const cardDirection = isBelowTablet ? "vertical" : "horizontal";
-  const listDirection = isGrey ? "horizontal" : "vertical";
+  const isInternalEventList = variant === "internalEventList";
+  const listDirection = isInternalEventList ? "horizontal" : "vertical";
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx20(
-        "event-list-module",
-        EventList_module_default["event-list-module"],
-        isGrey && EventList_module_default[variant],
-        className
-      ),
+      className: clsx20("event-list-module", EventList_module_default["event-list-module"], className),
+      style: {
+        backgroundColor
+      },
       children: /* @__PURE__ */ jsxs(Container, { className: clsx20(EventList_module_default["event-list-container"]), children: [
         /* @__PURE__ */ jsxs("div", { className: EventList_module_default["event-list-header-container"], children: [
-          titleNode && /* @__PURE__ */ jsx("h2", { children: titleNode }),
-          cta && cta.url && /* @__PURE__ */ jsx(Button, { className: EventList_module_default.cta, variant: "nofillblack", href: cta.url, icon: cta.icon, children: cta.label })
+          titleNode && /* @__PURE__ */ jsx("h2", { className: clsx20(EventList_module_default["event-list-title"]), children: titleNode }),
+          cta && cta.url && /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: EventList_module_default.cta,
+              variant: "nofillblack",
+              href: cta.url,
+              icon: cta.icon,
+              isExternal: cta == null ? void 0 : cta.isExternal,
+              children: cta.label
+            }
+          )
         ] }),
-        isGrey && isBelowTablet && /* @__PURE__ */ jsx(
+        isInternalEventList && isBelowTablet && /* @__PURE__ */ jsx(
           Carousel,
           {
-            wrapperClass: clsx20(EventList_module_default["carousel-wrapper"]),
+            "aria-label": "Upcoming events",
+            wrapperClass: clsx20(EventList_module_default["carousel-wrapper"], EventList_module_default[variant]),
             slideClass: EventList_module_default["carousel-list-item"],
             spaceBetween: 16,
             slides: items.map((item) => {
@@ -1927,7 +1973,7 @@ var EventList = ({ className, title, items, cta, variant, children }) => {
               return /* @__PURE__ */ jsx(
                 UpcomingEventCard,
                 __spreadValues({
-                  className: isGrey && EventList_module_default["event-card"],
+                  className: clsx20(EventList_module_default["event-card"]),
                   direction: "vertical",
                   showImage: false
                 }, item),
@@ -1936,28 +1982,42 @@ var EventList = ({ className, title, items, cta, variant, children }) => {
             })
           }
         ),
-        isGrey && !isBelowTablet && /* @__PURE__ */ jsx("ul", { className: clsx20(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__ */ jsx(
-            "li",
-            {
-              className: clsx20(EventList_module_default["card-list-item"]),
-              children: /* @__PURE__ */ 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__ */ jsx("ul", { className: clsx20(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__ */ jsx("li", { children: /* @__PURE__ */ jsx(UpcomingEventCard, __spreadProps(__spreadValues({}, item), { direction: cardDirection })) }, (_c = (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location) != null ? _c : index);
-        }) })
+        isInternalEventList && !isBelowTablet && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            "aria-label": "Upcoming events",
+            className: clsx20(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__ */ jsx(
+                "li",
+                {
+                  className: clsx20(EventList_module_default["card-list-item"]),
+                  children: /* @__PURE__ */ jsx(
+                    UpcomingEventCard,
+                    __spreadProps(__spreadValues({}, item), {
+                      className: clsx20(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
+              );
+            })
+          }
+        ),
+        !isInternalEventList && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            "aria-label": "Upcoming events",
+            className: clsx20(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__ */ jsx("li", { children: /* @__PURE__ */ jsx(UpcomingEventCard, __spreadProps(__spreadValues({}, item), { direction: cardDirection })) }, (_c = (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location) != null ? _c : index);
+            })
+          }
+        )
       ] })
     }
   );