@windstream/react-shared-components 0.2.21 → 0.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "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/anchored-bottom-banner/AnchoredBottomBanner.stories.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+
+import { AnchoredBottomBanner } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AnchoredBottomBanner> = {
+  title: "Contentful Blocks/AnchoredBottomBanner",
+  component: AnchoredBottomBanner,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A fixed-position bottom banner with an optional countdown timer, icon, and CTA link.",
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <>
+        <style>{`
+          #anchored-banner .fixed > a > div > div {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            flex-wrap: nowrap;
+          }
+          #anchored-banner .material-symbols-rounded {
+            flex-shrink: 0;
+          }
+        `}</style>
+        <Story />
+      </>
+    ),
+  ],
+  argTypes: {
+    ctaSuffixText: { control: "text" },
+    backgroundColor: {
+      control: "select",
+      options: ["navy", "yellow", "green", "purple", "blue", "white"],
+    },
+    iconName: { control: "text" },
+    boxShadow: { control: "boolean" },
+    ctaButtonLabel: { control: "text" },
+    ctaButtonLink: { control: "text" },
+    ctaButtonTarget: {
+      control: "select",
+      options: ["_self", "_blank"],
+    },
+    anchorId: { control: "text" },
+    enableCountdownTimer: { control: "boolean" },
+    countdownStartDateTime: {
+      control: "date",
+      description: "Timer becomes visible after this time",
+    },
+    countdownEndDateTime: {
+      control: "date",
+      description: "Timer counts down to this time",
+    },
+  },
+  render: args => {
+    const { countdownStartDateTime, countdownEndDateTime, ...rest } = args;
+    return (
+      <AnchoredBottomBanner
+        {...rest}
+        countdownStartDateTime={
+          typeof countdownStartDateTime === "number" &&
+          Number.isFinite(countdownStartDateTime)
+            ? new Date(countdownStartDateTime).toISOString()
+            : (countdownStartDateTime as string | undefined)
+        }
+        countdownEndDateTime={
+          typeof countdownEndDateTime === "number" &&
+          Number.isFinite(countdownEndDateTime)
+            ? new Date(countdownEndDateTime).toISOString()
+            : (countdownEndDateTime as string | undefined)
+        }
+      />
+    );
+  },
+  args: {
+    ctaSuffixText: "to order Kinetic today",
+    backgroundColor: "yellow",
+    iconName: "call",
+    boxShadow: true,
+    ctaButtonLabel: "call (866) 445-8084",
+    ctaButtonLink: "tel:+1-866-445-8084",
+    ctaButtonTarget: "_blank",
+    anchorId: "anchored-banner",
+    enableCountdownTimer: false,
+    countdownStartDateTime: "2026-07-10T00:00:00.000Z",
+    countdownEndDateTime: "2026-12-31T23:59:59.000Z",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithCountdownTimer: Story = {
+  args: {
+    enableCountdownTimer: true,
+    countdownStartDateTime: new Date("2026-07-10T00:00:00.000Z").getTime() as unknown as string,
+    countdownEndDateTime: new Date("2026-12-31T23:59:59.000Z").getTime() as unknown as string,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    iconName: "call",
+    ctaButtonLabel: "call (866) 445-8084",
+    ctaButtonLink: "tel:+1-866-445-8084",
+    backgroundColor: "green",
+    enableCountdownTimer: false,
+  },
+};
+
+export const WithSuffixText: Story = {
+  args: {
+    ctaSuffixText: "to order Kinetic today",
+    ctaButtonLabel: "call (866) 445-8084",
+    ctaButtonLink: "tel:+1-866-445-8084",
+    backgroundColor: "navy",
+  },
+};
+
+export const BackgroundNavy: Story = {
+  args: { backgroundColor: "navy" },
+};
+
+export const BackgroundYellow: Story = {
+  args: { backgroundColor: "yellow" },
+};
+
+export const BackgroundGreen: Story = {
+  args: { backgroundColor: "green" },
+};
+
+export const BackgroundPurple: Story = {
+  args: { backgroundColor: "purple" },
+};
+
+export const BackgroundBlue: Story = {
+  args: { backgroundColor: "blue" },
+};
+
+export const BackgroundWhite: Story = {
+  args: { backgroundColor: "white", boxShadow: true },
+};

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/callout/Callout.stories.mocks.ts

@@ -0,0 +1,327 @@
+import type { CalloutProps } from "./types";
+
+/* Card Items */
+
+export const defaultSimpleItems: CalloutProps["items"] = [
+  {
+    title: "ultra-fast fiber internet",
+    body: "Reliable high-speed internet for your home on our fiber-backed network.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/2tArpGyb6Pmog6tU972NRR/07761d8a230242e0e8e302dbc0345f5e/icon.svg",
+    imageAlt: "Purple speedometer",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "left",
+    imageView: "standard",
+    cta: {
+      buttonLabel: "See options",
+      href: "/fiber-internet",
+      target: "_self",
+      showButtonAs: "text",
+      preserveQueryParameters: true,
+    },
+    ctaAlignment: "left",
+    showBackgroundImage: true,
+    // Blog-compatible fields
+    shortDescription: "Reliable high-speed internet for your home on our fiber-backed network.",
+    slug: "/fiber-internet",
+    blogCreationDate: "2026-01-15",
+    category: "Internet",
+    cover: { src: "https://images.ctfassets.net/8d4yn2ywtegc/17t6o3lIEE1OmyRtK2LSiN/7c00763e6afc39e97492c8aa3a3e5260/image_390.jpg", alt: "Fiber internet", width: 1920, height: 1281 },
+    // FullImage / FloatingImage-compatible fields
+    description: "Reliable high-speed internet for your home on our fiber-backed network.",
+    caption: "Fiber-backed network",
+  },
+  {
+    title: "tv and entertainment",
+    body: "Start streaming with best-in-class live entertainment.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/2XHS5ndV3g8qq4GmDxdmai/911b3dcfe6ba2240dd09b4d4153390a5/icon-1.svg",
+    imageAlt: "Green streaming play",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "left",
+    imageView: "standard",
+    cta: {
+      buttonLabel: "See options",
+      href: "/products",
+      target: "_self",
+      showButtonAs: "text",
+      preserveQueryParameters: true,
+    },
+    ctaAlignment: "left",
+    // Blog-compatible fields
+    shortDescription: "Start streaming with best-in-class live entertainment.",
+    slug: "/products",
+    blogCreationDate: "2026-02-20",
+    category: "Entertainment",
+    cover: { src: "https://images.ctfassets.net/8d4yn2ywtegc/2QoSoX9jUc6G8Tvg007MI0/7ae950e16d2ac83ff75b992dc9e24c37/image_388.jpg", alt: "TV entertainment", width: 1920, height: 1281 },
+    // FullImage / FloatingImage-compatible fields
+    description: "Start streaming with best-in-class live entertainment.",
+    caption: "Live entertainment",
+  },
+  {
+    title: "voice services",
+    body: "Unlimited nationwide voice calling with Kinetic phone service.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/1JPpHXSe3WcQBOSTHhK3YD/9398907485bc13a90e46df73a4c6634c/icon-2.svg",
+    imageAlt: "Blue phone",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "left",
+    imageView: "standard",
+    cta: {
+      buttonLabel: "See options",
+      href: "/home-phone",
+      target: "_self",
+      showButtonAs: "text",
+      preserveQueryParameters: true,
+    },
+    ctaAlignment: "left",
+    // Blog-compatible fields
+    shortDescription: "Unlimited nationwide voice calling with Kinetic phone service.",
+    slug: "/home-phone",
+    blogCreationDate: "2026-03-10",
+    category: "Phone",
+    cover: { src: "https://images.ctfassets.net/8d4yn2ywtegc/6CVKQrlrmcuNyefT6jM96d/8264de217e3822c0e7284c823c57314c/image_391.jpg", alt: "Voice services", width: 1920, height: 1280 },
+    // FullImage / FloatingImage-compatible fields
+    description: "Unlimited nationwide voice calling with Kinetic phone service.",
+    caption: "Nationwide calling",
+  },
+];
+
+/* Floating Image Card Items */
+
+export const floatingImageItems: CalloutProps["items"] = [
+  {
+    cardType: "floatingImage",
+    title: "pick your favorite video conferencing spot",
+    body: "Our technicians can ensure Wi-Fi reaches your home office with optimal connectivity.",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/17t6o3lIEE1OmyRtK2LSiN/7c00763e6afc39e97492c8aa3a3e5260/image_390.jpg",
+      title: "Pick your favorite spot",
+      width: 1920,
+      height: 1281,
+    },
+  },
+  {
+    cardType: "floatingImage",
+    title: "stream and game from anywhere",
+    body: "Strong Wi-Fi throughout your whole home means you can enjoy your favorite movies, sports, and video games from every room.",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/2QoSoX9jUc6G8Tvg007MI0/7ae950e16d2ac83ff75b992dc9e24c37/image_388.jpg",
+      title: "Stream and game from anywhere",
+      width: 1920,
+      height: 1281,
+    },
+  },
+  {
+    cardType: "floatingImage",
+    title: "manage your smart home",
+    body: "Let our technicians know what smart devices you need connected during your Wi-Fi installation for seamless coverage.",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/6CVKQrlrmcuNyefT6jM96d/8264de217e3822c0e7284c823c57314c/image_391.jpg",
+      title: "Brother and sister smart home",
+      width: 1920,
+      height: 1280,
+    },
+  },
+];
+
+/* Full Image Card Items */
+
+export const fullImageItems: CalloutProps["items"] = [
+  {
+    cardType: "fullImage",
+    title: "Stream in 4K",
+    description: "Crystal clear entertainment on every device.",
+    caption: "Starting at $49/mo",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/2QoSoX9jUc6G8Tvg007MI0/7ae950e16d2ac83ff75b992dc9e24c37/image_388.jpg",
+      title: "Streaming",
+      width: 1920,
+      height: 1281,
+    },
+    cta: {
+      buttonLabel: "Learn more",
+      href: "/streaming",
+      showButtonAs: "solid",
+      buttonVariant: "primary_brand",
+    },
+  },
+  {
+    cardType: "fullImage",
+    title: "Work From Home",
+    description: "Stay productive with reliable, fast internet.",
+    caption: "Starting at $59/mo",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/17t6o3lIEE1OmyRtK2LSiN/7c00763e6afc39e97492c8aa3a3e5260/image_390.jpg",
+      title: "Work from home",
+      width: 1920,
+      height: 1281,
+    },
+    cta: {
+      buttonLabel: "See plans",
+      href: "/plans",
+      showButtonAs: "solid",
+      buttonVariant: "primary_brand",
+    },
+  },
+  {
+    cardType: "fullImage",
+    title: "Game Online",
+    description: "Low latency for competitive gaming.",
+    caption: "Starting at $69/mo",
+    image: {
+      href: "https://images.ctfassets.net/8d4yn2ywtegc/6CVKQrlrmcuNyefT6jM96d/8264de217e3822c0e7284c823c57314c/image_391.jpg",
+      title: "Gaming",
+      width: 1920,
+      height: 1280,
+    },
+    cta: {
+      buttonLabel: "Get started",
+      href: "/gaming",
+      showButtonAs: "solid",
+      buttonVariant: "primary_brand",
+    },
+  },
+];
+
+/*  Blog Card Items */
+
+export const blogItems: CalloutProps["items"] = [
+  {
+    cardType: "blog",
+    title: "How to Choose the Right Internet Plan",
+    shortDescription: "A guide to picking the best plan for your needs.",
+    blogCreationDate: "2026-01-15",
+    category: "Guides",
+    slug: "/blog/choose-internet-plan",
+    cover: {
+      src: "https://images.ctfassets.net/8d4yn2ywtegc/17t6o3lIEE1OmyRtK2LSiN/7c00763e6afc39e97492c8aa3a3e5260/image_390.jpg",
+      alt: "Internet plan guide",
+      width: 1920,
+      height: 1281,
+    },
+  },
+  {
+    cardType: "blog",
+    title: "Top 5 Tips for Faster Wi-Fi",
+    shortDescription: "Simple tricks to boost your home network speed.",
+    blogCreationDate: "2026-02-20",
+    category: "Tips",
+    slug: "/blog/faster-wifi-tips",
+    cover: {
+      src: "https://images.ctfassets.net/8d4yn2ywtegc/2QoSoX9jUc6G8Tvg007MI0/7ae950e16d2ac83ff75b992dc9e24c37/image_388.jpg",
+      alt: "Wi-Fi tips",
+      width: 1920,
+      height: 1281,
+    },
+  },
+  {
+    cardType: "blog",
+    title: "Understanding Fiber Optic Internet",
+    shortDescription: "Everything you need to know about fiber technology.",
+    blogCreationDate: "2026-03-10",
+    category: "Technology",
+    slug: "/blog/fiber-optic-internet",
+    cover: {
+      src: "https://images.ctfassets.net/8d4yn2ywtegc/6CVKQrlrmcuNyefT6jM96d/8264de217e3822c0e7284c823c57314c/image_391.jpg",
+      alt: "Fiber optic technology",
+      width: 1920,
+      height: 1280,
+    },
+  },
+];
+
+/* Default Callout Args  */
+
+export const defaultCalloutArgs: Partial<CalloutProps> = {
+  title: "whatever you need, Kinetic can deliver",
+  subtitle:
+    "We're not just delivering high-speed internet. We're delivering it with local care, backed by people who live and work right here in your community. That means service you can count on and people you can trust.",
+  items: defaultSimpleItems,
+  cardType: "simple",
+  cardStackingMobile: true,
+  backgroundColor: "white",
+  textColor: "#00002d",
+  cardsWidth: true,
+  maxCardsPerRow: 3,
+  applyBoxShadow: false,
+};
+
+/* Floating Image Callout Args — mirrors martech */
+
+export const withFloatingImageArgs: Partial<CalloutProps> = {
+  anchorId: "callout",
+  title: "we'll connect your devices, so you don't have to",
+  subtitle:
+    "With Kinetic's Whole Home Wi-Fi Set Up, our technicians ensure you can get online quickly from any device, anywhere in your home.",
+  items: floatingImageItems,
+  cardType: "floatingImage",
+  cardStackingMobile: true,
+  background: "#fff",
+  textColor: "#00002D",
+  maxCardsPerRow: 3,
+};
+
+/* Four Column Items */
+
+export const fourColumnItems: CalloutProps["items"] = [
+  {
+    title: "1 Gig Internet",
+    body: "Download speeds up to 1 Gbps for the ultimate connected home.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/2tArpGyb6Pmog6tU972NRR/07761d8a230242e0e8e302dbc0345f5e/icon.svg",
+    imageAlt: "Purple speedometer",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "center",
+    imageView: "icon",
+    cta: { buttonLabel: "View plan", href: "/plans/1gig", showButtonAs: "text" },
+    ctaAlignment: "center",
+  },
+  {
+    title: "500 Mbps Internet",
+    body: "Fast enough for streaming, gaming, and video calls simultaneously.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/2XHS5ndV3g8qq4GmDxdmai/911b3dcfe6ba2240dd09b4d4153390a5/icon-1.svg",
+    imageAlt: "Green streaming play",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "center",
+    imageView: "icon",
+    cta: { buttonLabel: "View plan", href: "/plans/500", showButtonAs: "text" },
+    ctaAlignment: "center",
+  },
+  {
+    title: "300 Mbps Internet",
+    body: "Great for households with multiple connected devices.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/1JPpHXSe3WcQBOSTHhK3YD/9398907485bc13a90e46df73a4c6634c/icon-2.svg",
+    imageAlt: "Blue phone",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "center",
+    imageView: "icon",
+    cta: { buttonLabel: "View plan", href: "/plans/300", showButtonAs: "text" },
+    ctaAlignment: "center",
+  },
+  {
+    title: "100 Mbps Internet",
+    body: "Reliable everyday internet for browsing and email.",
+    image: "https://images.ctfassets.net/8d4yn2ywtegc/2tArpGyb6Pmog6tU972NRR/07761d8a230242e0e8e302dbc0345f5e/icon.svg",
+    imageAlt: "Purple speedometer",
+    imageWidth: 88,
+    imageHeight: 88,
+    iconAlignment: "center",
+    imageView: "icon",
+    cta: { buttonLabel: "View plan", href: "/plans/100", showButtonAs: "text" },
+    ctaAlignment: "center",
+  },
+];
+
+/* Six Column Items */
+
+export const sixColumnItems: CalloutProps["items"] = [
+  { title: "Speed", body: "Up to 1 Gbps fiber speeds." },
+  { title: "Reliability", body: "99.9% uptime guaranteed." },
+  { title: "Support", body: "24/7 local customer care." },
+  { title: "Value", body: "No hidden fees or contracts." },
+  { title: "Security", body: "Built-in network protection." },
+  { title: "Flexibility", body: "Upgrade anytime, no penalty." },
+];