@windstream/react-shared-components 0.1.71 → 0.1.72

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

@@ -1,88 +1,252 @@
-import React from "react";
-import BlogCard from "../cards/blog-card";
-import SimpleCard from "../cards/simple-card";
-import { CalloutProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Callout: React.FC<CalloutProps> = ({
-  title,
-  items,
-  enableHeading = false,
-  subtitle,
-  color = "dark",
-  maxWidth = true,
-  maxCardsPerRow,
-  cardType = "simple",
-}) => {
-  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 mdWidth = items.length === 1 ? " md:w-full" : " md:w-[calc(50%-1rem)]";
-
-  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}
-        />
-      );
-    }
-    return (
-      <SimpleCard
-        key={index}
-        card={item as any}
-        lgWidth={lgWidth}
-        mdWidth={mdWidth}
-      />
-    );
-  };
-
-  return (
-    <div className="component-container">
-      <div
-        className={`mx-5 mb-5 mt-12 ${maxWidth ? "max-w-120 xl:mx-auto" : ""} ${color == "dark" ? "text-text" : "text-white"}`}
-      >
-        <div className="callout-container flex flex-col gap-10 md:gap-16">
-          <div className="title-holder">
-            {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>
-            )}
-          </div>
-          <div className="card-holder flex flex-wrap items-stretch justify-center gap-6 self-stretch md:gap-6">
-            {items.map((item, index: number) => renderCard(item, index))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-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).
+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 itemCount = items?.length ?? 0;
+  const desktopCols = clampCol(
+    maxCardsPerRow ?? calculateOptimalColumns(itemCount)
+  );
+  const lgCols = clampCol(Math.min(desktopCols, itemCount || desktopCols));
+
+  // Mobile / md: 1 col when stacking flag is on, else 2 (or 1 when single).
+  const mobileCols = clampCol(cardStackingMobile ? 1 : itemCount === 1 ? 1 : 2);
+
+  // 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}
+          />
+        );
+    }
+  };
+
+  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 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" 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) => 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>
+    </section>
+  );
+};
+
+export default Callout;

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

@@ -1,15 +1,68 @@
-export type CalloutProps = {
-  title?: string;
-  enableHeading?: boolean;
-  subtitle?: string;
-  applyBoxShadow?: boolean;
-  cardStackingMobile?: boolean;
-  bottomText?: string;
-  color?: "dark" | "light";
-  cardsWidth?: string;
-  maxCardsPerRow?: number;
-  noGutter?: boolean;
-  items: any[];
-  maxWidth?: boolean;
-  cardType?: "simple" | "blog";
-};
+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).
+   */
+  cardsWidth?: boolean;
+  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;
+};

package/src/contentful/blocks/cards/Cards.stories.tsx

@@ -1,23 +1,23 @@
-import { Cards } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Cards> = {
-  title: "Contentful Blocks/Cards",
-  component: Cards,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful cards block.",
-      },
-    },
-  },
-  args: { fields: {} },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Cards } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Cards> = {
+  title: "Contentful Blocks/Cards",
+  component: Cards,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful cards block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};