@windstream/react-shared-components 0.0.38 → 0.0.39

package/src/contentful/blocks/navigation/link-groups.tsx/index.tsx

@@ -1,64 +1,62 @@
-import React from "react";
-import {
-  Button,
-  ButtonProps as ContentfulButtonProps,
-} from "@shared/contentful";
-
-type ComponentButtonGroup = {
-  anchorId?: string | null;
-  title?: string | null;
-  items?: { items?: ContentfulButtonProps[] | null } | null;
-};
-
-type Link = ContentfulButtonProps | ComponentButtonGroup;
-
-type LinkGroupsProps = {
-  link?: Link;
-};
-
-const isButton = (link: Link): link is ContentfulButtonProps => {
-  // If your group never has `href`, this is a simple and effective guard
-  return typeof (link as ContentfulButtonProps).href === "string";
-};
-
-export const LinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
-  if (!link) return null;
-
-  // Single button
-  if (isButton(link)) {
-    const key = "submenu-link-btn";
-    return (
-      <ul>
-        <li key={key} className="submenu-link">
-          <Button {...link} linkVariant="unstyled" />
-        </li>
-      </ul>
-    );
-  }
-
-  // Group
-  const { anchorId, title, items } = link;
-  const subMenu = Array.isArray(items?.items) ? items!.items! : [];
-
-  const RenderSubMenu: React.FC<{ items: ContentfulButtonProps[] }> = ({
-    items,
-  }) => (
-    <ul>
-      {items.map((site, index) => {
-        const key = `submenu-link-${index}`;
-        return (
-          <li key={key} className="submenu-link">
-            <Button {...site} linkVariant="unstyled" />
-          </li>
-        );
-      })}
-    </ul>
-  );
-
-  return (
-    <div id={anchorId ?? undefined}>
-      <div>{title ?? null}</div>
-      {subMenu.length > 0 && <RenderSubMenu items={subMenu} />}
-    </div>
-  );
-};
+import React from "react";
+import { Button } from "../../button";
+import { ButtonProps as ContentfulButtonProps } from "../../button/types";
+
+type ComponentButtonGroup = {
+  anchorId?: string | null;
+  title?: string | null;
+  items?: { items?: ContentfulButtonProps[] | null } | null;
+};
+
+type Link = ContentfulButtonProps | ComponentButtonGroup;
+
+type LinkGroupsProps = {
+  link?: Link;
+};
+
+const isButton = (link: Link): link is ContentfulButtonProps => {
+  // If your group never has `href`, this is a simple and effective guard
+  return typeof (link as ContentfulButtonProps).href === "string";
+};
+
+export const LinkGroups: React.FC<LinkGroupsProps> = ({ link }) => {
+  if (!link) return null;
+
+  // Single button
+  if (isButton(link)) {
+    const key = "submenu-link-btn";
+    return (
+      <ul>
+        <li key={key} className="submenu-link">
+          <Button {...link} linkVariant="unstyled" />
+        </li>
+      </ul>
+    );
+  }
+
+  // Group
+  const { anchorId, title, items } = link;
+  const subMenu = Array.isArray(items?.items) ? items!.items! : [];
+
+  const RenderSubMenu: React.FC<{ items: ContentfulButtonProps[] }> = ({
+    items,
+  }) => (
+    <ul>
+      {items.map((site, index) => {
+        const key = `submenu-link-${index}`;
+        return (
+          <li key={key} className="submenu-link">
+            <Button {...site} linkVariant="unstyled" />
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  return (
+    <div id={anchorId ?? undefined}>
+      <div>{title ?? null}</div>
+      {subMenu.length > 0 && <RenderSubMenu items={subMenu} />}
+    </div>
+  );
+};

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,177 +1,160 @@
-import React from "react";
-import { PrimaryHeroProps } from "./types";
-
-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 p-5 lg:p-0 lg:h-[724px]">
-      <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}
-
-          </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>
-  );
-};
-
-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;

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

@@ -1,30 +1,30 @@
-export type PrimaryHeroProps = {
-  title: string;
-  showAsHeading?: boolean;
-  subTitle?: string;
-  price?: string;
-  priceSuffix?: string;
-  priceCallout?: string;
-  pricingDescription?: string;
-  pricingDescriptionDisclaimer?: string;
-  checklist?: {
-    title: string;
-    iconUrl?: string;
-    anchorId?: string;
-  }[];
-  logoLockup?: string;
-  checkAvailabilityEyebrow?: string;
-  primaryCtaPrefix1?: string;
-  primaryCtaPrefix2?: string;
-  primaryCta1?: any;
-  primaryCta2?: any;
-  secondaryCtaPrefix?: string;
-  secondaryCta?: any;
-  bottomLink?: any;
-  carouselImages?: string[];
-  squareImage?: boolean;
-  badgeImage?: string;
-  textColor?: string;
-  maxWidth?: boolean;
-  checkPlansJSX?: React.ReactNode;
-};
+export type PrimaryHeroProps = {
+  title: string;
+  showAsHeading?: boolean;
+  subTitle?: string;
+  price?: string;
+  priceSuffix?: string;
+  priceCallout?: string;
+  pricingDescription?: string;
+  pricingDescriptionDisclaimer?: string;
+  checklist?: {
+    title: string;
+    iconUrl?: string;
+    anchorId?: string;
+  }[];
+  logoLockup?: string;
+  checkAvailabilityEyebrow?: string;
+  primaryCtaPrefix1?: string;
+  primaryCtaPrefix2?: string;
+  primaryCta1?: any;
+  primaryCta2?: any;
+  secondaryCtaPrefix?: string;
+  secondaryCta?: any;
+  bottomLink?: any;
+  carouselImages?: string[];
+  squareImage?: boolean;
+  badgeImage?: string;
+  textColor?: string;
+  maxWidth?: boolean;
+  checkPlansJSX?: React.ReactNode;
+};