@windstream/react-shared-components 0.2.45 → 0.2.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.45",
+  "version": "0.2.47",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",
@@ -110,12 +110,14 @@
     "@types/react-modal": "3.16.3",
     "@types/react-transition-group": "4.4.12",
     "clsx": "2.1.1",
+    "formik": "^2.4.6",
     "framer-motion": "10.12.16",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
     "react-modal": "3.16.3",
     "react-select": "5.10.2",
-    "react-transition-group": "4.4.5"
+    "react-transition-group": "4.4.5",
+    "yup": "^1.7.0"
   },
   "optionalDependencies": {
     "@types/js-cookie": "^3.0.6"

package/src/components/brand-button/index.tsx

@@ -48,8 +48,8 @@ export const BrandButton = forwardRef<
     const getVariantClasses = () => {
       const baseClasses = cx(
         sizeToClassNames(size),
-        "rounded-button overflow-visible flex lg:inline-flex  items-center justify-center text-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top lg:whitespace-nowrap",
-        fullWidth ? "w-full" : "w-full lg:w-auto"
+        "rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:outline focus:outline-2 focus:outline-offset-2 cursor-pointer transition-colors duration-200 align-top sm:whitespace-nowrap",
+        fullWidth ? "w-full" : "w-auto"
       );
 
       const variantClasses: Record<ButtonVariantsT, string> = {

package/src/components/video-link/index.test.tsx

@@ -263,4 +263,4 @@ describe("VideoLink", () => {
       "false"
     );
   });
-});
+});

package/src/components/video-link/index.tsx

@@ -20,10 +20,10 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
   const [isHovered, setIsHovered] = useState(false);
 
   const videoSourceType = videoLink?.videoSourceType;
+  const usingContentfulAsset =
+    videoSourceType === "contentful" && !!videoLink?.videoAssetUrl;
   const videoHref =
-    (videoSourceType === "contentful"
-      ? videoLink?.videoAssetUrl
-      : videoLink?.link) ?? "";
+    (usingContentfulAsset ? videoLink?.videoAssetUrl : videoLink?.link) ?? "";
 
   // The video's own poster - never the promo bar's plain image field.
   const posterImage = videoLink?.image;
@@ -69,7 +69,7 @@ export const VideoLink: React.FC<VideoLinkComponentProps> = ({
   };
 
   const embedSelector = () => {
-    if (videoSourceType === "contentful") {
+    if (usingContentfulAsset) {
       return (
         <ContentfulVideoEmbed
           videoAssetUrl={videoLink?.videoAssetUrl}
@@ -92,7 +92,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]",
           !isPlaying && "hover:ring-2 hover:ring-border-focus"
         )}
         onClick={handlePlayClick}
@@ -167,4 +167,4 @@ export type {
   VideoEmbedProps,
   VideoLinkComponentProps,
   VideoLinkProps,
-} from "./types";
+} from "./types";

package/src/contentful/blocks/email-input-block/index.test.tsx

@@ -1,204 +1,232 @@
+/// <reference types="jest" />
+/// <reference types="@testing-library/jest-dom" />
+
 import { EmailInputBlock } from "./index";
+import { EmailInputBlockProps } from "./types";
 
 import { fireEvent, render, screen } from "@testing-library/react";
 
-describe("EmailInputBlock", () => {
-  const defaultProps = {
-    onSubmit: jest.fn(),
-  };
+const defaultProps: EmailInputBlockProps = {
+  onSubmit: jest.fn(),
+};
 
+describe("EmailInputBlock", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it("renders with default props", () => {
-    const { container } = render(<EmailInputBlock {...defaultProps} />);
-    expect(container.querySelector("#email-input")).toBeInTheDocument();
-  });
+  describe("Rendering", () => {
+    it("renders with default props", () => {
+      const { container } = render(<EmailInputBlock {...defaultProps} />);
+      expect(container.querySelector("#email-input")).toBeInTheDocument();
+    });
 
-  it("renders custom anchorId", () => {
-    const { container } = render(
-      <EmailInputBlock {...defaultProps} anchorId="custom-anchor" />
-    );
-    expect(container.querySelector("#custom-anchor")).toBeInTheDocument();
-  });
+    it("renders custom anchorId", () => {
+      const { container } = render(
+        <EmailInputBlock {...defaultProps} anchorId="custom-anchor" />
+      );
+      expect(container.querySelector("#custom-anchor")).toBeInTheDocument();
+    });
 
-  it("renders title when provided", () => {
-    render(<EmailInputBlock {...defaultProps} title="Join us" />);
-    expect(screen.getByText("Join us")).toBeInTheDocument();
-    expect(screen.getByText("Join us").tagName).toBe("H1");
-  });
+    it("renders title when provided", () => {
+      render(<EmailInputBlock {...defaultProps} title="Join us" />);
+      const title = screen.getByText("Join us");
+      expect(title).toBeInTheDocument();
+      expect(title.tagName).toBe("H1");
+    });
 
-  it("does not render title when not provided", () => {
-    const { container } = render(<EmailInputBlock {...defaultProps} />);
-    expect(container.querySelector("h1")).not.toBeInTheDocument();
-  });
+    it("does not render title when not provided", () => {
+      const { container } = render(<EmailInputBlock {...defaultProps} />);
+      expect(container.querySelector("h1")).not.toBeInTheDocument();
+    });
 
-  it("renders subTitle when provided", () => {
-    render(<EmailInputBlock {...defaultProps} subTitle="Stay updated" />);
-    expect(screen.getByText("Stay updated")).toBeInTheDocument();
-    expect(screen.getByText("Stay updated").tagName).toBe("H2");
-  });
+    it("renders subTitle when provided", () => {
+      render(<EmailInputBlock {...defaultProps} subTitle="Stay updated" />);
+      const subtitle = screen.getByText("Stay updated");
+      expect(subtitle).toBeInTheDocument();
+      expect(subtitle.tagName).toBe("H2");
+    });
 
-  it("does not render subTitle when not provided", () => {
-    const { container } = render(<EmailInputBlock {...defaultProps} />);
-    expect(container.querySelector("h2")).not.toBeInTheDocument();
-  });
+    it("does not render subTitle when not provided", () => {
+      const { container } = render(<EmailInputBlock {...defaultProps} />);
+      expect(container.querySelector("h2")).not.toBeInTheDocument();
+    });
 
-  it("renders emailInputDescription when provided", () => {
-    render(
-      <EmailInputBlock {...defaultProps} emailInputDescription="Sign up now" />
-    );
-    expect(screen.getByText("Sign up now")).toBeInTheDocument();
-  });
+    it("renders emailInputDescription when provided", () => {
+      render(
+        <EmailInputBlock
+          {...defaultProps}
+          emailInputDescription="Sign up now"
+        />
+      );
+      expect(screen.getByText("Sign up now")).toBeInTheDocument();
+    });
 
-  it("renders caption when provided", () => {
-    render(<EmailInputBlock {...defaultProps} caption="No spam" />);
-    expect(screen.getByText("No spam")).toBeInTheDocument();
-  });
+    it("renders caption when provided", () => {
+      render(<EmailInputBlock {...defaultProps} caption="No spam" />);
+      expect(screen.getByText("No spam")).toBeInTheDocument();
+    });
 
-  it("does not render caption when not provided", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    expect(screen.queryByText("No spam")).not.toBeInTheDocument();
-  });
+    it("does not render caption when not provided", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      expect(screen.queryByText("No spam")).not.toBeInTheDocument();
+    });
 
-  it("uses default placeholder text", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    expect(
-      screen.getByPlaceholderText("Enter your email here")
-    ).toBeInTheDocument();
-  });
+    it("uses default placeholder text", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      expect(
+        screen.getByPlaceholderText("Enter your email here")
+      ).toBeInTheDocument();
+    });
 
-  it("uses custom placeholder text", () => {
-    render(<EmailInputBlock {...defaultProps} inputPlaceholder="Your email" />);
-    expect(screen.getByPlaceholderText("Your email")).toBeInTheDocument();
+    it("uses custom placeholder text", () => {
+      render(
+        <EmailInputBlock {...defaultProps} inputPlaceholder="Your email" />
+      );
+      expect(screen.getByPlaceholderText("Your email")).toBeInTheDocument();
+    });
   });
 
-  it("calls onSubmit with email on valid submission", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "test@example.com" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(defaultProps.onSubmit).toHaveBeenCalledWith({
-      email: "test@example.com",
+  describe("Form submission", () => {
+    it("calls onSubmit with email on valid submission", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "test@example.com" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(defaultProps.onSubmit).toHaveBeenCalledWith({
+        email: "test@example.com",
+      });
     });
-  });
 
-  it("clears email after successful submission", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    const input = screen.getByPlaceholderText(
-      "Enter your email here"
-    ) as HTMLInputElement;
-    fireEvent.change(input, { target: { value: "test@example.com" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(input.value).toBe("");
+    it("clears email after successful submission", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      const input = screen.getByPlaceholderText(
+        "Enter your email here"
+      ) as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "test@example.com" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(input.value).toBe("");
+    });
   });
 
-  it("shows error for invalid email", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "invalid" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(screen.getByText("Invalid email address")).toBeInTheDocument();
-    expect(defaultProps.onSubmit).not.toHaveBeenCalled();
-  });
+  describe("Validation", () => {
+    it("shows error for invalid email", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "invalid" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.getByText("Invalid email address")).toBeInTheDocument();
+      expect(defaultProps.onSubmit).not.toHaveBeenCalled();
+    });
 
-  it("shows required error for empty email", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(screen.getByText("Email is required")).toBeInTheDocument();
-    expect(defaultProps.onSubmit).not.toHaveBeenCalled();
-  });
+    it("shows required error for empty email", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.getByText("Email is required")).toBeInTheDocument();
+      expect(defaultProps.onSubmit).not.toHaveBeenCalled();
+    });
 
-  it("clears error when user types a valid email after error", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "invalid" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(screen.getByText("Invalid email address")).toBeInTheDocument();
-
-    fireEvent.change(input, { target: { value: "user@test.com" } });
-    expect(
-      screen.queryByText("Invalid email address")
-    ).not.toBeInTheDocument();
+    it("clears error when user types a valid email after error", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "invalid" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.getByText("Invalid email address")).toBeInTheDocument();
+
+      fireEvent.change(input, { target: { value: "user@test.com" } });
+      expect(
+        screen.queryByText("Invalid email address")
+      ).not.toBeInTheDocument();
+    });
   });
 
-  it("shows success feedback after valid submission", () => {
-    render(<EmailInputBlock {...defaultProps} successFeedback="Thanks!" />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "user@test.com" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(screen.getByText("Thanks!")).toBeInTheDocument();
-  });
+  describe("Success feedback", () => {
+    it("shows success feedback after valid submission", () => {
+      render(<EmailInputBlock {...defaultProps} successFeedback="Thanks!" />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "user@test.com" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.getByText("Thanks!")).toBeInTheDocument();
+    });
 
-  it("hides success feedback when user types again", () => {
-    render(<EmailInputBlock {...defaultProps} successFeedback="Thanks!" />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "user@test.com" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    expect(screen.getByText("Thanks!")).toBeInTheDocument();
+    it("hides success feedback when user types again", () => {
+      render(<EmailInputBlock {...defaultProps} successFeedback="Thanks!" />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "user@test.com" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.getByText("Thanks!")).toBeInTheDocument();
 
-    fireEvent.change(input, { target: { value: "x" } });
-    expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
-  });
+      fireEvent.change(input, { target: { value: "x" } });
+      expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
+    });
 
-  it("does not show success feedback without successFeedback prop", () => {
-    render(<EmailInputBlock {...defaultProps} />);
-    const input = screen.getByPlaceholderText("Enter your email here");
-    fireEvent.change(input, { target: { value: "user@test.com" } });
-    fireEvent.click(screen.getByText("Sign me up"));
-    // No success text rendered
-    expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
+    it("does not show success feedback without successFeedback prop", () => {
+      render(<EmailInputBlock {...defaultProps} />);
+      const input = screen.getByPlaceholderText("Enter your email here");
+      fireEvent.change(input, { target: { value: "user@test.com" } });
+      fireEvent.click(screen.getByText("Sign me up"));
+      expect(screen.queryByText("Thanks!")).not.toBeInTheDocument();
+    });
   });
 
-  it("applies green theme background by default", () => {
-    const { container } = render(<EmailInputBlock {...defaultProps} />);
-    expect(container.querySelector(".bg-bg-fill-brand")).toBeInTheDocument();
-  });
+  describe("Themes", () => {
+    it("applies green theme background by default", () => {
+      const { container } = render(<EmailInputBlock {...defaultProps} />);
+      expect(
+        container.querySelector(".bg-bg-fill-brand")
+      ).toBeInTheDocument();
+    });
 
-  it("applies blue theme background class", () => {
-    const { container } = render(
-      <EmailInputBlock {...defaultProps} themeColor="blue" />
-    );
-    expect(
-      container.querySelector(".bg-bg-fill-brand-supporting")
-    ).toBeInTheDocument();
-  });
+    it("applies blue theme background class", () => {
+      const { container } = render(
+        <EmailInputBlock {...defaultProps} themeColor="blue" />
+      );
+      expect(
+        container.querySelector(".bg-bg-fill-brand-supporting")
+      ).toBeInTheDocument();
+    });
 
-  it("applies purple theme background class", () => {
-    const { container } = render(
-      <EmailInputBlock {...defaultProps} themeColor="purple" />
-    );
-    expect(
-      container.querySelector(".bg-bg-fill-brand-tertiary")
-    ).toBeInTheDocument();
-  });
+    it("applies purple theme background class", () => {
+      const { container } = render(
+        <EmailInputBlock {...defaultProps} themeColor="purple" />
+      );
+      expect(
+        container.querySelector(".bg-bg-fill-brand-tertiary")
+      ).toBeInTheDocument();
+    });
 
-  it("applies white outer background class by default", () => {
-    const { container } = render(<EmailInputBlock {...defaultProps} />);
-    expect(container.querySelector("section")).toHaveClass("bg-bg");
-  });
+    it("applies white outer background class by default", () => {
+      const { container } = render(<EmailInputBlock {...defaultProps} />);
+      expect(container.querySelector("section")).toHaveClass("bg-bg");
+    });
 
-  it("uses white text for dark themes", () => {
-    render(
-      <EmailInputBlock {...defaultProps} themeColor="blue" title="Blue title" />
-    );
-    expect(screen.getByText("Blue title").className).toContain("text-white");
-  });
+    it("uses white text for dark themes", () => {
+      render(
+        <EmailInputBlock
+          {...defaultProps}
+          themeColor="blue"
+          title="Blue title"
+        />
+      );
+      expect(screen.getByText("Blue title")).toHaveClass("text-white");
+    });
 
-  it("uses dark text for the white theme", () => {
-    render(
-      <EmailInputBlock
-        {...defaultProps}
-        themeColor="white"
-        title="White title"
-      />
-    );
-    expect(screen.getByText("White title").className).toContain("text-text");
+    it("uses dark text for the white theme", () => {
+      render(
+        <EmailInputBlock
+          {...defaultProps}
+          themeColor="white"
+          title="White title"
+        />
+      );
+      expect(screen.getByText("White title")).toHaveClass("text-text");
+    });
   });
 
-  it("uses custom ctaText", () => {
-    render(<EmailInputBlock {...defaultProps} ctaText="Subscribe" />);
-    expect(screen.getByText("Subscribe")).toBeInTheDocument();
+  describe("Call to action", () => {
+    it("uses custom ctaText", () => {
+      render(<EmailInputBlock {...defaultProps} ctaText="Subscribe" />);
+      expect(screen.getByText("Subscribe")).toBeInTheDocument();
+    });
   });
 });

package/src/contentful/blocks/fiber-form/constants.ts

@@ -0,0 +1,81 @@
+import type { FiberFormInputList, FiberFormValues } from "../../blocks/fiber-form/types";
+import * as Yup from "yup";
+
+export const fiberFormInputInitialValues: FiberFormValues = {
+  firstName: "",
+  lastName: "",
+  address: "",
+  phone: "",
+  email: "",
+  unit: "",
+  zip: "",
+  isManualAddress: false,
+  isMarketingCom: false,
+  addressToSend: {},
+  notes: "",
+  referralCode: "",
+  hasUnits: false,
+};
+
+export const fiberFormInputList: FiberFormInputList = {
+  firstName: { placeholder: "John" },
+  lastName: { placeholder: "Doe" },
+  address: { placeholder: "Street address" },
+  phoneNumber: { placeholder: "Phone number" },
+  emailAddress: { placeholder: "Email address" },
+  unit: { placeholder: "Unit (optional)" },
+  zip: { placeholder: "Zip" },
+  notes: { placeholder: "Notes or Comments" },
+  referralCode: { placeholder: "Referral Code" },
+};
+
+export const fiberFormAddressCollectionFormSchema = Yup.object({
+  firstName: Yup.string()
+    .required("First name is required")
+    .min(2, "Enter a valid First name")
+    .matches(/^[a-zA-Z\s]*$/, "Enter a valid First name"),
+  lastName: Yup.string()
+    .required("Last name is required")
+    .min(2, "Enter a valid Last name")
+    .matches(/^[a-zA-Z\s]*$/, "Enter a valid Last name"),
+  isManualAddress: Yup.boolean(),
+  isMarketingCom: Yup.boolean(),
+  hasUnits: Yup.boolean(),
+  unit: Yup.string().when("hasUnits", {
+    is: true,
+    then: schema => schema.required("Unit is required"),
+    otherwise: schema =>
+      schema.matches(/^[a-zA-Z0-9\s#]*$/, "Enter a valid Unit"),
+  }),
+  zip: Yup.string().when("isManualAddress", {
+    is: true,
+    then: schema =>
+      schema
+        .required("Zip is required")
+        .matches(/^\d{5}$/, "Enter a valid Zip"),
+  }),
+  address: Yup.string()
+    .required("Enter your home address (street, city, state, and ZIP below)")
+    .when("isManualAddress", {
+      is: true,
+      then: schema =>
+        schema.matches(
+          /^(\d{1,}) [a-zA-Z0-9\s]+(\,)? [a-zA-Z\s]+(\,)? [A-Z]{2}( [0-9]{5,6})?$/,
+          "Enter your home address (street, city, state, and ZIP below)"
+        ),
+    }),
+  phone: Yup.string()
+    .required("Phone is required")
+    .matches(
+      /^\([0-9]{3}\)\s[0-9]{3}-[0-9]{4}$/,
+      "Please enter a valid phone number"
+    ),
+  email: Yup.string()
+    .email("Invalid email")
+    .matches(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, "Invalid email")
+    .required("Email is required"),
+  notes: Yup.string(),
+  referralCode: Yup.string()
+    .max(50, "Referral code must not exceed 50 characters")
+    .matches(/^\S*$/, "Referral code must not contain spaces"),
+});