@windstream/react-shared-components 0.2.51 → 0.2.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.51",
+  "version": "0.2.52",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

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

@@ -149,6 +149,40 @@ const mobileMenuProps: NavigationProps = {
 describe("Navigation", () => {
   beforeEach(() => jest.clearAllMocks());
 
+  describe("enableHamburgerNavigationOnDesktop (desktop hamburger A/B variant)", () => {
+    it("keeps current behavior when the flag is off", () => {
+      const { container } = render(<Navigation {...defaultProps} />);
+
+      expect(
+        container.querySelector(".mobile-nav-section")?.className
+      ).toContain("lg:hidden");
+      expect(
+        container.querySelector(".desktop-nav-section")?.className
+      ).toContain("lg:block");
+      expect(
+        container.querySelector(".utility-container")?.className
+      ).toContain("lg:block");
+    });
+
+    it("shows the hamburger and hides desktop + utility sections when enabled", () => {
+      const { container } = render(
+        <Navigation {...defaultProps} enableHamburgerNavigationOnDesktop />
+      );
+
+      // mobile section no longer hidden on desktop
+      expect(
+        container.querySelector(".mobile-nav-section")?.className
+      ).not.toContain("lg:hidden");
+      // desktop + utility hidden at all widths (no lg:block to re-show them)
+      expect(
+        container.querySelector(".desktop-nav-section")?.className
+      ).not.toContain("lg:block");
+      expect(
+        container.querySelector(".utility-container")?.className
+      ).not.toContain("lg:block");
+    });
+  });
+
   describe("Basic rendering", () => {
     it("renders nav with utility and main nav sections", () => {
       const { container } = render(<Navigation {...defaultProps} />);

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

@@ -42,6 +42,7 @@ export const Navigation: React.FC<NavigationProps> = props => {
     showCallButton = true,
     showCallNowCtaInMainNav = false,
     showMobileSliderMenu = true,
+    enableHamburgerNavigationOnDesktop = false,
     callNowCtaIcon,
     navigationBackgroundColor,
     navigationLinkColor,
@@ -106,11 +107,28 @@ export const Navigation: React.FC<NavigationProps> = props => {
     (supportNavigationLinks?.length ?? 0) > 0 ||
     (accountNavigationLinks?.length ?? 0) > 0;
 
+  // A/B variant: when enabled, the hamburger (mobile section) shows on desktop
+  // and the inline desktop nav is hidden. Off = current behavior.
+  const mobileNavResponsiveClass = enableHamburgerNavigationOnDesktop
+    ? undefined // visible at all widths, including desktop
+    : "lg:hidden"; // default: mobile/tablet only
+  const desktopNavResponsiveClass = enableHamburgerNavigationOnDesktop
+    ? "hidden" // hidden at all widths
+    : "hidden lg:block"; // default: desktop only
+  const utilityNavResponsiveClass = enableHamburgerNavigationOnDesktop
+    ? "hidden" // match mobile/tablet: hidden on desktop too
+    : "hidden lg:block"; // default: desktop only
+
   return (
     <div className="component-container">
       <nav className={`menu-container z-[1000]`}>
         {displayUtilityNavigation ? (
-          <div className="utility-container hidden lg:block lg:border-b lg:px-2">
+          <div
+            className={cx(
+              "utility-container lg:border-b lg:px-2",
+              utilityNavResponsiveClass
+            )}
+          >
             <div className="mx-auto flex max-w-120 justify-between">
               <ul className="flex gap-5" aria-label="Utility Navigation">
                 {utilityNavigationLinks?.map((links, index) => {
@@ -181,7 +199,12 @@ export const Navigation: React.FC<NavigationProps> = props => {
           )}
           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
+            className={cx(
+              "mobile-nav-section flex h-14 items-center justify-between border border-b px-5 py-[10px]",
+              mobileNavResponsiveClass
+            )}
+          >
             <div>
               {logoUrl ? (
                 <Link href="/" className="flex">
@@ -230,7 +253,12 @@ export const Navigation: React.FC<NavigationProps> = props => {
             </div>
           </div>
 
-          <div className="desktop-nav-section hidden lg:block lg:border-b lg:px-2">
+          <div
+            className={cx(
+              "desktop-nav-section lg:border-b lg:px-2",
+              desktopNavResponsiveClass
+            )}
+          >
             <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
               <div className="flex h-full">
                 {logoUrl ? (
@@ -553,7 +581,8 @@ const DesktopSearchInput = (props: {
         height={32}
         alt="Search icon"
         role="button"
-        onClick={redirectToSearchResults} />
+        onClick={redirectToSearchResults}
+      />
       {/* Input */}
       <Input
         ref={searchInputRef}

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

@@ -66,6 +66,9 @@ export interface Navigation {
    *  (the one next to the cart icon and hamburger). The drawer
    *  still renders the CallButton. Defaults to false. */
   hideMobileCallButton?: boolean;
+  /** When true, renders the mobile hamburger navigation in the desktop
+   *  viewport and hides the inline desktop nav. Defaults to false. */
+  enableHamburgerNavigationOnDesktop?: boolean;
 }
 
 export type NavigationProps = Navigation;