@windstream/react-shared-components 0.1.31 → 0.1.33

package/src/contentful/blocks/footer/Footer.stories.tsx

@@ -1,30 +1,30 @@
-import { Footer } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Footer> = {
-  title: "Contentful Blocks/Footer",
-  component: Footer,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "Contentful footer block with body, links, copyrights, and terms.",
-      },
-    },
-  },
-  args: {
-    body: "Footer body content",
-    copyrights: "Company Name",
-    terms: "All rights reserved",
-    links: [],
-    bottomLinks: [],
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Footer } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Footer> = {
+  title: "Contentful Blocks/Footer",
+  component: Footer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Contentful footer block with body, links, copyrights, and terms.",
+      },
+    },
+  },
+  args: {
+    body: "Footer body content",
+    copyrights: "Company Name",
+    terms: "All rights reserved",
+    links: [],
+    bottomLinks: [],
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,90 +1,90 @@
-import React from "react";
-import { Button } from "../button";
-import { FooterProps } from "./types";
-
-import { Divider } from "@shared/components/divider";
-import { Text } from "@shared/components/text";
-
-export const Footer: React.FC<FooterProps> = ({
-  body,
-  links,
-  bottomLinks,
-  copyrights,
-  terms,
-  maxWidth = true,
-  onClick,
-}) => {
-  function footerClick(
-    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
-  ): void {
-    onClick?.(event);
-  }
-
-  return (
-    <div className="component-container bg-bg-inverse text-white">
-      <div className={` ${maxWidth ? "mx-auto max-w-120" : ""} px-5 py-8`}>
-        <aside className="break-words" aria-label="Promotions and disclaimers">
-          {body}
-        </aside>
-        <Divider className="my-8 border-border-inverse lg:my-16" />
-        <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
-          {links?.map((link: any, index: number) => (
-            <React.Fragment key={`footer-link-group-${index}`}>
-              <div key={`footer-link-group-${index}`}>
-                <nav
-                  aria-labelledby={`footer-${link?.title}`}
-                  className="site-links-group"
-                  key={`link-group-${index}`}
-                >
-                  <Text as="div" className="label3">
-                    {link?.title}
-                  </Text>
-                  <ul className="flex flex-col">
-                    {link?.items?.items?.map((site: any, _index: number) => (
-                      <li className="pt-3" key={`site-links-${_index}`}>
-                        <Button
-                          {...site}
-                          linkVariant="unstyled"
-                          linkClassName="text-white body3"
-                          onClick={footerClick}
-                        />
-                      </li>
-                    ))}
-                  </ul>
-                </nav>
-              </div>
-              <Divider className="border-border-inverse md:hidden" />
-            </React.Fragment>
-          ))}
-        </div>
-
-        <div className="py-8">
-          <Divider className="my-8 hidden border-border-inverse md:my-8 md:block" />
-          <p className="copy-rights">{copyrights}</p>
-          <p className="terms-text footnote text-white">
-            &copy; {new Date().getFullYear()} {terms}
-          </p>
-          <nav aria-label="Footer legal">
-            <ul className="bottom-links list-none">
-              {bottomLinks?.map((link: any, index: number) => (
-                <li
-                  key={`links-${index}`}
-                  className="relative float-left pl-[8px] before:absolute before:left-[3px] before:top-1/2 before:-translate-y-1/2 before:text-[14px] before:content-['•'] first-of-type:pl-0 first-of-type:before:content-['']"
-                >
-                  <Button
-                    {...link}
-                    linkClassName="footnote text-white"
-                    linkVariant="unstyled"
-                    onClick={footerClick}
-                  />
-                </li>
-              ))}
-            </ul>
-          </nav>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Footer;
+import React from "react";
+import { Button } from "../button";
+import { FooterProps } from "./types";
+
+import { Divider } from "@shared/components/divider";
+import { Text } from "@shared/components/text";
+
+export const Footer: React.FC<FooterProps> = ({
+  body,
+  links,
+  bottomLinks,
+  copyrights,
+  terms,
+  maxWidth = true,
+  onClick,
+}) => {
+  function footerClick(
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ): void {
+    onClick?.(event);
+  }
+
+  return (
+    <div className="component-container bg-bg-inverse text-white">
+      <div className={` ${maxWidth ? "mx-auto max-w-120" : ""} px-5 py-8`}>
+        <aside className="break-words" aria-label="Promotions and disclaimers">
+          {body}
+        </aside>
+        <Divider className="my-8 border-border-inverse lg:my-16" />
+        <div className="grid-1 grid gap-8 md:grid-cols-2 lg:grid-cols-4">
+          {links?.map((link: any, index: number) => (
+            <React.Fragment key={`footer-link-group-${index}`}>
+              <div key={`footer-link-group-${index}`}>
+                <nav
+                  aria-labelledby={`footer-${link?.title}`}
+                  className="site-links-group"
+                  key={`link-group-${index}`}
+                >
+                  <Text as="div" className="label3">
+                    {link?.title}
+                  </Text>
+                  <ul className="flex flex-col">
+                    {link?.items?.items?.map((site: any, _index: number) => (
+                      <li className="pt-3" key={`site-links-${_index}`}>
+                        <Button
+                          {...site}
+                          linkVariant="unstyled"
+                          linkClassName="text-white body3"
+                          onClick={footerClick}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                </nav>
+              </div>
+              <Divider className="border-border-inverse md:hidden" />
+            </React.Fragment>
+          ))}
+        </div>
+
+        <div className="py-8">
+          <Divider className="my-8 hidden border-border-inverse md:my-8 md:block" />
+          <p className="copy-rights">{copyrights}</p>
+          <p className="terms-text footnote text-white">
+            &copy; {new Date().getFullYear()} {terms}
+          </p>
+          <nav aria-label="Footer legal">
+            <ul className="bottom-links list-none">
+              {bottomLinks?.map((link: any, index: number) => (
+                <li
+                  key={`links-${index}`}
+                  className="relative float-left pl-[8px] before:absolute before:left-[3px] before:top-1/2 before:-translate-y-1/2 before:text-[14px] before:content-['•'] first-of-type:pl-0 first-of-type:before:content-['']"
+                >
+                  <Button
+                    {...link}
+                    linkClassName="footnote text-white"
+                    linkVariant="unstyled"
+                    onClick={footerClick}
+                  />
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

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/helper.tsx

@@ -1,28 +1,28 @@
-import React from "react";
-import { PlayButtonProps } from "./types";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-
-export const PlayButton: React.FC<PlayButtonProps> = ({
-  isHovered: isOuterHovered,
-  containerClassName,
-}) => {
-  return (
-    <button
-      tabIndex={-1}
-      className={`group flex h-20 w-20 items-center justify-center rounded-full bg-white shadow-xl transition-all duration-300 hover:scale-110 active:scale-95 ${containerClassName || ""}`}
-      aria-label="Play button"
-    >
-      <MaterialIcon
-        name="play_arrow"
-        size={72 as any}
-        fill={1}
-        className={`transition-colors duration-300 ${
-          isOuterHovered
-            ? "text-text-brand"
-            : "text-slate-500 group-hover:text-text-brand"
-        }`}
-      />
-    </button>
-  );
-};
+import React from "react";
+import { PlayButtonProps } from "./types";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+
+export const PlayButton: React.FC<PlayButtonProps> = ({
+  isHovered: isOuterHovered,
+  containerClassName,
+}) => {
+  return (
+    <button
+      tabIndex={-1}
+      className={`group flex h-20 w-20 items-center justify-center rounded-full bg-white shadow-xl transition-all duration-300 hover:scale-110 active:scale-95 ${containerClassName || ""}`}
+      aria-label="Play button"
+    >
+      <MaterialIcon
+        name="play_arrow"
+        size={72 as any}
+        fill={1}
+        className={`transition-colors duration-300 ${
+          isOuterHovered
+            ? "text-text-brand"
+            : "text-slate-500 group-hover:text-text-brand"
+        }`}
+      />
+    </button>
+  );
+};

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

@@ -63,10 +63,10 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
   return (
     <div className="component-container">
       <div
-        className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-8 mt-16`}
+        className={`image-promo-bar-content ${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 my-16`}
       >
         <div
-          className={`flex shrink-0 flex-col items-center gap-8 xl:gap-[126px] ${mediaPosition ? "xl:flex-row-reverse" : "xl:flex-row"}`}
+          className={`flex shrink-0 flex-col items-center gap-8 xl:gap-[126px] xl:items-stretch ${mediaPosition ? "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"}`}
@@ -91,7 +91,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               {subTitle && (
                 <Text
                   as={enableHeading ? "h2" : "h3"}
-                  className="subheading1 mt-3"
+                  className="subheading3 md:subheading1 mt-3"
                 >
                   {subTitle}
                 </Text>
@@ -105,7 +105,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             )}
             {/* Checklist Rendering */}
             {checklist.length > 0 && (
-              <Checklist items={checklist} iconPosition="top" iconSize={24} />
+              <Checklist items={checklist} iconPosition="top" iconSize={24} listClassName="text-text" />
             )}
             {imageLinks.length > 0 && (
               <div className="flex gap-4">
@@ -134,6 +134,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                     <Button
                       {...cta}
                       fullWidth={true}
+                      size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
                     />
@@ -144,6 +145,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                     <Button
                       {...secondaryCta}
                       fullWidth={true}
+                      size={{ base: "large" }}
                       renderCheckPlans={renderCheckPlans}
                       onModalButtonClick={onModalButtonClick}
                     />
@@ -154,16 +156,16 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             {ctaDisclaimer && <div>{ctaDisclaimer}</div>}
             {disclaimer && <div>{disclaimer}</div>}
           </div>
-          <aside className="flex w-full shrink-0 items-center justify-center xl:w-auto">
+          <aside className="flex w-full shrink-0 items-center justify-center lg:w-auto">
             {/* Media Section */}
             {image && (
-              <div className="relative flex aspect-[16/9] w-full justify-center xl:aspect-square xl:max-h-[486px] xl:w-[486px]">
+              <div className="relative w-[334px] h-[334px] md:w-[486px] md:h-[480px] rounded-image overflow-hidden">
                 <NextImage
                   src={image}
                   alt="section-image"
-                  width={imageWidth}
-                  height={imageHeight}
-                  className="bottom-0 left-0 right-0 top-0 h-full rounded-[40px] object-cover"
+                  fill
+                  sizes="(min-width: 768px) 486px, 334px"
+                  className="object-cover"
                 />
               </div>
             )}
@@ -171,7 +173,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
             {videoLink?.link && (
               <div
                 className={cx(
-                  "video-section relative w-full cursor-pointer overflow-hidden rounded-[40px] transition-all duration-300 xl:w-[486px]",
+                  "video-section relative w-full cursor-pointer overflow-hidden rounded-image transition-all duration-300 lg:w-[486px]",
                   !isPlaying && "hover:shadow-2xl"
                 )}
                 onClick={handlePlayClick}
@@ -192,7 +194,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                       alt="Video preview"
                       width={486}
                       height={486}
-                      className="absolute inset-0 h-full w-full rounded-[40px] object-cover"
+                      className="absolute inset-0 h-full w-full rounded-image object-cover"
                     />
                   )}
                   <div className="absolute inset-0 flex items-center justify-center">
@@ -204,7 +206,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
                 {!videoPopup && isPlaying && (
                   <div
                     className={cx(
-                      "aspect-[16/9] w-full overflow-hidden rounded-[40px] transition-opacity duration-300",
+                      "aspect-[16/9] w-full overflow-hidden rounded-image transition-opacity duration-300",
                       isPlaying ? "opacity-100" : "opacity-0"
                     )}
                   >

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

@@ -1,44 +1,44 @@
-import React from "react";
-
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export type VideoLinkProps = {
-  image?: string;
-  videoPopup?: boolean;
-  link?: string;
-};
-
-export type VideoEmbedProps = {
-  containerClassName?: string;
-  autoplay?: boolean;
-  debug?: boolean;
-} & VideoLinkProps;
-
-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: VideoLinkProps;
-  maxWidth?: boolean;
-  color: "light" | "dark";
-  onModalButtonClick?: (id?: string) => void;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-};
-
-export type PlayButtonProps = {
-  isHovered?: boolean;
-  containerClassName?: string;
-};
+import React from "react";
+
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export type VideoLinkProps = {
+  image?: string;
+  videoPopup?: boolean;
+  link?: string;
+};
+
+export type VideoEmbedProps = {
+  containerClassName?: string;
+  autoplay?: boolean;
+  debug?: boolean;
+} & VideoLinkProps;
+
+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: VideoLinkProps;
+  maxWidth?: boolean;
+  color: "light" | "dark";
+  onModalButtonClick?: (id?: string) => void;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+};
+
+export type PlayButtonProps = {
+  isHovered?: boolean;
+  containerClassName?: string;
+};