@windstream/react-shared-components 0.2.74 → 0.2.75

package/src/contentful/blocks/carousel/helper.tsx

@@ -46,10 +46,14 @@ function ProductCardPanel({
   // When any card is flagged best-value, every card reserves the banner height
   // so plan name/price stay aligned across a two-column row.
   const hasAnyBadge = items.some((item: any) => item?.highlighted);
+  const hasAnyGift = items.some(
+    (item: any) => (item?.giftRewards?.list?.items?.length ?? 0) > 0
+  );
   const showArrows = fields?.showArrows !== false && isCarousel;
   const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
   const windowRef = useRef<HTMLDivElement | null>(null);
   const mobileGridRef = useRef<HTMLDivElement | null>(null);
+  const panelRef = useRef<HTMLDivElement | null>(null);
   const touchStartX = useRef<number>(0);
 
   // Determine how many cards fit so we never scroll past the last card
@@ -176,16 +180,13 @@ function ProductCardPanel({
   }, [isCarousel, isVisible, desktopExpanded, items.length]);
 
   // Two-column mobile: match each card's sections to the tallest card in the
-  // same row (pair) so section spacing and the CTA align per row. Desktop keeps
+  // same row (pair) so section spacing aligns per row. The gift slot is handled
+  // separately (panel-wide) so it sizes to the real gift content. Desktop keeps
   // its fixed section heights and is left untouched.
   useEffect(() => {
     if (!twoColumn || !isVisible) return;
 
-    const selectors = [
-      "[data-pc-header]",
-      "[data-pc-description]",
-      "[data-pc-gift]",
-    ];
+    const selectors = ["[data-pc-header]", "[data-pc-description]"];
 
     const clear = () => {
       const grid = mobileGridRef.current;
@@ -193,35 +194,20 @@ function ProductCardPanel({
       selectors.forEach(sel =>
         grid.querySelectorAll<HTMLElement>(sel).forEach(el => {
           el.style.removeProperty("min-height");
-          el.style.removeProperty("display");
         })
       );
     };
 
     // `important` is required because Tailwind utilities are generated with
     // !important in this project (tailwind.config `important: true`).
-    const equalizePairs = (sel: string, collapseEmpty = false) => {
+    const equalizePairs = (sel: string) => {
       const grid = mobileGridRef.current;
       if (!grid) return;
       const els = Array.from(grid.querySelectorAll<HTMLElement>(sel));
       // Reset before measuring so a previous pass doesn't inflate the result.
-      els.forEach(el => {
-        el.style.removeProperty("min-height");
-        el.style.removeProperty("display");
-      });
+      els.forEach(el => el.style.removeProperty("min-height"));
       for (let i = 0; i < els.length; i += 2) {
         const pair = els.slice(i, i + 2);
-        // Collapse a row (or lone trailing card) whose gift slots are all empty
-        // so no space is reserved when the row has no gift.
-        if (
-          collapseEmpty &&
-          pair.every(el => el.hasAttribute("data-pc-gift-empty"))
-        ) {
-          pair.forEach(el =>
-            el.style.setProperty("display", "none", "important")
-          );
-          continue;
-        }
         if (pair.length < 2) break;
         const max = Math.max(
           ...pair.map(el => el.getBoundingClientRect().height)
@@ -240,7 +226,6 @@ function ProductCardPanel({
       }
       equalizePairs("[data-pc-header]");
       equalizePairs("[data-pc-description]");
-      equalizePairs("[data-pc-gift]", true);
     };
 
     const rafId = requestAnimationFrame(equalize);
@@ -257,6 +242,83 @@ function ProductCardPanel({
     };
   }, [twoColumn, isVisible, desktopExpanded, items.length]);
 
+  // Size the gift-reward slot per visual row so the Select plan CTA sits
+  // directly below the gift badge, while staying aligned only with the cards
+  // that sit next to it (same row). Cards are grouped by their on-screen row,
+  // so a giftless row never borrows the gift height of another row in the same
+  // tab: desktop equalizes the single row of cards; two-column mobile equalizes
+  // each pair; a row whose slots are all empty collapses so its CTA sits flush
+  // with the description. When the tab has no gift at all, `hasAnyGift` omits
+  // the slot entirely.
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const root = panelRef.current;
+
+    const reset = () => {
+      if (!root) return;
+      root.querySelectorAll<HTMLElement>("[data-pc-gift]").forEach(el => {
+        el.style.removeProperty("min-height");
+        el.style.removeProperty("display");
+      });
+    };
+
+    const equalizeGiftSlots = () => {
+      if (!root) return;
+      reset();
+      const els = Array.from(
+        root.querySelectorAll<HTMLElement>("[data-pc-gift]")
+      ).filter(el => el.offsetParent !== null);
+      if (els.length === 0) return;
+
+      // Group slots by the top of their owning card so each visual row (the
+      // cards that sit next to each other) is equalized independently.
+      const tolerance = 4;
+      const rows: { top: number; els: HTMLElement[] }[] = [];
+      els.forEach(el => {
+        const card = (el.closest("article") as HTMLElement) || el;
+        const top = card.getBoundingClientRect().top;
+        const row = rows.find(r => Math.abs(r.top - top) <= tolerance);
+        if (row) {
+          row.els.push(el);
+        } else {
+          rows.push({ top, els: [el] });
+        }
+      });
+
+      rows.forEach(({ els: rowEls }) => {
+        // Collapse a row whose slots are all empty so no space is reserved.
+        if (rowEls.every(el => el.hasAttribute("data-pc-gift-empty"))) {
+          rowEls.forEach(el =>
+            el.style.setProperty("display", "none", "important")
+          );
+          return;
+        }
+        const max = Math.max(
+          ...rowEls.map(el => el.getBoundingClientRect().height)
+        );
+        if (max <= 0) return;
+        rowEls.forEach(el =>
+          el.style.setProperty("min-height", `${max}px`, "important")
+        );
+      });
+    };
+
+    equalizeGiftSlots();
+    const rafId = requestAnimationFrame(equalizeGiftSlots);
+    const t1 = setTimeout(equalizeGiftSlots, 150);
+    const t2 = setTimeout(equalizeGiftSlots, 500);
+    window.addEventListener("resize", equalizeGiftSlots);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      clearTimeout(t1);
+      clearTimeout(t2);
+      window.removeEventListener("resize", equalizeGiftSlots);
+      reset();
+    };
+  }, [isVisible, desktopExpanded, items.length]);
+
   if (!items.length && !fields?.title) {
     return null;
   }
@@ -338,6 +400,7 @@ function ProductCardPanel({
           cta={item.cta}
           priceSuffixBottom={item?.priceSuffixBottom}
           hasAnyBadge={hasAnyBadge}
+          hasAnyGift={hasAnyGift}
           twoColumn={twoColumn}
           enableBusinessSettings={enableBusinessSettings}
         />
@@ -345,87 +408,91 @@ function ProductCardPanel({
     );
   };
 
-  return !isCarousel ? (
-    <div
-      ref={mobileGridRef}
-      className={cx(
-        "w-full max-w-[1280px] gap-4",
-        twoColumn
-          ? "grid grid-cols-2 md:flex md:flex-wrap md:justify-center"
-          : "flex flex-wrap justify-center"
-      )}
-    >
-      {items.map((item, index) => renderCard(item, index, twoColumn))}
-    </div>
-  ) : (
-    <>
-      {/* Mobile/Tablet View: Vertical Stack (or two-column grid) */}
-      <div
-        ref={mobileGridRef}
-        className={cx(
-          "md:hidden",
-          twoColumn ? "grid grid-cols-2 gap-4" : "flex flex-col gap-6"
-        )}
-      >
-        {items.map((item, index) => renderCard(item, index, true))}
-      </div>
-
-      {/* Desktop View: Horizontal Carousel */}
-      <div className="relative hidden w-full md:block">
-        {/* Navigation Arrows */}
-        {showArrows && (
-          <div className="pointer-events-none absolute -left-16 -right-16 top-[50%] z-30 flex -translate-y-1/2 justify-between px-4 md:px-10">
-            {currentIndex > 0 ? (
-              <Button
-                onClick={prevSlide}
-                className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
-                aria-label="Previous"
-              >
-                <MaterialIcon name="arrow_back" size={24} />
-              </Button>
-            ) : (
-              <span className="h-12 w-12" aria-hidden="true" />
-            )}
-
-            {currentIndex < maxIndex ? (
-              <Button
-                onClick={nextSlide}
-                className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
-                aria-label="Next"
-              >
-                <MaterialIcon name="arrow_forward" size={24} />
-              </Button>
-            ) : (
-              <span className="h-12 w-12" aria-hidden="true" />
-            )}
-          </div>
-        )}
-
-        {/* Carousel Window */}
+  return (
+    <div ref={panelRef} style={{ display: "contents" }}>
+      {!isCarousel ? (
         <div
-          ref={windowRef}
-          className="mx-auto max-w-[1280px] select-none overflow-hidden"
-          onTouchStart={handleTouchStart}
-          onTouchMove={handleTouchMove}
-          onTouchEnd={handleTouchEnd}
-          onTouchCancel={handleTouchEnd}
+          ref={mobileGridRef}
+          className={cx(
+            "w-full max-w-[1280px] gap-4",
+            twoColumn
+              ? "grid grid-cols-2 md:flex md:flex-wrap md:justify-center"
+              : "flex flex-wrap justify-center"
+          )}
         >
+          {items.map((item, index) => renderCard(item, index, twoColumn))}
+        </div>
+      ) : (
+        <>
+          {/* Mobile/Tablet View: Vertical Stack (or two-column grid) */}
           <div
+            ref={mobileGridRef}
             className={cx(
-              "ml-8 flex items-stretch gap-4 pb-4",
-              isSwiping
-                ? "transition-none"
-                : "transition-transform duration-500 ease-in-out"
+              "md:hidden",
+              twoColumn ? "grid grid-cols-2 gap-4" : "flex flex-col gap-6"
             )}
-            style={{
-              transform: `translateX(calc(-${currentIndex} * (392px + 16px) + ${swipeOffset}px))`,
-            }}
           >
-            {items.map((item, index) => renderCard(item, index, false))}
+            {items.map((item, index) => renderCard(item, index, true))}
           </div>
-        </div>
-      </div>
-    </>
+
+          {/* Desktop View: Horizontal Carousel */}
+          <div className="relative hidden w-full md:block">
+            {/* Navigation Arrows */}
+            {showArrows && (
+              <div className="pointer-events-none absolute -left-16 -right-16 top-[50%] z-30 flex -translate-y-1/2 justify-between px-4 md:px-10">
+                {currentIndex > 0 ? (
+                  <Button
+                    onClick={prevSlide}
+                    className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
+                    aria-label="Previous"
+                  >
+                    <MaterialIcon name="arrow_back" size={24} />
+                  </Button>
+                ) : (
+                  <span className="h-12 w-12" aria-hidden="true" />
+                )}
+
+                {currentIndex < maxIndex ? (
+                  <Button
+                    onClick={nextSlide}
+                    className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-gray-100 bg-white p-2 text-text shadow-cardDrop transition-all hover:bg-gray-50"
+                    aria-label="Next"
+                  >
+                    <MaterialIcon name="arrow_forward" size={24} />
+                  </Button>
+                ) : (
+                  <span className="h-12 w-12" aria-hidden="true" />
+                )}
+              </div>
+            )}
+
+            {/* Carousel Window */}
+            <div
+              ref={windowRef}
+              className="mx-auto max-w-[1280px] select-none overflow-hidden"
+              onTouchStart={handleTouchStart}
+              onTouchMove={handleTouchMove}
+              onTouchEnd={handleTouchEnd}
+              onTouchCancel={handleTouchEnd}
+            >
+              <div
+                className={cx(
+                  "ml-8 flex items-stretch gap-4 pb-4",
+                  isSwiping
+                    ? "transition-none"
+                    : "transition-transform duration-500 ease-in-out"
+                )}
+                style={{
+                  transform: `translateX(calc(-${currentIndex} * (392px + 16px) + ${swipeOffset}px))`,
+                }}
+              >
+                {items.map((item, index) => renderCard(item, index, false))}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
   );
 }
 

package/src/contentful/blocks/ordered-list/index.test.tsx

@@ -0,0 +1,163 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { OrderedList } from "./index";
+
+import { render, screen, within } from "@testing-library/react";
+
+jest.mock("@shared/components/link", () => ({
+  Link: ({ children, href, title, className }: any) => (
+    <a href={href} title={title} className={className} data-testid="ol-link">
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, as: Tag = "span", className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/dynamic-tabs", () => ({
+  DynamicTabs: ({
+    tabs,
+    dynamic,
+    isOrderedList,
+    navigationType,
+    mobileSidebarTabType,
+  }: any) => (
+    <div
+      data-testid="dynamic-tabs"
+      data-dynamic={String(dynamic)}
+      data-ordered={String(isOrderedList)}
+      data-nav={String(navigationType)}
+      data-sidebar={String(mobileSidebarTabType)}
+    >
+      {tabs.items.map((tab: any) => (
+        <div
+          key={tab.anchorId}
+          data-testid="dt-tab"
+          data-tabname={tab.tabName}
+          data-anchor={tab.anchorId}
+        >
+          {tab.tabContent}
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+describe("OrderedList", () => {
+  const tabs = [
+    {
+      items: {
+        tabName: "States",
+        tabContent: [
+          { itemName: "new york", itemSlug: "/new-york" },
+          { itemName: "los angeles" },
+        ],
+      },
+    },
+    {
+      items: {
+        tabName: "Cities",
+        tabContent: [{ itemName: "san FRANCISCO", itemSlug: "/sf" }],
+      },
+    },
+  ];
+
+  const renderComponent = (overrides: Partial<any> = {}) =>
+    render(
+      <OrderedList
+        title="Browse locations"
+        description="Find availability near you"
+        tabs={tabs}
+        {...overrides}
+      />
+    );
+
+  it("renders the title and description", () => {
+    renderComponent();
+    expect(screen.getByText("Browse locations")).toBeInTheDocument();
+    expect(screen.getByText("Find availability near you")).toBeInTheDocument();
+  });
+
+  it("renders the section with the provided anchor id and testid", () => {
+    const { container } = renderComponent({ anchorId: "locations" });
+    const section = container.querySelector(
+      '[data-testid="non-fiber-city-list"]'
+    );
+    expect(section).toBeInTheDocument();
+    expect(section).toHaveAttribute("id", "locations");
+  });
+
+  it("defaults the background to white", () => {
+    const { container } = renderComponent();
+    expect(container.querySelector(".bg-secondary-white")).toBeInTheDocument();
+  });
+
+  it("applies the cream background when requested", () => {
+    const { container } = renderComponent({ backgroundColor: "cream" });
+    expect(container.querySelector(".bg-secondary-cream")).toBeInTheDocument();
+    expect(
+      container.querySelector(".bg-secondary-white")
+    ).not.toBeInTheDocument();
+  });
+
+  it("forwards the expected flags to DynamicTabs", () => {
+    renderComponent();
+    const dynamicTabs = screen.getByTestId("dynamic-tabs");
+    expect(dynamicTabs).toHaveAttribute("data-dynamic", "true");
+    expect(dynamicTabs).toHaveAttribute("data-ordered", "true");
+    expect(dynamicTabs).toHaveAttribute("data-nav", "false");
+    expect(dynamicTabs).toHaveAttribute("data-sidebar", "false");
+  });
+
+  it("maps each tab with its name and a generated anchor id", () => {
+    renderComponent();
+    const dtTabs = screen.getAllByTestId("dt-tab");
+    expect(dtTabs).toHaveLength(2);
+    expect(dtTabs[0]).toHaveAttribute("data-tabname", "States");
+    expect(dtTabs[0]).toHaveAttribute("data-anchor", "tab-0");
+    expect(dtTabs[1]).toHaveAttribute("data-tabname", "Cities");
+    expect(dtTabs[1]).toHaveAttribute("data-anchor", "tab-1");
+  });
+
+  it("title-cases item names regardless of input casing", () => {
+    renderComponent();
+    // "new york" -> "New York", "los angeles" -> "Los Angeles",
+    // "san FRANCISCO" -> "San Francisco"
+    expect(screen.getByText("New York")).toBeInTheDocument();
+    expect(screen.getByText("Los Angeles")).toBeInTheDocument();
+    expect(screen.getByText("San Francisco")).toBeInTheDocument();
+  });
+
+  it("renders a linked item with an uppercased title and href", () => {
+    renderComponent();
+    const link = screen.getByText("New York").closest("a");
+    expect(link).not.toBeNull();
+    expect(link).toHaveAttribute("href", "/new-york");
+    expect(link).toHaveAttribute("title", "NEW YORK");
+  });
+
+  it("renders an item without a slug as plain text (no link)", () => {
+    renderComponent();
+    const losAngeles = screen.getByText("Los Angeles");
+    expect(losAngeles.closest("a")).toBeNull();
+  });
+
+  it("keeps each tab's items within that tab", () => {
+    renderComponent();
+    const dtTabs = screen.getAllByTestId("dt-tab");
+    expect(within(dtTabs[0]).getByText("New York")).toBeInTheDocument();
+    expect(within(dtTabs[0]).getByText("Los Angeles")).toBeInTheDocument();
+    expect(within(dtTabs[1]).getByText("San Francisco")).toBeInTheDocument();
+    expect(within(dtTabs[1]).queryByText("New York")).toBeNull();
+  });
+
+  it("does not render DynamicTabs when there are no tabs", () => {
+    renderComponent({ tabs: [] });
+    expect(screen.queryByTestId("dynamic-tabs")).toBeNull();
+  });
+});

package/src/contentful/blocks/primary-hero/index.tsx

@@ -184,6 +184,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 const checklistEl = (
                   <Checklist
                     iconSize={24}
+                    iconPosition="top"
                     listItemClassName={`body2 text-left ${textColorClass}`}
                     items={checklist.map(item =>
                       item.iconUrl