@windstream/react-shared-components 0.2.21 → 0.2.23

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/image-promo-bar/index.test.tsx

@@ -7,11 +7,21 @@ import { fireEvent, render, screen } from "@testing-library/react";
 jest.mock("../button", () => ({
   __esModule: true,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  Button: ({ buttonLabel, ...rest }: any) => (
-    <button data-testid="cta-button">{buttonLabel || "CTA"}</button>
+  Button: ({ buttonLabel, disableAnimation, ...rest }: any) => (
+    <button
+      data-testid="cta-button"
+      data-disable-animation={String(disableAnimation)}
+    >
+      {buttonLabel || "CTA"}
+    </button>
   ),
-  default: ({ buttonLabel }: any) => (
-    <button data-testid="cta-button">{buttonLabel || "CTA"}</button>
+  default: ({ buttonLabel, disableAnimation }: any) => (
+    <button
+      data-testid="cta-button"
+      data-disable-animation={String(disableAnimation)}
+    >
+      {buttonLabel || "CTA"}
+    </button>
   ),
 }));
 
@@ -245,6 +255,37 @@ describe("ImagePromoBar", () => {
       const { container } = render(<ImagePromoBar {...defaultProps} />);
       expect(container.querySelector(".primary-cta")).not.toBeInTheDocument();
     });
+
+    it("keeps disableAnimation true on both CTAs by default", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          cta={{ buttonLabel: "Primary" }}
+          secondaryCta={{ buttonLabel: "Secondary" }}
+        />
+      );
+      const buttons = screen.getAllByTestId("cta-button");
+      expect(buttons).toHaveLength(2);
+      buttons.forEach(button => {
+        expect(button).toHaveAttribute("data-disable-animation", "true");
+      });
+    });
+
+    it("passes disableAnimation false to both CTAs when enableAnimation is true", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          cta={{ buttonLabel: "Primary" }}
+          secondaryCta={{ buttonLabel: "Secondary" }}
+          enableAnimation={true}
+        />
+      );
+      const buttons = screen.getAllByTestId("cta-button");
+      expect(buttons).toHaveLength(2);
+      buttons.forEach(button => {
+        expect(button).toHaveAttribute("data-disable-animation", "false");
+      });
+    });
   });
 
   describe("Image", () => {

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

@@ -36,6 +36,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   onModalButtonClick,
   onClick,
   renderCheckPlans,
+  enableAnimation = false,
 }) => {
   const [activeVideo, setActiveVideo] = useState("");
   const [isHovered, setIsHovered] = useState(false);
@@ -138,11 +139,12 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             )}
             {/* CTAs and Disclaimers */}
             {(cta || secondaryCta) && (
-              <div className="flex w-full flex-col gap-3 xl:flex-row">
+              <div className="flex w-full flex-col gap-4 xl:flex-row">
                 {cta && (
                   <div className="primary-cta w-full xl:w-auto xl:shrink-0">
                     <Button
                       {...cta}
+                      disableAnimation={!enableAnimation}
                       fullWidth={true}
                       size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}
@@ -155,6 +157,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                   <div className="secondary-cta w-full xl:w-auto xl:shrink-0">
                     <Button
                       {...secondaryCta}
+                      disableAnimation={!enableAnimation}
                       fullWidth={true}
                       size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -36,6 +36,7 @@ export type ImagePromoBarProps = {
   videoLink: VideoLinkProps;
   maxWidth?: boolean;
   color: "light" | "dark";
+  enableAnimation?: boolean;
   onModalButtonClick?: (id?: string) => void;
   onClick?: (event: React.MouseEvent, source: "primary" | "secondary") => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;

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