@windstream/react-shared-components 0.2.22 → 0.2.24

package/src/contentful/blocks/callout/Callout.stories.tsx

@@ -1,23 +1,336 @@
 import { Callout } from "./index";
+import type { CalloutProps } from "./types";
+import {
+  blogItems,
+  defaultCalloutArgs,
+  defaultSimpleItems,
+  floatingImageItems,
+  fourColumnItems,
+  fullImageItems,
+  withFloatingImageArgs,
+} from "./Callout.stories.mocks";
 
 import { DocsPage } from "@shared/stories/DocsTemplate";
 import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+/*
+ * Tailwind safelist — classes referenced here are included in the CSS bundle
+ * so they work when entered dynamically via Storybook controls.
+ * border-2 border-red-500 border-blue-500 border-green-500
+ * rounded-3xl p-8 bg-gray-100
+ */
+
+/* Controls */
+
+const controls: Record<string, any> = {
+  title: { control: "text" },
+  subtitle: { control: "text" },
+  description: { control: "text" },
+  enableHeading: { control: "boolean" },
+  applyBoxShadow: { control: "boolean" },
+  cardStackingMobile: { control: "boolean" },
+  items: { control: "object" },
+  cta: { control: "object" },
+  finePrint: { control: "text" },
+  color: {
+    control: "select",
+    options: ["dark", "light"],
+  },
+  cardsWidth: { control: "boolean" },
+  maxCardsPerRow: { control: { type: "number", min: 1, max: 6 } },
+  noGutter: { control: "boolean" },
+  maxWidth: { control: "boolean" },
+  cardType: {
+    control: "select",
+    options: ["simple", "blog", "fullImage", "floatingImage"],
+    description:
+      "Default card type. Each type expects a different item data shape — use the dedicated card type stories (SimpleCards, BlogCards, etc.) to preview each variant with correct mock data.",
+  },
+  backgroundColor: {
+    control: "select",
+    options: [
+      "cream500",
+      "gray100",
+      "white",
+      "transparent",
+      "blue",
+      "green",
+      "navy",
+      "purple",
+      "yellow",
+    ],
+  },
+  background: { control: "text" },
+  textColor: { control: "text" },
+  disableAnimation: { control: "boolean" },
+  animationType: {
+    control: "select",
+    options: ["scale", "shadow", "lift", "opacity", "grow", "pop"],
+  },
+  anchorId: { table: { disable: true } },
+  containerClassName: { control: "text" },
+  innerClassName: { control: "text" },
+};
+
+/* --------
+   Decorator: maps backgroundColor prop values to correct
+   CSS variable colors via inline style. Applied in Storybook
+   only — index.tsx remains untouched.
+----------- */
+
+const bgColorVarMap: Record<string, string> = {
+  blue: "var(--color-bg-fill-brand-supporting)",
+  green: "var(--color-bg-fill-brand)",
+  navy: "var(--color-bg-fill-inverse)",
+  purple: "var(--color-bg-fill-brand-tertiary)",
+  gray100: "var(--color-bg-fill-info)",
+};
+
+const navyTextOverride = `
+  .navy-callout-override .text-text,
+  .navy-callout-override .decoration-text,
+  .navy-callout-override .text-link,
+  .navy-callout-override .heading2,
+  .navy-callout-override .heading1,
+  .navy-callout-override .subheading1,
+  .navy-callout-override .subheading3,
+  .navy-callout-override .body1,
+  .navy-callout-override .heading6,
+  .navy-callout-override .label1,
+  .navy-callout-override .footnote {
+    color: white !important;
+    text-decoration-color: white !important;
+  }
+`;
+
+/**
+ * Transforms item image fields based on cardType, mimicking the martech
+ * `toLocalImageAsset` conversion. Converts string images to the
+ * { href, title, width, height } format that fullImage/floatingImage expect.
+ */
+const normalizeItemsForCardType = (
+  items: CalloutProps["items"],
+  cardType: string
+): CalloutProps["items"] => {
+  if (cardType !== "fullImage" && cardType !== "floatingImage") return items;
+  return items.map((item) => {
+    const img = (item as any).image;
+    if (typeof img === "string") {
+      return {
+        ...item,
+        image: {
+          href: img,
+          title: (item as any).imageAlt ?? (item as any).title ?? "",
+          width: (item as any).imageWidth ?? 400,
+          height: (item as any).imageHeight ?? 300,
+        },
+      };
+    }
+    return item;
+  });
+};
+
+/* --------
+   Meta
+----------- */
 
 const meta: Meta<typeof Callout> = {
   title: "Contentful Blocks/Callout",
   component: Callout,
   tags: ["autodocs"],
+  argTypes: controls,
   parameters: {
     layout: "centered",
     docs: {
       page: DocsPage,
       description: {
-        component: "Contentful callout block.",
+        component:
+          "Flexible card grid/stack section with multiple card types (simple, blog, full-image, floating-image), configurable backgrounds, column layouts, and animation support.",
       },
     },
   },
-  args: {},
+  decorators: [
+    (Story, context) => {
+      const bg = context.args.backgroundColor as string;
+      const cardType = context.args.cardType as string;
+      const isNavy = bg === "navy" || context.args.background === bgColorVarMap.navy;
+      const cssVar = bgColorVarMap[bg];
+
+      const transformedItems = normalizeItemsForCardType(
+        context.args.items as CalloutProps["items"],
+        cardType
+      );
+
+      const newArgs: Record<string, unknown> = { ...context.args };
+      const userBackground = context.args.background as string;
+      if (cssVar && !userBackground) {
+        newArgs.backgroundColor = undefined;
+        newArgs.background = cssVar;
+      }
+      if (transformedItems !== context.args.items) {
+        newArgs.items = transformedItems;
+      }
+
+      const hasOverrides = (cssVar && !userBackground) || transformedItems !== context.args.items;
+
+      return (
+        <>
+          <style>{navyTextOverride}</style>
+          <div className={isNavy ? "navy-callout-override" : undefined}>
+            {hasOverrides ? <Story args={newArgs} /> : <Story />}
+          </div>
+        </>
+      );
+    },
+  ],
+  args: {
+    ...defaultCalloutArgs,
+    items: defaultSimpleItems,
+  } as CalloutProps,
 };
+
 export default meta;
 type Story = StoryObj<typeof meta>;
+
+/* Stories */
+
 export const Default: Story = {};
+
+export const SimpleCards: Story = {
+  args: {
+    title: "Simple Card Variant",
+    subtitle: "Basic cards with title and description",
+    items: defaultSimpleItems,
+    cardType: "simple",
+  },
+};
+
+export const BlogCards: Story = {
+  args: {
+    title: "Blog Card Variant",
+    subtitle: "Stay informed with our blog",
+    items: blogItems,
+    cardType: "blog",
+  },
+};
+
+export const FullImageCards: Story = {
+  args: {
+    title: "Full Image Card Variant",
+    subtitle: "Cards with full-bleed imagery",
+    items: fullImageItems,
+    cardType: "fullImage",
+  },
+};
+
+export const FloatingImageCards: Story = {
+  args: {
+    ...withFloatingImageArgs,
+  },
+};
+
+
+export const BackgroundWhite: Story = {
+  args: {
+    title: "White Background",
+    items: defaultSimpleItems,
+    backgroundColor: "white",
+  },
+};
+
+export const BackgroundNavy: Story = {
+  args: {
+    title: "Navy Background",
+    subtitle: "Dark theme with light text",
+    items: defaultSimpleItems,
+    background: bgColorVarMap.navy,
+    color: "light",
+    textColor: "#ffffff",
+  },
+};
+
+export const BackgroundGreen: Story = {
+  args: {
+    title: "Green Background",
+    items: defaultSimpleItems,
+    background: bgColorVarMap.green,
+    color: "light",
+  },
+};
+
+export const BackgroundBlue: Story = {
+  args: {
+    title: "Blue Background",
+    items: defaultSimpleItems,
+    background: bgColorVarMap.blue,
+    color: "light",
+  },
+};
+
+export const BackgroundPurple: Story = {
+  args: {
+    title: "Purple Background",
+    items: defaultSimpleItems,
+    background: bgColorVarMap.purple,
+    color: "light",
+  },
+};
+
+export const BackgroundYellow: Story = {
+  args: {
+    title: "Yellow Background",
+    items: defaultSimpleItems,
+    backgroundColor: "yellow",
+  },
+};
+
+export const BackgroundTransparent: Story = {
+  args: {
+    title: "Transparent Background",
+    items: defaultSimpleItems,
+    backgroundColor: "transparent",
+  },
+};
+
+export const StackLayout: Story = {
+  args: {
+    title: "Stacked Layout",
+    items: defaultSimpleItems,
+    cardsWidth: false,
+  },
+};
+
+export const WithCta: Story = {
+  args: {
+    title: "Ready to Get Started?",
+    subtitle: "Pick the plan that works for you",
+    items: defaultSimpleItems,
+    cta: {
+      buttonLabel: "View All Plans",
+      href: "/plans",
+      showButtonAs: "solid",
+      buttonVariant: "primary_brand",
+    },
+    finePrint: "* Terms and conditions apply. Prices subject to change.",
+  },
+};
+
+export const WithAnimation: Story = {
+  args: {
+    title: "Animated Cards",
+    subtitle: "Hover over the cards to see the grow animation",
+    items: defaultSimpleItems,
+    disableAnimation: false,
+    animationType: "grow",
+  },
+};
+
+export const CustomColumns: Story = {
+  args: {
+    title: "Custom 4-Column Layout",
+    items: fourColumnItems,
+    maxCardsPerRow: 4,
+    applyBoxShadow: true,
+  },
+};

package/src/contentful/blocks/callout/types.ts

@@ -30,8 +30,7 @@ export type CalloutProps = {
   finePrint?: ReactNode;
   cta?: CalloutCtaProps;
   applyBoxShadow?: boolean;
-  cardStackingMobile?: boolean;
-  bottomText?: string;
+  cardStackingMobile?: boolean;  
   color?: "dark" | "light";
   /**
    * When `true` (default) cards are laid out in a responsive Tailwind

package/src/contentful/blocks/email-input-block/index.tsx

@@ -4,6 +4,25 @@ import React, { useState } from "react";
 import { Button } from "../button";
 import { EmailInputBlockProps } from "./types";
 
+const LogoCream = ({ fill = "#FFFEEF" }: { fill?: string }) => {
+   const clipPathId = `logo-cream-clip-${React.useId()}`;
+   return (
+     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 100 99" preserveAspectRatio="xMidYMid meet">
+       <g fill={fill} clipPath={`url(#${clipPathId})`}>
+         <path d="M23.877 73.439c2.829 9.044 7.288 13.706 25.03 18.07 16.735 4.111 43.31 12.356 48.798 3.65 3.454-5.095 1.534-12.395.415-18.244-.875-3.853-1.756-7.3-2.534-11.074-.255-1.237-2.034-1.22-2.278.022-1.284 6.552-3.528 11.26-8.55 14.482-8.572 6.125-28.7 2.295-39.453-2.272-11.487-4.656-14.696-13.509-15.486-23.126-.296-5.157.437-10.123 1.818-14.392.409-1.254-1.273-2.097-2.045-1.023-6.113 8.464-8.073 23.88-5.71 33.913" opacity=".45" />
+         <path d="M74.18 75.362c9.135-2.8 13.845-7.215 18.253-24.779 4.153-16.569 12.481-42.878 3.687-48.31-5.147-3.42-12.52-1.52-18.429-.411-3.89.866-7.373 1.738-11.185 2.508-1.25.253-1.233 2.014.023 2.255 6.618 1.271 11.373 3.493 14.628 8.465 6.186 8.486 2.318 28.412-2.295 39.059-4.704 11.371-13.646 14.549-23.36 15.33-5.21.293-10.226-.432-14.537-1.799-1.267-.405-2.12 1.26-1.034 2.025 8.55 6.051 24.12 7.992 34.255 5.652" opacity=".45" />
+         <path d="M76.124 25.562c-2.83-9.044-7.289-13.706-25.03-18.07C34.358 3.38 7.783-4.865 2.3 3.842-1.153 8.937.767 16.237 1.886 22.086c.875 3.852 1.756 7.3 2.534 11.074.256 1.237 2.034 1.22 2.278-.023 1.284-6.552 3.528-11.26 8.55-14.482 8.572-6.124 28.7-2.294 39.453 2.272 11.487 4.657 14.696 13.51 15.486 23.126.296 5.158-.437 10.124-1.818 14.392-.409 1.255 1.273 2.098 2.045 1.024 6.113-8.464 8.073-23.88 5.71-33.913" opacity=".45" />
+         <path d="M25.82 23.638c-9.135 2.8-13.845 7.216-18.253 24.78-4.153 16.568-12.48 42.877-3.687 48.31 5.147 3.42 12.52 1.519 18.429.41 3.891-.865 7.374-1.737 11.186-2.508 1.25-.253 1.232-2.013-.023-2.255-6.619-1.27-11.373-3.492-14.629-8.464-6.186-8.487-2.317-28.413 2.296-39.059 4.703-11.372 13.645-14.55 23.36-15.331 5.209-.293 10.225.433 14.537 1.8 1.266.404 2.118-1.26 1.033-2.025-8.55-6.052-24.12-7.992-34.255-5.652" opacity=".45" />
+       </g>
+       <defs>
+         <clipPath id={clipPathId}>
+           <path fill="#fff" d="M0 0h100v99H0z" />
+         </clipPath>
+       </defs>
+     </svg>
+   );
+ };
+
 export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
   const {
     anchorId = "email-input",
@@ -11,7 +30,8 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
     subTitle,
     emailInputDescription,
     inputPlaceholder = "Enter your email here",
-    ctaText = "Sign me up",
+    ctaButtonText,
+    ctaText,
     caption,
     backgroundColor = "green",
     successFeedback,
@@ -23,7 +43,9 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
     validationErrorMessage = "Invalid email address",
   } = props || {};
 
-  const bgClasses: Record<string, string> = {
+  const buttonLabel = ctaButtonText || ctaText || "Sign me up";
+
+  const backgroundColorClasses: Record<string, string> = {
     green: "bg-bg-fill-brand",
     white: "bg-bg",
     gray90: "bg-[#464646]",
@@ -34,16 +56,20 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
     blue: "bg-bg-fill-brand-supporting",
     orange: "bg-orange-500",
     purple: "bg-bg-fill-brand-tertiary",
+    white: "bg-bg",
   };
 
-  const normalizedBg = (backgroundColor as string)?.toLowerCase?.() || "green";
-  const bgColorClass = themeColor
-    ? themeColorClasses[themeColor] || themeColorClasses.green
-    : bgClasses[normalizedBg as keyof typeof bgClasses] || bgClasses.green;
+  const normalizedBg = (backgroundColor as string)?.toLowerCase?.() || "white";
+  const outerBgClass = backgroundColorClasses[normalizedBg as keyof typeof backgroundColorClasses] || backgroundColorClasses.white;
+
+  const normalizedTheme = (themeColor as string)?.toLowerCase?.() || "green";
+  const containerBgClass = themeColorClasses[normalizedTheme as keyof typeof themeColorClasses] || themeColorClasses.green;
 
-  const darkBgColors = ["green", "gray90", "blue", "orange", "purple"];
-  const effectiveColor = themeColor || normalizedBg;
-  const textColor = darkBgColors.includes(effectiveColor) ? "text-white" : "text-text";
+  const darkThemeColors = ["green", "blue", "purple"];
+  const isDarkTheme = darkThemeColors.includes(normalizedTheme);
+  const textColor = isDarkTheme ? "text-white" : "text-text";
+  const errorTextColor = isDarkTheme ? "text-text-inverse" : "text-text";
+  const pinwheelFill = normalizedTheme === "white" ? "#E0E0E0" : "#FFFEEF";
 
   const paddingClass = padding === "none" ? "!py-0 md:!py-0" : "!py-8 md:!py-20";
 
@@ -70,15 +96,13 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
   };
 
   return (
-    <section id={anchorId} className={`w-full px-4 ${paddingClass} md:px-0`}>
+    <section id={anchorId} className={`w-full px-4 ${paddingClass} md:px-0 ${outerBgClass}`}>
       <div
-        className={`mx-auto max-w-[1200px] overflow-hidden !rounded-[20px] md:rounded-[20px] flex flex-col items-start !px-5 !pt-6 !pb-10 md:!p-10 md:!pt-12 !h-[344px] md:!w-auto md:!h-[367px] relative ${bgColorClass}`}
+        className={`mx-auto max-w-[1200px] overflow-hidden !rounded-[20px] md:rounded-[20px] flex flex-col items-start !px-5 !pt-6 !pb-10 md:!p-10 md:!pt-12 !h-[344px] md:!w-auto md:!h-[367px] relative ${containerBgClass}`}
       >
         {showPinWheel && (
-          <div className={`absolute right-[-28px] top-0 hidden h-[496px] w-[485px] pointer-events-none lg:block ${textColor}`} aria-hidden="true">
-            <svg aria-hidden="true" focusable="false" viewBox="0 0 485 496" className="h-full w-full opacity-10">
-              <circle cx="242" cy="248" r="200" fill="currentColor" />
-            </svg>
+          <div className="absolute right-[-50px] top-[-30px] hidden h-[420px] w-[420px] pointer-events-none lg:block" aria-hidden="true">
+            <LogoCream fill={pinwheelFill} />
           </div>
         )}
         <div className="w-full">
@@ -121,14 +145,14 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
               />
             </div>
             <Button
-              buttonLabel={ctaText}
+              buttonLabel={buttonLabel}
               buttonVariant="primary_inverse"
               buttonClassName="capitalize-first whitespace-nowrap rounded-2xl px-8 !text-lg mt-3 w-full sm:mt-0 sm:w-auto sm:absolute sm:right-[8px] sm:top-[calc(50%-28px)]"
               onClick={handleOnSubmit}
             />
           </div>
           {emailError && (
-            <p className="mt-2 text-label4 font-semibold text-text-inverse">
+            <p className={`mt-2 text-label4 font-semibold ${errorTextColor}`}>
               {emailError}
             </p>
           )}

package/src/contentful/blocks/email-input-block/types.ts

@@ -7,10 +7,11 @@ export interface EmailInputBlockProps {
   emailInputDescription?: string;
   inputPlaceholder?: string;
   successFeedback?: string;
+  ctaButtonText?: string;
   ctaText?: string;
   caption?: React.ReactNode;
   backgroundColor?: "green" | "white" | "yellow" | "blue" | "navy" | "gray90";  
-  themeColor?: "blue" | "green" | "orange" | "purple";
+  themeColor?: "blue" | "green" | "orange" | "purple" | "white";
   showPinWheel?: boolean;
   padding?: "none" | "large";
   validationErrorMessage?: string;

package/src/contentful/blocks/find-kinetic/index.test.tsx

@@ -202,6 +202,41 @@ describe("FindKinetic", () => {
       });
     });
 
+    it("does not append a trailing slash by default", () => {
+      render(<FindKinetic list={[{ name: "Alabama", code: "AL" }]} />);
+      const links = screen.getAllByText("Alabama");
+      links.forEach(link => {
+        expect(link.closest("a")).toHaveAttribute("href", "/local/al");
+      });
+    });
+
+    it("appends a trailing slash when addTrailingSlash is true", () => {
+      render(
+        <FindKinetic
+          list={[{ name: "Alabama", code: "AL" }]}
+          addTrailingSlash
+        />
+      );
+      const links = screen.getAllByText("Alabama");
+      links.forEach(link => {
+        expect(link.closest("a")).toHaveAttribute("href", "/local/al/");
+      });
+    });
+
+    it("does not produce a protocol-relative href when localPathPrefix is '/'", () => {
+      render(
+        <FindKinetic
+          list={[{ name: "Alabama", code: "AL" }]}
+          localPathPrefix="/"
+        />
+      );
+      const links = screen.getAllByText("Alabama");
+      links.forEach(link => {
+        expect(link.closest("a")).toHaveAttribute("href", "/al");
+        expect(link.closest("a")?.getAttribute("href")).not.toMatch(/^\/\//);
+      });
+    });
+
     it("sorts list items alphabetically by name", () => {
       const unsortedList = [
         { name: "Texas", code: "TX" },

package/src/contentful/blocks/find-kinetic/index.tsx

@@ -16,6 +16,7 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
   title,
   color = "dark",
   maxWidth = true,
+  addTrailingSlash = false,
 }) => {
   const bgColorClasses: Record<ThemeKey, string> = {
     blue: "bg-[#07B2E2]",
@@ -25,12 +26,22 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
     white: "bg-white",
     navy: "bg-[#00002D]",
   };
-  const normalizedLocalPathPrefix = localPathPrefix
-    ? `/${localPathPrefix.replace(/^\/+|\/+$/g, "")}`
+  // Trim leading/trailing slashes without a regex to avoid ReDoS on long
+  // runs of "/" (CodeQL: polynomial regular expression on uncontrolled data).
+  const trimSlashes = (value: string) => {
+    let start = 0;
+    let end = value.length;
+    while (start < end && value.charCodeAt(start) === 47 /* "/" */) start += 1;
+    while (end > start && value.charCodeAt(end - 1) === 47 /* "/" */) end -= 1;
+    return value.slice(start, end);
+  };
+  const cleanedLocalPathPrefix = trimSlashes(localPathPrefix ?? "");
+  const normalizedLocalPathPrefix = cleanedLocalPathPrefix
+    ? `/${cleanedLocalPathPrefix}`
     : "";
 
   const getLocationHref = (code: string) =>
-    `${normalizedLocalPathPrefix}/${code.toLowerCase()}`;
+    `${normalizedLocalPathPrefix}/${code.toLowerCase()}${addTrailingSlash ? "/" : ""}`;
 
   return (
     <div
@@ -120,16 +131,21 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                           key={`item-list-3-${index}`}
                           className={`${image ? "" : "w-[172px]"}`}
                         >
-                          <Link href={getLocationHref(item.code)} className="label1">
+                          <Link
+                            href={getLocationHref(item.code)}
+                            className="label1"
+                          >
                             {item.name}
                           </Link>
                         </li>
-                      ) : <li key={`empty-3-${index}`} aria-hidden="true" />
+                      ) : (
+                        <li key={`empty-3-${index}`} aria-hidden="true" />
+                      )
                     );
                   })()}
                 </ul>
                 {!image && (
-                  <ul className="hidden xl:grid xl:grid-cols-4 gap-x-20 gap-y-5">
+                  <ul className="hidden gap-x-20 gap-y-5 xl:grid xl:grid-cols-4">
                     {(() => {
                       const sortedList = [...list].sort((a, b) =>
                         a.name.localeCompare(b.name)
@@ -145,12 +161,20 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                       }
                       return rearranged.map((item, index: number) =>
                         item ? (
-                          <li key={`item-list-4-${index}`} className="w-[172px]">
-                            <Link href={getLocationHref(item.code)} className="label1">
+                          <li
+                            key={`item-list-4-${index}`}
+                            className="w-[172px]"
+                          >
+                            <Link
+                              href={getLocationHref(item.code)}
+                              className="label1"
+                            >
                               {item.name}
                             </Link>
                           </li>
-                        ) : <li key={`empty-4-${index}`} aria-hidden="true" />
+                        ) : (
+                          <li key={`empty-4-${index}`} aria-hidden="true" />
+                        )
                       );
                     })()}
                   </ul>

package/src/contentful/blocks/find-kinetic/types.ts

@@ -10,6 +10,7 @@ export type FindKineticProps = {
   maxWidth?: boolean;
   color?: "dark" | "light";
   columns?: 2 | 3 | 4;
+  addTrailingSlash?: boolean;
 };
 
 export type ThemeKey =

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

@@ -155,6 +155,69 @@ describe("PrimaryHero", () => {
       render(<PrimaryHero {...baseProps} />);
       expect(screen.queryByText("Get Started")).not.toBeInTheDocument();
     });
+
+    it("renders both CTAs side by side when both are button type", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          primaryCta1={{ buttonLabel: "Check plans", showButtonAs: "solid" }}
+          primaryCta2={{
+            buttonLabel: "Shop AT&T deals",
+            showButtonAs: "solid",
+          }}
+        />
+      );
+      expect(screen.getByText("Check plans")).toBeInTheDocument();
+      expect(screen.getByText("Shop AT&T deals")).toBeInTheDocument();
+      const row = container.querySelector(".sm\\:flex-row");
+      expect(row).toBeInTheDocument();
+    });
+
+    it("renders CTAs stacked when only primaryCta1 is present", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          primaryCta1={{ buttonLabel: "Check plans", showButtonAs: "solid" }}
+        />
+      );
+      expect(screen.getByText("Check plans")).toBeInTheDocument();
+      expect(container.querySelector(".sm\\:flex-row")).not.toBeInTheDocument();
+    });
+
+    it("renders CTAs stacked when one CTA is not a button type", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          primaryCta1={{ buttonLabel: "Check plans", showButtonAs: "solid" }}
+          primaryCta2={{ buttonLabel: "Learn more", showButtonAs: "text" }}
+        />
+      );
+      expect(screen.getByText("Check plans")).toBeInTheDocument();
+      expect(screen.getByText("Learn more")).toBeInTheDocument();
+      expect(container.querySelector(".sm\\:flex-row")).not.toBeInTheDocument();
+    });
+
+    it("hides primaryCta2 on mobile when hideOnMobileCta2 is true", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          primaryCta2={{ buttonLabel: "Shop deals", showButtonAs: "solid" }}
+          hideOnMobileCta2={true}
+        />
+      );
+      const ctaWrapper = container.querySelector(".hidden.md\\:block");
+      expect(ctaWrapper).toBeInTheDocument();
+    });
+
+    it("renders only primaryCta2 when primaryCta1 is not provided", () => {
+      render(
+        <PrimaryHero
+          {...baseProps}
+          primaryCta2={{ buttonLabel: "Shop deals", showButtonAs: "solid" }}
+        />
+      );
+      expect(screen.getByText("Shop deals")).toBeInTheDocument();
+    });
   });
 
   describe("Secondary CTA", () => {