@windstream/react-shared-components 0.2.63 → 0.2.64

package/src/contentful/blocks/cards/product-card/index.tsx

@@ -46,6 +46,8 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   techType,
   ismaxSpeed,
   priceSuffixBottom,
+  hasAnyBadge = false,
+  twoColumn = false,
 }) => {
   const [internalExpanded, setInternalExpanded] = useState(false);
   // Use parent state if provided, otherwise use internal state
@@ -62,19 +64,31 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 
   const isDark = theme === "dark";
 
+  // Two-column mobile cards use smaller type below `md` and step up to the
+  // standard sizes from `md` up (matches production residential). One-column
+  // stacks keep the standard sizes at every breakpoint.
+  const planNameClass = twoColumn ? "label3 md:subheading2" : "subheading2";
+  const priceIntegerClass = twoColumn
+    ? "heading2 md:subheading6"
+    : "subheading6";
+  const priceUnitClass = twoColumn ? "label3 md:label2" : "label2";
+
   return (
-    <article
-      className={cx(
-        "relative flex h-full w-full max-w-[392px] flex-col",
-        !bestValue && "md:pt-[38px]"
-      )}
-    >
-      {/* Best Value Banner */}
-      {bestValue && (
+    <article className="relative flex h-full w-full max-w-[392px] flex-col">
+      {/* Best Value Banner. Non-best cards render an invisible banner of the
+          same height when a sibling has one, so content stays aligned. */}
+      {bestValue ? (
         <div className="label3 rounded-t-[20px] bg-bg-fill-brand-accent px-6 py-2 text-center text-text">
           {bestValueText}
         </div>
-      )}
+      ) : hasAnyBadge ? (
+        <div
+          aria-hidden="true"
+          className="label3 invisible px-6 py-2 text-center"
+        >
+          {"\u00A0"}
+        </div>
+      ) : null}
 
       {/* Main Card */}
       <div
@@ -87,12 +101,16 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         )}
       >
         {/* Plan Name & Price */}
-        <header className="overflow-none flex items-start justify-between gap-4">
-          <div className="flex flex-col">
+        <header
+          data-pc-header
+          className="overflow-none flex flex-wrap items-start justify-between gap-2 md:gap-4"
+        >
+          <div className="flex w-full flex-col md:w-auto">
             <Text
               as="h3"
               className={cx(
-                "subheading2 lowercase",
+                planNameClass,
+                "whitespace-normal lowercase",
                 isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
               )}
             >
@@ -102,18 +120,19 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               as="p"
               className={cx(
                 "label3 text-wrap lowercase",
-                isDark ? "text-text-inverse" : "text-text"
+                isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
               )}
             >
               {planSubtext}
             </Text>
           </div>
-          <div className="flex flex-col items-end">
+          <div className="flex flex-col items-start md:items-end">
             <div className="flex items-start">
               <Text
                 as="span"
                 className={cx(
-                  "label2 mr-1 mt-[2px]",
+                  priceUnitClass,
+                  "mr-1 mt-[2px]",
                   isDark ? "text-text-inverse" : "text-text"
                 )}
               >
@@ -122,7 +141,8 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               <Text
                 as="span"
                 className={cx(
-                  "subheading6",
+                  priceIntegerClass,
+                  "leading-none",
                   isDark ? "text-text-inverse" : "text-text"
                 )}
               >
@@ -131,7 +151,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               <Text
                 as="span"
                 className={cx(
-                  "label2",
+                  priceUnitClass,
                   isDark ? "text-text-inverse" : "text-text"
                 )}
               >
@@ -153,10 +173,10 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         </header>
 
         {/* Description */}
-        <section>
+        <section data-pc-description>
           <Text
             className={cx(
-              "body2 h-[56px]",
+              "footnote md:body2 md:h-[56px]",
               isDark ? "text-text-inverse" : "text-text"
             )}
           >
@@ -166,7 +186,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
 
         {/* Gift Badge */}
         {giftBadge?.length ? (
-          <div className="min-h-[76px]">
+          <div data-pc-gift className="min-h-[76px]">
             <div
               className={cx(
                 "flex-col items-center rounded-surface-sm p-2",
@@ -197,7 +217,12 @@ export const ProductCard: React.FC<ProductCardProps> = ({
             </div>
           </div>
         ) : (
-          <div className="invisible min-h-[76px] p-2" aria-hidden="true">
+          <div
+            data-pc-gift
+            data-pc-gift-empty
+            className="invisible min-h-[76px] p-2"
+            aria-hidden="true"
+          >
             <Text
               as="div"
               className={cx(
@@ -222,6 +247,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
             iconSize={40}
             techType={techType}
             isMax={ismaxSpeed}
+            twoColumn={twoColumn}
           />
           {/* Features */}
           {features.length > 0 && (
@@ -268,12 +294,12 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                   />
                 </div>
                 {innerBadge?.badgeIcon ? (
-                  <div className="mt-3 flex items-center gap-2 text-center">
+                  <div className="mt-3 flex items-center gap-2 text-left">
                     <Image
                       src={innerBadge.badgeIcon}
                       alt="Inner Badge"
-                      width={12}
-                      height={12}
+                      width={24}
+                      height={24}
                     />
                     <span
                       className={cx(

package/src/contentful/blocks/cards/product-card/types.ts

@@ -25,4 +25,11 @@ export interface ProductCardProps {
   cta?: ButtonProps;
   onCtaClick: () => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+  /** True when any card in the set has a best-value badge, so non-badge cards
+   *  reserve the banner height and stay vertically aligned. */
+  hasAnyBadge?: boolean;
+  /** True when the card renders in the two-column mobile layout, which uses the
+   *  compact mobile typography below `md`. One-column stacks keep the standard
+   *  sizes at every breakpoint. */
+  twoColumn?: boolean;
 }

package/src/contentful/blocks/carousel/Carousel.stories.tsx

@@ -27,7 +27,11 @@ const sampleProduct = (
   id: string,
   planName: string,
   price: string,
-  highlighted = false
+  highlighted = false,
+  productCardDescription = "Reliable internet for your home.",
+  giftRewards: { list: { items: Array<{ title: string; icon: string }> } } = {
+    list: { items: [] },
+  }
 ) => ({
   __typename: "ComponentProductCard" as const,
   sys: { id },
@@ -36,14 +40,14 @@ const sampleProduct = (
   priceSuffix: "99/mo",
   techType: "Fiber",
   highlighted,
-  productCardDescription: "Reliable internet for your home.",
+  productCardDescription,
   benefitsTitle: "Plan benefits",
   benefitsExpanded: false,
   cta: { buttonLabel: "Select plan" },
   benefits: {
-    items: [{ text: "No data caps" }, { text: "Free installation" }],
+    items: [{ title: "No data caps" }, { title: "Free installation" }],
   },
-  giftRewards: { list: { items: [] } },
+  giftRewards,
 });
 
 const twoColumnFields: carouselFieldsInterface = {
@@ -55,10 +59,32 @@ const twoColumnFields: carouselFieldsInterface = {
   backgroundColor: "white",
   items: {
     items: [
-      sampleProduct("plan-1", "300 Mbps", "49"),
-      sampleProduct("plan-2", "600 Mbps", "59", true),
-      sampleProduct("plan-3", "1 Gig", "69"),
-      sampleProduct("plan-4", "2 Gig", "89"),
+      sampleProduct(
+        "plan-1",
+        "300 Mbps",
+        "49",
+        false,
+        "Reliable support for essentials like email, browsing, and video chat."
+      ),
+      sampleProduct(
+        "plan-2",
+        "600 Mbps",
+        "59",
+        true,
+        "Ultra-fast speeds for large smart homes.",
+        {
+          list: {
+            items: [
+              {
+                title: "$100 prepaid Mastercard®",
+                icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect width='24' height='24' rx='4' fill='%23ffd200'/%3E%3C/svg%3E",
+              },
+            ],
+          },
+        }
+      ),
+      sampleProduct("plan-3", "1 Gig", "69", false, "Good for most day-to-day internet uses including streaming video."),
+      sampleProduct("plan-4", "2 Gig", "89", false, "Worry-free internet for the whole home."),
     ],
   },
 };

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

@@ -152,37 +152,63 @@ describe("ProductCardCarousel", () => {
   });
 
   it("renders carousel layout for more than 2 items", () => {
-    const items = Array.from({ length: 4 }, (_, i) => ({
+    const items = Array.from({ length: 3 }, (_, i) => ({
       ...sampleProduct,
       sys: { id: `prod-${i}` },
     }));
     const fields = createProductFields(items);
     const { container } = render(<ProductCardCarousel fields={fields} />);
-    // Should have mobile stack view (flex-col for md:hidden)
+    // 3 cards stay a vertical stack on mobile (flex-col for md:hidden)
     expect(container.querySelector(".flex-col")).toBeInTheDocument();
   });
 
-  it("renders a two-column grid on mobile in carousel mode when twoColumn is set", () => {
+  it("renders a two-column grid on mobile when more than 3 cards", () => {
     const items = Array.from({ length: 4 }, (_, i) => ({
       ...sampleProduct,
       sys: { id: `prod-${i}` },
     }));
     const fields = createProductFields(items);
-    fields.twoColumn = true;
     const { container } = render(<ProductCardCarousel fields={fields} />);
     // Mobile view uses a two-column grid instead of a vertical stack
     expect(container.querySelector(".grid.grid-cols-2")).toBeInTheDocument();
     expect(container.querySelector(".flex-col")).not.toBeInTheDocument();
   });
 
-  it("renders a two-column grid on mobile in non-carousel mode when twoColumn is set", () => {
-    const fields = createProductFields([
-      sampleProduct,
-      { ...sampleProduct, sys: { id: "prod-2" } },
-    ]);
-    fields.twoColumn = true;
+  it("does not render a two-column grid on mobile for 3 or fewer cards", () => {
+    const items = Array.from({ length: 3 }, (_, i) => ({
+      ...sampleProduct,
+      sys: { id: `prod-${i}` },
+    }));
+    const fields = createProductFields(items);
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    expect(
+      container.querySelector(".grid.grid-cols-2")
+    ).not.toBeInTheDocument();
+    expect(container.querySelector(".flex-col")).toBeInTheDocument();
+  });
+
+  it("forces a two-column grid on mobile when the CMS twoColumn flag is set, even with 3 or fewer cards", () => {
+    const items = Array.from({ length: 3 }, (_, i) => ({
+      ...sampleProduct,
+      sys: { id: `prod-${i}` },
+    }));
+    const fields = { ...createProductFields(items), twoColumn: true };
     const { container } = render(<ProductCardCarousel fields={fields} />);
     expect(container.querySelector(".grid.grid-cols-2")).toBeInTheDocument();
+    expect(container.querySelector(".flex-col")).not.toBeInTheDocument();
+  });
+
+  it("keeps a vertical stack when the CMS twoColumn flag is explicitly false", () => {
+    const items = Array.from({ length: 4 }, (_, i) => ({
+      ...sampleProduct,
+      sys: { id: `prod-${i}` },
+    }));
+    const fields = { ...createProductFields(items), twoColumn: false };
+    const { container } = render(<ProductCardCarousel fields={fields} />);
+    expect(
+      container.querySelector(".grid.grid-cols-2")
+    ).not.toBeInTheDocument();
+    expect(container.querySelector(".flex-col")).toBeInTheDocument();
   });
 
   it("parses speed field correctly (planName | planSubtext)", () => {
@@ -433,6 +459,97 @@ describe("ProductCardCarousel", () => {
     const visibleTab = container.querySelector("[style*='display: block']");
     expect(visibleTab).toBeInTheDocument();
   });
+
+  describe("desktop card height equalization", () => {
+    const getDesktopCards = (container: HTMLElement) =>
+      Array.from(container.querySelectorAll<HTMLElement>(".flex-shrink-0"));
+
+    const makeItems = (speeds: string[]) =>
+      speeds.map((speed, index) => ({
+        ...sampleProduct,
+        sys: { id: `prod-${index}` },
+        speed,
+      }));
+
+    // Drive offsetHeight off each card's plan name so cards can report
+    // differing natural heights. jsdom otherwise reports every element as 0.
+    const mockCardHeights = (heights: Record<string, number>) => {
+      Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+        configurable: true,
+        get() {
+          if (
+            typeof this.className === "string" &&
+            this.className.includes("flex-shrink-0")
+          ) {
+            const label = Object.keys(heights).find(key =>
+              (this.textContent || "").includes(key)
+            );
+            return label ? heights[label] : 0;
+          }
+          return 0;
+        },
+      });
+    };
+
+    afterEach(() => {
+      Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+        configurable: true,
+        get: () => 0,
+      });
+    });
+
+    it("sets every desktop card to the tallest card's height", () => {
+      mockCardHeights({ "100 Mbps": 100, "200 Mbps": 200, "300 Mbps": 150 });
+      const fields = createProductFields(
+        makeItems(["100 Mbps", "200 Mbps", "300 Mbps"])
+      );
+      const { container } = render(<ProductCardCarousel fields={fields} />);
+
+      const cards = getDesktopCards(container);
+      expect(cards).toHaveLength(3);
+      cards.forEach(card => expect(card.style.height).toBe("200px"));
+    });
+
+    it("recalculates heights when the window is resized", () => {
+      const heights: Record<string, number> = {
+        "100 Mbps": 100,
+        "200 Mbps": 200,
+        "300 Mbps": 150,
+      };
+      mockCardHeights(heights);
+      const fields = createProductFields(
+        makeItems(["100 Mbps", "200 Mbps", "300 Mbps"])
+      );
+      const { container } = render(<ProductCardCarousel fields={fields} />);
+
+      getDesktopCards(container).forEach(card =>
+        expect(card.style.height).toBe("200px")
+      );
+
+      // A card grows taller (e.g. late-loading content); resize should
+      // re-equalize every card to the new maximum.
+      heights["300 Mbps"] = 300;
+      fireEvent(window, new Event("resize"));
+
+      getDesktopCards(container).forEach(card =>
+        expect(card.style.height).toBe("300px")
+      );
+    });
+
+    it("removes the resize listener on unmount", () => {
+      mockCardHeights({ "100 Mbps": 100, "200 Mbps": 200, "300 Mbps": 150 });
+      const removeSpy = jest.spyOn(window, "removeEventListener");
+      const fields = createProductFields(
+        makeItems(["100 Mbps", "200 Mbps", "300 Mbps"])
+      );
+      const { unmount } = render(<ProductCardCarousel fields={fields} />);
+
+      unmount();
+
+      expect(removeSpy).toHaveBeenCalledWith("resize", expect.any(Function));
+      removeSpy.mockRestore();
+    });
+  });
 });
 
 describe("TestimonialCarousel", () => {

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

@@ -25,19 +25,23 @@ function ProductCardPanel({
 }) {
   const itemsExpanded = fields?.items?.items?.[0]?.benefitsExpanded || false;
   const [desktopExpanded, setDesktopExpanded] = useState(itemsExpanded);
-  const [mobileExpandedStates, setMobileExpandedStates] = useState<
-    Record<number, boolean>
-  >({});
   const [currentIndex, setCurrentIndex] = useState(0);
   const [maxIndex, setMaxIndex] = useState(0);
   const [swipeOffset, setSwipeOffset] = useState(0);
   const [isSwiping, setIsSwiping] = useState(false);
   const items = fields?.items?.items || [];
-  const twoColumn = fields?.twoColumn || false;
+  // Prefer the CMS-provided `twoColumn` layout flag.
+  // When unset, fall back to the count heuristic: two-column once there are
+  // more than 3 cards; 3 or fewer stack vertically.
+  const twoColumn = fields?.twoColumn ?? items.length > 3;
   const isCarousel = items.length > 2;
+  // 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 showArrows = fields?.showArrows !== false && isCarousel;
   const cardsRef = useRef<(HTMLDivElement | null)[]>([]);
   const windowRef = useRef<HTMLDivElement | null>(null);
+  const mobileGridRef = useRef<HTMLDivElement | null>(null);
   const touchStartX = useRef<number>(0);
 
   // Determine how many cards fit so we never scroll past the last card
@@ -121,7 +125,9 @@ function ProductCardPanel({
     setSwipeOffset(0);
   }, [isSwiping, swipeOffset, prevSlide, nextSlide]);
 
-  // Equalize card heights
+  // Equalize card heights. Re-runs whenever the panel becomes visible so a tab
+  // that was rendered while hidden (display:none) gets its heights recalculated
+  // once it is shown. Residential (single panel, always visible) is unaffected.
   useEffect(() => {
     if (!isCarousel || !isVisible) return;
 
@@ -129,7 +135,7 @@ function ProductCardPanel({
       const cards = cardsRef.current.filter(Boolean) as HTMLDivElement[];
       if (cards.length === 0) return;
 
-      // Reset heights first
+      // Reset heights first so each card reports its natural height
       cards.forEach(card => {
         card.style.height = "auto";
       });
@@ -137,21 +143,112 @@ function ProductCardPanel({
       // Find the tallest card
       const maxHeight = Math.max(...cards.map(card => card.offsetHeight));
 
+      if (maxHeight <= 0) return;
       // Set all cards to the max height
       cards.forEach(card => {
         card.style.height = `${maxHeight}px`;
       });
     };
 
-    // Run on mount and when expanded state changes
+    // Run immediately for content changes while already visible.
     equalizeHeights();
 
-    // Re-run after a short delay due to dynamic content
+    const rafId = requestAnimationFrame(equalizeHeights);
+
+    // Re-run after a short delay to account for late-loading content (fonts/images)
     const timeoutId = setTimeout(equalizeHeights, 100);
 
-    return () => clearTimeout(timeoutId);
+    window.addEventListener("resize", equalizeHeights);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      clearTimeout(timeoutId);
+      window.removeEventListener("resize", equalizeHeights);
+    };
   }, [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
+  // 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 clear = () => {
+      const grid = mobileGridRef.current;
+      if (!grid) return;
+      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 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");
+      });
+      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)
+        );
+        pair.forEach(el =>
+          el.style.setProperty("min-height", `${max}px`, "important")
+        );
+      }
+    };
+
+    const equalize = () => {
+      // Only the two-column mobile breakpoint needs JS equalization.
+      if (!window.matchMedia("(max-width: 767px)").matches) {
+        clear();
+        return;
+      }
+      equalizePairs("[data-pc-header]");
+      equalizePairs("[data-pc-description]");
+      equalizePairs("[data-pc-gift]", true);
+    };
+
+    const rafId = requestAnimationFrame(equalize);
+    const t1 = setTimeout(equalize, 150);
+    const t2 = setTimeout(equalize, 500);
+    window.addEventListener("resize", equalize);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      clearTimeout(t1);
+      clearTimeout(t2);
+      window.removeEventListener("resize", equalize);
+      clear();
+    };
+  }, [twoColumn, isVisible, desktopExpanded, items.length]);
+
   if (!items.length && !fields?.title) {
     return null;
   }
@@ -174,20 +271,12 @@ function ProductCardPanel({
       badgeIcon: item.innerBadgeIcon?.url || "",
     };
 
-    // Mobile: individual card state, Desktop: shared state
-    const isExpanded = isMobileView
-      ? mobileExpandedStates[globalIndex] || false
-      : desktopExpanded;
+    // Shared expand state so toggling "More details" on one card opens the
+    // section on the adjacent cards too (matches the residential behavior).
+    const isExpanded = desktopExpanded;
 
     const handleToggle = () => {
-      if (isMobileView) {
-        setMobileExpandedStates(prev => ({
-          ...prev,
-          [globalIndex]: !prev[globalIndex],
-        }));
-      } else {
-        setDesktopExpanded(!desktopExpanded);
-      }
+      setDesktopExpanded(prev => !prev);
     };
 
     const handleCtaClick = () => {
@@ -234,6 +323,8 @@ function ProductCardPanel({
           renderCheckPlans={renderCheckPlans}
           cta={item.cta}
           priceSuffixBottom={item?.priceSuffixBottom}
+          hasAnyBadge={hasAnyBadge}
+          twoColumn={twoColumn}
         />
       </div>
     );
@@ -241,6 +332,7 @@ function ProductCardPanel({
 
   return !isCarousel ? (
     <div
+      ref={mobileGridRef}
       className={cx(
         "w-full max-w-[1280px] gap-4",
         twoColumn
@@ -254,6 +346,7 @@ function ProductCardPanel({
     <>
       {/* 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"