@windstream/react-shared-components 0.1.32 → 0.1.34

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

@@ -0,0 +1,146 @@
+"use client";
+
+
+import { useEffect, useRef, useState } from "react";
+import { getCookie, setCookie } from "../../../utils/cookie";
+import { Button } from "@shared/contentful/blocks/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { TypeComponentRichTextFields } from "./type";
+
+export default function CookieBanner({
+  content,
+}: {
+  content: TypeComponentRichTextFields;
+}) {
+  let marginBottom = 3;
+  const [isBannerVisible, setIsBannerVisible] = useState(false);
+  const [isStickyFooterPresent, setStickyFooterPresent] = useState(false);
+  const bannerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const cookieBannerClosed =
+    getCookie("cookieBannerClosed");
+    if (cookieBannerClosed === "true") {
+      setIsBannerVisible(false);
+    } else {
+      setIsBannerVisible(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    const checkElementPresence = () => {
+      const element = document.getElementById("anchored-banner");
+      setStickyFooterPresent(!!element);
+    };
+    checkElementPresence();
+  }, []);
+
+  // Add body class and calculate height for chat positioning
+  useEffect(() => {
+    if (isBannerVisible) {
+      window?.document?.body?.classList.add("cookie-banner-visible");
+    } else {
+      window?.document?.body?.classList.remove("cookie-banner-visible");
+    }
+
+    return () => {
+      window?.document?.body?.classList.remove("cookie-banner-visible");
+    };
+  }, [isBannerVisible]);
+
+  // Calculate cookie banner height and set CSS custom property
+  useEffect(() => {
+    if (!isBannerVisible) return;
+
+    const calculateCookieBannerHeight = () => {
+      if (bannerRef.current) {
+        const rect = bannerRef.current.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+
+        // Calculate how much space the banner occupies from the bottom of the viewport
+        // This is: viewport height - distance from top
+        const spaceFromBottom = viewportHeight - rect.top;
+
+        document.documentElement.style.setProperty(
+          "--cookie-banner-height",
+          `${spaceFromBottom}px`,
+        );
+      }
+    };
+
+    // Calculate initially after render and after a short delay to ensure layout is complete
+    const timer1 = setTimeout(calculateCookieBannerHeight, 100);
+    const timer2 = setTimeout(calculateCookieBannerHeight, 300);
+
+    // Recalculate on window resize with debounce
+    let resizeTimeout: ReturnType<typeof setTimeout>;
+    const handleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(calculateCookieBannerHeight, 150);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      clearTimeout(timer1);
+      clearTimeout(timer2);
+      clearTimeout(resizeTimeout);
+      window.removeEventListener("resize", handleResize);
+      document.documentElement.style.removeProperty("--cookie-banner-height");
+    };
+  }, [isBannerVisible, isStickyFooterPresent]);
+
+  const handleClose = () => {
+    const expirationDate = new Date(Date.now() + 43200 * 60 * 1000);
+    setIsBannerVisible(false);
+    setCookie("cookieBannerClosed", "true", {
+      expires: expirationDate,
+    });
+  };
+  if (isStickyFooterPresent) marginBottom = 14;
+
+  // Calculate margin values in pixels for inline styles
+  const marginBottomPx = marginBottom * 4; // Tailwind: 3 = 12px, 14 = 56px (each unit is 4px)
+  const marginLeftPx = 12; // mx-3 = 12px
+
+  if (!isBannerVisible) return null;
+
+  return (
+    <div
+      id="cookie-banner"
+      ref={bannerRef}
+      className="fixed z-[1000] max-w-[350px] md:max-w-[656px] rounded-xl bg-white py-5 pl-6 pr-12 text-black shadow-lg ring-1 ring-gray-900/10"
+      style={{
+        // maxWidth: maxWidth,
+        bottom: "0px",
+        right: "20px",
+        marginBottom: `${marginBottomPx}px`,
+        marginLeft: `${marginLeftPx}px`,
+      }}
+      aria-label="Cookie usage notification"
+    >
+      {" "}
+      {
+        <Button
+          showButtonAs="unstyled"
+          buttonClassName="absolute right-2 top-3 mr-2 mt-0 h-6 w-6 bg-white"
+          onClick={handleClose}
+        >
+          <MaterialIcon name="close" />
+        </Button>
+      }
+      {/* {content ? (
+        <div className="my-4 mx-auto [&>a]:footnote">
+          {renderContentfulRichText(
+            toDocument(content.richText),
+            false,
+            "footnote",
+            "footnote",
+          )}
+        </div>
+      ) : null} */}
+      {content.richText ? <div className="my-4 mx-auto [&>a]:footnote">
+        {content.richText}</div> : null}
+    </div>
+  );
+}

package/src/contentful/blocks/cookiebanner/type.ts

@@ -0,0 +1,7 @@
+export interface TypeComponentRichTextFields {
+  entryName?: string;
+  anchorId?: string;
+  title?: string;
+  isTargetBlank?: boolean;
+  richText: React.ReactNode;
+}

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

@@ -63,13 +63,13 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   return (
     <div className="component-container">
       <div
-        className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-8 mt-16`}
+        className={`image-promo-bar-content ${maxWidth ? "max-w-120 lg:mx-auto" : ""} mx-5 my-16 lg:px-8 xl:px-12`}
       >
         <div
-          className={`flex shrink-0 flex-col items-center gap-8 xl:gap-[126px] ${mediaPosition ? "xl:flex-row-reverse" : "xl:flex-row"}`}
+          className={`flex shrink-0 flex-col items-center gap-8 lg:gap-10 xl:gap-[126px] lg:items-stretch ${mediaPosition ? "lg:flex-row-reverse" : "lg:flex-row"}`}
         >
           <div
-            className={`flex flex-[1_0_0] flex-col items-start justify-center gap-8 xl:gap-10 ${color == "dark" ? "text-text" : "text-white"}`}
+            className={`flex flex-[1_0_0] flex-col items-start justify-center gap-8 lg:gap-10 ${color == "dark" ? "text-text" : "text-white"}`}
           >
             <div className="heading holder">
               {brow && (
@@ -91,7 +91,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               {subTitle && (
                 <Text
                   as={enableHeading ? "h2" : "h3"}
-                  className="subheading1 mt-3"
+                  className="subheading3 md:subheading1 mt-3"
                 >
                   {subTitle}
                 </Text>
@@ -105,7 +105,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             )}
             {/* Checklist Rendering */}
             {checklist.length > 0 && (
-              <Checklist items={checklist} iconPosition="top" iconSize={24} />
+              <Checklist items={checklist} iconPosition="top" iconSize={24} listItemClassName="body1 text-text" listContainerClassName="mt-0 space-y-0 flex flex-col gap-3" />
             )}
             {imageLinks.length > 0 && (
               <div className="flex gap-4">
@@ -128,22 +128,24 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             )}
             {/* CTAs and Disclaimers */}
             {(cta || secondaryCta) && (
-              <div className="flex w-full flex-col gap-8 xl:flex-row xl:gap-3">
+              <div className="flex w-full flex-col gap-3 xl:flex-row">
                 {cta && (
-                  <div className="primary-cta w-full xl:w-auto">
+                  <div className="primary-cta w-full xl:w-auto xl:shrink-0">
                     <Button
                       {...cta}
                       fullWidth={true}
+                      size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
                     />
                   </div>
                 )}
                 {secondaryCta && (
-                  <div className="secondary-cta">
+                  <div className="secondary-cta w-full xl:w-auto xl:shrink-0">
                     <Button
                       {...secondaryCta}
                       fullWidth={true}
+                      size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
                     />
@@ -154,16 +156,16 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
             {disclaimer && <div>{disclaimer}</div>}
           </div>
-          <aside className="flex w-full shrink-0 items-center justify-center xl:w-auto">
+          <aside className="flex w-full shrink-0 items-center justify-center lg:w-auto">
             {/* Media Section */}
             {image && (
-              <div className="relative flex aspect-[16/9] w-full justify-center xl:aspect-square xl:max-h-[486px] xl:w-[486px]">
+              <div className="relative w-[334px] h-[334px] md:w-[486px] md:h-[480px] rounded-image overflow-hidden">
                 <NextImage
                   src={image}
                   alt="section-image"
-                  width={imageWidth}
-                  height={imageHeight}
-                  className="bottom-0 left-0 right-0 top-0 h-full rounded-[40px] object-cover"
+                  fill
+                  sizes="(min-width: 768px) 486px, 334px"
+                  className="object-cover"
                 />
               </div>
             )}
@@ -171,7 +173,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             {videoLink?.link && (
               <div
                 className={cx(
-                  "video-section relative w-full cursor-pointer overflow-hidden rounded-[40px] transition-all duration-300 xl:w-[486px]",
+                  "video-section relative w-full cursor-pointer overflow-hidden rounded-image transition-all duration-300 lg:w-[486px]",
                   !isPlaying && "hover:shadow-2xl"
                 )}
                 onClick={handlePlayClick}
@@ -192,7 +194,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                       alt="Video preview"
                       width={486}
                       height={486}
-                      className="absolute inset-0 h-full w-full rounded-[40px] object-cover"
+                      className="absolute inset-0 h-full w-full rounded-image object-cover"
                     />
                   )}
                   <div className="absolute inset-0 flex items-center justify-center">
@@ -204,7 +206,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                 {!videoPopup && isPlaying && (
                   <div
                     className={cx(
-                      "aspect-[16/9] w-full overflow-hidden rounded-[40px] transition-opacity duration-300",
+                      "aspect-[16/9] w-full overflow-hidden rounded-image transition-opacity duration-300",
                       isPlaying ? "opacity-100" : "opacity-0"
                     )}
                   >

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

@@ -48,16 +48,17 @@ export const Modal: React.FC<ExtendedModalProps> = props => {
         >
           <Dialog.Overlay />
         </motion.div>
+        <div className="fixed inset-0 z-[1001] flex items-center justify-center pointer-events-none">
         <motion.div
           initial="closed"
           animate={isOpen ? "open" : "closed"}
           variants={contentAnimationVariants}
           transition={{ type: "tween", duration: 0.3, ease: "easeInOut" }}
-          className="fixed left-1/2 top-1/2 z-[1001] w-auto -translate-x-1/2 -translate-y-1/2 focus:outline-none"
+          className="w-[calc(100vw-10px)] sm:w-[calc(100vw-90px)] pointer-events-auto focus:outline-none"
         >
           <Dialog.Content
             className={cx(
-              "fixed left-[50%] top-[50%] w-[90vw] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-bg p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none",
+              "relative w-full mx-auto rounded-modal bg-bg p-[25px] shadow-drop focus:outline-none",
               bodyClassName
             )}
             style={{ maxWidth: sizeToPixel[size || "lg"] }}
@@ -75,9 +76,9 @@ export const Modal: React.FC<ExtendedModalProps> = props => {
                 {title ? (
                   <Text
                     className={cx(
-                      "mx-auto mb-3 mt-5 text-center",
-                      "heading5 md:max-w-[80%] md:pt-0",
-                      "mb-5 md:mb-[60px]"
+                      "w-full pr-8 sm:pr-0 mb-3 mt-5 text-center",
+                      "heading5 md:pt-0",
+                      "mb-4 md:mb-[60px]"
                     )}
                     as="h2"
                   >
@@ -85,14 +86,17 @@ export const Modal: React.FC<ExtendedModalProps> = props => {
                   </Text>
                 ) : null}
 
-                {description ? <Text as="div">{description}</Text> : null}
+                {description ? <Text as="div" className="mb-8 sm:mb-5">{description}</Text> : null}
 
-                {content}
-                {children ? children : null}
+                <div className="flex flex-col gap-4 sm:gap-5">
+                  {content}
+                  {children ? children : null}
+                </div>
               </div>
             </div>
           </Dialog.Content>
         </motion.div>
+        </div>
       </Dialog.Portal>
     </Dialog.Root>
   );

package/src/contentful/index.ts

@@ -76,3 +76,6 @@ export type { DynamicTabsT } from "./blocks/dynamic-tabs/types";
 
 export { AnchoredBottomBanner } from "./blocks/anchored-bottom-banner";
 export type { AnchoredBottomBannerProps } from "./blocks/anchored-bottom-banner/types";
+
+export { default as CookieBanner } from "./blocks/cookiebanner";
+export type { TypeComponentRichTextFields as CookieBannerProps } from "./blocks/cookiebanner/type";

package/src/utils/cookie.ts

@@ -56,3 +56,25 @@ export function setUTMs(
 export function removeUTMs(domain: string = DEFAULT_DOMAIN): void {
   Cookies.remove(UTM_COOKIE_KEY, { domain, path: "/" });
 }
+export function getCookie(key: string): string | null {
+  if (typeof window === "undefined") return "";
+  const encryptedValue = Cookies.get(key);
+
+  if (encryptedValue) return Base64.decode(encryptedValue);
+
+  return null;
+};
+export const getParsedCookie = (key: string) => {
+  try {
+    return JSON.parse(getCookie(key) || "");
+  } catch {
+    return null;
+  }
+};
+export const setCookie = (key: string, value: any, options: Cookies.CookieAttributes) => {
+  if (typeof window === "undefined") return;
+  const stringValue = JSON.stringify(value);
+  const encryptedValue = Base64.encode(stringValue);
+
+  Cookies.set(key, encryptedValue, options);
+};

package/src/utils/index.ts

@@ -49,7 +49,7 @@ export { clsx };
 export type { ClassValue };
 
 // UTM & Cookie utilities
-export { getUTMs, setUTMs, removeUTMs } from "./cookie";
+export { getUTMs, setUTMs, removeUTMs, getCookie, getParsedCookie, setCookie } from "./cookie";
 export {
   getUtmParametersFromURL,
   combineExistingAndNewUTMs,