@digital-b2c/coreui-kit 0.4.1 → 0.4.2

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import clsx3 from 'clsx';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React52, { useRef, Children, isValidElement, useState, useCallback, useEffect } from 'react';
-import { gsap } from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import React52, { forwardRef, Children, isValidElement, useRef, useState, useCallback, useEffect } from 'react';
+import gsap$1, { gsap } from 'gsap';
 import { useGSAP } from '@gsap/react';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -568,34 +568,38 @@ function resolveCompoundSlots(children, slots) {
 // src/components/Card/Card.module.scss
 var Card_module_default = {
   card: "Card_module_card",
-  logo: "Card_module_logo"
-};
-var Card = ({ className, title, subtitle, cta, icon, logo, children }) => {
-  var _a, _b;
-  const slots = resolveCompoundSlots(children, {
-    title: CardTitle,
-    subtitle: CardSubtitle
-  });
-  const titleNode = (_a = slots.title) != null ? _a : title;
-  const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxs("div", { className: clsx3(Card_module_default.card, className), children: [
-    logo ? /* @__PURE__ */ jsx(Picture, __spreadValues({ className: Card_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsx(Icon, { type: icon, className: Card_module_default.logo }),
-    /* @__PURE__ */ jsxs("div", { className: Card_module_default.content, children: [
-      titleNode && /* @__PURE__ */ jsx("h3", { className: "h4", children: titleNode }),
-      subtitleNode && subtitleNode
-    ] }),
-    cta && /* @__PURE__ */ jsx(
-      Button,
-      {
-        href: cta.url,
-        isExternal: cta.isExternal,
-        variant: "secondary",
-        icon: cta.url ? "rightBlack" : void 0,
-        children: cta.label
-      }
-    )
-  ] });
-};
+  logo: "Card_module_logo",
+  subtitle: "Card_module_subtitle"
+};
+var Card = forwardRef(
+  ({ className, title, subtitle, cta, icon, logo, children }, ref) => {
+    var _a, _b;
+    const slots = resolveCompoundSlots(children, {
+      title: CardTitle,
+      subtitle: CardSubtitle
+    });
+    const titleNode = (_a = slots.title) != null ? _a : title;
+    const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx3(Card_module_default.card, className), children: [
+      (logo == null ? void 0 : logo.src) ? /* @__PURE__ */ jsx(Picture, __spreadValues({ className: Card_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsx(Icon, { type: icon, className: Card_module_default.logo }),
+      /* @__PURE__ */ jsxs("div", { className: Card_module_default.content, children: [
+        titleNode && /* @__PURE__ */ jsx("h3", { className: "h4", children: titleNode }),
+        subtitleNode && /* @__PURE__ */ jsx("div", { className: Card_module_default.subtitle, children: subtitleNode })
+      ] }),
+      cta && /* @__PURE__ */ jsx(
+        Button,
+        {
+          href: cta.url,
+          isExternal: cta.isExternal,
+          variant: "secondary",
+          icon: cta.url ? "rightBlack" : void 0,
+          children: cta.label
+        }
+      )
+    ] });
+  }
+);
+Card.displayName = "Card";
 
 // src/components/Card/index.ts
 var Card2 = Object.assign(Card, {
@@ -761,10 +765,13 @@ var Pagination = ({
 var Container_module_default = {
   container: "Container_module_container"
 };
-var Container = (_a) => {
-  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: clsx3(Container_module_default.container, className) }, props), { children }));
-};
+var Container = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ ref, className: clsx3(Container_module_default.container, className) }, props), { children }));
+  }
+);
+Container.displayName = "Container";
 
 // src/components/PracticeCard/PracticeCard.module.scss
 var PracticeCard_module_default = {
@@ -812,31 +819,94 @@ var CardCollection_module_default = {
   "card-collection": "CardCollection_module_card-collection",
   content: "CardCollection_module_content",
   wrapper: "CardCollection_module_wrapper",
+  cardWrapper: "CardCollection_module_cardWrapper",
   threeCols: "CardCollection_module_threeCols",
-  examCard: "CardCollection_module_examCard"
+  examCard: "CardCollection_module_examCard",
+  "reveal-wrapper": "CardCollection_module_reveal-wrapper",
+  "reveal-inner": "CardCollection_module_reveal-inner",
+  card: "CardCollection_module_card",
+  "is-expanded": "CardCollection_module_is-expanded",
+  cta: "CardCollection_module_cta"
 };
 var CardCollection = ({
   className,
   variant = "default",
   title,
   subtitle,
-  cards,
+  cards = [],
+  ctaLabel,
   children
 }) => {
   var _a, _b;
+  const container = useRef(null);
+  const revealWrapper = useRef(null);
+  const extraCard = useRef(null);
+  const [isExpanded, setIsExpanded] = useState(false);
   const slots = resolveCompoundSlots(children, {
     title: CardCollectionTitle,
     subtitle: CardCollectionSubtitle
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
-  return /* @__PURE__ */ jsxs(Container, { className: clsx3(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className), children: [
-    /* @__PURE__ */ jsxs("div", { className: CardCollection_module_default.content, children: [
-      titleNode && /* @__PURE__ */ jsx("h2", { children: titleNode }),
-      subtitleNode && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitleNode })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: CardCollection_module_default.wrapper, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsx(Card2, __spreadValues({ className: CardCollection_module_default.card }, card), key)) })
-  ] });
+  const isExamCard = variant === "examCard";
+  const visibleCards = isExamCard ? cards.slice(0, 8) : cards;
+  const hiddenCards = isExamCard ? cards.slice(8) : [];
+  const { contextSafe } = useGSAP({ scope: container });
+  const handleShowMore = useCallback(() => {
+    contextSafe(() => {
+      setIsExpanded(true);
+      const tl = gsap$1.timeline({ defaults: { ease: "power3.inOut" } });
+      tl.to(`.${CardCollection_module_default.cta}`, {
+        opacity: 0,
+        y: 20,
+        duration: 0.3,
+        display: "none"
+      }).to(`.${CardCollection_module_default.cardWrapper}`, { height: "auto", duration: 0.2 }, "<").to(
+        revealWrapper.current,
+        {
+          height: "auto",
+          duration: 0.3
+        },
+        "-=0.1"
+      ).from(
+        extraCard.current,
+        {
+          opacity: 0,
+          y: 30,
+          duration: 0.3,
+          clearProps: "all"
+        },
+        "-=0.3"
+      );
+    })();
+  }, [contextSafe]);
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      ref: container,
+      className: clsx3(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: CardCollection_module_default.content, children: [
+          titleNode && /* @__PURE__ */ jsx("h2", { children: titleNode }),
+          subtitleNode && /* @__PURE__ */ jsx("div", { className: "subheading", children: subtitleNode })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: CardCollection_module_default.wrapper, children: /* @__PURE__ */ jsxs("div", { className: clsx3(CardCollection_module_default.cardWrapper, { [CardCollection_module_default["is-expanded"]]: isExpanded }), children: [
+          visibleCards.map((card, key) => /* @__PURE__ */ jsx(Card2, __spreadValues({ className: CardCollection_module_default.card }, card), key)),
+          isExamCard && hiddenCards.length > 0 && /* @__PURE__ */ jsx("div", { ref: revealWrapper, className: CardCollection_module_default["reveal-wrapper"], children: /* @__PURE__ */ jsx("div", { className: CardCollection_module_default["reveal-inner"], children: hiddenCards.map((card, key) => /* @__PURE__ */ jsx(Card2, __spreadValues({ ref: extraCard, className: CardCollection_module_default.card }, card), key)) }) }),
+          isExamCard && !isExpanded && ctaLabel && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              icon: "downChevronBlack",
+              className: CardCollection_module_default.cta,
+              onClick: handleShowMore,
+              children: ctaLabel
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
 };
 
 // src/widgets/CardCollection/index.ts
@@ -953,6 +1023,75 @@ var ContactModule2 = Object.assign(ContactModule, {
   Title: ContactModuleTitle,
   Subtitle: ContactModuleSubtitle
 });
+var FooterDisclaimer = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
+// src/widgets/Footer/Footer.module.scss
+var Footer_module_default = {
+  footer: "Footer_module_footer",
+  container: "Footer_module_container",
+  bottom: "Footer_module_bottom",
+  "bottom-left": "Footer_module_bottom-left",
+  "bottom-right": "Footer_module_bottom-right",
+  supporters: "Footer_module_supporters",
+  "supporters-logos": "Footer_module_supporters-logos",
+  "supporter-link-primary": "Footer_module_supporter-link-primary",
+  "supporter-link": "Footer_module_supporter-link",
+  disclaimer: "Footer_module_disclaimer",
+  copyright: "Footer_module_copyright",
+  "nav-list": "Footer_module_nav-list",
+  "nav-link": "Footer_module_nav-link"
+};
+var Footer = ({
+  className,
+  supporters = [],
+  navigationLinks = [],
+  disclaimer,
+  copyright,
+  children
+}) => {
+  var _a;
+  const columns = [];
+  for (let i = 0; i < navigationLinks.length; i += 5) {
+    columns.push(navigationLinks.slice(i, i + 5));
+  }
+  const slots = resolveCompoundSlots(children, {
+    disclaimer: FooterDisclaimer
+  });
+  const titleNode = (_a = slots.disclaimer) != null ? _a : disclaimer;
+  return /* @__PURE__ */ jsx("footer", { className: clsx3(Footer_module_default.footer, className), children: /* @__PURE__ */ jsxs(Container, { className: Footer_module_default.container, children: [
+    /* @__PURE__ */ jsxs("div", { className: Footer_module_default.bottom, children: [
+      /* @__PURE__ */ jsxs("div", { className: Footer_module_default["bottom-left"], children: [
+        supporters.length > 0 && /* @__PURE__ */ jsx("div", { className: Footer_module_default.supporters, children: /* @__PURE__ */ jsx("div", { className: Footer_module_default["supporters-logos"], children: supporters.map(
+          (supporter, index) => supporter.href ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: supporter.href,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: Footer_module_default["supporter-link"],
+              children: /* @__PURE__ */ jsx(Picture, __spreadValues({}, supporter.image))
+            },
+            index
+          ) : /* @__PURE__ */ jsx("div", { className: Footer_module_default["supporter-link-primary"], children: /* @__PURE__ */ jsx(Picture, __spreadValues({}, supporter.image)) }, index)
+        ) }) }),
+        titleNode && /* @__PURE__ */ jsx("div", { className: clsx3(Footer_module_default.disclaimer, "p"), children: titleNode }),
+        copyright && /* @__PURE__ */ jsx("p", { className: Footer_module_default.copyright, children: copyright })
+      ] }),
+      columns.length > 0 && /* @__PURE__ */ jsx("nav", { className: Footer_module_default["bottom-right"], children: columns.map((column, colIndex) => /* @__PURE__ */ jsx("ul", { className: Footer_module_default["nav-list"], children: column.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        __spreadProps(__spreadValues({
+          href: link.href,
+          className: Footer_module_default["nav-link"]
+        }, link.isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {}), {
+          children: link.label
+        })
+      ) }, link.label)) }, colIndex)) })
+    ] }),
+    children
+  ] }) });
+};
 var HeroBannerTitle = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
@@ -1360,6 +1499,6 @@ function useIntersectionObserver({
   return { observeRef, isVisible };
 }
 
-export { Anchor, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, HeroBanner2 as HeroBanner, Icon, InfoCard2 as InfoCard, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, resolveCompoundSlots, svgs, useIntersectionObserver };
+export { Anchor, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, Footer, HeroBanner2 as HeroBanner, Icon, InfoCard2 as InfoCard, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, resolveCompoundSlots, svgs, useIntersectionObserver };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map