@windstream/react-shared-components 0.2.67 → 0.2.69

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>
     ) : (
@@ -30,6 +35,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   planSubtext,
   speed,
   price,
+  priceUnit = "/mo",
   description,
   bestValue = false,
   bestValueText = "best value",
@@ -69,9 +75,9 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   // stacks keep the standard sizes at every breakpoint.
   const planNameClass = twoColumn ? "label3 md:subheading2" : "subheading2";
   const priceIntegerClass = twoColumn
-    ? "heading2 md:subheading6"
-    : "subheading6";
-  const priceUnitClass = twoColumn ? "label3 md:label2" : "label2";
+    ? "heading2 md:subheading5"
+    : "subheading5";
+  const priceUnitClass = twoColumn ? "label3 md:label1" : "label1";
 
   return (
     <article className="relative flex h-full w-full max-w-[392px] flex-col">
@@ -115,15 +121,12 @@ export const ProductCard: React.FC<ProductCardProps> = ({
               )}
             >
               {planName}
-            </Text>
-            <Text
-              as="p"
-              className={cx(
-                "label3 text-wrap lowercase",
-                isDark ? "text-text-accent-on-bg-inverse" : "text-text-brand"
-              )}
-            >
-              {planSubtext}
+              {planSubtext ? (
+                <>
+                  <br />
+                  {planSubtext}
+                </>
+              ) : null}
             </Text>
           </div>
           <div className="flex flex-col items-start md:items-end">
@@ -155,14 +158,14 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                   isDark ? "text-text-inverse" : "text-text"
                 )}
               >
-                {price.split(".")[1]}/mo
+                {`${price.split(".")[1]}${priceUnit}`}
               </Text>
             </div>
             {priceSuffixBottom ? (
               <Text
                 as="span"
                 className={cx(
-                  "footnote text-nowrap",
+                  "micro text-nowrap",
                   isDark ? "text-text-inverse" : "text-text"
                 )}
               >
@@ -176,7 +179,8 @@ export const ProductCard: React.FC<ProductCardProps> = ({
         <section data-pc-description>
           <Text
             className={cx(
-              "footnote md:body2 md:h-[56px]",
+              twoColumn ? "footnote md:body2" : "body2",
+              "md:h-[56px]",
               isDark ? "text-text-inverse" : "text-text"
             )}
           >
@@ -189,18 +193,21 @@ export const ProductCard: React.FC<ProductCardProps> = ({
           <div data-pc-gift className="min-h-[76px]">
             <div
               className={cx(
-                "flex-col items-center rounded-surface-sm p-2",
+                "flex w-full flex-col gap-3 rounded-surface-sm p-2",
                 isDark ? "bg-bg-surface-inverse" : "bg-bg-surface-info"
               )}
             >
               {giftBadge?.map((badge: any) => {
                 return (
-                  <div key={badge.title} className="flex items-center gap-2">
+                  <div
+                    key={badge.title}
+                    className="flex w-full items-center gap-2"
+                  >
                     <Image
                       src={badge.icon}
                       alt={badge.title}
-                      width={24}
-                      height={24}
+                      width={20}
+                      height={20}
                     />
                     <Text
                       as="div"
@@ -290,38 +297,33 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                     iconClassName="mt-0"
                     iconColor={isDark ? "yellow" : "green"}
                     listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
-                    listItemClassName={`${isDark ? "text-text-inverse" : "text-text"}`}
+                    listItemClassName={`body3 ${isDark ? "text-text-inverse" : "text-text"}`}
                   />
                 </div>
                 {innerBadge?.badgeIcon ? (
-                  <div className="mt-3 flex items-center gap-2 text-left">
+                  <div className="mt-3 flex items-center gap-1 text-left">
                     <Image
                       src={innerBadge.badgeIcon}
                       alt="Inner Badge"
                       width={24}
                       height={24}
+                      className="ml-1 h-auto pr-2"
                     />
-                    <span
-                      className={cx(
-                        "footnote",
-                        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/cards/product-card/types.ts

@@ -10,6 +10,9 @@ export interface ProductCardProps {
   techType?: string;
   ismaxSpeed?: boolean;
   price: string;
+  /** The price unit rendered after the cents, e.g. "/mo" or "/mo*". Defaults
+   *  to "/mo". Lets Contentful control a trailing disclaimer star. */
+  priceUnit?: string;
   priceSuffixBottom?: string;
   description: string;
   bestValue?: boolean;

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

@@ -263,6 +263,11 @@ function ProductCardPanel({
     const planSubtext = planContent?.[1] || "";
     const priceCents = item?.priceSuffix?.split("/")?.[0] || "00";
     const formattedPrice = `${item?.price || "0"}.${priceCents}`;
+    // Preserve the full unit after the cents (e.g. "/mo*") so a Contentful
+    // disclaimer star renders; fall back to "/mo" when no unit is present.
+    const suffixParts = item?.priceSuffix?.split("/") || [];
+    const priceUnit =
+      suffixParts.length > 1 ? `/${suffixParts.slice(1).join("/")}` : "/mo";
     const features = item?.benefits?.items || [];
     const bestValue = item?.highlighted || false;
     const rawBadge = item?.giftRewards?.list?.items || [];
@@ -308,6 +313,7 @@ function ProductCardPanel({
           techType={item?.techType || ""}
           ismaxSpeed={item?.ismaxSpeed || ""}
           price={formattedPrice}
+          priceUnit={priceUnit}
           description={item?.productCardDescription || ""}
           giftBadge={rawBadge}
           innerBadge={innerBadge}

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/DynamicForm.stories.tsx

@@ -54,6 +54,9 @@ const fields: DynamicFormItem[] = [
     requiredField: true,
     errorMessage: "Enter a valid phone number",
   },
+  {
+    itemType: "divider",
+  },
   {
     itemType: "formField",
     fieldId: "topic",

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");
 

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

@@ -57,6 +57,31 @@ describe("dynamicRenderingWithGroupings", () => {
     expect(screen.getByText("Custom Content")).toBeInTheDocument();
   });
 
+  it("renders a full-width divider by default", () => {
+    const { container } = renderGroups([{ itemType: "divider" }]);
+    const divider = container.querySelector<HTMLElement>('[role="separator"]');
+    expect(divider).toBeInTheDocument();
+    expect(divider).toHaveClass("w-full");
+    expect(divider?.style.height).toBe("1px");
+  });
+
+  it("renders a half-width divider with a custom thickness", () => {
+    const { container } = renderGroups([
+      { itemType: "divider", dividerLength: false, dividerThickness: 4 },
+    ]);
+    const divider = container.querySelector<HTMLElement>('[role="separator"]');
+    expect(divider).toHaveClass("w-1/2");
+    expect(divider?.style.height).toBe("4px");
+  });
+
+  it("clamps a divider thickness below 1 to 1px", () => {
+    const { container } = renderGroups([
+      { itemType: "divider", dividerThickness: 0 },
+    ]);
+    const divider = container.querySelector<HTMLElement>('[role="separator"]');
+    expect(divider?.style.height).toBe("1px");
+  });
+
   it("renders a conditional item", () => {
     renderGroups([
       {

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

@@ -7,6 +7,7 @@ import FormFieldElement from "./form-field";
 import { DynamicFormItem } from "./types";
 import { groupFieldsForLayout } from "./utils";
 
+import { Divider } from "@shared/components/divider";
 import { Text } from "@shared/components/text";
 
 type FormValues = Record<string, any>;
@@ -46,6 +47,20 @@ const renderItem = (
       />
     );
   }
+  if (item.itemType === "divider") {
+    const strokeWidth = Math.max(item.dividerThickness || 1, 1);
+    const widthClass = item.dividerLength === false ? "w-1/2" : "w-full";
+    return (
+      <div key={key} className="flex w-full justify-center">
+        <Divider
+          role="separator"
+          aria-label="Content divider"
+          className={widthClass}
+          style={{ height: `${strokeWidth}px` }}
+        />
+      </div>
+    );
+  }
   return <React.Fragment key={key}>{item.content}</React.Fragment>;
 };
 

package/src/contentful/blocks/dynamic-form/types.ts

@@ -69,14 +69,19 @@ export interface ConditionalFieldConfig {
   grouped?: boolean;
 }
 
+export interface DynamicFormDividerConfig {
+  dividerLength?: boolean;
+  dividerThickness?: number;
+}
+
 /**
- * A flat list item rendered by the form. Either a form field, a conditional
- * field group, or an arbitrary pre-rendered node (e.g. a nested CMS block that
- * the app rendered itself and passes through).
+ * A flat list item rendered by the form: a form field, conditional field,
+ * divider, or custom React node.
  */
 export type DynamicFormItem =
   | ({ itemType: "formField" } & DynamicFormFieldConfig)
   | ({ itemType: "conditional" } & ConditionalFieldConfig)
+  | ({ itemType: "divider"; fieldId?: string } & DynamicFormDividerConfig)
   | { itemType: "custom"; fieldId?: string; content: React.ReactNode };
 
 export interface DynamicFormPayload {
@@ -175,6 +180,15 @@ export interface DynamicFormProps {
   emailSubject?: string;
   emailTemplateName?: string;
   toEmail?: string;
+  /**
+   * Test recipient(s) for the `email` action in non-production environments.
+   * When `isProduction === false` and the `email` action runs, the payload's
+   * `toEmail` is rerouted here so real recipients never receive non-prod
+   * submissions. Supports multiple comma-separated addresses (each is trimmed);
+   * when empty, the `email` action is skipped. Mirrors the residential form's
+   * `testEmail`.
+   */
+  testEmail?: string;
   segmentEventId?: string;
 
   /** Injected per-action async submit handlers. */
@@ -207,8 +221,10 @@ export interface DynamicFormProps {
     metadata?: Record<string, any>;
   }) => void;
 
-  /** Whether the current environment is production (affects nothing in the
-   * base component today but reserved for parity with app behavior). */
+  /** Whether the current environment is production. When explicitly `false`,
+   * the `email` action is rerouted to `testEmail` (or skipped when `testEmail`
+   * is empty) so non-prod submissions never reach real recipients. Leaving it
+   * `undefined` preserves the prior behavior (no rerouting). */
   isProduction?: boolean;
 
   /** Field customization + async data. */

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

@@ -130,7 +130,10 @@ export const Navigation: React.FC<NavigationProps> = props => {
             )}
           >
             <div className="mx-auto flex max-w-120 justify-between">
-              <ul className="flex gap-5" aria-label="Utility Navigation">
+              <ul
+                className="flex min-h-11 gap-5"
+                aria-label="Utility Navigation"
+              >
                 {utilityNavigationLinks?.map((links, index) => {
                   return (
                     <li key={`main-menu-items-${index}`}>

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

@@ -4,8 +4,8 @@ import { PrimaryHero } from "./index";
 import { fireEvent, render, screen } from "@testing-library/react";
 
 jest.mock("@shared/components/checklist", () => ({
-  Checklist: ({ items }: any) => (
-    <ul data-testid="checklist">
+  Checklist: ({ items, iconSize }: any) => (
+    <ul data-testid="checklist" data-icon-size={iconSize}>
       {items?.map((i: string, idx: number) => (
         <li key={idx}>{i}</li>
       ))}
@@ -128,6 +128,15 @@ describe("PrimaryHero", () => {
       expect(screen.getByText("Free install")).toBeInTheDocument();
     });
 
+    it("passes iconSize of 24 to the checklist", () => {
+      const checklist = [{ title: "No data caps" }, { title: "Free install" }];
+      render(<PrimaryHero {...baseProps} checklist={checklist} />);
+      expect(screen.getByTestId("checklist")).toHaveAttribute(
+        "data-icon-size",
+        "24"
+      );
+    });
+
     it("does not render checklist when not provided", () => {
       render(<PrimaryHero {...baseProps} />);
       expect(screen.queryByTestId("checklist")).not.toBeInTheDocument();

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

@@ -171,6 +171,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {/* checklist */}
             {checklist && (
               <Checklist
+                iconSize={24}
                 listItemClassName={`body2 text-left ${textColorClass}`}
                 items={checklist.map(item =>
                   item.iconUrl
@@ -230,7 +231,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                         {...primaryCta1}
                         renderCheckPlans={renderCheckPlans}
                         onModalButtonClick={onModalButtonClick}
-                        fullWidth={true}
+                        // fullWidth={true}
                         buttonClassName="lg:w-auto text-center"
                       />
                     </div>
@@ -243,7 +244,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
                         {...primaryCta2}
                         renderCheckPlans={renderCheckPlans}
                         onModalButtonClick={onModalButtonClick}
-                        fullWidth={true}
+                        // fullWidth={true}
                         buttonClassName="lg:w-auto text-center"
                       />
                     </div>