@windstream/react-shared-components 0.2.49 → 0.2.50

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

@@ -97,7 +97,7 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
       >
         <NextImage
           src={card.image}
-          alt={card.imageAlt ?? card.title ?? "card-image"}
+          alt={card.imageAltText ?? card.imageDescription ?? card.imageAlt ?? card.title ?? "card-image"}
           width={card.imageWidth || 400}
           height={card.imageHeight || 280}
           className={cx("w-full", !margin && "rounded-t-3xl")}
@@ -124,7 +124,7 @@ export const SimpleCard: React.FC<SimpleCardProps> = ({
       >
         <NextImage
           src={card.image}
-          alt={card.imageAlt ?? card.title ?? "card-icon"}
+          alt={card.imageAltText ?? card.imageDescription ?? card.imageAlt ?? card.title ?? "card-icon"}
           width={imgWidth}
           height={imgHeight}
           className={cx(

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

@@ -17,6 +17,10 @@ export type Item = {
   title?: string;
   image?: string;
   imageAlt?: string;
+  /** Explicit image alt text; takes priority over the description fallback. */
+  imageAltText?: string;
+  /** Contentful asset description — used as the alt-text fallback. */
+  imageDescription?: string;
   imageWidth?: number;
   imageHeight?: number;
   imageAlignment?: "left" | "right" | "center";

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

@@ -10,6 +10,7 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
   description,
   enableHeading,
   image,
+  imageAltText,
   list = [],
   localPathPrefix = "/local",
   subTitle,
@@ -48,12 +49,12 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
       className={`${bgColorClasses[background]} component-container overflow-hidden ${color == "dark" ? "text-text" : "text-white"}`}
     >
       <div
-        className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-5 ${image ? "mt-12" : "mt-0 xl:mt-0"} xl:my-20 md:px-5 xl:px-10`}
+        className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-5 ${image ? "mt-12" : "mt-0 xl:mt-0"} md:px-5 xl:my-20 xl:px-10`}
       >
         {title && (
           <Text
             as={enableHeading ? "h1" : "h2"}
-            className="heading2 md:heading1 text-center"
+            className="heading2 text-center md:heading1"
           >
             {title}
           </Text>
@@ -71,10 +72,13 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
           className={`mt-8 flex flex-col items-center xl:flex-row ${image ? "xl:mt-16" : "xl:mt-10"} gap-10`}
         >
           <div
-            className={`flex flex-col gap-10 self-stretch xl:flex-[1_0_0] ${image ? "xl:items-start pl-2 md:px-4 lg:pl-12 xl:pl-16" : "items-center"}`}
+            className={`flex flex-col gap-10 self-stretch xl:flex-[1_0_0] ${image ? "pl-2 md:px-4 lg:pl-12 xl:items-start xl:pl-16" : "items-center"}`}
           >
             {description && (
-              <Text as="p" className={`body1 text-center${image ? " lg:text-left" : ""}`}>
+              <Text
+                as="p"
+                className={`body1 text-center${image ? "lg:text-left" : ""}`}
+              >
                 {description}
               </Text>
             )}
@@ -122,7 +126,9 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                     for (let row = 0; row < numRows; row++) {
                       for (let col = 0; col < numColumns; col++) {
                         const index = col * numRows + row;
-                        rearranged.push(index < sortedList.length ? sortedList[index] : null); // ← holds position
+                        rearranged.push(
+                          index < sortedList.length ? sortedList[index] : null
+                        ); // ← holds position
                       }
                     }
                     return rearranged.map((item, index: number) =>
@@ -156,7 +162,9 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                       for (let row = 0; row < numRows; row++) {
                         for (let col = 0; col < numColumns; col++) {
                           const index = col * numRows + row;
-                          rearranged.push(index < sortedList.length ? sortedList[index] : null);
+                          rearranged.push(
+                            index < sortedList.length ? sortedList[index] : null
+                          );
                         }
                       }
                       return rearranged.map((item, index: number) =>
@@ -184,7 +192,12 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
           </div>
           {image && (
             <aside className="hidden md:block">
-              <NextImage width={472} height={100} src={image} alt="image" />
+              <NextImage
+                width={472}
+                height={100}
+                src={image}
+                alt={imageAltText ?? "image"}
+              />
             </aside>
           )}
         </div>

package/src/contentful/blocks/find-kinetic/types.ts

@@ -6,6 +6,7 @@ export type FindKineticProps = {
   localPathPrefix?: string;
   background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
   image?: string;
+  imageAltText?: string;
   list?: { name: string; code: string }[];
   maxWidth?: boolean;
   color?: "dark" | "light";

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

@@ -19,6 +19,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   disclaimer,
   description,
   image,
+  imageAltText,
   imageLinks,
   mediaPosition = true,
   checklist,
@@ -174,7 +175,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               >
                 <NextImage
                   src={image}
-                  alt="section-image"
+                  alt={imageAltText ?? "section-image"}
                   priority={isAboveTheFold}
                   fill={!useOriginalImageAspectRatio}
                   width={

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -9,6 +9,7 @@ export type ImagePromoBarProps = {
   title: string;
   subTitle: string;
   image: string;
+  imageAltText?: string;
   imageWidth: number;
   imageHeight: number;
   useOriginalImageAspectRatio?: boolean;

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

@@ -75,7 +75,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
       />
     ) : null;
   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">
+    <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-4">
       {hasDesktopVideo ? (
         <video
           autoPlay={true}
@@ -98,7 +98,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         {/* Left column: navy background, headline, body, address, button, link */}
         <div
           className={cx(
-            `relative flex flex-col ${textColorClass} w-full xl:w-[485px]`
+            `relative flex flex-col ${textColorClass} w-full xl:w-[486px]`
           )}
         >
           <div className="flex flex-col gap-5 lg:gap-6">
@@ -361,17 +361,17 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         <div
           className={cx(
             "relative hidden xl:block",
-            hasDesktopVideo && "h-[600px] w-[600px]"
+            hasDesktopVideo && "h-[584px] w-[584px]"
           )}
         >
-          <Badge className="absolute -left-10 top-18 z-10 aspect-square w-52 object-cover object-center" />
+          <Badge className="absolute -left-[114px] top-[62px] z-10 aspect-square w-[200px] object-cover object-center" />
           {!hasDesktopVideo && heroImageUrl ? (
             <NextImage
               src={heroImageUrl}
               alt={"Hero"}
               className="aspect-square rounded-[40px] object-cover object-center"
-              width={600}
-              height={600}
+              width={584}
+              height={584}
               quality={90}
               loading="eager"
             />

package/src/hooks/contentful/use-contentful-rich-text.test.tsx

@@ -243,14 +243,14 @@ describe("renderContentfulRichText", () => {
       const a = container.querySelector("a")!;
       expect(a).toHaveAttribute("href", "https://example.com");
       expect(a).toHaveAttribute("target", "_blank");
-      expect(a).toHaveAttribute("rel", "noopener noreferrer");
+      expect(a).toHaveAttribute("rel", "noopener");
     });
 
-    it("renders internal link with target=_self for relative URLs", () => {
+    it("renders internal link without target for relative URLs", () => {
       const doc = makeDoc(makeHyperlink("/about", "About"));
       const { container } = render(<>{renderContentfulRichText(doc)}</>);
       const a = container.querySelector("a")!;
-      expect(a).toHaveAttribute("target", "_self");
+      expect(a).not.toHaveAttribute("target");
       expect(a).not.toHaveAttribute("rel");
     });
 
@@ -265,7 +265,7 @@ describe("renderContentfulRichText", () => {
       const doc = makeDoc(makeHyperlink("https://example.com", "External"));
       const { container } = render(<>{renderContentfulRichText(doc, false)}</>);
       const a = container.querySelector("a")!;
-      expect(a).toHaveAttribute("target", "_self");
+      expect(a).not.toHaveAttribute("target");
     });
 
     it("applies custom linkClassName", () => {
@@ -536,13 +536,13 @@ describe("renderContentfulRichText", () => {
       expect(a).toHaveAttribute("target", "_blank");
     });
 
-    it("renders internal link with _self when target is undefined", () => {
+    it("renders internal link without target when target is undefined", () => {
       const doc = makeDoc(makeHyperlink("/page", "Page"));
       const { container } = render(
         <>{renderContentfulRichText(doc, undefined)}</>
       );
       const a = container.querySelector("a")!;
-      expect(a).toHaveAttribute("target", "_self");
+      expect(a).not.toHaveAttribute("target");
     });
 
     it("handles hyperlink with missing uri data", () => {