@windstream/react-shared-components 0.2.73 → 0.2.75

package/src/contentful/blocks/ordered-list/index.test.tsx

@@ -0,0 +1,163 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { OrderedList } from "./index";
+
+import { render, screen, within } from "@testing-library/react";
+
+jest.mock("@shared/components/link", () => ({
+  Link: ({ children, href, title, className }: any) => (
+    <a href={href} title={title} className={className} data-testid="ol-link">
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, as: Tag = "span", className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/dynamic-tabs", () => ({
+  DynamicTabs: ({
+    tabs,
+    dynamic,
+    isOrderedList,
+    navigationType,
+    mobileSidebarTabType,
+  }: any) => (
+    <div
+      data-testid="dynamic-tabs"
+      data-dynamic={String(dynamic)}
+      data-ordered={String(isOrderedList)}
+      data-nav={String(navigationType)}
+      data-sidebar={String(mobileSidebarTabType)}
+    >
+      {tabs.items.map((tab: any) => (
+        <div
+          key={tab.anchorId}
+          data-testid="dt-tab"
+          data-tabname={tab.tabName}
+          data-anchor={tab.anchorId}
+        >
+          {tab.tabContent}
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+describe("OrderedList", () => {
+  const tabs = [
+    {
+      items: {
+        tabName: "States",
+        tabContent: [
+          { itemName: "new york", itemSlug: "/new-york" },
+          { itemName: "los angeles" },
+        ],
+      },
+    },
+    {
+      items: {
+        tabName: "Cities",
+        tabContent: [{ itemName: "san FRANCISCO", itemSlug: "/sf" }],
+      },
+    },
+  ];
+
+  const renderComponent = (overrides: Partial<any> = {}) =>
+    render(
+      <OrderedList
+        title="Browse locations"
+        description="Find availability near you"
+        tabs={tabs}
+        {...overrides}
+      />
+    );
+
+  it("renders the title and description", () => {
+    renderComponent();
+    expect(screen.getByText("Browse locations")).toBeInTheDocument();
+    expect(screen.getByText("Find availability near you")).toBeInTheDocument();
+  });
+
+  it("renders the section with the provided anchor id and testid", () => {
+    const { container } = renderComponent({ anchorId: "locations" });
+    const section = container.querySelector(
+      '[data-testid="non-fiber-city-list"]'
+    );
+    expect(section).toBeInTheDocument();
+    expect(section).toHaveAttribute("id", "locations");
+  });
+
+  it("defaults the background to white", () => {
+    const { container } = renderComponent();
+    expect(container.querySelector(".bg-secondary-white")).toBeInTheDocument();
+  });
+
+  it("applies the cream background when requested", () => {
+    const { container } = renderComponent({ backgroundColor: "cream" });
+    expect(container.querySelector(".bg-secondary-cream")).toBeInTheDocument();
+    expect(
+      container.querySelector(".bg-secondary-white")
+    ).not.toBeInTheDocument();
+  });
+
+  it("forwards the expected flags to DynamicTabs", () => {
+    renderComponent();
+    const dynamicTabs = screen.getByTestId("dynamic-tabs");
+    expect(dynamicTabs).toHaveAttribute("data-dynamic", "true");
+    expect(dynamicTabs).toHaveAttribute("data-ordered", "true");
+    expect(dynamicTabs).toHaveAttribute("data-nav", "false");
+    expect(dynamicTabs).toHaveAttribute("data-sidebar", "false");
+  });
+
+  it("maps each tab with its name and a generated anchor id", () => {
+    renderComponent();
+    const dtTabs = screen.getAllByTestId("dt-tab");
+    expect(dtTabs).toHaveLength(2);
+    expect(dtTabs[0]).toHaveAttribute("data-tabname", "States");
+    expect(dtTabs[0]).toHaveAttribute("data-anchor", "tab-0");
+    expect(dtTabs[1]).toHaveAttribute("data-tabname", "Cities");
+    expect(dtTabs[1]).toHaveAttribute("data-anchor", "tab-1");
+  });
+
+  it("title-cases item names regardless of input casing", () => {
+    renderComponent();
+    // "new york" -> "New York", "los angeles" -> "Los Angeles",
+    // "san FRANCISCO" -> "San Francisco"
+    expect(screen.getByText("New York")).toBeInTheDocument();
+    expect(screen.getByText("Los Angeles")).toBeInTheDocument();
+    expect(screen.getByText("San Francisco")).toBeInTheDocument();
+  });
+
+  it("renders a linked item with an uppercased title and href", () => {
+    renderComponent();
+    const link = screen.getByText("New York").closest("a");
+    expect(link).not.toBeNull();
+    expect(link).toHaveAttribute("href", "/new-york");
+    expect(link).toHaveAttribute("title", "NEW YORK");
+  });
+
+  it("renders an item without a slug as plain text (no link)", () => {
+    renderComponent();
+    const losAngeles = screen.getByText("Los Angeles");
+    expect(losAngeles.closest("a")).toBeNull();
+  });
+
+  it("keeps each tab's items within that tab", () => {
+    renderComponent();
+    const dtTabs = screen.getAllByTestId("dt-tab");
+    expect(within(dtTabs[0]).getByText("New York")).toBeInTheDocument();
+    expect(within(dtTabs[0]).getByText("Los Angeles")).toBeInTheDocument();
+    expect(within(dtTabs[1]).getByText("San Francisco")).toBeInTheDocument();
+    expect(within(dtTabs[1]).queryByText("New York")).toBeNull();
+  });
+
+  it("does not render DynamicTabs when there are no tabs", () => {
+    renderComponent({ tabs: [] });
+    expect(screen.queryByTestId("dynamic-tabs")).toBeNull();
+  });
+});

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

@@ -184,6 +184,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 const checklistEl = (
                   <Checklist
                     iconSize={24}
+                    iconPosition="top"
                     listItemClassName={`body2 text-left ${textColorClass}`}
                     items={checklist.map(item =>
                       item.iconUrl

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

@@ -1120,6 +1120,61 @@ describe("renderContentfulRichTextTable", () => {
     expect(container).toHaveTextContent("Other Title");
   });
 
+  it("renders componentVideoLink inline entry (REST shape, no links prop)", () => {
+    // Regression test: a doc containing both a table and an inline
+    // componentVideoLink entry previously rendered nothing for the video,
+    // since this function's INLINES.EMBEDDED_ENTRY override only resolved
+    // entries via the GraphQL `links` lookup.
+    const doc = makeDoc({
+      nodeType: BLOCKS.PARAGRAPH,
+      data: {},
+      content: [
+        makeInlineEntry("componentVideoLink", {
+          link: "https://youtube.com/watch?v=123",
+        }),
+      ],
+    });
+    const { container } = render(<>{renderContentfulRichTextTable(doc)}</>);
+    const el = container.querySelector('[data-testid="video-link"]')!;
+    expect(el).toBeInTheDocument();
+    const videoLink = JSON.parse(el.getAttribute("data-video-link")!);
+    expect(videoLink).toMatchObject({
+      link: "https://youtube.com/watch?v=123",
+    });
+  });
+
+  it("renders ComponentVideoLink (GraphQL __typename) inline entry resolved from links in table path", () => {
+    const entryId = "video-inline-1";
+    const doc = makeDoc({
+      nodeType: BLOCKS.PARAGRAPH,
+      data: {},
+      content: [
+        {
+          nodeType: INLINES.EMBEDDED_ENTRY,
+          data: { target: { sys: { id: entryId } } },
+          content: [],
+        },
+      ],
+    });
+    const links = {
+      entries: {
+        inline: [
+          {
+            sys: { id: entryId },
+            __typename: "ComponentVideoLink",
+            link: "https://youtube.com/watch?v=456",
+          },
+        ],
+      },
+    };
+    const { container } = render(
+      <>{renderContentfulRichTextTable(doc, links)}</>
+    );
+    expect(
+      container.querySelector('[data-testid="video-link"]')
+    ).toBeInTheDocument();
+  });
+
   it("returns null for inline entry not found in links", () => {
     const doc = makeDoc({
       nodeType: BLOCKS.PARAGRAPH,

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

@@ -471,18 +471,21 @@ export function renderContentfulRichTextTable(
         );
       },
       [INLINES.EMBEDDED_ENTRY]: node => {
-        const entryId = node.data.target.sys.id;
-
-        const entry = links?.entries?.inline?.find(
-          (e: any) => e.sys.id === entryId
-        );
+        // resolveEmbeddedEntry/getEntryTypeId/getEntryFields handle both REST
+        // (already-resolved target) and GraphQL (`links` lookup) shapes - a
+        // plain `links?.entries?.inline` lookup here always returns undefined
+        // for REST responses (no `links` prop passed), silently dropping any
+        // inline embedded entry (e.g. componentVideoLink) in a doc with a table.
+        const entry = resolveEmbeddedEntry(node, links);
         if (!entry) return null;
+        const ctid = getEntryTypeId(entry);
+        const fields = getEntryFields(entry);
 
-        if (entry.__typename === "ComponentCheckList") {
+        if (ctid === "componentCheckList" || ctid === "ComponentCheckList") {
           // FIX: Don't use a Hook here.
           // Map the items manually or use a non-hook helper function.
           const items =
-            entry.list?.items?.map((item: any) =>
+            (fields.list?.items ?? entry.list?.items)?.map((item: any) =>
               renderContentfulRichText(
                 toDocument(item?.checkListTitle ?? ""),
                 true,
@@ -498,7 +501,11 @@ export function renderContentfulRichTextTable(
           );
         }
 
-        return <span>{entry.title || ""}</span>;
+        if (ctid === "componentVideoLink" || ctid === "ComponentVideoLink") {
+          return <VideoLink videoLink={toVideoLinkProps(fields)} />;
+        }
+
+        return <span>{fields?.title ?? entry.title ?? ""}</span>;
       },
     },
   };