@windstream/react-shared-components 0.1.92 → 0.1.94

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

@@ -1,34 +1,34 @@
-import React from "react";
-
-export interface BlogCardImageProps {
-  src: string;
-  alt: string;
-  width: number;
-  height: number;
-  className?: string;
-  sizes?: string;
-  loading?: "lazy" | "eager";
-  decoding?: "async" | "auto" | "sync";
-  [key: string]: unknown;
-}
-
-export interface BlogCardProps {
-  href: string;
-  title?: string;
-  description?: string;
-  date?: string;
-  category?: string;
-  image?: {
-    src: string;
-    alt: string;
-    width: number;
-    height: number;
-  };
-  /** Pass next/image's Image component here to enable image optimization */
-  imageComponent?: React.ComponentType<BlogCardImageProps>;
-  readMoreText?: string;
-  asGrid?: boolean;
-  lgWidth?: string;
-  mdWidth?: string;
-  index?: number;
-}
+import React from "react";
+
+export interface BlogCardImageProps {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  className?: string;
+  sizes?: string;
+  loading?: "lazy" | "eager";
+  decoding?: "async" | "auto" | "sync";
+  [key: string]: unknown;
+}
+
+export interface BlogCardProps {
+  href: string;
+  title?: string;
+  description?: string;
+  date?: string;
+  category?: string;
+  image?: {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  };
+  /** Pass next/image's Image component here to enable image optimization */
+  imageComponent?: React.ComponentType<BlogCardImageProps>;
+  readMoreText?: string;
+  asGrid?: boolean;
+  lgWidth?: string;
+  mdWidth?: string;
+  index?: number;
+}

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

@@ -0,0 +1,201 @@
+import React from "react";
+import { FloatingImageCard } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/next-image", () => ({
+  NextImage: ({ src, alt, width, height, className, onClick }: any) => (
+    <img
+      data-testid="next-image"
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+      onClick={onClick}
+    />
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("../../button", () => ({
+  Button: ({ children, linkClassName, ...rest }: any) => (
+    <button data-testid="cta-button" className={linkClassName}>
+      {rest.buttonLabel || children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("FloatingImageCard", () => {
+  const defaultCard = {
+    title: "Card Title",
+    header: "Card Header",
+    body: "Card body content",
+    image: { href: "/image.jpg", title: "Test Image", width: 400, height: 285 },
+  };
+
+  describe("Rendering", () => {
+    it("renders the section element", () => {
+      const { container } = render(<FloatingImageCard card={defaultCard} />);
+      expect(container.querySelector("section")).toBeInTheDocument();
+    });
+
+    it("renders header text", () => {
+      render(<FloatingImageCard card={defaultCard} />);
+      expect(screen.getByText("Card Header")).toBeInTheDocument();
+    });
+
+    it("renders body text", () => {
+      render(<FloatingImageCard card={defaultCard} />);
+      expect(screen.getByText("Card body content")).toBeInTheDocument();
+    });
+
+    it("renders image when provided", () => {
+      render(<FloatingImageCard card={defaultCard} />);
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("src", "/image.jpg");
+      expect(img).toHaveAttribute("alt", "Test Image");
+    });
+
+    it("does not render image when not provided", () => {
+      render(<FloatingImageCard card={{ ...defaultCard, image: undefined }} />);
+      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
+    });
+
+    it("does not render header when not provided", () => {
+      render(
+        <FloatingImageCard card={{ ...defaultCard, header: undefined }} />
+      );
+      expect(screen.queryByText("Card Header")).not.toBeInTheDocument();
+    });
+
+    it("does not render body when not provided", () => {
+      render(<FloatingImageCard card={{ ...defaultCard, body: undefined }} />);
+      expect(screen.queryByText("Card body content")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("CTA", () => {
+    it("renders CTA button when cta is provided", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Learn More", href: "/learn" },
+      };
+      render(<FloatingImageCard card={card} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("does not render CTA when not provided", () => {
+      render(<FloatingImageCard card={defaultCard} />);
+      expect(screen.queryByTestId("cta-button")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("CTA alignment", () => {
+    it("applies left alignment by default", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+      };
+      render(<FloatingImageCard card={card} />);
+      const ctaWrapper = screen.getByTestId("cta-button").parentElement;
+      expect(ctaWrapper?.className).toContain("justify-start");
+    });
+
+    it("applies center alignment", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+        ctaAlignment: "center" as const,
+      };
+      render(<FloatingImageCard card={card} />);
+      const ctaWrapper = screen.getByTestId("cta-button").parentElement;
+      expect(ctaWrapper?.className).toContain("justify-center");
+    });
+
+    it("applies right alignment", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+        ctaAlignment: "right" as const,
+      };
+      render(<FloatingImageCard card={card} />);
+      const ctaWrapper = screen.getByTestId("cta-button").parentElement;
+      expect(ctaWrapper?.className).toContain("justify-end");
+    });
+  });
+
+  describe("PromoBar mode", () => {
+    it("renders only image when isPromoBarImg is true", () => {
+      const card = {
+        ...defaultCard,
+        isPromoBarImg: true,
+      };
+      const { container } = render(<FloatingImageCard card={card} />);
+      expect(container.querySelector("section")).not.toBeInTheDocument();
+      expect(screen.getByTestId("next-image")).toBeInTheDocument();
+    });
+
+    it("returns null when isPromoBarImg is true and no image", () => {
+      const card = {
+        ...defaultCard,
+        image: undefined,
+        isPromoBarImg: true,
+      };
+      const { container } = render(<FloatingImageCard card={card} />);
+      expect(container.firstChild).toBeNull();
+    });
+  });
+
+  describe("Image link", () => {
+    it("makes image clickable when imageLink is provided", () => {
+      const windowOpen = jest.spyOn(window, "open").mockImplementation();
+      const card = {
+        ...defaultCard,
+        imageLink: "https://example.com",
+      };
+      render(<FloatingImageCard card={card} />);
+      const img = screen.getByTestId("next-image");
+      img.click();
+      expect(windowOpen).toHaveBeenCalledWith("https://example.com", "_blank");
+      windowOpen.mockRestore();
+    });
+  });
+
+  describe("Layout props", () => {
+    it("applies lgWidth class", () => {
+      const { container } = render(
+        <FloatingImageCard card={defaultCard} lgWidth="lg:w-1/3" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "lg:w-1/3"
+      );
+    });
+
+    it("applies mdWidth class", () => {
+      const { container } = render(
+        <FloatingImageCard card={defaultCard} mdWidth="md:w-1/2" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "md:w-1/2"
+      );
+    });
+
+    it("applies shadow class when shadow is true", () => {
+      const card = { ...defaultCard, shadow: true };
+      const { container } = render(<FloatingImageCard card={card} />);
+      expect(container.querySelector("section")?.className).toContain(
+        "shadow-card"
+      );
+    });
+  });
+});

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

@@ -1,119 +1,119 @@
-import React from "react";
-import { Button } from "../../button";
-import { FloatingImageCardProps } from "./types";
-
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-const alignmentClasses: Record<string, string> = {
-  left: "flex w-full justify-start",
-  right: "flex w-full justify-end",
-  center: "flex w-full justify-center",
-};
-
-export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
-  card,
-  lgWidth,
-  mdWidth,
-}) => {
-  const {
-    image,
-    title,
-    header,
-    body,
-    cta,
-    ctaAlignment,
-    imageLink,
-    imageClassName,
-    className,
-    isPromoBarImg = false,
-    shadow = false,
-  } = card;
-
-  const ctaAlignmentClass = ctaAlignment
-    ? alignmentClasses[ctaAlignment]
-    : alignmentClasses.left;
-  const imageLinkAvailableClass = imageLink ? "cursor-pointer" : "";
-
-  const handleImageClick = imageLink
-    ? () => {
-        if (typeof window !== "undefined") {
-          window.open(imageLink, "_blank");
-        }
-      }
-    : undefined;
-
-  if (isPromoBarImg) {
-    return image?.href ? (
-      <NextImage
-        src={image.href}
-        alt={image.title ?? title ?? "promo-bar-image"}
-        width={148}
-        height={40}
-        onClick={handleImageClick}
-        className={imageLinkAvailableClass}
-      />
-    ) : null;
-  }
-
-  return (
-    <section
-      aria-labelledby="Image Card"
-      className={cx(
-        "callout-card relative flex h-full w-full flex-col gap-4 p-0 md:items-start lg:gap-6",
-        shadow && "rounded-3xl shadow-card",
-        mdWidth,
-        lgWidth,
-        className
-      )}
-    >
-      {image?.href ? (
-        <div
-          className={cx(
-            "relative aspect-video w-full overflow-hidden rounded-[40px] sm:mb-1 md:flex-none lg:mb-0",
-            imageClassName
-          )}
-        >
-          <NextImage
-            src={image.href}
-            alt={image.title ?? title ?? "card-image"}
-            width={image.width || 400}
-            height={image.height || 285}
-            onClick={handleImageClick}
-            className={cx(
-              "h-full max-h-[285px] w-full object-cover",
-              imageLinkAvailableClass
-            )}
-          />
-        </div>
-      ) : null}
-
-      {header ? (
-        <Text as="h6" className="heading6 font-black text-text lg:pb-2">
-          {header}
-        </Text>
-      ) : null}
-
-      {body ? (
-        <Text as="div" className="body2 mb-0 flex-1 text-text">
-          {body}
-        </Text>
-      ) : null}
-
-      <div className={cx(ctaAlignmentClass, "mt-auto")}>
-        {cta ? (
-          <Button
-            linkVariant="unstyled"
-            linkClassName="label1 flex items-center gap-2 text-text"
-            {...cta}
-            iconName="expand_circle_right"
-            iconFill={1}
-          />
-        ) : null}
-      </div>
-    </section>
-  );
-};
-
-export default FloatingImageCard;
+import React from "react";
+import { Button } from "../../button";
+import { FloatingImageCardProps } from "./types";
+
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+const alignmentClasses: Record<string, string> = {
+  left: "flex w-full justify-start",
+  right: "flex w-full justify-end",
+  center: "flex w-full justify-center",
+};
+
+export const FloatingImageCard: React.FC<FloatingImageCardProps> = ({
+  card,
+  lgWidth,
+  mdWidth,
+}) => {
+  const {
+    image,
+    title,
+    header,
+    body,
+    cta,
+    ctaAlignment,
+    imageLink,
+    imageClassName,
+    className,
+    isPromoBarImg = false,
+    shadow = false,
+  } = card;
+
+  const ctaAlignmentClass = ctaAlignment
+    ? alignmentClasses[ctaAlignment]
+    : alignmentClasses.left;
+  const imageLinkAvailableClass = imageLink ? "cursor-pointer" : "";
+
+  const handleImageClick = imageLink
+    ? () => {
+        if (typeof window !== "undefined") {
+          window.open(imageLink, "_blank");
+        }
+      }
+    : undefined;
+
+  if (isPromoBarImg) {
+    return image?.href ? (
+      <NextImage
+        src={image.href}
+        alt={image.title ?? title ?? "promo-bar-image"}
+        width={148}
+        height={40}
+        onClick={handleImageClick}
+        className={imageLinkAvailableClass}
+      />
+    ) : null;
+  }
+
+  return (
+    <section
+      aria-labelledby="Image Card"
+      className={cx(
+        "callout-card relative flex h-full w-full flex-col gap-4 p-0 md:items-start lg:gap-6",
+        shadow && "rounded-3xl shadow-card",
+        mdWidth,
+        lgWidth,
+        className
+      )}
+    >
+      {image?.href ? (
+        <div
+          className={cx(
+            "relative aspect-video w-full overflow-hidden rounded-[40px] sm:mb-1 md:flex-none lg:mb-0",
+            imageClassName
+          )}
+        >
+          <NextImage
+            src={image.href}
+            alt={image.title ?? title ?? "card-image"}
+            width={image.width || 400}
+            height={image.height || 285}
+            onClick={handleImageClick}
+            className={cx(
+              "h-full max-h-[285px] w-full object-cover",
+              imageLinkAvailableClass
+            )}
+          />
+        </div>
+      ) : null}
+
+      {header ? (
+        <Text as="h6" className="heading6 font-black text-text lg:pb-2">
+          {header}
+        </Text>
+      ) : null}
+
+      {body ? (
+        <Text as="div" className="body2 mb-0 flex-1 text-text">
+          {body}
+        </Text>
+      ) : null}
+
+      <div className={cx(ctaAlignmentClass, "mt-auto")}>
+        {cta ? (
+          <Button
+            linkVariant="unstyled"
+            linkClassName="label1 flex items-center gap-2 text-text"
+            {...cta}
+            iconName="expand_circle_right"
+            iconFill={1}
+          />
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+export default FloatingImageCard;

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

@@ -1,30 +1,30 @@
-import type { ReactNode } from "react";
-import type { ButtonProps } from "../../button/types";
-
-export type FloatingImageAsset = {
-  href: string;
-  title?: string;
-  width?: number;
-  height?: number;
-};
-
-export type FloatingImageCardItem = {
-  title?: string;
-  header?: string;
-  body?: ReactNode;
-  cta?: ButtonProps;
-  ctaAlignment?: "left" | "right" | "center";
-  image?: FloatingImageAsset;
-  imageLink?: string;
-  imageClassName?: string;
-  className?: string;
-  isPromoBarImg?: boolean;
-  /** Applies `shadow-card` to the outer card element. */
-  shadow?: boolean;
-};
-
-export type FloatingImageCardProps = {
-  card: FloatingImageCardItem;
-  lgWidth?: string;
-  mdWidth?: string;
-};
+import type { ReactNode } from "react";
+import type { ButtonProps } from "../../button/types";
+
+export type FloatingImageAsset = {
+  href: string;
+  title?: string;
+  width?: number;
+  height?: number;
+};
+
+export type FloatingImageCardItem = {
+  title?: string;
+  header?: string;
+  body?: ReactNode;
+  cta?: ButtonProps;
+  ctaAlignment?: "left" | "right" | "center";
+  image?: FloatingImageAsset;
+  imageLink?: string;
+  imageClassName?: string;
+  className?: string;
+  isPromoBarImg?: boolean;
+  /** Applies `shadow-card` to the outer card element. */
+  shadow?: boolean;
+};
+
+export type FloatingImageCardProps = {
+  card: FloatingImageCardItem;
+  lgWidth?: string;
+  mdWidth?: string;
+};