@windstream/react-shared-components 0.2.11 → 0.2.12

package/dist/core.d.ts

@@ -170,7 +170,7 @@ interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {
 
 declare const ListItem: React$1.ForwardRefExoticComponent<ListItemProps & React$1.RefAttributes<HTMLLIElement>>;
 
-declare const List: React__default.ForwardRefExoticComponent<ListProps & React__default.RefAttributes<HTMLUListElement | HTMLOListElement>>;
+declare const List: React__default.ForwardRefExoticComponent<ListProps & React__default.RefAttributes<HTMLOListElement | HTMLUListElement>>;
 
 declare const iconNameList: readonly ["info", "download", "featured_seasonal_and_gifts", "visibility", "paid", "check_box", "check_box_outline_blank", "radio_button_unchecked", "radio_button_checked", "counter_1", "counter_2", "counter_3", "error", "search", "cancel", "router", "broadcast_on_home", "check", "check_circle", "lock", "shield_lock", "phone_in_talk", "call", "chevron_left", "chevron_right", "keyboard_arrow_down", "keyboard_arrow_up", "arrow_back", "arrow_forward", "help", "home_pin", "location_on", "timer", "schedule", "add", "remove", "bolt", "rocket", "cloud_sync", "close", "groups", "speed", "mail", "credit_card", "language", "forum", "contract", "local_atm", "headset_mic", "sensors", "wifi", "settings", "home", "devices", "build", "thumb_up", "desktop_windows", "block", "all_inclusive", "verified_user", "extension", "stadia_controller", "visibility_off", "close_fullscreen", "progress_activity", "travel_explore", "share", "business_center", "upload", "videocam", "expand_circle_right", "add_circle", "do_not_disturb_on", "expand_circle_up", "expand_circle_down", "replay", "fiber_manual_record", "menu", "dangerous", "star", "play_arrow", "calendar_clock", "shopping_cart"];
 declare const OpticalSizes: readonly ["20dp", "24dp", "40dp", "48dp"];
@@ -351,7 +351,7 @@ type ButtonAsAnchor = ButtonCustomProps & Omit<AnchorHTMLAttributes<HTMLAnchorEl
 };
 type ButtonProps = ButtonAsButton | ButtonAsAnchor;
 
-declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 declare const Checklist: React__default.FC<ChecklistProps>;
 

package/package.json

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

package/src/contentful/blocks/iframe-embed/index.test.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { IframeEmbed } from "./index";
+
+import { render, screen, fireEvent } from "@testing-library/react";
+
+describe("IframeEmbed", () => {
+  it("renders nothing when iframeUrl is not provided", () => {
+    const { container } = render(<IframeEmbed iframeUrl="" />);
+    expect(container.querySelector("section")).not.toBeInTheDocument();
+  });
+
+  it("renders the iframe when iframeUrl is provided", () => {
+    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
+    const iframe = screen.getByTitle("Iframe Embed");
+    expect(iframe).toBeInTheDocument();
+    expect(iframe).toHaveAttribute("src", "https://example.com/embed");
+  });
+
+  it("applies anchorId to the section", () => {
+    const { container } = render(
+      <IframeEmbed iframeUrl="https://example.com/embed" anchorId="embed-section" />
+    );
+    expect(container.querySelector("#embed-section")).toBeInTheDocument();
+  });
+
+  it("applies background color when backgroundColor is provided", () => {
+    render(
+      <IframeEmbed iframeUrl="https://example.com/embed" backgroundColor="green" />
+    );
+    const iframe = screen.getByTitle("Iframe Embed");
+    expect(iframe.style.background).toBe("rgb(36, 167, 106)");
+  });
+
+  it("applies transparent background when backgroundColor is not provided", () => {
+    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
+    const iframe = screen.getByTitle("Iframe Embed");
+    expect(iframe.style.background).toBe("transparent");
+  });
+
+  it("updates iframe height on postMessage event", () => {
+    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
+    const iframe = screen.getByTitle("Iframe Embed");
+
+    fireEvent(
+      window,
+      new MessageEvent("message", { data: { iframeHeight: 300 } })
+    );
+
+    expect(iframe.style.height).toBe("300px");
+  });
+
+  it("removes message listener on unmount", () => {
+    const removeEventListenerSpy = jest.spyOn(window, "removeEventListener");
+    const { unmount } = render(<IframeEmbed iframeUrl="https://example.com/embed" />);
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      "message",
+      expect.any(Function)
+    );
+    removeEventListenerSpy.mockRestore();
+  });
+
+  it("does not attach message listener when iframeUrl is empty", () => {
+    const addEventListenerSpy = jest.spyOn(window, "addEventListener");
+    render(<IframeEmbed iframeUrl="" />);
+
+    expect(addEventListenerSpy).not.toHaveBeenCalledWith(
+      "message",
+      expect.any(Function)
+    );
+    addEventListenerSpy.mockRestore();
+  });
+
+  it("applies initial height when height prop is provided", () => {
+    render(<IframeEmbed iframeUrl="https://example.com/embed" height={200} />);
+    const iframe = screen.getByTitle("Iframe Embed");
+    expect(iframe.style.height).toBe("200px");
+  });
+
+  it("ignores non-numeric iframeHeight values", () => {
+    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
+    const iframe = screen.getByTitle("Iframe Embed");
+
+    fireEvent(window, new MessageEvent("message", { data: { iframeHeight: "abc" } }));
+    expect(iframe.style.height).toBe("");
+  });
+
+  it("ignores iframeHeight exceeding max cap", () => {
+    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
+    const iframe = screen.getByTitle("Iframe Embed");
+
+    fireEvent(window, new MessageEvent("message", { data: { iframeHeight: 99999 } }));
+    expect(iframe.style.height).toBe("");
+  });
+
+  it("ignores negative iframeHeight values", () => {
+    render(<IframeEmbed iframeUrl="https://example.com/embed" />);
+    const iframe = screen.getByTitle("Iframe Embed");
+
+    fireEvent(window, new MessageEvent("message", { data: { iframeHeight: -100 } }));
+    expect(iframe.style.height).toBe("");
+  });
+});

package/src/contentful/blocks/iframe-embed/index.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { IframeEmbedProps, bgColorMap } from "./types";
+
+/**
+ * IframeEmbed — A generic, responsive iframe component for embedding third-party content
+ * such as Brand Featured badges, widgets, or any external HTML page.
+ *
+ * Features:
+ * - **Auto-resize:** Listens for `postMessage` events with an `{ iframeHeight: number }` payload
+ *   from the embedded page and adjusts the iframe height dynamically.
+ * - **Background color:** Supports predefined background colors (`gray90`, `green`, `white`)
+ *   behind the iframe, defaulting to transparent.
+ * - **Lazy loading:** The iframe uses `loading="lazy"` for performance.
+ * - **Anchor support:** An optional `anchorId` is applied to the wrapping `<section>` for
+ *   deep-linking or scroll-to navigation.
+ *
+ * @example
+ * ```tsx
+ * <IframeEmbed
+ *   iframeUrl="https://api.brandfeatured.com/badges/badge-news_dark.html?id=123"
+ *   backgroundColor="green"
+ *   anchorId="brand-badge"
+ * />
+ * ```
+ */
+export const IframeEmbed: React.FC<IframeEmbedProps> = ({
+  iframeUrl,
+  anchorId,
+  backgroundColor,
+  height,
+}) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    if (!iframeUrl) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const height = event.data?.iframeHeight;
+      if (
+        typeof height === "number" &&
+        Number.isFinite(height) &&
+        height > 0 &&
+        height <= 10000 &&
+        iframeRef.current
+      ) {
+        iframeRef.current.style.height = `${height}px`;
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [iframeUrl]);
+
+  if (!iframeUrl) return null;
+
+  return (
+    <section id={anchorId} className="w-full">
+      <iframe
+        ref={iframeRef}
+        src={iframeUrl}
+        width="100%"
+        frameBorder="0"
+        scrolling="no"
+        style={{
+          background: backgroundColor
+            ? bgColorMap[backgroundColor]
+            : "transparent",
+          ...(height ? { height: `${height}px` } : {}),
+        }}
+        title="Iframe Embed"
+        loading="lazy"
+      />
+    </section>
+  );
+};
+
+export default IframeEmbed;

package/src/contentful/blocks/iframe-embed/types.ts

@@ -0,0 +1,18 @@
+export const bgColorMap = {
+  gray90: "#464646",
+  green: "#24A76A",
+  white: "#FFFFFF",
+} as const;
+
+export type BackgroundColor = keyof typeof bgColorMap;
+
+export type IframeEmbedProps = {
+  /** The full URL of the third-party iframe to embed (e.g., Brand Featured badge URL). */
+  iframeUrl: string;
+  /** Optional HTML `id` for the wrapping `<section>`, useful for anchor linking or scroll-to navigation. */
+  anchorId?: string;
+  /** Optional background color applied behind the iframe. Defaults to `"transparent"` when not provided. */
+  backgroundColor?: BackgroundColor;
+  /** Optional initial/minimum height (in px) for the iframe before postMessage auto-resize kicks in. */
+  height?: number;
+};

package/src/contentful/index.ts

@@ -89,6 +89,9 @@ export type { EmailInputBlockProps } from "./blocks/email-input-block/types";
 export { default as CartRetentionBanner } from "./blocks/cart-retention-banner";
 export type { TypeCartRetentionBannerFields as CartRetentionBannerProps } from "./blocks/cart-retention-banner/types";
 
+export { IframeEmbed } from "./blocks/iframe-embed";
+export type { IframeEmbedProps } from "./blocks/iframe-embed/types";
+
 // Contentful Rich Text Hooks & Utils
 export { toDocument } from "../utils/contentful/to-document";