@windstream/react-shared-components 0.0.93 → 0.0.95

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/carousel/helper.tsx

@@ -11,12 +11,16 @@ import { Button } from "@shared/components/button";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { ProductCard } from "@shared/contentful/blocks/cards/product-card";
 import { TestimonialCard } from "@shared/contentful/blocks/cards/testimonial-card";
+import { CheckPlansProps } from "@shared/types/micro-components";
 import { cx } from "@shared/utils";
 
 export function ProductCardCarousel({
   fields,
+  renderCheckPlans,
 }: {
   fields: CarouselWithProductCards;
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
 }) {
   const itemsExpanded = fields?.items?.items?.[0]?.benefitsExpanded || false;
   const [desktopExpanded, setDesktopExpanded] = useState(itemsExpanded);
@@ -79,8 +83,7 @@ export function ProductCardCarousel({
     isMobileView: boolean = false
   ) => {
     const planContent = item?.speed?.split("|");
-    const techPrefix = item?.techType?.startsWith("FIBER") ? "fiber " : "";
-    const planName = `${techPrefix}${planContent?.[0] || ""}`;
+    const planName = planContent?.[0] || "";
     const planSubtext = planContent?.[1] || "";
     const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
     const formattedPrice = `${item?.price || "0"}.${priceCents}`;
@@ -134,6 +137,8 @@ export function ProductCardCarousel({
           planName={planName}
           planSubtext={planSubtext}
           speed={item?.speed || ""}
+          techType={item?.techType || ""}
+          ismaxSpeed={item?.ismaxSpeed || ""}
           price={formattedPrice}
           description={item?.productCardDescription || ""}
           giftBadge={rawBadge}
@@ -147,6 +152,8 @@ export function ProductCardCarousel({
           onToggleExpand={handleToggle}
           ctaText={item?.cta?.buttonLabel || "Select plan"}
           onCtaClick={handleCtaClick}
+          renderCheckPlans={renderCheckPlans}
+          cta={item.cta}
           hostType="smb"
         />
       </div>
@@ -335,7 +342,7 @@ export const TabSwitch: React.FC<TabSwitchProps> = ({
           key={tab}
           onClick={() => onChange(tab)}
           className={cx(
-            "min-w-[160px] whitespace-nowrap rounded-2xl px-4 py-2.5 text-label1 font-black transition-all duration-300",
+            "min-w-[160px] whitespace-nowrap rounded-2xl bg-[#EEEEEE] px-4 py-2.5 text-label1 font-black transition-all duration-300",
             activeTab === tab
               ? "bg-bg-fill-brand text-white shadow-md"
               : "text-text-info hover:bg-[#E5E5E7]"

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

@@ -20,6 +20,8 @@ export const Carousel: React.FC<CarouselProps> = ({
   activeTab,
   setActiveTab,
   tabs,
+  onModalButtonClick,
+  renderCheckPlans,
   showSwitch = false,
 }) => {
   return (
@@ -55,9 +57,13 @@ export const Carousel: React.FC<CarouselProps> = ({
           />
         )}
         {hasProductCards && (
-          <ProductCardCarousel fields={fields as CarouselWithProductCards} />
+          <ProductCardCarousel
+            onModalButtonClick={onModalButtonClick}
+            renderCheckPlans={renderCheckPlans}
+            fields={fields as CarouselWithProductCards}
+          />
         )}
-        <Text as="div" className="body1 mt-8 px-4 text-center">
+        <Text as="div" className="body1 mt-8 px-4 text-center text-neutral-600">
           {disclaimerText}
         </Text>
       </div>

package/src/contentful/blocks/carousel/types.ts

@@ -1,4 +1,6 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
+
+import { CheckPlansProps } from "@shared/types/micro-components";
 
 export interface carouselFieldsInterface {
   __typename: "ComponentCarousel";
@@ -127,6 +129,8 @@ export type CarouselProps = {
   setActiveTab: (tab: string) => void;
   tabs: string[];
   showSwitch?: boolean;
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
 };
 
 export interface TabSwitchProps {

package/src/contentful/blocks/cta-callout/index.tsx

@@ -15,6 +15,8 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
   enableHeading,
   subTitle,
   maxWidth = true,
+  onModalButtonClick,
+  renderCheckPlans,
 }) => {
   const bgColorClasses: Record<ThemeKey, string> = {
     blue: "bg-[#07B2E2]",
@@ -45,7 +47,11 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
           {description}
         </div>
         <div className="flex justify-center pt-5 lg:pt-14">
-          <Button {...button} />
+          <Button
+            {...button}
+            renderCheckPlans={renderCheckPlans}
+            onModalButtonClick={onModalButtonClick}
+          />
         </div>
       </div>
     </div>

package/src/contentful/blocks/cta-callout/types.ts

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { CheckPlansProps } from "@shared/types/micro-components";
+
 export type CtaCalloutProps = {
   title?: string;
   subTitle?: string;
@@ -11,6 +13,8 @@ export type CtaCalloutProps = {
   contentAlignment?: "center" | "left" | "right";
   button?: any;
   maxWidth?: boolean;
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
 };
 
 export type ThemeKey =

package/src/contentful/blocks/find-kinetic/index.tsx

@@ -75,7 +75,7 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                     }
                     return rearranged.map((item, index: number) => (
                       <li key={`item-list-2-${index}`}>
-                        <Link href={`/${item.code}`} className="label1">
+                        <Link href={`/local/${item.code.toLowerCase()}`} className="label1">
                           {item.name}
                         </Link>
                       </li>
@@ -100,7 +100,7 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                     }
                     return rearranged.map((item, index: number) => (
                       <li key={`item-list-3-${index}`}>
-                        <Link href={`/${item.code}`} className="label1">
+                        <Link href={`/local/${item.code.toLowerCase()}`} className="label1">
                           {item.name}
                         </Link>
                       </li>

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -32,6 +32,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   imageWidth = 660,
   imageHeight = 660,
   onModalButtonClick,
+  renderCheckPlans,
 }) => {
   const [activeVideo, setActiveVideo] = useState("");
   const [isHovered, setIsHovered] = useState(false);
@@ -130,6 +131,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                   <Button
                     {...cta}
                     fullWidth={true}
+                    renderCheckPlans={renderCheckPlans}
                     onModalButtonClick={onModalButtonClick}
                   />
                 </div>
@@ -139,6 +141,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                   <Button
                     {...secondaryCta}
                     fullWidth={true}
+                    renderCheckPlans={renderCheckPlans}
                     onModalButtonClick={onModalButtonClick}
                   />
                 </div>

package/src/types/micro-components.ts

@@ -1,3 +1,5 @@
+import { ButtonProps } from "@shared/contentful";
+
 export interface Asset {
   url?: string | null;
   title?: string | null;
@@ -86,4 +88,12 @@ export type CheckPlansProps = {
   ctaText?: string;
   buttonVariant?: "primary_brand" | "secondary" | "primary_inverse";
   showButtonAs?: "solid" | "unstyled" | "text" | undefined;
+  cta?: ButtonProps;
+  speedCardConfig?: {
+    isModalOpen?: boolean;
+    setModalOpen?: () => void;
+    speed?: string;
+    techType?: string;
+    isMax?: boolean;
+  };
 };

package/tailwind.config.cjs

@@ -547,15 +547,19 @@ module.exports = {
       const buttonComponents = {
         ".btn-small": {
           height: theme("height.12"),
+          ...typographyComponents[".label3"],
         },
         ".btn-medium": {
           height: theme("height.14"),
+          ...typographyComponents[".label1"],
         },
         ".btn-large": {
           height: theme("height.16"),
+          ...typographyComponents[".label1"]
         },
         ".btn-x-large": {
           height: theme("height.22"),
+          ...typographyComponents[".heading5"]
         },
       };