@windstream/react-shared-components 0.0.37 → 0.0.39

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

@@ -1,25 +1,25 @@
-import React from "react";
-
-export type ImagePromoBarProps = {
-  brow: string;
-  enableHeading: boolean;
-  title: string;
-  subTitle: string;
-  image: string;
-  mediaPosition: boolean;
-  description: React.ReactNode;
-  openDescriptionLinksOnANewTab: boolean;
-  checklist: string[];
-  disclaimer: React.ReactNode;
-  imageLinks: { url: string; image: string }[];
-  cta: any;
-  secondaryCta: any;
-  ctaDisclaimer: React.ReactNode;
-  videoLink: {
-    image?: string;
-    videoPopup?: boolean;
-    link?: string;
-  };
-  maxWidth?: boolean;
-  color: "light" | "dark";
-};
+import React from "react";
+
+export type ImagePromoBarProps = {
+  brow: string;
+  enableHeading: boolean;
+  title: string;
+  subTitle: string;
+  image: string;
+  mediaPosition: boolean;
+  description: React.ReactNode;
+  openDescriptionLinksOnANewTab: boolean;
+  checklist: string[];
+  disclaimer: React.ReactNode;
+  imageLinks: { url: string; image: string }[];
+  cta: any;
+  secondaryCta: any;
+  ctaDisclaimer: React.ReactNode;
+  videoLink: {
+    image?: string;
+    videoPopup?: boolean;
+    link?: string;
+  };
+  maxWidth?: boolean;
+  color: "light" | "dark";
+};

package/src/contentful/blocks/modal/Modal.stories.tsx

@@ -1,23 +1,23 @@
-import { Modal } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Modal> = {
-  title: "Contentful Blocks/Modal",
-  component: Modal,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful modal block.",
-      },
-    },
-  },
-  args: { fields: {} },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Modal } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Modal> = {
+  title: "Contentful Blocks/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful modal block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,12 +1,12 @@
-import { ModalProps } from "./types";
-
-import { Text } from "@shared/components/text";
-
-export const Modal: React.FC<{ fields: ModalProps }> = ({ fields }) => {
-  return (
-    <div>
-      <Text>Modal Block</Text>
-    </div>
-  );
-};
-export default Modal;
+import { ModalProps } from "./types";
+
+import { Text } from "@shared/components/text";
+
+export const Modal: React.FC<{ fields: ModalProps }> = ({ fields }) => {
+  return (
+    <div>
+      <Text>Modal Block</Text>
+    </div>
+  );
+};
+export default Modal;

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

@@ -1 +1 @@
-export type ModalProps = {};
+export type ModalProps = {};

package/src/contentful/blocks/navigation/Navigation.stories.tsx

@@ -1,23 +1,23 @@
-import { Navigation } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Navigation> = {
-  title: "Contentful Blocks/Navigation",
-  component: Navigation,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful navigation block.",
-      },
-    },
-  },
-  args: {},
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Navigation } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Navigation> = {
+  title: "Contentful Blocks/Navigation",
+  component: Navigation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful navigation block.",
+      },
+    },
+  },
+  args: {},
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,56 +1,56 @@
-import React from "react";
-import { LinkGroups } from "./link-groups.tsx";
-import { NavigationProps } from "./types";
-
-export const Navigation: React.FC<NavigationProps> = ({
-  // accountNavigationLinks,
-  // callNowCtaIcon,
-  // callNowCtaText,
-  // displayCallNowCta,
-  // displaySearchBar,
-  // displayUtilityNavigation,
-  // navigationBackgroundColor,
-  primaryNavigationLinks,
-  // primaryNavigationLogo,
-  // searchBarIcon,
-  // searchBarPlaceholder,
-  // showCallButton,
-  // showCallNowCtaInMainNav,
-  // showMobileSliderMenu,
-  // supportNavigationLinks,
-  // utilityNavBackgroundColor,
-  // utilityNavLinkColor,
-  utilityNavigationLinks,
-  maxWidth = true,
-}) => {
-  return (
-    <div className="component-container">
-      <div className={`menu-container ${maxWidth ? "mx-auto max-w-120" : ""}`}>
-        <div className="utility-container">
-          <ul className="flex">
-            {utilityNavigationLinks?.map((links, index) => {
-              return (
-                <li key={`main-menu-items-${index}`}>
-                  <LinkGroups link={links} />
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-        <div className="main-nav-container">
-          <ul className="flex">
-            {primaryNavigationLinks?.map((links, index) => {
-              return (
-                <li key={`main-menu-items-${index}`}>
-                  <LinkGroups link={links} />
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-        <div></div>
-      </div>
-    </div>
-  );
-};
-export default Navigation;
+import React from "react";
+import { LinkGroups } from "./link-groups.tsx";
+import { NavigationProps } from "./types";
+
+export const Navigation: React.FC<NavigationProps> = ({
+  // accountNavigationLinks,
+  // callNowCtaIcon,
+  // callNowCtaText,
+  // displayCallNowCta,
+  // displaySearchBar,
+  // displayUtilityNavigation,
+  // navigationBackgroundColor,
+  primaryNavigationLinks,
+  // primaryNavigationLogo,
+  // searchBarIcon,
+  // searchBarPlaceholder,
+  // showCallButton,
+  // showCallNowCtaInMainNav,
+  // showMobileSliderMenu,
+  // supportNavigationLinks,
+  // utilityNavBackgroundColor,
+  // utilityNavLinkColor,
+  utilityNavigationLinks,
+  maxWidth = true,
+}) => {
+  return (
+    <div className="component-container">
+      <div className={`menu-container ${maxWidth ? "mx-auto max-w-120" : ""}`}>
+        <div className="utility-container">
+          <ul className="flex">
+            {utilityNavigationLinks?.map((links, index) => {
+              return (
+                <li key={`main-menu-items-${index}`}>
+                  <LinkGroups link={links} />
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        <div className="main-nav-container">
+          <ul className="flex">
+            {primaryNavigationLinks?.map((links, index) => {
+              return (
+                <li key={`main-menu-items-${index}`}>
+                  <LinkGroups link={links} />
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        <div></div>
+      </div>
+    </div>
+  );
+};
+export default Navigation;

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

@@ -1,21 +1,21 @@
-export type NavigationProps = {
-    primaryNavigationLogo?: string;
-    primaryNavigationLinks?: Array<any>;
-    supportNavigationLinks?: Array<any>;
-    utilityNavigationLinks?: Array<any>;
-    accountNavigationLinks?: Array<any>;
-    searchBarIcon?: string;
-    searchBarPlaceholder?: string;
-    navigationBackgroundColor?: string;
-    utilityNavBackgroundColor?: string;
-    utilityNavLinkColor?: string;
-    callNowCtaText?: string;
-    callNowCtaIcon?: string;
-    displaySearchBar?: boolean;
-    displayCallNowCta?: boolean;
-    displayUtilityNavigation?: boolean;
-    showCallButton?: boolean;
-    showMobileSliderMenu?: boolean;
-    showCallNowCtaInMainNav?: boolean;
-    maxWidth?: boolean;
-};
+export type NavigationProps = {
+  primaryNavigationLogo?: string;
+  primaryNavigationLinks?: Array<any>;
+  supportNavigationLinks?: Array<any>;
+  utilityNavigationLinks?: Array<any>;
+  accountNavigationLinks?: Array<any>;
+  searchBarIcon?: string;
+  searchBarPlaceholder?: string;
+  navigationBackgroundColor?: string;
+  utilityNavBackgroundColor?: string;
+  utilityNavLinkColor?: string;
+  callNowCtaText?: string;
+  callNowCtaIcon?: string;
+  displaySearchBar?: boolean;
+  displayCallNowCta?: boolean;
+  displayUtilityNavigation?: boolean;
+  showCallButton?: boolean;
+  showMobileSliderMenu?: boolean;
+  showCallNowCtaInMainNav?: boolean;
+  maxWidth?: boolean;
+};

package/src/contentful/blocks/primary-hero/PrimaryHero.stories.tsx

@@ -1,23 +1,23 @@
-import { PrimaryHero } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof PrimaryHero> = {
-  title: "Contentful Blocks/PrimaryHero",
-  component: PrimaryHero,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful primary hero block.",
-      },
-    },
-  },
-  args: {},
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { PrimaryHero } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof PrimaryHero> = {
+  title: "Contentful Blocks/PrimaryHero",
+  component: PrimaryHero,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful primary hero block.",
+      },
+    },
+  },
+  args: {},
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,78 +1,160 @@
-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,
-}) => {
-  return (
-    <div className="component-container">
-      <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>
-        )}
-
-        {/* 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>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default PrimaryHero;
+import React from "react";
+import { PrimaryHeroProps } from "./types";
+
+import { Checklist } from "@shared/components/checklist";
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { Button as ContentfulButton } from "@shared/contentful/blocks/button";
+import { cx } from "@shared/utils";
+
+export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
+  const {
+    title,
+    showAsHeading,
+    subTitle,
+    primaryCta1,
+    carouselImages,
+    bottomLink,
+    price,
+    priceCallout,
+    priceSuffix,
+    checklist,
+    checkPlansJSX,
+  } = props;
+
+  const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
+
+  return (
+    <div className="component-container p-5 lg:h-[724px] lg:p-0">
+      <div
+        className={cx(
+          "primary-hero-container mx-auto flex flex-col sm:items-center sm:text-center lg:h-full lg:max-w-120 lg:flex-row lg:items-center lg:justify-between lg:gap-4 lg:p-4 lg:text-left"
+        )}
+      >
+        {/* Left column: navy background, headline, body, address, button, link */}
+        <div className={cx("relative flex w-[485px] flex-col text-white")}>
+          <div className="flex flex-col gap-5 lg:gap-6">
+            {title && (
+              <Text
+                as={showAsHeading ? "h1" : "h2"}
+                className="heading2 font-bold lg:heading1"
+              >
+                {title}
+              </Text>
+            )}
+            {subTitle && (
+              <Text as="p" className="subheading3 lg:subheading1">
+                {subTitle}
+              </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 && (
+              <div className={cx("hidden flex-col gap-3 lg:flex")}>
+                <ContentfulButton
+                  {...primaryCta1}
+                  checkPlansJSX={checkPlansJSX}
+                />
+
+                {bottomLink && (
+                  <div>
+                    <ContentfulButton
+                      {...bottomLink}
+                      linkClassName="text-footnote text-white"
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* desktop bottom link */}
+            {!primaryCta1 &&
+              bottomLink &&
+              (bottomLinkLabel || bottomLink?.href) && (
+                <div className="hidden lg:block">
+                  <ContentfulButton
+                    {...bottomLink}
+                    linkClassName="text-footnote text-white"
+                  />
+                </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="aspect-[1.71:1] sm:aspect-[1.41:1] rounded-[40px] object-cover object-center sm:h-[420px]"
+                width={350}
+                height={205}
+                loading="eager"
+              />
+            ) : null}
+          </div>
+          {bottomLink && (bottomLinkLabel || bottomLink?.href) && (
+            <div>
+              <ContentfulButton
+                {...bottomLink}
+                linkClassName="body3 text-white"
+              />
+            </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="aspect-square rounded-[40px] object-cover object-center"
+              width={600}
+              height={600}
+              loading="eager"
+            />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrimaryHero;