@windstream/react-shared-components 0.1.27 → 0.1.29

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

@@ -1,208 +1,208 @@
-"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,
-  planSubtext,
-  speed,
-  price,
-  description,
-  bestValue = false,
-  bestValueText = "best value",
-  giftBadge,
-  innerBadge,
-  theme = "light",
-  featuresTitle = "Business Ready Internet features",
-  features = [],
-  isExpanded: controlledExpanded,
-  onToggleExpand,
-  onCtaClick,
-  renderCheckPlans,
-  cta,
-  techType,
-  ismaxSpeed,
-}) => {
-  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(
-                "subheading2 whitespace-nowrap font-black",
-                isDark ? "text-bg-fill-brand-accent" : "text-text-brand"
-              )}
-            >
-              {planName}
-            </Text>
-            <Text
-              as="p"
-              className={`text-label3 font-black ${isDark ? "text-bg-fill-brand-accent" : "text-text-brand"} md:whitespace-nowrap`}
-            >
-              {planSubtext}
-            </Text>
-          </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 as="div" className="text-sm font-bold">
-                    {badge.title}
-                  </Text>
-                </div>
-              );
-            })}
-        </div>
-
-        {/* CTA */}
-        <SelectPlanButton
-          onSelect={onCtaClick}
-          speed={speed}
-          isSelected={isDark}
-          renderCheckPlans={renderCheckPlans}
-          cta={cta}
-          techType={techType}
-          isMax={ismaxSpeed}
-        />
-        {/* 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}
-                  iconColor={isDark ? "yellow" : "green"}
-                  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,
+  planSubtext,
+  speed,
+  price,
+  description,
+  bestValue = false,
+  bestValueText = "best value",
+  giftBadge,
+  innerBadge,
+  theme = "light",
+  featuresTitle = "Business Ready Internet features",
+  features = [],
+  isExpanded: controlledExpanded,
+  onToggleExpand,
+  onCtaClick,
+  renderCheckPlans,
+  cta,
+  techType,
+  ismaxSpeed,
+}) => {
+  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(
+                "subheading2 whitespace-nowrap font-black",
+                isDark ? "text-bg-fill-brand-accent" : "text-text-brand"
+              )}
+            >
+              {planName}
+            </Text>
+            <Text
+              as="p"
+              className={`text-label3 font-black ${isDark ? "text-bg-fill-brand-accent" : "text-text-brand"} md:whitespace-nowrap`}
+            >
+              {planSubtext}
+            </Text>
+          </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 as="div" className="text-sm font-bold">
+                    {badge.title}
+                  </Text>
+                </div>
+              );
+            })}
+        </div>
+
+        {/* CTA */}
+        <SelectPlanButton
+          onSelect={onCtaClick}
+          speed={speed}
+          isSelected={isDark}
+          renderCheckPlans={renderCheckPlans}
+          cta={cta}
+          techType={techType}
+          isMax={ismaxSpeed}
+        />
+        {/* 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}
+                  iconColor={isDark ? "yellow" : "green"}
+                  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,28 +1,28 @@
-import React, { ReactNode } from "react";
-
-import { ButtonProps } from "@shared/contentful/blocks/button/types";
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export interface ProductCardProps {
-  planName: string;
-  planSubtext?: string;
-  speed: string;
-  techType?: string;
-  ismaxSpeed?: boolean;
-  price: string;
-  description: string;
-  bestValue?: boolean;
-  bestValueText?: string;
-  giftBadge?: [{ title: ReactNode; icon: string }];
-  innerBadge?: { badgeText: string; badgeIcon: string };
-  theme?: "light" | "dark";
-  featuresTitle?: string;
-  features: ReactNode[];
-  isExpanded?: boolean;
-  onToggleExpand?: () => void;
-  ctaText?: string;
-  cta?: ButtonProps;
-  onCtaClick: () => void;
-  hostType: "residential" | "smb";
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-}
+import React, { ReactNode } from "react";
+
+import { ButtonProps } from "@shared/contentful/blocks/button/types";
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export interface ProductCardProps {
+  planName: string;
+  planSubtext?: string;
+  speed: string;
+  techType?: string;
+  ismaxSpeed?: boolean;
+  price: string;
+  description: string;
+  bestValue?: boolean;
+  bestValueText?: string;
+  giftBadge?: [{ title: ReactNode; icon: string }];
+  innerBadge?: { badgeText: string; badgeIcon: string };
+  theme?: "light" | "dark";
+  featuresTitle?: string;
+  features: ReactNode[];
+  isExpanded?: boolean;
+  onToggleExpand?: () => void;
+  ctaText?: string;
+  cta?: ButtonProps;
+  onCtaClick: () => void;
+  hostType: "residential" | "smb";
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+}

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

@@ -1,88 +1,88 @@
-import React from "react";
-import { Button } from "../../button";
-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-8 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="heading6 font-black md:heading5">
-              {card.title}
-            </Text>
-          )}
-          {card.body && (
-            <Text as="div" className="body1">
-              {card.body}
-            </Text>
-          )}
-        </div>
-        {card.cta && (
-          <div className="card-footer">
-            <Button
-              linkVariant="unstyled"
-              linkClassName="label1 flex items-center text-text gap-2"
-              {...card.cta}
-              iconName={"expand_circle_right"}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default SimpleCard;
+import React from "react";
+import { Button } from "../../button";
+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-8 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="heading6 font-black md:heading5">
+              {card.title}
+            </Text>
+          )}
+          {card.body && (
+            <Text as="div" className="body1">
+              {card.body}
+            </Text>
+          )}
+        </div>
+        {card.cta && (
+          <div className="card-footer">
+            <Button
+              linkVariant="unstyled"
+              linkClassName="label1 flex items-center text-text gap-2"
+              {...card.cta}
+              iconName={"expand_circle_right"}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SimpleCard;