@windstream/react-shared-components 0.0.38 → 0.0.40

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

@@ -1,154 +1,154 @@
-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;
+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;

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,55 +1,56 @@
-import { LinkGroups } from "./link-groups.tsx";
-import { NavigationProps } from "./types";
-import React from "react";
-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;