@windstream/react-shared-components 0.1.97 → 0.1.99

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

@@ -26,6 +26,7 @@ export const Button: React.FC<ButtonProps> = props => {
     buttonClassName,
     clickToOpen,
     tabmodalNameToOpen,
+    idNameToOpen,
     onModalButtonClick,
     onClick,
     iconName,
@@ -36,7 +37,10 @@ export const Button: React.FC<ButtonProps> = props => {
     ...rest
   } = props;
 
-  if (preDefinedFunctionExecution === "check availability") {
+  if (
+    preDefinedFunctionExecution === "check availability" &&
+    renderCheckPlans
+  ) {
     const checkPlansNode = renderCheckPlans?.({
       ctaText: buttonLabel,
       buttonVariant: buttonVariant,
@@ -46,10 +50,26 @@ export const Button: React.FC<ButtonProps> = props => {
     return checkPlansNode;
   }
 
+  function handleClickId() {
+    if (clickToOpen === "clickId" && idNameToOpen) {
+      const element = document.getElementById(idNameToOpen);
+      if (element) {
+        element.scrollIntoView({
+          behavior: "smooth",
+          block: "start",
+        });
+        element.click?.();
+      }
+    }
+  }
+
   function handleModalClick() {
     if (clickToOpen === "modal") {
       onModalButtonClick?.(tabmodalNameToOpen);
     }
+    if (clickToOpen === "clickId") {
+      handleClickId();
+    }
   }
 
   function linkClick(event: React.MouseEvent<HTMLAnchorElement>) {
@@ -65,8 +85,9 @@ export const Button: React.FC<ButtonProps> = props => {
   // Resolve the final href — merge non-UTM query params when preserveQueryParameters is true
   const currentSearch =
     typeof window !== "undefined" ? window.location.search : "";
-  const resolvedHref =
-    href && preserveQueryParameters && currentSearch
+  const resolvedHref = preDefinedFunctionExecution
+    ? undefined
+    : href && preserveQueryParameters && currentSearch
       ? buildPreservedQueryHref(href, currentSearch)
       : href;
 

package/src/contentful/blocks/button/types.ts

@@ -24,6 +24,7 @@ export type ButtonProps = {
   preserveQueryParameters?: boolean;
   clickToOpen?: string;
   tabmodalNameToOpen?: string;
+  idNameToOpen?: string;
   preDefinedFunctionExecution?: string;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
   linkClassName?: string;

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

@@ -39,18 +39,20 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
   const [emailError, setEmailError] = useState("");
 
   const validateEmail = (email: string) => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
     return emailRegex.test(email);
   };
 
   const handleOnSubmit = () => {
-    if (validateEmail(email)) {
+    if (!email.trim()) {
+      setEmailError("Email is required");
+    } else if (!validateEmail(email)) {
+      setEmailError("Invalid email address");
+    } else {
       onSubmit({ email });
       setEmail("");
       setFormSubmitted(true);
       setEmailError("");
-    } else {
-      setEmailError("Please enter a valid email address.");
     }
   };
 
@@ -84,9 +86,16 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
                 placeholder={inputPlaceholder}
                 value={email}
                 onChange={e => {
-                  setEmail(e.target.value);
-                  if (emailError) setEmailError("");
+                  const value = e.target.value;
+                  setEmail(value);
                   if (formSubmitted) setFormSubmitted(false);
+                  if (!value.trim()) {
+                    setEmailError("Email is required");
+                  } else if (!validateEmail(value)) {
+                    setEmailError("Invalid email address");
+                  } else {
+                    setEmailError("");
+                  }
                 }}
                 className="w-full flex-grow bg-transparent !pl-4 pr-6 py-3 text-[1rem] leading-none md:text-base font-normal text-text outline-none placeholder:input-text-placeholder md:py-4"
               />
@@ -99,7 +108,7 @@ export const EmailInputBlock: React.FC<EmailInputBlockProps> = props => {
             />
           </div>
           {emailError && (
-            <p className="mt-2 text-label4 font-semibold text-text-critical">
+            <p className="mt-2 text-label4 font-semibold text-text-inverse">
               {emailError}
             </p>
           )}

package/src/contentful/blocks/find-kinetic/index.tsx

@@ -16,6 +16,7 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
   title,
   color = "dark",
   maxWidth = true,
+  columns = 3,
 }) => {
   const bgColorClasses: Record<ThemeKey, string> = {
     blue: "bg-[#07B2E2]",
@@ -42,7 +43,7 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
         {title && (
           <Text
             as={enableHeading ? "h1" : "h2"}
-            className="heading2 md:heading1 md:text-center"
+            className="heading2 md:heading1 text-center"
           >
             {title}
           </Text>
@@ -50,16 +51,16 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
         {subTitle && (
           <Text
             as={enableHeading ? "h2" : "h3"}
-            className="heading3 mt-4 text-center"
+            className="subheading1 mt-4 text-center"
           >
             {subTitle}
           </Text>
         )}
 
-        <div className="mt-8 flex items-center xl:mt-16 xl:gap-10">
-          <div className="flex flex-col items-start gap-10 self-stretch xl:flex-[1_0_0]">
+        <div className="mt-2 flex flex-col items-center xl:mt-8 xl:flex-row xl:gap-10">
+          <div className="flex w-full flex-col items-start gap-10 self-stretch xl:flex-[1_0_0]">
             {description && (
-              <Text as="p" className="body1">
+              <Text as="p" className={`body1 w-full ${!image ? "text-center" : ""}`}>
                 {description}
               </Text>
             )}
@@ -72,60 +73,85 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
                     );
                     const numColumns = 2;
                     const numRows = Math.ceil(sortedList.length / numColumns);
-                    const rearranged = [];
+                    const rearranged: (typeof sortedList[0] | null)[] = [];
                     for (let row = 0; row < numRows; row++) {
                       for (let col = 0; col < numColumns; col++) {
                         const index = col * numRows + row;
-                        if (index < sortedList.length) {
-                          rearranged.push(sortedList[index]);
-                        }
+                        rearranged.push(index < sortedList.length ? sortedList[index] : null);
                       }
                     }
-                    return rearranged.map((item, index: number) => (
-                      <li key={`item-list-2-${index}`}>
-                        <Link
-                          href={getLocationHref(item.code)}
-                          className="label1"
-                        >
-                          {item.name}
-                        </Link>
-                      </li>
-                    ));
+                    return rearranged.map((item, index: number) =>
+                      item ? (
+                        <li key={`item-list-2-${index}`}>
+                          <Link href={getLocationHref(item.code)} className="label1">
+                            {item.name}
+                          </Link>
+                        </li>
+                      ) : (
+                        <li key={`item-list-2-${index}`} aria-hidden="true" />
+                      )
+                    );
                   })()}
                 </ul>
-                <ul className="hidden gap-x-6 gap-y-5 md:grid md:grid-cols-3">
+                <ul className="hidden w-full gap-x-6 gap-y-5 md:grid md:grid-cols-3 xl:hidden">
                   {(() => {
                     const sortedList = [...list].sort((a, b) =>
                       a.name.localeCompare(b.name)
                     );
                     const numColumns = 3;
                     const numRows = Math.ceil(sortedList.length / numColumns);
-                    const rearranged = [];
+                    const rearranged: (typeof sortedList[0] | null)[] = [];
                     for (let row = 0; row < numRows; row++) {
                       for (let col = 0; col < numColumns; col++) {
                         const index = col * numRows + row;
-                        if (index < sortedList.length) {
-                          rearranged.push(sortedList[index]);
-                        }
+                        rearranged.push(index < sortedList.length ? sortedList[index] : null);
                       }
                     }
-                    return rearranged.map((item, index: number) => (
-                      <li key={`item-list-3-${index}`}>
-                        <Link
-                          href={getLocationHref(item.code)}
-                          className="label1"
-                        >
-                          {item.name}
-                        </Link>
-                      </li>
-                    ));
+                    return rearranged.map((item, index: number) =>
+                      item ? (
+                        <li key={`item-list-md-${index}`}>
+                          <Link href={getLocationHref(item.code)} className="label1">
+                            {item.name}
+                          </Link>
+                        </li>
+                      ) : (
+                        <li key={`item-list-md-${index}`} aria-hidden="true" />
+                      )
+                    );
+                  })()}
+                </ul>
+                <ul className={`hidden w-full gap-x-6 gap-y-5 xl:grid xl:grid-cols-${columns}`}>
+                  {(() => {
+                    const sortedList = [...list].sort((a, b) =>
+                      a.name.localeCompare(b.name)
+                    );
+                    const numColumns = columns;
+                    const numRows = Math.ceil(sortedList.length / numColumns);
+                    const rearranged: (typeof sortedList[0] | null)[] = [];
+                    for (let row = 0; row < numRows; row++) {
+                      for (let col = 0; col < numColumns; col++) {
+                        const index = col * numRows + row;
+                        rearranged.push(index < sortedList.length ? sortedList[index] : null);
+                      }
+                    }
+                    return rearranged.map((item, index: number) =>
+                      item ? (
+                        <li key={`item-list-xl-${index}`}>
+                          <Link href={getLocationHref(item.code)} className="label1">
+                            {item.name}
+                          </Link>
+                        </li>
+                      ) : (
+                        <li key={`item-list-xl-${index}`} aria-hidden="true" />
+                      )
+                    );
                   })()}
                 </ul>
               </>
             )}
           </div>
           {image && (
-            <aside className="hidden xl:block">
+            <aside className="hidden md:block xl:flex-shrink-0">
               <NextImage width={472} height={100} src={image} alt="image" />
             </aside>
           )}

package/src/contentful/blocks/find-kinetic/types.ts

@@ -9,6 +9,7 @@ export type FindKineticProps = {
   list?: { name: string; code: string }[];
   maxWidth?: boolean;
   color?: "dark" | "light";
+  columns?: 2 | 3 | 4;
 };
 
 export type ThemeKey =

package/src/contentful/blocks/image-promo-bar/helper.tsx

@@ -17,7 +17,7 @@ export const PlayButton: React.FC<PlayButtonProps> = ({
         name="play_arrow"
         size={72 as any}
         fill={1}
-        className={`transition-colors duration-300 ${
+        className={`max-w-[72px] transition-colors duration-300 ${
           isOuterHovered
             ? "text-text-brand"
             : "text-slate-500 group-hover:text-text-brand"

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -31,7 +31,10 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   color = "light",
   imageWidth = 660,
   imageHeight = 660,
+  useOriginalImageAspectRatio = false,
+  isAboveTheFold = false,
   onModalButtonClick,
+  onClick,
   renderCheckPlans,
 }) => {
   const [activeVideo, setActiveVideo] = useState("");
@@ -61,9 +64,9 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   const contentVideo = videoLink && videoImage ? embedSelector() : null;
 
   return (
-    <div className="component-container shared-component-ipb">
+    <div className="component-container shared-component-ipb pb-16 pt-16">
       <div
-        className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-8 mt-16 md:mx-10`}
+        className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} px-5 pb-8 pt-8 md:px-10`}
       >
         <div
           className={`flex shrink-0 flex-col items-center gap-8 xl:items-stretch xl:gap-10 xl:gap-[126px] ${mediaPosition ? "xl:flex-row-reverse" : "xl:flex-row"}`}
@@ -113,6 +116,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                 listContainerClassName="mt-0 space-y-0 flex flex-col gap-3"
               />
             )}
+            {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
             {imageLinks.length > 0 && (
               <div className="flex gap-4">
                 {/* Image Links Collection */}
@@ -143,6 +147,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                       size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
+                      onClick={(e: React.MouseEvent) => onClick?.(e, "primary")}
                     />
                   </div>
                 )}
@@ -154,23 +159,42 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                       size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
+                      onClick={(e: React.MouseEvent) =>
+                        onClick?.(e, "secondary")
+                      }
                     />
                   </div>
                 )}
               </div>
             )}
-            {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
           </div>
-          <aside className="flex w-full shrink-0 items-center justify-center lg:w-auto">
+          <aside className="flex w-full flex-1 shrink-0 items-center justify-center lg:w-auto">
             {/* Media Section */}
             {image && (
-              <div className="relative h-[334px] w-[334px] overflow-hidden rounded-image md:h-[486px] md:w-[486px]">
+              <div
+                className={cx(
+                  !useOriginalImageAspectRatio
+                    ? "relative aspect-[16/9] w-full overflow-hidden rounded-image lg:h-[486px] xl:aspect-square xl:max-h-[486px] xl:w-[486px]"
+                    : "overflow-hidden rounded-image"
+                )}
+              >
                 <NextImage
                   src={image}
                   alt="section-image"
-                  fill={true}
-                  sizes="(min-width: 768px) 486px, 334px"
-                  className="object-cover"
+                  priority={isAboveTheFold}
+                  fill={!useOriginalImageAspectRatio}
+                  width={
+                    !useOriginalImageAspectRatio ? undefined : imageWidth || 660
+                  }
+                  height={
+                    !useOriginalImageAspectRatio
+                      ? undefined
+                      : imageHeight || 660
+                  }
+                  sizes="(max-width: 430px) 100vw, (max-width: 834px) 100vw, 50vw"
+                  className={cx(
+                    !useOriginalImageAspectRatio ? "object-cover" : "w-full"
+                  )}
                 />
               </div>
             )}
@@ -212,7 +236,9 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                   <div
                     className={cx(
                       "aspect-[16/9] w-full overflow-hidden rounded-image transition-opacity duration-300",
-                      isPlaying ? "opacity-100" : "opacity-0"
+                      isPlaying ? "opacity-100" : "opacity-0",
+                      !useOriginalImageAspectRatio &&
+                        "xl:aspect-square xl:max-h-[486px] xl:w-[486px]"
                     )}
                   >
                     {contentVideo}
@@ -239,7 +265,9 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
         </div>
       )}
       {disclaimer && (
-        <div className="mt-10 flex justify-center xl:mt-18">{disclaimer}</div>
+        <div className="mt-10 flex justify-center xl:mt-18">
+          <div>{disclaimer}</div>
+        </div>
       )}
     </div>
   );

package/src/contentful/blocks/image-promo-bar/types.ts

@@ -22,6 +22,8 @@ export type ImagePromoBarProps = {
   image: string;
   imageWidth: number;
   imageHeight: number;
+  useOriginalImageAspectRatio?: boolean;
+  isAboveTheFold?: boolean;
   mediaPosition: boolean;
   description: React.ReactNode;
   openDescriptionLinksOnANewTab: boolean;
@@ -35,6 +37,7 @@ export type ImagePromoBarProps = {
   maxWidth?: boolean;
   color: "light" | "dark";
   onModalButtonClick?: (id?: string) => void;
+  onClick?: (event: React.MouseEvent, source: "primary" | "secondary") => void;
   renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
 };
 

package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx

@@ -30,7 +30,7 @@ export const YoutubeEmbed: React.FC<Props> = props => {
   return (
     <div
       className={cx(
-        "relative h-0 w-full overflow-hidden pb-[56.25%]",
+        "relative h-full w-full overflow-hidden pb-[56.25%]",
         containerClassName
       )}
     >