@windstream/react-shared-components 0.1.70 → 0.1.72

package/package.json

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

package/src/components/next-image/index.tsx

@@ -24,7 +24,9 @@ const resolveDefaultExport = (mod: unknown): unknown => {
   }
   return current;
 };
-const NextJsImage = resolveDefaultExport(NextJsImageImport) as typeof NextJsImageImport;
+const NextJsImage = resolveDefaultExport(
+  NextJsImageImport
+) as typeof NextJsImageImport;
 
 export interface NextImageComponentProps extends NextImageProps {
   className?: string;

package/src/contentful/blocks/accordion/Accordion.stories.mocks.tsx

@@ -37,7 +37,7 @@ export const RICH_FAQ_ITEMS: AccordionItem[] = [
 
         <p>You can check your windstream.net emails in the following ways:</p>
 
-        <ol className="list-decimal ml-6">
+        <ol className="ml-6 list-decimal">
           <li>
             Go to <strong>www.windstream.net</strong> and click{" "}
             <strong>Email</strong> in the top‑right of the menu bar.
@@ -60,7 +60,7 @@ export const RICH_FAQ_ITEMS: AccordionItem[] = [
           <strong>Wanting to set up a new .net email account?</strong>
         </p>
 
-        <ul className="list-disc ml-6">
+        <ul className="ml-6 list-disc">
           <li>
             If you do not already have a windstream.net email account, new
             windstream.net email addresses are no longer being created.
@@ -78,9 +78,9 @@ export const RICH_FAQ_ITEMS: AccordionItem[] = [
     description: (
       <>
         <p>
-          For a household with <strong>4+ internet users</strong> who use the web
-          for online gaming, music and video streaming, uploading pictures and
-          videos, as well as email and browsing, a{" "}
+          For a household with <strong>4+ internet users</strong> who use the
+          web for online gaming, music and video streaming, uploading pictures
+          and videos, as well as email and browsing, a{" "}
           <strong>1‑Gigabit plan</strong> would be best suited.
         </p>
 
@@ -117,12 +117,12 @@ export const RICH_FAQ_ITEMS: AccordionItem[] = [
     description: (
       <>
         <p>
-          Yes, of course! You are under no obligation. If a situation arises that
-          requires a change, simply give us a call at{" "}
+          Yes, of course! You are under no obligation. If a situation arises
+          that requires a change, simply give us a call at{" "}
           <strong>855‑939‑2381</strong>.
         </p>
       </>
     ),
   },
 ];
-``
+``;

package/src/contentful/blocks/accordion/Accordion.stories.tsx

@@ -1,9 +1,9 @@
+import { FAQ_ITEMS, RICH_FAQ_ITEMS } from "./Accordion.stories.mocks";
 import { Accordion } from "./index";
 import type { AccordionProps } from "./types";
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj, ArgTypes } from "@storybook/react";
 
-import { FAQ_ITEMS, RICH_FAQ_ITEMS } from "./Accordion.stories.mocks";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
 
 /* ------------
    ArgTypes
@@ -20,15 +20,7 @@ const argTypes: ArgTypes<AccordionProps> = {
   },
   background: {
     control: { type: "select" as const },
-    options: [
-      "blue",
-      "green",
-      "yellow",
-      "purple",
-      "white",
-      "navy",
-      "cream500",
-    ],
+    options: ["blue", "green", "yellow", "purple", "white", "navy", "cream500"],
     description: "Background color of the accordion",
   },
   enableHeading: {
@@ -103,4 +95,4 @@ export const WithRichTextContent = {
     title: "FAQs - Rich Content",
     items: RICH_FAQ_ITEMS,
   },
-};
+};

package/src/contentful/blocks/address-input-banner/index.tsx

@@ -6,9 +6,9 @@ import { cx } from "@shared/utils";
 
 const variantStyles: Record<string, { bg: string; text: string }> = {
   yellow: { bg: "bg-fill-brand-accent", text: "text" },
-  white: { bg: "bg-white", text: "text" },
-  navy: { bg: "bg-bg-fill-inverse", text: "text-inverse" },
-  green: { bg: "bg-border-success", text: "text-inverse" },
+  white: { bg: "white", text: "text" },
+  navy: { bg: "bg-fill-inverse", text: "text-inverse" },
+  green: { bg: "bg-fill-success", text: "text-inverse" },
 };
 
 export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
@@ -39,11 +39,11 @@ export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
         top: `${navHeight}px`,
       }}
       className={cx(
-        `sticky left-0 right-0 z-[89] w-full shadow-drop transition-all duration-200 lg:fixed bg-${style.bg} text-${style.text}`,
+        `sticky left-0 right-0 z-[89] w-full shadow-drop transition-all duration-200 bg-${style.bg} text-${style.text}`,
         "flex flex-col items-center justify-center gap-3 p-[10px] lg:flex-row lg:gap-8 lg:px-6 lg:py-[10px]"
       )}
     >
-      <Text className="label3 w-full text-center text-text lg:w-auto lg:text-left">
+      <Text className="label3 w-full text-center md:label1 lg:w-auto lg:text-left">
         {title}
       </Text>
       {renderedCheckPlans}

package/src/contentful/blocks/anchored-bottom-banner/index.tsx

@@ -1,9 +1,34 @@
-import React from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { AnchoredBottomBannerProps } from "./types";
 import Link from "next/link";
 
 import { MaterialIcon } from "@shared/components/material-icon";
 
+function parseCountdownDateTime(value?: string): number | undefined {
+  if (!value) return undefined;
+  const parsed = Date.parse(value);
+  if (!Number.isFinite(parsed)) {
+    console.error("Invalid countdown datetime", { value });
+    return undefined;
+  }
+  return parsed;
+}
+
+function formatCountdown(totalSeconds: number) {
+  const safeSeconds = Math.max(0, Math.floor(totalSeconds));
+  const hours = Math.floor(safeSeconds / 3600);
+  const minutes = Math.floor((safeSeconds % 3600) / 60);
+  const seconds = safeSeconds % 60;
+
+  return `${String(hours).padStart(2, "0")}H : ${String(minutes).padStart(2, "0")}M : ${String(seconds).padStart(2, "0")}`;
+}
+
 export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   ctaSuffixText,
   backgroundColor,
@@ -13,6 +38,9 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
   ctaButtonLink,
   ctaButtonTarget,
   anchorId = "anchored-banner",
+  enableCountdownTimer,
+  countdownStartDateTime,
+  countdownEndDateTime,
 }) => {
   const backGroundColorClasses = {
     navy: "bg-bg-fill-inverse",
@@ -20,14 +48,91 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
     blue: "bg-bg-fill-brand-supporting",
     purple: "bg-bg-fill-brand-tertiary",
     yellow: "bg-bg-fill-brand-accent",
+    white: "bg-white",
   };
 
   const bgClass = backgroundColor
     ? backGroundColorClasses[backgroundColor]
     : "bg-bg-fill-brand-accent";
 
-  const isYellow = backgroundColor === "yellow" || !backgroundColor;
-  const textColorClass = isYellow ? "text-text-primary" : "text-white";
+  const isLightBackground =
+    backgroundColor === "yellow" ||
+    backgroundColor === "white" ||
+    !backgroundColor;
+  const textColorClass = isLightBackground ? "text-text-primary" : "text-white";
+
+  // Memoize parsed timestamps so they aren't re-parsed every second
+  const endMs = useMemo(
+    () => parseCountdownDateTime(countdownEndDateTime),
+    [countdownEndDateTime]
+  );
+  const startMs = useMemo(
+    () => parseCountdownDateTime(countdownStartDateTime),
+    [countdownStartDateTime]
+  );
+
+  const isTimerValid = useMemo(() => {
+    if (!enableCountdownTimer || endMs === undefined) return false;
+    if (countdownStartDateTime && startMs === undefined) return false;
+    if (startMs !== undefined && startMs >= endMs) {
+      console.error("Invalid countdown range: start must be before end", {
+        countdownStartDateTime,
+        countdownEndDateTime,
+      });
+      return false;
+    }
+    return true;
+  }, [
+    enableCountdownTimer,
+    endMs,
+    startMs,
+    countdownStartDateTime,
+    countdownEndDateTime,
+  ]);
+
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const intervalRef = useRef<number | null>(null);
+
+  const clearTimer = useCallback(() => {
+    if (intervalRef.current !== null) {
+      window.clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isTimerValid) {
+      clearTimer();
+      return;
+    }
+
+    intervalRef.current = window.setInterval(() => {
+      const now = Date.now();
+      // Auto-clear interval once countdown expires
+      if (endMs !== undefined && now >= endMs) {
+        clearTimer();
+      }
+      setNowMs(now);
+    }, 1000);
+
+    return clearTimer;
+  }, [isTimerValid, endMs, clearTimer]);
+
+  const countdown = useMemo(() => {
+    if (!isTimerValid || endMs === undefined) {
+      return { shouldShow: false, text: "" };
+    }
+
+    const isBeforeStart = startMs !== undefined && nowMs < startMs;
+    const isAfterEnd = nowMs >= endMs;
+    if (isBeforeStart || isAfterEnd) return { shouldShow: false, text: "" };
+
+    const remainingSeconds = (endMs - nowMs) / 1000;
+    return {
+      shouldShow: remainingSeconds > 0,
+      text: formatCountdown(remainingSeconds),
+    };
+  }, [isTimerValid, endMs, startMs, nowMs]);
 
   return (
     <section id={anchorId}>
@@ -57,6 +162,12 @@ export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
                   className={`${textColorClass} align-text-bottom`}
                 />
               )}
+              {countdown.shouldShow && (
+                <span className="inline-block whitespace-nowrap rounded-lg bg-white px-1 tabular-nums text-text">
+                  {countdown.text}
+                </span>
+              )}
+              {countdown.shouldShow ? " " : null}
               {ctaButtonLabel && ctaButtonLabel}{" "}
               {ctaSuffixText && <span className="ml-0.5">{ctaSuffixText}</span>}
             </div>

package/src/contentful/blocks/anchored-bottom-banner/types.ts

@@ -1,10 +1,13 @@
 export interface AnchoredBottomBannerProps {
   ctaSuffixText?: string;
-  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue";
+  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue" | "white";
   iconName?: string;
   boxShadow?: boolean;
   ctaButtonLabel?: string;
   ctaButtonLink?: string;
   ctaButtonTarget?: string;
   anchorId?: string;
+  enableCountdownTimer?: boolean;
+  countdownStartDateTime?: string;
+  countdownEndDateTime?: string;
 }

package/src/contentful/blocks/blogs-grid-base/types.ts

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { BlogCardImageProps } from "@shared/contentful/blocks/cards/blog-card/types";
 
 export interface BlogCardProps {

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

@@ -1,64 +1,205 @@
 import React from "react";
+import { Button } from "../button";
 import BlogCard from "../cards/blog-card";
+import FloatingImageCard from "../cards/floating-image-card";
+import FullImageCard from "../cards/full-image-card";
 import SimpleCard from "../cards/simple-card";
-import { CalloutProps } from "./types";
+import { CalloutCardType, CalloutItem, CalloutProps } from "./types";
 
 import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+const backgroundClassMap: Record<string, string> = {
+  cream500: "bg-[#FFFEEF]",
+  gray100: "bg-fill-secondary",
+  white: "bg-white",
+  transparent: "",
+  blue: "bg-fill-brand",
+  green: "bg-fill-brand-accent",
+  navy: "bg-fill-inverse",
+  purple: "bg-fill-brand-tertiary",
+  yellow: "bg-[#F5FF1E]",
+};
+
+// Literal class strings (Tailwind JIT only picks up literal tokens; do not
+// build these by concatenation at runtime).
+const baseColMap: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+};
+const lgColMap: Record<number, string> = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+};
+const xlColMap: Record<number, string> = {
+  1: "xl:grid-cols-1",
+  2: "xl:grid-cols-2",
+  3: "xl:grid-cols-3",
+  4: "xl:grid-cols-4",
+  5: "xl:grid-cols-5",
+  6: "xl:grid-cols-6",
+};
+
+/**
+ * Mirrors the local @ui Callout `calculateOptimalColumns` logic:
+ *   - ≤4 cards: one per column
+ *   - divisible by 3: 3 cols
+ *   - divisible by 4: 4 cols
+ *   - >6 cards: 4 cols
+ *   - else: 3 cols
+ */
+const calculateOptimalColumns = (count: number): number => {
+  if (count <= 4) return count || 1;
+  if (count % 3 === 0) return 3;
+  if (count % 4 === 0) return 4;
+  if (count > 6) return 4;
+  return 3;
+};
+
+const clampCol = (n: number) => Math.max(1, Math.min(6, n));
 
 export const Callout: React.FC<CalloutProps> = ({
+  anchorId,
   title,
   items,
   enableHeading = false,
   subtitle,
+  description,
+  finePrint,
+  cta,
   color = "dark",
   maxWidth = true,
   maxCardsPerRow,
   cardType = "simple",
+  backgroundColor,
+  background,
+  textColor,
+  containerClassName,
+  innerClassName,
+  applyBoxShadow = false,
+  cardStackingMobile = true,
+  cardsWidth = true,
+  noGutter = false,
 }) => {
-  const lgWidth =
-    {
-      1: " lg:w-full",
-      2: " lg:w-[calc(50%-0.75rem)]",
-      3: " lg:w-[calc(33.3333%-1rem)]",
-      4: " lg:w-[calc(25%-1.125rem)]",
-    }[maxCardsPerRow || 4] || " lg:w-[calc(25%-1.125rem)]";
+  const itemCount = items?.length ?? 0;
+  const desktopCols = clampCol(
+    maxCardsPerRow ?? calculateOptimalColumns(itemCount)
+  );
+  const lgCols = clampCol(Math.min(desktopCols, itemCount || desktopCols));
 
-  const mdWidth = items.length === 1 ? " md:w-full" : " md:w-[calc(50%-1rem)]";
+  // Mobile / md: 1 col when stacking flag is on, else 2 (or 1 when single).
+  const mobileCols = clampCol(cardStackingMobile ? 1 : itemCount === 1 ? 1 : 2);
 
-  const renderCard = (item: CalloutProps["items"][number], index: number) => {
-    if (cardType === "blog") {
-      const blogItem = item as any;
-      return (
-        <BlogCard
-          title={blogItem.title}
-          href={blogItem.slug}
-          description={blogItem.shortDescription}
-          date={blogItem.blogCreationDate}
-          category={blogItem.category}
-          image={blogItem.cover}
-          asGrid={false}
-          lgWidth={lgWidth}
-          mdWidth={mdWidth}
-        />
+  // When cardsWidth is false: full-width stacked layout (no grid).
+  const gridClass = cardsWidth
+    ? cx(
+        "grid items-stretch self-stretch",
+        noGutter ? "gap-0" : "gap-6",
+        baseColMap[mobileCols],
+        lgColMap[lgCols],
+        xlColMap[desktopCols]
+      )
+    : cx(
+        "flex flex-col items-stretch self-stretch",
+        noGutter ? "gap-0" : "gap-6"
       );
+
+  const renderCard = (item: CalloutItem, index: number) => {
+    const itemCardType: CalloutCardType = item.cardType ?? cardType;
+
+    // When cardsWidth is true we control widths via grid columns, so do
+    // NOT pass legacy lgWidth/mdWidth (which would force fixed pixel
+    // widths and break the responsive grid).
+    const widthProps = cardsWidth
+      ? {}
+      : { lgWidth: undefined, mdWidth: undefined };
+
+    switch (itemCardType) {
+      case "blog": {
+        const blogItem = item as any;
+        return (
+          <BlogCard
+            key={index}
+            title={blogItem.title}
+            href={blogItem.slug}
+            description={blogItem.shortDescription}
+            date={blogItem.blogCreationDate}
+            category={blogItem.category}
+            image={blogItem.cover}
+            asGrid={false}
+            {...widthProps}
+          />
+        );
+      }
+      case "fullImage":
+        return (
+          <FullImageCard
+            key={index}
+            card={{
+              ...(item as any),
+              shadow: (item as any).shadow ?? applyBoxShadow,
+            }}
+            {...widthProps}
+          />
+        );
+      case "floatingImage":
+        return (
+          <FloatingImageCard
+            key={index}
+            card={{
+              ...(item as any),
+              shadow: (item as any).shadow ?? applyBoxShadow,
+            }}
+            {...widthProps}
+          />
+        );
+      case "simple":
+      default:
+        return (
+          <SimpleCard
+            key={index}
+            card={{
+              ...(item as any),
+              shadow: (item as any).shadow ?? applyBoxShadow,
+            }}
+            {...widthProps}
+          />
+        );
     }
-    return (
-      <SimpleCard
-        key={index}
-        card={item as any}
-        lgWidth={lgWidth}
-        mdWidth={mdWidth}
-      />
-    );
   };
 
+  const sectionStyle = background ? { background } : undefined;
+  const headingStyle = textColor ? { color: textColor } : undefined;
+  const sectionBgClass = background
+    ? ""
+    : backgroundColor
+      ? (backgroundClassMap[backgroundColor] ?? "")
+      : "";
+
   return (
-    <div className="component-container">
+    <section
+      id={anchorId}
+      className={cx("component-container", sectionBgClass, containerClassName)}
+      style={sectionStyle}
+    >
       <div
-        className={`mx-5 mb-5 mt-12 ${maxWidth ? "max-w-120 xl:mx-auto" : ""} ${color == "dark" ? "text-text" : "text-white"}`}
+        className={cx(
+          noGutter ? "p-0" : "mx-5 mb-5 mt-12",
+          maxWidth && "max-w-120 xl:mx-auto",
+          color === "dark" ? "text-text" : "text-white",
+          innerClassName
+        )}
       >
         <div className="callout-container flex flex-col gap-10 md:gap-16">
-          <div className="title-holder">
+          <div className="title-holder" style={headingStyle}>
             {title && (
               <Text
                 as={enableHeading ? "h1" : "h2"}
@@ -75,13 +216,36 @@ export const Callout: React.FC<CalloutProps> = ({
                 {subtitle}
               </Text>
             )}
+            {description && (
+              <Text as="p" className="body1 mt-4 text-center md:mt-6">
+                {description}
+              </Text>
+            )}
           </div>
-          <div className="card-holder flex flex-wrap items-stretch justify-center gap-6 self-stretch md:gap-6">
+          <div className={cx("card-holder", gridClass)}>
             {items.map((item, index: number) => renderCard(item, index))}
           </div>
+          {(cta || finePrint) && (
+            <div className="flex flex-col items-center gap-4">
+              {cta ? (
+                <Button
+                  linkClassName="label1"
+                  buttonClassName="label1"
+                  {...cta}
+                >
+                  {cta.label ?? cta.buttonLabel}
+                </Button>
+              ) : null}
+              {finePrint ? (
+                <Text as="div" className="footnote text-center text-text">
+                  {finePrint}
+                </Text>
+              ) : null}
+            </div>
+          )}
         </div>
       </div>
-    </div>
+    </section>
   );
 };
 

package/src/contentful/blocks/callout/types.ts

@@ -1,15 +1,68 @@
+import type { ReactNode } from "react";
+import type { ButtonProps } from "../button/types";
+
+export type CalloutCardType = "simple" | "blog" | "fullImage" | "floatingImage";
+
+export type CalloutCtaProps = ButtonProps & {
+  label?: string;
+};
+
+export type CalloutItem = {
+  /**
+   * Optional per-item card type. When provided, overrides the top-level
+   * `cardType` for this single item — enables mixed card variants in one
+   * Callout (e.g. one full-image + two simple cards).
+   */
+  cardType?: CalloutCardType;
+  // Permissive shape — concrete card components validate their own subset.
+  [key: string]: any;
+};
+
 export type CalloutProps = {
+  /** Outer `<section>` id — anchor link target. */
+  anchorId?: string;
   title?: string;
   enableHeading?: boolean;
   subtitle?: string;
+  description?: string;
+  finePrint?: ReactNode;
+  cta?: CalloutCtaProps;
   applyBoxShadow?: boolean;
   cardStackingMobile?: boolean;
   bottomText?: string;
   color?: "dark" | "light";
-  cardsWidth?: string;
+  /**
+   * When `true` (default) cards are laid out in a responsive Tailwind
+   * grid sized by `maxCardsPerRow`. When `false` the cards stretch
+   * full-width and stack vertically (no inner widths).
+   */
+  cardsWidth?: boolean;
   maxCardsPerRow?: number;
   noGutter?: boolean;
-  items: any[];
+  items: CalloutItem[];
   maxWidth?: boolean;
-  cardType?: "simple" | "blog";
+  /** Top-level card type used when an item does not specify its own. */
+  cardType?: CalloutCardType;
+  /**
+   * Background color token. When omitted the section has no background
+   * (preserves prior behavior for existing 0.1.70 consumers).
+   */
+  backgroundColor?:
+    | "cream500"
+    | "gray100"
+    | "white"
+    | "transparent"
+    | "blue"
+    | "green"
+    | "navy"
+    | "purple"
+    | "yellow";
+  /** Raw background CSS value (overrides `backgroundColor` when present). */
+  background?: string;
+  /** Inline text color override applied to the heading region. */
+  textColor?: string;
+  /** Extra class names for the outer <section>. */
+  containerClassName?: string;
+  /** Extra class names for the inner content wrapper. */
+  innerClassName?: string;
 };