@windstream/react-shared-components 0.1.28 → 0.1.30

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

@@ -3,7 +3,7 @@ import { BlogCardProps } from "./types";
 import Image from "next/image";
 import Link from "next/link";
 
-import { Button } from "@shared/components/button";
+// import { Button } from "@shared/components/button";
 import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 
@@ -16,11 +16,14 @@ export const BlogCard: React.FC<BlogCardProps> = ({
   image,
   readMoreText = "Read more",
   asGrid = true,
+  lgWidth,
+  mdWidth,
   index,
 }: BlogCardProps) => {
+  const basehwClass = "lg:w-[calc(33.3333%-1rem)] md:w-[calc(50%-1rem)]";
   const parentClassName = asGrid
-    ? "flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-[0_1px_4px_rgba(0,0,0,0.08),0_4px_16px_rgba(0,0,0,0.06)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.12),0_8px_24px_rgba(0,0,0,0.10)]"
-    : "callout-card lg:w-[calc(33.3333%-1rem)] md:w-[calc(50%-1rem)] w-full overflow-hidden rounded-xl bg-white shadow-[0_1px_4px_rgba(0,0,0,0.08),0_4px_16px_rgba(0,0,0,0.06)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.12),0_8px_24px_rgba(0,0,0,0.10)]";
+    ? "flex h-full flex-col overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop"
+    : `callout-card ${basehwClass} ${lgWidth} ${mdWidth} w-full overflow-hidden rounded-card-lg bg-white shadow-drop transition-all duration-200 hover:-translate-y-0.5 hover:shadow-cardDrop`;
 
   return (
     <article
@@ -30,7 +33,7 @@ export const BlogCard: React.FC<BlogCardProps> = ({
     >
       {/* Image */}
       <Link href={href} tabIndex={-1} aria-hidden="true" className="block">
-        <div className="aspect-video w-full flex-shrink-0 overflow-hidden bg-gray-100">
+        <div className="h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
           {image ? (
             <Image
               src={image.src}
@@ -50,18 +53,16 @@ export const BlogCard: React.FC<BlogCardProps> = ({
       </Link>
 
       {/* Body */}
-      <div className="flex flex-1 flex-col gap-5 p-5 pb-6">
+      <div className="flex flex-1 flex-col gap-5 p-6 md:p-8">
         {/* Meta: category + date */}
         <div className="flex items-center gap-2 text-[13px]">
-          <span className="text-body2 font-semibold text-text-brand">
-            {category}
-          </span>
+          <span className="body2 text-text-brand">{category}</span>
           {date && (
             <>
-              <span className="text-xs text-text" aria-hidden="true">
+              <span className="footnote text-text" aria-hidden="true">
                 •
               </span>
-              <time className="text-body2 text-text">{date}</time>
+              <time className="body2 text-text">{date}</time>
             </>
           )}
         </div>
@@ -70,7 +71,7 @@ export const BlogCard: React.FC<BlogCardProps> = ({
         {title && (
           <Link
             href={href}
-            className="m-0 line-clamp-3 text-heading6 font-black transition-colors duration-150 hover:text-text-brand"
+            className="heading6 m-0 line-clamp-3 font-black transition-colors duration-150 hover:text-text-brand"
           >
             {title}
           </Link>
@@ -78,7 +79,7 @@ export const BlogCard: React.FC<BlogCardProps> = ({
 
         {/* Excerpt */}
         {description && (
-          <Text className="m-0 line-clamp-3 flex-1 text-body1">
+          <Text className="body1 m-0 line-clamp-3 flex-1 text-text">
             {description}
           </Text>
         )}
@@ -86,21 +87,21 @@ export const BlogCard: React.FC<BlogCardProps> = ({
         {/* Read more */}
         <Link
           href={href}
-          className="group mt-auto inline-flex justify-between pt-3 text-sm text-text-brand no-underline transition-all duration-200 hover:gap-2.5 hover:text-[#007ab8]"
+          className="group mt-auto inline-flex items-center justify-start gap-2 pt-3 text-sm text-text-brand no-underline"
           aria-label={`${readMoreText} about ${title || "this article"}`}
         >
-          <Button
+          <Text
             aria-label={`${readMoreText} about ${title || "this article"}`}
-            className="flex w-36 justify-around text-nowrap text-label1 font-black"
+            className="label1 text-nowrap"
           >
             {readMoreText}
-            <MaterialIcon
-              name="expand_circle_right"
-              fill={0}
-              size={24}
-              weight="600"
-            />
-          </Button>
+          </Text>
+          <MaterialIcon
+            name="expand_circle_right"
+            fill={1}
+            size={24}
+            weight="200"
+          />
         </Link>
       </div>
     </article>

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

@@ -12,5 +12,7 @@ export interface BlogCardProps {
   };
   readMoreText?: string;
   asGrid?: boolean;
+  lgWidth?: string;
+  mdWidth?: string;
   index?: number;
 }

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

@@ -51,12 +51,12 @@ export const ProductCard: React.FC<ProductCardProps> = ({
     <article
       className={cx(
         "relative flex h-full w-full max-w-[392px] flex-col",
-        !bestValue && "pt-[28px]"
+        !bestValue && "md:pt-[38px]"
       )}
     >
       {/* 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">
+        <div className="label3 rounded-t-[20px] bg-bg-fill-brand-accent px-6 py-2 text-center text-text">
           {bestValueText}
         </div>
       )}
@@ -64,72 +64,103 @@ export const ProductCard: React.FC<ProductCardProps> = ({
       {/* 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" : ""
+          "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 pt-7">
+        <header className="overflow-none flex items-start justify-between gap-4">
           <div className="flex flex-col">
             <Text
               as="h3"
               className={cx(
-                "subheading2 whitespace-nowrap font-black",
-                isDark ? "text-bg-fill-brand-accent" : "text-text-brand"
+                "subheading2",
+                isDark ? "text-text-accent-on-bg-inverse" : "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`}
+              className={`label3 text-wrap ${isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"}`}
             >
               {planSubtext}
             </Text>
           </div>
           <div className="flex items-start">
-            <span className="text-xl font-normal">$</span>
-            <span className="text-subheading6 font-medium leading-none">
+            <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]}
-            </span>
-            <span className="text-sm font-black">{price.split(".")[1]}/mo</span>
+            </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("text-base", isDark ? "text-white" : "text-text")}
+            className={cx("body2", isDark ? "text-text-inverse" : "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) => {
+        {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 p-1">
+                <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="text-sm font-bold">
+                  <Text
+                    as="div"
+                    className={cx(
+                      "body3",
+                      isDark ? "text-text-inverse" : "text-text"
+                    )}
+                  >
                     {badge.title}
                   </Text>
                 </div>
               );
             })}
-        </div>
+          </div>
+        ) : null}
 
         {/* CTA */}
         <SelectPlanButton
@@ -138,40 +169,53 @@ export const ProductCard: React.FC<ProductCardProps> = ({
           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-6">
+          <section className="flex flex-col gap-3">
             <Button
               onClick={handleToggle}
-              className="group flex w-full items-center justify-between text-left"
+              className="group flex w-full items-center gap-2 text-left"
             >
-              <Text as="h4" className="text-base font-bold">
+              <Text
+                as="h4"
+                className={cx(
+                  "label3",
+                  isDark ? "text-text-inverse" : "text-text"
+                )}
+              >
                 {featuresTitle}
               </Text>
               <MaterialIcon
-                name="keyboard_arrow_up"
+                name="keyboard_arrow_down"
                 fill={1}
                 size={24}
                 className={cx(
                   "transition-transform duration-300",
-                  isExpanded && "rotate-180"
+                  isExpanded && "rotate-180",
+                  isDark ? "text-text-inverse" : "text-text"
                 )}
               />
             </Button>
             <div
               className={cx(
-                "overflow-hidden transition-all duration-300 ease-in-out",
-                isExpanded ? "pb-7 opacity-100" : "max-h-0 opacity-0"
+                "overflow-hidden transition-all duration-200 ease-in-out",
+                isExpanded ? "opacity-100" : "max-h-0 opacity-0"
               )}
             >
-              <div className="flex flex-col gap-3">
+              <div className="flex flex-col">
                 <Checklist
                   items={features}
+                  iconSize={24}
+                  iconPosition="top"
+                  iconClassName="mt-0"
                   iconColor={isDark ? "yellow" : "green"}
-                  listItemClassName={`${isDark ? "text-white" : "text-text"}`}
+                  listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
+                  listItemClassName={`${isDark ? "text-text-inverse" : "text-text"}`}
                 />
               </div>
               {innerBadge?.badgeIcon ? (
@@ -182,7 +226,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                     width={12}
                     height={12}
                   />
-                  <span className="text-sm">
+                  <span className="footnote text-text">
                     {innerBadge.badgeText.includes("|") ? (
                       <>
                         <span className="font-bold">

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

@@ -54,18 +54,18 @@ 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-8 p-8 text-center ${imageAlignClass}`}
+        className={`card-template flex h-full flex-col gap-6 p-6 text-center md:gap-8 md:p-8 ${imageAlignClass}`}
       >
         <div className="card-header">{imageRenderer(card)}</div>
 
-        <div className="card-body flex flex-col gap-3 text-start">
+        <div className="card-body flex flex-col gap-3 text-start md:gap-4">
           {card.title && (
-            <Text as="h5" className="heading6 font-black md:heading5">
+            <Text as="h5" className="heading5 text-text">
               {card.title}
             </Text>
           )}
           {card.body && (
-            <Text as="div" className="body1">
+            <Text as="div" className="body1 text-text">
               {card.body}
             </Text>
           )}
@@ -77,6 +77,7 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
               linkClassName="label1 flex items-center text-text gap-2"
               {...card.cta}
               iconName={"expand_circle_right"}
+              iconFill={1}
             />
           </div>
         )}

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

@@ -19,43 +19,45 @@ export const TestimonialCard: React.FC<TestimonialCardProps> = ({
   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-40", // Active vs Inactive styles
+        "flex w-full flex-col gap-6 rounded-card-lg p-6 transition-all duration-300 md:gap-10 md:p-14",
+        isActive
+          ? "bg-bg-surface-secondary shadow-drop"
+          : "bg-gray-50 opacity-40", // 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>
+      <div className="flex flex-col justify-start gap-3 md:gap-5">
+        <header>
+          <Text as="h3" className="label1 text-text">
+            {title}
+          </Text>
+        </header>
+        <blockquote className="body1 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}
+        {/* Rating Stars */}
+        {rating ? (
+          <div className="flex" aria-label={`Rating: ${rating} out of 5`}>
+            {[...Array(5)].map((_, i) => (
+              <MaterialIcon
+                key={i}
+                size={24}
+                name="star"
+                fill={1}
+                className={clsx(
+                  "h-[21px] w-[21px]",
+                  i < rating ? "text-text" : "text-gray-300"
+                )}
+                aria-hidden="true"
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
 
       {/* 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">
+        <figcaption className="flex gap-3 md:gap-5">
+          <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-full bg-gray-300">
             {avatarUrl ? (
               <Image
                 src={avatarUrl}
@@ -72,10 +74,10 @@ export const TestimonialCard: React.FC<TestimonialCardProps> = ({
           </div>
 
           <div className="flex flex-col">
-            <cite className="text-sm font-bold not-italic text-text">
+            <cite className="label3 font-bold not-italic text-text">
               {author}
             </cite>
-            <Text as="p" className="text-xs text-text">
+            <Text as="p" className="body3 text-text">
               {role}
             </Text>
           </div>

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

@@ -129,7 +129,7 @@ export function ProductCardCarousel({
         className={cx(
           isMobileView
             ? "mx-auto w-full max-w-[392px]"
-            : "w-[392px] flex-shrink-0"
+            : "flex-shrink-1 w-[392px]"
         )}
       >
         <ProductCard
@@ -164,7 +164,7 @@ export function ProductCardCarousel({
   const offset = items.length * 2;
 
   return !isCarousel ? (
-    <div className="flex w-full max-w-[1280px] flex-wrap justify-center gap-8 px-4">
+    <div className="flex w-full max-w-[1280px] flex-wrap justify-center gap-4">
       {items.map((item, index) => renderCard(item, index))}
     </div>
   ) : (

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

@@ -23,10 +23,13 @@ export const Carousel: React.FC<CarouselProps> = ({
   testimonialAutoScroll = true,
   showSwitch = false,
 }) => {
+  const baseClass = hasProductCards
+    ? "px-3 py-9 md:py-20"
+    : hasTestimonialCards
+      ? "px-3 py-12 md:pt-20 md:pb-16"
+      : "";
   return (
-    <div
-      className={`${backgroundColor} mx-auto overflow-hidden px-5 py-12 md:pb-16 md:pt-20`}
-    >
+    <div className={`${backgroundColor} ${baseClass} mx-auto overflow-hidden`}>
       <div className="relative mx-auto flex max-w-[1280px] flex-col gap-8 overflow-visible md:gap-12">
         <div>
           <Text
@@ -41,13 +44,23 @@ export const Carousel: React.FC<CarouselProps> = ({
             </Text>
           )}
         </div>
-
-        {showSwitch && hasProductCards && tabs.length > 1 && (
-          <TabSwitch
-            tabs={tabs}
-            activeTab={activeTab}
-            onChange={setActiveTab}
-          />
+        {showSwitch && hasProductCards && (
+          <div className="flex flex-col gap-8">
+            {showSwitch && hasProductCards && tabs.length > 1 && (
+              <TabSwitch
+                tabs={tabs}
+                activeTab={activeTab}
+                onChange={setActiveTab}
+              />
+            )}
+            {hasProductCards && (
+              <ProductCardCarousel
+                onModalButtonClick={onModalButtonClick}
+                renderCheckPlans={renderCheckPlans}
+                fields={fields as CarouselWithProductCards}
+              />
+            )}
+          </div>
         )}
         {hasTestimonialCards && (
           <TestimonialCarousel
@@ -56,22 +69,15 @@ export const Carousel: React.FC<CarouselProps> = ({
             autoScrollInterval={8000}
           />
         )}
-        {hasProductCards && (
-          <ProductCardCarousel
-            onModalButtonClick={onModalButtonClick}
-            renderCheckPlans={renderCheckPlans}
-            fields={fields as CarouselWithProductCards}
-          />
-        )}
-        {disclaimerText && (
-          <Text
-            as="div"
-            className="body1 mt-8 px-4 text-center text-neutral-600"
-          >
-            {disclaimerText}
-          </Text>
-        )}
       </div>
+      {disclaimerText && (
+        <Text
+          as="div"
+          className="footnote mt-8 px-4 text-center text-text-secondary"
+        >
+          {disclaimerText}
+        </Text>
+      )}
     </div>
   );
 };

package/src/contentful/blocks/floating-banner/index.tsx

@@ -74,7 +74,11 @@ export const FloatingBanner: React.FC<FloatingBannerProps> = ({
           </div>
           {cta && (
             <div className="mt-5 flex flex-shrink-0 justify-center lg:mt-0 lg:items-center">
-              <Button {...cta} buttonVariant="secondary" size={{ base: "medium", md: "large" }}></Button>
+              <Button
+                {...cta}
+                buttonVariant="secondary"
+                size={{ base: "medium", md: "large" }}
+              ></Button>
             </div>
           )}
         </div>

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

@@ -16,8 +16,8 @@ import { Button } from "@shared/contentful/blocks/button";
 import { cx } from "@shared/utils";
 
 type ExtendedModalProps = ModalProps & {
-  type?: "modal";
-  index?: 0;
+  type?: string;
+  index?: number;
 };
 export const Modal: React.FC<ExtendedModalProps> = props => {
   const {
@@ -29,8 +29,8 @@ export const Modal: React.FC<ExtendedModalProps> = props => {
     description,
     children,
     bodyClassName,
-    type,
-    index,
+    type = "modal",
+    index = 0,
   } = props;
 
   return (

package/src/contentful/index.ts

@@ -73,3 +73,6 @@ export type { AddressInputBannerProps } from "./blocks/address-input-banner/type
 
 export { DynamicTabs } from "./blocks/dynamic-tabs";
 export type { DynamicTabsT } from "./blocks/dynamic-tabs/types";
+
+export { AnchoredBottomBanner } from "./blocks/anchored-bottom-banner";
+export type { AnchoredBottomBannerProps } from "./blocks/anchored-bottom-banner/types";