@windstream/react-shared-components 0.1.29 → 0.1.30

package/src/contentful/blocks/cards/index.tsx

@@ -1,13 +1,13 @@
-import { CardsProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
-  return (
-    <div>
-      <Text>Cards</Text>
-    </div>
-  );
-};
-
-export default Cards;
+import { CardsProps } from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
+  return (
+    <div>
+      <Text>Cards</Text>
+    </div>
+  );
+};
+
+export default Cards;

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

@@ -1,208 +1,252 @@
-"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 && "md:pt-[38px]"
+      )}
+    >
+      {/* Best Value Banner */}
+      {bestValue && (
+        <div className="label3 rounded-t-[20px] bg-bg-fill-brand-accent px-6 py-2 text-center text-text">
+          {bestValueText}
+        </div>
+      )}
+
+      {/* Main Card */}
+      <div
+        className={cx(
+          "flex flex-grow flex-col gap-5 rounded-card px-5 py-7 shadow-cardDrop",
+          isDark
+            ? "text-inverse border-2 border-border-accent bg-bg-fill-inverse"
+            : "bg-bg text-text",
+          bestValue ? "rounded-t-none border-t-0" : ""
+        )}
+      >
+        {/* Plan Name & Price */}
+        <header className="overflow-none flex items-start justify-between gap-4">
+          <div className="flex flex-col">
+            <Text
+              as="h3"
+              className={cx(
+                "subheading2",
+                isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
+              )}
+            >
+              {planName}
+            </Text>
+            <Text
+              as="p"
+              className={`label3 text-wrap ${isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"}`}
+            >
+              {planSubtext}
+            </Text>
+          </div>
+          <div className="flex items-start">
+            <Text
+              as="span"
+              className={cx(
+                "label2 mr-1 mt-[2px]",
+                isDark ? "text-text-inverse" : "text-text"
+              )}
+            >
+              $
+            </Text>
+            <Text
+              as="span"
+              className={cx(
+                "subheading6",
+                isDark ? "text-text-inverse" : "text-text"
+              )}
+            >
+              {price.split(".")[0]}
+            </Text>
+            <Text
+              as="span"
+              className={cx(
+                "label2",
+                isDark ? "text-text-inverse" : "text-text"
+              )}
+            >
+              {price.split(".")[1]}/mo
+            </Text>
+          </div>
+        </header>
+
+        {/* Description */}
+        <section>
+          <Text
+            className={cx("body2", isDark ? "text-text-inverse" : "text-text")}
+          >
+            {description}
+          </Text>
+        </section>
+
+        {/* Gift Badge */}
+        {giftBadge?.length ? (
+          <div
+            className={cx(
+              "flex-col items-center rounded-surface-sm p-2",
+              isDark ? "bg-bg-surface-inverse" : "bg-bg-surface-info"
+            )}
+          >
+            {giftBadge?.map((badge: any) => {
+              return (
+                <div key={badge.title} className="flex items-center gap-2">
+                  <Image
+                    src={badge.icon}
+                    alt={badge.title}
+                    width={24}
+                    height={24}
+                  />
+                  <Text
+                    as="div"
+                    className={cx(
+                      "body3",
+                      isDark ? "text-text-inverse" : "text-text"
+                    )}
+                  >
+                    {badge.title}
+                  </Text>
+                </div>
+              );
+            })}
+          </div>
+        ) : null}
+
+        {/* CTA */}
+        <SelectPlanButton
+          onSelect={onCtaClick}
+          speed={speed}
+          isSelected={isDark}
+          renderCheckPlans={renderCheckPlans}
+          cta={cta}
+          iconSize={32}
+          iconClassName="!h-8 !w-8"
+          techType={techType}
+          isMax={ismaxSpeed}
+        />
+        {/* Features */}
+        {features.length > 0 && (
+          <section className="flex flex-col gap-3">
+            <Button
+              onClick={handleToggle}
+              className="group flex w-full items-center gap-2 text-left"
+            >
+              <Text
+                as="h4"
+                className={cx(
+                  "label3",
+                  isDark ? "text-text-inverse" : "text-text"
+                )}
+              >
+                {featuresTitle}
+              </Text>
+              <MaterialIcon
+                name="keyboard_arrow_down"
+                fill={1}
+                size={24}
+                className={cx(
+                  "transition-transform duration-300",
+                  isExpanded && "rotate-180",
+                  isDark ? "text-text-inverse" : "text-text"
+                )}
+              />
+            </Button>
+            <div
+              className={cx(
+                "overflow-hidden transition-all duration-200 ease-in-out",
+                isExpanded ? "opacity-100" : "max-h-0 opacity-0"
+              )}
+            >
+              <div className="flex flex-col">
+                <Checklist
+                  items={features}
+                  iconSize={24}
+                  iconPosition="top"
+                  iconClassName="mt-0"
+                  iconColor={isDark ? "yellow" : "green"}
+                  listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
+                  listItemClassName={`${isDark ? "text-text-inverse" : "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="footnote text-text">
+                    {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;
+}