@windstream/react-shared-components 0.1.71 → 0.1.73

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;
 };

package/src/contentful/blocks/cards/floating-image-card/index.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import { Button } from "../../button";
+import { FloatingImageCardProps } from "./types";
+
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+const alignmentClasses: Record<string, string> = {
+  left: "flex w-full justify-start",
+  right: "flex w-full justify-end",
+  center: "flex w-full justify-center",
+};
+
+export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
+  card,
+  lgWidth,
+  mdWidth,
+}) => {
+  const {
+    image,
+    title,
+    header,
+    body,
+    cta,
+    ctaAlignment,
+    imageLink,
+    imageClassName,
+    className,
+    isPromoBarImg = false,
+    shadow = false,
+  } = card;
+
+  const ctaAlignmentClass = ctaAlignment
+    ? alignmentClasses[ctaAlignment]
+    : alignmentClasses.left;
+  const imageLinkAvailableClass = imageLink ? "cursor-pointer" : "";
+
+  const handleImageClick = imageLink
+    ? () => {
+        if (typeof window !== "undefined") {
+          window.open(imageLink, "_blank");
+        }
+      }
+    : undefined;
+
+  if (isPromoBarImg) {
+    return image?.href ? (
+      <NextImage
+        src={image.href}
+        alt={image.title ?? title ?? "promo-bar-image"}
+        width={148}
+        height={40}
+        onClick={handleImageClick}
+        className={imageLinkAvailableClass}
+      />
+    ) : null;
+  }
+
+  return (
+    <section
+      aria-labelledby="Image Card"
+      className={cx(
+        "callout-card relative flex h-full w-full flex-col gap-4 p-0 md:items-start lg:gap-6",
+        shadow && "rounded-3xl shadow-card",
+        mdWidth,
+        lgWidth,
+        className
+      )}
+    >
+      {image?.href ? (
+        <div
+          className={cx(
+            "relative aspect-video w-full overflow-hidden rounded-[40px] sm:mb-1 md:flex-none lg:mb-0",
+            imageClassName
+          )}
+        >
+          <NextImage
+            src={image.href}
+            alt={image.title ?? title ?? "card-image"}
+            width={image.width || 400}
+            height={image.height || 285}
+            onClick={handleImageClick}
+            className={cx(
+              "h-full max-h-[285px] w-full object-cover",
+              imageLinkAvailableClass
+            )}
+          />
+        </div>
+      ) : null}
+
+      {header ? (
+        <Text as="h6" className="heading6 font-black text-text lg:pb-2">
+          {header}
+        </Text>
+      ) : null}
+
+      {body ? (
+        <Text as="div" className="body2 mb-0 flex-1 text-text">
+          {body}
+        </Text>
+      ) : null}
+
+      <div className={cx(ctaAlignmentClass, "mt-auto")}>
+        {cta ? (
+          <Button
+            linkVariant="unstyled"
+            linkClassName="label1 flex items-center gap-2 text-text"
+            {...cta}
+            iconName="expand_circle_right"
+            iconFill={1}
+          />
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+export default FloatingImageCard;

package/src/contentful/blocks/cards/floating-image-card/types.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { ButtonProps } from "../../button/types";
+
+export type FloatingImageAsset = {
+  href: string;
+  title?: string;
+  width?: number;
+  height?: number;
+};
+
+export type FloatingImageCardItem = {
+  title?: string;
+  header?: string;
+  body?: ReactNode;
+  cta?: ButtonProps;
+  ctaAlignment?: "left" | "right" | "center";
+  image?: FloatingImageAsset;
+  imageLink?: string;
+  imageClassName?: string;
+  className?: string;
+  isPromoBarImg?: boolean;
+  /** Applies `shadow-card` to the outer card element. */
+  shadow?: boolean;
+};
+
+export type FloatingImageCardProps = {
+  card: FloatingImageCardItem;
+  lgWidth?: string;
+  mdWidth?: string;
+};

package/src/contentful/blocks/cards/full-image-card/index.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { Button } from "../../button";
+import { FullImageCardProps } from "./types";
+
+import { Link } from "@shared/components/link";
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+export const FullImageCard: React.FC<FullImageCardProps> = ({
+  card,
+  lgWidth,
+  mdWidth,
+}) => {
+  const {
+    anchorId = "FullImageCard",
+    title,
+    description,
+    caption,
+    image,
+    cta,
+    link,
+    className,
+    contentClassName,
+    imageClassName,
+    shadow = true,
+  } = card;
+
+  const target = cta || link;
+  const href = target?.href;
+
+  const renderImage = () => {
+    if (!image?.href) return null;
+
+    const img = (
+      <NextImage
+        src={image.href}
+        alt={image.title ?? title ?? "card-image"}
+        width={image.width || 400}
+        height={image.height || 280}
+        className="w-full"
+      />
+    );
+
+    return href ? (
+      <Link href={href} tabIndex={-1} target={target?.target}>
+        {img}
+      </Link>
+    ) : (
+      img
+    );
+  };
+
+  const titleNode = title ? (
+    <Text as="h3" className="body1 text-text xl:heading6">
+      {title}
+    </Text>
+  ) : null;
+
+  return (
+    <section
+      id={anchorId}
+      className={cx(
+        "callout-card relative flex flex-col rounded-3xl bg-white p-0",
+        shadow && "shadow-card",
+        mdWidth,
+        lgWidth,
+        "w-full",
+        className
+      )}
+      aria-labelledby={`card-title-${anchorId}`}
+    >
+      {image?.href ? (
+        <div
+          className={cx(
+            "relative aspect-video overflow-hidden rounded-tl-3xl rounded-tr-3xl",
+            imageClassName
+          )}
+        >
+          {renderImage()}
+        </div>
+      ) : null}
+      <div
+        className={cx(
+          "flex h-full flex-col gap-4 p-6 md:p-8",
+          contentClassName
+        )}
+      >
+        <div className="flex flex-1 flex-col justify-between">
+          <div>
+            {href && titleNode ? (
+              <Link
+                href={href}
+                target={target?.target}
+                className="no-underline hover:underline"
+              >
+                {titleNode}
+              </Link>
+            ) : (
+              titleNode
+            )}
+            {description ? (
+              <Text as="p" className="body2 mt-4 text-text md:body1">
+                {description}
+              </Text>
+            ) : null}
+          </div>
+          {caption ? (
+            <Text as="p" className="footnote mt-5 text-text-secondary">
+              {caption}
+            </Text>
+          ) : null}
+        </div>
+        {cta ? (
+          <div className="mt-2 flex items-end">
+            <Button
+              linkVariant="unstyled"
+              linkClassName="label1 flex items-center gap-2 text-text"
+              {...cta}
+              iconName="expand_circle_right"
+              iconFill={1}
+            />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+export default FullImageCard;

package/src/contentful/blocks/cards/full-image-card/types.ts

@@ -0,0 +1,29 @@
+import type { ButtonProps } from "../../button/types";
+
+export type FullImageAsset = {
+  href: string;
+  title?: string;
+  width?: number;
+  height?: number;
+};
+
+export type FullImageCardItem = {
+  anchorId?: string;
+  title?: string;
+  description?: string;
+  caption?: string;
+  cta?: ButtonProps;
+  link?: ButtonProps;
+  image?: FullImageAsset;
+  className?: string;
+  contentClassName?: string;
+  imageClassName?: string;
+  /** Applies `shadow-card` to the outer card element. */
+  shadow?: boolean;
+};
+
+export type FullImageCardProps = {
+  card: FullImageCardItem;
+  lgWidth?: string;
+  mdWidth?: string;
+};