@windstream/react-shared-components 0.0.71 → 0.0.72

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

@@ -1,199 +1,199 @@
-"use client";
-
-import React, { useState } from "react";
-import { ProductCardProps } from "./types";
-
-import { Button } from "@shared/components/button";
-import { Checklist } from "@shared/components/checklist";
-import { Image } from "@shared/components/image";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { SelectPlanButton } from "@shared/components/select-plan-button";
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-export const ProductCard: React.FC<ProductCardProps> = ({
-  planName,
-  speed,
-  price,
-  description,
-  bestValue = false,
-  bestValueText = "best value",
-  giftBadge,
-  innerBadge,
-  theme = "light",
-  featuresTitle = "Business Ready Internet features",
-  features = [],
-  isExpanded: controlledExpanded,
-  onToggleExpand,
-  onCtaClick,
-  hostType,
-}) => {
-  const [internalExpanded, setInternalExpanded] = useState(false);
-  // Use parent state if provided, otherwise use internal state
-  const isExpanded =
-    controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
-
-  const handleToggle = () => {
-    if (onToggleExpand) {
-      onToggleExpand();
-    } else {
-      setInternalExpanded(!internalExpanded);
-    }
-  };
-
-  const isDark = theme === "dark";
-
-  return (
-    <article
-      className={cx(
-        "relative flex h-full w-full max-w-[392px] flex-col",
-        !bestValue && "pt-[28px]"
-      )}
-    >
-      {/* Best Value Banner */}
-      {bestValue && (
-        <div className="rounded-t-[20px] bg-bg-fill-brand-accent px-4 py-1 text-center text-sm font-bold text-text">
-          {bestValueText}
-        </div>
-      )}
-
-      {/* Main Card */}
-      <div
-        className={cx(
-          "flex flex-grow flex-col gap-6 rounded-[20px] px-5 shadow-cardDrop",
-          isDark ? "bg-bg-fill-inverse text-white" : "bg-white text-text",
-          bestValue ? "rounded-t-none" : ""
-        )}
-      >
-        {/* Plan Name & Price */}
-        <header className="overflow-none flex items-start justify-between gap-4 pt-7">
-          <div className="flex flex-col">
-            <Text
-              as="h3"
-              className={cx(
-                "whitespace-nowrap text-subheading2 font-black lowercase",
-                isDark ? "text-bg-fill-brand-accent" : "text-text-brand"
-              )}
-            >
-              {planName}
-            </Text>
-            {hostType === "smb" ? (
-              <Text
-                as="p"
-                className={`text-label3 font-black ${isDark ? "text-bg-fill-brand-accent" : "text-text-brand"} lowercase md:whitespace-nowrap`}
-              >
-                business ready internet
-              </Text>
-            ) : null}
-          </div>
-          <div className="flex items-start">
-            <span className="text-xl font-normal">$</span>
-            <span className="text-subheading6 font-medium leading-none">
-              {price.split(".")[0]}
-            </span>
-            <span className="text-sm font-black">{price.split(".")[1]}/mo</span>
-          </div>
-        </header>
-
-        {/* Description */}
-        <section>
-          <Text
-            className={cx("text-base", isDark ? "text-white" : "text-text")}
-          >
-            {description}
-          </Text>
-        </section>
-
-        {/* Gift Badge */}
-        <div
-          className={cx(
-            "flex-col items-center rounded-xl p-2",
-            isDark ? "bg-bg-surface-inverse" : "bg-gray-200"
-          )}
-        >
-          {giftBadge &&
-            giftBadge?.map((badge: any) => {
-              return (
-                <div key={badge.title} className="flex items-center gap-2 p-1">
-                  <Image
-                    src={badge.icon}
-                    alt={badge.title}
-                    width={24}
-                    height={24}
-                  />
-                  <Text className="text-sm font-bold">{badge.title}</Text>
-                </div>
-              );
-            })}
-        </div>
-
-        {/* CTA */}
-        <SelectPlanButton
-          onSelect={onCtaClick}
-          speed={speed}
-          isSelected={isDark}
-        />
-        {/* Features */}
-        {features.length > 0 && (
-          <section className="flex flex-col gap-6">
-            <Button
-              onClick={handleToggle}
-              className="group flex w-full items-center justify-between text-left"
-            >
-              <Text as="h4" className="text-base font-bold">
-                {featuresTitle}
-              </Text>
-              <MaterialIcon
-                name="keyboard_arrow_up"
-                fill={1}
-                size={24}
-                className={cx(
-                  "transition-transform duration-300",
-                  isExpanded && "rotate-180"
-                )}
-              />
-            </Button>
-            <div
-              className={cx(
-                "overflow-hidden transition-all duration-300 ease-in-out",
-                isExpanded ? "pb-7 opacity-100" : "max-h-0 opacity-0"
-              )}
-            >
-              <div className="flex flex-col gap-3">
-                <Checklist
-                  items={features}
-                  listItemClassName={`${isDark ? "text-white" : "text-text"}`}
-                />
-              </div>
-              {innerBadge?.badgeIcon ? (
-                <div className="flex items-center gap-2 text-center">
-                  <Image
-                    src={innerBadge.badgeIcon}
-                    alt="Inner Badge"
-                    width={12}
-                    height={12}
-                  />
-                  <span className="text-sm">
-                    {innerBadge.badgeText.includes("|") ? (
-                      <>
-                        <span className="font-bold">
-                          {innerBadge.badgeText.split("|")[0]}
-                        </span>
-                        <span className="font-normal">
-                          {innerBadge.badgeText.split("|")[1]}
-                        </span>
-                      </>
-                    ) : (
-                      <Text className="font-bold">{innerBadge.badgeText}</Text>
-                    )}
-                  </span>
-                </div>
-              ) : null}
-            </div>
-          </section>
-        )}
-      </div>
-    </article>
-  );
-};
-export default ProductCard;
+"use client";
+
+import React, { useState } from "react";
+import { ProductCardProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { Checklist } from "@shared/components/checklist";
+import { Image } from "@shared/components/image";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { SelectPlanButton } from "@shared/components/select-plan-button";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+export const ProductCard: React.FC<ProductCardProps> = ({
+  planName,
+  speed,
+  price,
+  description,
+  bestValue = false,
+  bestValueText = "best value",
+  giftBadge,
+  innerBadge,
+  theme = "light",
+  featuresTitle = "Business Ready Internet features",
+  features = [],
+  isExpanded: controlledExpanded,
+  onToggleExpand,
+  onCtaClick,
+  hostType,
+}) => {
+  const [internalExpanded, setInternalExpanded] = useState(false);
+  // Use parent state if provided, otherwise use internal state
+  const isExpanded =
+    controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+
+  const handleToggle = () => {
+    if (onToggleExpand) {
+      onToggleExpand();
+    } else {
+      setInternalExpanded(!internalExpanded);
+    }
+  };
+
+  const isDark = theme === "dark";
+
+  return (
+    <article
+      className={cx(
+        "relative flex h-full w-full max-w-[392px] flex-col",
+        !bestValue && "pt-[28px]"
+      )}
+    >
+      {/* Best Value Banner */}
+      {bestValue && (
+        <div className="rounded-t-[20px] bg-bg-fill-brand-accent px-4 py-1 text-center text-sm font-bold text-text">
+          {bestValueText}
+        </div>
+      )}
+
+      {/* Main Card */}
+      <div
+        className={cx(
+          "flex flex-grow flex-col gap-6 rounded-[20px] px-5 shadow-cardDrop",
+          isDark ? "bg-bg-fill-inverse text-white" : "bg-white text-text",
+          bestValue ? "rounded-t-none" : ""
+        )}
+      >
+        {/* Plan Name & Price */}
+        <header className="overflow-none flex items-start justify-between gap-4 pt-7">
+          <div className="flex flex-col">
+            <Text
+              as="h3"
+              className={cx(
+                "whitespace-nowrap text-subheading2 font-black lowercase",
+                isDark ? "text-bg-fill-brand-accent" : "text-text-brand"
+              )}
+            >
+              {planName}
+            </Text>
+            {hostType === "smb" ? (
+              <Text
+                as="p"
+                className={`text-label3 font-black ${isDark ? "text-bg-fill-brand-accent" : "text-text-brand"} lowercase md:whitespace-nowrap`}
+              >
+                business ready internet
+              </Text>
+            ) : null}
+          </div>
+          <div className="flex items-start">
+            <span className="text-xl font-normal">$</span>
+            <span className="text-subheading6 font-medium leading-none">
+              {price.split(".")[0]}
+            </span>
+            <span className="text-sm font-black">{price.split(".")[1]}/mo</span>
+          </div>
+        </header>
+
+        {/* Description */}
+        <section>
+          <Text
+            className={cx("text-base", isDark ? "text-white" : "text-text")}
+          >
+            {description}
+          </Text>
+        </section>
+
+        {/* Gift Badge */}
+        <div
+          className={cx(
+            "flex-col items-center rounded-xl p-2",
+            isDark ? "bg-bg-surface-inverse" : "bg-gray-200"
+          )}
+        >
+          {giftBadge &&
+            giftBadge?.map((badge: any) => {
+              return (
+                <div key={badge.title} className="flex items-center gap-2 p-1">
+                  <Image
+                    src={badge.icon}
+                    alt={badge.title}
+                    width={24}
+                    height={24}
+                  />
+                  <Text className="text-sm font-bold">{badge.title}</Text>
+                </div>
+              );
+            })}
+        </div>
+
+        {/* CTA */}
+        <SelectPlanButton
+          onSelect={onCtaClick}
+          speed={speed}
+          isSelected={isDark}
+        />
+        {/* Features */}
+        {features.length > 0 && (
+          <section className="flex flex-col gap-6">
+            <Button
+              onClick={handleToggle}
+              className="group flex w-full items-center justify-between text-left"
+            >
+              <Text as="h4" className="text-base font-bold">
+                {featuresTitle}
+              </Text>
+              <MaterialIcon
+                name="keyboard_arrow_up"
+                fill={1}
+                size={24}
+                className={cx(
+                  "transition-transform duration-300",
+                  isExpanded && "rotate-180"
+                )}
+              />
+            </Button>
+            <div
+              className={cx(
+                "overflow-hidden transition-all duration-300 ease-in-out",
+                isExpanded ? "pb-7 opacity-100" : "max-h-0 opacity-0"
+              )}
+            >
+              <div className="flex flex-col gap-3">
+                <Checklist
+                  items={features}
+                  listItemClassName={`${isDark ? "text-white" : "text-text"}`}
+                />
+              </div>
+              {innerBadge?.badgeIcon ? (
+                <div className="flex items-center gap-2 text-center">
+                  <Image
+                    src={innerBadge.badgeIcon}
+                    alt="Inner Badge"
+                    width={12}
+                    height={12}
+                  />
+                  <span className="text-sm">
+                    {innerBadge.badgeText.includes("|") ? (
+                      <>
+                        <span className="font-bold">
+                          {innerBadge.badgeText.split("|")[0]}
+                        </span>
+                        <span className="font-normal">
+                          {innerBadge.badgeText.split("|")[1]}
+                        </span>
+                      </>
+                    ) : (
+                      <Text className="font-bold">{innerBadge.badgeText}</Text>
+                    )}
+                  </span>
+                </div>
+              ) : null}
+            </div>
+          </section>
+        )}
+      </div>
+    </article>
+  );
+};
+export default ProductCard;

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

@@ -1,18 +1,18 @@
-export interface ProductCardProps {
-  planName: string;
-  speed: string;
-  price: string;
-  description: string;
-  bestValue?: boolean;
-  bestValueText?: string;
-  giftBadge?: [{ title: string; icon: string }];
-  innerBadge?: { badgeText: string; badgeIcon: string };
-  theme?: "light" | "dark";
-  featuresTitle?: string;
-  features: string[];
-  isExpanded?: boolean;
-  onToggleExpand?: () => void;
-  ctaText?: string;
-  onCtaClick: () => void;
-  hostType: "residential" | "smb";
-}
+export interface ProductCardProps {
+  planName: string;
+  speed: string;
+  price: string;
+  description: string;
+  bestValue?: boolean;
+  bestValueText?: string;
+  giftBadge?: [{ title: string; icon: string }];
+  innerBadge?: { badgeText: string; badgeIcon: string };
+  theme?: "light" | "dark";
+  featuresTitle?: string;
+  features: string[];
+  isExpanded?: boolean;
+  onToggleExpand?: () => void;
+  ctaText?: string;
+  onCtaClick: () => void;
+  hostType: "residential" | "smb";
+}

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

@@ -1,45 +1,77 @@
-import React from "react";
-import type { SimpleCardsProps } from "./types";
-
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-
-export const SimpleCards: React.FC<SimpleCardsProps> = ({ items = [] }) => {
-  if (!items.length) return null;
-
-  return (
-    <div className="card-holder grid grid-cols-1 items-stretch gap-5 self-stretch lg:auto-cols-fr lg:grid-flow-col lg:gap-6 lg:overflow-x-auto">
-      {items.map((item, index: number) => (
-        <div className="callout-card h-full p-6 lg:p-8" key={`card-${index}`}>
-          <div className="card-template flex flex-col gap-6 lg:items-start lg:gap-8">
-            <div className="card-header">
-              {item.image && (
-                <NextImage
-                  width={88}
-                  height={88}
-                  src={item.image}
-                  alt={item.title ?? "card-icon"}
-                />
-              )}
-            </div>
-
-            <div className="card-body flex flex-col gap-3">
-              {item.title && (
-                <Text as="h3" className="heading6">
-                  {item.title}
-                </Text>
-              )}
-              {item.body && (
-                <Text as="div" className="body1">
-                  {item.body}
-                </Text>
-              )}
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default SimpleCards;
+import React from "react";
+import { backgroundColorMap, Item, SimpleCardProps } from "./types";
+
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+
+export const SimpleCard: React.FC<SimpleCardProps> = ({
+  card,
+  lgWidth,
+  mdWidth,
+}) => {
+  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 imageAlignment = card.imageAlignment?.toLowerCase() || "left";
+  const imageAlignClass =
+    imageAlignment === "left"
+      ? "lg:items-start"
+      : imageAlignment === "right"
+        ? "lg:items-end"
+        : "lg:items-center";
+
+  return (
+    <div
+      className={`callout-card ${mdWidth} ${lgWidth} w-full ${backgroundColorMap[card.backgroundColor ?? ""] ?? ""}`}
+    >
+      <div
+        className={`card-template flex h-full flex-col items-center gap-6 p-8 text-center ${imageAlignClass}`}
+      >
+        <div className="card-header">{imageRenderer(card)}</div>
+
+        <div className="card-body flex flex-col gap-3 text-start">
+          {card.title && (
+            <Text as="h5" className="heading5 font-black">
+              {card.title}
+            </Text>
+          )}
+          {card.body && (
+            <Text as="div" className="body1">
+              {card.body}
+            </Text>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SimpleCard;

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

@@ -1,9 +1,31 @@
-export type Item = {
-  title?: string;
-  image?: string;
-  body?: React.ReactNode;
-};
-
-export type SimpleCardsProps = {
-  items: Item[];
-};
+import { ReactNode } from "react";
+
+export type Item = {
+  title?: string;
+  image?: string;
+  imageAlignment?: "left" | "right" | "center";
+  imageView?: "standard" | "icon" | "full";
+  cta?: {
+    label?: string;
+    url?: string;
+    newTab?: boolean;
+  };
+  ctaAlignment?: "left" | "right" | "center";
+  body?: ReactNode;
+  backgroundColor?: string;
+};
+
+export type SimpleCardProps = {
+  card: Item;
+  lgWidth?: string;
+  mdWidth?: string;
+};
+
+export const backgroundColorMap: Record<string, string> = {
+  blue: "bg-fill-brand",
+  green: "bg-fill-brand-accent",
+  navy: "bg-fill-inverse",
+  purple: "bg-fill-brand-tertiary",
+  white: "bg-white",
+  yellow: "bg-[#F5FF1E]",
+};