@windstream/react-shared-components 0.1.31 → 0.1.33

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

@@ -1,85 +1,85 @@
-import React from "react";
-import { TabSwitch } from "../carousel/helper";
-import { ProductCardCarousel, TestimonialCarousel } from "./helper";
-import {
-  CarouselProps,
-  CarouselWithProductCards,
-  CarouselWithTestimonialCards,
-} from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Carousel: React.FC<CarouselProps> = ({
-  fields,
-  hasTestimonialCards,
-  hasProductCards,
-  disclaimerText,
-  backgroundColor,
-  activeTab,
-  setActiveTab,
-  tabs,
-  onModalButtonClick,
-  renderCheckPlans,
-  testimonialAutoScroll = true,
-  showSwitch = false,
-}) => {
-  const baseClass = hasProductCards
-    ? "px-3 py-9 md:py-20"
-    : hasTestimonialCards
-      ? "px-3 py-12 md:pt-20 md:pb-16"
-      : "";
-  return (
-    <div className={`${backgroundColor} ${baseClass} mx-auto overflow-hidden`}>
-      <div className="relative mx-auto flex max-w-[1280px] flex-col gap-8 overflow-visible md:gap-12">
-        <div>
-          <Text
-            as="h2"
-            className="heading2 text-text md:heading1 md:text-center"
-          >
-            {fields?.title}
-          </Text>
-          {fields?.subTitle && (
-            <Text as="h3" className="body1 px-4 pt-4 md:text-center">
-              {fields?.subTitle}
-            </Text>
-          )}
-        </div>
-        {showSwitch && hasProductCards && (
-          <div className="flex flex-col gap-8">
-            {showSwitch && hasProductCards && tabs.length > 1 && (
-              <TabSwitch
-                tabs={tabs}
-                activeTab={activeTab}
-                onChange={setActiveTab}
-              />
-            )}
-            {hasProductCards && (
-              <ProductCardCarousel
-                onModalButtonClick={onModalButtonClick}
-                renderCheckPlans={renderCheckPlans}
-                fields={fields as CarouselWithProductCards}
-              />
-            )}
-          </div>
-        )}
-        {hasTestimonialCards && (
-          <TestimonialCarousel
-            fields={fields as CarouselWithTestimonialCards}
-            autoScroll={testimonialAutoScroll}
-            autoScrollInterval={8000}
-          />
-        )}
-      </div>
-      {disclaimerText && (
-        <Text
-          as="div"
-          className="footnote mt-8 px-4 text-center text-text-secondary"
-        >
-          {disclaimerText}
-        </Text>
-      )}
-    </div>
-  );
-};
-
-export default Carousel;
+import React from "react";
+import { TabSwitch } from "../carousel/helper";
+import { ProductCardCarousel, TestimonialCarousel } from "./helper";
+import {
+  CarouselProps,
+  CarouselWithProductCards,
+  CarouselWithTestimonialCards,
+} from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Carousel: React.FC<CarouselProps> = ({
+  fields,
+  hasTestimonialCards,
+  hasProductCards,
+  disclaimerText,
+  backgroundColor,
+  activeTab,
+  setActiveTab,
+  tabs,
+  onModalButtonClick,
+  renderCheckPlans,
+  testimonialAutoScroll = true,
+  showSwitch = false,
+}) => {
+  const baseClass = hasProductCards
+    ? "px-3 py-9 md:py-20"
+    : hasTestimonialCards
+      ? "px-3 py-12 md:pt-20 md:pb-16"
+      : "";
+  return (
+    <div className={`${backgroundColor} ${baseClass} mx-auto overflow-hidden`}>
+      <div className="relative mx-auto flex max-w-[1280px] flex-col gap-8 overflow-visible md:gap-12">
+        <div>
+          <Text
+            as="h2"
+            className="heading2 text-text md:heading1 md:text-center"
+          >
+            {fields?.title}
+          </Text>
+          {fields?.subTitle && (
+            <Text as="h3" className="body1 px-4 pt-4 md:text-center">
+              {fields?.subTitle}
+            </Text>
+          )}
+        </div>
+        {showSwitch && hasProductCards && (
+          <div className="flex flex-col gap-8">
+            {showSwitch && hasProductCards && tabs.length > 1 && (
+              <TabSwitch
+                tabs={tabs}
+                activeTab={activeTab}
+                onChange={setActiveTab}
+              />
+            )}
+            {hasProductCards && (
+              <ProductCardCarousel
+                onModalButtonClick={onModalButtonClick}
+                renderCheckPlans={renderCheckPlans}
+                fields={fields as CarouselWithProductCards}
+              />
+            )}
+          </div>
+        )}
+        {hasTestimonialCards && (
+          <TestimonialCarousel
+            fields={fields as CarouselWithTestimonialCards}
+            autoScroll={testimonialAutoScroll}
+            autoScrollInterval={8000}
+          />
+        )}
+      </div>
+      {disclaimerText && (
+        <Text
+          as="div"
+          className="footnote mt-8 px-4 text-center text-text-secondary"
+        >
+          {disclaimerText}
+        </Text>
+      )}
+    </div>
+  );
+};
+
+export default Carousel;

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

@@ -1,144 +1,144 @@
-import React, { ReactNode } from "react";
-
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export interface carouselFieldsInterface {
-  __typename: "ComponentCarousel";
-  sys: {
-    id: string;
-  };
-  entryName?: string;
-  anchorId?: string;
-  title?: string;
-  subTitle?: string;
-  rotationTiming?: number;
-  showArrows?: boolean;
-  autoRotate?: boolean;
-  initialSlideIndex?: number;
-  infiniteScroll?: boolean;
-  mobileNavigationType?: boolean;
-  disclaimerText?: {
-    json: any;
-  };
-  backgroundColor?: "blue" | "green" | "orange" | "purple" | "white";
-  items: {
-    items: Array<CarouselItemsType>;
-  };
-}
-
-export type CarouselItemsType =
-  | TestimonialCardFields
-  | ProductCardFields
-  | CardFields;
-
-export interface TestimonialCardFields {
-  __typename: "ComponentTestimonialCard";
-  sys: {
-    id: string;
-  };
-  title?: string;
-  author?: string;
-  role?: string;
-  rating?: number;
-  quote?: ReactNode;
-  authorImage?: {
-    url: string;
-    title?: string;
-    width?: number;
-    height?: number;
-  } | null;
-  avatarurl?: string;
-}
-
-export interface ProductCardFields {
-  __typename: "ComponentProductCard";
-  sys: {
-    id: string;
-  };
-  speed?: string;
-  price?: string;
-  priceSuffix?: string;
-  techType?: string;
-  highlighted?: boolean;
-  productCardDescription?: string;
-  benefitsTitle?: string;
-  benefitsExpanded?: boolean;
-  innerBadge?: string;
-  // GraphQL patterns for nested references
-  benefits?: {
-    items: Array<any>;
-  };
-  giftRewards?: {
-    list?: {
-      items: Array<any>;
-    };
-  };
-  cta?: {
-    buttonLabel?: string;
-    [key: string]: any;
-  };
-  innerBadgeIcon?: {
-    url: string;
-    [key: string]: any;
-  };
-}
-
-export interface CardFields {
-  __typename: "ComponentCard";
-  sys: {
-    id: string;
-  };
-  title?: string;
-  subtitle?: string;
-  eyebrow?: string;
-  body?: { json: any };
-  image?: { url: string; [key: string]: any };
-  cta?: { buttonLabel?: string; [key: string]: any };
-  ctaBottom?: { buttonLabel?: string; [key: string]: any };
-}
-
-export interface CarouselWithTestimonialCards
-  extends Omit<carouselFieldsInterface, "items"> {
-  items: {
-    items: TestimonialCardFields[];
-  };
-}
-
-export interface CarouselWithProductCards
-  extends Omit<carouselFieldsInterface, "items"> {
-  items: {
-    items: ProductCardFields[];
-  };
-}
-
-export const backgroundColorMap = {
-  blue: "bg-bg-fill-inverse",
-  green: "bg-border-success",
-  orange: "bg-orange-500",
-  purple: "bg-purple-500",
-  white: "bg-white",
-};
-
-export type CarouselProps = {
-  fields: carouselFieldsInterface;
-  hasTestimonialCards: boolean;
-  hasProductCards: boolean;
-  disclaimerText: ReactNode;
-  backgroundColor: string;
-  activeTab: string;
-  setActiveTab: (tab: string) => void;
-  tabs: string[];
-  showSwitch?: boolean;
-  testimonialAutoScroll?: boolean;
-  onModalButtonClick?: (id?: string) => void;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-};
-
-export interface TabSwitchProps {
-  tabs: string[];
-  activeTab: string;
-  onChange: (tab: string) => void;
-  className?: string;
-}
-
-export const DEFAULT_TABS = ["Business Ready", "Internet Only"];
+import React, { ReactNode } from "react";
+
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export interface carouselFieldsInterface {
+  __typename: "ComponentCarousel";
+  sys: {
+    id: string;
+  };
+  entryName?: string;
+  anchorId?: string;
+  title?: string;
+  subTitle?: string;
+  rotationTiming?: number;
+  showArrows?: boolean;
+  autoRotate?: boolean;
+  initialSlideIndex?: number;
+  infiniteScroll?: boolean;
+  mobileNavigationType?: boolean;
+  disclaimerText?: {
+    json: any;
+  };
+  backgroundColor?: "blue" | "green" | "orange" | "purple" | "white";
+  items: {
+    items: Array<CarouselItemsType>;
+  };
+}
+
+export type CarouselItemsType =
+  | TestimonialCardFields
+  | ProductCardFields
+  | CardFields;
+
+export interface TestimonialCardFields {
+  __typename: "ComponentTestimonialCard";
+  sys: {
+    id: string;
+  };
+  title?: string;
+  author?: string;
+  role?: string;
+  rating?: number;
+  quote?: ReactNode;
+  authorImage?: {
+    url: string;
+    title?: string;
+    width?: number;
+    height?: number;
+  } | null;
+  avatarurl?: string;
+}
+
+export interface ProductCardFields {
+  __typename: "ComponentProductCard";
+  sys: {
+    id: string;
+  };
+  speed?: string;
+  price?: string;
+  priceSuffix?: string;
+  techType?: string;
+  highlighted?: boolean;
+  productCardDescription?: string;
+  benefitsTitle?: string;
+  benefitsExpanded?: boolean;
+  innerBadge?: string;
+  // GraphQL patterns for nested references
+  benefits?: {
+    items: Array<any>;
+  };
+  giftRewards?: {
+    list?: {
+      items: Array<any>;
+    };
+  };
+  cta?: {
+    buttonLabel?: string;
+    [key: string]: any;
+  };
+  innerBadgeIcon?: {
+    url: string;
+    [key: string]: any;
+  };
+}
+
+export interface CardFields {
+  __typename: "ComponentCard";
+  sys: {
+    id: string;
+  };
+  title?: string;
+  subtitle?: string;
+  eyebrow?: string;
+  body?: { json: any };
+  image?: { url: string; [key: string]: any };
+  cta?: { buttonLabel?: string; [key: string]: any };
+  ctaBottom?: { buttonLabel?: string; [key: string]: any };
+}
+
+export interface CarouselWithTestimonialCards
+  extends Omit<carouselFieldsInterface, "items"> {
+  items: {
+    items: TestimonialCardFields[];
+  };
+}
+
+export interface CarouselWithProductCards
+  extends Omit<carouselFieldsInterface, "items"> {
+  items: {
+    items: ProductCardFields[];
+  };
+}
+
+export const backgroundColorMap = {
+  blue: "bg-bg-fill-inverse",
+  green: "bg-border-success",
+  orange: "bg-orange-500",
+  purple: "bg-purple-500",
+  white: "bg-white",
+};
+
+export type CarouselProps = {
+  fields: carouselFieldsInterface;
+  hasTestimonialCards: boolean;
+  hasProductCards: boolean;
+  disclaimerText: ReactNode;
+  backgroundColor: string;
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+  tabs: string[];
+  showSwitch?: boolean;
+  testimonialAutoScroll?: boolean;
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+};
+
+export interface TabSwitchProps {
+  tabs: string[];
+  activeTab: string;
+  onChange: (tab: string) => void;
+  className?: string;
+}
+
+export const DEFAULT_TABS = ["Business Ready", "Internet Only"];

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;
+}