@windstream/react-shared-components 0.0.37 → 0.0.38

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

@@ -1,75 +1,174 @@
 import React from "react";
 import { PrimaryHeroProps } from "./types";
 
-export const PrimaryHero: React.FC<PrimaryHeroProps> = ({
-  maxWidth = true,
-  title,
-  showAsHeading,
-  subTitle,
-  price,
-  priceSuffix,
-  priceCallout,
-  pricingDescription,
-  pricingDescriptionDisclaimer,
-  checklist,
-  logoLockup,
-  checkAvailabilityEyebrow,
-  primaryCtaPrefix1,
-  primaryCtaPrefix2,
-  primaryCta1,
-  primaryCta2,
-  secondaryCtaPrefix,
-  secondaryCta,
-  carouselImages,
-  squareImage,
-  badgeImage,
-  bottomLink,
-}) => {
+import { Link } from "@shared/components/link";
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+import { Button as ContentfulButton } from "@shared/contentful/blocks/button";
+import { NextImage } from "@shared/components/next-image";
+import { Checklist } from "@shared/components/checklist";
+
+
+export const PrimaryHero: React.FC<PrimaryHeroProps> = (props) => {
+  const {
+    title,
+    showAsHeading,
+    subTitle,
+    pricingDescription,
+    primaryCta1,
+    carouselImages,
+    bottomLink,
+    price,
+    priceCallout,
+    priceSuffix,
+    checklist,
+    checkPlansJSX
+  } = props;
+
+  const bodyText = pricingDescription ?? subTitle;
+  const primaryCtaLabel = primaryCta1?.buttonLabel ?? primaryCta1?.label;
+  const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
+
   return (
-    <div className="component-container">
+    <div className="component-container p-5 lg:p-0 lg:h-[724px]">
       <div
-        className={`primary-hero-container ${maxWidth ? "mx-auto max-w-120" : ""}`}
-      >
-        {/* Text Content */}
-        {title && <div>{title}</div>}
-        {showAsHeading && <div>Heading Mode: {String(showAsHeading)}</div>}
-        {subTitle && <div>{subTitle}</div>}
-
-        {/* Pricing Section */}
-        {price && <div>{price}</div>}
-        {priceSuffix && <div>{priceSuffix}</div>}
-        {priceCallout && <div>{priceCallout}</div>}
-        {pricingDescription && <div>{pricingDescription}</div>}
-        {pricingDescriptionDisclaimer && (
-          <div>{pricingDescriptionDisclaimer}</div>
+        className={cx(
+          "primary-hero-container mx-auto lg:p-4 lg:gap-4 lg:h-full flex flex-col sm:text-center lg:text-left sm:items-center lg:flex-row lg:justify-between lg:items-center lg:max-w-120",
         )}
+      >
+        {/* Left column: navy background, headline, body, address, button, link */}
+        <div
+          className={cx(
+            "relative flex flex-col text-white w-[485px]",
+          )}
+        >
+          <div className="flex flex-col gap-5 lg:gap-6">
+            {title && (
+              <Text
+                as={showAsHeading ? "h1" : "h2"}
+                className="heading2 lg:heading1 font-bold"
+              >
+                {title}
+              </Text>
+            )}
+            {bodyText && (
+              <Text
+                as="p"
+                className="subheading3 lg:subheading1"
+              >
+                {bodyText}
+              </Text>
+            )}
+
+            {/* price callout */}
+            {price ? (
+              <div className="flex">
+                <div className="mr-2">
+                  {priceCallout ? (
+                    priceCallout.split('|').map(line => <Text as="p" className="body2">{line}</Text>)
+                  ) : null}
+                </div>
+                <Text as="p" className="subheading1">$</Text>
+                <Text as="p" className="subheading5">{price}</Text>
+                {priceSuffix ? (
+                  <Text as="p" className="subheading1">{priceSuffix}</Text>
+                ) : null}
+              </div>
+            ) : null}
+
+            {/* checklist */}
+            {checklist && <Checklist listItemClassName="text-white body2" items={checklist.map(item => item.title)} />}
+
+            {/* desktop CTA */}
+            {primaryCta1 && primaryCtaLabel && (
+              <div className={cx("hidden lg:flex flex-col gap-3")}>
+                <ContentfulButton
+                  {...primaryCta1}
+                  checkPlansJSX={checkPlansJSX}
+                  buttonLabel={primaryCtaLabel}
+                />
+
+                {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
+                  <div>
+                    <Link
+                      href={bottomLink?.href ?? "#"}
+                      target={bottomLink?.target}
+                      external={bottomLink?.target === "_blank"}
+                      className="text-footnote text-white underline hover:opacity-90"
+                    >
+                      {bottomLinkLabel}
+                    </Link>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* desktop bottom link */}
+            {!primaryCta1 && bottomLink && (bottomLinkLabel || bottomLink?.href) && (
+              <div className="hidden lg:block">
+                <Link
+                  href={bottomLink?.href ?? "#"}
+                  target={bottomLink?.target}
+                  external={bottomLink?.target === "_blank"}
+                  className="text-footnote text-white underline hover:opacity-90"
+                >
+                  {bottomLinkLabel}
+                </Link>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* mobile hero image and bottom link */}
+        <div className="lg:hidden">
+          <div
+            className={"my-8"}
+          >
+            {carouselImages && carouselImages[0] ? (
+              <NextImage
+                src={carouselImages[0]}
+                alt={"Hero"}
+                className="object-cover aspect-[1.71:1] sm:aspect-[1.41:1] sm:h-[420px] object-center rounded-[40px]"
+                width={350}
+                height={205}
+                loading="eager"
+              />
+            ) : null}
 
-        {/* Assets & Logos */}
-        {logoLockup && <div>Logo: {logoLockup}</div>}
-        {badgeImage && <div>Badge: {badgeImage}</div>}
-        {squareImage && <div>Square Layout: {String(squareImage)}</div>}
-
-        {/* Checklist */}
-        {checklist?.map((item, index) => (
-          <div key={`checklist-${index}`}>Checklist Item: {item.title}</div>
-        ))}
-
-        {/* CTAs & Availability */}
-        {checkAvailabilityEyebrow && <div>{checkAvailabilityEyebrow}</div>}
-        {primaryCtaPrefix1 && <div>{primaryCtaPrefix1}</div>}
-        {primaryCta1 && <div>CTA 1: {primaryCta1.label}</div>}
-        {primaryCtaPrefix2 && <div>{primaryCtaPrefix2}</div>}
-        {primaryCta2 && <div>CTA 2: {primaryCta2.label}</div>}
-        {secondaryCtaPrefix && <div>{secondaryCtaPrefix}</div>}
-        {secondaryCta && <div>Secondary: {secondaryCta.label}</div>}
-        {bottomLink && <div>Bottom Link: {bottomLink.label}</div>}
-
-        {/* Carousel URLs via hook */}
-        {carouselImages?.map((url, index) => (
-          <div key={index}>
-            Carousel Image {index + 1}: {url}
           </div>
-        ))}
+          {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
+            <div>
+              <Link
+                href={bottomLink?.href ?? "#"}
+                target={bottomLink?.target}
+                external={bottomLink?.target === "_blank"}
+                className="body3 text-white underline hover:opacity-90"
+              >
+                {bottomLinkLabel}
+              </Link>
+            </div>
+          )}
+        </div>
+
+
+        {/* Right column: bright blue background, diagonal top edge, hero image */}
+        <div
+          className={cx(
+            "relative hidden lg:block",
+          )}
+        >
+          {carouselImages && carouselImages[0] ? (
+            <NextImage
+              src={carouselImages[0]}
+              alt={"Hero"}
+              className="rounded-[40px] aspect-square object-cover object-center"
+              width={600}
+              height={600}
+              loading="eager"
+            />
+          ) : null}
+        </div>
       </div>
     </div>
   );

package/src/contentful/blocks/primary-hero/types.ts

@@ -26,4 +26,5 @@ export type PrimaryHeroProps = {
   badgeImage?: string;
   textColor?: string;
   maxWidth?: boolean;
+  checkPlansJSX?: React.ReactNode;
 };

package/src/contentful/index.ts

@@ -1,48 +1,45 @@
-// Contentful Blocks
-export { Accordion } from "./blocks/accordion";
-export type { AccordionProps } from "./blocks/accordion/types";
-
-export { Callout } from "./blocks/callout";
-export type { CalloutProps } from "./blocks/callout/types";
-
-export { Cards } from "./blocks/cards";
-export type { CardsProps } from "./blocks/cards/types";
-
-export { SimpleCards } from "./blocks/cards/simple-card";
-export type { SimpleCardsProps } from "./blocks/cards/simple-card/types";
-
-export { Carousel } from "./blocks/carousel";
-export type { CarouselProps } from "./blocks/carousel/types";
-
-export { FloatingBanner } from "./blocks/floating-banner";
-export type { FloatingBannerProps } from "./blocks/floating-banner/types";
-
-export { Footer } from "./blocks/footer";
-export type { FooterProps } from "./blocks/footer/types";
-
-export { ImagePromoBar } from "./blocks/image-promo-bar";
-export type { ImagePromoBarProps } from "./blocks/image-promo-bar/types";
-
-export { Navigation } from "./blocks/navigation";
-export type { NavigationProps } from "./blocks/navigation/types";
-
-export { PrimaryHero } from "./blocks/primary-hero";
-export type { PrimaryHeroProps } from "./blocks/primary-hero/types";
-
-export { Text } from "./blocks/text";
-export type { TextProps } from "./blocks/text/types";
-
-export { Button } from "./blocks/button";
-export type { ButtonProps } from "./blocks/button/types";
-
-export { Modal } from "./blocks/modal";
-export type { ModalProps } from "./blocks/modal/types";
-
-export { ShapeBackgroundWrapper } from "./blocks/shape-background-wrapper";
-export type { ShapeBackgroundWrapperProps } from "./blocks/shape-background-wrapper/types";
-
-export { CtaCallout } from "./blocks/cta-callout";
-export type { CtaCalloutProps } from "./blocks/cta-callout/types";
-
-export { FindKinetic } from "./blocks/find-kinetic";
-export type { FindKineticProps } from "./blocks/find-kinetic/types";
+// Contentful Blocks
+export { Accordion } from "./blocks/accordion";
+export type { AccordionProps } from "./blocks/accordion/types";
+
+export { Callout } from "./blocks/callout";
+export type { CalloutProps } from "./blocks/callout/types";
+
+export { Cards } from "./blocks/cards";
+export type { CardsProps } from "./blocks/cards/types";
+
+export { Carousel } from "./blocks/carousel";
+export type { CarouselProps } from "./blocks/carousel/types";
+
+export { FloatingBanner } from "./blocks/floating-banner";
+export type { FloatingBannerProps } from "./blocks/floating-banner/types";
+
+export { Footer } from "./blocks/footer";
+export type { FooterProps } from "./blocks/footer/types";
+
+export { ImagePromoBar } from "./blocks/image-promo-bar";
+export type { ImagePromoBarProps } from "./blocks/image-promo-bar/types";
+
+export { Navigation } from "./blocks/navigation";
+export type { NavigationProps } from "./blocks/navigation/types";
+
+export { PrimaryHero } from "./blocks/primary-hero";
+export type { PrimaryHeroProps } from "./blocks/primary-hero/types";
+
+export { Text } from "./blocks/text";
+export type { TextProps } from "./blocks/text/types";
+
+export { Button } from "./blocks/button";
+export type { ButtonProps } from "./blocks/button/types";
+
+export { Modal } from "./blocks/modal";
+export type { ModalProps } from "./blocks/modal/types";
+
+export { ShapeBackgroundWrapper } from "./blocks/shape-background-wrapper";
+export type { ShapeBackgroundWrapperProps } from "./blocks/shape-background-wrapper/types";
+
+export { CtaCallout } from "./blocks/cta-callout";
+export type { CtaCalloutProps } from "./blocks/cta-callout/types";
+
+export { FindKinetic } from "./blocks/find-kinetic";
+export type { FindKineticProps } from "./blocks/find-kinetic/types";

package/src/hooks/use-body-scroll-lock.ts

@@ -1,34 +1,34 @@
-"use client";
-
-import { useEffect } from "react";
-
-/**
- * A custom hook that locks the body scroll based on the `isOpen` and `hideScrollOnIsOpenFalse` flags.
- *
- * @param {boolean} isOpen - Determines if the scroll should be locked (hidden).
- * @param {boolean} hideScrollOnIsOpenFalse - Determines if the scroll should be reset when `isOpen` is false.
- */
-function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean) {
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-
-    // To avoid content shifting when the scrollbar appears/disappears
-    const scrollbarWidth =
-      window.innerWidth - document.documentElement.clientWidth;
-    document.body.style.marginRight = isOpen ? `${scrollbarWidth}px` : "unset";
-
-    // Set the body overflow style based on the `isOpen` and `hideScrollOnIsOpenFalse` values.
-    document.body.style.overflow = isOpen
-      ? "hidden"
-      : hideScrollOnIsOpenFalse
-        ? "unset"
-        : document.body.style.overflow;
-
-    // Cleanup function to reset body overflow when the component unmounts or dependencies change.
-    return () => {
-      document.body.style.overflow = "unset";
-    };
-  }, [isOpen, hideScrollOnIsOpenFalse]);
-}
-
-export default useBodyScrollLock;
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * A custom hook that locks the body scroll based on the `isOpen` and `hideScrollOnIsOpenFalse` flags.
+ *
+ * @param {boolean} isOpen - Determines if the scroll should be locked (hidden).
+ * @param {boolean} hideScrollOnIsOpenFalse - Determines if the scroll should be reset when `isOpen` is false.
+ */
+function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean) {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    // To avoid content shifting when the scrollbar appears/disappears
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.marginRight = isOpen ? `${scrollbarWidth}px` : "unset";
+
+    // Set the body overflow style based on the `isOpen` and `hideScrollOnIsOpenFalse` values.
+    document.body.style.overflow = isOpen
+      ? "hidden"
+      : hideScrollOnIsOpenFalse
+        ? "unset"
+        : document.body.style.overflow;
+
+    // Cleanup function to reset body overflow when the component unmounts or dependencies change.
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, hideScrollOnIsOpenFalse]);
+}
+
+export default useBodyScrollLock;

package/src/setupTests.ts

@@ -1,46 +1,46 @@
-import "@testing-library/jest-dom";
-
-// Mock window.matchMedia
-Object.defineProperty(window, "matchMedia", {
-  writable: true,
-  value: (query: string) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: () => {}, // deprecated
-    removeListener: () => {}, // deprecated
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    dispatchEvent: () => true,
-  }),
-});
-
-// Mock ResizeObserver
-global.ResizeObserver = class ResizeObserver {
-  observe = () => {};
-  unobserve = () => {};
-  disconnect = () => {};
-  constructor(_callback: ResizeObserverCallback) {}
-} as unknown as typeof ResizeObserver;
-
-// Mock IntersectionObserver
-global.IntersectionObserver = class IntersectionObserver {
-  observe = () => {};
-  unobserve = () => {};
-  disconnect = () => {};
-  constructor(_callback: IntersectionObserverCallback) {}
-} as unknown as typeof IntersectionObserver;
-
-// Mock scrollTo
-Object.defineProperty(window, "scrollTo", {
-  writable: true,
-  value: () => {},
-});
-
-// Mock getComputedStyle
-Object.defineProperty(window, "getComputedStyle", {
-  writable: true,
-  value: () => ({
-    getPropertyValue: () => "",
-  }),
-});
+import "@testing-library/jest-dom";
+
+// Mock window.matchMedia
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {}, // deprecated
+    removeListener: () => {}, // deprecated
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => true,
+  }),
+});
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  observe = () => {};
+  unobserve = () => {};
+  disconnect = () => {};
+  constructor(_callback: ResizeObserverCallback) {}
+} as unknown as typeof ResizeObserver;
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+  observe = () => {};
+  unobserve = () => {};
+  disconnect = () => {};
+  constructor(_callback: IntersectionObserverCallback) {}
+} as unknown as typeof IntersectionObserver;
+
+// Mock scrollTo
+Object.defineProperty(window, "scrollTo", {
+  writable: true,
+  value: () => {},
+});
+
+// Mock getComputedStyle
+Object.defineProperty(window, "getComputedStyle", {
+  writable: true,
+  value: () => ({
+    getPropertyValue: () => "",
+  }),
+});

package/src/contentful/blocks/cards/simple-card/index.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import type { SimpleCardsProps } from "./types";
-
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-
-export const SimpleCards: React.FC<SimpleCardsProps> = ({ items = [] }) => {
-  if (!items.length) return null;
-
-  return (
-    <div className="card-holder grid grid-cols-1 items-stretch gap-5 self-stretch lg:auto-cols-fr lg:grid-flow-col lg:gap-6 lg:overflow-x-auto">
-      {items.map((item, index: number) => (
-        <div className="callout-card h-full p-6 lg:p-8" key={`card-${index}`}>
-          <div className="card-template flex flex-col gap-6 lg:items-start lg:gap-8">
-            <div className="card-header">
-              {item.image && (
-                <NextImage
-                  width={88}
-                  height={88}
-                  src={item.image}
-                  alt={item.title ?? "card-icon"}
-                />
-              )}
-            </div>
-
-            <div className="card-body flex flex-col gap-3">
-              {item.title && (
-                <Text as="h3" className="heading6">
-                  {item.title}
-                </Text>
-              )}
-              {item.BodyComponent && (
-                <Text as="div" className="body1">
-                  <item.BodyComponent />
-                </Text>
-              )}
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default SimpleCards;

package/src/contentful/blocks/cards/simple-card/types.ts

@@ -1,11 +0,0 @@
-import type { ComponentType } from "react";
-
-export type Item = {
-  title?: string;
-  image?: string;
-  BodyComponent?: ComponentType;
-};
-
-export type SimpleCardsProps = {
-  items: Item[];
-};