@windstream/react-shared-components 0.1.75 → 0.1.76

package/src/contentful/blocks/navigation/index.tsx

@@ -40,6 +40,9 @@ export const Navigation: React.FC<NavigationProps> = props => {
     displaySearchBar = true,
     displayCallNowCta = true,
     showCallButton = true,
+    showCallNowCtaInMainNav = false,
+    showMobileSliderMenu = true,
+    callNowCtaIcon,
     navigationBackgroundColor,
     navigationLinkColor,
   } = props;
@@ -61,6 +64,43 @@ export const Navigation: React.FC<NavigationProps> = props => {
       : `bg-secondary-${navigationBackgroundColor}`
     : "bg-secondary-navy500";
 
+  const callNowCtaIconUrl =
+    typeof callNowCtaIcon === "string"
+      ? callNowCtaIcon
+      : callNowCtaIcon?.url || "";
+
+  // Styled "Call Now" pill used in the main nav rows when CMS opts in via
+  // `showCallNowCtaInMainNav` (desktop) or when the mobile slider menu is
+  // disabled (`showMobileSliderMenu: false`). Mirrors the legacy
+  // ResidentialNavbar styling so existing CMS entries render identically.
+  const renderMainNavCallCta = (
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void
+  ) => (
+    <Link
+      href={invocaPhoneNumberLink || "#"}
+      onClick={onClick}
+      className="bg-secondary-gray100 text-secondary-navy500 inline-flex h-8 items-center rounded-full pl-1 pr-2 no-underline shadow-none"
+      aria-label={
+        invocaPhoneNumberDisplayText
+          ? `Call ${invocaPhoneNumberDisplayText}`
+          : "Call now"
+      }
+    >
+      {callNowCtaIconUrl ? (
+        <NextImage
+          src={callNowCtaIconUrl}
+          alt="Call us"
+          width={24}
+          height={24}
+          className="mr-2 self-center rounded-full"
+        />
+      ) : null}
+      <Text as="span" className="text-secondary-navy500 footnote">
+        {invocaPhoneNumberDisplayText}
+      </Text>
+    </Link>
+  );
+
   const hasMobileMenuItems =
     (primaryNavigationLinks?.length ?? 0) > 0 ||
     (supportNavigationLinks?.length ?? 0) > 0 ||
@@ -133,7 +173,11 @@ export const Navigation: React.FC<NavigationProps> = props => {
           </div>
         ) : null}
         <div
-          className={cx("main-nav-container", mainNavBgClass, navigationLinkColor)}
+          className={cx(
+            "main-nav-container",
+            mainNavBgClass,
+            navigationLinkColor
+          )}
           aria-label="Main Navigation"
         >
           <div className="mobile-nav-section flex h-14 items-center justify-between border border-b px-5 py-[10px] lg:hidden">
@@ -150,30 +194,38 @@ export const Navigation: React.FC<NavigationProps> = props => {
               ) : null}
             </div>
             <div className="flex items-center gap-6">
-              {showCallButton && !hideMobileCallButton ? (
-                <CallButton
-                  href={invocaPhoneNumberLink}
-                  onClick={onCallClickMobile}
-                >
-                  <Text as="span" className="footnote">
-                    {invocaPhoneNumberDisplayText}
-                  </Text>
-                </CallButton>
-              ) : null}
-              {displayCartIcon ? (
-                <Link
-                  href={cartHref || "#"}
-                  className="relative inline-flex cursor-pointer"
-                  aria-label={cartIconAriaLabel}
-                  onClick={onCartClick}
-                >
-                  <MaterialIcon name="shopping_cart" />
-                  {cartHasRetention ? (
-                    <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
+              {!showMobileSliderMenu ? (
+                showCallButton ? (
+                  renderMainNavCallCta(onCallClickMobile)
+                ) : null
+              ) : (
+                <>
+                  {showCallButton && !hideMobileCallButton ? (
+                    <CallButton
+                      href={invocaPhoneNumberLink}
+                      onClick={onCallClickMobile}
+                    >
+                      <Text as="span" className="footnote">
+                        {invocaPhoneNumberDisplayText}
+                      </Text>
+                    </CallButton>
                   ) : null}
-                </Link>
-              ) : null}
-              {hasMobileMenuItems ? <MobileMenu {...props} /> : null}
+                  {displayCartIcon ? (
+                    <Link
+                      href={cartHref || "#"}
+                      className="relative inline-flex cursor-pointer"
+                      aria-label={cartIconAriaLabel}
+                      onClick={onCartClick}
+                    >
+                      <MaterialIcon name="shopping_cart" />
+                      {cartHasRetention ? (
+                        <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
+                      ) : null}
+                    </Link>
+                  ) : null}
+                  {hasMobileMenuItems ? <MobileMenu {...props} /> : null}
+                </>
+              )}
             </div>
           </div>
 
@@ -206,6 +258,9 @@ export const Navigation: React.FC<NavigationProps> = props => {
                 </div>
               </div>
               <div className="flex h-full items-center gap-10">
+                {showCallNowCtaInMainNav
+                  ? renderMainNavCallCta(onCallClickDesktop)
+                  : null}
                 {displaySearchBar ? (
                   <DesktopSearchInput
                     searchBarIconURL={