@windstream/react-shared-components 0.2.37 → 0.2.39

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

@@ -2,8 +2,6 @@ import React from "react";
 import { BlogCardProps } from "./types";
 import * as _NextLink from "next/link";
 
-// import { Button } from "@shared/components/button";
-import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 
 // CJS/ESM interop: next/link uses standard __esModule exports so this is safe.
@@ -21,13 +19,12 @@ export const BlogCard: React.FC<BlogCardProps> = ({
   category,
   image,
   imageComponent: ImageComponent,
-  readMoreText = "Read more",
   asGrid = true,
   index,
 }: BlogCardProps) => {
   const parentClassName = asGrid
-    ? "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 w-full flex h-full flex-col overflow-hidden`;
+    ? "group relative 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 group relative w-full flex h-full flex-col overflow-hidden`;
 
   return (
     <article
@@ -38,42 +35,40 @@ export const BlogCard: React.FC<BlogCardProps> = ({
     >
       {/* Image (hidden in list view) */}
       {asGrid && (
-        <Link href={href} tabIndex={-1} aria-hidden="true" className="block">
-          <div className="h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
-            {image ? (
-              ImageComponent ? (
-                <ImageComponent
-                  src={image.src}
-                  alt={image.alt}
-                  width={image.width}
-                  height={image.height}
-                  className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
-                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-                />
-              ) : (
-                <img
-                  src={image.src}
-                  alt={image.alt}
-                  width={image.width}
-                  height={image.height}
-                  loading="lazy"
-                  decoding="async"
-                  className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
-                />
-              )
+        <div className="block h-[232px] w-full flex-shrink-0 overflow-hidden bg-gray-100">
+          {image ? (
+            ImageComponent ? (
+              <ImageComponent
+                src={image.src}
+                alt={image.alt}
+                width={image.width}
+                height={image.height}
+                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+                sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
+              />
             ) : (
-              <div
-                className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
-                aria-hidden="true"
+              <img
+                src={image.src}
+                alt={image.alt}
+                width={image.width}
+                height={image.height}
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
               />
-            )}
-          </div>
-        </Link>
+            )
+          ) : (
+            <div
+              className="h-full w-full bg-gradient-to-br from-gray-200 to-gray-100"
+              aria-hidden="true"
+            />
+          )}
+        </div>
       )}
 
       {/* Body */}
       <div
-        className={`flex flex-1 flex-col  ${
+        className={`flex flex-1 flex-col ${
           asGrid ? "gap-5 p-6 md:p-8" : "gap-1 border-b p-3 md:p-4"
         }`}
       >
@@ -94,12 +89,14 @@ export const BlogCard: React.FC<BlogCardProps> = ({
 
         {/* Title */}
         {title && (
-          <Link
-            href={href}
-            className="heading6 m-0 line-clamp-3 font-black transition-colors duration-150 hover:text-text-brand"
-          >
-            {title}
-          </Link>
+          <Text as="h2" className="heading6">
+            <Link
+              href={href}
+              className="m-0 line-clamp-3 font-black transition-colors duration-150 after:absolute after:inset-0 after:z-10 after:content-[''] hover:text-text-brand group-hover:text-text-brand"
+            >
+              {title}
+            </Link>
+          </Text>
         )}
 
         {/* Excerpt */}
@@ -108,29 +105,16 @@ export const BlogCard: React.FC<BlogCardProps> = ({
             {description}
           </Text>
         )}
-
-        {/* Read more (hidden in list view) */}
-        {asGrid && (
-          <Link
-            href={href}
-            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"}`}
-          >
-            <Text
-              aria-label={`${readMoreText} about ${title || "this article"}`}
-              className="label1 text-nowrap"
-            >
-              {readMoreText}
-            </Text>
-            <MaterialIcon
-              name="expand_circle_right"
-              fill={1}
-              size={24}
-              weight="200"
-            />
-          </Link>
-        )}
       </div>
+
+      {/* Fallback stretched link keeps the card navigable when no title link is rendered */}
+      {!title && (
+        <Link
+          href={href}
+          aria-label={category ?? "Read more"}
+          className="absolute inset-0 z-10"
+        />
+      )}
     </article>
   );
 };

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

@@ -26,7 +26,6 @@ export interface BlogCardProps {
   };
   /** Pass next/image's Image component here to enable image optimization */
   imageComponent?: React.ComponentType<BlogCardImageProps>;
-  readMoreText?: string;
   asGrid?: boolean;
   index?: number;
 }

package/src/contentful/blocks/primary-hero/index.tsx

@@ -53,7 +53,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
   const hasDesktopVideo = !!desktopVideoUrl;
   const hasMobileVideo = !!mobileVideoUrl;
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
-  const textColorClass = textColor === "light" ? " text-white" : " text-text";
+  const baseTextColorClass = textColor === "dark" ? "text-text" : "text-white";
+  const textColorClass =
+    hasDesktopVideo && textColor === "dark"
+      ? `${baseTextColorClass} xl:text-white`
+      : baseTextColorClass;
   return (
     <div className="component-container relative overflow-hidden p-4 sm:px-6 sm:py-12 xl:flex xl:min-h-[724px] xl:items-center xl:px-10">
       {hasDesktopVideo ? (
@@ -91,7 +95,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               </Text>
             )}
             {subTitle && (
-              <Text as="p" className="subheading3 lg:subheading1">
+              <Text as="p" className="subheading3">
                 {subTitle}
               </Text>
             )}
@@ -127,7 +131,10 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {pricingDescription ? (
               <Text
                 data-cy="hero-pricing-description"
-                className={cx("subheading1", "text-left sm:text-center xl:text-left")}
+                className={cx(
+                  "subheading1",
+                  "text-left sm:text-center xl:text-left"
+                )}
               >
                 {pricingDescription}
               </Text>
@@ -206,7 +213,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                         renderCheckPlans={renderCheckPlans}
                         onModalButtonClick={onModalButtonClick}
                         fullWidth={true}
-                        buttonClassName="md:w-auto text-center"
+                        buttonClassName="lg:w-auto text-center"
                       />
                     </div>
                   )}
@@ -219,14 +226,14 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                         renderCheckPlans={renderCheckPlans}
                         onModalButtonClick={onModalButtonClick}
                         fullWidth={true}
-                        buttonClassName="md:w-auto text-center"
+                        buttonClassName="lg:w-auto text-center"
                       />
                     </div>
                   )}
                 </>
               )}
               {secondaryCtaPrefix || secondaryCta ? (
-                <div className="hidden md:flex">
+                <div className="hidden lg:flex">
                   {secondaryCtaPrefix && (
                     <Text as="span" className="body2 mr-1">
                       {secondaryCtaPrefix}
@@ -244,7 +251,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
 
               {/* desktop bottom link */}
               {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
-                <div className="hidden md:block">
+                <div className="hidden lg:block">
                   <Button
                     {...bottomLink}
                     linkClassName={`text-footnote ${textColorClass}`}
@@ -303,7 +310,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
 
           {secondaryCtaPrefix || secondaryCta ? (
             <div
-              className={`flex flex-wrap items-center ${textColorClass} md:hidden`}
+              className={`flex flex-wrap items-center ${textColorClass} lg:hidden`}
             >
               {secondaryCtaPrefix && (
                 <Text as="span" className="body2 mr-1">
@@ -321,7 +328,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
           ) : null}
 
           {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
-            <div className="md:hidden">
+            <div className="lg:hidden">
               <Button
                 {...bottomLink}
                 onModalButtonClick={onModalButtonClick}