@windstream/react-shared-components 0.2.62 → 0.2.64

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"

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -164,7 +164,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               </div>
             )}
           </div>
-          <aside className="flex w-full flex-1 shrink-0 items-center justify-center lg:w-auto">
+          <div className="flex w-full flex-1 shrink-0 items-center justify-center lg:w-auto">
             {/* Media Section: only when no Video Link is attached at all */}
             {image && !hasVideoLink && (
               <div
@@ -203,7 +203,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               isAboveTheFold={isAboveTheFold}
               onVideoEvent={onVideoEvent}
             />
-          </aside>
+          </div>
         </div>
       </div>
 

package/src/hooks/contentful/use-contentful-rich-text.test.tsx

@@ -276,6 +276,18 @@ describe("renderContentfulRichText", () => {
       const a = container.querySelector("a")!;
       expect(a).toHaveClass("custom-link");
     });
+
+    it("uses a separate class for links inside list items", () => {
+      const list = makeList(false, ["List link"]);
+      list.content[0].content = [makeHyperlink("/list-link", "List link")];
+      const doc = makeDoc(makeHyperlink("/paragraph-link", "Paragraph link"), list);
+
+      const { container } = render(<>{renderContentfulRichText(doc)}</>);
+      const links = container.querySelectorAll("a");
+
+      expect(links[0]).toHaveClass("body1", "font-bold");
+      expect(links[1]).toHaveClass("body2");
+    });
   });
 
   describe("Custom options merge", () => {

package/src/hooks/contentful/use-contentful-rich-text.tsx

@@ -267,10 +267,23 @@ export function renderContentfulRichText(
   className: string = "body1",
   linkClassName: string = "body1 font-bold",
   options?: Options,
-  links?: any
+  links?: any,
+  listLinkClassName: string = "body2"
 ): ReactNode | null {
   if (!doc || !Array.isArray(doc.content)) return null;
 
+  const listItemHyperlinks = new WeakSet<object>();
+  const collectListItemHyperlinks = (node: any, isInListItem = false) => {
+    const isListItem = isInListItem || node?.nodeType === BLOCKS.LIST_ITEM;
+    if (isListItem && node?.nodeType === INLINES.HYPERLINK) {
+      listItemHyperlinks.add(node);
+    }
+    node?.content?.forEach((child: any) =>
+      collectListItemHyperlinks(child, isListItem)
+    );
+  };
+  collectListItemHyperlinks(doc);
+
   const defaultOptions = getDefaultOptions(links);
   const merged: Options = {
     ...defaultOptions,
@@ -301,7 +314,9 @@ export function renderContentfulRichText(
             target={shouldOpenBlank ? "_blank" : undefined}
             rel={shouldOpenBlank ? "noopener" : undefined}
             variant="default"
-            className={linkClassName}
+            className={
+              listItemHyperlinks.has(node) ? listLinkClassName : linkClassName
+            }
           >
             {children}
           </Link>