@windstream/react-shared-components 0.2.68 → 0.2.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.68",
+  "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/select-plan-button/index.test.tsx

@@ -43,6 +43,33 @@ describe("SelectPlanButton", () => {
     expect(screen.getByText("expand_circle_right")).toBeInTheDocument();
   });
 
+  it("keeps the icon visible at all breakpoints by default (one-column)", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    const icon = screen.getByText("expand_circle_right");
+    expect(icon.className.split(/\s+/)).not.toContain("hidden");
+  });
+
+  it("hides the icon below md in the two-column layout", () => {
+    render(<SelectPlanButton {...defaultProps} twoColumn={true} />);
+    const icon = screen.getByText("expand_circle_right");
+    expect(icon.className.split(/\s+/)).toContain("hidden");
+    expect(icon.className.split(/\s+/)).toContain("md:inline-block");
+  });
+
+  it("centers content below md and spreads at md+ in the two-column layout", () => {
+    render(<SelectPlanButton {...defaultProps} twoColumn={true} />);
+    const button = screen.getByRole("button");
+    expect(button.className.split(/\s+/)).toContain("justify-center");
+    expect(button.className.split(/\s+/)).toContain("md:justify-between");
+  });
+
+  it("spreads content with justify-between in the one-column layout", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    const button = screen.getByRole("button");
+    expect(button.className.split(/\s+/)).toContain("justify-between");
+    expect(button.className.split(/\s+/)).not.toContain("md:justify-between");
+  });
+
   it("applies icon className for unselected state", () => {
     render(
       <SelectPlanButton

package/src/components/select-plan-button/index.tsx

@@ -40,7 +40,11 @@ export const SelectPlanButton: React.FC<SelectPlanButtonProps> = ({
     <>
       <Button
         onClick={handleSelect}
-        className={cx(className, "w-full justify-between px-3 md:px-5")}
+        className={cx(
+          className,
+          "w-full px-3 md:px-5",
+          twoColumn ? "justify-center md:justify-between" : "justify-between"
+        )}
         data-track-element-name="speed_plan_select_button"
         data-track-click-text={`Select plan speed ${speed}`}
         data-track-element-clicked="speed_plan_card"
@@ -52,6 +56,7 @@ export const SelectPlanButton: React.FC<SelectPlanButtonProps> = ({
           className={cx(
             iconClassName,
             "!text-[24px] md:!text-[40px]",
+            twoColumn && "hidden md:inline-block",
             isSelected ? "text-icon" : "text-icon-inverse"
           )}
           name="expand_circle_right"

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/cards/product-card/index.test.tsx

@@ -241,6 +241,19 @@ describe("ProductCard", () => {
       render(<ProductCard {...defaultProps} />);
       expect(screen.queryByText("Free router")).not.toBeInTheDocument();
     });
+
+    it("renders the piped dollar value with the heavier label3 weight", () => {
+      const giftBadge = [
+        { title: "|$100| prepaid Mastercard®", icon: "/card.png" },
+      ] as any;
+      render(<ProductCard {...defaultProps} giftBadge={giftBadge} />);
+      const dollar = screen.getByText("$100");
+      expect(dollar).toHaveClass("label3");
+      // The surrounding text keeps the parent body3 weight (not label3).
+      expect(
+        screen.getByText(/prepaid Mastercard®/)
+      ).not.toHaveClass("label3");
+    });
   });
 
   describe("Inner Badge", () => {
@@ -257,6 +270,29 @@ describe("ProductCard", () => {
       expect(screen.getByText("Normal")).toBeInTheDocument();
     });
 
+    it("renders pipe-separated inner badge parts spaced via the gap-1 container", () => {
+      const innerBadge = {
+        badgeText: "2-year|price guarantee",
+        badgeIcon: "/icon.png",
+      };
+      render(
+        <ProductCard
+          {...defaultProps}
+          isExpanded={true}
+          innerBadge={innerBadge}
+        />
+      );
+      const first = screen.getByText("2-year");
+      const second = screen.getByText("price guarantee");
+      expect(first).toBeInTheDocument();
+      expect(second).toBeInTheDocument();
+      // Spacing between parts comes from the parent flex `gap-1` (matches
+      // residential), not an inline space character.
+      expect(first.parentElement?.className).toContain("gap-1");
+      expect(first).toHaveClass("label3");
+      expect(second).toHaveClass("body3");
+    });
+
     it("renders inner badge without pipe as bold", () => {
       const innerBadge = { badgeText: "Simple Badge", badgeIcon: "/icon.png" };
       render(

package/src/contentful/blocks/cards/product-card/index.tsx

@@ -11,12 +11,17 @@ import { SelectPlanButton } from "@shared/components/select-plan-button";
 import { Text } from "@shared/components/text";
 import { cx } from "@shared/utils";
 
-/** Renders text where `|...|`-wrapped segments are bold (pipes are stripped). */
+/**
+ * Renders text where `|...|`-wrapped segments (e.g. the dollar value in a gift
+ * badge) use the heavier `label3` weight (900), while the surrounding text keeps
+ * the parent `body3` weight (500) — matching residential's gift-reward styling.
+ * Pipes are stripped.
+ */
 const renderPipeBold = (value: React.ReactNode): React.ReactNode => {
   if (typeof value !== "string" || !value.includes("|")) return value;
   return value.split("|").map((segment, index) =>
     index % 2 === 1 ? (
-      <span key={index} className="font-bold">
+      <span key={index} className="label3">
         {segment}
       </span>
     ) : (
@@ -72,7 +77,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   const priceIntegerClass = twoColumn
     ? "heading2 md:subheading5"
     : "subheading5";
-  const priceUnitClass = twoColumn ? "label3" : "label1";
+  const priceUnitClass = twoColumn ? "label3 md:label1" : "label1";
 
   return (
     <article className="relative flex h-full w-full max-w-[392px] flex-col">
@@ -304,27 +309,21 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                       height={24}
                       className="ml-1 h-auto pr-2"
                     />
-                    <span
-                      className={cx(
-                        "body3",
-                        isDark ? "text-text-inverse" : "text-text"
-                      )}
-                    >
-                      {innerBadge.badgeText.includes("|") ? (
-                        <>
-                          <span className="font-bold">
-                            {innerBadge.badgeText.split("|")[0]}
-                          </span>
-                          <span className="font-normal">
-                            {innerBadge.badgeText.split("|")[1]}
-                          </span>
-                        </>
-                      ) : (
-                        <Text className="font-bold">
-                          {innerBadge.badgeText}
-                        </Text>
-                      )}
-                    </span>
+                    {(innerBadge.badgeText.includes("|")
+                      ? innerBadge.badgeText.split("|")
+                      : [innerBadge.badgeText]
+                    ).map((badge, index) => (
+                      <Text
+                        key={index}
+                        as="span"
+                        className={cx(
+                          index === 0 ? "label3" : "body3",
+                          isDark ? "text-text-inverse" : "text-text"
+                        )}
+                      >
+                        {badge.trim()}
+                      </Text>
+                    ))}
                   </div>
                 ) : null}
               </div>

package/src/contentful/blocks/carousel/index.tsx

@@ -75,7 +75,7 @@ export const Carousel: React.FC<CarouselProps> = ({
       {disclaimerText && (
         <Text
           as="div"
-          className="footnote mt-8 px-4 text-center text-text-secondary"
+          className="body3 mt-8 px-4 text-center text-text-secondary"
         >
           {disclaimerText}
         </Text>

package/src/contentful/blocks/dynamic-form/field-map.tsx

@@ -308,7 +308,7 @@ const RadioButtonInputField: React.FC<FieldRenderProps> = args => {
             hasError={hasError}
             onChange={handleInputChange}
             required={requiredField}
-            labelClassName="footnote"
+            labelClassName="footnote text-left"
           />
         </div>
       ))}

package/src/contentful/blocks/dynamic-form/index.test.tsx

@@ -119,6 +119,102 @@ describe("DynamicForm", () => {
   const submit = () =>
     fireEvent.click(screen.getByRole("button", { name: /submit form/i }));
 
+  describe("non-prod email rerouting", () => {
+    const fillAndSubmit = () => {
+      fireEvent.change(screen.getByLabelText("First Name"), {
+        target: { value: "Jane", name: "firstName" },
+      });
+      fireEvent.click(screen.getByRole("checkbox"));
+      fireEvent.click(screen.getByRole("button", { name: /submit form/i }));
+    };
+
+    it("reroutes email to multiple comma-separated test recipients when isProduction is false", async () => {
+      const onEmailSubmit = jest.fn().mockResolvedValue(undefined);
+      render(
+        <DynamicForm
+          fields={fields}
+          formSubmitOptions={["email"]}
+          emailTemplateName="welcome"
+          toEmail="real@customer.com"
+          testEmail=" a@test.com , b@test.com "
+          isProduction={false}
+          onEmailSubmit={onEmailSubmit}
+          successMessage={<div>Done</div>}
+        />
+      );
+
+      fillAndSubmit();
+
+      await waitFor(() => expect(onEmailSubmit).toHaveBeenCalledTimes(1));
+      const body = onEmailSubmit.mock.calls[0][0];
+      expect(body.toEmail).toBe("a@test.com,b@test.com");
+    });
+
+    it("skips the email action when isProduction is false and testEmail is empty", async () => {
+      const onEmailSubmit = jest.fn().mockResolvedValue(undefined);
+      render(
+        <DynamicForm
+          fields={fields}
+          formSubmitOptions={["email"]}
+          emailTemplateName="welcome"
+          toEmail="real@customer.com"
+          testEmail=""
+          isProduction={false}
+          onEmailSubmit={onEmailSubmit}
+          successMessage={<div>Done</div>}
+        />
+      );
+
+      fillAndSubmit();
+
+      await waitFor(() => expect(screen.getByText("Done")).toBeInTheDocument());
+      expect(onEmailSubmit).not.toHaveBeenCalled();
+    });
+
+    it("does not reroute when isProduction is not set (preserves prior behavior)", async () => {
+      const onEmailSubmit = jest.fn().mockResolvedValue(undefined);
+      render(
+        <DynamicForm
+          fields={fields}
+          formSubmitOptions={["email"]}
+          emailTemplateName="welcome"
+          toEmail="real@customer.com"
+          testEmail="test@test.com"
+          onEmailSubmit={onEmailSubmit}
+          successMessage={<div>Done</div>}
+        />
+      );
+
+      fillAndSubmit();
+
+      await waitFor(() => expect(onEmailSubmit).toHaveBeenCalledTimes(1));
+      const body = onEmailSubmit.mock.calls[0][0];
+      expect(body.toEmail).toBe("real@customer.com");
+    });
+
+    it("does not reroute when isProduction is true", async () => {
+      const onEmailSubmit = jest.fn().mockResolvedValue(undefined);
+      render(
+        <DynamicForm
+          fields={fields}
+          formSubmitOptions={["email"]}
+          emailTemplateName="welcome"
+          toEmail="real@customer.com"
+          testEmail="test@test.com"
+          isProduction={true}
+          onEmailSubmit={onEmailSubmit}
+          successMessage={<div>Done</div>}
+        />
+      );
+
+      fillAndSubmit();
+
+      await waitFor(() => expect(onEmailSubmit).toHaveBeenCalledTimes(1));
+      const body = onEmailSubmit.mock.calls[0][0];
+      expect(body.toEmail).toBe("real@customer.com");
+    });
+  });
+
   it("applies TN/IP preset validation before submitting", async () => {
     const onEmailSubmit = jest.fn().mockResolvedValue(undefined);
     const presetFields: DynamicFormItem[] = [

package/src/contentful/blocks/dynamic-form/index.tsx

@@ -108,6 +108,8 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
     emailSubject,
     emailTemplateName,
     toEmail,
+    testEmail,
+    isProduction,
     segmentEventId,
     onEmailSubmit,
     onSmtpSubmit,
@@ -380,7 +382,28 @@ export const DynamicForm: React.FC<DynamicFormProps> = props => {
 
       onTrack?.(segmentEventId, payload);
 
-      const actions = payload.formSubmitOptions || [];
+      // Non-prod safety: when the app flags a non-production environment,
+      // reroute the `email` action to the configured test recipient(s) — which
+      // may be multiple comma-separated addresses — or skip `email` entirely
+      // when no test recipient is set. Gated on an explicit `isProduction ===
+      // false` so prod/undefined behavior is unchanged.
+      let effectiveActions = payload.formSubmitOptions || [];
+      if (isProduction === false && effectiveActions.includes("email")) {
+        const normalizedTestEmail = (testEmail || "")
+          .split(",")
+          .map(email => email.trim())
+          .filter(Boolean)
+          .join(",");
+        if (normalizedTestEmail) {
+          payload.toEmail = normalizedTestEmail;
+        } else {
+          effectiveActions = effectiveActions.filter(
+            action => action !== "email"
+          );
+        }
+      }
+
+      const actions = effectiveActions;
       const hasPost = actions.includes("post");
       const serverActions = actions.filter(a => a !== "post");