@windstream/react-shared-components 0.0.37 → 0.0.38

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

@@ -1,154 +1,154 @@
-import React from "react";
-import { Button } from "../button";
-import { ImagePromoBarProps } from "./types";
-
-import { Checklist } from "@shared/components/checklist";
-import { Image } from "@shared/components/image";
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-
-export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
-  brow,
-  enableHeading,
-  title,
-  subTitle,
-  ctaDisclaimer,
-  disclaimer,
-  description,
-  image,
-  imageLinks,
-  mediaPosition = true,
-  checklist,
-  secondaryCta,
-  cta,
-  videoLink,
-  maxWidth = true,
-  color = "light",
-}) => {
-  return (
-    <div className="component-container">
-      <div
-        className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-8 mt-16`}
-      >
-        <div
-          className={`flex shrink-0 flex-col items-center gap-8 xl:gap-[126px] ${mediaPosition ? "flex-row xl:flex-row-reverse" : "xl: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"}`}
-          >
-            <div className="heading holder">
-              {brow && (
-                <Text
-                  as="div"
-                  className="subheading4 mb-4 text-text-brand xl:subheading2 xl:mb-3"
-                >
-                  {brow}
-                </Text>
-              )}
-              {title && (
-                <Text
-                  as={enableHeading ? "h1" : "h2"}
-                  className="heading2 xl:heading1"
-                >
-                  {title}
-                </Text>
-              )}
-              {subTitle && (
-                <Text
-                  as={enableHeading ? "h2" : "h3"}
-                  className="subheading1 mt-3"
-                >
-                  {subTitle}
-                </Text>
-              )}
-            </div>
-            {/* Content Section */}
-            {description && (
-              <Text as="div" className="body1">
-                {description}
-              </Text>
-            )}
-            {/* Checklist Rendering */}
-            {checklist.length > 0 && <Checklist items={checklist} />}
-            {/* Image Links Collection */}
-            {imageLinks?.map((link, index) => (
-              <div key={index} className="image-link">
-                <Image src={link.url} alt="icon-link" />
-              </div>
-            ))}
-            {/* CTAs and Disclaimers */}
-            <div className="flex w-full flex-col gap-8 xl:flex-row xl:gap-3">
-              {cta && (
-                <div className="primary-cta w-full xl:w-auto">
-                  <Button {...cta} fullWidth={true} />
-                </div>
-              )}
-              {secondaryCta && (
-                <div className="secondary-cta">
-                  <Button {...secondaryCta} fullWidth={true} />
-                </div>
-              )}
-            </div>
-            {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
-            {disclaimer && <div>{disclaimer}</div>}
-          </div>
-          <aside className="flex shrink-0 content-center items-center">
-            <div>
-              {/* Media Section */}
-              {image && (
-                <>
-                  <NextImage
-                    src={image}
-                    alt="section-image"
-                    width={486}
-                    height={100}
-                    className="hidden rounded-[40px] xl:block"
-                  />
-                  <NextImage
-                    src={image}
-                    alt="section-image"
-                    width={984}
-                    height={100}
-                    className="hidden rounded-[40px] lg:block xl:hidden"
-                  />
-                  <NextImage
-                    src={image}
-                    alt="section-image"
-                    width={728}
-                    height={100}
-                    className="hidden rounded-[40px] md:block lg:hidden"
-                  />
-                  <NextImage
-                    src={image}
-                    alt="section-image"
-                    width={350}
-                    height={100}
-                    className="block rounded-[40px] md:hidden"
-                  />
-                </>
-              )}
-            </div>
-            <div>
-              {/* Video Link Section */}
-              {videoLink?.link && (
-                <div className="video-section">
-                  {videoLink.image && (
-                    <NextImage
-                      src={videoLink.image}
-                      alt="Video preview"
-                      width={486}
-                      height={100}
-                      className="rounded-[40px]"
-                    />
-                  )}
-                </div>
-              )}
-            </div>
-          </aside>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ImagePromoBar;
+import React from "react";
+import { ImagePromoBarProps } from "./types";
+
+import { Checklist } from "@shared/components/checklist";
+import { Image } from "@shared/components/image";
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { Button } from "@shared/contentful";
+
+export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
+  brow,
+  enableHeading,
+  title,
+  subTitle,
+  ctaDisclaimer,
+  disclaimer,
+  description,
+  image,
+  imageLinks,
+  mediaPosition = true,
+  checklist,
+  secondaryCta,
+  cta,
+  videoLink,
+  maxWidth = true,
+  color = "light",
+}) => {
+  return (
+    <div className="component-container">
+      <div
+        className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-8 mt-16`}
+      >
+        <div
+          className={`flex shrink-0 flex-col items-center gap-8 xl:gap-[126px] ${mediaPosition ? "flex-row xl:flex-row-reverse" : "xl: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"}`}
+          >
+            <div className="heading holder">
+              {brow && (
+                <Text
+                  as="div"
+                  className="subheading4 mb-4 text-text-brand xl:subheading2 xl:mb-3"
+                >
+                  {brow}
+                </Text>
+              )}
+              {title && (
+                <Text
+                  as={enableHeading ? "h1" : "h2"}
+                  className="heading2 xl:heading1"
+                >
+                  {title}
+                </Text>
+              )}
+              {subTitle && (
+                <Text
+                  as={enableHeading ? "h2" : "h3"}
+                  className="subheading1 mt-3"
+                >
+                  {subTitle}
+                </Text>
+              )}
+            </div>
+            {/* Content Section */}
+            {description && (
+              <Text as="div" className="body1">
+                {description}
+              </Text>
+            )}
+            {/* Checklist Rendering */}
+            {checklist.length > 0 && <Checklist items={checklist} />}
+            {/* Image Links Collection */}
+            {imageLinks?.map((link, index) => (
+              <div key={index} className="image-link">
+                <Image src={link.url} alt="icon-link" />
+              </div>
+            ))}
+            {/* CTAs and Disclaimers */}
+            <div className="flex w-full flex-col gap-8 xl:flex-row xl:gap-3">
+              {cta && (
+                <div className="primary-cta w-full xl:w-auto">
+                  <Button {...cta} fullWidth={true} />
+                </div>
+              )}
+              {secondaryCta && (
+                <div className="secondary-cta">
+                  <Button {...secondaryCta} fullWidth={true} />
+                </div>
+              )}
+            </div>
+            {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
+            {disclaimer && <div>{disclaimer}</div>}
+          </div>
+          <aside className="flex shrink-0 content-center items-center">
+            <div>
+              {/* Media Section */}
+              {image && (
+                <>
+                  <NextImage
+                    src={image}
+                    alt="section-image"
+                    width={486}
+                    height={100}
+                    className="hidden rounded-[40px] xl:block"
+                  />
+                  <NextImage
+                    src={image}
+                    alt="section-image"
+                    width={984}
+                    height={100}
+                    className="hidden rounded-[40px] lg:block xl:hidden"
+                  />
+                  <NextImage
+                    src={image}
+                    alt="section-image"
+                    width={728}
+                    height={100}
+                    className="hidden rounded-[40px] md:block lg:hidden"
+                  />
+                  <NextImage
+                    src={image}
+                    alt="section-image"
+                    width={350}
+                    height={100}
+                    className="block rounded-[40px] md:hidden"
+                  />
+                </>
+              )}
+            </div>
+            <div>
+              {/* Video Link Section */}
+              {videoLink?.link && (
+                <div className="video-section">
+                  {videoLink.image && (
+                    <NextImage
+                      src={videoLink.image}
+                      alt="Video preview"
+                      width={486}
+                      height={100}
+                      className="rounded-[40px]"
+                    />
+                  )}
+                </div>
+              )}
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImagePromoBar;

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

@@ -1,7 +1,6 @@
-import React from "react";
 import { LinkGroups } from "./link-groups.tsx";
 import { NavigationProps } from "./types";
-
+import React from "react";
 export const Navigation: React.FC<NavigationProps> = ({
   // accountNavigationLinks,
   // callNowCtaIcon,

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

@@ -1,62 +1,64 @@
-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>
-  );
-};
+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>
+  );
+};