@digital-b2c/coreui-kit 0.4.0 → 0.4.2

package/LICENSE.txt

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Luxottica
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Luxottica
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,52 +1,52 @@
-# CoreUI Kit
-
-A React‑based design system and component library.
-
-## 🚀 Getting Started
-
-Install
-
-```bash
-npm install
-```
-
-Development
-
-- Run the build in watch mode
-
-```bash
-npm run dev
-```
-
-Start Storybook
-
-```bash
-npm run storybook
-```
-
-Run tests
-
-```bash
-npm test
-```
-
-Lint/format
-
-```bash
-npm run lint
-```
-
-## 🛠️ Usage
-
-Import components in other projects:
-
-```ts
-import '@digital-b2c/coreui-kit/styles.css'
-
-import { MiniSectionCta } from '@digital-b2c/coreui-kit'
-
-<MiniSectionCta>
-  <MiniSectionCta.Title>Header</MiniSectionCta.Title>
-  <MiniSectionCta.Subtitle>Description</MiniSectionCta.Subtitle>
-</MiniSectionCta>
-```
+# CoreUI Kit
+
+A React‑based design system and component library.
+
+## 🚀 Getting Started
+
+Install
+
+```bash
+npm install
+```
+
+Development
+
+- Run the build in watch mode
+
+```bash
+npm run dev
+```
+
+Start Storybook
+
+```bash
+npm run storybook
+```
+
+Run tests
+
+```bash
+npm test
+```
+
+Lint/format
+
+```bash
+npm run lint
+```
+
+## 🛠️ Usage
+
+Import components in other projects:
+
+```ts
+import '@digital-b2c/coreui-kit/styles.css'
+
+import { MiniSectionCta } from '@digital-b2c/coreui-kit'
+
+<MiniSectionCta>
+  <MiniSectionCta.Title>Header</MiniSectionCta.Title>
+  <MiniSectionCta.Subtitle>Description</MiniSectionCta.Subtitle>
+</MiniSectionCta>
+```

package/dist/index.cjs

@@ -4,13 +4,14 @@ var clsx3 = require('clsx');
 var jsxRuntime = require('react/jsx-runtime');
 var React52 = require('react');
 var gsap = require('gsap');
-var ScrollTrigger = require('gsap/ScrollTrigger');
 var react = require('@gsap/react');
+var ScrollTrigger = require('gsap/ScrollTrigger');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var clsx3__default = /*#__PURE__*/_interopDefault(clsx3);
 var React52__default = /*#__PURE__*/_interopDefault(React52);
+var gsap__default = /*#__PURE__*/_interopDefault(gsap);
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -511,8 +512,7 @@ var BrandsStrip = ({
   const [show, setShow] = React52.useState(false);
   const { is } = useViewPort_default();
   const isTabletBelow = is("tablet", "below");
-  console.log(title);
-  const shouldAnimate = title === void 0 && animate;
+  const shouldAnimate = title && animate;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -575,34 +575,39 @@ function resolveCompoundSlots(children, slots) {
 
 // src/components/Card/Card.module.scss
 var Card_module_default = {
-  card: "Card_module_card"
-};
-var Card = ({ className, title, subtitle, cta, icon, 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__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default(Card_module_default.card, className), children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: icon }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Card_module_default.content, children: [
-      titleNode && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "h4", children: titleNode }),
-      subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("p", { children: subtitleNode })
-    ] }),
-    cta && /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        href: cta.url,
-        isExternal: cta.isExternal,
-        variant: "secondary",
-        icon: cta.url ? "rightBlack" : void 0,
-        children: cta.label
-      }
-    )
-  ] });
-};
+  card: "Card_module_card",
+  logo: "Card_module_logo",
+  subtitle: "Card_module_subtitle"
+};
+var Card = React52.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__ */ jsxRuntime.jsxs("div", { ref, className: clsx3__default.default(Card_module_default.card, className), children: [
+      (logo == null ? void 0 : logo.src) ? /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: Card_module_default.logo }, logo)) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: icon, className: Card_module_default.logo }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Card_module_default.content, children: [
+        titleNode && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "h4", children: titleNode }),
+        subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Card_module_default.subtitle, children: subtitleNode })
+      ] }),
+      cta && /* @__PURE__ */ jsxRuntime.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, {
@@ -768,10 +773,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__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ className: clsx3__default.default(Container_module_default.container, className) }, props), { children }));
-};
+var Container = React52.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className: clsx3__default.default(Container_module_default.container, className) }, props), { children }));
+  }
+);
+Container.displayName = "Container";
 
 // src/components/PracticeCard/PracticeCard.module.scss
 var PracticeCard_module_default = {
@@ -819,31 +827,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 = React52.useRef(null);
+  const revealWrapper = React52.useRef(null);
+  const extraCard = React52.useRef(null);
+  const [isExpanded, setIsExpanded] = React52.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__ */ jsxRuntime.jsxs(Container, { className: clsx3__default.default(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CardCollection_module_default.content, children: [
-      titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: titleNode }),
-      subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitleNode })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardCollection_module_default.wrapper, children: cards == null ? void 0 : cards.map((card, key) => /* @__PURE__ */ jsxRuntime.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 } = react.useGSAP({ scope: container });
+  const handleShowMore = React52.useCallback(() => {
+    contextSafe(() => {
+      setIsExpanded(true);
+      const tl = gsap__default.default.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__ */ jsxRuntime.jsxs(
+    Container,
+    {
+      ref: container,
+      className: clsx3__default.default(CardCollection_module_default["card-collection"], CardCollection_module_default[variant], className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CardCollection_module_default.content, children: [
+          titleNode && /* @__PURE__ */ jsxRuntime.jsx("h2", { children: titleNode }),
+          subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitleNode })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardCollection_module_default.wrapper, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default(CardCollection_module_default.cardWrapper, { [CardCollection_module_default["is-expanded"]]: isExpanded }), children: [
+          visibleCards.map((card, key) => /* @__PURE__ */ jsxRuntime.jsx(Card2, __spreadValues({ className: CardCollection_module_default.card }, card), key)),
+          isExamCard && hiddenCards.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: revealWrapper, className: CardCollection_module_default["reveal-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardCollection_module_default["reveal-inner"], children: hiddenCards.map((card, key) => /* @__PURE__ */ jsxRuntime.jsx(Card2, __spreadValues({ ref: extraCard, className: CardCollection_module_default.card }, card), key)) }) }),
+          isExamCard && !isExpanded && ctaLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "secondary",
+              icon: "downChevronBlack",
+              className: CardCollection_module_default.cta,
+              onClick: handleShowMore,
+              children: ctaLabel
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
 };
 
 // src/widgets/CardCollection/index.ts
@@ -960,6 +1031,75 @@ var ContactModule2 = Object.assign(ContactModule, {
   Title: ContactModuleTitle,
   Subtitle: ContactModuleSubtitle
 });
+var FooterDisclaimer = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx("footer", { className: clsx3__default.default(Footer_module_default.footer, className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: Footer_module_default.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Footer_module_default.bottom, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Footer_module_default["bottom-left"], children: [
+        supporters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Footer_module_default.supporters, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Footer_module_default["supporters-logos"], children: supporters.map(
+          (supporter, index) => supporter.href ? /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: supporter.href,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: Footer_module_default["supporter-link"],
+              children: /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({}, supporter.image))
+            },
+            index
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: Footer_module_default["supporter-link-primary"], children: /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({}, supporter.image)) }, index)
+        ) }) }),
+        titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default(Footer_module_default.disclaimer, "p"), children: titleNode }),
+        copyright && /* @__PURE__ */ jsxRuntime.jsx("p", { className: Footer_module_default.copyright, children: copyright })
+      ] }),
+      columns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: Footer_module_default["bottom-right"], children: columns.map((column, colIndex) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Footer_module_default["nav-list"], children: column.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 };
@@ -1376,6 +1516,7 @@ exports.ConditionalWrapper = ConditionalWrapper;
 exports.ContactModule = ContactModule2;
 exports.Container = Container;
 exports.CountingCard = CountingCard2;
+exports.Footer = Footer;
 exports.HeroBanner = HeroBanner2;
 exports.Icon = Icon;
 exports.InfoCard = InfoCard2;