@windstream/react-shared-components 0.2.18 → 0.2.20

package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx

@@ -1,14 +1,28 @@
 import { ImagePromoBar } from "./index";
 
 import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Decorator, Meta, StoryObj } from "@storybook/react";
+
+// Wrapper that adds a dark background for light-theme stories (text is white in light mode)
+const DarkBgDecorator: Decorator = Story => (
+  <div style={{ background: "#1a2e44" }}>
+    <Story />
+  </div>
+);
+
+// Wrapper for dark-theme stories (text is dark, white background is fine)
+const LightBgDecorator: Decorator = Story => (
+  <div style={{ background: "#f3f4f6" }}>
+    <Story />
+  </div>
+);
 
 const meta: Meta<typeof ImagePromoBar> = {
   title: "Contentful Blocks/ImagePromoBar",
   component: ImagePromoBar,
   tags: ["autodocs"],
   parameters: {
-    layout: "centered",
+    layout: "fullscreen",
     docs: {
       page: DocsPage,
       description: {
@@ -16,8 +30,235 @@ const meta: Meta<typeof ImagePromoBar> = {
       },
     },
   },
-  args: {},
+  argTypes: {
+    color: {
+      control: { type: "select" },
+      options: ["light", "dark"],
+    },
+    mediaPosition: { control: "boolean" },
+    enableHeading: {
+      control: "boolean",
+      description:
+        "Controls the semantic HTML heading level for SEO/accessibility. `true` → title renders as `<h1>`, subtitle as `<h2>`. `false` → title as `<h2>`, subtitle as `<h3>`. **Does not change visual appearance** — only the underlying HTML tag changes.",
+    },
+    isAboveTheFold: { control: "boolean" },
+    useOriginalImageAspectRatio: { control: "boolean" },
+    maxWidth: { control: "boolean" },
+    // Paste any Contentful image URL here to preview it in the component
+    image: {
+      control: "text",
+      description:
+        "Contentful image URL. Replace with any valid Contentful asset URL to test different images.",
+    },
+    // Explicitly declare React.ReactNode props as text controls AND string
+    // type to prevent Storybook from auto-inferring them as "object".
+    // Without type:"string", Storybook still serialises/deserialises these
+    // args as objects (from URL params), passing {} as a React child and
+    // triggering React error #31: "Objects are not valid as a React child".
+    description: { control: "text", type: "string" },
+    disclaimer: { control: "text", type: "string" },
+    ctaDisclaimer: { control: "text", type: "string" },
+  },
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+
+// ─── Shared base args ────────────────────────────────────────────────────────
+
+const baseArgs = {
+  brow: "Kinetic 8 Gig",
+  title: "Next-level multi-gig internet speeds. Only from Kinetic.",
+  subTitle: "Free Whole Home Wi-Fi Set Up",
+  description:
+    "Our advanced fiber network delivers multi-gig speeds up to 8 Gig. As the largest 8 Gig internet provider, Kinetic powers your devices with the speed, bandwidth, and latest technology to give you the most consistent, reliable connection.",
+  image:
+    "https://images.ctfassets.net/8d4yn2ywtegc/1toxzgRb5VaVpdpsLWromO/8e5a9222d726b52a498eeea1340edd8c/AdobeStock_345768996.jpeg",
+  color: "light" as const,
+  mediaPosition: true,
+  enableHeading: false,
+  maxWidth: true,
+  checklist: [] as string[],
+  imageLinks: [] as { url: string; image: string }[],
+};
+
+const primaryCta = {
+  showButtonAs: "solid",
+  buttonVariant: "primary_brand",
+  buttonLabel: "Check Availability",
+  href: "https://dev-res.windstream.com/buy",
+  target: "_blank" as const,
+  preserveQueryParameters: true,
+};
+
+const secondaryCta = {
+  showButtonAs: "solid",
+  buttonVariant: "secondary",
+  buttonLabel: "Learn More",
+  href: "#",
+  target: "_self" as const,
+};
+
+const realChecklist = [
+  "Review your existing Wi-Fi set-up.",
+  "Examine and certify connection speed throughout your home",
+  "Recommend Wi-Fi extending equipment to eliminate dead spots.",
+];
+
+const realImageLinks = [
+  {
+    url: "https://apps.apple.com/us/app/id1342262959",
+    image:
+      "https://images.ctfassets.net/8d4yn2ywtegc/5txcuXefjBwiPLcWMOz5b/4379d6535ae32d95ef1a42f41f8eb831/appstore.png",
+  },
+  {
+    url: "https://play.google.com/store/apps/details?id=com.windstream.residential&hl=en_US&gl=US",
+    image:
+      "https://images.ctfassets.net/8d4yn2ywtegc/h840guug8WGHMgnKd2OZQ/f21b3294ff560198d805e1fdae58f89f/googleplay.png",
+  },
+];
+
+const realVideoLink = {
+  link: "https://youtu.be/5_l3T8f7rk4",
+  image:
+    "https://images.ctfassets.net/8d4yn2ywtegc/1toxzgRb5VaVpdpsLWromO/8e5a9222d726b52a498eeea1340edd8c/AdobeStock_345768996.jpeg",
+  videoPopup: false,
+};
+
+// ─── AC1 — Heading & Text Content ────────────────────────────────────────────
+
+export const Default: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+  },
+};
+
+// ─── AC2 — Media Position (right) ─────────────────────────────────────────────
+
+export const MediaRight: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+    mediaPosition: false,
+    imageWidth: 200,
+    imageHeight: 300,
+  },
+};
+
+// ─── AC3 — Static Image / Original Aspect Ratio ──────────────────────────────
+
+export const OriginalAspectRatio: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+    image:
+      "https://images.ctfassets.net/8d4yn2ywtegc/1toxzgRb5VaVpdpsLWromO/8e5a9222d726b52a498eeea1340edd8c/AdobeStock_345768996.jpeg",
+    useOriginalImageAspectRatio: true,
+    imageWidth: 660,
+    imageHeight: 440,
+  },
+};
+
+// ─── AC4 — Video Playback: Inline ────────────────────────────────────────────
+
+export const InlineVideo: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+    image: undefined,
+    videoLink: { ...realVideoLink, videoPopup: false },
+  },
+};
+
+// ─── AC5 — Video Playback: Popup ─────────────────────────────────────────────
+
+export const PopupVideo: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+    image: undefined,
+    videoLink: { ...realVideoLink, videoPopup: true },
+  },
+};
+
+// ─── AC6 — Checklist Rendering ───────────────────────────────────────────────
+
+export const WithChecklist: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+    checklist: realChecklist,
+  },
+};
+
+// ─── AC7 — Primary & Secondary CTAs ─────────────────────────────────────────
+
+export const WithCTAs: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+    cta: primaryCta,
+    secondaryCta: secondaryCta,
+  },
+};
+
+// ─── AC8 — Image Links ────────────────────────────────────────────────────────
+
+export const WithImageLinks: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+    imageLinks: realImageLinks,
+  },
+};
+
+// ─── AC9 — Light Background (dark text) ───────────────────────────────────────────────────
+
+export const LightBackground: Story = {
+  decorators: [LightBgDecorator],
+  args: {
+    ...baseArgs,
+    color: "dark",
+  },
+};
+
+// ─── AC10 — Above the Fold (LCP priority) ────────────────────────────────────
+
+export const AboveTheFold: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+    isAboveTheFold: true,
+  },
+};
+
+// ─── AC11 — Disclaimers ───────────────────────────────────────────────────────
+
+export const WithDisclaimers: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+    cta: primaryCta,
+    ctaDisclaimer: "* Offer valid for new customers only.",
+    disclaimer:
+      "*911 IN AN EMERGENCY. Voice Services provided via an internet connection require both electrical power and broadband function. The Services will not function if power is lost or if there is a disruption to the broadband connection.",
+  },
+};
+
+// ─── All ACs — Full Featured ──────────────────────────────────────────────────
+
+export const FullFeatured: Story = {
+  decorators: [DarkBgDecorator],
+  args: {
+    ...baseArgs,
+    enableHeading: true,
+    cta: primaryCta,
+    secondaryCta: secondaryCta,
+    checklist: realChecklist,
+    imageLinks: realImageLinks,
+    ctaDisclaimer: "* Offer valid for new customers only.",
+    disclaimer:
+      "*911 IN AN EMERGENCY. Voice Services provided via an internet connection require both electrical power and broadband function. The Services will not function if power is lost or if there is a disruption to the broadband connection.",
+    isAboveTheFold: true,
+  },
+};

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,
+  },
+};