@windstream/react-shared-components 0.2.19 → 0.2.21

package/src/contentful/blocks/cart-retention-banner/CartRetentionBanner.stories.tsx

@@ -0,0 +1,168 @@
+import CartRetentionBanner from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof CartRetentionBanner> = {
+  title: "Contentful Blocks/CartRetentionBanner",
+  component: CartRetentionBanner,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A cart retention banner that displays a modal or inline popup to encourage users to complete their checkout.",
+      },
+    },
+  },
+  argTypes: {
+    fields: {
+      control: { type: "object" },
+      description:
+        "Content fields including anchorId, mainHeading, description (rich-text), and cta.buttonLabel",
+    },
+    isInPopupContainer: {
+      control: { type: "boolean" },
+      description: "Renders inline popup content without the modal wrapper",
+    },
+    onClose: {
+      action: "onClose",
+      description: "Callback when the banner is closed",
+    },
+    onContinueCheckout: {
+      action: "onContinueCheckout",
+      description: "Callback when continue checkout is clicked",
+    },
+    checkShouldShowBanner: {
+      control: false,
+      description: "Function that determines whether the banner should show",
+    },
+    onBannerShown: {
+      action: "onBannerShown",
+      description: "Callback when the banner is displayed",
+    },
+  },
+  args: {
+    fields: {
+      entryTitle: "Cart Retention Banner",
+      anchorId: "cart-retention-banner",
+      mainHeading: "Welcome back. Let's finish your order",
+      description: {
+        json: {
+          nodeType: "document",
+          data: {},
+          content: [
+            {
+              nodeType: "paragraph",
+              data: {},
+              content: [
+                {
+                  nodeType: "text",
+                  value:
+                    "You have items waiting in your cart. Complete your order now!",
+                  marks: [],
+                  data: {},
+                },
+              ],
+            },
+          ],
+        },
+      },
+      cta: {
+        buttonLabel: "Continue checkout",
+      },
+    },
+    checkShouldShowBanner: () => true,
+    isInPopupContainer: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default modal variant (checkShouldShowBanner returns true to open modal)
+export const Default: Story = {};
+
+// Inline popup container variant
+export const InlinePopup: Story = {
+  args: {
+    isInPopupContainer: true,
+  },
+};
+
+// Custom heading and CTA label
+export const CustomHeadingAndCta: Story = {
+  args: {
+    isInPopupContainer: true,
+    fields: {
+      entryTitle: "Cart Retention Banner",
+      anchorId: "cart-retention-custom",
+      mainHeading: "Don't forget your items!",
+      description: {
+        json: {
+          nodeType: "document",
+          data: {},
+          content: [
+            {
+              nodeType: "paragraph",
+              data: {},
+              content: [
+                {
+                  nodeType: "text",
+                  value: "Your cart is waiting for you. Finish checkout today.",
+                  marks: [],
+                  data: {},
+                },
+              ],
+            },
+          ],
+        },
+      },
+      cta: {
+        buttonLabel: "Complete my order",
+      },
+    },
+  },
+};
+// With description
+export const WithDescription: Story = {
+  args: {
+    isInPopupContainer: true,
+    fields: {
+      entryTitle: "Cart Retention Banner",
+      anchorId: "cart-retention-with-desc",
+      mainHeading: "Welcome back. Let's finish your order",
+      description: {
+        json: {
+          nodeType: "document",
+          data: {},
+          content: [
+            {
+              nodeType: "paragraph",
+              data: {},
+              content: [
+                {
+                  nodeType: "text",
+                  value: "You have items waiting in your cart. ",
+                  marks: [],
+                  data: {},
+                },
+                {
+                  nodeType: "text",
+                  value: "Complete your order now",
+                  marks: [],
+                  data: {},
+                },
+              ],
+            },
+          ],
+        },
+      },
+      cta: {
+        buttonLabel: "Continue checkout",
+      },
+    },
+  },
+};

package/src/contentful/blocks/cta-callout/index.tsx

@@ -28,7 +28,7 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
   };
   return (
     <div
-      className={`${bgColorClasses[background]} component-container px-5 py-16 lg:px-13 lg:py-24`}
+      className={`${bgColorClasses[background]} component-container px-5 py-16 lg:px-13 lg:py-24 w-full`}
     >
       <div
         className={`${maxWidth ? "mx-auto max-w-120" : ""} color-${color} flex flex-col ${color == "dark" ? "text-text" : "text-text-inverse"}`}
@@ -51,7 +51,7 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
         )}
         {description && (
           <div
-            className={`pt-2 text-body1 lg:pt-3 text-${descriptionAlignment}`}
+            className={`pt-2 text-body1 lg:pt-3 text-${descriptionAlignment} break-words [&_table]:w-full`}
           >
             {description}
           </div>

package/src/contentful/blocks/email-input-block/EmailInputBlock.stories.tsx

@@ -0,0 +1,182 @@
+import { EmailInputBlock } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof EmailInputBlock> = {
+  title: "Contentful Blocks/EmailInputBlock",
+  component: EmailInputBlock,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful EmailInputBlock component. Renders a full-width email sign-up section with a title, description, email input field, and submit button. Supports multiple background color themes and displays validation errors and a success message after valid submission.",
+      },
+    },
+  },
+  argTypes: {
+    backgroundColor: {
+      control: { type: "select" },
+      options: ["green", "white", "yellow", "blue", "navy"],
+      description: "Background color theme of the block",
+    },
+    title: {
+      control: { type: "text" },
+      description: "Main heading displayed at the top of the block",
+    },
+    subTitle: {
+      control: { type: "text" },
+      description: "Secondary heading displayed below the title",
+    },
+    emailInputDescription: {
+      control: { type: "text" },
+      description: "Descriptive paragraph shown above the email input",
+    },
+    inputPlaceholder: {
+      control: { type: "text" },
+      description: "Placeholder text shown inside the email input field",
+    },
+    ctaText: {
+      control: { type: "text" },
+      description: "Label text for the submit button",
+    },
+    successFeedback: {
+      control: { type: "text" },
+      description:
+        "Message shown below the input after a successful form submission",
+    },
+    anchorId: {
+      control: { type: "text" },
+      description: "HTML id attribute on the section element, used for scroll-to-section links",
+    },
+    caption: {
+      control: { type: "text" },
+      description: "Optional disclaimer or caption text rendered below the colored block",
+    },
+    onSubmit: {
+      action: "submitted",
+      description: "Callback fired with the submitted email value when the form is valid",
+    },
+  },
+  args: {
+    title: "Stay in the know",
+    emailInputDescription: "Sign up for updates, tips, and exclusive offers from Kinetic.",
+    inputPlaceholder: "Enter your email here",
+    ctaText: "Sign me up",
+    backgroundColor: "green",
+    anchorId: "email-input",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ─── Default ──────────────────────────────────────────────────────────────────
+
+export const Default: Story = {};
+
+// ─── Background Color Variants ────────────────────────────────────────────────
+
+export const GreenBackground: Story = {
+  args: {
+    backgroundColor: "green",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EmailInputBlock with a green background. Text is white.",
+      },
+    },
+  },
+};
+
+export const WhiteBackground: Story = {
+  args: {
+    backgroundColor: "white",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EmailInputBlock with a white background. Text is dark.",
+      },
+    },
+  },
+};
+
+export const YellowBackground: Story = {
+  args: {
+    backgroundColor: "yellow",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EmailInputBlock with a yellow background. Text is dark.",
+      },
+    },
+  },
+};
+
+export const BlueBackground: Story = {
+  args: {
+    backgroundColor: "blue",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EmailInputBlock with a blue background. Text is white.",
+      },
+    },
+  },
+};
+
+export const NavyBackground: Story = {
+  args: {
+    backgroundColor: "navy",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "EmailInputBlock with a navy background. Text is white.",
+      },
+    },
+  },
+};
+
+// ─── Success Feedback ─────────────────────────────────────────────────────────
+
+export const WithSuccessFeedback: Story = {
+  args: {
+    successFeedback: "Thanks! You're signed up for updates from Kinetic.",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates the success message after a valid email is submitted. Enter a valid email address (e.g. user@example.com) and click 'Sign me up' to see the successFeedback message appear below the input.",
+      },
+    },
+  },
+};
+
+// ─── Validation States ────────────────────────────────────────────────────────
+
+export const ValidationStates: Story = {
+  args: {
+    successFeedback: "You're all set! Welcome to Kinetic updates.",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use this story to interactively test validation states on the canvas:\n\n" +
+          "**Empty field error:** Click 'Sign me up' without entering anything → shows *'Email is required'*\n\n" +
+          "**Invalid email error:** Type a malformed email (e.g. `hello` or `hello@`) and click 'Sign me up' → shows *'Invalid email address'*\n\n" +
+          "**Success state:** Enter a valid email (e.g. `user@example.com`) and click 'Sign me up' → shows the success message.",
+      },
+    },
+  },
+};
+

package/src/contentful/blocks/find-kinetic/FindKinetic.stories.mocks.ts

@@ -0,0 +1,11 @@
+import type { FindKineticProps } from "./types";
+
+export const LOCATION_LIST: NonNullable<FindKineticProps["list"]> = [
+  { name: "New York", code: "new-york" },
+  { name: "California", code: "california" },
+  { name: "Texas", code: "texas" },
+  { name: "Florida", code: "florida" },
+  { name: "Illinois", code: "illinois" },
+  { name: "Ohio", code: "ohio" },
+  { name: "Georgia", code: "georgia" },
+];

package/src/contentful/blocks/find-kinetic/FindKinetic.stories.tsx

@@ -1,23 +1,140 @@
+import { LOCATION_LIST } from "./FindKinetic.stories.mocks";
 import { FindKinetic } from "./index";
+import type { FindKineticProps } from "./types";
 
 import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
+
+const argTypes: ArgTypes<FindKineticProps> = {
+  title: {
+    control: { type: "text" },
+    description: "Main heading of the block",
+  },
+  subTitle: {
+    control: { type: "text" },
+    description: "Sub-heading below the title",
+  },
+  description: {
+    control: { type: "text" },
+    description: "Body copy above the list",
+  },
+  enableHeading: {
+    control: { type: "boolean" },
+    description: "When true, renders title as h1 and subTitle as h2",
+  },
+  background: {
+    control: { type: "select" },
+    options: ["blue", "green", "navy", "purple", "white", "yellow"],
+    description: "Background color of the block",
+  },
+  color: {
+    control: { type: "radio" },
+    options: ["dark", "light"],
+    description: "Text color theme — use light on dark backgrounds",
+  },
+  image: {
+    control: { type: "text" },
+    description: "URL of the decorative aside image",
+  },
+  list: {
+    control: { type: "object" },
+    description: "Array of { name, code } location objects",
+  },
+  localPathPrefix: {
+    control: { type: "text" },
+    description: "Path prefix prepended to each location code link",
+  },
+  maxWidth: {
+    control: { type: "boolean" },
+    description: "Constrains inner content to a max-width container",
+  },
+  columns: {
+    control: { type: "select" },
+    options: [2, 3, 4],
+    description: "Number of columns in the list grid (not yet implemented in component)",
+  },
+};
 
 const meta: Meta<typeof FindKinetic> = {
   title: "Contentful Blocks/FindKinetic",
   component: FindKinetic,
   tags: ["autodocs"],
+  argTypes,
   parameters: {
-    layout: "centered",
+    layout: "fullscreen",
     docs: {
       page: DocsPage,
       description: {
-        component: "Contentful FindKinetic block.",
+        component: "A location finder block that displays a themed, full-width section with a linked list of serviceable locations. Supports 6 background colour themes (blue, green, navy, purple, white, yellow), light/dark text modes, an optional decorative aside image, and a responsive multi-column location link grid.",
       },
     },
   },
-  args: {},
+  args: {
+    title: "Find Kinetic Near You",
+    description: "Check availability in your area.",
+    background: "white",
+    color: "dark",
+    list: LOCATION_LIST,
+  },
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export const Default: Story = {};
+
+export const BackgroundWhite: Story = {
+  args: {
+    background: "white",
+  },
+};
+
+export const BackgroundBlue: Story = {
+  args: {
+    background: "blue",
+  },
+};
+
+export const BackgroundGreen: Story = {
+  args: {
+    background: "green",
+  },
+};
+
+export const BackgroundNavy: Story = {
+  args: {
+    background: "navy",
+    color: "light",
+  },
+};
+
+export const BackgroundPurple: Story = {
+  args: {
+    background: "purple",
+    color: "light",
+  },
+};
+
+export const BackgroundYellow: Story = {
+  args: {
+    background: "yellow",
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    image:
+      "https://images.ctfassets.net/8d4yn2ywtegc/1toxzgRb5VaVpdpsLWromO/8e5a9222d726b52a498eeea1340edd8c/AdobeStock_345768996.jpeg",
+  },
+};
+
+export const LightText: Story = {
+  args: {
+    background: "navy",
+    color: "light",
+  },
+};
+
+export const WithoutList: Story = {
+  args: {
+    list: [],
+  },
+};