@windstream/react-shared-components 0.2.62 → 0.2.64

package/package.json

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

package/src/components/select-plan-button/index.tsx

@@ -15,6 +15,7 @@ export const SelectPlanButton: React.FC<SelectPlanButtonProps> = ({
   cta,
   techType,
   isMax,
+  twoColumn = false,
 }) => {
   const [open, setOpen] = useState(false);
   const className = `btn-medium rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top ${isSelected ? " bg-bg-surface text-text focus:ring-bg-fill-surface-inverse" : "  bg-bg-fill-brand text-text-brand-on-bg-fill enabled:hover:bg-bg-fill-brand-hover focus:ring-bg-fill-brand"} `;
@@ -39,15 +40,18 @@ export const SelectPlanButton: React.FC<SelectPlanButtonProps> = ({
     <>
       <Button
         onClick={handleSelect}
-        className={cx(className, `w-full justify-between pl-5 pr-5`)}
+        className={cx(className, "w-full justify-between px-3 md:px-5")}
         data-track-element-name="speed_plan_select_button"
         data-track-click-text={`Select plan speed ${speed}`}
         data-track-element-clicked="speed_plan_card"
       >
-        <span>Select plan</span>
+        <span className={twoColumn ? "label3 md:label1" : "label1"}>
+          Select plan
+        </span>
         <MaterialIcon
           className={cx(
             iconClassName,
+            "!text-[24px] md:!text-[40px]",
             isSelected ? "text-icon" : "text-icon-inverse"
           )}
           name="expand_circle_right"

package/src/components/select-plan-button/types.ts

@@ -11,6 +11,7 @@ export type SelectPlanButtonProps = {
   isMax?: boolean;
   iconSize?: Size;
   isSelected?: boolean;
+  twoColumn?: boolean;
   iconClassName?: string;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   cta?: ButtonProps;

package/src/components/video-link/vimeo-embed.tsx

@@ -5,18 +5,27 @@ import Player from "@vimeo/player";
 import { cx } from "@shared/utils/cx";
 
 const extractVimeoIdandHash = (href: string) => {
-  // Strip query parameters and fragments
-  const cleanHref = href.split(/[?#]/)[0].replace(/\/+$/, "");
-  const match =
-    cleanHref.match(/vimeo\.com\/(?:.*\/)?(\d{6,})/) ||
-    cleanHref.match(/player\.vimeo\.com\/video\/(\d{6,})/);
+  // Strip query parameters and fragments without a backtracking-prone regex
+  let cleanHref = href.split(/[?#]/)[0];
+  while (cleanHref.endsWith("/")) cleanHref = cleanHref.slice(0, -1);
 
-  const parts = cleanHref.split("/");
-  const hash = parts[parts.length - 1];
+  const parts = cleanHref.split("/").filter(Boolean);
+
+  // Locate the vimeo domain segment (vimeo.com or player.vimeo.com) manually
+  // instead of a backtracking regex like `(?:.*\/)?(\d{6,})`
+  const domainIndex = parts.findIndex(
+    part => part === "vimeo.com" || part === "player.vimeo.com"
+  );
+  if (domainIndex === -1) return "";
 
-  if (!match?.[1]) return "";
-  if (match[1] === hash) return match[1];
-  return `${match[1]}/${hash}`;
+  const id = parts.find(
+    (part, i) => i > domainIndex && /^\d{6,}$/.test(part)
+  );
+  if (!id) return "";
+
+  const hash = parts[parts.length - 1];
+  if (id === hash) return id;
+  return `${id}/${hash}`;
 };
 
 export const getVimeoEmbedId = (link?: string): string => {

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", () => {