@digital-b2c/coreui-kit 0.17.10 → 0.17.12

package/dist/index.d.cts

@@ -366,7 +366,9 @@ interface GridItemProps extends PropsWithChildren {
 }
 
 interface NewsCardProps {
+    type?: 'restricted';
     className?: string;
+    id?: string | number;
     image?: IPicture;
     tag: string;
     date: {
@@ -382,7 +384,7 @@ interface NewsCardProps {
     }) => React.ReactNode;
 }
 
-declare const NewsCard: ({ className, image, date, description, tag, title, cta, direction, renderLink, }: NewsCardProps) => react.JSX.Element;
+declare const NewsCard: ({ type, className, image, date, description, tag, title, cta, direction, renderLink, }: NewsCardProps) => react.JSX.Element;
 
 type BlogPostContentBodyProps = {
     children: ReactNode;
@@ -706,6 +708,10 @@ declare const MiniSectionCta: (({ className, variant, theme, title, subtitle, ct
     Subtitle: ({ children }: MiniSectionCtaSubtitleProps) => react.JSX.Element;
 };
 
+type NavigationUserMenuFallbackProps = {
+    children: ReactNode;
+};
+
 interface BaseNavItem {
     title: string;
     description: string;
@@ -736,7 +742,7 @@ interface NavigationBrandLogos {
     optical?: IPicture;
     pearleVision?: IPicture;
 }
-interface NavigationProps {
+interface NavigationProps extends PropsWithChildren {
     className?: string;
     variant?: 'external' | 'internal' | '' | null;
     transparent?: boolean;
@@ -755,7 +761,9 @@ interface NavigationProps {
     brandLogos?: NavigationBrandLogos;
 }
 
-declare const Navigation: (props: NavigationProps) => react.JSX.Element;
+declare const Navigation: ((props: NavigationProps) => react.JSX.Element) & {
+    UserMenuFallback: ({ children }: NavigationUserMenuFallbackProps) => react.JSX.Element;
+};
 
 type PracticePathCardsFooterProps = {
     children: ReactNode;

package/dist/index.d.ts

@@ -366,7 +366,9 @@ interface GridItemProps extends PropsWithChildren {
 }
 
 interface NewsCardProps {
+    type?: 'restricted';
     className?: string;
+    id?: string | number;
     image?: IPicture;
     tag: string;
     date: {
@@ -382,7 +384,7 @@ interface NewsCardProps {
     }) => React.ReactNode;
 }
 
-declare const NewsCard: ({ className, image, date, description, tag, title, cta, direction, renderLink, }: NewsCardProps) => react.JSX.Element;
+declare const NewsCard: ({ type, className, image, date, description, tag, title, cta, direction, renderLink, }: NewsCardProps) => react.JSX.Element;
 
 type BlogPostContentBodyProps = {
     children: ReactNode;
@@ -706,6 +708,10 @@ declare const MiniSectionCta: (({ className, variant, theme, title, subtitle, ct
     Subtitle: ({ children }: MiniSectionCtaSubtitleProps) => react.JSX.Element;
 };
 
+type NavigationUserMenuFallbackProps = {
+    children: ReactNode;
+};
+
 interface BaseNavItem {
     title: string;
     description: string;
@@ -736,7 +742,7 @@ interface NavigationBrandLogos {
     optical?: IPicture;
     pearleVision?: IPicture;
 }
-interface NavigationProps {
+interface NavigationProps extends PropsWithChildren {
     className?: string;
     variant?: 'external' | 'internal' | '' | null;
     transparent?: boolean;
@@ -755,7 +761,9 @@ interface NavigationProps {
     brandLogos?: NavigationBrandLogos;
 }
 
-declare const Navigation: (props: NavigationProps) => react.JSX.Element;
+declare const Navigation: ((props: NavigationProps) => react.JSX.Element) & {
+    UserMenuFallback: ({ children }: NavigationUserMenuFallbackProps) => react.JSX.Element;
+};
 
 type PracticePathCardsFooterProps = {
     children: ReactNode;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import clsx49 from 'clsx';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import React71, { forwardRef, useId, useRef, useState, useCallback, useMemo, useEffect, Children, isValidElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+import React71, { forwardRef, useId, useRef, useState, useCallback, useMemo, useEffect, cloneElement, Children, isValidElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
 import gsap$1, { gsap } from 'gsap';
 import { useGSAP } from '@gsap/react';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
@@ -1789,9 +1789,11 @@ var NewsCard_module_default = {
   "news-card-description": "NewsCard_module_news-card-description",
   "news-card-cta-wrapper": "NewsCard_module_news-card-cta-wrapper",
   "news-card--vertical": "NewsCard_module_news-card--vertical",
-  "news-card--horizontal": "NewsCard_module_news-card--horizontal"
+  "news-card--horizontal": "NewsCard_module_news-card--horizontal",
+  restricted: "NewsCard_module_restricted"
 };
 var NewsCard = ({
+  type,
   className,
   image,
   date,
@@ -1802,13 +1804,19 @@ var NewsCard = ({
   direction = "vertical",
   renderLink
 }) => {
-  const linkProps = cta && cta.url ? {
+  const id = useId();
+  const isRestricted = type === "restricted";
+  const linkProps = cta && cta.url ? __spreadProps(__spreadValues({
     href: cta.url,
     target: cta.isExternal ? "_blank" : void 0,
     rel: cta.isExternal ? "noopener noreferrer" : void 0,
     className: clsx49("news-card-link", NewsCard_module_default["news-card-link"]),
     "aria-label": `${title}${cta.label ? ` \u2014 ${cta.label}` : ""}`
-  } : null;
+  }, isRestricted && {
+    "aria-disabled": true
+  }), {
+    tabIndex: isRestricted ? -1 : 0
+  }) : null;
   const cardLink = linkProps ? renderLink ? renderLink(__spreadProps(__spreadValues({}, linkProps), { children: null })) : /* @__PURE__ */ jsx("a", __spreadValues({}, linkProps)) : null;
   return /* @__PURE__ */ jsxs(
     "article",
@@ -1816,9 +1824,12 @@ var NewsCard = ({
       className: clsx49(
         "news-card",
         NewsCard_module_default["news-card"],
+        type && NewsCard_module_default[type],
         NewsCard_module_default[`news-card--${direction}`],
         className
       ),
+      "aria-labelledby": `title-${id}`,
+      "aria-describedby": isRestricted ? `restricted-${id}` : void 0,
       children: [
         cardLink,
         image && /* @__PURE__ */ jsx(Picture, __spreadProps(__spreadValues({}, image), { className: clsx49("news-card-image", NewsCard_module_default["news-card-image"]) })),
@@ -1836,7 +1847,8 @@ var NewsCard = ({
               ] }),
               /* @__PURE__ */ jsxs("div", { className: clsx49("news-card-main-content", NewsCard_module_default["news-card-main-content"]), children: [
                 /* @__PURE__ */ jsx("h3", { className: clsx49("news-card-title", NewsCard_module_default["news-card-title"]), children: title }),
-                typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: clsx49("news-card-description", NewsCard_module_default["news-card-description"]), children: description }) : description
+                typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: clsx49("news-card-description", NewsCard_module_default["news-card-description"]), children: description }) : description,
+                isRestricted && /* @__PURE__ */ jsx("p", { id: `restricted-${id}`, className: "sr-only", children: "This resource is restricted. You do not have permission to access it." })
               ] }),
               cta && cta.url && /* @__PURE__ */ jsx("div", { className: clsx49("news-card-cta-wrapper", NewsCard_module_default["news-card-cta-wrapper"]), children: /* @__PURE__ */ jsx(
                 Button,
@@ -3060,7 +3072,8 @@ var MiniBanner_module_default = {
   ctaContainer: "MiniBanner_module_ctaContainer",
   miniBannerNoBG: "MiniBanner_module_miniBannerNoBG",
   miniBannerTextLeft: "MiniBanner_module_miniBannerTextLeft",
-  container: "MiniBanner_module_container"
+  container: "MiniBanner_module_container",
+  subtitle: "MiniBanner_module_subtitle"
 };
 var MiniBannerPreTitle = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
@@ -3109,7 +3122,7 @@ var MiniBanner = ({
         subtitleNode && /* @__PURE__ */ jsx(
           "div",
           {
-            className: clsx49(MiniBanner_module_default.title, {
+            className: clsx49(MiniBanner_module_default.title, MiniBanner_module_default.subtitle, {
               subheading: isMiniBannerNoBG,
               h1: !isMiniBannerNoBG && !isMiniBannerTextLeft,
               h4: isMiniBannerTextLeft
@@ -3215,6 +3228,9 @@ var MiniSectionCta2 = Object.assign(MiniSectionCta, {
   Title: MiniSectionCtaTitle,
   Subtitle: MiniSectionCtaSubtitle
 });
+var NavigationUserMenuFallback = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
 var useIsAtTop = () => {
   const [isAtTop, setIsAtTop] = useState(true);
   useEffect(() => {
@@ -3829,6 +3845,10 @@ var Navigation2 = (props) => {
     brandLogos
   } = props;
   const isExternal = variant !== "internal";
+  const slots = resolveCompoundSlots(props.children, {
+    userMenuFallback: NavigationUserMenuFallback
+  });
+  const userMenuFallbackNode = slots.userMenuFallback;
   const [isHovered, setIsHovered] = useState(false);
   const [openIndex, setOpenIndex] = useState(null);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -3973,7 +3993,9 @@ var Navigation2 = (props) => {
                   rightButton,
                   loginVariant: isTransparent ? "ghost" : "nofillblack"
                 }
-              ) : user && /* @__PURE__ */ jsx(UserMenu, { user })
+              ) : user ? /* @__PURE__ */ jsx(UserMenu, { user }) : userMenuFallbackNode ? cloneElement(userMenuFallbackNode, {
+                className: clsx49("userMenuFallback", Navigation_module_default["userMenuFallback"])
+              }) : null
             ] }),
             !isTabletBelow && /* @__PURE__ */ jsxs("div", { className: Navigation_module_default.bottomRow, children: [
               /* @__PURE__ */ jsx(
@@ -4041,6 +4063,11 @@ var Navigation2 = (props) => {
     )
   ] });
 };
+
+// src/widgets/Navigation/index.ts
+var Navigation3 = Object.assign(Navigation2, {
+  UserMenuFallback: NavigationUserMenuFallback
+});
 var PracticePathCardsFooter = ({ children }) => {
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
@@ -4853,8 +4880,7 @@ var BlogCardGrid = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx(Grid, __spreadProps(__spreadValues({ role: "list", columns: 3 }, gridProps), { children: items.map((item, index) => {
-      var _a2;
+    /* @__PURE__ */ jsx(Grid, __spreadProps(__spreadValues({ role: "list", columns: 3 }, gridProps), { children: items.map((item) => {
       return /* @__PURE__ */ jsx(
         GridItem,
         __spreadProps(__spreadValues({
@@ -4863,7 +4889,7 @@ var BlogCardGrid = ({
         }, gridItemProps), {
           children: /* @__PURE__ */ jsx(NewsCard, __spreadProps(__spreadValues({}, item), { renderLink }))
         }),
-        (_a2 = item.title) != null ? _a2 : index
+        `${item == null ? void 0 : item.title}-${item == null ? void 0 : item.id}`
       );
     }) }))
   ] });
@@ -4945,17 +4971,14 @@ var FeaturedNewsHighlights = ({
         wrapperClass: clsx49(FeaturedNewsHighlights_module_default["carousel-wrapper"]),
         slideClass: FeaturedNewsHighlights_module_default["carousel-list-item"],
         spaceBetween: 16,
-        slides: items.map((item, index) => {
-          var _a2;
-          return /* @__PURE__ */ jsx(
-            NewsCard,
-            __spreadProps(__spreadValues({}, item), {
-              direction: "vertical",
-              className: clsx49("carousel-news-card", FeaturedNewsHighlights_module_default["carousel-news-card"])
-            }),
-            (_a2 = item == null ? void 0 : item.title) != null ? _a2 : index
-          );
-        })
+        slides: items.map((item) => /* @__PURE__ */ jsx(
+          NewsCard,
+          __spreadProps(__spreadValues({}, item), {
+            direction: "vertical",
+            className: clsx49("carousel-news-card", FeaturedNewsHighlights_module_default["carousel-news-card"])
+          }),
+          `${item == null ? void 0 : item.title}-${item == null ? void 0 : item.id}`
+        ))
       }
     ),
     (!isVariantHome || isVariantHome && !isBelowTablet) && /* @__PURE__ */ jsxs("div", { className: clsx49("content-wrapper", FeaturedNewsHighlights_module_default["content-wrapper"]), children: [
@@ -4966,18 +4989,15 @@ var FeaturedNewsHighlights = ({
           renderLink
         })
       ),
-      sideCards && sideCards.length > 0 && /* @__PURE__ */ jsx("div", { className: clsx49("side-content", FeaturedNewsHighlights_module_default["side-content"]), children: sideCards.map((card, index) => {
-        var _a2;
-        return /* @__PURE__ */ jsx(
-          NewsCard,
-          __spreadProps(__spreadValues({}, card), {
-            className: clsx49("side-cards", FeaturedNewsHighlights_module_default["side-cards"]),
-            direction: "horizontal",
-            renderLink
-          }),
-          (_a2 = card == null ? void 0 : card.title) != null ? _a2 : index
-        );
-      }) })
+      sideCards && sideCards.length > 0 && /* @__PURE__ */ jsx("div", { className: clsx49("side-content", FeaturedNewsHighlights_module_default["side-content"]), children: sideCards.map((card) => /* @__PURE__ */ jsx(
+        NewsCard,
+        __spreadProps(__spreadValues({}, card), {
+          className: clsx49("side-cards", FeaturedNewsHighlights_module_default["side-cards"]),
+          direction: "horizontal",
+          renderLink
+        }),
+        `${card == null ? void 0 : card.title}-${card == null ? void 0 : card.id}`
+      )) })
     ] })
   ] });
   return /* @__PURE__ */ jsx(
@@ -5529,6 +5549,6 @@ function useIntersectionObserver({
   return { observeRef, isVisible };
 }
 
-export { Anchor, Badge, BlogCardGrid2 as BlogCardGrid, BlogPost2 as BlogPost, BlogPostContent2 as BlogPostContent, BlogSearchResultsList2 as BlogSearchResultsList, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ColTextMenu, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, FeaturedNewsHighlights2 as FeaturedNewsHighlights, FilterBar, Footer, GlobalSearchResultsList2 as GlobalSearchResultsList, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, Input, InternalBrandsTab2 as InternalBrandsTab, Loader, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Navigation2 as Navigation, NewsCard, NewsCardList2 as NewsCardList, PageLoader2 as PageLoader, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, QuoteSectionBlock, ResourceCardItem, ResourcesGridList, Search, Sidebar, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextCenterWithMedia2 as TextCenterWithMedia, TextEvent2 as TextEvent, TwoColTextMenu, UpcomingEventCard, UserMenu, resolveCompoundSlots, svgs, useActivePath, useIntersectionObserver, useIsAtTop };
+export { Anchor, Badge, BlogCardGrid2 as BlogCardGrid, BlogPost2 as BlogPost, BlogPostContent2 as BlogPostContent, BlogSearchResultsList2 as BlogSearchResultsList, BrandsStrip, Button, Card2 as Card, CardCollection2 as CardCollection, ColTextMenu, ConditionalWrapper, ContactModule2 as ContactModule, Container, CountingCard2 as CountingCard, EventList2 as EventList, FeaturedNewsHighlights2 as FeaturedNewsHighlights, FilterBar, Footer, GlobalSearchResultsList2 as GlobalSearchResultsList, HeroBanner2 as HeroBanner, HeroBannerCarousel, Icon, InfoCard2 as InfoCard, Input, InternalBrandsTab2 as InternalBrandsTab, Loader, MiniBanner2 as MiniBanner, MiniSectionCta2 as MiniSectionCta, Navigation3 as Navigation, NewsCard, NewsCardList2 as NewsCardList, PageLoader2 as PageLoader, Pagination, Picture, PracticeCard, PracticePathCards2 as PracticePathCards, QuoteSectionBlock, ResourceCardItem, ResourcesGridList, Search, Sidebar, Teaser5050With3Text2 as Teaser5050With3Text, Teaser5050WithCta2 as Teaser5050WithCta, TextBody2 as TextBody, TextCenterCtaInBottom2 as TextCenterCtaInBottom, TextCenterWithMedia2 as TextCenterWithMedia, TextEvent2 as TextEvent, TwoColTextMenu, UpcomingEventCard, UserMenu, resolveCompoundSlots, svgs, useActivePath, useIntersectionObserver, useIsAtTop };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map