@digital-b2c/coreui-kit 0.14.3 → 0.14.5

package/dist/index.d.cts

@@ -43,6 +43,7 @@ declare const svgs: {
     externalLink: string;
     newIcon: string;
     play: string;
+    lock: string;
     blankCheckbox: string;
     blankCheckboxWhite: string;
     checkedBox: string;
@@ -180,7 +181,7 @@ declare const CountingCard: (({ className, title, count, image, children }: Coun
 };
 
 type ResourceView = 'grid' | 'list';
-type ResourceItemType = 'pdf' | 'externalLink';
+type ResourceItemType = 'pdf' | 'externalLink' | 'restricted';
 interface ResourceItem {
     title: string;
     bodyText?: ReactNode;

package/dist/index.d.ts

@@ -43,6 +43,7 @@ declare const svgs: {
     externalLink: string;
     newIcon: string;
     play: string;
+    lock: string;
     blankCheckbox: string;
     blankCheckboxWhite: string;
     checkedBox: string;
@@ -180,7 +181,7 @@ declare const CountingCard: (({ className, title, count, image, children }: Coun
 };
 
 type ResourceView = 'grid' | 'list';
-type ResourceItemType = 'pdf' | 'externalLink';
+type ResourceItemType = 'pdf' | 'externalLink' | 'restricted';
 interface ResourceItem {
     title: string;
     bodyText?: ReactNode;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import clsx43 from 'clsx';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React68, { forwardRef, useId, useRef, useState, useCallback, useMemo, useEffect, Children, isValidElement, Fragment as Fragment$1 } from 'react';
+import React69, { forwardRef, useId, useRef, useState, useCallback, useMemo, useEffect, Children, isValidElement, Fragment as Fragment$1 } from 'react';
 import gsap$1, { gsap } from 'gsap';
 import { useGSAP } from '@gsap/react';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
@@ -312,6 +312,11 @@ var SvgIconPlay = (props) => /* @__PURE__ */ jsxs("svg", __spreadProps(__spreadV
   /* @__PURE__ */ jsx("path", { d: "M53.4617 90.7285L90.7305 66.9993L53.4617 43.2702V90.7285ZM67.0013 122.833C59.3707 122.833 52.1589 121.367 45.3659 118.436C38.5728 115.505 32.6405 111.503 27.569 106.432C22.4975 101.36 18.4961 95.4278 15.5648 88.6348C12.6336 81.8417 11.168 74.6299 11.168 66.9993C11.168 59.2757 12.6336 52.0174 15.5648 45.2243C18.4961 38.4313 22.4975 32.5223 27.569 27.4973C32.6405 22.4723 38.5728 18.4941 45.3659 15.5629C52.1589 12.6316 59.3707 11.166 67.0013 11.166C74.7249 11.166 81.9833 12.6316 88.7763 15.5629C95.5694 18.4941 101.478 22.4723 106.503 27.4973C111.528 32.5223 115.507 38.4313 118.438 45.2243C121.369 52.0174 122.835 59.2757 122.835 66.9993C122.835 74.6299 121.369 81.8417 118.438 88.6348C115.507 95.4278 111.528 101.36 106.503 106.432C101.478 111.503 95.5694 115.505 88.7763 118.436C81.9833 121.367 74.7249 122.833 67.0013 122.833Z", fill: "#080808" })
 ] }));
 var icon_play_default = SvgIconPlay;
+var SvgIconLock = (props) => /* @__PURE__ */ jsxs("svg", __spreadProps(__spreadValues({ width: 37, height: 38, viewBox: "0 0 37 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props), { children: [
+  /* @__PURE__ */ jsx("g", { clipPath: "url(#clip0_11156_23256)", children: /* @__PURE__ */ jsx("path", { d: "M9.24935 34.832C8.40143 34.832 7.67556 34.522 7.07174 33.9018C6.46793 33.2817 6.16602 32.5362 6.16602 31.6654V15.832C6.16602 14.9612 6.46793 14.2157 7.07174 13.5956C7.67556 12.9754 8.40143 12.6654 9.24935 12.6654H10.791V9.4987C10.791 7.30842 11.5426 5.44141 13.0457 3.89766C14.5488 2.35391 16.3667 1.58203 18.4993 1.58203C20.632 1.58203 22.4499 2.35391 23.953 3.89766C25.4561 5.44141 26.2077 7.30842 26.2077 9.4987V12.6654H27.7493C28.5973 12.6654 29.3231 12.9754 29.927 13.5956C30.5308 14.2157 30.8327 14.9612 30.8327 15.832V31.6654C30.8327 32.5362 30.5308 33.2817 29.927 33.9018C29.3231 34.522 28.5973 34.832 27.7493 34.832H9.24935ZM9.24935 31.6654H27.7493V15.832H9.24935V31.6654ZM20.677 25.9852C21.2808 25.365 21.5827 24.6195 21.5827 23.7487C21.5827 22.8779 21.2808 22.1324 20.677 21.5122C20.0731 20.8921 19.3473 20.582 18.4993 20.582C17.6514 20.582 16.9256 20.8921 16.3217 21.5122C15.7179 22.1324 15.416 22.8779 15.416 23.7487C15.416 24.6195 15.7179 25.365 16.3217 25.9852C16.9256 26.6053 17.6514 26.9154 18.4993 26.9154C19.3473 26.9154 20.0731 26.6053 20.677 25.9852ZM13.8743 12.6654H23.1243V9.4987C23.1243 8.17925 22.6747 7.05773 21.7754 6.13411C20.8761 5.2105 19.7841 4.7487 18.4993 4.7487C17.2146 4.7487 16.1226 5.2105 15.2233 6.13411C14.324 7.05773 13.8743 8.17925 13.8743 9.4987V12.6654Z", fill: "#DBDBDB" }) }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_11156_23256", children: /* @__PURE__ */ jsx("rect", { width: 37, height: 38, fill: "white" }) }) })
+] }));
+var icon_lock_default = SvgIconLock;
 var svgs = {
   /* Card */
   ads: icon_ads_default,
@@ -336,6 +341,7 @@ var svgs = {
   externalLink: icon_external_link_default,
   newIcon: icon_new_default,
   play: icon_play_default,
+  lock: icon_lock_default,
   /* Button */
   blankCheckbox: icon_blank_checkbox_default,
   blankCheckboxWhite: icon_blank_checkbox_white_default,
@@ -381,7 +387,7 @@ var svgs = {
   xBlack: icon_x_black_default,
   xWhite: icon_x_white_default
 };
-var Icon = React68.memo(
+var Icon = React69.memo(
   (_a) => {
     var _b = _a, { type, size } = _b, props = __objRest(_b, ["type", "size"]);
     if (type) {
@@ -1304,6 +1310,7 @@ var ResourceCardItem_module_default = {
   cardLink: "ResourceCardItem_module_cardLink",
   "global-search": "ResourceCardItem_module_global-search",
   cardGrid: "ResourceCardItem_module_cardGrid",
+  restricted: "ResourceCardItem_module_restricted",
   cardBody: "ResourceCardItem_module_cardBody",
   cardIconTitle: "ResourceCardItem_module_cardIconTitle",
   cardTitle: "ResourceCardItem_module_cardTitle",
@@ -1322,12 +1329,13 @@ var ResourceCardItem_module_default = {
 var ResourceCardItem = ({ item, view, variant, renderLink }) => {
   const hasHref = Boolean(item.href);
   const isGlobalSearchVariant = variant === "global-search";
+  const isRestricted = (item == null ? void 0 : item.type) === "restricted";
   const linkProps = hasHref ? {
     href: item.href,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: clsx43("news-card-link", ResourceCardItem_module_default["news-card-link"]),
-    "aria-label": item.title
+    "aria-label": item.title,
+    "aria-disabled": isRestricted
   } : null;
   const cardLink = linkProps && isGlobalSearchVariant ? renderLink ? renderLink(__spreadProps(__spreadValues({}, linkProps), {
     className: clsx43(ResourceCardItem_module_default.cardLink, isGlobalSearchVariant && ResourceCardItem_module_default[variant]),
@@ -1338,24 +1346,51 @@ var ResourceCardItem = ({ item, view, variant, renderLink }) => {
       className: clsx43(ResourceCardItem_module_default.cardLink, isGlobalSearchVariant && ResourceCardItem_module_default[variant])
     })
   ) : null;
-  const linkWrapper = ({ children }) => /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, linkProps), { tabIndex: isGlobalSearchVariant ? -1 : 0, children }));
+  const linkWrapper = ({ children }) => /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, linkProps), { tabIndex: isGlobalSearchVariant ? -1 : 0, className: clsx43(ResourceCardItem_module_default.cardLink), children }));
+  function getIcon() {
+    switch (item.type) {
+      case "pdf":
+        return "pdf";
+      case "externalLink":
+        return "externalLink";
+      case "restricted":
+        return "lock";
+      default:
+        return "externalLink";
+    }
+  }
   if (view === "grid") {
-    return /* @__PURE__ */ jsxs("article", { className: clsx43(ResourceCardItem_module_default.cardGrid, isGlobalSearchVariant && ResourceCardItem_module_default[variant]), children: [
-      cardLink,
-      /* @__PURE__ */ jsxs("div", { className: ResourceCardItem_module_default.cardBody, children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(ConditionalWrapper, { condition: hasHref, wrapper: linkWrapper, children: /* @__PURE__ */ jsxs("div", { className: ResourceCardItem_module_default.cardIconTitle, children: [
-            /* @__PURE__ */ jsx(Icon, { type: item.type === "pdf" ? "pdf" : "externalLink", size: 33 }),
-            /* @__PURE__ */ jsx("span", { className: ResourceCardItem_module_default.cardTitle, children: item.title })
-          ] }) }),
-          item.bodyText && /* @__PURE__ */ jsx("div", { className: ResourceCardItem_module_default.cardBodyTextGrid, children: /* @__PURE__ */ jsx("span", { className: ResourceCardItem_module_default.cardBodyText, children: item.bodyText }) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: ResourceCardItem_module_default.cardMeta, children: [
-          /* @__PURE__ */ jsx("span", { className: ResourceCardItem_module_default.cardDate, children: item.date }),
-          item.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourceCardItem_module_default.notificationDot, "aria-label": "New" })
-        ] })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        className: clsx43(
+          ResourceCardItem_module_default.cardGrid,
+          isGlobalSearchVariant && ResourceCardItem_module_default[variant],
+          isGlobalSearchVariant && isRestricted ? ResourceCardItem_module_default["restricted"] : null
+        ),
+        "aria-labelledby": `title-${item.id}`,
+        "aria-describedby": isRestricted ? `restricted-${item.id}` : void 0,
+        children: [
+          cardLink,
+          /* @__PURE__ */ jsxs("div", { className: ResourceCardItem_module_default.cardBody, children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(ConditionalWrapper, { condition: hasHref, wrapper: linkWrapper, children: /* @__PURE__ */ jsxs("div", { className: ResourceCardItem_module_default.cardIconTitle, children: [
+                /* @__PURE__ */ jsx(Icon, { type: getIcon(), size: 33 }),
+                /* @__PURE__ */ jsx("span", { className: ResourceCardItem_module_default.cardTitle, id: `title-${item.id}`, children: item.title })
+              ] }) }),
+              item.bodyText && /* @__PURE__ */ jsxs("div", { className: ResourceCardItem_module_default.cardBodyTextGrid, children: [
+                /* @__PURE__ */ jsx("span", { className: ResourceCardItem_module_default.cardBodyText, children: item.bodyText }),
+                isRestricted && /* @__PURE__ */ jsx("p", { id: `restricted-${item.id}`, className: "sr-only", children: "This resource is restricted. You do not have permission to access it." })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: ResourceCardItem_module_default.cardMeta, children: [
+              /* @__PURE__ */ jsx("span", { className: ResourceCardItem_module_default.cardDate, children: item.date }),
+              item.hasNotification && /* @__PURE__ */ jsx("span", { className: ResourceCardItem_module_default.notificationDot, "aria-label": "New" })
+            ] })
+          ] })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxs("article", { className: ResourceCardItem_module_default.cardList, children: [
     /* @__PURE__ */ jsxs("div", { className: ResourceCardItem_module_default.cardListLeft, children: [
@@ -2724,7 +2759,7 @@ var MiniBanner = ({
         (logo == null ? void 0 : logo.src) && /* @__PURE__ */ jsx(Picture, __spreadValues({ className: MiniBanner_module_default.logo }, logo)),
         pretitleNode && /* @__PURE__ */ jsx("div", { className: clsx43(MiniBanner_module_default.pretitle, "small"), children: pretitleNode }),
         /* @__PURE__ */ jsxs("div", { className: MiniBanner_module_default.headingWrapper, children: [
-          goBackNode ? React68.cloneElement(goBackNode, {
+          goBackNode ? React69.cloneElement(goBackNode, {
             className: clsx43("back-button", MiniBanner_module_default["back-button"])
           }) : null,
           titleNode && /* @__PURE__ */ jsx("div", { className: clsx43(MiniBanner_module_default.title, isMiniBannerTextLeft ? "h1" : "h4"), children: titleNode })
@@ -3606,7 +3641,7 @@ var EventList = ({
             }
           )
         ] }),
-        !isNotEmpty && emptyNode ? React68.cloneElement(emptyNode, {
+        !isNotEmpty && emptyNode ? React69.cloneElement(emptyNode, {
           className: clsx43("empty-search-result", EventList_module_default["empty-search-result"])
         }) : null
       ] })
@@ -4262,7 +4297,7 @@ var NewsCardList = ({
             /* @__PURE__ */ jsx(BlogCardGrid2, { items: cards, hasContainer: false, renderLink })
           ] })
         ] }),
-        paginationNode ? React68.cloneElement(paginationNode, {
+        paginationNode ? React69.cloneElement(paginationNode, {
           className: clsx43("pagination", NewsCardList_module_default["pagination"])
         }) : null
       ] })
@@ -4378,7 +4413,7 @@ var BlogSearchResultsList = ({
   const searchNode = (_a = slots.search) != null ? _a : searchResult;
   const paginationNode = slots.pagination;
   return /* @__PURE__ */ jsx("div", { className: clsx43("search-results-list", BlogSearchResultsList_module_default["search-results-list"], className), children: /* @__PURE__ */ jsxs(Container, { className: clsx43("container", BlogSearchResultsList_module_default["container"]), children: [
-    typeof searchNode === "string" ? /* @__PURE__ */ jsx("span", { className: clsx43("search-result", BlogSearchResultsList_module_default["search-result"]), children: searchNode }) : React68.isValidElement(searchNode) ? React68.cloneElement(searchNode, {
+    typeof searchNode === "string" ? /* @__PURE__ */ jsx("span", { className: clsx43("search-result", BlogSearchResultsList_module_default["search-result"]), children: searchNode }) : React69.isValidElement(searchNode) ? React69.cloneElement(searchNode, {
       className: clsx43("search-result", BlogSearchResultsList_module_default["search-result"])
     }) : null,
     /* @__PURE__ */ jsxs("div", { className: clsx43("wrapper", BlogSearchResultsList_module_default["wrapper"]), children: [
@@ -4406,7 +4441,7 @@ var BlogSearchResultsList = ({
       ),
       /* @__PURE__ */ jsx(BlogCardGrid2, { items, hasContainer: false, renderLink })
     ] }),
-    paginationNode ? React68.cloneElement(paginationNode, {
+    paginationNode ? React69.cloneElement(paginationNode, {
       className: clsx43("pagination", BlogSearchResultsList_module_default["pagination"])
     }) : null
   ] }) });
@@ -4449,7 +4484,7 @@ var GlobalSearchResultsList = ({
   const searchNode = (_a = slots.search) != null ? _a : searchResult;
   const paginationNode = slots.pagination;
   return /* @__PURE__ */ jsx("div", { className: clsx43("search-results-list", GlobalSearchResultsList_module_default["search-results-list"], className), children: /* @__PURE__ */ jsxs(Container, { className: clsx43("container", GlobalSearchResultsList_module_default["container"]), children: [
-    typeof searchNode === "string" ? /* @__PURE__ */ jsx("span", { className: clsx43("search-result", GlobalSearchResultsList_module_default["search-result"]), children: searchNode }) : React68.isValidElement(searchNode) ? React68.cloneElement(searchNode, {
+    typeof searchNode === "string" ? /* @__PURE__ */ jsx("span", { className: clsx43("search-result", GlobalSearchResultsList_module_default["search-result"]), children: searchNode }) : React69.isValidElement(searchNode) ? React69.cloneElement(searchNode, {
       className: clsx43("search-result", GlobalSearchResultsList_module_default["search-result"])
     }) : null,
     /* @__PURE__ */ jsx("div", { className: clsx43("wrapper", GlobalSearchResultsList_module_default["wrapper"]), children: /* @__PURE__ */ jsx(Grid, { role: "list", columns: 3, children: items.map((item, index) => {
@@ -4464,7 +4499,7 @@ var GlobalSearchResultsList = ({
         }
       ) }, (_a2 = item.title) != null ? _a2 : index);
     }) }) }),
-    paginationNode ? React68.cloneElement(paginationNode, {
+    paginationNode ? React69.cloneElement(paginationNode, {
       className: clsx43("pagination", GlobalSearchResultsList_module_default["pagination"])
     }) : null
   ] }) });