@windstream/react-shared-components 0.2.82 → 0.2.84

package/package.json

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

package/src/contentful/blocks/award-marquee/AwardMarquee.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof AwardMarquee> = {
       page: DocsPage,
       description: {
         component:
-          "Server-rendered marquee of award badges. Optional `heading` and `footerText` display gold text above and below the awards, with divider lines around the heading. Animates when `scroll` is set; with 3 or fewer items it animates on mobile and falls back to a static row at the `sm` breakpoint (CSS-driven, no client-side JS).",
+          "Server-rendered marquee of award badges. Optional `heading` and `footerText` display gold text above and below the awards, with divider lines around the heading. A single-entry static display can optionally swap in a distinct `mobileIconUrl` below the `sm` breakpoint. Animates when `scroll` is set; with 3 or fewer items it animates on mobile and falls back to a static row at the `sm` breakpoint (CSS-driven, no client-side JS).",
       },
     },
   },
@@ -56,3 +56,47 @@ export const WithHeadingAndFooter: Story = {
     scroll: false,
   },
 };
+
+export const SingleConsolidatedLogo: Story = {
+  args: {
+    heading: "As seen on",
+    scroll: false,
+    items: [
+      {
+        iconUrl: "https://placehold.co/1441x622?text=Consolidated+Logo",
+        iconAlt: "As seen on logo collection",
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A single consolidated logo entry (no title/description) renders at up to 1100px wide, scales down responsively, and is horizontally centered. The caption block is omitted entirely since there is no caption text.",
+      },
+    },
+  },
+};
+
+export const SingleLogoWithMobileImage: Story = {
+  args: {
+    heading: "As seen on",
+    scroll: false,
+    items: [
+      {
+        iconUrl: "https://placehold.co/1441x622?text=Desktop+Logo",
+        iconAlt: "As seen on logo collection (desktop)",
+        mobileIconUrl: "https://placehold.co/622x622?text=Mobile+Logo",
+        mobileIconAlt: "As seen on logo collection (mobile)",
+      },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A single consolidated logo entry can optionally supply `mobileIconUrl` (plus matching `mobileIconAlt`/`mobileIconWidth`/`mobileIconHeight`) to swap in a different, often more vertical, crop below the `sm` (640px) breakpoint. Resize the viewport to see the swap. If `mobileIconUrl` is omitted, the desktop image is used at every breakpoint. This swap only applies when the marquee has a single entry and `scroll` is `false`.",
+      },
+    },
+  },
+};

package/src/contentful/blocks/award-marquee/index.test.tsx

@@ -92,17 +92,128 @@ describe("AwardMarquee", () => {
     expect(icon.src).toContain("icon-0.png");
   });
 
-  it("renders intrinsic icon dimensions when provided", () => {
-    const [item] = buildItems(1);
-    render(
-      <AwardMarquee items={[{ ...item, iconWidth: 320, iconHeight: 180 }]} />
-    );
+  it("renders intrinsic icon dimensions when provided (multi-entry, unchanged sizing)", () => {
+    const items = buildItems(2).map(item => ({
+      ...item,
+      iconWidth: 320,
+      iconHeight: 180,
+    }));
+    render(<AwardMarquee items={items} />);
     const icon = screen.getByAltText("Award 0");
     expect(icon).toHaveAttribute("width", "320");
     expect(icon).toHaveAttribute("height", "180");
     expect(icon).toHaveClass("w-[200px]");
   });
 
+  it("renders intrinsic icon dimensions when provided (single static entry)", () => {
+    const [item] = buildItems(1);
+    render(
+      <AwardMarquee items={[{ ...item, iconWidth: 1441, iconHeight: 622 }]} />
+    );
+    const icon = screen.getByAltText("Award 0");
+    expect(icon).toHaveAttribute("width", "1441");
+    expect(icon).toHaveAttribute("height", "622");
+    expect(icon).toHaveClass("w-full", "max-w-[1100px]", "h-auto");
+    expect(icon).not.toHaveClass("w-[200px]");
+  });
+
+  it("renders a distinct mobile image for a single static entry when one is supplied", () => {
+    const { container } = render(
+      <AwardMarquee
+        items={[
+          {
+            iconUrl: "https://example.com/desktop-logo.png",
+            iconAlt: "Desktop Logo",
+            iconWidth: 1441,
+            iconHeight: 622,
+            mobileIconUrl: "https://example.com/mobile-logo.png",
+            mobileIconAlt: "Mobile Logo",
+            mobileIconWidth: 600,
+            mobileIconHeight: 400,
+          },
+        ]}
+        scroll={false}
+      />
+    );
+
+    const mobileIcon = screen.getByAltText("Mobile Logo") as HTMLImageElement;
+    const desktopIcon = screen.getByAltText("Desktop Logo") as HTMLImageElement;
+
+    expect(mobileIcon.src).toContain("mobile-logo.png");
+    expect(mobileIcon).toHaveAttribute("width", "600");
+    expect(mobileIcon).toHaveAttribute("height", "400");
+    expect(mobileIcon).toHaveClass("sm:hidden", "max-w-[1100px]", "h-auto");
+
+    expect(desktopIcon.src).toContain("desktop-logo.png");
+    expect(desktopIcon).toHaveAttribute("width", "1441");
+    expect(desktopIcon).toHaveAttribute("height", "622");
+    expect(desktopIcon).toHaveClass(
+      "hidden",
+      "sm:block",
+      "max-w-[1100px]",
+      "h-auto"
+    );
+
+    // Exactly one wrapper div (not duplicated) still holds both images.
+    expect(
+      container.querySelectorAll("#Award-Marquee > div > div")
+    ).toHaveLength(1);
+  });
+
+  it("falls back to the desktop image at every breakpoint when no mobile image is supplied", () => {
+    render(
+      <AwardMarquee
+        items={[
+          {
+            iconUrl: "https://example.com/desktop-logo.png",
+            iconAlt: "Desktop Logo",
+          },
+        ]}
+        scroll={false}
+      />
+    );
+
+    const icon = screen.getByAltText("Desktop Logo");
+    expect(icon).not.toHaveClass("sm:hidden");
+    expect(icon).not.toHaveClass("hidden", "sm:block");
+    expect(screen.queryAllByAltText("Desktop Logo")).toHaveLength(1);
+  });
+
+  it("ignores the mobile image field for multi-entry and animated-carousel rendering", () => {
+    const itemWithMobile = {
+      iconUrl: "https://example.com/desktop-logo.png",
+      iconAlt: "Desktop Logo",
+      mobileIconUrl: "https://example.com/mobile-logo.png",
+      mobileIconAlt: "Mobile Logo",
+    };
+
+    const { container: multiContainer } = render(
+      <AwardMarquee
+        items={[itemWithMobile, { ...buildItems(1)[0] }]}
+        scroll={false}
+      />
+    );
+    expect(multiContainer.querySelectorAll('[alt="Mobile Logo"]')).toHaveLength(
+      0
+    );
+    expect(screen.getByAltText("Desktop Logo")).not.toHaveClass("sm:hidden");
+
+    const { container: carouselContainer } = render(
+      <AwardMarquee items={[itemWithMobile]} scroll={true} />
+    );
+    // Split view for a single item never applies the mobile/desktop swap:
+    // the mobile half is already handled by the separate animated carousel,
+    // and the desktop half shows a single, unswapped image.
+    expect(
+      carouselContainer.querySelectorAll('[alt="Mobile Logo"]')
+    ).toHaveLength(0);
+    const desktopHalfIcon = carouselContainer.querySelector(
+      ".hidden.sm\\:block img"
+    );
+    expect(desktopHalfIcon).toHaveClass("w-full", "max-w-[1100px]", "h-auto");
+    expect(desktopHalfIcon).not.toHaveClass("sm:hidden");
+  });
+
   it("omits intrinsic icon dimensions when unavailable", () => {
     render(<AwardMarquee items={buildItems(1)} />);
     const icon = screen.getByAltText("Award 0");
@@ -139,6 +250,93 @@ describe("AwardMarquee", () => {
     expect(screen.getAllByText("Award 0")).toHaveLength(3);
   });
 
+  it("centers a single static entry and hides the caption block when it has no caption text", () => {
+    const { container } = render(
+      <AwardMarquee
+        items={[{ iconUrl: "https://example.com/logo.png", iconAlt: "Logo" }]}
+        scroll={false}
+      />
+    );
+    const wrapper = container.querySelector("#Award-Marquee > div > div");
+    expect(wrapper).toHaveClass("mx-auto", "w-full", "justify-center");
+    expect(wrapper).not.toHaveClass("ml-4", "w-auto");
+
+    const icon = screen.getByAltText("Logo");
+    expect(icon).toHaveClass("w-full", "max-w-[1100px]", "h-auto");
+    expect(icon).not.toHaveClass("w-[200px]");
+
+    // No title/description -> the 250px caption block takes no space.
+    expect(container.querySelector(".w-\\[250px\\]")).toBeNull();
+  });
+
+  it("still renders the caption block for a single static entry that has caption text", () => {
+    const { container } = render(
+      <AwardMarquee items={buildItems(1)} scroll={false} />
+    );
+    expect(container.querySelector(".w-\\[250px\\]")).not.toBeNull();
+    expect(screen.getByText("Award 0")).toBeInTheDocument();
+    expect(screen.getByText("Description 0")).toBeInTheDocument();
+  });
+
+  it("omits the caption block for any entry lacking caption text, even with multiple entries", () => {
+    const items: AwardMarqueeItem[] = [
+      ...buildItems(1),
+      { iconUrl: "https://example.com/logo-2.png", iconAlt: "Logo 2" },
+    ];
+    const { container } = render(<AwardMarquee items={items} scroll={false} />);
+    // Only the first item (with title/description) gets a caption block.
+    expect(container.querySelectorAll(".w-\\[250px\\]")).toHaveLength(1);
+  });
+
+  it("leaves multi-entry static rendering unchanged (fixed-width icon, ml-4 wrapper)", () => {
+    const { container } = render(
+      <AwardMarquee items={buildItems(2)} scroll={false} />
+    );
+    const wrappers = container.querySelectorAll("#Award-Marquee > div > div");
+    wrappers.forEach(wrapper => {
+      expect(wrapper).toHaveClass("ml-4", "w-auto");
+      expect(wrapper).not.toHaveClass("mx-auto", "justify-center");
+    });
+    const icon = screen.getByAltText("Award 0");
+    expect(icon).toHaveClass("w-[200px]");
+    expect(icon).not.toHaveClass("max-w-[1100px]");
+  });
+
+  it("leaves the multi-entry animated carousel unchanged regardless of single-item styling", () => {
+    const { container } = render(
+      <AwardMarquee items={buildItems(5)} scroll={true} />
+    );
+    const icons = screen.getAllByAltText(/Award \d/);
+    icons.forEach(icon => expect(icon).toHaveClass("w-[200px]"));
+    const wrappers = container.querySelectorAll(".animate-award-marquee > div");
+    wrappers.forEach(wrapper => {
+      expect(wrapper).toHaveClass("ml-4", "w-auto");
+    });
+  });
+
+  it("applies the single-static treatment only to the desktop (static) half of a split view", () => {
+    const { container } = render(
+      <AwardMarquee
+        items={[{ iconUrl: "https://example.com/logo.png", iconAlt: "Logo" }]}
+        scroll={true}
+      />
+    );
+    const mobileIcon = container.querySelector(
+      ".sm\\:hidden img"
+    ) as HTMLImageElement;
+    const desktopIcon = container.querySelector(
+      ".hidden.sm\\:block img"
+    ) as HTMLImageElement;
+
+    // Mobile (animated) half keeps the original fixed-width treatment.
+    expect(mobileIcon).toHaveClass("w-[200px]");
+    expect(mobileIcon).not.toHaveClass("max-w-[1100px]");
+
+    // Desktop (static) half gets the large, centered single-entry treatment.
+    expect(desktopIcon).toHaveClass("w-full", "max-w-[1100px]", "h-auto");
+    expect(desktopIcon).not.toHaveClass("w-[200px]");
+  });
+
   it("applies the anchorId to the wrapper in every render branch", () => {
     const staticView = render(
       <AwardMarquee

package/src/contentful/blocks/award-marquee/index.tsx

@@ -26,32 +26,76 @@ const renderAwardItem = (
     iconAlt,
     iconWidth,
     iconHeight,
+    mobileIconUrl,
+    mobileIconAlt,
+    mobileIconWidth,
+    mobileIconHeight,
     title,
     description,
   }: AwardMarqueeItem,
-  key: React.Key
-) => (
-  <div
-    key={key}
-    className="ml-4 flex w-auto flex-shrink-0 items-center whitespace-nowrap"
-  >
-    <img
-      src={iconUrl}
-      alt={iconAlt ?? ""}
-      width={iconWidth}
-      height={iconHeight}
-      className="w-[200px]"
-    />
-    <div className="w-[250px] text-center">
-      <p className="flex justify-center text-center text-body3 font-bold">
-        {title}
-      </p>
-      <p className="flex flex-wrap whitespace-normal text-center text-footnote">
-        {description}
-      </p>
+  key: React.Key,
+  // Only the single-entry, non-animated (static) rendering gets the large,
+  // centered treatment; the animated carousel is unaffected.
+  isSingleStatic = false,
+  // A distinct mobile image is only honored for the standalone static render
+  // (scroll={false}). When this is the "desktop half" of a responsive split
+  // (scroll={true} with <=3 items), the sm:hidden mobile side is already
+  // handled by the separate animated half, so a nested swap here would never
+  // be visible at any viewport.
+  allowMobileSwap = false
+) => {
+  const hasCaption = Boolean(title || description);
+  const hasMobileIcon = allowMobileSwap && Boolean(mobileIconUrl);
+
+  return (
+    <div
+      key={key}
+      className={cx(
+        "flex flex-shrink-0 items-center whitespace-nowrap",
+        isSingleStatic ? "mx-auto w-full justify-center" : "ml-4 w-auto"
+      )}
+    >
+      {hasMobileIcon ? (
+        <>
+          <img
+            src={mobileIconUrl}
+            alt={mobileIconAlt ?? iconAlt ?? ""}
+            width={mobileIconWidth}
+            height={mobileIconHeight}
+            className="h-auto w-full max-w-[1100px] sm:hidden"
+          />
+          <img
+            src={iconUrl}
+            alt={iconAlt ?? ""}
+            width={iconWidth}
+            height={iconHeight}
+            className="hidden h-auto w-full max-w-[1100px] sm:block"
+          />
+        </>
+      ) : (
+        <img
+          src={iconUrl}
+          alt={iconAlt ?? ""}
+          width={iconWidth}
+          height={iconHeight}
+          className={
+            isSingleStatic ? "h-auto w-full max-w-[1100px]" : "w-[200px]"
+          }
+        />
+      )}
+      {hasCaption && (
+        <div className="w-[250px] text-center">
+          <p className="flex justify-center text-center text-body3 font-bold">
+            {title}
+          </p>
+          <p className="flex flex-wrap whitespace-normal text-center text-footnote">
+            {description}
+          </p>
+        </div>
+      )}
     </div>
-  </div>
-);
+  );
+};
 
 export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
   anchorId = "Award-Marquee",
@@ -91,20 +135,27 @@ export const AwardMarquee: React.FC<AwardMarqueeProps> = ({
     );
   };
 
-  const staticMarquee = (
+  const staticMarquee = (allowMobileSwap: boolean) => (
     <div className="flex flex-nowrap items-center justify-around overflow-clip">
-      {items.map((item, index) => renderAwardItem(item, index))}
+      {items.map((item, index) =>
+        renderAwardItem(
+          item,
+          index,
+          items.length === 1,
+          allowMobileSwap && items.length === 1
+        )
+      )}
     </div>
   );
 
   const marquee = !scroll ? (
-    staticMarquee
+    staticMarquee(true)
   ) : scrollAvailable ? (
     animatedMarquee()
   ) : (
     <>
       <div className="sm:hidden">{animatedMarquee()}</div>
-      <div className="hidden sm:block">{staticMarquee}</div>
+      <div className="hidden sm:block">{staticMarquee(false)}</div>
     </>
   );
 

package/src/contentful/blocks/award-marquee/types.ts

@@ -7,6 +7,12 @@ export type AwardMarqueeItem = {
   iconAlt?: string;
   iconWidth?: number;
   iconHeight?: number;
+  // Optional mobile-specific image for the single-entry static display.
+  // Falls back to iconUrl at every breakpoint when omitted.
+  mobileIconUrl?: string;
+  mobileIconAlt?: string;
+  mobileIconWidth?: number;
+  mobileIconHeight?: number;
   title?: string;
   description?: string;
 };

package/src/utils/index.test.ts

@@ -17,6 +17,7 @@ import {
   removeUTMs,
   renderContentfulRichText,
   renderContentfulRichTextTable,
+  replaceTokens,
   setCookie,
   setUTMs,
   SpeedCardBg,
@@ -92,6 +93,10 @@ describe("utils barrel exports", () => {
     expect(typeof toDocument).toBe("function");
   });
 
+  it("exports replaceTokens", () => {
+    expect(typeof replaceTokens).toBe("function");
+  });
+
   it("exports renderContentfulRichText", () => {
     expect(typeof renderContentfulRichText).toBe("function");
   });

package/src/utils/index.ts

@@ -32,6 +32,16 @@ export {
   redirectToWifiGrantUrl,
 } from "./wifi-grant-redirect";
 
+// Token replacement — framework-agnostic string / rich-text interpolation.
+// No dependency on Contentful or any particular CMS/tool.
+export { replaceTokens } from "./replace-tokens";
+export type {
+  TokenEntry,
+  TokenSource,
+  RichTextDocument,
+  ReplaceTokensResult,
+} from "./replace-tokens";
+
 // Contentful utilities (server-safe, no "use client")
 export { toDocument } from "./contentful/to-document";
 export {

package/src/utils/replace-tokens.test.ts

@@ -0,0 +1,197 @@
+import {
+  replaceTokens,
+  type RichTextDocument,
+  type TokenEntry,
+  type TokenSource,
+} from "./replace-tokens";
+
+// Generic rich-text node types. This utility is framework-agnostic and
+// intentionally has no dependency on any CMS or tool.
+const DOCUMENT = "document";
+const PARAGRAPH = "paragraph";
+const HR = "hr";
+
+const tokens: TokenEntry[] = [
+  { token: "price_tier1_300mbps", value: "44.99", promo: "39.99" },
+  { token: "price_value_only", value: "50.00" },
+  { token: "reward_50", value: "50" },
+];
+
+const makeDocument = (value: string): RichTextDocument => ({
+  nodeType: DOCUMENT,
+  content: [
+    {
+      nodeType: PARAGRAPH,
+      content: [{ nodeType: "text", value, marks: [], data: {} }],
+    },
+  ],
+});
+
+describe("replaceTokens - strings", () => {
+  it("resolves a price placeholder to its promo value", () => {
+    expect(replaceTokens("Only ${price_tier1_300mbps}/mo", tokens)).toBe(
+      "Only 39.99/mo"
+    );
+  });
+
+  it("falls back to value when the entry has no promo (reward tokens)", () => {
+    expect(replaceTokens("Get a $${reward_50} reward", tokens)).toBe(
+      "Get a $50 reward"
+    );
+    expect(replaceTokens("${price_value_only}", tokens)).toBe("50.00");
+  });
+
+  it("replaces multiple placeholders in one string", () => {
+    expect(
+      replaceTokens("${price_tier1_300mbps} then ${reward_50}", tokens)
+    ).toBe("39.99 then 50");
+  });
+
+  it("leaves unknown placeholders intact", () => {
+    expect(replaceTokens("was ${not_a_token} now", tokens)).toBe(
+      "was ${not_a_token} now"
+    );
+  });
+
+  it("returns the string unchanged when there are no placeholders", () => {
+    expect(replaceTokens("plain text", tokens)).toBe("plain text");
+  });
+
+  it("accepts a JSON string source", () => {
+    expect(
+      replaceTokens("${price_tier1_300mbps}", JSON.stringify(tokens))
+    ).toBe("39.99");
+  });
+});
+
+describe("replaceTokens - empty / invalid sources", () => {
+  it.each<[string, TokenSource]>([
+    ["undefined", undefined],
+    ["null", null],
+    ["empty array", []],
+    ["blank string", "   "],
+    ["malformed JSON", "not json"],
+    ["non-array JSON", JSON.stringify({ token: "x" })],
+  ])("returns input unchanged for %s source", (_label, source) => {
+    expect(replaceTokens("${price_tier1_300mbps}", source)).toBe(
+      "${price_tier1_300mbps}"
+    );
+  });
+
+  it("ignores entries without a usable token key or value", () => {
+    const source: TokenEntry[] = [
+      { value: "1" },
+      { token: "", value: "2" },
+      { token: "no_values" },
+    ];
+    expect(replaceTokens("${no_values}", source)).toBe("${no_values}");
+  });
+});
+
+describe("replaceTokens - malformed values and ReDoS safety", () => {
+  it("ignores entries whose resolved value is not a string (never throws)", () => {
+    const malformed = [
+      { token: "reward_50", value: { toString: null } },
+      { token: "price_x", promo: 123 },
+    ] as unknown as TokenEntry[];
+
+    expect(replaceTokens("${reward_50} / ${price_x}", malformed)).toBe(
+      "${reward_50} / ${price_x}"
+    );
+  });
+
+  it("falls back to value when promo is not a string", () => {
+    const entries = [
+      { token: "reward_50", promo: { bad: true }, value: "50" },
+    ] as unknown as TokenEntry[];
+
+    expect(replaceTokens("$${reward_50}", entries)).toBe("$50");
+  });
+
+  it("resolves pathological ${-heavy input quickly without backtracking", () => {
+    const evil = "${".repeat(50000);
+    const start = Date.now();
+    const result = replaceTokens(evil, tokens);
+
+    expect(result).toBe(evil);
+    expect(Date.now() - start).toBeLessThan(2000);
+  });
+
+  it("widens a replaced string result to string, not the literal input type", () => {
+    const result = replaceTokens("${reward_50}", tokens);
+    // Compiles only because `result` is `string`; a preserved literal type
+    // would make this comparison a TypeScript no-overlap error.
+    expect(result === "50").toBe(true);
+  });
+});
+
+describe("replaceTokens - empty / non-tokenizable input", () => {
+  it.each([
+    ["empty string", ""],
+    ["null", null],
+    ["undefined", undefined],
+  ])("returns %s input unchanged", (_label, input) => {
+    expect(replaceTokens(input as any, tokens)).toBe(input);
+  });
+
+  it("returns a non-document object unchanged", () => {
+    const obj = { foo: "bar" } as any;
+    expect(replaceTokens(obj, tokens)).toBe(obj);
+  });
+});
+
+describe("replaceTokens - rich text", () => {
+  it("replaces placeholders inside nested text nodes", () => {
+    const doc = makeDocument("Only ${price_tier1_300mbps}/mo");
+    const result = replaceTokens(doc, tokens) as RichTextDocument;
+
+    expect((result.content[0] as any).content[0].value).toBe("Only 39.99/mo");
+  });
+
+  it("does not mutate the original document", () => {
+    const doc = makeDocument("${price_tier1_300mbps}");
+    replaceTokens(doc, tokens);
+
+    expect((doc.content[0] as any).content[0].value).toBe(
+      "${price_tier1_300mbps}"
+    );
+  });
+
+  it("preserves marks and data on text nodes", () => {
+    const doc = makeDocument("${reward_50}");
+    (doc.content[0] as any).content[0].marks = [{ type: "bold" }];
+    const result = replaceTokens(doc, tokens) as RichTextDocument;
+
+    const textNode = (result.content[0] as any).content[0];
+    expect(textNode.value).toBe("50");
+    expect(textNode.marks).toEqual([{ type: "bold" }]);
+  });
+
+  it("returns the document unchanged when no tokens match", () => {
+    const doc = makeDocument("nothing to replace");
+    const result = replaceTokens(doc, tokens) as RichTextDocument;
+
+    expect((result.content[0] as any).content[0].value).toBe(
+      "nothing to replace"
+    );
+  });
+
+  it("leaves non-text leaf nodes (e.g. hr) untouched", () => {
+    const doc: RichTextDocument = {
+      nodeType: DOCUMENT,
+      content: [
+        { nodeType: HR, content: [] },
+        {
+          nodeType: PARAGRAPH,
+          content: [
+            { nodeType: "text", value: "${reward_50}", marks: [], data: {} },
+          ],
+        },
+      ],
+    };
+    const result = replaceTokens(doc, tokens) as RichTextDocument;
+
+    expect((result.content[0] as any).nodeType).toBe(HR);
+    expect((result.content[1] as any).content[0].value).toBe("50");
+  });
+});