@windstream/react-shared-components 0.0.93 → 0.0.94

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,
-  planSubtext,
-  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>
-            <Text
-              as="p"
-              className={`text-label3 font-black ${isDark ? "text-bg-fill-brand-accent" : "text-text-brand"} lowercase 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 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}
-                  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,
+  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(
+                "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 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}
+                  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,21 +1,21 @@
-import { ReactNode } from "react";
-
-export interface ProductCardProps {
-  planName: string;
-  planSubtext?: string;
-  speed: string;
-  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;
-  onCtaClick: () => void;
-  hostType: "residential" | "smb";
-}
+import { ReactNode } from "react";
+
+export interface ProductCardProps {
+  planName: string;
+  planSubtext?: string;
+  speed: string;
+  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;
+  onCtaClick: () => void;
+  hostType: "residential" | "smb";
+}

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Button } from "../../button";
 import { backgroundColorMap, Item, SimpleCardProps } from "./types";
 
 import { NextImage } from "@shared/components/next-image";
@@ -53,7 +54,7 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
       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}`}
+        className={`card-template flex h-full flex-col items-center gap-8 p-8 text-center ${imageAlignClass}`}
       >
         <div className="card-header">{imageRenderer(card)}</div>
 
@@ -69,6 +70,16 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
             </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>
   );

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

@@ -1,15 +1,12 @@
 import { ReactNode } from "react";
+import { ButtonProps } from "../../button/types";
 
 export type Item = {
   title?: string;
   image?: string;
   imageAlignment?: "left" | "right" | "center";
   imageView?: "standard" | "icon" | "full";
-  cta?: {
-    label?: string;
-    url?: string;
-    newTab?: boolean;
-  };
+  cta?: ButtonProps;
   ctaAlignment?: "left" | "right" | "center";
   body?: ReactNode;
   backgroundColor?: string;

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

@@ -1,88 +1,88 @@
-import React from "react";
-import { TestimonialCardProps } from "./types";
-import clsx from "clsx";
-import Image from "next/image";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-import { Text } from "@shared/components/text";
-
-export const TestimonialCard: React.FC<TestimonialCardProps> = ({
-  title,
-  quote,
-  rating,
-  author,
-  role,
-  avatarUrl,
-  isActive = false,
-  className,
-}) => {
-  return (
-    <figure
-      className={clsx(
-        "flex h-full w-full flex-col rounded-3xl p-6 font-sans transition-all duration-300 md:p-13",
-        isActive ? "bg-white shadow-lg" : "bg-gray-50 opacity-60", // Active vs Inactive styles
-        className
-      )}
-    >
-      <header>
-        <Text as="h3" className="mb-4 text-xl font-black lowercase text-text">
-          {title}
-        </Text>
-      </header>
-      <blockquote className="mb-5 flex-grow text-xl leading-relaxed text-text">
-        {quote}
-      </blockquote>
-
-      {/* Rating Stars */}
-      {rating ? (
-        <div className="mb-5 flex gap-1">
-          {[...Array(5)].map((_, i) => (
-            <MaterialIcon
-              key={i}
-              size={24}
-              name="star"
-              fill={1}
-              className={clsx(
-                "h-5 w-5",
-                i < rating ? "text-text" : "text-gray-300"
-              )}
-              aria-hidden="true"
-            />
-          ))}
-        </div>
-      ) : null}
-
-      {/* Author Block */}
-      {author && (
-        <figcaption className="flex items-center gap-3">
-          <div className="relative h-10 w-10 shrink-0 overflow-hidden rounded-full bg-gray-300">
-            {avatarUrl ? (
-              <Image
-                src={avatarUrl}
-                alt={author}
-                fill={true}
-                className="object-cover"
-                sizes="40px"
-              />
-            ) : (
-              <div className="flex h-full w-full items-center justify-center bg-gray-500 text-xs font-bold text-white">
-                {author.charAt(0)}
-              </div>
-            )}
-          </div>
-
-          <div className="flex flex-col">
-            <cite className="text-sm font-bold not-italic text-text">
-              {author}
-            </cite>
-            <Text as="p" className="text-xs text-text">
-              {role}
-            </Text>
-          </div>
-        </figcaption>
-      )}
-    </figure>
-  );
-};
-
-export default TestimonialCard;
+import React from "react";
+import { TestimonialCardProps } from "./types";
+import clsx from "clsx";
+import Image from "next/image";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Text } from "@shared/components/text";
+
+export const TestimonialCard: React.FC<TestimonialCardProps> = ({
+  title,
+  quote,
+  rating,
+  author,
+  role,
+  avatarUrl,
+  isActive = false,
+  className,
+}) => {
+  return (
+    <figure
+      className={clsx(
+        "flex h-full w-full flex-col rounded-3xl p-6 font-sans transition-all duration-300 md:p-13",
+        isActive ? "bg-white shadow-lg" : "bg-gray-50 opacity-60", // Active vs Inactive styles
+        className
+      )}
+    >
+      <header>
+        <Text as="h3" className="mb-4 text-xl font-black lowercase text-text">
+          {title}
+        </Text>
+      </header>
+      <blockquote className="mb-5 flex-grow text-xl leading-relaxed text-text">
+        {quote}
+      </blockquote>
+
+      {/* Rating Stars */}
+      {rating ? (
+        <div className="mb-5 flex gap-1">
+          {[...Array(5)].map((_, i) => (
+            <MaterialIcon
+              key={i}
+              size={24}
+              name="star"
+              fill={1}
+              className={clsx(
+                "h-5 w-5",
+                i < rating ? "text-text" : "text-gray-300"
+              )}
+              aria-hidden="true"
+            />
+          ))}
+        </div>
+      ) : null}
+
+      {/* Author Block */}
+      {author && (
+        <figcaption className="flex items-center gap-3">
+          <div className="relative h-10 w-10 shrink-0 overflow-hidden rounded-full bg-gray-300">
+            {avatarUrl ? (
+              <Image
+                src={avatarUrl}
+                alt={author}
+                fill={true}
+                className="object-cover"
+                sizes="40px"
+              />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center bg-gray-500 text-xs font-bold text-white">
+                {author.charAt(0)}
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-col">
+            <cite className="text-sm font-bold not-italic text-text">
+              {author}
+            </cite>
+            <Text as="p" className="text-xs text-text">
+              {role}
+            </Text>
+          </div>
+        </figcaption>
+      )}
+    </figure>
+  );
+};
+
+export default TestimonialCard;