@windstream/react-shared-components 0.2.54 → 0.2.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.54",
+  "version": "0.2.55",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { PrimaryHero } from "./index";
 
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 jest.mock("@shared/components/checklist", () => ({
   Checklist: ({ items }: any) => (
@@ -14,8 +14,14 @@ jest.mock("@shared/components/checklist", () => ({
 }));
 
 jest.mock("@shared/components/next-image", () => ({
-  NextImage: ({ src, alt, className }: any) => (
-    <img data-testid="next-image" src={src} alt={alt} className={className} />
+  NextImage: ({ src, alt, className, onClick }: any) => (
+    <img
+      data-testid="next-image"
+      src={src}
+      alt={alt}
+      className={className}
+      onClick={onClick}
+    />
   ),
 }));
 
@@ -347,6 +353,25 @@ describe("PrimaryHero", () => {
       expect(badges).toHaveLength(2);
     });
 
+    it("adds cursor class and triggers onImageClick for badge image", () => {
+      const onImageClick = jest.fn();
+
+      render(
+        <PrimaryHero
+          {...baseProps}
+          badgeImage="https://img.test/badge.png"
+          onImageClick={onImageClick}
+        />
+      );
+
+      const badges = screen.getAllByAltText("Badge");
+      expect(badges).toHaveLength(2);
+      badges.forEach((badge) => expect(badge).toHaveClass("cursor-pointer"));
+
+      fireEvent.click(badges[0]);
+      expect(onImageClick).toHaveBeenCalledTimes(1);
+    });
+
     it("does not render badge image when not provided", () => {
       render(<PrimaryHero {...baseProps} />);
       expect(screen.queryByAltText("Badge")).not.toBeInTheDocument();

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

@@ -310,7 +310,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   <NextImage
                     src={badgeImageUrl || ""}
                     alt={"Badge"}
-                    className="absolute left-5 top-5 aspect-square w-26 object-cover object-center"
+                    className={cx(
+                      "absolute left-5 top-5 aspect-square w-26 object-cover object-center",
+                      onImageClick && "cursor-pointer"
+                    )}
+                    onClick={onImageClick}
                     width={104}
                     height={104}
                     quality={90}