@windstream/react-shared-components 0.2.73 → 0.2.74

package/package.json

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

package/src/components/rich-text-basic/index.tsx

@@ -87,7 +87,8 @@ export const RichTextBasic: FC<RichTextBasicProps> = props => {
       }
       className={cx(
         "last:[&_p]:mb-0",
-        "text-body1 leading-normal",
+        // mobile-first: body3/leading-6 below md, body1/leading-normal from md up
+        "text-body3 leading-6 md:text-body1 md:leading-normal",
         "[&_b]:font-bold [&_strong]:font-bold [&_i]:italic [&_em]:italic",
         className,
         !enableMaxWidth && "max-w-none"

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>;
       },
     },
   };