@windstream/react-shared-components 0.1.81 → 0.1.87

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

@@ -1,325 +1,325 @@
-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 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 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 (
-    <section
-      className={cx(
-        "callout-card relative flex h-full 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={cx(
-          "relative flex flex-1 flex-col justify-between px-6 pb-8 pt-7 lg:px-8 lg:py-8",
-          contentClassName
-        )}
-      >
-        <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}
-
-              {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={cx("mt-2", ctaAlignmentClass)}>
-            <Button
-              linkVariant="unstyled"
-              linkClassName={cx(
-                "label1 flex items-center gap-2 text-text",
-                useDynamicColors && card.textColor && "decoration-current"
-              )}
-              {...card.cta}
-              iconName={card.cta.iconName ?? "expand_circle_right"}
-              iconFill={card.cta.iconFill ?? 1}
-            />
-          </div>
-        ) : null}
-      </div>
-    </section>
-  );
-};
-
-export default SimpleCard;
+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 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 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 (
+    <section
+      className={cx(
+        "callout-card relative flex h-full 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={cx(
+          "relative flex flex-1 flex-col justify-between px-6 pb-8 pt-7 lg:px-8 lg:py-8",
+          contentClassName
+        )}
+      >
+        <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}
+
+              {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={cx("mt-2", ctaAlignmentClass)}>
+            <Button
+              linkVariant="unstyled"
+              linkClassName={cx(
+                "label1 flex items-center gap-2 text-text",
+                useDynamicColors && card.textColor && "decoration-current"
+              )}
+              {...card.cta}
+              iconName={card.cta.iconName ?? "expand_circle_right"}
+              iconFill={card.cta.iconFill ?? 1}
+            />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+export default SimpleCard;