@windstream/react-shared-components 0.2.21 → 0.2.22

package/package.json

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

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

@@ -1,7 +1,11 @@
 "use client";
 
 import React from "react";
-import { AnimationType, AnimationWrapperProps } from "./types";
+import {
+  AnimationType,
+  AnimationWrapperProps,
+  DEFAULT_BUTTON_ANIMATION_TYPE,
+} from "./types";
 import { motion, useReducedMotion } from "framer-motion";
 
 interface AnimationPreset {
@@ -66,7 +70,7 @@ function mergePresets(animationType?: AnimationType | AnimationType[]) {
 
 export function AnimationWrapper({
   children,
-  animationType,
+  animationType = DEFAULT_BUTTON_ANIMATION_TYPE,
   // default to true for backward compatibility
   disableAnimation = true,
   whileHover,
@@ -84,6 +88,7 @@ export function AnimationWrapper({
     return child;
   }
 
+  // Use the provided animationType, falling back to the centralized default.
   const preset = mergePresets(animationType);
 
   const mergedWhileHover = preset
@@ -132,4 +137,5 @@ export function AnimationWrapper({
 
 AnimationWrapper.displayName = "AnimationWrapper";
 
+export { DEFAULT_BUTTON_ANIMATION_TYPE };
 export type { AnimationWrapperProps, AnimationType };

package/src/components/animation-wrapper/types.ts

@@ -9,6 +9,12 @@ export type AnimationType =
   | "grow"
   | "pop";
 
+/**
+ * Single source of truth for the default button animation type.
+ * Change this value to update the default button animation across the app.
+ */
+export const DEFAULT_BUTTON_ANIMATION_TYPE: AnimationType = "pop";
+
 export interface AnimationWrapperProps
   extends Omit<HTMLMotionProps<"div">, "children"> {
   children: ReactElement;

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

@@ -3,7 +3,10 @@
 import React, { forwardRef } from "react";
 import { getLabelSizeBasedOnButtonSize, sizeToClassNames } from "./helpers";
 
-import { AnimationWrapper } from "@shared/components/animation-wrapper";
+import {
+  AnimationWrapper,
+  DEFAULT_BUTTON_ANIMATION_TYPE,
+} from "@shared/components/animation-wrapper";
 import {
   ButtonProps,
   ButtonVariantsT,
@@ -29,9 +32,15 @@ export const BrandButton = forwardRef<
       iconName,
       iconSize = 24,
       iconFill = 0,
+      // `disableAnimation` is intentionally NOT defaulted to `false` here.
+      // Animations are opt-in by design: when this prop is left undefined,
+      // AnimationWrapper falls back to its own default of `true` (animation
+      // disabled). This keeps behavior consistent with the CMS contract where
+      // an unset value means "no animation". Animation runs only when a caller
+      // (or Contentful) explicitly passes `disableAnimation={false}`.
+      disableAnimation,
+      animationType = DEFAULT_BUTTON_ANIMATION_TYPE,
       as = "button",
-      disableAnimation = true,
-      animationType,
       ...props
     },
     ref

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

@@ -1,7 +1,10 @@
 import React from "react";
 import { ButtonProps } from "./types";
 
-import { AnimationWrapper } from "@shared/components/animation-wrapper";
+import {
+  AnimationWrapper,
+  DEFAULT_BUTTON_ANIMATION_TYPE,
+} from "@shared/components/animation-wrapper";
 import { BrandButton, ButtonVariantsT } from "@shared/components/brand-button";
 import { Button as CoreButton } from "@shared/components/button";
 import { Link } from "@shared/components/link";
@@ -35,8 +38,8 @@ export const Button: React.FC<ButtonProps> = props => {
     size,
     iconSize = 24,
     preserveQueryParameters,
-    disableAnimation = true,
-    animationType,
+    disableAnimation,
+    animationType = DEFAULT_BUTTON_ANIMATION_TYPE,
     ...rest
   } = props;
 
@@ -51,6 +54,12 @@ export const Button: React.FC<ButtonProps> = props => {
       cta: { ...props },
     });
     return React.isValidElement(checkPlansNode) ? (
+      // `disableAnimation` is passed through as-is (not defaulted to `false`).
+      // Animations are opt-in: when unset, AnimationWrapper falls back to its
+      // default of `true` (disabled), matching the CMS contract where an unset
+      // value means "no animation". This stays consistent with the other
+      // branches in this block. Animation runs only when a caller explicitly
+      // passes `disableAnimation={false}`.
       <AnimationWrapper
         disableAnimation={disableAnimation}
         animationType={animationType}

package/src/contentful/blocks/image-promo-bar/index.test.tsx

@@ -7,11 +7,21 @@ import { fireEvent, render, screen } from "@testing-library/react";
 jest.mock("../button", () => ({
   __esModule: true,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  Button: ({ buttonLabel, ...rest }: any) => (
-    <button data-testid="cta-button">{buttonLabel || "CTA"}</button>
+  Button: ({ buttonLabel, disableAnimation, ...rest }: any) => (
+    <button
+      data-testid="cta-button"
+      data-disable-animation={String(disableAnimation)}
+    >
+      {buttonLabel || "CTA"}
+    </button>
   ),
-  default: ({ buttonLabel }: any) => (
-    <button data-testid="cta-button">{buttonLabel || "CTA"}</button>
+  default: ({ buttonLabel, disableAnimation }: any) => (
+    <button
+      data-testid="cta-button"
+      data-disable-animation={String(disableAnimation)}
+    >
+      {buttonLabel || "CTA"}
+    </button>
   ),
 }));
 
@@ -245,6 +255,37 @@ describe("ImagePromoBar", () => {
       const { container } = render(<ImagePromoBar {...defaultProps} />);
       expect(container.querySelector(".primary-cta")).not.toBeInTheDocument();
     });
+
+    it("keeps disableAnimation true on both CTAs by default", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          cta={{ buttonLabel: "Primary" }}
+          secondaryCta={{ buttonLabel: "Secondary" }}
+        />
+      );
+      const buttons = screen.getAllByTestId("cta-button");
+      expect(buttons).toHaveLength(2);
+      buttons.forEach(button => {
+        expect(button).toHaveAttribute("data-disable-animation", "true");
+      });
+    });
+
+    it("passes disableAnimation false to both CTAs when enableAnimation is true", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          cta={{ buttonLabel: "Primary" }}
+          secondaryCta={{ buttonLabel: "Secondary" }}
+          enableAnimation={true}
+        />
+      );
+      const buttons = screen.getAllByTestId("cta-button");
+      expect(buttons).toHaveLength(2);
+      buttons.forEach(button => {
+        expect(button).toHaveAttribute("data-disable-animation", "false");
+      });
+    });
   });
 
   describe("Image", () => {

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -36,6 +36,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   onModalButtonClick,
   onClick,
   renderCheckPlans,
+  enableAnimation = false,
 }) => {
   const [activeVideo, setActiveVideo] = useState("");
   const [isHovered, setIsHovered] = useState(false);
@@ -138,11 +139,12 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             )}
             {/* CTAs and Disclaimers */}
             {(cta || secondaryCta) && (
-              <div className="flex w-full flex-col gap-3 xl:flex-row">
+              <div className="flex w-full flex-col gap-4 xl:flex-row">
                 {cta && (
                   <div className="primary-cta w-full xl:w-auto xl:shrink-0">
                     <Button
                       {...cta}
+                      disableAnimation={!enableAnimation}
                       fullWidth={true}
                       size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}
@@ -155,6 +157,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                   <div className="secondary-cta w-full xl:w-auto xl:shrink-0">
                     <Button
                       {...secondaryCta}
+                      disableAnimation={!enableAnimation}
                       fullWidth={true}
                       size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -36,6 +36,7 @@ export type ImagePromoBarProps = {
   videoLink: VideoLinkProps;
   maxWidth?: boolean;
   color: "light" | "dark";
+  enableAnimation?: boolean;
   onModalButtonClick?: (id?: string) => void;
   onClick?: (event: React.MouseEvent, source: "primary" | "secondary") => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;

package/src/index.ts

@@ -84,6 +84,7 @@ export { Tooltip } from "./components/tooltip";
 export type { ToolTipProps } from "./components/tooltip";
 
 export { AnimationWrapper } from "./components/animation-wrapper";
+export { DEFAULT_BUTTON_ANIMATION_TYPE } from "./components/animation-wrapper";
 export type {
   AnimationWrapperProps,
   AnimationType,