@windstream/react-shared-components 0.2.17 → 0.2.19

package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx

@@ -1,23 +1,287 @@
 import { PrimaryHero } from "./index";
+import type { PrimaryHeroProps } from "./types";
 
 import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
+
+// ─── Mock Data ────────────────────────────────────────────────────────────────
+
+const HERO_IMAGE =
+  "https://images.ctfassets.net/8d4yn2ywtegc/6Dpv8KVrKnuQXy0CCSHFa8/8cf420b6d55f6bdcfa443f7cff75e294/1a9b1046b0b507d52c57172edc6324f1417ff402.png";
+
+const BADGE_IMAGE =
+  "https://images.ctfassets.net/8d4yn2ywtegc/7hlBQ8QOkl0fI8vawenlJK/216b89b30eb9ec3685f723696baeefdf/promo_badge__1_.svg";
+
+const DEFAULT_CHECKLIST: PrimaryHeroProps["checklist"] = [
+  { title: "100% network reliability" },
+  { title: "Free Whole Home Wi-Fi Set Up" },
+  { title: "Free Kinetic Secure for 3 months" },
+  { title: "No annual contract or data caps" },
+];
+
+const CHECK_AVAILABILITY_CTA = {
+  showButtonAs: "solid" as const,
+  buttonVariant: "primary_brand" as const,
+  buttonLabel: "Check availability",
+  href: "#",
+  target: "_self" as const,
+};
+
+// ─── ArgTypes ─────────────────────────────────────────────────────────────────
+
+const argTypes: ArgTypes<PrimaryHeroProps> = {
+  title: {
+    control: { type: "text" as const },
+    description: "Main headline text displayed in the hero",
+  },
+  showAsHeading: {
+    control: { type: "boolean" as const },
+    description: "Renders title as h1 instead of h2",
+  },
+  subTitle: {
+    control: { type: "text" as const },
+    description:
+      "Subtitle text below the headline highlighting key value proposition",
+  },
+  price: {
+    control: { type: "text" as const },
+    description: "Price value (e.g. '24')",
+  },
+  priceSuffix: {
+    control: { type: "text" as const },
+    description: "Price suffix displayed after the price (e.g. '/mo')",
+  },
+  priceCallout: {
+    control: { type: "text" as const },
+    description:
+      "Price callout text, pipe-separated for multiple lines (e.g. 'Fiber plans|starting at')",
+  },
+  pricingDescription: {
+    control: { type: "text" as const },
+    description: "Descriptive text displayed below the pricing section",
+  },
+  pricingDescriptionDisclaimer: {
+    control: { type: "text" as const },
+    description: "Smaller disclaimer text below the pricing description",
+  },
+  checklist: {
+    control: { type: "object" as const },
+    description: "Array of checklist items with title and optional icon URL",
+  },
+  logoLockup: {
+    control: { type: "text" as const },
+    description: "URL for logo lockup image displayed below checklist",
+  },
+  carouselImages: {
+    control: { type: "object" as const },
+    description: "Array of hero image URLs",
+  },
+  squareImage: {
+    control: false,
+    table: { disable: true },
+  },
+  badgeImage: {
+    control: { type: "text" as const },
+    description: "URL for promo badge image overlaid on the hero image",
+  },
+  textColor: {
+    control: { type: "select" as const },
+    options: ["light", "dark"],
+    description:
+      "Text color theme — light (white) for dark backgrounds, dark for light backgrounds",
+  },
+  primaryCta1: {
+    control: { type: "object" as const },
+    description: "Primary call-to-action button props",
+  },
+  secondaryCtaPrefix: {
+    control: { type: "text" as const },
+    description: "Prefix text before the secondary CTA (e.g. 'Or')",
+  },
+  secondaryCta: {
+    control: { type: "object" as const },
+    description: "Secondary call-to-action link/button props",
+  },
+  bottomLink: {
+    control: { type: "object" as const },
+    description: "Bottom link rendered below the CTA section",
+  },
+  hideOnMobileCta1: {
+    control: { type: "boolean" as const },
+    description: "Hides the primary CTA on mobile viewports",
+  },
+  maxWidth: {
+    table: { disable: true },
+  },
+  checkAvailabilityEyebrow: {
+    control: { disable: true },
+    table: { disable: true },
+  },
+  renderCheckPlans: {
+    control: { disable: true },
+    table: { disable: true },
+  },
+  onModalButtonClick: {
+    control: { disable: true },
+    table: { disable: true },
+  },
+};
+
+// ─── Meta ─────────────────────────────────────────────────────────────────────
 
 const meta: Meta<typeof PrimaryHero> = {
   title: "Contentful Blocks/PrimaryHero",
   component: PrimaryHero,
   tags: ["autodocs"],
+  argTypes,
   parameters: {
-    layout: "centered",
+    layout: "fullscreen",
     docs: {
       page: DocsPage,
       description: {
-        component: "Contentful primary hero block.",
+        component:
+          "Contentful primary hero block featuring headline, subtitle, pricing, checklist, CTA buttons, logo lockup, and responsive hero image with optional promo badge.",
       },
     },
   },
-  args: {},
+  decorators: [
+    Story => (
+      <div style={{ minWidth: 1280 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: "Internet better with ultra-fast fiber internet.",
+    showAsHeading: true,
+    price: "24",
+    priceSuffix: "/mo",
+    priceCallout: "Fiber plans|starting at",
+    checklist: DEFAULT_CHECKLIST,
+    logoLockup: undefined,
+    carouselImages: [HERO_IMAGE],
+    badgeImage: BADGE_IMAGE,
+    primaryCta1: CHECK_AVAILABILITY_CTA,
+    textColor: "dark",
+  },
 };
+
 export default meta;
 type Story = StoryObj<typeof meta>;
+
+// ─── Stories ──────────────────────────────────────────────────────────────────
+
+/** Default hero with all main features: headline, pricing, checklist, logo lockup, badge, and hero image. */
 export const Default: Story = {};
+
+/** Promo badge overlaid on the hero image — draws attention to a limited-time offer. */
+export const PromoBadge: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Promo badge (e.g. $3.99 or limited-time price) is rendered as an overlay on the top-left corner of the hero image.",
+      },
+    },
+  },
+  args: {
+    title: "Internet better with ultra-fast fiber internet.",
+    badgeImage: BADGE_IMAGE,
+    checklist: DEFAULT_CHECKLIST,
+  },
+};
+
+/** Hero with only a headline — no subtitle or pricing. */
+export const Headline: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Displays only the headline text with checklist and CTA. Use when the hero needs minimal content.",
+      },
+    },
+  },
+  args: {
+    title: "Hero headline.",
+    subTitle: undefined,
+    price: undefined,
+    priceSuffix: undefined,
+    priceCallout: undefined,
+    pricingDescription: undefined,
+    logoLockup: undefined,
+    badgeImage: undefined,
+    checklist: DEFAULT_CHECKLIST,
+  },
+};
+
+/** Hero with subtitle text below the headline highlighting a key value proposition. */
+export const SubTitle: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Uses the subtitle property to display supporting text beneath the headline, reinforcing the value proposition.",
+      },
+    },
+  },
+  args: {
+    title: "Internet better with ultra-fast fiber internet.",
+    subTitle: "Subtitle highlighting key value proposition.",
+    price: undefined,
+    priceSuffix: undefined,
+    priceCallout: undefined,
+    pricingDescription: undefined,
+    logoLockup: undefined,
+    badgeImage: undefined,
+    checklist: DEFAULT_CHECKLIST,
+  },
+};
+
+/** Hero with pricing callout section including price, suffix, description and disclaimer. */
+export const PricingCallout: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Displays the full pricing section with callout prefix, price value, suffix, and optional description/disclaimer text.",
+      },
+    },
+  },
+  args: {
+    title: "Internet better with ultra-fast fiber internet.",
+    subTitle:
+      "Experience the joy of ultra-fast, reliable fiber internet in every room of your home.",
+    price: "24",
+    priceSuffix: "/mo",
+    priceCallout: "starting at",
+    pricingDescription: "pricing disclaimer text goes here",
+    logoLockup: undefined,
+    badgeImage: undefined,
+    checklist: undefined,
+  },
+};
+
+/** Bundle offer variant with different messaging and pricing. */
+export const BundleOffer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates the hero used for bundle/cross-sell offers with custom headline and pricing copy.",
+      },
+    },
+  },
+  args: {
+    title: "Bundle and save on Kinetic Fiber Internet.",
+    subTitle:
+      "Save $20/mo off your Kinetic bill with a new or existing AT&T Wireless plan*.",
+    price: undefined,
+    priceSuffix: undefined,
+    priceCallout: undefined,
+    pricingDescription: undefined,
+    pricingDescriptionDisclaimer: "Pricing disclaimer text goes here.",
+    logoLockup: undefined,
+    badgeImage: undefined,
+    checklist: undefined,
+  },
+};

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

@@ -229,7 +229,7 @@ describe("PrimaryHero", () => {
           pricingDescriptionDisclaimer="Taxes apply"
         />
       );
-      expect(screen.getAllByText("Taxes apply")).toHaveLength(2);
+      expect(screen.getAllByText("Taxes apply")).toHaveLength(1);
     });
 
     it("does not render disclaimer when not provided", () => {

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

@@ -21,14 +21,18 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
     checklist,
     renderCheckPlans,
     badgeImage,
+    pricingDescription,
     pricingDescriptionDisclaimer,
     secondaryCta,
     secondaryCtaPrefix,
     onModalButtonClick,
     hideOnMobileCta1,
+    textColor = "light",
+    logoLockup,
   } = props;
 
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
+  const textColorClass = textColor === "light" ? " text-white" : " text-text";
   return (
     <div className="component-container p-5 xl:flex xl:min-h-[724px] xl:items-center xl:p-0 xl:py-4">
       <div
@@ -37,7 +41,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         )}
       >
         {/* Left column: navy background, headline, body, address, button, link */}
-        <div className={cx("relative flex flex-col text-white sm:w-[485px]")}>
+        <div
+          className={cx(
+            `relative flex flex-col ${textColorClass} sm:w-[485px]`
+          )}
+        >
           <div className="flex flex-col gap-5 lg:gap-6">
             {title && (
               <Text
@@ -81,10 +89,25 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               </div>
             ) : null}
 
+            {pricingDescription ? (
+              <Text
+                data-cy="hero-pricing-disclaimer"
+                className={cx("text-left sm:text-center xl:text-left")}
+              >
+                {pricingDescription}
+              </Text>
+            ) : null}
+
+            {pricingDescriptionDisclaimer ? (
+              <Text data-cy="hero-pricing-disclaimer" as="p" className="body3">
+                {pricingDescriptionDisclaimer}
+              </Text>
+            ) : null}
+
             {/* checklist */}
             {checklist && (
               <Checklist
-                listItemClassName="body2 text-white text-left"
+                listItemClassName={`body2 text-left ${textColorClass}`}
                 items={checklist.map(item =>
                   item.iconUrl
                     ? { title: item.title, iconUrl: item.iconUrl }
@@ -93,6 +116,20 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               />
             )}
 
+            {logoLockup ? (
+              <div className="text-left sm:text-center xl:mb-0 xl:text-left">
+                <NextImage
+                  src={logoLockup}
+                  alt={"Logo Lockup"}
+                  className="inline-block"
+                  width={201}
+                  height={24}
+                  quality={90}
+                  loading="eager"
+                />
+              </div>
+            ) : null}
+
             {/* CTA section */}
             <div className="flex flex-col gap-3">
               {/* desktop CTA */}
@@ -107,7 +144,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   />
                 </div>
               )}
-              {secondaryCtaPrefix || secondaryCta ? (
+              {secondaryCtaPrefix && secondaryCta ? (
                 <div className="hidden md:flex">
                   {secondaryCtaPrefix && (
                     <Text as="span" className="body2 mr-1">
@@ -116,7 +153,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   )}
                   {secondaryCta && (
                     <Button
-                      linkClassName="body2 text-text-inverse"
+                      linkClassName={`body2 ${textColorClass}`}
                       onModalButtonClick={onModalButtonClick}
                       {...secondaryCta}
                     />
@@ -129,17 +166,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 <div className="hidden md:block">
                   <Button
                     {...bottomLink}
-                    linkClassName="text-footnote text-white"
+                    linkClassName={`text-footnote ${textColorClass}`}
                     onModalButtonClick={onModalButtonClick}
                   />
                 </div>
               )}
-
-              {pricingDescriptionDisclaimer ? (
-                <Text as="p" className="body3 hidden md:block">
-                  {pricingDescriptionDisclaimer}
-                </Text>
-              ) : null}
             </div>
           </div>
         </div>
@@ -177,19 +208,15 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               <Button
                 {...bottomLink}
                 onModalButtonClick={onModalButtonClick}
-                linkClassName="body3 text-white"
+                linkClassName={`body3 ${textColorClass}`}
               />
             </div>
           )}
 
-          {pricingDescriptionDisclaimer ? (
-            <Text as="p" className="body3 md:hidden">
-              {pricingDescriptionDisclaimer}
-            </Text>
-          ) : null}
-
           {secondaryCtaPrefix || secondaryCta ? (
-            <div className="flex flex-wrap items-center text-white md:hidden">
+            <div
+              className={`flex flex-wrap items-center ${textColorClass} md:hidden`}
+            >
               {secondaryCtaPrefix && (
                 <Text as="span" className="body2 mr-1">
                   {secondaryCtaPrefix}
@@ -199,7 +226,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 <Button
                   {...secondaryCta}
                   onModalButtonClick={onModalButtonClick}
-                  linkClassName="text-white"
+                  linkClassName={`${textColorClass}`}
                 />
               )}
             </div>

package/src/contentful/blocks/primary-hero/types.ts

@@ -30,7 +30,7 @@ export type PrimaryHeroProps = {
   carouselImages?: string[];
   squareImage?: boolean;
   badgeImage?: string;
-  textColor?: string;
+  textColor?: "light" | "dark";
   maxWidth?: boolean;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   onModalButtonClick?: (id?: string) => void;