@windstream/react-shared-components 0.2.51 → 0.2.53

package/src/contentful/blocks/award-marquee/index.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import {
+  AwardMarqueeBackground,
+  AwardMarqueeItem,
+  AwardMarqueeProps,
+  AwardMarqueeSpeed,
+} from "./types";
+
+import { cx } from "@shared/utils";
+
+const DURATION_IN_SECONDS: Record<AwardMarqueeSpeed, number> = {
+  slow: 30,
+  medium: 20,
+  fast: 10,
+};
+
+const BACKGROUND_CLASS: Record<AwardMarqueeBackground, string> = {
+  cream: "bg-[#FFFEEF]",
+  gray90: "bg-[#FBFBFC]",
+  white: "bg-white",
+};
+
+const renderAwardItem = (
+  { iconUrl, iconAlt, title, description }: AwardMarqueeItem,
+  key: React.Key
+) => (
+  <div
+    key={key}
+    className="ml-4 flex w-auto flex-shrink-0 items-center whitespace-nowrap"
+  >
+    <img src={iconUrl} alt={iconAlt ?? ""} width={200} />
+    <div className="w-[250px] text-center">
+      <p className="flex justify-center text-center text-body3 font-bold">
+        {title}
+      </p>
+      <p className="flex flex-wrap whitespace-normal text-center text-footnote">
+        {description}
+      </p>
+    </div>
+  </div>
+);
+
+export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
+  anchorId = "Award-Marquee",
+  items = [],
+  speed = "medium",
+  scroll = false,
+  backgroundColor = "white",
+  className,
+}) => {
+  const scrollAvailable = items.length > 3;
+  const shouldDuplicate = items.length < 8;
+  const duration = DURATION_IN_SECONDS[speed];
+
+  const animatedMarquee = () => {
+    const marqueeItems = shouldDuplicate ? [...items, ...items] : items;
+
+    return (
+      <div
+        className={cx(
+          "flex items-center overflow-x-hidden",
+          BACKGROUND_CLASS[backgroundColor]
+        )}
+      >
+        <div
+          className="flex animate-award-marquee gap-4 px-2"
+          style={
+            {
+              "--award-marquee-duration": `${duration}s`,
+            } as React.CSSProperties
+          }
+        >
+          {marqueeItems.map((item, index) => renderAwardItem(item, index))}
+        </div>
+      </div>
+    );
+  };
+
+  const staticMarquee = (
+    <div className="flex flex-nowrap items-center justify-around overflow-clip">
+      {items.map((item, index) => renderAwardItem(item, index))}
+    </div>
+  );
+
+  // No scroll: always static at every breakpoint.
+  if (!scroll)
+    return (
+      <div id={anchorId} className={className}>
+        {staticMarquee}
+      </div>
+    );
+
+  // Scroll with >3 items: animate at every breakpoint.
+  if (scrollAvailable)
+    return (
+      <div id={anchorId} className={className}>
+        {animatedMarquee()}
+      </div>
+    );
+
+  // Scroll with <=3 items: animate on mobile, static on >= sm (CSS-driven).
+  return (
+    <div id={anchorId} className={className}>
+      <div className="sm:hidden">{animatedMarquee()}</div>
+      <div className="hidden sm:block">{staticMarquee}</div>
+    </div>
+  );
+};
+
+export default AwardMarquee;

package/src/contentful/blocks/award-marquee/types.ts

@@ -0,0 +1,19 @@
+export type AwardMarqueeSpeed = "fast" | "medium" | "slow";
+
+export type AwardMarqueeBackground = "cream" | "gray90" | "white";
+
+export type AwardMarqueeItem = {
+  iconUrl: string;
+  iconAlt?: string;
+  title?: string;
+  description?: string;
+};
+
+export type AwardMarqueeProps = {
+  anchorId?: string;
+  items: AwardMarqueeItem[];
+  speed?: AwardMarqueeSpeed;
+  scroll?: boolean;
+  backgroundColor?: AwardMarqueeBackground;
+  className?: string;
+};

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;

package/src/contentful/index.ts

@@ -2,6 +2,14 @@
 export { Accordion } from "./blocks/accordion";
 export type { AccordionProps } from "./blocks/accordion/types";
 
+export { AwardMarquee } from "./blocks/award-marquee";
+export type {
+  AwardMarqueeProps,
+  AwardMarqueeItem,
+  AwardMarqueeSpeed,
+  AwardMarqueeBackground,
+} from "./blocks/award-marquee/types";
+
 export { Callout } from "./blocks/callout";
 export type { CalloutProps } from "./blocks/callout/types";
 

package/tailwind.config.cjs

@@ -378,10 +378,17 @@ module.exports = {
           "70%": { transform: "scale(1.6)", opacity: "0" },
           "100%": { transform: "scale(1.6)", opacity: "0" },
         },
+        awardMarqueeScroll: {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(-100%)" },
+        },
       },
       animation: {
         blink: "blink 1.2s ease-in-out infinite",
         "pulse-dot": "pulseDot 1.6s ease-out infinite",
+        // Duration is supplied per-instance via the --award-marquee-duration var.
+        "award-marquee":
+          "awardMarqueeScroll var(--award-marquee-duration, 20s) linear infinite",
       },
     },
     screens: {