@windstream/react-shared-components 0.2.68 → 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>
     ) : (
@@ -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");
 

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

@@ -180,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. */
@@ -212,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>