@windstream/react-shared-components 0.2.18 → 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,
+  },
+};