@windstream/react-shared-components 0.2.10 → 0.2.12

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";