@windstream/react-shared-components 0.2.69 → 0.2.70

package/package.json

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

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

@@ -0,0 +1,172 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { RichTextBasic } from "./index";
+
+const paragraphDoc = (text: string) => ({
+  nodeType: "document",
+  data: {},
+  content: [
+    {
+      nodeType: "paragraph",
+      data: {},
+      content: [{ nodeType: "text", value: text, marks: [], data: {} }],
+    },
+  ],
+});
+
+describe("RichTextBasic", () => {
+  it("renders paragraph text", () => {
+    render(<RichTextBasic {...paragraphDoc("Hello world")} />);
+    expect(screen.getByText("Hello world")).toBeInTheDocument();
+  });
+
+  it("renders a heading using the first child value", () => {
+    const doc = {
+      nodeType: "document",
+      data: {},
+      content: [
+        {
+          nodeType: "heading-1",
+          data: {},
+          content: [{ nodeType: "text", value: "Title", marks: [], data: {} }],
+        },
+      ],
+    };
+    render(<RichTextBasic {...doc} />);
+    const heading = screen.getByRole("heading", { level: 1 });
+    expect(heading).toHaveTextContent("Title");
+    expect(heading.className).toContain("heading1");
+  });
+
+  it("includes both the mobile-base and md: desktop heading classes", () => {
+    const doc = {
+      nodeType: "document",
+      data: {},
+      content: [
+        {
+          nodeType: "heading-1",
+          data: {},
+          content: [{ nodeType: "text", value: "Title", marks: [], data: {} }],
+        },
+      ],
+    };
+    render(<RichTextBasic {...doc} />);
+    const { className } = screen.getByRole("heading", { level: 1 });
+    expect(className).toContain("heading2");
+    expect(className).toContain("md:heading1");
+  });
+
+  it("renders bold marks", () => {
+    const doc = {
+      nodeType: "document",
+      data: {},
+      content: [
+        {
+          nodeType: "paragraph",
+          data: {},
+          content: [
+            { nodeType: "text", value: "Bold", marks: [{ type: "bold" }], data: {} },
+          ],
+        },
+      ],
+    };
+    render(<RichTextBasic {...doc} />);
+    expect(screen.getByText("Bold").tagName).toBe("STRONG");
+  });
+
+  it("renders hyperlinks", () => {
+    const doc = {
+      nodeType: "document",
+      data: {},
+      content: [
+        {
+          nodeType: "paragraph",
+          data: {},
+          content: [
+            {
+              nodeType: "hyperlink",
+              data: { uri: "https://example.com" },
+              content: [{ nodeType: "text", value: "Link", marks: [], data: {} }],
+            },
+          ],
+        },
+      ],
+    };
+    render(<RichTextBasic {...doc} isTargetBlank />);
+    const link = screen.getByRole("link", { name: "Link" });
+    expect(link).toHaveAttribute("href", "https://example.com");
+    expect(link).toHaveAttribute("target", "_blank");
+  });
+
+  it("renders inline [icon_name] tokens as MaterialIcon glyphs", () => {
+    render(<RichTextBasic {...paragraphDoc("look [star] here")} />);
+    const icon = screen.getByText("star");
+    expect(icon.className).toContain("material-symbols-rounded");
+    expect(screen.getByText(/look/)).toBeInTheDocument();
+    expect(screen.getByText(/here/)).toBeInTheDocument();
+  });
+
+  it("renders embedded callout entries", () => {
+    const doc = {
+      nodeType: "document",
+      data: {},
+      content: [
+        {
+          nodeType: "embedded-entry-block",
+          data: {
+            target: {
+              fields: { title: "Heads up", body: "Important info" },
+              sys: { contentType: { sys: { id: "callout" } } },
+            },
+          },
+          content: [],
+        },
+      ],
+    };
+    render(<RichTextBasic {...doc} />);
+    expect(screen.getByText("Heads up").tagName).toBe("STRONG");
+    expect(screen.getByText("Important info")).toBeInTheDocument();
+  });
+
+  it("renders table content via the table renderer when the document contains a table, regardless of tableLayout className", () => {
+    const doc = {
+      nodeType: "document",
+      data: {},
+      content: [
+        {
+          nodeType: "table",
+          data: {},
+          content: [
+            {
+              nodeType: "table-row",
+              data: {},
+              content: [
+                {
+                  nodeType: "table-header-cell",
+                  data: {},
+                  content: [
+                    {
+                      nodeType: "paragraph",
+                      data: {},
+                      content: [
+                        { nodeType: "text", value: "Head", marks: [], data: {} },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+    const { rerender } = render(<RichTextBasic {...doc} className="tableLayout" />);
+    expect(screen.getByRole("columnheader")).toHaveTextContent("Head");
+
+    rerender(<RichTextBasic {...doc} />);
+    expect(screen.getByRole("columnheader")).toHaveTextContent("Head");
+  });
+});

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

@@ -0,0 +1,102 @@
+import type { FC } from "react";
+
+import { BLOCKS } from "@contentful/rich-text-types";
+import {
+  renderContentfulRichText,
+  renderContentfulRichTextTable,
+} from "@shared/hooks/contentful/use-contentful-rich-text";
+import { cx } from "@shared/utils/cx";
+
+import type { RichTextBasicProps } from "./types";
+import { toDocument } from "@shared/utils";
+
+// Contentful can store one logical run of text as several adjacent "text"
+// nodes with identical (often empty) marks - an authoring artifact. Per-node
+// regexes (icon tokens like [shopping_cart], ${CITY}/${STATE}) only ever see
+// one node's content, so without merging, a token split across node
+// boundaries never matches and renders as literal bracket text.
+const mergeAdjacentTextNodes = (node: any): any => {
+  if (!node || !Array.isArray(node.content)) return node;
+  const mergedContent: any[] = [];
+  for (const child of node.content) {
+    const prev = mergedContent[mergedContent.length - 1];
+    if (
+      child?.nodeType === "text" &&
+      prev?.nodeType === "text" &&
+      JSON.stringify(prev.marks) === JSON.stringify(child.marks)
+    ) {
+      mergedContent[mergedContent.length - 1] = {
+        ...prev,
+        value: prev.value + child.value,
+      };
+    } else {
+      mergedContent.push(
+        child?.nodeType === "text" ? child : mergeAdjacentTextNodes(child)
+      );
+    }
+  }
+  return { ...node, content: mergedContent };
+};
+
+// Checks the actual rich text document (not just className) for a table block,
+// so content authored with a table still renders through the table renderer.
+const containsTable = (node: any): boolean => {
+  if (!node) return false;
+  if (node.nodeType === BLOCKS.TABLE) return true;
+  if (Array.isArray(node.content)) {
+    return node.content.some((child: any) => containsTable(child));
+  }
+  return false;
+};
+
+export const RichTextBasic: FC<RichTextBasicProps> = props => {
+  const {
+    options,
+    textProps,
+    isTargetBlank,
+    className,
+    linkClassName,
+    headerColor = "grey",
+    enableMaxWidth,
+    headingClass,
+    "data-testid": dataTestId,
+  } = props;
+
+  const document = mergeAdjacentTextNodes(toDocument(props));
+  const isTable = className?.includes("tableLayout") || containsTable(document);
+
+  const content = isTable
+    ? renderContentfulRichTextTable(document, props.links)
+    : renderContentfulRichText(
+        document,
+        isTargetBlank,
+        className,
+        linkClassName,
+        undefined,
+        props.links
+      );
+
+  return (
+    <div
+      style={
+        {
+          ...textProps?.style,
+          ["--tw-prose-bullets" as string]: "white",
+          ["--tw-prose-counters" as string]: "white",
+        } as React.CSSProperties
+      }
+      className={cx(
+        "last:[&_p]:mb-0",
+        "text-body1 leading-normal",
+        "[&_b]:font-bold [&_strong]:font-bold [&_i]:italic [&_em]:italic",
+        className,
+        !enableMaxWidth && "max-w-none"
+      )}
+      data-testid={dataTestId}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default RichTextBasic;

package/src/components/rich-text-basic/types.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+
+import type { Node as RichTextNode } from "@contentful/rich-text-types";
+
+export type RichTextBasicTextProps = {
+  variant?: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export type RichTextBasicOptions = {
+  isTargetBlank?: boolean;
+  textProps?: RichTextBasicTextProps;
+  listItem?: (node: RichTextNode, children: ReactNode) => ReactNode;
+  props?: any;
+  headingClass?: string;
+};
+
+export type RichTextBasicProps = {
+  /** Contentful rich text document fields (nodeType/content/data), spread directly. */
+  [key: string]: any;
+  textProps?: RichTextBasicTextProps;
+  className?: string;
+  linkClassName?: string;
+  isTargetBlank?: boolean;
+  headingClass?: string;
+  options?: Omit<
+    RichTextBasicOptions,
+    "isTargetBlank" | "textProps" | "headingClass"
+  >;
+  "data-testid"?: string;
+  headerColor?: string;
+  enableMaxWidth?: boolean;
+};

package/src/components/video-link/index.tsx

@@ -55,7 +55,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
       <div
         className={cx(
           !useOriginalImageAspectRatio
-            ? "relative aspect-[16/9] w-full overflow-hidden rounded-image lg:h-[486px] xl:aspect-square xl:max-h-[486px] xl:w-[486px]"
+            ? "relative mx-auto aspect-[16/9] w-full overflow-hidden rounded-image lg:h-[486px] xl:aspect-square xl:max-h-[486px] xl:w-[486px]"
             : "overflow-hidden rounded-image"
         )}
       >
@@ -181,7 +181,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
     <>
       <div
         className={cx(
-          "video-section relative w-full cursor-pointer rounded-image transition-all duration-300 lg:w-[486px]",
+          "video-section relative mx-auto w-full cursor-pointer rounded-image transition-all duration-300 lg:w-[486px]",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
           !isPlaying && "hover:ring-2 hover:ring-border-focus"
         )}

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

@@ -13,6 +13,7 @@ import {
 import { Checklist } from "@shared/components/checklist";
 import { Link } from "@shared/components/link";
 import { MaterialIcon } from "@shared/components/material-icon";
+import type { IconName } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 import { VideoLink } from "@shared/components/video-link";
 import type { VideoLinkProps } from "@shared/components/video-link";
@@ -53,7 +54,10 @@ const toVideoLinkProps = (fields: any): VideoLinkProps => ({
     fields?.image?.fields?.file?.url ??
     fields?.image?.url ??
     fields?.image,
-  link: fields?.link,
+  link:
+    typeof fields?.link === "string"
+      ? fields.link
+      : (fields?.link?.fields?.href ?? fields?.link?.href),
   videoPopup: Boolean(fields?.videoPopup),
   videoSourceType: fields?.videoSourceType,
   videoAssetUrl:
@@ -125,7 +129,40 @@ const isExternalUrl = (url: string): boolean => {
   }
 };
 
+// Renders "[icon_name]" tokens (e.g. "look [star] here") as MaterialIcon glyphs.
+const renderInlineIcons = (text: string): ReactNode[] => {
+  const iconPattern = /\[([a-zA-Z0-9_-]+)\]/g;
+  const parts: ReactNode[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = iconPattern.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.substring(lastIndex, match.index));
+    }
+    parts.push(
+      <MaterialIcon
+        key={`icon-${match.index}-${match[1]}`}
+        name={match[1] as IconName}
+        size={20}
+        className="inline-block align-middle"
+      />
+    );
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < text.length) {
+    parts.push(text.substring(lastIndex));
+  }
+
+  return parts.length > 0 ? parts : [text];
+};
+
 const getDefaultOptions = (links?: any): Options => ({
+  renderText: children =>
+    children.includes("[") && children.includes("]")
+      ? renderInlineIcons(children)
+      : children,
   renderMark: {
     [MARKS.BOLD]: text => <strong className="font-black">{text}</strong>,
     [MARKS.ITALIC]: text => <em>{text}</em>,
@@ -467,4 +504,4 @@ export function renderContentfulRichTextTable(
   };
 
   return documentToReactComponents(doc, options);
-}
+}

package/src/index.ts

@@ -94,6 +94,13 @@ export type { SkeletonProps } from "./components/skeleton";
 export { Tooltip } from "./components/tooltip";
 export type { ToolTipProps } from "./components/tooltip";
 
+export { RichTextBasic } from "./components/rich-text-basic";
+export type {
+  RichTextBasicProps,
+  RichTextBasicOptions,
+  RichTextBasicTextProps,
+} from "./components/rich-text-basic/types";
+
 export {
   FiberForm,
   fiberFormAddressCollectionFormSchema,