@windstream/react-shared-components 0.1.71 → 0.1.73

package/src/contentful/blocks/cards/simple-card/index.tsx

@@ -2,87 +2,323 @@ import React from "react";
 import { Button } from "../../button";
 import { backgroundColorMap, Item, SimpleCardProps } from "./types";
 
+import { Link } from "@shared/components/link";
+import { MaterialIcon } from "@shared/components/material-icon";
 import { NextImage } from "@shared/components/next-image";
 import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+import { SpeedCardBg } from "@shared/utils/speed-card-bg";
+
+const ICON_SIZE = 60;
+
+const alignmentClasses: Record<string, string> = {
+  left: "flex w-full justify-start",
+  right: "flex w-full justify-end",
+  center: "flex w-full justify-center",
+};
+
+const justifyClass: Record<string, string> = {
+  left: "justify-start",
+  right: "justify-end",
+  center: "justify-center",
+};
+
+const formatPhoneHref = (phone: string): string => {
+  const digits = (phone || "").replace(/\D/g, "");
+  return digits ? `tel:${digits}` : "";
+};
 
 export const SimpleCard: React.FC<SimpleCardProps> = ({
   card,
   lgWidth,
   mdWidth,
+  className,
+  contentClassName,
+  style,
 }) => {
-  const imageRenderer = (item: Item) => {
-    if (!item.image) return null;
-
-    // Handle both lowercase and capitalized versions from Contentful
-    const view = item.imageView?.toLowerCase();
-
-    switch (view) {
-      case "full":
-        return (
-          <NextImage
-            width={400}
-            height={280}
-            src={item.image}
-            alt={item.title ?? "card-icon"}
-            className="rounded-3xl"
-          />
-        );
-      case "icon":
-      case "inset":
-      default:
-        return (
-          <NextImage
-            width={88}
-            height={88}
-            src={item.image}
-            alt={item.title ?? "card-icon"}
-          />
-        );
-    }
+  const view = card.imageView?.toLowerCase();
+  const fullSizeImage = view === "full";
+  const marginSizeImage = view === "margin";
+  const standardSizeImage = view === "standard";
+  const iconSizeImage =
+    view === "icon" || view === "inset" || (!view && !!card.image);
+
+  // Local @ui CalloutCard treats "standard" + "icon" as the new card design
+  // that supports background color / pinwheel / inverted text via CSS vars.
+  const hasNewDesign = standardSizeImage || iconSizeImage;
+
+  const iconAlignment =
+    card.iconAlignment?.toLowerCase() ||
+    card.imageAlignment?.toLowerCase() ||
+    "left";
+
+  const ctaAlignmentClass =
+    (card.ctaAlignment && alignmentClasses[card.ctaAlignment]) ||
+    alignmentClasses.left;
+  const ctaAlignmentBottomClass =
+    (card.ctaAlignmentBottom && justifyClass[card.ctaAlignmentBottom]) ||
+    justifyClass.left;
+
+  const pinwheelColorCode = card.pinwheelColor?.split("-")[1];
+
+  const useDynamicColors = hasNewDesign && card.applyCardBackgroundColor;
+
+  const dynamicStyle: React.CSSProperties = {
+    ...style,
+    ...(useDynamicColors && card.backgroundColor
+      ? ({ ["--scc-bg" as any]: card.backgroundColor } as React.CSSProperties)
+      : {}),
+    ...(useDynamicColors && card.textColor
+      ? ({ ["--scc-fg" as any]: card.textColor } as React.CSSProperties)
+      : {}),
+    ...(useDynamicColors && card.backgroundColor
+      ? { backgroundColor: "var(--scc-bg)" }
+      : {}),
+    ...(useDynamicColors && card.showBackgroundImage && pinwheelColorCode
+      ? {
+          backgroundImage: `url('data:image/svg+xml;utf8,${encodeURIComponent(
+            SpeedCardBg(pinwheelColorCode)
+          )}')`,
+          backgroundPosition: "top left",
+          backgroundSize: "684px 107px",
+          backgroundRepeat: "no-repeat",
+        }
+      : {}),
   };
 
-  const imageAlignment = card.imageAlignment?.toLowerCase() || "left";
-  const imageAlignClass =
-    imageAlignment === "left"
-      ? "lg:items-start"
-      : imageAlignment === "right"
-        ? "lg:items-end"
-        : "lg:items-center";
+  const renderFullImage = (margin: boolean) => {
+    if (!card.image) return null;
+    return (
+      <div
+        className={cx(
+          "relative aspect-video overflow-hidden",
+          !margin ? "rounded-t-3xl" : "mx-6 lg:mx-8"
+        )}
+      >
+        <NextImage
+          src={card.image}
+          alt={card.imageAlt ?? card.title ?? "card-image"}
+          width={card.imageWidth || 400}
+          height={card.imageHeight || 280}
+          className={cx("w-full", !margin && "rounded-t-3xl")}
+        />
+      </div>
+    );
+  };
+
+  const renderIcon = () => {
+    if (!card.image) return null;
+    const imgWidth = standardSizeImage
+      ? card.imageWidth || ICON_SIZE
+      : ICON_SIZE;
+    const imgHeight = standardSizeImage
+      ? card.imageHeight || ICON_SIZE
+      : ICON_SIZE;
+    return (
+      <div
+        className={cx(
+          "relative mb-8 flex",
+          card.imageToRichTextAlignment && "h-[60px] w-[60px] flex-shrink-0"
+        )}
+        style={{ justifyContent: iconAlignment }}
+      >
+        <NextImage
+          src={card.image}
+          alt={card.imageAlt ?? card.title ?? "card-icon"}
+          width={imgWidth}
+          height={imgHeight}
+          className={cx(
+            "object-contain",
+            card.imageToRichTextAlignment && "!h-[60px] !w-[60px]"
+          )}
+        />
+      </div>
+    );
+  };
+
+  const textColorStyle =
+    useDynamicColors && card.textColor ? { color: card.textColor } : undefined;
+
+  const titleNode = card.title ? (
+    <Text
+      as="h3"
+      className="heading6 mb-2 text-text md:heading6"
+      style={textColorStyle}
+    >
+      {card.title}
+    </Text>
+  ) : null;
+
+  const titleWithLink =
+    card.cta?.href && titleNode ? (
+      <Link
+        href={card.cta.href}
+        target={card.cta.target}
+        className="no-underline hover:underline"
+        style={textColorStyle}
+      >
+        {titleNode}
+      </Link>
+    ) : (
+      titleNode
+    );
+
+  const hasTable =
+    (card.workingHours?.length ?? 0) > 0 || (card.phoneNumber?.length ?? 0) > 0;
 
   return (
-    <div
-      className={`callout-card ${mdWidth} ${lgWidth} w-full ${backgroundColorMap[card.backgroundColor ?? ""] ?? ""}`}
+    <section
+      className={cx(
+        "callout-card relative flex w-full flex-col rounded-3xl p-0",
+        card.shadow && "shadow-card",
+        card.image && !fullSizeImage && !card.showBackgroundImage && "pt-1",
+        !card.applyCardBackgroundColor &&
+          (backgroundColorMap[card.backgroundColor ?? ""] ?? ""),
+        mdWidth,
+        lgWidth,
+        className
+      )}
+      style={dynamicStyle}
+      aria-labelledby={card.title ? `callout-${card.title}` : undefined}
     >
+      {/* Top "location" CTA */}
+      {card.ctaBottom?.title && card.ctaBottom?.href ? (
+        <div
+          className={cx(
+            "top-link m-6 flex items-center lg:m-8",
+            ctaAlignmentBottomClass
+          )}
+        >
+          <Link
+            href={card.ctaBottom.href}
+            className="label1 inline-flex items-center gap-2 text-text decoration-text underline-offset-4 hover:underline"
+          >
+            <MaterialIcon name="location_on" fill={1} size={24} />
+            <span>{card.ctaBottom.title}</span>
+          </Link>
+        </div>
+      ) : null}
+
+      {card.image && fullSizeImage ? renderFullImage(false) : null}
+      {card.image && marginSizeImage ? renderFullImage(true) : null}
+
       <div
-        className={`card-template flex h-full flex-col gap-6 p-6 text-center md:gap-8 md:p-8 ${imageAlignClass}`}
+        className={cx(
+          "relative flex flex-1 flex-col justify-between px-6 pb-8 pt-7 lg:px-8 lg:py-8",
+          contentClassName
+        )}
       >
-        <div className="card-header">{imageRenderer(card)}</div>
+        <div className="flex flex-1 flex-col justify-between">
+          <div
+            className={cx(
+              "flex flex-col",
+              card.imageToRichTextAlignment &&
+                "lg:flex-row lg:items-start lg:gap-6"
+            )}
+          >
+            <div
+              className={cx(card.imageToRichTextAlignment && "flex-shrink-0")}
+            >
+              {card.image && !fullSizeImage && !marginSizeImage
+                ? renderIcon()
+                : null}
+            </div>
+            <div className="flex flex-col gap-3 md:gap-4">
+              {titleWithLink}
 
-        <div className="card-body flex flex-col gap-3 text-start md:gap-4">
-          {card.title && (
-            <Text as="h5" className="heading6 text-text md:heading5">
-              {card.title}
-            </Text>
-          )}
-          {card.body && (
-            <Text as="div" className="body1 text-text">
-              {card.body}
-            </Text>
-          )}
+              {card.titleLocation ? (
+                <div className="mb-1 lg:mb-2">
+                  <Text as="h4" className="label1 font-bold text-text">
+                    {card.titleLocation}
+                  </Text>
+                </div>
+              ) : null}
+
+              {hasTable ? (
+                <div className="mb-2">
+                  <table>
+                    <tbody>
+                      {card.workingHours?.map((hours, index) => {
+                        const [label, value] = (hours ?? "").split("|");
+                        return (
+                          <tr key={`wh-${index}`}>
+                            <td className="py-2 pr-3">
+                              <Text className="label2 text-text">{label}</Text>
+                            </td>
+                            <td className="py-2 pl-3">
+                              <Text className="body2 font-bold text-text">
+                                {value}
+                              </Text>
+                            </td>
+                          </tr>
+                        );
+                      })}
+                      {card.phoneNumber?.map((phone, index) => (
+                        <tr key={`ph-${index}`}>
+                          <td className="py-1 pr-3 align-middle">
+                            <MaterialIcon
+                              fill={1}
+                              name="call"
+                              size={24}
+                              weight="200"
+                              className="text-text"
+                            />
+                          </td>
+                          <td className="py-1 pl-3">
+                            <Link
+                              href={formatPhoneHref(phone)}
+                              className="text-inherit no-underline"
+                            >
+                              <Text className="body2 font-bold text-text">
+                                {phone}
+                              </Text>
+                            </Link>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : null}
+
+              {card.body ? (
+                <Text
+                  as="div"
+                  className="body1 text-text"
+                  style={textColorStyle}
+                >
+                  {card.body}
+                </Text>
+              ) : null}
+              {card.richText ? (
+                <Text
+                  as="div"
+                  className="body1 text-text"
+                  style={textColorStyle}
+                >
+                  {card.richText}
+                </Text>
+              ) : null}
+            </div>
+          </div>
         </div>
-        {card.cta && (
-          <div className="card-footer">
+
+        {card.cta ? (
+          <div className={cx("mt-2", ctaAlignmentClass)}>
             <Button
               linkVariant="unstyled"
-              linkClassName="label1 flex items-center text-text gap-2"
+              linkClassName={cx(
+                "label1 flex items-center gap-2 text-text",
+                useDynamicColors && card.textColor && "decoration-current"
+              )}
               {...card.cta}
-              iconName={"expand_circle_right"}
-              iconFill={1}
+              iconName={card.cta.iconName ?? "expand_circle_right"}
+              iconFill={card.cta.iconFill ?? 1}
             />
           </div>
-        )}
+        ) : null}
       </div>
-    </div>
+    </section>
   );
 };
 

package/src/contentful/blocks/cards/simple-card/types.ts

@@ -1,21 +1,64 @@
-import { ReactNode } from "react";
-import { ButtonProps } from "../../button/types";
+import type { CSSProperties, ReactNode } from "react";
+import type { ButtonProps } from "../../button/types";
+
+export type PinwheelColor =
+  | "Blue-#307998"
+  | "Green-#209A61"
+  | "Orange-#DE7E0A"
+  | "Purple-#7E1458"
+  | (string & {});
+
+export type SimpleCardCtaBottom = {
+  title?: string;
+  href?: string;
+};
 
 export type Item = {
   title?: string;
   image?: string;
+  imageAlt?: string;
+  imageWidth?: number;
+  imageHeight?: number;
   imageAlignment?: "left" | "right" | "center";
-  imageView?: "standard" | "icon" | "full";
+  iconAlignment?: "left" | "right" | "center";
+  /**
+   * Layout variant for the image. `standard` / `icon` render an inline
+   * icon above the content. `full` renders a full-bleed top image.
+   * `margin` is `full` with horizontal padding.
+   */
+  imageView?: "standard" | "icon" | "full" | "margin" | "inset";
+  body?: ReactNode;
+  /** Optional secondary rich-text region (port of local `richText`). */
+  richText?: ReactNode;
   cta?: ButtonProps;
   ctaAlignment?: "left" | "right" | "center";
-  body?: ReactNode;
+  /** Top "location" CTA, rendered above the title with a `location_on` icon. */
+  ctaBottom?: SimpleCardCtaBottom;
+  ctaAlignmentBottom?: "left" | "right" | "center";
+  /** Legacy token-based card background (mapped via `backgroundColorMap`). */
   backgroundColor?: string;
+  /** Raw color value used when `applyCardBackgroundColor` is true. */
+  applyCardBackgroundColor?: boolean;
+  textColor?: string;
+  showBackgroundImage?: boolean;
+  pinwheelColor?: PinwheelColor;
+  /** On `lg:` and up, lays out icon + content side-by-side. */
+  imageToRichTextAlignment?: boolean;
+  /** Bold label between title and the phone/hours table. */
+  titleLocation?: string;
+  phoneNumber?: string[];
+  /** Each entry uses a `label|value` separator. */
+  workingHours?: string[];
+  shadow?: boolean;
 };
 
 export type SimpleCardProps = {
   card: Item;
   lgWidth?: string;
   mdWidth?: string;
+  className?: string;
+  contentClassName?: string;
+  style?: CSSProperties;
 };
 
 export const backgroundColorMap: Record<string, string> = {

package/src/contentful/blocks/comparison-table/index.tsx

@@ -17,7 +17,9 @@ export const ComparisonTable: React.FC<ComparisonTableProps> = ({
         <Text as="h2" className="heading2 md:heading1 md:text-center">
           {title}
         </Text>
-        <div className="comparison-table-container mt-5 md:mt-10 p-5 pt-0 md:py-9 md:px-10">{table}</div>
+        <div className="comparison-table-container mt-5 p-5 pt-0 md:mt-10 md:px-10 md:py-9">
+          {table}
+        </div>
         <Text as="div" className="micro mt-8 text-center">
           {disclaimer}
         </Text>