@windstream/react-shared-components 0.2.69 → 0.2.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.69",
+  "version": "0.2.71",
   "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/contentful/blocks/primary-hero/index.tsx

@@ -34,6 +34,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
     logoLockup,
     heroVideo,
     heroVideoMobile,
+    fieldProps,
   } = props;
 
   const isButtonType = (cta: any) => {
@@ -74,6 +75,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
         height={208}
         quality={90}
         loading="eager"
+        {...fieldProps?.badgeImage}
       />
     ) : null;
   return (
@@ -88,6 +90,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
           aria-label={heroVideo?.title || title || "Hero background video"}
           className="absolute inset-0 z-0 hidden h-full w-full object-fill xl:block"
           data-testid="hero-background-video-desktop"
+          {...fieldProps?.heroVideo}
         >
           <source src={desktopVideoUrl} type="video/mp4" />
         </video>
@@ -108,12 +111,13 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               <Text
                 as={showAsHeading ? "h1" : "h2"}
                 className="heading2 lg:heading1"
+                {...fieldProps?.title}
               >
                 {title}
               </Text>
             )}
             {subTitle && (
-              <Text as="p" className="subheading3">
+              <Text as="p" className="subheading3" {...fieldProps?.subTitle}>
                 {subTitle}
               </Text>
             )}
@@ -121,7 +125,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {/* price callout */}
             {price ? (
               <div className="flex sm:justify-center sm:text-left lg:justify-start">
-                <div className="mr-2 mt-0.5">
+                <div className="mr-2 mt-0.5" {...fieldProps?.priceCallout}>
                   {priceCallout
                     ? priceCallout.split("|").map((line, index) => (
                         <Text key={index} as="p" className="body2">
@@ -134,11 +138,15 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   <Text as="p" className="subheading1 mt-0.5">
                     $
                   </Text>
-                  <Text as="p" className="subheading5">
+                  <Text as="p" className="subheading5" {...fieldProps?.price}>
                     {price}
                   </Text>
                   {priceSuffix ? (
-                    <Text as="p" className="subheading1 mt-0.5">
+                    <Text
+                      as="p"
+                      className="subheading1 mt-0.5"
+                      {...fieldProps?.priceSuffix}
+                    >
                       {priceSuffix}
                     </Text>
                   ) : null}
@@ -153,6 +161,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   "subheading1",
                   "text-left sm:text-center xl:text-left"
                 )}
+                {...fieldProps?.pricingDescription}
               >
                 {pricingDescription}
               </Text>
@@ -163,26 +172,38 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                 data-cy="hero-pricing-disclaimer"
                 as="p"
                 className={cx("body3", "text-left sm:text-center xl:text-left")}
+                {...fieldProps?.pricingDescriptionDisclaimer}
               >
                 {pricingDescriptionDisclaimer}
               </Text>
             ) : null}
 
             {/* checklist */}
-            {checklist && (
-              <Checklist
-                iconSize={24}
-                listItemClassName={`body2 text-left ${textColorClass}`}
-                items={checklist.map(item =>
-                  item.iconUrl
-                    ? { title: item.title, iconUrl: item.iconUrl }
-                    : item.title
-                )}
-              />
-            )}
+            {checklist &&
+              (() => {
+                const checklistEl = (
+                  <Checklist
+                    iconSize={24}
+                    listItemClassName={`body2 text-left ${textColorClass}`}
+                    items={checklist.map(item =>
+                      item.iconUrl
+                        ? { title: item.title, iconUrl: item.iconUrl }
+                        : item.title
+                    )}
+                  />
+                );
+                return fieldProps?.checklist ? (
+                  <div {...fieldProps.checklist}>{checklistEl}</div>
+                ) : (
+                  checklistEl
+                );
+              })()}
 
             {logoLockup ? (
-              <div className="text-left sm:text-center xl:mb-0 xl:text-left">
+              <div
+                className="text-left sm:text-center xl:mb-0 xl:text-left"
+                {...fieldProps?.logoLockup}
+              >
                 <NextImage
                   src={logoLockup}
                   alt={"Logo Lockup"}
@@ -256,7 +277,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   {secondaryCtaPrefix &&
                     secondaryCta?.preDefinedFunctionExecution !==
                       "check availability" && (
-                      <Text as="span" className="body2 mr-1">
+                      <Text
+                        as="span"
+                        className="body2 mr-1"
+                        {...fieldProps?.secondaryCtaPrefix}
+                      >
                         {secondaryCtaPrefix}
                       </Text>
                     )}
@@ -300,6 +325,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                   aria-label={heroVideoMobile?.title || title || "Hero video"}
                   className="h-[350px] w-full rounded-[40px] object-cover object-center sm:h-[420px] md:h-[520px]"
                   data-testid="hero-video-mobile"
+                  {...fieldProps?.heroVideo}
                 >
                   <source src={mobileVideoUrl} type="video/mp4" />
                 </video>
@@ -320,6 +346,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                     height={104}
                     quality={90}
                     loading="eager"
+                    {...fieldProps?.badgeImage}
                   />
                 ) : null}
                 {heroImageUrl ? (
@@ -336,6 +363,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                     sizes="100vw"
                     quality={90}
                     loading="eager"
+                    {...fieldProps?.heroImage}
                   />
                 ) : null}
               </>
@@ -348,7 +376,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             >
               {secondaryCtaPrefix &&
                 !secondaryCta?.preDefinedFunctionExecution && (
-                  <Text as="span" className="body2 mr-1">
+                  <Text
+                    as="span"
+                    className="body2 mr-1"
+                    {...fieldProps?.secondaryCtaPrefix}
+                  >
                     {secondaryCtaPrefix}
                   </Text>
                 )}
@@ -396,6 +428,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
               height={584}
               quality={90}
               loading="eager"
+              {...fieldProps?.heroImage}
             />
           ) : null}
         </div>

package/src/contentful/blocks/primary-hero/types.ts

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { CheckPlansProps } from "@shared/types/micro-components";
+import type { FieldProps } from "@shared/types/field-props";
 
 export type PrimaryHeroVideo = {
   url?: string;
@@ -42,4 +43,20 @@ export type PrimaryHeroProps = {
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   onModalButtonClick?: (id?: string) => void;
   onImageClick?: () => void;
+  /** Extra DOM attribute props, spread onto the respective rendered elements. */
+  fieldProps?: FieldProps<
+    | "title"
+    | "subTitle"
+    | "price"
+    | "priceSuffix"
+    | "priceCallout"
+    | "pricingDescription"
+    | "pricingDescriptionDisclaimer"
+    | "secondaryCtaPrefix"
+    | "checklist"
+    | "logoLockup"
+    | "badgeImage"
+    | "heroImage"
+    | "heroVideo"
+  >;
 };

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,

package/src/types/field-props.ts

@@ -0,0 +1,9 @@
+/**
+ * Generic extension point letting a consumer attach extra DOM attributes
+ * (e.g. for visual-editor tagging, analytics, testing) to specific named
+ * regions of a component, without this library knowing what those
+ * attributes mean or where they come from.
+ */
+export type FieldProps<TSlot extends string> = Partial<
+  Record<TSlot, Record<string, unknown>>
+>;