@windstream/react-shared-components 0.1.93 → 0.1.94

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

@@ -0,0 +1,216 @@
+import React from "react";
+import { FullImageCard } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/next-image", () => ({
+  NextImage: ({ src, alt, width, height, className }: any) => (
+    <img
+      data-testid="next-image"
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+    />
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/components/link", () => ({
+  Link: ({ children, href, className, tabIndex, target, ...rest }: any) => (
+    <a
+      href={href}
+      className={className}
+      tabIndex={tabIndex}
+      target={target}
+      {...rest}
+    >
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("../../button", () => ({
+  Button: ({ children, linkClassName, buttonLabel }: any) => (
+    <button data-testid="cta-button" className={linkClassName}>
+      {buttonLabel || children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("FullImageCard", () => {
+  const defaultCard = {
+    title: "Card Title",
+    description: "Card description",
+    image: { href: "/image.jpg", title: "Card Image", width: 400, height: 280 },
+  };
+
+  describe("Rendering", () => {
+    it("renders the section element", () => {
+      const { container } = render(<FullImageCard card={defaultCard} />);
+      expect(container.querySelector("section")).toBeInTheDocument();
+    });
+
+    it("renders title", () => {
+      render(<FullImageCard card={defaultCard} />);
+      expect(screen.getByText("Card Title")).toBeInTheDocument();
+    });
+
+    it("renders description", () => {
+      render(<FullImageCard card={defaultCard} />);
+      expect(screen.getByText("Card description")).toBeInTheDocument();
+    });
+
+    it("renders image when provided", () => {
+      render(<FullImageCard card={defaultCard} />);
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("src", "/image.jpg");
+    });
+
+    it("does not render image when not provided", () => {
+      render(<FullImageCard card={{ title: "No Image" }} />);
+      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
+    });
+
+    it("does not render title when not provided", () => {
+      render(<FullImageCard card={{ description: "Desc only" }} />);
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
+    });
+
+    it("does not render description when not provided", () => {
+      render(<FullImageCard card={{ title: "Title only" }} />);
+      expect(screen.queryByText("Card description")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Caption", () => {
+    it("renders caption when provided", () => {
+      const card = { ...defaultCard, caption: "A note" };
+      render(<FullImageCard card={card} />);
+      expect(screen.getByText("A note")).toBeInTheDocument();
+    });
+
+    it("does not render caption when not provided", () => {
+      render(<FullImageCard card={defaultCard} />);
+      expect(screen.queryByText("A note")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("CTA", () => {
+    it("renders CTA button when cta is provided", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Learn More", href: "/learn" },
+      };
+      render(<FullImageCard card={card} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("does not render CTA when not provided", () => {
+      render(<FullImageCard card={defaultCard} />);
+      expect(screen.queryByTestId("cta-button")).not.toBeInTheDocument();
+    });
+
+    it("wraps title in link when cta href is present", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+      };
+      render(<FullImageCard card={card} />);
+      const titleLink = screen.getByText("Card Title").closest("a");
+      expect(titleLink).toHaveAttribute("href", "/click");
+    });
+
+    it("wraps image in link when cta href is present", () => {
+      const card = {
+        ...defaultCard,
+        cta: { buttonLabel: "Click", href: "/click" },
+      };
+      render(<FullImageCard card={card} />);
+      const imgLink = screen.getByTestId("next-image").closest("a");
+      expect(imgLink).toHaveAttribute("href", "/click");
+    });
+  });
+
+  describe("Link prop", () => {
+    it("uses link href for image and title when no cta", () => {
+      const card = {
+        ...defaultCard,
+        link: { href: "/link-target", target: "_blank" as const },
+      };
+      render(<FullImageCard card={card} />);
+      const imgLink = screen.getByTestId("next-image").closest("a");
+      expect(imgLink).toHaveAttribute("href", "/link-target");
+    });
+  });
+
+  describe("Layout props", () => {
+    it("applies lgWidth class", () => {
+      const { container } = render(
+        <FullImageCard card={defaultCard} lgWidth="lg:w-1/3" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "lg:w-1/3"
+      );
+    });
+
+    it("applies mdWidth class", () => {
+      const { container } = render(
+        <FullImageCard card={defaultCard} mdWidth="md:w-1/2" />
+      );
+      expect(container.querySelector("section")?.className).toContain(
+        "md:w-1/2"
+      );
+    });
+
+    it("applies shadow by default", () => {
+      const { container } = render(<FullImageCard card={defaultCard} />);
+      expect(container.querySelector("section")?.className).toContain(
+        "shadow-card"
+      );
+    });
+
+    it("does not apply shadow when shadow is false", () => {
+      const card = { ...defaultCard, shadow: false };
+      const { container } = render(<FullImageCard card={card} />);
+      expect(container.querySelector("section")?.className).not.toContain(
+        "shadow-card"
+      );
+    });
+
+    it("applies custom className", () => {
+      const card = { ...defaultCard, className: "my-class" };
+      const { container } = render(<FullImageCard card={card} />);
+      expect(container.querySelector("section")?.className).toContain(
+        "my-class"
+      );
+    });
+
+    it("applies anchorId as section id", () => {
+      const card = { ...defaultCard, anchorId: "my-card" };
+      const { container } = render(<FullImageCard card={card} />);
+      expect(container.querySelector("section")).toHaveAttribute(
+        "id",
+        "my-card"
+      );
+    });
+
+    it("uses default anchorId FullImageCard", () => {
+      const { container } = render(<FullImageCard card={defaultCard} />);
+      expect(container.querySelector("section")).toHaveAttribute(
+        "id",
+        "FullImageCard"
+      );
+    });
+  });
+});

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

@@ -1,130 +1,130 @@
-import React from "react";
-import { Button } from "../../button";
-import { FullImageCardProps } from "./types";
-
-import { Link } from "@shared/components/link";
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-export const FullImageCard: React.FC<FullImageCardProps> = ({
-  card,
-  lgWidth,
-  mdWidth,
-}) => {
-  const {
-    anchorId = "FullImageCard",
-    title,
-    description,
-    caption,
-    image,
-    cta,
-    link,
-    className,
-    contentClassName,
-    imageClassName,
-    shadow = true,
-  } = card;
-
-  const target = cta || link;
-  const href = target?.href;
-
-  const renderImage = () => {
-    if (!image?.href) return null;
-
-    const img = (
-      <NextImage
-        src={image.href}
-        alt={image.title ?? title ?? "card-image"}
-        width={image.width || 400}
-        height={image.height || 280}
-        className="w-full"
-      />
-    );
-
-    return href ? (
-      <Link href={href} tabIndex={-1} target={target?.target}>
-        {img}
-      </Link>
-    ) : (
-      img
-    );
-  };
-
-  const titleNode = title ? (
-    <Text as="h3" className="body1 text-text xl:heading6">
-      {title}
-    </Text>
-  ) : null;
-
-  return (
-    <section
-      id={anchorId}
-      className={cx(
-        "callout-card relative flex flex-col rounded-3xl bg-white p-0",
-        shadow && "shadow-card",
-        mdWidth,
-        lgWidth,
-        "w-full",
-        className
-      )}
-      aria-labelledby={`card-title-${anchorId}`}
-    >
-      {image?.href ? (
-        <div
-          className={cx(
-            "relative aspect-video overflow-hidden rounded-tl-3xl rounded-tr-3xl",
-            imageClassName
-          )}
-        >
-          {renderImage()}
-        </div>
-      ) : null}
-      <div
-        className={cx(
-          "flex h-full flex-col gap-4 p-6 md:p-8",
-          contentClassName
-        )}
-      >
-        <div className="flex flex-1 flex-col justify-between">
-          <div>
-            {href && titleNode ? (
-              <Link
-                href={href}
-                target={target?.target}
-                className="no-underline hover:underline"
-              >
-                {titleNode}
-              </Link>
-            ) : (
-              titleNode
-            )}
-            {description ? (
-              <Text as="p" className="body2 mt-4 text-text md:body1">
-                {description}
-              </Text>
-            ) : null}
-          </div>
-          {caption ? (
-            <Text as="p" className="footnote mt-5 text-text-secondary">
-              {caption}
-            </Text>
-          ) : null}
-        </div>
-        {cta ? (
-          <div className="mt-2 flex items-end">
-            <Button
-              linkVariant="unstyled"
-              linkClassName="label1 flex items-center gap-2 text-text"
-              {...cta}
-              iconName="expand_circle_right"
-              iconFill={1}
-            />
-          </div>
-        ) : null}
-      </div>
-    </section>
-  );
-};
-
-export default FullImageCard;
+import React from "react";
+import { Button } from "../../button";
+import { FullImageCardProps } from "./types";
+
+import { Link } from "@shared/components/link";
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+export const FullImageCard: React.FC<FullImageCardProps> = ({
+  card,
+  lgWidth,
+  mdWidth,
+}) => {
+  const {
+    anchorId = "FullImageCard",
+    title,
+    description,
+    caption,
+    image,
+    cta,
+    link,
+    className,
+    contentClassName,
+    imageClassName,
+    shadow = true,
+  } = card;
+
+  const target = cta || link;
+  const href = target?.href;
+
+  const renderImage = () => {
+    if (!image?.href) return null;
+
+    const img = (
+      <NextImage
+        src={image.href}
+        alt={image.title ?? title ?? "card-image"}
+        width={image.width || 400}
+        height={image.height || 280}
+        className="w-full"
+      />
+    );
+
+    return href ? (
+      <Link href={href} tabIndex={-1} target={target?.target}>
+        {img}
+      </Link>
+    ) : (
+      img
+    );
+  };
+
+  const titleNode = title ? (
+    <Text as="h3" className="body1 text-text xl:heading6">
+      {title}
+    </Text>
+  ) : null;
+
+  return (
+    <section
+      id={anchorId}
+      className={cx(
+        "callout-card relative flex flex-col rounded-3xl bg-white p-0",
+        shadow && "shadow-card",
+        mdWidth,
+        lgWidth,
+        "w-full",
+        className
+      )}
+      aria-labelledby={`card-title-${anchorId}`}
+    >
+      {image?.href ? (
+        <div
+          className={cx(
+            "relative aspect-video overflow-hidden rounded-tl-3xl rounded-tr-3xl",
+            imageClassName
+          )}
+        >
+          {renderImage()}
+        </div>
+      ) : null}
+      <div
+        className={cx(
+          "flex h-full flex-col gap-4 p-6 md:p-8",
+          contentClassName
+        )}
+      >
+        <div className="flex flex-1 flex-col justify-between">
+          <div>
+            {href && titleNode ? (
+              <Link
+                href={href}
+                target={target?.target}
+                className="no-underline hover:underline"
+              >
+                {titleNode}
+              </Link>
+            ) : (
+              titleNode
+            )}
+            {description ? (
+              <Text as="p" className="body2 mt-4 text-text md:body1">
+                {description}
+              </Text>
+            ) : null}
+          </div>
+          {caption ? (
+            <Text as="p" className="footnote mt-5 text-text-secondary">
+              {caption}
+            </Text>
+          ) : null}
+        </div>
+        {cta ? (
+          <div className="mt-2 flex items-end">
+            <Button
+              linkVariant="unstyled"
+              linkClassName="label1 flex items-center gap-2 text-text"
+              {...cta}
+              iconName="expand_circle_right"
+              iconFill={1}
+            />
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+export default FullImageCard;

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

@@ -1,29 +1,29 @@
-import type { ButtonProps } from "../../button/types";
-
-export type FullImageAsset = {
-  href: string;
-  title?: string;
-  width?: number;
-  height?: number;
-};
-
-export type FullImageCardItem = {
-  anchorId?: string;
-  title?: string;
-  description?: string;
-  caption?: string;
-  cta?: ButtonProps;
-  link?: ButtonProps;
-  image?: FullImageAsset;
-  className?: string;
-  contentClassName?: string;
-  imageClassName?: string;
-  /** Applies `shadow-card` to the outer card element. */
-  shadow?: boolean;
-};
-
-export type FullImageCardProps = {
-  card: FullImageCardItem;
-  lgWidth?: string;
-  mdWidth?: string;
-};
+import type { ButtonProps } from "../../button/types";
+
+export type FullImageAsset = {
+  href: string;
+  title?: string;
+  width?: number;
+  height?: number;
+};
+
+export type FullImageCardItem = {
+  anchorId?: string;
+  title?: string;
+  description?: string;
+  caption?: string;
+  cta?: ButtonProps;
+  link?: ButtonProps;
+  image?: FullImageAsset;
+  className?: string;
+  contentClassName?: string;
+  imageClassName?: string;
+  /** Applies `shadow-card` to the outer card element. */
+  shadow?: boolean;
+};
+
+export type FullImageCardProps = {
+  card: FullImageCardItem;
+  lgWidth?: string;
+  mdWidth?: string;
+};

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

@@ -0,0 +1,39 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { Cards } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, ...props }: any) => <span {...props}>{children}</span>,
+}));
+
+describe("Cards", () => {
+  it("renders the Cards component", () => {
+    render(<Cards fields={{}} />);
+    expect(screen.getByText("Cards")).toBeInTheDocument();
+  });
+
+  it("renders a div wrapper", () => {
+    const { container } = render(<Cards fields={{}} />);
+    expect(container.querySelector("div")).toBeInTheDocument();
+  });
+
+  it("renders with empty fields object", () => {
+    const { container } = render(<Cards fields={{}} />);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it("renders Text component with Cards text", () => {
+    render(<Cards fields={{}} />);
+    const text = screen.getByText("Cards");
+    expect(text).toBeInTheDocument();
+    expect(text.tagName).toBe("SPAN");
+  });
+
+  it("exports default Cards component", async () => {
+    const mod = await import("./index");
+    expect(mod.default).toBeDefined();
+  });
+});

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

@@ -1,13 +1,13 @@
-import { CardsProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
-  return (
-    <div>
-      <Text>Cards</Text>
-    </div>
-  );
-};
-
-export default Cards;
+import { CardsProps } from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Cards: React.FC<{ fields: CardsProps }> = ({ fields }) => {
+  return (
+    <div>
+      <Text>Cards</Text>
+    </div>
+  );
+};
+
+export default Cards;