@windstream/react-shared-components 0.1.74 → 0.1.76

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

@@ -36,129 +36,213 @@ export const Navigation: React.FC<NavigationProps> = props => {
     primaryNavigationLogoWidth = 76.5,
     primaryNavigationLogoHeight = 24,
     hideMobileCallButton = false,
+    displayUtilityNavigation = true,
+    displaySearchBar = true,
+    displayCallNowCta = true,
+    showCallButton = true,
+    showCallNowCtaInMainNav = false,
+    showMobileSliderMenu = true,
+    callNowCtaIcon,
+    navigationBackgroundColor,
+    navigationLinkColor,
   } = props;
+
+  const logoUrl =
+    typeof primaryNavigationLogo === "string"
+      ? primaryNavigationLogo
+      : primaryNavigationLogo?.url || "";
+
+  // Background token convention matches the legacy ResidentialNavbar:
+  // when CMS provides a token like "navy500" we map it to
+  // `bg-secondary-navy500`. Raw Tailwind classes (containing a `-`)
+  // are passed through untouched. Defaults to `bg-secondary-navy500`
+  // to preserve legacy behavior when CMS leaves the field empty.
+  const mainNavBgClass = navigationBackgroundColor
+    ? navigationBackgroundColor.includes("-") ||
+      navigationBackgroundColor.startsWith("bg-")
+      ? navigationBackgroundColor
+      : `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 ||
+    (accountNavigationLinks?.length ?? 0) > 0;
+
   return (
     <div className="component-container">
       <nav className={`menu-container z-[1000]`}>
-        <div className="utility-container hidden lg:block lg:border-b lg:px-2">
-          <div className="mx-auto flex max-w-120 justify-between">
-            <ul className="flex gap-5" aria-label="Utility Navigation">
-              {utilityNavigationLinks?.map((links, index) => {
-                return (
-                  <li key={`main-menu-items-${index}`}>
-                    <ContentfulButton
-                      linkClassName={cx(
-                        "footnote flex items-center w-full h-11 text-text",
-                        // If utilityNavActiveIndex is not provided, default to making the second link active (for existing business app). If utilityNavActiveIndex is provided, use it to determine which link is active.
-                        typeof utilityNavActiveIndex !== "number"
-                          ? index === 1 && "label4"
-                          : utilityNavActiveIndex === index && "label4"
-                      )}
-                      linkVariant="unstyled"
-                      {...(Object.fromEntries(
-                        Object.entries(links).filter(([_, v]) => v !== null)
-                      ) as any)}
+        {displayUtilityNavigation ? (
+          <div className="utility-container hidden lg:block lg:border-b lg:px-2">
+            <div className="mx-auto flex max-w-120 justify-between">
+              <ul className="flex gap-5" aria-label="Utility Navigation">
+                {utilityNavigationLinks?.map((links, index) => {
+                  return (
+                    <li key={`main-menu-items-${index}`}>
+                      <ContentfulButton
+                        linkClassName={cx(
+                          "footnote flex items-center w-full h-11 text-text",
+                          // If utilityNavActiveIndex is not provided, default to making the second link active (for existing business app). If utilityNavActiveIndex is provided, use it to determine which link is active.
+                          typeof utilityNavActiveIndex !== "number"
+                            ? index === 1 && "label4"
+                            : utilityNavActiveIndex === index && "label4"
+                        )}
+                        linkVariant="unstyled"
+                        {...(Object.fromEntries(
+                          Object.entries(links).filter(([_, v]) => v !== null)
+                        ) as any)}
+                      />
+                    </li>
+                  );
+                })}
+              </ul>
+              <div className="flex items-center gap-10">
+                {displayCallNowCta ? (
+                  <CallButton
+                    className="border-none"
+                    href={invocaPhoneNumberLink}
+                    prefix={callNowCtaText}
+                    onClick={onCallClickDesktop}
+                  >
+                    <Text className="body3 text-text">
+                      {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" />
+                    ) : null}
+                  </Link>
+                ) : null}
+                {accountNavigationLinks?.map((links, index) => {
+                  return (
+                    <DesktopLinkGroups
+                      key={`my-account-${index}`}
+                      anchorName={`my-account-${index}`}
+                      link={links}
                     />
-                  </li>
-                );
-              })}
-            </ul>
-            <div className="flex items-center gap-10">
-              <CallButton
-                className="border-none"
-                href={invocaPhoneNumberLink}
-                prefix={callNowCtaText}
-                onClick={onCallClickDesktop}
-              >
-                <Text className="body3 text-text">
-                  {invocaPhoneNumberDisplayText}
-                </Text>
-              </CallButton>
-              {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}
-              {accountNavigationLinks?.map((links, index) => {
-                return (
-                  <DesktopLinkGroups
-                    key={`my-account-${index}`}
-                    anchorName={`my-account-${index}`}
-                    link={links}
-                  />
-                );
-              })}
+                  );
+                })}
+              </div>
             </div>
           </div>
-        </div>
-        <div className="main-nav-container" aria-label="Main Navigation">
+        ) : null}
+        <div
+          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">
             <div>
-              <Link href="/" className="flex">
-                <NextImage
-                  src={
-                    typeof primaryNavigationLogo === "string"
-                      ? primaryNavigationLogo
-                      : primaryNavigationLogo?.url || ""
-                  }
-                  alt="Kinetic business logo"
-                  width={primaryNavigationLogoWidth}
-                  height={primaryNavigationLogoHeight}
-                />
-              </Link>
+              {logoUrl ? (
+                <Link href="/" className="flex">
+                  <NextImage
+                    src={logoUrl}
+                    alt="Kinetic business logo"
+                    width={primaryNavigationLogoWidth}
+                    height={primaryNavigationLogoHeight}
+                  />
+                </Link>
+              ) : null}
             </div>
             <div className="flex items-center gap-6">
-              {hideMobileCallButton ? null : (
-                <CallButton
-                  href={invocaPhoneNumberLink}
-                  onClick={onCallClickMobile}
-                >
-                  <Text as="span" className="footnote">
-                    {invocaPhoneNumberDisplayText}
-                  </Text>
-                </CallButton>
-              )}
-              {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}
-              <MobileMenu {...props} />
+                  {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>
 
           <div className="desktop-nav-section hidden lg:block lg:border-b lg:px-2">
             <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
               <div className="flex h-full">
-                <Link href="/" className="flex">
-                  <NextImage
-                    src={
-                      typeof primaryNavigationLogo === "string"
-                        ? primaryNavigationLogo
-                        : primaryNavigationLogo?.url || ""
-                    }
-                    alt="Kinetic business logo"
-                    width={primaryNavigationLogoWidth}
-                    height={primaryNavigationLogoHeight}
-                    className="mr-[64px]"
-                  />
-                </Link>
+                {logoUrl ? (
+                  <Link href="/" className="flex">
+                    <NextImage
+                      src={logoUrl}
+                      alt="Kinetic business logo"
+                      width={primaryNavigationLogoWidth}
+                      height={primaryNavigationLogoHeight}
+                      className="mr-[64px]"
+                    />
+                  </Link>
+                ) : null}
 
                 <div className="flex h-full items-center gap-5">
                   {primaryNavigationLinks?.map((links, index) => {
@@ -167,26 +251,33 @@ export const Navigation: React.FC<NavigationProps> = props => {
                         key={`main-menu-${index}`}
                         anchorName={`main-menu-${index}`}
                         link={links}
+                        linkColorClassName={navigationLinkColor}
                       />
                     );
                   })}
                 </div>
               </div>
               <div className="flex h-full items-center gap-10">
-                <DesktopSearchInput
-                  searchBarIconURL={
-                    typeof searchBarIcon === "string"
-                      ? searchBarIcon
-                      : searchBarIcon?.url || ""
-                  }
-                  onSearch={onSearch}
-                />
+                {showCallNowCtaInMainNav
+                  ? renderMainNavCallCta(onCallClickDesktop)
+                  : null}
+                {displaySearchBar ? (
+                  <DesktopSearchInput
+                    searchBarIconURL={
+                      typeof searchBarIcon === "string"
+                        ? searchBarIcon
+                        : searchBarIcon?.url || ""
+                    }
+                    onSearch={onSearch}
+                  />
+                ) : null}
                 {supportNavigationLinks?.map((links, index) => {
                   return (
                     <DesktopLinkGroups
                       key={`support-menu-${index}`}
                       anchorName={`support-menu-${index}`}
                       link={links}
+                      linkColorClassName={navigationLinkColor}
                     />
                   );
                 })}
@@ -207,6 +298,9 @@ const MobileMenu = (props: NavigationProps) => {
     utilityNavigationLinks,
     supportNavigationLinks,
     accountNavigationLinks,
+    showCallButton,
+    displayCallNowCta,
+    displaySearchBar,
   } = props;
   const [isOpen, setIsOpen] = React.useState(false);
 
@@ -274,7 +368,7 @@ const MobileMenu = (props: NavigationProps) => {
       <div
         className={cx(
           "fixed bottom-0 right-0 top-0",
-          "z-[100] h-full bg-bg px-0 py-4",
+          "z-[100] h-full bg-bg px-0 py-4 text-text",
           "transition-all duration-300 ease-in-out",
           "block",
           isOpen ? "right-0" : "-right-96"
@@ -282,16 +376,25 @@ const MobileMenu = (props: NavigationProps) => {
         id="mobile-menu-overlay"
       >
         <div id="drawer-items" className="flex h-full flex-col gap-3">
-          <div className="flex items-center justify-between px-4">
-            <div>
-              <CallButton
-                className="border-none"
-                href={props.invocaPhoneNumberLink}
-                onClick={props.onCallClickMobile}
-              >
-                {props.invocaPhoneNumberDisplayText}
-              </CallButton>
-            </div>
+          <div
+            className={cx(
+              "flex items-center px-4",
+              showCallButton !== false || displayCallNowCta !== false
+                ? "justify-between"
+                : "justify-end"
+            )}
+          >
+            {showCallButton !== false || displayCallNowCta !== false ? (
+              <div>
+                <CallButton
+                  className="border-none"
+                  href={props.invocaPhoneNumberLink}
+                  onClick={props.onCallClickMobile}
+                >
+                  {props.invocaPhoneNumberDisplayText}
+                </CallButton>
+              </div>
+            ) : null}
             <div>
               <ContentfulButton
                 showButtonAs="unstyled"
@@ -302,16 +405,18 @@ const MobileMenu = (props: NavigationProps) => {
               </ContentfulButton>
             </div>
           </div>
-          <MobileSearchInput
-            closeMenu={closeMenu}
-            isMenuOpen={isOpen}
-            searchBarIconURL={
-              typeof props.searchBarIcon === "string"
-                ? props.searchBarIcon
-                : props.searchBarIcon?.url || ""
-            }
-            onSearch={props.onSearch || (() => {})}
-          />
+          {displaySearchBar !== false ? (
+            <MobileSearchInput
+              closeMenu={closeMenu}
+              isMenuOpen={isOpen}
+              searchBarIconURL={
+                typeof props.searchBarIcon === "string"
+                  ? props.searchBarIcon
+                  : props.searchBarIcon?.url || ""
+              }
+              onSearch={props.onSearch || (() => {})}
+            />
+          ) : null}
           <div
             className="flex-grow overflow-y-auto"
             onClick={event => {

package/src/contentful/blocks/navigation/types.ts

@@ -22,6 +22,13 @@ export interface Navigation {
   navigationBackgroundColor?: Color;
   utilityNavBackgroundColor?: Color;
   utilityNavLinkColor?: Color;
+  /**
+   * Tailwind class (or raw class string) applied to the main nav row's
+   * text color, e.g. `"text-white"` or `"text-secondary-navy500"`. Used
+   * by section / secondary navbars rendered on a dark background where
+   * the labels need to be inverted.
+   */
+  navigationLinkColor?: string;
   utilityNavActiveIndex?: number;
 
   callNowCtaText?: string;