@digital-b2c/coreui-kit 0.18.5 → 0.19.0

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

@@ -2857,6 +2857,7 @@ var AccordionItem = ({
   children,
   isOpen = false,
   onToggle,
+  renderItemHeader,
   className
 }) => {
   const contentRef = React72.useRef(null);
@@ -2907,7 +2908,10 @@ var AccordionItem = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        renderItemHeader ? renderItemHeader({
+          isOpen,
+          toggle: handleToggle
+        }) : /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             className: clsx50__default.default(Accordion_module_default.accordionHeader, {
@@ -2934,12 +2938,20 @@ var AccordionItem = ({
           "div",
           {
             ref: contentRef,
-            className: Accordion_module_default.accordionContent,
+            className: clsx50__default.default("accordionContent", Accordion_module_default.accordionContent),
             style: {
               overflow: "hidden",
               height: 0
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentInnerRef, className: Accordion_module_default.accordionContentInner, children })
+            inert: !isOpen,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: contentInnerRef,
+                className: clsx50__default.default("accordionContentInner", Accordion_module_default.accordionContentInner),
+                children
+              }
+            )
           }
         )
       ]
@@ -2973,17 +2985,20 @@ var Accordion = ({
   if (items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx50__default.default(Accordion_module_default.accordion, className), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-    AccordionItem,
-    {
-      id: item.id,
-      title: item.title,
-      isOpen: openIds.includes(item.id),
-      onToggle: handleToggle,
-      children: item.content
-    },
-    item.id
-  )) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx50__default.default(Accordion_module_default.accordion, className), children: items.map((item) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AccordionItem,
+      {
+        id: item.id,
+        title: item.title,
+        isOpen: openIds.includes(item.id),
+        onToggle: handleToggle,
+        renderItemHeader: item.renderItemHeader,
+        children: item.content
+      },
+      item.id
+    );
+  }) });
 };
 
 // src/widgets/InternalBrandsTab/InternalBrandsTab.module.scss
@@ -3274,11 +3289,12 @@ var MiniSectionCta = ({
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
+  const hasModuleStyles = moduleStyles && Object.values(moduleStyles).length > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: clsx50__default.default(MiniSectionCta_module_default.miniSectionCta, MiniSectionCta_module_default[variant], theme && MiniSectionCta_module_default[theme], className),
-      style: __spreadValues({}, moduleStyles && {
+      style: __spreadValues({}, hasModuleStyles && {
         "--custom-background-color": moduleStyles.backgroundColor,
         "--custom-color": moduleStyles.color
       }),
@@ -4261,18 +4277,19 @@ var Teaser5050WithCta = ({
   });
   const titleNode = (_a = slots.title) != null ? _a : title;
   const subtitleNode = (_b = slots.subtitle) != null ? _b : subtitle;
+  const hasModuleStyles = moduleStyles && Object.values(moduleStyles).length > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: clsx50__default.default(Teaser5050WithCta_module_default.teaser5050, Teaser5050WithCta_module_default[variant], className),
-      style: __spreadValues({}, moduleStyles && {
+      style: __spreadValues({}, hasModuleStyles && {
         "--custom-background-color": moduleStyles.backgroundColor,
         "--custom-color": moduleStyles.color
       }),
       children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: Teaser5050WithCta_module_default.container, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Teaser5050WithCta_module_default.wrapper, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Teaser5050WithCta_module_default.content, children: [
-            titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx50__default.default(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
+            titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx50__default.default("h3", Teaser5050WithCta_module_default.title), children: titleNode }),
             subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx50__default.default("subheading", Teaser5050WithCta_module_default.subheading), children: subtitleNode })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: Teaser5050WithCta_module_default.ctaWrapper, children: ctas.map((cta, key) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -4712,7 +4729,7 @@ var ResourcesGridList = ({
     if (isMobile) setIsSidebarOpen(false);
     setTimeout(() => {
       var _a3;
-      (_a3 = widgetRef.current) == null ? void 0 : _a3.scrollIntoView({ behavior: "smooth" });
+      (_a3 = widgetRef.current) == null ? void 0 : _a3.scrollIntoView({ behavior: "smooth", block: "start" });
     }, 200);
   };
   const handleFilterChange = (value) => {
@@ -4825,7 +4842,13 @@ var ResourcesGridList = ({
         currentPage: safeCurrentPage,
         totalPages,
         loop: false,
-        onPageChange: setCurrentPage
+        onPageChange: (page) => {
+          setCurrentPage(page);
+          setTimeout(() => {
+            var _a2;
+            (_a2 = widgetRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth", block: "start" });
+          }, 200);
+        }
       },
       `${selectedCategory}-${filterValue}-${sortValue}-${searchQuery}`
     )
@@ -5659,6 +5682,193 @@ var LocationsBrandCards = ({
 var LocationsBrandCards2 = Object.assign(LocationsBrandCards, {
   Text: LocationsBrandCardsText
 });
+
+// src/widgets/BrandsTab/BrandsTab.module.scss
+var BrandsTab_module_default = {
+  "brands-tab": "BrandsTab_module_brands-tab",
+  "text-container": "BrandsTab_module_text-container",
+  title: "BrandsTab_module_title",
+  "tab-wrapper": "BrandsTab_module_tab-wrapper",
+  "tab-buttons": "BrandsTab_module_tab-buttons",
+  "tab-trigger": "BrandsTab_module_tab-trigger",
+  "tab-active": "BrandsTab_module_tab-active",
+  "tab-content-area": "BrandsTab_module_tab-content-area",
+  "content-cards": "BrandsTab_module_content-cards",
+  card: "BrandsTab_module_card",
+  "card-header": "BrandsTab_module_card-header",
+  "card-logo": "BrandsTab_module_card-logo",
+  "content-side": "BrandsTab_module_content-side",
+  "card-cta": "BrandsTab_module_card-cta",
+  "card-image": "BrandsTab_module_card-image",
+  accordion: "BrandsTab_module_accordion",
+  "accordion-header": "BrandsTab_module_accordion-header",
+  "accordion-header-open": "BrandsTab_module_accordion-header-open",
+  "accordion-content": "BrandsTab_module_accordion-content",
+  "card-description": "BrandsTab_module_card-description"
+};
+var BrandsTab = (props) => {
+  var _a, _b, _c;
+  const { title, subtitle, className, tabs } = props;
+  const [activeIndex, setActiveIndex] = React72.useState(0);
+  const { is } = useViewPort_default();
+  const isTabletBelow = is("tablet", "below");
+  const accordionItems = React72.useMemo(() => {
+    return (tabs == null ? void 0 : tabs.map((tab, index) => {
+      var _a2, _b2, _c2, _d, _e;
+      return {
+        id: index,
+        title: typeof tab.trigger.active === "string" ? tab.trigger.active : /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({}, tab.trigger.active)),
+        content: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: clsx50__default.default(BrandsTab_module_default["accordion-content"]),
+            style: {
+              "--theme-color": `var(${tab.theme})`
+            },
+            children: [
+              (_a2 = tab == null ? void 0 : tab.content) == null ? void 0 : _a2.map((content) => {
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: BrandsTab_module_default["card"],
+                    style: {
+                      "--theme-text-color": `var(${content.textColor})`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: BrandsTab_module_default["card-header"], children: [
+                        content.logo && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: BrandsTab_module_default["card-logo"] }, content.logo)),
+                        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: clsx50__default.default("h4", BrandsTab_module_default["card-title"]), children: content.title })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: BrandsTab_module_default["card-description"], children: content.description })
+                    ]
+                  },
+                  `${content.title}-${index}`
+                );
+              }),
+              tab.image && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadProps(__spreadValues({}, tab.image), { className: BrandsTab_module_default["card-image"] })),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: BrandsTab_module_default["card-cta"],
+                  logo: (_b2 = tab.cta) == null ? void 0 : _b2.logo,
+                  title: (_c2 = tab.cta) == null ? void 0 : _c2.label,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": (_d = tab.cta) == null ? void 0 : _d.label, children: (_e = tab.cta) == null ? void 0 : _e.label })
+                }
+              )
+            ]
+          }
+        ),
+        renderItemHeader: ({ isOpen, toggle }) => {
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              className: clsx50__default.default(BrandsTab_module_default["accordion-header"], {
+                [BrandsTab_module_default["accordion-header-open"]]: isOpen
+              }),
+              style: {
+                "--theme-color": `var(${tab.theme})`
+              },
+              onClick: toggle,
+              "aria-expanded": isOpen,
+              "aria-label": `Toggle accordion item #${index + 1}`,
+              children: [
+                typeof tab.trigger.active === "string" ? tab.trigger.active : /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({}, tab.trigger.active)),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: clsx50__default.default(BrandsTab_module_default.accordionChevron, {
+                      [BrandsTab_module_default.accordionChevronOpen]: isOpen
+                    }),
+                    children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "filledChevronUp", size: 40 }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "circleChevronDown", size: 40 })
+                  }
+                )
+              ]
+            }
+          );
+        }
+      };
+    })) || [];
+  }, [tabs]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: clsx50__default.default(BrandsTab_module_default["brands-tab"], className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: BrandsTab_module_default["text-container"], children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(Text, { tag: "h2", className: BrandsTab_module_default.title, children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx50__default.default("subheading", BrandsTab_module_default.subtitle), children: subtitle })
+    ] }),
+    isTabletBelow ? /* @__PURE__ */ jsxRuntime.jsx(
+      Accordion,
+      {
+        items: accordionItems,
+        allowMultiple: true,
+        defaultOpenIds: [],
+        className: clsx50__default.default(BrandsTab_module_default["accordion"])
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: BrandsTab_module_default["tab-wrapper"], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: BrandsTab_module_default["tab-buttons"], children: tabs == null ? void 0 : tabs.map(({ trigger, theme }, index) => {
+        const isActive = activeIndex === index;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "tabbutton",
+            onClick: () => setActiveIndex(index),
+            isActive,
+            className: clsx50__default.default(BrandsTab_module_default["tab-trigger"], isActive ? BrandsTab_module_default["tab-active"] : null),
+            style: {
+              "--theme-color": `var(${theme})`
+            },
+            children: trigger ? isActive ? typeof trigger.active === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: trigger.active }) : /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({}, trigger.active)) : typeof trigger.default === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: trigger.default }) : /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({}, trigger.default)) : null
+          },
+          index
+        );
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: clsx50__default.default(BrandsTab_module_default["tab-content-area"]),
+          style: {
+            "--theme-color": `var(${tabs == null ? void 0 : tabs[activeIndex].theme})`
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: BrandsTab_module_default["content-cards"], children: (_a = tabs == null ? void 0 : tabs[activeIndex].content) == null ? void 0 : _a.map((content, index) => {
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: BrandsTab_module_default["card"],
+                  style: {
+                    "--theme-text-color": `var(${content.textColor})`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: BrandsTab_module_default["card-header"], children: [
+                      content.logo && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadValues({ className: BrandsTab_module_default["card-logo"] }, content.logo)),
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: clsx50__default.default("h4", BrandsTab_module_default["card-title"]), children: content.title })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: BrandsTab_module_default["card-description"], children: content.description })
+                  ]
+                },
+                `${content.title}-${index}`
+              );
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: BrandsTab_module_default["content-side"], children: [
+              (tabs == null ? void 0 : tabs[activeIndex].image) && /* @__PURE__ */ jsxRuntime.jsx(Picture, __spreadProps(__spreadValues({}, tabs == null ? void 0 : tabs[activeIndex].image), { className: BrandsTab_module_default["card-image"] })),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: BrandsTab_module_default["card-cta"],
+                  logo: (_b = tabs == null ? void 0 : tabs[activeIndex].cta) == null ? void 0 : _b.logo,
+                  children: (_c = tabs == null ? void 0 : tabs[activeIndex].cta) == null ? void 0 : _c.label
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/widgets/BrandsTab/index.tsx
+var BrandsTab2 = Object.assign(BrandsTab, {});
 function useIntersectionObserver({
   animateOnce = false,
   options = {}
@@ -5696,6 +5906,7 @@ exports.BlogPostContent = BlogPostContent2;
 exports.BlogSearchResultsList = BlogSearchResultsList2;
 exports.BrandCard = BrandCard;
 exports.BrandsStrip = BrandsStrip;
+exports.BrandsTab = BrandsTab2;
 exports.Button = Button;
 exports.Card = Card2;
 exports.CardCollection = CardCollection2;