@windstream/react-shared-components 0.2.15 → 0.2.17

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

@@ -16,23 +16,36 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
     backgroundColor = "green",
     successFeedback,
     onSubmit,
+    themeColor,
+    showPinWheel = true,
+    padding = "large",
+    requiredErrorMessage = "Email is required",
+    validationErrorMessage = "Invalid email address",
   } = props || {};
 
   const bgClasses: Record<string, string> = {
-    navy: "bg-bg-fill-inverse",
     green: "bg-bg-fill-brand",
-    blue: "bg-bg-fill-brand",
-    yellow: "bg-bg-fill-brand-accent",
     white: "bg-bg",
+    gray90: "bg-[#464646]",
+  };
+
+  const themeColorClasses: Record<string, string> = {
+    green: "bg-bg-fill-brand",
+    blue: "bg-bg-fill-brand-supporting",
+    orange: "bg-orange-500",
+    purple: "bg-bg-fill-brand-tertiary",
   };
 
   const normalizedBg = (backgroundColor as string)?.toLowerCase?.() || "green";
-  const bgColorClass =
-    bgClasses[normalizedBg as keyof typeof bgClasses] || bgClasses.green;
+  const bgColorClass = themeColor
+    ? themeColorClasses[themeColor] || themeColorClasses.green
+    : bgClasses[normalizedBg as keyof typeof bgClasses] || bgClasses.green;
 
-  // Determine if text should be white based on background
-  const textWhite = ["green", "blue", "navy"].includes(normalizedBg);
-  const textColor = textWhite ? "text-white" : "text-text";
+  const darkBgColors = ["green", "gray90", "blue", "orange", "purple"];
+  const effectiveColor = themeColor || normalizedBg;
+  const textColor = darkBgColors.includes(effectiveColor) ? "text-white" : "text-text";
+
+  const paddingClass = padding === "none" ? "!py-0 md:!py-0" : "!py-8 md:!py-20";
 
   const [email, setEmail] = useState("");
   const [formSubmitted, setFormSubmitted] = useState(false);
@@ -45,9 +58,9 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
 
   const handleOnSubmit = () => {
     if (!email.trim()) {
-      setEmailError("Email is required");
+      setEmailError(requiredErrorMessage);
     } else if (!validateEmail(email)) {
-      setEmailError("Invalid email address");
+      setEmailError(validationErrorMessage);
     } else {
       onSubmit({ email });
       setEmail("");
@@ -57,10 +70,17 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
   };
 
   return (
-    <section id={anchorId} className="w-full px-4 !py-8 md:!py-20 md:px-0">
+    <section id={anchorId} className={`w-full px-4 ${paddingClass} md:px-0`}>
       <div
-        className={`mx-auto max-w-[1200px] overflow-hidden !rounded-[20px] md:rounded-[20px] flex flex-col items-start !px-5 !pt-6 !pb-10 md:!p-10 md:!pt-12 !h-[344px] md:!w-auto md:!h-[367px] ${bgColorClass}`}        
+        className={`mx-auto max-w-[1200px] overflow-hidden !rounded-[20px] md:rounded-[20px] flex flex-col items-start !px-5 !pt-6 !pb-10 md:!p-10 md:!pt-12 !h-[344px] md:!w-auto md:!h-[367px] relative ${bgColorClass}`}
       >
+        {showPinWheel && (
+          <div className={`absolute right-[-28px] top-0 hidden h-[496px] w-[485px] pointer-events-none lg:block ${textColor}`} aria-hidden="true">
+            <svg aria-hidden="true" focusable="false" viewBox="0 0 485 496" className="h-full w-full opacity-10">
+              <circle cx="242" cy="248" r="200" fill="currentColor" />
+            </svg>
+          </div>
+        )}
         <div className="w-full">
           <div className="lg:w-[548px]">
             {title && (
@@ -90,9 +110,9 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
                   setEmail(value);
                   if (formSubmitted) setFormSubmitted(false);
                   if (!value.trim()) {
-                    setEmailError("Email is required");
+                    setEmailError(requiredErrorMessage);
                   } else if (!validateEmail(value)) {
-                    setEmailError("Invalid email address");
+                    setEmailError(validationErrorMessage);
                   } else {
                     setEmailError("");
                   }
@@ -126,4 +146,4 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
   );
 };
 
-export default EmailInputBlock;
+export default EmailInputBlock;

package/src/contentful/blocks/email-input-block/types.ts

@@ -9,7 +9,12 @@ export interface EmailInputBlockProps {
   successFeedback?: string;
   ctaText?: string;
   caption?: React.ReactNode;
-  backgroundColor?: "green" | "white" | "yellow" | "blue" | "navy";
+  backgroundColor?: "green" | "white" | "yellow" | "blue" | "navy" | "gray90";  
+  themeColor?: "blue" | "green" | "orange" | "purple";
+  showPinWheel?: boolean;
+  padding?: "none" | "large";
+  validationErrorMessage?: string;
+  requiredErrorMessage?: string;
   onSubmit: (values: EmailInputFormValues) => void;
 }
 

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

@@ -84,7 +84,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {/* checklist */}
             {checklist && (
               <Checklist
-                listItemClassName="text-white text-left"
+                listItemClassName="body2 text-white text-left"
                 items={checklist.map(item =>
                   item.iconUrl
                     ? { title: item.title, iconUrl: item.iconUrl }

package/src/hooks/use-carousel-swipe.test.ts

@@ -390,4 +390,43 @@ describe("useCarouselSwipe", () => {
       removeEventListenerSpy.mockRestore();
     });
   });
+
+  describe("SSR safety (window undefined)", () => {
+    it("can be created without throwing when window is undefined and uses fallback containerWidth", () => {
+      const origWindow = globalThis.window;
+      // @ts-expect-error - intentionally deleting window to simulate SSR
+      delete globalThis.window;
+
+      // Polyfill TextEncoder/TextDecoder required by react-dom/server in jest
+      const { TextEncoder, TextDecoder } = require("util");
+      const origTE = globalThis.TextEncoder;
+      const origTD = globalThis.TextDecoder;
+      globalThis.TextEncoder = TextEncoder;
+      globalThis.TextDecoder = TextDecoder;
+
+      let hookResult: ReturnType<typeof useCarouselSwipe> | undefined;
+
+      function TestComponent() {
+        hookResult = useCarouselSwipe(defaultConfig);
+        return null;
+      }
+
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const { renderToString } = require("react-dom/server");
+        // renderToString simulates real SSR: no window, no effects run
+        renderToString(React.createElement(TestComponent));
+
+        // containerWidth should use the fallback value of 1 since window is absent
+        expect(hookResult!.containerWidth).toBe(1);
+        expect(hookResult!.isSwiping).toBe(false);
+        expect(hookResult!.currentIndex).toBe(0);
+      } finally {
+        // Always restore globals so subsequent tests aren't affected
+        globalThis.window = origWindow;
+        globalThis.TextEncoder = origTE;
+        globalThis.TextDecoder = origTD;
+      }
+    });
+  });
 });

package/src/hooks/use-carousel-swipe.ts

@@ -115,7 +115,9 @@ export function useCarouselSwipe(
   const [currentIndex, setCurrentIndex] = useState(0);
   const [swipeOffset, setSwipeOffset] = useState(0);
   const [isSwiping, setIsSwiping] = useState(false);
-  const [containerWidth, setContainerWidth] = useState(window.innerWidth);
+  const [containerWidth, setContainerWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 1,
+  );
   // Performance: Store mobile state to avoid repeated window.innerWidth checks on every render
   // This prevents expensive DOM queries during swipe operations
   const [isMobile, setIsMobile] = useState(false);