@windstream/react-shared-components 0.2.88 → 0.2.89

package/package.json

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

package/src/contentful/blocks/primary-hero/index.test.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { PrimaryHero } from "./index";
 
+import { replaceTokens } from "@shared/utils/replace-tokens";
 import { fireEvent, render, screen } from "@testing-library/react";
 
 jest.mock("@shared/components/checklist", () => ({
@@ -26,8 +27,10 @@ jest.mock("@shared/components/next-image", () => ({
 }));
 
 jest.mock("@shared/components/text", () => ({
-  Text: ({ as: Tag = "span", children, className }: any) => (
-    <Tag className={className}>{children}</Tag>
+  Text: ({ as: Tag = "span", children, className, ...rest }: any) => (
+    <Tag className={className} {...rest}>
+      {children}
+    </Tag>
   ),
 }));
 
@@ -80,10 +83,25 @@ describe("PrimaryHero", () => {
   });
 
   describe("Price section", () => {
+    const getPriceLockup = (container: HTMLElement) => {
+      const amount = container.querySelector("p.subheading5");
+      const lockup = amount?.parentElement;
+      const [dollarSign, , suffix] = Array.from(lockup?.children ?? []);
+      return { lockup, dollarSign, amount, suffix };
+    };
+
+    const textExposedToAssistiveTech = (container: HTMLElement) => {
+      const clone = container.cloneNode(true) as HTMLElement;
+      clone
+        .querySelectorAll('[aria-hidden="true"]')
+        .forEach(node => node.remove());
+      return clone.textContent ?? "";
+    };
+
     it("renders price with dollar sign", () => {
-      render(<PrimaryHero {...baseProps} price="49.99" />);
+      render(<PrimaryHero {...baseProps} price="49" />);
       expect(screen.getByText("$")).toBeInTheDocument();
-      expect(screen.getByText("49.99")).toBeInTheDocument();
+      expect(screen.getByText("49")).toBeInTheDocument();
     });
 
     it("renders priceSuffix when provided", () => {
@@ -117,6 +135,247 @@ describe("PrimaryHero", () => {
       render(<PrimaryHero {...baseProps} />);
       expect(screen.queryByText("$")).not.toBeInTheDocument();
     });
+
+    it("keeps the whole-dollar authored lockup unchanged", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="19" priceSuffix="99/mo*" />
+      );
+      const { lockup, dollarSign, amount, suffix } = getPriceLockup(container);
+
+      expect(lockup?.children).toHaveLength(3);
+      expect(dollarSign).toHaveTextContent(/^\$$/);
+      expect(dollarSign).toHaveClass("subheading1", "mt-0.5");
+      expect(amount).toHaveTextContent(/^19$/);
+      expect(suffix?.tagName).toBe("P");
+      expect(suffix).toHaveClass("subheading1", "mt-0.5");
+      expect(suffix).toHaveTextContent(/^99\/mo\*$/);
+      expect(suffix?.querySelector("span")).toBeNull();
+    });
+
+    it("renders decimal cents with the suffix so it matches the authored lockup", () => {
+      const authored = render(
+        <PrimaryHero {...baseProps} price="19" priceSuffix="99/mo*" />
+      );
+      const expected = getPriceLockup(authored.container);
+      const expectedLockup = {
+        amount: expected.amount?.textContent,
+        amountClass: expected.amount?.className,
+        suffix: expected.suffix?.textContent,
+        suffixClass: expected.suffix?.className,
+        count: expected.lockup?.children.length,
+      };
+      authored.unmount();
+
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="19.99" priceSuffix="/mo*" />
+      );
+      const actual = getPriceLockup(container);
+
+      expect({
+        amount: actual.amount?.textContent,
+        amountClass: actual.amount?.className,
+        suffix: actual.suffix?.textContent,
+        suffixClass: actual.suffix?.className,
+        count: actual.lockup?.children.length,
+      }).toEqual(expectedLockup);
+      expect(screen.queryByText("19.99")).not.toBeInTheDocument();
+    });
+
+    it("renders a resolved price token like the authored production lockup", () => {
+      const tokens = [
+        { token: "price_fiber_300", value: "24.99", promo: "19.99" },
+      ];
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          price={replaceTokens("${price_fiber_300}", tokens)}
+          priceSuffix={replaceTokens("/mo*", tokens)}
+          priceCallout="fiber plans|start at "
+        />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+
+      expect(amount).toHaveTextContent(/^19$/);
+      expect(suffix).toHaveTextContent(/^99\/mo\*$/);
+      expect(screen.getByText("fiber plans")).toBeInTheDocument();
+      expect(screen.getByText("$19.99/mo*")).toHaveClass("sr-only");
+    });
+
+    it("renders decimal cents on their own when no suffix is provided", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="39.99" />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+
+      expect(amount).toHaveTextContent(/^39$/);
+      expect(suffix).toHaveClass("subheading1", "mt-0.5");
+      expect(suffix).toHaveTextContent(/^99$/);
+    });
+
+    it("splits prices with thousands separators", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="1,299.50" priceSuffix="/yr" />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+
+      expect(amount).toHaveTextContent(/^1,299$/);
+      expect(suffix).toHaveTextContent(/^50\/yr$/);
+    });
+
+    it.each(["Free", "$19.99", "19.", ".99"])(
+      "renders non-decimal price %p verbatim",
+      price => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price={price} priceSuffix="/mo" />
+        );
+        const { amount, suffix } = getPriceLockup(container);
+
+        expect(amount?.textContent).toBe(price);
+        expect(suffix).toHaveTextContent(/^\/mo$/);
+      }
+    );
+
+    it.each([
+      ["price", { price: "${price_tier3_2gig}" }],
+      ["priceSuffix", { price: "19", priceSuffix: "${price_suffix}" }],
+      ["priceCallout", { price: "19", priceCallout: "save $${reward_x}" }],
+    ])("hides the price lockup when %s has an unresolved token", (_, props) => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          priceSuffix="/mo*"
+          priceCallout="fiber plans|start at "
+          {...props}
+        />
+      );
+
+      expect(container.querySelector("p.subheading5")).toBeNull();
+      expect(screen.queryByText("$")).not.toBeInTheDocument();
+      expect(screen.queryByText("fiber plans")).not.toBeInTheDocument();
+      expect(container.textContent).not.toContain("${");
+    });
+
+    it.each(["99/mo*", " 99/mo*", "99"])(
+      "does not repeat cents already leading the suffix %p",
+      priceSuffix => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price="59.99" priceSuffix={priceSuffix} />
+        );
+        const { amount, suffix } = getPriceLockup(container);
+
+        expect(amount).toHaveTextContent(/^59$/);
+        expect(suffix?.textContent).toBe(priceSuffix);
+        expect(suffix?.querySelector("span")).toBeNull();
+      }
+    );
+
+    it.each([
+      ["59.49", "99/mo*", "4999/mo*"],
+      ["19.99", "990/mo", "99990/mo"],
+    ])(
+      "keeps the cents when %p has a suffix %p that does not lead with them",
+      (price, priceSuffix, expected) => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price={price} priceSuffix={priceSuffix} />
+        );
+        const { suffix } = getPriceLockup(container);
+
+        expect(suffix?.textContent).toBe(expected);
+      }
+    );
+
+    it("tags split cents with the price field and the suffix with the priceSuffix field", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          price="19.99"
+          priceSuffix="/mo*"
+          fieldProps={{
+            price: { "data-field": "price" },
+            priceSuffix: { "data-field": "priceSuffix" },
+          }}
+        />
+      );
+      const { amount, suffix } = getPriceLockup(container);
+      const cents = suffix?.querySelector("span");
+
+      expect(amount).toHaveAttribute("data-field", "price");
+      expect(suffix).toHaveAttribute("data-field", "priceSuffix");
+      expect(cents).toHaveAttribute("data-field", "price");
+      expect(cents).toHaveTextContent(/^99$/);
+    });
+
+    it.each([
+      ["19.99", "/mo*", "$19.99/mo*"],
+      ["59.99", "99/mo*", "$59.99/mo*"],
+      ["59.99", " 99/mo*", "$59.99/mo*"],
+      ["39.99", undefined, "$39.99"],
+      ["1,299.50", "/yr", "$1,299.50/yr"],
+      ["19.99", " per month", "$19.99 per month"],
+      ["59.49", "99/mo*", "$59.49 99/mo*"],
+    ])(
+      "exposes %p + %p to assistive technology as %p only once",
+      (price, priceSuffix, expected) => {
+        const { container } = render(
+          <PrimaryHero
+            {...baseProps}
+            price={price}
+            priceSuffix={priceSuffix}
+            priceCallout="fiber plans|start at "
+          />
+        );
+        const { lockup } = getPriceLockup(container);
+        const accessibleText = textExposedToAssistiveTech(container);
+
+        expect(screen.getByText(expected)).toHaveClass("sr-only");
+        expect(lockup).toHaveAttribute("aria-hidden", "true");
+        expect(accessibleText).toContain(expected);
+        expect(accessibleText.replace(expected, "")).not.toMatch(/\d/);
+      }
+    );
+
+    it("keeps the split visual fragments in the DOM for crawlers", () => {
+      const { container } = render(
+        <PrimaryHero {...baseProps} price="19.99" priceSuffix="/mo*" />
+      );
+      const { dollarSign, amount, suffix } = getPriceLockup(container);
+
+      expect(dollarSign).toBeInTheDocument();
+      expect(amount).toHaveTextContent(/^19$/);
+      expect(suffix).toHaveTextContent(/^99\/mo\*$/);
+    });
+
+    it.each([
+      ["19", "99/mo*"],
+      ["Free", "/mo"],
+      ["19.", "/mo"],
+    ])(
+      "leaves the unsplit lockup %p + %p exposed to assistive technology as before",
+      (price, priceSuffix) => {
+        const { container } = render(
+          <PrimaryHero {...baseProps} price={price} priceSuffix={priceSuffix} />
+        );
+        const { lockup } = getPriceLockup(container);
+
+        expect(container.querySelector(".sr-only")).toBeNull();
+        expect(lockup).not.toHaveAttribute("aria-hidden");
+        expect(textExposedToAssistiveTech(container)).toContain(
+          `$${price}${priceSuffix}`
+        );
+      }
+    );
+
+    it("does not expose an accessible price when the lockup is hidden", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          price="${price_tier3_2gig}"
+          priceSuffix="/mo*"
+        />
+      );
+
+      expect(container.querySelector(".sr-only")).toBeNull();
+    });
   });
 
   describe("Checklist", () => {

package/src/contentful/blocks/primary-hero/index.tsx

@@ -6,6 +6,27 @@ import { NextImage } from "@shared/components/next-image";
 import { Text } from "@shared/components/text";
 import { Button } from "@shared/contentful/blocks/button";
 import { cx } from "@shared/utils";
+import { hasUnresolvedTokens } from "@shared/utils/replace-tokens";
+
+const DECIMAL_PRICE_PATTERN = /^(\d[\d,]*)\.(\d+)$/;
+
+const splitPrice = (price?: string, priceSuffix?: string) => {
+  const match = price ? DECIMAL_PRICE_PATTERN.exec(price.trim()) : null;
+  if (!match) return { dollars: price, cents: "", accessiblePrice: "" };
+  const [, dollars, cents] = match;
+  const suffix = priceSuffix?.trimStart() ?? "";
+  const suffixLeadsWithCents =
+    suffix.startsWith(cents) && !/^\d/.test(suffix.slice(cents.length));
+  const unit = suffixLeadsWithCents
+    ? suffix.slice(cents.length)
+    : (priceSuffix ?? "");
+  const unitSeparator = /^\d/.test(unit) ? " " : "";
+  return {
+    dollars,
+    cents: suffixLeadsWithCents ? "" : cents,
+    accessiblePrice: `$${dollars}.${cents}${unitSeparator}${unit}`,
+  };
+};
 
 export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
   const {
@@ -59,6 +80,18 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
   const badgeImageUrl = normalizeImageUrl(badgeImage);
   const heroImageUrl = normalizeImageUrl(carouselImages?.[0]);
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
+  const {
+    dollars: priceDollars,
+    cents: priceCents,
+    accessiblePrice,
+  } = splitPrice(price, priceSuffix);
+  // An unresolved `${token}` (e.g. a missing token source) hides the lockup
+  // instead of rendering the raw placeholder.
+  const showPrice =
+    !!price &&
+    ![price, priceSuffix, priceCallout].some(value =>
+      hasUnresolvedTokens(value)
+    );
   const baseTextColorClass = textColor === "dark" ? "text-text" : "text-white";
   const textColorClass =
     hasDesktopVideo && textColor === "dark"
@@ -123,7 +156,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             )}
 
             {/* price callout */}
-            {price ? (
+            {showPrice ? (
               <div className="flex sm:justify-center sm:text-left lg:justify-start">
                 <div className="mr-2 mt-0.5" {...fieldProps?.priceCallout}>
                   {priceCallout
@@ -134,19 +167,30 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                       ))
                     : null}
                 </div>
-                <div className="flex">
+                {accessiblePrice ? (
+                  <Text as="p" className="sr-only">
+                    {accessiblePrice}
+                  </Text>
+                ) : null}
+                <div
+                  className="flex"
+                  aria-hidden={accessiblePrice ? true : undefined}
+                >
                   <Text as="p" className="subheading1 mt-0.5">
                     $
                   </Text>
                   <Text as="p" className="subheading5" {...fieldProps?.price}>
-                    {price}
+                    {priceDollars}
                   </Text>
-                  {priceSuffix ? (
+                  {priceCents || priceSuffix ? (
                     <Text
                       as="p"
                       className="subheading1 mt-0.5"
                       {...fieldProps?.priceSuffix}
                     >
+                      {priceCents ? (
+                        <span {...fieldProps?.price}>{priceCents}</span>
+                      ) : null}
                       {priceSuffix}
                     </Text>
                   ) : null}

package/src/contentful/blocks/primary-hero/primary-hero.stories.tsx

@@ -45,7 +45,8 @@ const argTypes: ArgTypes<PrimaryHeroProps> = {
   },
   price: {
     control: { type: "text" as const },
-    description: "Price value (e.g. '24')",
+    description:
+      "Price value (e.g. '24'). Decimal prices such as a resolved price token ('19.99') render the cents with the suffix, without repeating cents the suffix already starts with. The lockup is hidden while any price field still contains an unresolved `${token}`.",
   },
   priceSuffix: {
     control: { type: "text" as const },
@@ -324,3 +325,23 @@ export const BundleOffer: Story = {
     checklist: undefined,
   },
 };
+
+/** Tokenized price: a resolved price token ("19.99") renders the same lockup as an authored "19" + "99/mo*". */
+export const TokenizedPrice: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When the Price field holds a price token (e.g. `${price_fiber_300}`) the consuming app resolves it with `replaceTokens` to a decimal value such as `19.99`. The dollars render large and the cents render with the suffix, matching production heroes authored as Price `19` + Price Suffix `99/mo*`.",
+      },
+    },
+  },
+  args: {
+    title: "switch and save this season",
+    subTitle: "Make it festive with fast 100% fiber from Kinetic.",
+    price: "19.99",
+    priceSuffix: "/mo*",
+    priceCallout: "fiber plans|start at ",
+    textColor: "dark",
+  },
+};

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

@@ -1,4 +1,5 @@
 import {
+  hasUnresolvedTokens,
   replaceTokens,
   type RichTextDocument,
   type TokenEntry,
@@ -195,3 +196,36 @@ describe("replaceTokens - rich text", () => {
     expect((result.content[1] as any).content[0].value).toBe("50");
   });
 });
+
+describe("hasUnresolvedTokens", () => {
+  it.each([
+    ["${price_tier3_2gig}", true],
+    ["From $${price_tier1_300mbps}/mo", true],
+    ["39.99", false],
+    ["plain text", false],
+    ["${}", false],
+    ["", false],
+    [null, false],
+    [undefined, false],
+  ])("returns %p -> %p", (input, expected) => {
+    expect(hasUnresolvedTokens(input)).toBe(expected);
+  });
+
+  it("is false once every token resolves and true for unknown tokens", () => {
+    expect(hasUnresolvedTokens(replaceTokens("${reward_50}", tokens))).toBe(
+      false
+    );
+    expect(hasUnresolvedTokens(replaceTokens("${not_a_token}", tokens))).toBe(
+      true
+    );
+  });
+
+  it("returns the same result on repeated calls", () => {
+    const value = "${price_tier1_300mbps}";
+    expect([1, 2, 3].map(() => hasUnresolvedTokens(value))).toEqual([
+      true,
+      true,
+      true,
+    ]);
+  });
+});

package/src/utils/replace-tokens.ts

@@ -15,6 +15,10 @@ export type RichTextDocument = {
 export type ReplaceTokensResult<T> = T extends string ? string : T;
 
 const TOKEN_PATTERN = /\$\{([^${}]+)\}/g;
+const UNRESOLVED_TOKEN_PATTERN = new RegExp(TOKEN_PATTERN.source);
+
+export const hasUnresolvedTokens = (input?: string | null): boolean =>
+  typeof input === "string" && UNRESOLVED_TOKEN_PATTERN.test(input);
 
 const normalizeEntries = (tokens: TokenSource): TokenEntry[] => {
   if (Array.isArray(tokens)) return tokens;