@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/hooks/contentful/use-contentful-rich-text.tsx

@@ -262,7 +262,7 @@ export function renderContentfulRichTextTable(
 
         return (
           <td
-            className={`rt-table-cell footnote break-words bg-white py-2 md:py-4 text-center align-top leading-5 text-text md:body2 first:text-left md:leading-7 ${
+            className={`rt-table-cell footnote break-words bg-white py-2 text-center align-top leading-5 text-text md:body2 first:text-left md:py-4 md:leading-7 ${
               isScrollable
                 ? "w-[50vw] min-w-[50vw] first:sticky first:left-0 first:z-10 first:w-[50vw] first:min-w-[50vw] first:border-r"
                 : "w-1/4 first:w-1/2"

package/src/hooks/contentful/use-processed-check-list.test.tsx

@@ -0,0 +1,277 @@
+import {
+  label1BoldOptions,
+  useProcessedChecklist,
+} from "./use-processed-check-list";
+
+import { MARKS } from "@contentful/rich-text-types";
+import { renderHook } from "@testing-library/react";
+
+// Mock renderContentfulRichText to return predictable output
+jest.mock("./use-contentful-rich-text", () => ({
+  renderContentfulRichText: jest.fn(
+    (doc: any, _target?: boolean, className?: string) => {
+      // Return a simple string representation based on the doc
+      if (!doc) return null;
+      // Extract text from the doc content if available
+      const text = doc?.content?.[0]?.content?.[0]?.value;
+      return text ? `rendered:${text}:${className ?? ""}` : null;
+    }
+  ),
+}));
+
+jest.mock("@shared/utils/contentful/to-document", () => ({
+  toDocument: jest.fn((v: any) => {
+    if (!v) return null;
+    if (typeof v === "string") {
+      return {
+        nodeType: "document",
+        data: {},
+        content: [
+          {
+            nodeType: "paragraph",
+            data: {},
+            content: [{ nodeType: "text", value: v, marks: [], data: {} }],
+          },
+        ],
+      };
+    }
+    return v;
+  }),
+}));
+
+const makeChecklistData = (items: any[]) => ({
+  list: {
+    items,
+  },
+});
+
+describe("useProcessedChecklist", () => {
+  describe("Full items mode (titlesOnly=false)", () => {
+    it("returns empty array when checklistData is undefined", () => {
+      const { result } = renderHook(() => useProcessedChecklist(undefined));
+      expect(result.current).toEqual([]);
+    });
+
+    it("returns empty array when checklistData has no list", () => {
+      const { result } = renderHook(() => useProcessedChecklist({}));
+      expect(result.current).toEqual([]);
+    });
+
+    it("returns empty array when list.items is empty", () => {
+      const data = makeChecklistData([]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current).toEqual([]);
+    });
+
+    it("returns ProcessedChecklistItem array with title, iconUrl, anchorId", () => {
+      const data = makeChecklistData([
+        {
+          checkListTitle: "Item 1",
+          icon: { url: "https://cdn.com/icon1.png" },
+          anchorId: "anchor-1",
+        },
+        {
+          checkListTitle: "Item 2",
+          icon: { url: "https://cdn.com/icon2.png" },
+          anchorId: "anchor-2",
+        },
+      ]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current).toHaveLength(2);
+      expect(result.current[0]).toEqual({
+        title: "rendered:Item 1:",
+        iconUrl: "https://cdn.com/icon1.png",
+        anchorId: "anchor-1",
+      });
+      expect(result.current[1]).toEqual({
+        title: "rendered:Item 2:",
+        iconUrl: "https://cdn.com/icon2.png",
+        anchorId: "anchor-2",
+      });
+    });
+
+    it("sets iconUrl to undefined when icon is missing", () => {
+      const data = makeChecklistData([
+        { checkListTitle: "No icon", icon: undefined },
+      ]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].iconUrl).toBeUndefined();
+    });
+
+    it("sets anchorId to undefined when anchorId is missing", () => {
+      const data = makeChecklistData([{ checkListTitle: "No anchor" }]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].anchorId).toBeUndefined();
+    });
+
+    it("uses empty string for title when checkListTitle is null", () => {
+      const data = makeChecklistData([{ checkListTitle: null }]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      // toDocument("") returns null, renderContentfulRichText returns null, falls back to ""
+      expect(result.current[0].title).toBe("");
+    });
+
+    it("handles item with undefined checkListTitle", () => {
+      const data = makeChecklistData([{}]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].title).toBe("");
+    });
+
+    it("handles null item in items array", () => {
+      const data = makeChecklistData([null]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].title).toBe("");
+      expect(result.current[0].iconUrl).toBeUndefined();
+      expect(result.current[0].anchorId).toBeUndefined();
+    });
+
+    it("handles undefined item in items array", () => {
+      const data = makeChecklistData([undefined]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].title).toBe("");
+    });
+
+    it("passes richTextClassName to renderContentfulRichText in full mode", () => {
+      const data = makeChecklistData([{ checkListTitle: "Styled" }]);
+      const { result } = renderHook(() =>
+        useProcessedChecklist(data, false, undefined, "full-class")
+      );
+      expect(result.current[0].title).toBe("rendered:Styled:full-class");
+    });
+
+    it("passes richTextOptions in full mode", () => {
+      const data = makeChecklistData([{ checkListTitle: "Opts" }]);
+      const customOpts = { renderMark: { [MARKS.BOLD]: (t: any) => t } };
+      const { result } = renderHook(() =>
+        useProcessedChecklist(data, false, customOpts, "opts-class")
+      );
+      expect(result.current[0].title).toBe("rendered:Opts:opts-class");
+    });
+
+    it("handles item with icon but no url", () => {
+      const data = makeChecklistData([{ checkListTitle: "No url", icon: {} }]);
+      const { result } = renderHook(() => useProcessedChecklist(data));
+      expect(result.current[0].iconUrl).toBeUndefined();
+    });
+  });
+
+  describe("Titles only mode (titlesOnly=true)", () => {
+    it("returns string array of rendered titles", () => {
+      const data = makeChecklistData([
+        { checkListTitle: "Title A" },
+        { checkListTitle: "Title B" },
+      ]);
+      const { result } = renderHook(() => useProcessedChecklist(data, true));
+      expect(result.current).toHaveLength(2);
+      expect(result.current[0]).toBe("rendered:Title A:");
+      expect(result.current[1]).toBe("rendered:Title B:");
+    });
+
+    it("returns empty string for null checkListTitle", () => {
+      const data = makeChecklistData([{ checkListTitle: null }]);
+      const { result } = renderHook(() => useProcessedChecklist(data, true));
+      expect(result.current[0]).toBe("");
+    });
+
+    it("returns empty array when no items", () => {
+      const { result } = renderHook(() =>
+        useProcessedChecklist(undefined, true)
+      );
+      expect(result.current).toEqual([]);
+    });
+
+    it("handles null item in items array in titlesOnly mode", () => {
+      const data = makeChecklistData([null]);
+      const { result } = renderHook(() => useProcessedChecklist(data, true));
+      expect(result.current[0]).toBe("");
+    });
+
+    it("handles undefined item in items array in titlesOnly mode", () => {
+      const data = makeChecklistData([undefined]);
+      const { result } = renderHook(() => useProcessedChecklist(data, true));
+      expect(result.current[0]).toBe("");
+    });
+
+    it("passes richTextOptions in titlesOnly mode", () => {
+      const data = makeChecklistData([{ checkListTitle: "Opt" }]);
+      const customOpts = { renderMark: {} };
+      const { result } = renderHook(() =>
+        useProcessedChecklist(data, true, customOpts, "title-class")
+      );
+      expect(result.current[0]).toBe("rendered:Opt:title-class");
+    });
+  });
+
+  describe("richTextOptions and richTextClassName", () => {
+    it("passes richTextClassName to renderContentfulRichText", () => {
+      const data = makeChecklistData([{ checkListTitle: "Styled" }]);
+      const { result } = renderHook(() =>
+        useProcessedChecklist(data, true, undefined, "custom-class")
+      );
+      expect(result.current[0]).toBe("rendered:Styled:custom-class");
+    });
+
+    it("passes richTextOptions through", () => {
+      const data = makeChecklistData([{ checkListTitle: "Options" }]);
+      const customOpts = { renderMark: {} };
+      const { result } = renderHook(() =>
+        useProcessedChecklist(data, false, customOpts)
+      );
+      // Should still produce results (richTextOptions is passed but our mock ignores it)
+      expect(result.current).toHaveLength(1);
+    });
+  });
+
+  describe("Memoization", () => {
+    it("returns same reference when inputs don't change", () => {
+      const data = makeChecklistData([{ checkListTitle: "Memo" }]);
+      const { result, rerender } = renderHook(
+        ({ d }) => useProcessedChecklist(d),
+        { initialProps: { d: data } }
+      );
+      const first = result.current;
+      rerender({ d: data });
+      expect(result.current).toBe(first);
+    });
+
+    it("recomputes when checklistData changes", () => {
+      const data1 = makeChecklistData([{ checkListTitle: "V1" }]);
+      const data2 = makeChecklistData([{ checkListTitle: "V2" }]);
+      const { result, rerender } = renderHook(
+        ({ d }) => useProcessedChecklist(d),
+        { initialProps: { d: data1 } }
+      );
+      const first = result.current;
+      rerender({ d: data2 });
+      expect(result.current).not.toBe(first);
+    });
+
+    it("recomputes when titlesOnly changes", () => {
+      const data = makeChecklistData([{ checkListTitle: "Toggle" }]);
+      const { result, rerender } = renderHook(
+        ({ t }) => useProcessedChecklist(data, t),
+        { initialProps: { t: false as boolean } }
+      );
+      const first = result.current;
+      rerender({ t: true });
+      expect(result.current).not.toBe(first);
+    });
+  });
+});
+
+describe("label1BoldOptions", () => {
+  it("exports BOLD mark renderer that wraps in span with label1 class", () => {
+    const renderer = label1BoldOptions.renderMark[MARKS.BOLD];
+    expect(renderer).toBeDefined();
+  });
+
+  it("renders bold text in a span with label1 className", () => {
+    const renderer = label1BoldOptions.renderMark[MARKS.BOLD];
+    const result = renderer("Bold text");
+    // createElement returns a React element with type 'span' and className 'label1'
+    expect(result).toBeDefined();
+    expect((result as any).type).toBe("span");
+    expect((result as any).props.className).toBe("label1");
+    expect((result as any).props.children).toBe("Bold text");
+  });
+});

package/src/hooks/use-body-scroll-lock.test.ts

@@ -0,0 +1,134 @@
+import useBodyScrollLock from "./use-body-scroll-lock";
+
+import { cleanup, renderHook } from "@testing-library/react";
+
+describe("useBodyScrollLock", () => {
+  beforeEach(() => {
+    cleanup();
+    document.body.style.overflow = "";
+    document.body.style.marginRight = "";
+  });
+
+  afterEach(() => {
+    cleanup();
+    document.body.style.overflow = "";
+    document.body.style.marginRight = "";
+  });
+
+  describe("Scroll locking (isOpen=true)", () => {
+    it("sets body overflow to hidden when isOpen is true", () => {
+      renderHook(() => useBodyScrollLock(true, false));
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+
+    it("sets marginRight based on scrollbar width when isOpen is true", () => {
+      renderHook(() => useBodyScrollLock(true, false));
+      const scrollbarWidth =
+        window.innerWidth - document.documentElement.clientWidth;
+      expect(document.body.style.marginRight).toBe(`${scrollbarWidth}px`);
+    });
+  });
+
+  describe("Scroll unlocking (isOpen=false)", () => {
+    it("resets overflow to unset when isOpen=false and hideScrollOnIsOpenFalse=true", () => {
+      renderHook(() => useBodyScrollLock(false, true));
+      expect(document.body.style.overflow).toBe("unset");
+    });
+
+    it("preserves existing overflow when isOpen=false and hideScrollOnIsOpenFalse=false", () => {
+      document.body.style.overflow = "auto";
+      renderHook(() => useBodyScrollLock(false, false));
+      expect(document.body.style.overflow).toBe("auto");
+    });
+
+    it("attempts to set marginRight to unset when isOpen is false", () => {
+      const calls: string[] = [];
+      const original = Object.getOwnPropertyDescriptor(
+        CSSStyleDeclaration.prototype,
+        "marginRight"
+      );
+      Object.defineProperty(document.body.style, "marginRight", {
+        set(val: string) {
+          calls.push(val);
+        },
+        get() {
+          return "";
+        },
+        configurable: true,
+      });
+      renderHook(() => useBodyScrollLock(false, false));
+      expect(calls).toContain("unset");
+      // Restore
+      if (original) {
+        Object.defineProperty(
+          CSSStyleDeclaration.prototype,
+          "marginRight",
+          original
+        );
+      }
+    });
+
+    it("attempts to set marginRight to unset for isOpen false regardless of hideScroll", () => {
+      const calls: string[] = [];
+      Object.defineProperty(document.body.style, "marginRight", {
+        set(val: string) {
+          calls.push(val);
+        },
+        get() {
+          return "";
+        },
+        configurable: true,
+      });
+      renderHook(() => useBodyScrollLock(false, true));
+      expect(calls).toContain("unset");
+    });
+  });
+
+  describe("Cleanup on unmount", () => {
+    it("resets body overflow to unset on unmount", () => {
+      const { unmount } = renderHook(() => useBodyScrollLock(true, false));
+      expect(document.body.style.overflow).toBe("hidden");
+      unmount();
+      expect(document.body.style.overflow).toBe("unset");
+    });
+
+    it("resets overflow on unmount even when isOpen was false", () => {
+      const { unmount } = renderHook(() => useBodyScrollLock(false, true));
+      unmount();
+      expect(document.body.style.overflow).toBe("unset");
+    });
+  });
+
+  describe("Dependency changes", () => {
+    it("locks scroll when isOpen changes from false to true", () => {
+      const { rerender } = renderHook(
+        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
+        { initialProps: { isOpen: false, hide: false } }
+      );
+      expect(document.body.style.overflow).not.toBe("hidden");
+      rerender({ isOpen: true, hide: false });
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+
+    it("unlocks scroll when isOpen changes from true to false with hideScroll=true", () => {
+      const { rerender } = renderHook(
+        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
+        { initialProps: { isOpen: true, hide: true } }
+      );
+      expect(document.body.style.overflow).toBe("hidden");
+      rerender({ isOpen: false, hide: true });
+      expect(document.body.style.overflow).toBe("unset");
+    });
+
+    it("runs cleanup then effect when dependencies change", () => {
+      const { rerender } = renderHook(
+        ({ isOpen, hide }) => useBodyScrollLock(isOpen, hide),
+        { initialProps: { isOpen: true, hide: false } }
+      );
+      expect(document.body.style.overflow).toBe("hidden");
+      // Change hideScrollOnIsOpenFalse - triggers cleanup + re-run
+      rerender({ isOpen: true, hide: true });
+      expect(document.body.style.overflow).toBe("hidden");
+    });
+  });
+});