@windstream/react-shared-components 0.1.79 → 0.1.80

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

@@ -1,265 +1,265 @@
-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 { 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).
-// Per-card responsive width classes for the flex-wrap layout. Mobile is
-// always full-width; md renders 1 or 2 columns; lg renders up to 6.
-// The calc() values subtract a portion of the gap so cards fit cleanly.
-const mdWidthMap: Record<number, string> = {
-  1: "md:w-full",
-  2: "md:w-[calc(50%-1rem)]",
-};
-const lgWidthMap: Record<number, string> = {
-  1: "lg:w-full",
-  2: "lg:w-[calc(50%-0.75rem)]",
-  3: "lg:w-[calc(33.333%-1rem)]",
-  4: "lg:w-[calc(25%-1.125rem)]",
-  5: "lg:w-[calc(20%-1.2rem)]",
-  6: "lg:w-[calc(16.666%-1.25rem)]",
-};
-
-/**
- * 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 itemCount = items?.length ?? 0;
-  const desktopCols = clampCol(
-    maxCardsPerRow ?? calculateOptimalColumns(itemCount)
-  );
-  const lgCols = clampCol(Math.min(desktopCols, itemCount || desktopCols));
-
-  // Layout selection:
-  //   - cardsWidth === false  → explicit vertical stack (single column)
-  //   - any other value (true / undefined / string / etc.) → legacy
-  //     flex-wrap layout that always renders multi-column on md+ and
-  //     full-width on mobile. This matches the pre-0.1.79 DOM and keeps
-  //     consumers like SMB-browse rendering correctly without changes.
-  const isStackMode = cardsWidth === false;
-  const gridClass = isStackMode
-    ? cx(
-        "flex flex-col items-stretch self-stretch",
-        noGutter ? "gap-0" : "gap-6"
-      )
-    : cx(
-        "flex flex-wrap items-stretch justify-center self-stretch",
-        noGutter ? "gap-0" : "gap-6",
-        noGutter ? "md:gap-0" : "md:gap-6"
-      );
-
-  // Per-card width classes — only used for flex-wrap layout. Mobile is
-  // full-width; md respects `cardStackingMobile` (1 col when true, 2 cols
-  // when false); lg uses the optimal column count. Stack mode skips this.
-  const cardWidthClass = isStackMode
-    ? ""
-    : cx(
-        "w-full",
-        mdWidthMap[clampCol(cardStackingMobile ? 1 : Math.min(2, desktopCols))],
-        lgWidthMap[lgCols]
-      );
-
-  const renderCard = (item: CalloutItem, index: number) => {
-    const itemCardType: CalloutCardType = item.cardType ?? cardType;
-
-    // Stack mode preserves any legacy lgWidth/mdWidth on the card itself;
-    // flex-wrap mode controls width via the wrapper div, so strip them.
-    const widthProps = isStackMode
-      ? { 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}
-          />
-        );
-    }
-  };
-
-  const sectionStyle = background ? { background } : undefined;
-  const headingStyle = textColor ? { color: textColor } : undefined;
-  const sectionBgClass = background
-    ? ""
-    : backgroundColor
-      ? (backgroundClassMap[backgroundColor] ?? "")
-      : "";
-
-  return (
-    <section
-      id={anchorId}
-      className={cx("component-container", sectionBgClass, containerClassName)}
-      style={sectionStyle}
-    >
-      <div
-        className={cx(
-          noGutter ? "p-0" : "mx-5 my-12 md:my-20",
-          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" style={headingStyle}>
-            {title && (
-              <Text
-                as={enableHeading ? "h1" : "h2"}
-                className="heading2 md:heading1 md:text-center"
-              >
-                {title}
-              </Text>
-            )}
-            {subtitle && (
-              <Text
-                as={enableHeading ? "h2" : "h3"}
-                className="subheading3 mt-3 md:subheading1 md:text-center"
-              >
-                {subtitle}
-              </Text>
-            )}
-            {description && (
-              <Text as="p" className="body1 mt-4 text-center md:mt-6">
-                {description}
-              </Text>
-            )}
-          </div>
-          <div className={cx("card-holder", gridClass)}>
-            {items.map((item, index: number) =>
-              isStackMode ? (
-                renderCard(item, index)
-              ) : (
-                <div
-                  key={`callout-card-${index}`}
-                  className={cx("callout-card", cardWidthClass)}
-                >
-                  {renderCard(item, index)}
-                </div>
-              )
-            )}
-          </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>
-    </section>
-  );
-};
-
-export default Callout;
+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 { 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).
+// Per-card responsive width classes for the flex-wrap layout. Mobile is
+// always full-width; md renders 1 or 2 columns; lg renders up to 6.
+// The calc() values subtract a portion of the gap so cards fit cleanly.
+const mdWidthMap: Record<number, string> = {
+  1: "md:w-full",
+  2: "md:w-[calc(50%-1rem)]",
+};
+const lgWidthMap: Record<number, string> = {
+  1: "lg:w-full",
+  2: "lg:w-[calc(50%-0.75rem)]",
+  3: "lg:w-[calc(33.333%-1rem)]",
+  4: "lg:w-[calc(25%-1.125rem)]",
+  5: "lg:w-[calc(20%-1.2rem)]",
+  6: "lg:w-[calc(16.666%-1.25rem)]",
+};
+
+/**
+ * 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 itemCount = items?.length ?? 0;
+  const desktopCols = clampCol(
+    maxCardsPerRow ?? calculateOptimalColumns(itemCount)
+  );
+  const lgCols = clampCol(Math.min(desktopCols, itemCount || desktopCols));
+
+  // Layout selection:
+  //   - cardsWidth === false  → explicit vertical stack (single column)
+  //   - any other value (true / undefined / string / etc.) → legacy
+  //     flex-wrap layout that always renders multi-column on md+ and
+  //     full-width on mobile. This matches the pre-0.1.79 DOM and keeps
+  //     consumers like SMB-browse rendering correctly without changes.
+  const isStackMode = cardsWidth === false;
+  const gridClass = isStackMode
+    ? cx(
+        "flex flex-col items-stretch self-stretch",
+        noGutter ? "gap-0" : "gap-6"
+      )
+    : cx(
+        "flex flex-wrap items-stretch justify-center self-stretch",
+        noGutter ? "gap-0" : "gap-6",
+        noGutter ? "md:gap-0" : "md:gap-6"
+      );
+
+  // Per-card width classes — only used for flex-wrap layout. Mobile is
+  // full-width; md respects `cardStackingMobile` (1 col when true, 2 cols
+  // when false); lg uses the optimal column count. Stack mode skips this.
+  const cardWidthClass = isStackMode
+    ? ""
+    : cx(
+        "w-full",
+        mdWidthMap[clampCol(cardStackingMobile ? 1 : Math.min(2, desktopCols))],
+        lgWidthMap[lgCols]
+      );
+
+  const renderCard = (item: CalloutItem, index: number) => {
+    const itemCardType: CalloutCardType = item.cardType ?? cardType;
+
+    // Stack mode preserves any legacy lgWidth/mdWidth on the card itself;
+    // flex-wrap mode controls width via the wrapper div, so strip them.
+    const widthProps = isStackMode
+      ? { 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}
+          />
+        );
+    }
+  };
+
+  const sectionStyle = background ? { background } : undefined;
+  const headingStyle = textColor ? { color: textColor } : undefined;
+  const sectionBgClass = background
+    ? ""
+    : backgroundColor
+      ? (backgroundClassMap[backgroundColor] ?? "")
+      : "";
+
+  return (
+    <section
+      id={anchorId}
+      className={cx("component-container", sectionBgClass, containerClassName)}
+      style={sectionStyle}
+    >
+      <div
+        className={cx(
+          noGutter ? "p-0" : "mx-5 my-12 md:my-20",
+          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" style={headingStyle}>
+            {title && (
+              <Text
+                as={enableHeading ? "h1" : "h2"}
+                className="heading2 md:heading1 md:text-center"
+              >
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text
+                as={enableHeading ? "h2" : "h3"}
+                className="subheading3 mt-3 md:subheading1 md:text-center"
+              >
+                {subtitle}
+              </Text>
+            )}
+            {description && (
+              <Text as="p" className="body1 mt-4 text-center md:mt-6">
+                {description}
+              </Text>
+            )}
+          </div>
+          <div className={cx("card-holder", gridClass)}>
+            {items.map((item, index: number) =>
+              isStackMode ? (
+                renderCard(item, index)
+              ) : (
+                <div
+                  key={`callout-card-${index}`}
+                  className={cx("callout-card", cardWidthClass)}
+                >
+                  {renderCard(item, index)}
+                </div>
+              )
+            )}
+          </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>
+    </section>
+  );
+};
+
+export default Callout;

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

@@ -1,72 +1,72 @@
-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";
-  /**
-   * 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).
-   *
-   * Accepts a string for backward compatibility with legacy consumers
-   * that pass a Tailwind width class (e.g. "w-1/2"); any truthy value
-   * enables grid mode — the string itself is not applied.
-   */
-  cardsWidth?: boolean | string;
-  maxCardsPerRow?: number;
-  noGutter?: boolean;
-  items: CalloutItem[];
-  maxWidth?: boolean;
-  /** 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;
-};
+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";
+  /**
+   * 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).
+   *
+   * Accepts a string for backward compatibility with legacy consumers
+   * that pass a Tailwind width class (e.g. "w-1/2"); any truthy value
+   * enables grid mode — the string itself is not applied.
+   */
+  cardsWidth?: boolean | string;
+  maxCardsPerRow?: number;
+  noGutter?: boolean;
+  items: CalloutItem[];
+  maxWidth?: boolean;
+  /** 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;
+};