@windstream/react-shared-components 0.0.40 → 0.0.43

package/src/contentful/blocks/image-promo-bar/ImagePromoBar.stories.tsx

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

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

@@ -24,6 +24,8 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   videoLink,
   maxWidth = true,
   color = "light",
+  imageWidth = 660,
+  imageHeight = 660,
 }) => {
   return (
     <div className="component-container">
@@ -93,39 +95,16 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             {disclaimer && <div>{disclaimer}</div>}
           </div>
           <aside className="flex shrink-0 content-center items-center">
-            <div>
+            <div className="relative aspect-[16/9] w-full xl:aspect-square xl:max-h-[486px] xl:w-[486px]">
               {/* 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"
-                  />
-                </>
+                <NextImage
+                  src={image}
+                  alt="section-image"
+                  width={imageWidth}
+                  height={imageHeight}
+                  className=" rounded-[40px]  h-full object-cover left-0 right-0 bottom-0 top-0"
+                />
               )}
             </div>
             <div>

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

@@ -1,25 +1,27 @@
-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;
+  imageWidth: number;
+  imageHeight: number;
+  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 = {};