@windstream/react-shared-components 0.1.70 → 0.1.72

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

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