@windstream/react-shared-components 0.2.49 → 0.2.51

package/src/components/video-link/youtube-embed.test.tsx

@@ -1,78 +1,114 @@
 import React from "react";
-import { YoutubeEmbed } from "./youtube-embed";
+import { getYoutubeEmbedId, YoutubeEmbed } from "./youtube-embed";
 
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 
 jest.mock("@shared/utils", () => ({
   cx: (...args: any[]) => args.filter(Boolean).join(" "),
 }));
 
-describe("YoutubeEmbed", () => {
-  it("renders iframe with extracted video id from watch URL", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
-    const iframe = screen.getByTitle("Embedded youtube");
-    expect(iframe.getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/dQw4w9WgXcQ"
-    );
+const mockPlayVideo = jest.fn();
+let capturedEvents: any;
+let capturedVideoId: string | undefined;
+let capturedPlayerVars: any;
+
+jest.mock("./youtube-iframe-api-loader", () => ({
+  loadYoutubeIframeApi: () =>
+    Promise.resolve({
+      PlayerState: { PLAYING: 1, PAUSED: 2, ENDED: 0 },
+      Player: jest.fn().mockImplementation((_el, options) => {
+        capturedEvents = options.events;
+        capturedVideoId = options.videoId;
+        capturedPlayerVars = options.playerVars;
+        return { playVideo: mockPlayVideo, destroy: jest.fn() };
+      }),
+    }),
+}));
+
+describe("getYoutubeEmbedId", () => {
+  it("extracts id from watch URL", () => {
+    expect(
+      getYoutubeEmbedId("https://www.youtube.com/watch?v=dQw4w9WgXcQ")
+    ).toBe("dQw4w9WgXcQ");
   });
 
   it("extracts id from youtu.be short URL", () => {
-    render(<YoutubeEmbed link="https://youtu.be/dQw4w9WgXcQ" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
-      "/embed/dQw4w9WgXcQ"
+    expect(getYoutubeEmbedId("https://youtu.be/dQw4w9WgXcQ")).toBe(
+      "dQw4w9WgXcQ"
     );
   });
 
   it("extracts id from embed URL", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/embed/dQw4w9WgXcQ" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
-      "/embed/dQw4w9WgXcQ"
+    expect(getYoutubeEmbedId("https://www.youtube.com/embed/dQw4w9WgXcQ")).toBe(
+      "dQw4w9WgXcQ"
     );
   });
 
-  it("returns empty embedId for invalid URL", () => {
-    render(<YoutubeEmbed link="https://example.com/notavideo" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
+  it("returns empty string for invalid URL", () => {
+    expect(getYoutubeEmbedId("https://example.com/notavideo")).toBe("");
   });
 
-  it("returns empty embedId when link is empty", () => {
-    render(<YoutubeEmbed link="" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
+  it("returns empty string when link is empty or undefined", () => {
+    expect(getYoutubeEmbedId("")).toBe("");
+    expect(getYoutubeEmbedId(undefined)).toBe("");
   });
 
-  it("returns empty embedId when link is undefined", () => {
-    render(<YoutubeEmbed link={undefined} />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
+  it("returns empty string when match length is not 11", () => {
+    expect(getYoutubeEmbedId("https://www.youtube.com/watch?v=short")).toBe("");
+  });
+});
+
+describe("YoutubeEmbed", () => {
+  beforeEach(() => {
+    mockPlayVideo.mockClear();
+    capturedEvents = undefined;
+    capturedVideoId = undefined;
+    capturedPlayerVars = undefined;
   });
 
-  it("appends autoplay param when autoplay is true", () => {
+  it("renders a placeholder with an accessible title", () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
+    expect(screen.getByTitle("Embedded youtube")).toBeInTheDocument();
+  });
+
+  it("constructs the player with the extracted videoId and enablejsapi, autoplay/mute off by default", async () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
+    await waitFor(() => expect(capturedVideoId).toBeDefined());
+    expect(capturedVideoId).toBe("dQw4w9WgXcQ");
+    expect(capturedPlayerVars).toEqual({ enablejsapi: 1, autoplay: 0, mute: 0 });
+  });
+
+  it("passes autoplay and mute declaratively via playerVars when autoplay is true", async () => {
     render(
       <YoutubeEmbed
         link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
         autoplay={true}
       />
     );
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
-    );
+    await waitFor(() => expect(capturedPlayerVars).toBeDefined());
+    expect(capturedPlayerVars).toEqual({ enablejsapi: 1, autoplay: 1, mute: 1 });
   });
 
-  it("does not append autoplay param when autoplay is false", () => {
+  it("reports play/pause/ended via onStateChange", async () => {
+    const onPlay = jest.fn();
+    const onPause = jest.fn();
+    const onEnded = jest.fn();
     render(
       <YoutubeEmbed
         link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-        autoplay={false}
+        onPlay={onPlay}
+        onPause={onPause}
+        onEnded={onEnded}
       />
     );
-    expect(
-      screen.getByTitle("Embedded youtube").getAttribute("src")
-    ).not.toContain("autoplay");
+    await waitFor(() => expect(capturedEvents).toBeDefined());
+
+    capturedEvents.onStateChange({ data: 1 });
+    expect(onPlay).toHaveBeenCalled();
+    capturedEvents.onStateChange({ data: 2 });
+    expect(onPause).toHaveBeenCalled();
+    capturedEvents.onStateChange({ data: 0 });
+    expect(onEnded).toHaveBeenCalled();
   });
 
   it("applies containerClassName", () => {
@@ -85,20 +121,11 @@ describe("YoutubeEmbed", () => {
     expect(container.firstElementChild?.className).toContain("extra");
   });
 
-  it("has correct iframe attributes", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
-    const iframe = screen.getByTitle("Embedded youtube");
-    expect(iframe).toHaveAttribute(
-      "allow",
-      "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    );
-    expect(iframe).toHaveAttribute("allowFullScreen");
-  });
-
-  it("returns empty embedId when match length is not 11", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=short" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
+  it("does not attempt to load the API when embedId is empty", async () => {
+    render(<YoutubeEmbed link="https://example.com/notavideo" />);
+    await new Promise(resolve => {
+      setTimeout(resolve, 0);
+    });
+    expect(capturedVideoId).toBeUndefined();
   });
 });

package/src/components/video-link/youtube-embed.tsx

@@ -1,6 +1,8 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { VideoEmbedProps } from "./types";
+import { loadYoutubeIframeApi } from "./youtube-iframe-api-loader";
 
+import { useFullscreenToggle } from "@shared/hooks/use-fullscreen-toggle";
 import { cx } from "@shared/utils";
 
 // import styles from "./styles.module.scss";
@@ -10,22 +12,103 @@ export type Props = {
   autoplay?: boolean; // Add the autoplay prop
 } & VideoEmbedProps;
 
+export const getYoutubeEmbedId = (link?: string): string => {
+  if (!link) return "";
+
+  const href = link.toString();
+  const regExp =
+    /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  const match = href.match(regExp);
+
+  return match && match[7].length === 11 ? match[7] : "";
+};
+
 export const YoutubeEmbed: React.FC<Props> = props => {
-  const { link, containerClassName, autoplay = false } = props;
+  const {
+    link,
+    containerClassName,
+    autoplay = false,
+    onPlay,
+    onPause,
+    onTimeUpdate,
+    onEnded,
+    onFullscreenToggle,
+  } = props;
+
+  const embedId = useMemo(() => getYoutubeEmbedId(link), [link]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const progressInterval = useRef<ReturnType<typeof setInterval>>();
+
+  useFullscreenToggle(iframeRef, onFullscreenToggle);
 
-  const embedId = useMemo(() => {
-    if (!link) return "";
+  useEffect(() => {
+    if (!embedId || !containerRef.current) return undefined;
+    let player: any;
+    let cancelled = false;
 
-    const href = link.toString();
-    const regExp =
-      /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-    const match = href.match(regExp);
+    // The YT.Player-managed iframe is mounted into a plain DOM node created
+    // here, outside of React's own render tree/reconciliation - React only
+    // ever renders an empty container div for this component, so it never
+    // diffs/touches whatever the API puts inside it. Letting React manage
+    // the same node the API mutates is a well-known source of onReady/
+    // onStateChange silently never firing (a reconciliation pass can revert
+    // the API's DOM changes without going through this component's own
+    // effect cleanup).
+    const mountNode = document.createElement("div");
+    mountNode.style.width = "100%";
+    mountNode.style.height = "100%";
+    containerRef.current.appendChild(mountNode);
 
-    return match && match[7].length === 11 ? match[7] : "";
-  }, [link]);
+    loadYoutubeIframeApi().then(YT => {
+      if (cancelled) return;
+      player = new YT.Player(mountNode, {
+        videoId: embedId,
+        playerVars: {
+          enablejsapi: 1,
+          autoplay: autoplay ? 1 : 0,
+          mute: autoplay ? 1 : 0,
+        },
+        events: {
+          onReady: () => {
+            const iframe = player.getIframe?.();
+            if (iframe) {
+              iframe.className = "absolute left-0 top-0 h-full w-full";
+              iframeRef.current = iframe;
+            }
+          },
+          onStateChange: (event: any) => {
+            const State = YT.PlayerState;
+            if (event.data === State.PLAYING) {
+              onPlay?.();
+              clearInterval(progressInterval.current);
+              progressInterval.current = setInterval(() => {
+                const duration = player?.getDuration?.() ?? 0;
+                const position = player?.getCurrentTime?.() ?? 0;
+                onTimeUpdate?.(position, duration);
+              }, 1000);
+            } else if (event.data === State.PAUSED) {
+              onPause?.();
+              clearInterval(progressInterval.current);
+            } else if (event.data === State.ENDED) {
+              onEnded?.();
+              clearInterval(progressInterval.current);
+            }
+          },
+        },
+      });
+    }).catch(() => {
+      // ignore YouTube API load failures; component will remain empty
+    });
 
-  // Add autoplay parameter to the URL if autoplay is true
-  const autoplayParam = autoplay ? "?autoplay=1" : "";
+    return () => {
+      cancelled = true;
+      clearInterval(progressInterval.current);
+      player?.destroy?.();
+      mountNode.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [embedId]);
 
   return (
     <div
@@ -34,11 +117,9 @@ export const YoutubeEmbed: React.FC<Props> = props => {
         containerClassName
       )}
     >
-      <iframe
+      <div
+        ref={containerRef}
         className="absolute left-0 top-0 h-full w-full"
-        src={`https://www.youtube.com/embed/${embedId}${autoplayParam}`}
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen={true}
         title="Embedded youtube"
       />
     </div>

package/src/components/video-link/youtube-iframe-api-loader.ts

@@ -0,0 +1,45 @@
+let apiPromise: Promise<typeof window.YT> | null = null;
+
+export function loadYoutubeIframeApi(): Promise<typeof window.YT> {
+  if (typeof window === "undefined") {
+    return Promise.reject(new Error("YouTube IFrame API requires a browser"));
+  }
+
+  if (window.YT?.Player) {
+    return Promise.resolve(window.YT);
+  }
+
+  if (apiPromise) {
+    return apiPromise;
+  }
+
+  apiPromise = new Promise((resolve, reject) => {
+    const previousCallback = window.onYouTubeIframeAPIReady;
+    window.onYouTubeIframeAPIReady = () => {
+      previousCallback?.();
+      resolve(window.YT);
+    };
+
+    let script = document.querySelector<HTMLScriptElement>(
+      'script[src*="youtube.com/iframe_api"]'
+    );
+    if (!script) {
+      script = document.createElement("script");
+      script.src = "https://www.youtube.com/iframe_api";
+      script.onerror = () => {
+        apiPromise = null;
+        reject(new Error("Failed to load YouTube IFrame API"));
+      };
+      document.head.appendChild(script);
+    }
+  });
+
+  return apiPromise;
+}
+
+declare global {
+  interface Window {
+    YT: any;
+    onYouTubeIframeAPIReady?: () => void;
+  }
+}

package/src/contentful/blocks/callout/index.test.tsx

@@ -258,10 +258,10 @@ describe("Callout", () => {
       expect(gridHolder?.className).not.toContain("gap-6");
     });
 
-    it("has gap-6 by default", () => {
+    it("has gap-3 by default", () => {
       const { container } = render(<Callout {...defaultProps} />);
       const gridHolder = container.querySelector(".card-holder");
-      expect(gridHolder?.className).toContain("gap-6");
+      expect(gridHolder?.className).toContain("gap-3");
     });
 
     it("calculates 3 columns for 6 items (divisible by 3)", () => {

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

@@ -140,6 +140,7 @@ export const Callout: React.FC<CalloutProps> = ({
             date={blogItem.blogCreationDate}
             category={blogItem.category}
             image={blogItem.cover}
+            imageAltText={blogItem.imageAltText}
             asGrid={false}
             {...widthProps}
           />

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

@@ -18,10 +18,17 @@ export const BlogCard: React.FC<BlogCardProps> = ({
   date,
   category,
   image,
+  imageAltText,
   imageComponent: ImageComponent,
   asGrid = true,
   index,
 }: BlogCardProps) => {
+  const imageAlt =
+    imageAltText ??
+    image?.description ??
+    image?.alt ??
+    title ??
+    "blog-card-image";
   const parentClassName = asGrid
     ? "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`;
@@ -40,7 +47,7 @@ export const BlogCard: React.FC<BlogCardProps> = ({
             ImageComponent ? (
               <ImageComponent
                 src={image.src}
-                alt={image.alt}
+                alt={imageAlt}
                 width={image.width}
                 height={image.height}
                 className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
@@ -49,7 +56,7 @@ export const BlogCard: React.FC<BlogCardProps> = ({
             ) : (
               <img
                 src={image.src}
-                alt={image.alt}
+                alt={imageAlt}
                 width={image.width}
                 height={image.height}
                 loading="lazy"

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

@@ -21,9 +21,13 @@ export interface BlogCardProps {
   image?: {
     src: string;
     alt: string;
+    /** Contentful asset description — used as the alt-text fallback. */
+    description?: string;
     width: number;
     height: number;
   };
+  /** Explicit image alt text; falls back to the image description then alt. */
+  imageAltText?: string;
   /** Pass next/image's Image component here to enable image optimization */
   imageComponent?: React.ComponentType<BlogCardImageProps>;
   asGrid?: boolean;

package/src/contentful/blocks/cards/floating-image-card/index.tsx

@@ -29,6 +29,7 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
     imageLink,
     imageClassName,
     className,
+    imageAltText,
     isPromoBarImg = false,
     shadow = false,
     disableAnimation,
@@ -51,7 +52,13 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
     return image?.href ? (
       <NextImage
         src={image.href}
-        alt={image.title ?? title ?? "promo-bar-image"}
+        alt={
+          imageAltText ??
+          image.description ??
+          image.title ??
+          title ??
+          "promo-bar-image"
+        }
         width={148}
         height={40}
         onClick={handleImageClick}
@@ -74,13 +81,15 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
       {image?.href ? (
         <div
           className={cx(
-            "relative h-[233px] w-full overflow-hidden sm:mb-1 md:h-[274px] md:flex-none lg:h-[330px] lg:mb-0",
+            "relative h-[233px] w-full overflow-hidden sm:mb-1 md:h-[274px] md:flex-none lg:mb-0 lg:h-[330px]",
             imageClassName
           )}
         >
           <NextImage
             src={image.href}
-            alt={image.title ?? title ?? "card-image"}
+            alt={
+              imageAltText ?? image.description ?? image.title ?? "card-image"
+            }
             width={image.width || 400}
             height={image.height || 330}
             onClick={handleImageClick}
@@ -99,7 +108,10 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
       ) : null}
 
       {body ? (
-        <Text as="div" className="body1 -mt-1 mb-0 flex-1 text-text md:-mt-2 lg:mt-2">
+        <Text
+          as="div"
+          className="body1 -mt-1 mb-0 flex-1 text-text md:-mt-2 lg:mt-2"
+        >
           {body}
         </Text>
       ) : null}
@@ -109,10 +121,12 @@ export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
           <Button
             {...cta}
             showButtonAs={
-              cta.showButtonAs || (cta.buttonIconName ? undefined : "text-with-icon")
+              cta.showButtonAs ||
+              (cta.buttonIconName ? undefined : "text-with-icon")
             }
             iconName={
-              cta.iconName || (cta.buttonIconName ? undefined : "expand_circle_right")
+              cta.iconName ||
+              (cta.buttonIconName ? undefined : "expand_circle_right")
             }
             iconFill={cta.iconFill ?? 1}
             // Button animates ONLY when BOTH are explicitly enabled:

package/src/contentful/blocks/cards/floating-image-card/types.ts

@@ -4,6 +4,8 @@ import type { ButtonProps } from "../../button/types";
 export type FloatingImageAsset = {
   href: string;
   title?: string;
+  /** Contentful asset description — used as the alt-text fallback. */
+  description?: string;
   width?: number;
   height?: number;
 };
@@ -15,6 +17,8 @@ export type FloatingImageCardItem = {
   cta?: ButtonProps;
   ctaAlignment?: "left" | "right" | "center";
   image?: FloatingImageAsset;
+  /** Explicit image alt text; falls back to the image asset description. */
+  imageAltText?: string;
   imageLink?: string;
   imageClassName?: string;
   className?: string;

package/src/contentful/blocks/cards/full-image-card/index.tsx

@@ -18,6 +18,7 @@ export const FullImageCard: React.FC<FullImageCardProps> = ({
     description,
     caption,
     image,
+    imageAltText,
     cta,
     link,
     className,
@@ -35,7 +36,7 @@ export const FullImageCard: React.FC<FullImageCardProps> = ({
     const img = (
       <NextImage
         src={image.href}
-        alt={image.title ?? title ?? "card-image"}
+        alt={imageAltText ?? image.description ?? image.title ?? title ?? "card-image"}
         width={image.width || 400}
         height={image.height || 280}
         className="w-full"

package/src/contentful/blocks/cards/full-image-card/types.ts

@@ -3,6 +3,8 @@ import type { ButtonProps } from "../../button/types";
 export type FullImageAsset = {
   href: string;
   title?: string;
+  /** Contentful asset description — used as the alt-text fallback. */
+  description?: string;
   width?: number;
   height?: number;
 };
@@ -15,6 +17,8 @@ export type FullImageCardItem = {
   cta?: ButtonProps;
   link?: ButtonProps;
   image?: FullImageAsset;
+  /** Explicit image alt text; falls back to the image asset description. */
+  imageAltText?: string;
   className?: string;
   contentClassName?: string;
   imageClassName?: string;

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>