@digital-b2c/coreui-kit 0.7.1 → 0.7.2

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, CSSProperties } from 'react';
+import React__default, { ImgHTMLAttributes, ReactNode, Ref, AnchorHTMLAttributes, HTMLAttributes, FC, PropsWithChildren } from 'react';
 
 interface IPicture {
     src: string;
@@ -327,6 +327,7 @@ interface HeroBannerCarouselItem {
     body: ReactNode;
     image: PictureProps;
     ctas: ICtaLogo[];
+    cornerImage?: string;
 }
 interface HeroBannerCarouselProps {
     className?: string;
@@ -472,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, backgroundColor, variant, children, }: EventListProps) => react_jsx_runtime.JSX.Element) & {
+declare const EventList: (({ className, title, items, cta, 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, CSSProperties } from 'react';
+import React__default, { ImgHTMLAttributes, ReactNode, Ref, AnchorHTMLAttributes, HTMLAttributes, FC, PropsWithChildren } from 'react';
 
 interface IPicture {
     src: string;
@@ -327,6 +327,7 @@ interface HeroBannerCarouselItem {
     body: ReactNode;
     image: PictureProps;
     ctas: ICtaLogo[];
+    cornerImage?: string;
 }
 interface HeroBannerCarouselProps {
     className?: string;
@@ -472,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, backgroundColor, variant, children, }: EventListProps) => react_jsx_runtime.JSX.Element) & {
+declare const EventList: (({ className, title, items, cta, variant, children }: EventListProps) => react_jsx_runtime.JSX.Element) & {
     Title: ({ children }: EventListTitleProps) => react_jsx_runtime.JSX.Element;
 };
 

package/dist/index.mjs

@@ -1324,6 +1324,9 @@ var HeroBannerCarousel_module_default = {
   inner: "HeroBannerCarousel_module_inner",
   swiperContainer: "HeroBannerCarousel_module_swiperContainer",
   card: "HeroBannerCarousel_module_card",
+  cardCorner: "HeroBannerCarousel_module_cardCorner",
+  cardCornerImage: "HeroBannerCarousel_module_cardCornerImage",
+  cardCornerDot: "HeroBannerCarousel_module_cardCornerDot",
   cardContent: "HeroBannerCarousel_module_cardContent",
   cardTitle: "HeroBannerCarousel_module_cardTitle",
   cardBottom: "HeroBannerCarousel_module_cardBottom",
@@ -1359,6 +1362,7 @@ var HeroBannerCarousel = ({
         onSwiper: setSwiperInstance,
         onSlideChange: (swiper) => setActiveIndex(swiper.activeIndex),
         children: items.map((item, index) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsxs("div", { className: HeroBannerCarousel_module_default.card, children: [
+          item.cornerImage && /* @__PURE__ */ jsx("div", { className: HeroBannerCarousel_module_default.cardCorner, children: isMobile ? /* @__PURE__ */ jsx("span", { className: HeroBannerCarousel_module_default.cardCornerDot }) : /* @__PURE__ */ jsx("img", { src: item.cornerImage, alt: "", className: HeroBannerCarousel_module_default.cardCornerImage }) }),
           /* @__PURE__ */ jsxs("div", { className: HeroBannerCarousel_module_default.cardContent, children: [
             /* @__PURE__ */ jsx("h3", { className: HeroBannerCarousel_module_default.cardTitle, children: item.title }),
             /* @__PURE__ */ jsxs("div", { className: HeroBannerCarousel_module_default.cardBottom, children: [
@@ -1764,7 +1768,6 @@ 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",
@@ -1799,37 +1802,27 @@ 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"],
-                (!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,
-                    children: cta.label
-                  }
-                )
-              ]
-            }
-          )
+          /* @__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
+              }
+            )
+          ] })
         ] }),
         cta && cta.url && /* @__PURE__ */ jsx(
           "div",
@@ -1885,13 +1878,11 @@ 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",
@@ -1900,41 +1891,35 @@ var EventList_module_default = {
 var EventListTitle = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
-var EventList = ({
-  className,
-  title,
-  items,
-  cta,
-  backgroundColor,
-  variant,
-  children
-}) => {
+var EventList = ({ className, title, items, cta, 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 isInternalEventList = variant === "internalEventList";
-  const listDirection = isInternalEventList ? "horizontal" : "vertical";
+  const listDirection = isGrey ? "horizontal" : "vertical";
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx20("event-list-module", EventList_module_default["event-list-module"], className),
-      style: {
-        backgroundColor
-      },
+      className: clsx20(
+        "event-list-module",
+        EventList_module_default["event-list-module"],
+        isGrey && EventList_module_default[variant],
+        className
+      ),
       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", { className: clsx20(EventList_module_default["event-list-title"]), children: titleNode }),
+          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 })
         ] }),
-        isInternalEventList && isBelowTablet && /* @__PURE__ */ jsx(
+        isGrey && isBelowTablet && /* @__PURE__ */ jsx(
           Carousel,
           {
-            wrapperClass: clsx20(EventList_module_default["carousel-wrapper"], EventList_module_default[variant]),
+            wrapperClass: clsx20(EventList_module_default["carousel-wrapper"]),
             slideClass: EventList_module_default["carousel-list-item"],
             spaceBetween: 16,
             slides: items.map((item) => {
@@ -1942,7 +1927,7 @@ var EventList = ({
               return /* @__PURE__ */ jsx(
                 UpcomingEventCard,
                 __spreadValues({
-                  className: clsx20(EventList_module_default["event-card"]),
+                  className: isGrey && EventList_module_default["event-card"],
                   direction: "vertical",
                   showImage: false
                 }, item),
@@ -1951,7 +1936,7 @@ var EventList = ({
             })
           }
         ),
-        isInternalEventList && !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) => {
+        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",
@@ -1960,7 +1945,7 @@ var EventList = ({
               children: /* @__PURE__ */ jsx(
                 UpcomingEventCard,
                 __spreadProps(__spreadValues({}, item), {
-                  className: clsx20(EventList_module_default["card-item"]),
+                  className: isGrey && EventList_module_default["card-item"],
                   showImage: false,
                   direction: "vertical"
                 })
@@ -1969,7 +1954,7 @@ var EventList = ({
             (_c = (_b = (_a2 = item.title) != null ? _a2 : item.date) != null ? _b : item.location) != null ? _c : index
           );
         }) }),
-        !isInternalEventList && /* @__PURE__ */ jsx("ul", { className: clsx20(EventList_module_default["event-list-wrapper"], EventList_module_default[listDirection]), children: items == null ? void 0 : items.map((item, 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);
         }) })