@windstream/react-shared-components 0.2.19 → 0.2.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.19",
+  "version": "0.2.20",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/animation-wrapper/index.tsx

@@ -109,6 +109,7 @@ export function AnimationWrapper({
     return (
       <MotionComponent
         {...child.props}
+        ref={(child as any).ref}
         whileHover={mergedWhileHover}
         whileTap={mergedWhileTap}
         transition={mergedTransition}

package/src/components/brand-button/index.tsx

@@ -3,6 +3,7 @@
 import React, { forwardRef } from "react";
 import { getLabelSizeBasedOnButtonSize, sizeToClassNames } from "./helpers";
 
+import { AnimationWrapper } from "@shared/components/animation-wrapper";
 import {
   ButtonProps,
   ButtonVariantsT,
@@ -29,6 +30,8 @@ export const BrandButton = forwardRef<
       iconSize = 24,
       iconFill = 0,
       as = "button",
+      disableAnimation = true,
+      animationType,
       ...props
     },
     ref
@@ -99,29 +102,39 @@ export const BrandButton = forwardRef<
 
     if (as === "a") {
       return (
-        <a
-          ref={ref as React.Ref<HTMLAnchorElement>}
-          className={cx(combinedClassName)}
-          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
-          data-component="BrandButton"
-          data-variant={"anchor"}
+        <AnimationWrapper
+          disableAnimation={disableAnimation}
+          animationType={animationType}
         >
-          {contentEl}
-        </a>
+          <a
+            ref={ref as React.Ref<HTMLAnchorElement>}
+            className={cx(combinedClassName)}
+            {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+            data-component="BrandButton"
+            data-variant={"anchor"}
+          >
+            {contentEl}
+          </a>
+        </AnimationWrapper>
       );
     }
 
     return (
-      <button
-        ref={ref as React.Ref<HTMLButtonElement>}
-        className={cx(combinedClassName)}
-        disabled={disabled || isLoading}
-        {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
-        data-component="BrandButton"
-        data-variant={"button"}
+      <AnimationWrapper
+        disableAnimation={disableAnimation}
+        animationType={animationType}
       >
-        {contentEl}
-      </button>
+        <button
+          ref={ref as React.Ref<HTMLButtonElement>}
+          className={cx(combinedClassName)}
+          disabled={disabled || isLoading}
+          {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+          data-component="BrandButton"
+          data-variant={"button"}
+        >
+          {contentEl}
+        </button>
+      </AnimationWrapper>
     );
   }
 );

package/src/components/brand-button/types.ts

@@ -5,6 +5,7 @@ import type {
   IconName,
   Size,
 } from "@shared/components/material-icon/types";
+import type { AnimationType } from "@shared/components/animation-wrapper";
 
 export type ButtonVariantsT = "primary_brand" | "primary_inverse" | "secondary";
 
@@ -30,6 +31,8 @@ export type ButtonCustomProps = {
   iconName?: IconName;
   iconSize?: Size;
   iconFill?: Fill;
+  disableAnimation?: boolean;
+  animationType?: AnimationType | AnimationType[];
 };
 
 // Discriminated union types for polymorphic component

package/src/contentful/blocks/button/index.tsx

@@ -121,6 +121,8 @@ export const Button: React.FC<ButtonProps> = props => {
           buttonClassName={buttonClassName}
           size={size}
           onClick={linkClick}
+          disableAnimation={disableAnimation}
+          animationType={animationType}
         />
       ) : (
         <BrandButton
@@ -132,6 +134,8 @@ export const Button: React.FC<ButtonProps> = props => {
           size={size}
           onClick={buttonClick}
           buttonClassName={buttonClassName}
+          disableAnimation={disableAnimation}
+          animationType={animationType}
         />
       );
       break;
@@ -172,6 +176,8 @@ export const Button: React.FC<ButtonProps> = props => {
           iconName={iconName as any}
           iconSize={iconSize}
           iconFill={iconFill}
+          disableAnimation={disableAnimation}
+          animationType={animationType}
         />
       ) : (
         <BrandButton
@@ -186,6 +192,8 @@ export const Button: React.FC<ButtonProps> = props => {
           iconName={iconName as any}
           iconSize={iconSize}
           iconFill={iconFill}
+          disableAnimation={disableAnimation}
+          animationType={animationType}
         />
       );
       break;

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/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: [],
+  },
+};