@windstream/react-shared-components 0.1.35 → 0.1.37

package/src/components/view-cart-button/index.tsx

@@ -1,42 +1,42 @@
-import { Button } from "../button";
-import { MaterialIcon } from "../material-icon";
-import { Text } from "../text";
-import { ViewCartButtonProps } from "./types";
-
-import { cx } from "@shared/utils";
-
-const baseClasses =
-  "btn-medium rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top border-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse";
-export const ViewCartButton: React.FC<ViewCartButtonProps> = props => {
-  const { cartTotalText, onClick, isOpen, ...rest } = props;
-  return (
-    <Button
-      className={cx(
-        baseClasses,
-        "btn-small w-full border-border pl-6 pr-4 md:btn-medium"
-      )}
-      onClick={onClick}
-      {...rest}
-    >
-      <div className="flex w-full items-center justify-center gap-2">
-        <div className="flex flex-col items-center justify-center">
-          <Text className="label4 -mb-1 text-text">View cart</Text>
-          <Text className="label3 text-text md:label1" data-testid="cart-total">
-            {cartTotalText}
-          </Text>
-        </div>
-        <MaterialIcon
-          name="keyboard_arrow_up"
-          size={24}
-          fill={0}
-          className={cx(
-            "h-6 w-6 transition-transform",
-            isOpen ? "rotate-180" : "rotate-0"
-          )}
-        />
-      </div>
-    </Button>
-  );
-};
-
-export type { ViewCartButtonProps } from "./types";
+import { Button } from "../button";
+import { MaterialIcon } from "../material-icon";
+import { Text } from "../text";
+import { ViewCartButtonProps } from "./types";
+
+import { cx } from "@shared/utils";
+
+const baseClasses =
+  "btn-medium rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top border-2 border-border-secondary-on-bg-fill bg-bg text-text focus:ring-bg-surface-inverse";
+export const ViewCartButton: React.FC<ViewCartButtonProps> = props => {
+  const { cartTotalText, onClick, isOpen, ...rest } = props;
+  return (
+    <Button
+      className={cx(
+        baseClasses,
+        "btn-small w-full border-border pl-6 pr-4 md:btn-medium"
+      )}
+      onClick={onClick}
+      {...rest}
+    >
+      <div className="flex w-full items-center justify-center gap-2">
+        <div className="flex flex-col items-center justify-center">
+          <Text className="label4 -mb-1 text-text">View cart</Text>
+          <Text className="label3 text-text md:label1" data-testid="cart-total">
+            {cartTotalText}
+          </Text>
+        </div>
+        <MaterialIcon
+          name="keyboard_arrow_up"
+          size={24}
+          fill={0}
+          className={cx(
+            "h-6 w-6 transition-transform",
+            isOpen ? "rotate-180" : "rotate-0"
+          )}
+        />
+      </div>
+    </Button>
+  );
+};
+
+export type { ViewCartButtonProps } from "./types";

package/src/components/view-cart-button/types.ts

@@ -1,5 +1,5 @@
-export type ViewCartButtonProps = {
-  cartTotalText: string;
-  onClick: () => void;
-  isOpen: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ViewCartButtonProps = {
+  cartTotalText: string;
+  onClick: () => void;
+  isOpen: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;

package/src/contentful/blocks/accordion/Accordion.stories.tsx

@@ -1,29 +1,29 @@
-import { Accordion } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Accordion> = {
-  title: "Contentful Blocks/Accordion",
-  component: Accordion,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful accordion block.",
-      },
-    },
-  },
-  args: {
-    background: "white",
-    enableHeading: false,
-    items: [],
-    maxWidth: true,
-    title: "test",
-  },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Accordion } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Contentful Blocks/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful accordion block.",
+      },
+    },
+  },
+  args: {
+    background: "white",
+    enableHeading: false,
+    items: [],
+    maxWidth: true,
+    title: "test",
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,62 +1,62 @@
-import React from "react";
-import { AccordionProps, ThemeKey } from "./types";
-
-import { Accordion as AccordionComponent } from "@shared/components/accordion";
-import { Divider } from "@shared/components/divider";
-import { Text } from "@shared/components/text";
-
-export const Accordion: React.FC<AccordionProps> = ({
-  items,
-  title,
-  background = "white",
-  enableHeading = false,
-  maxWidth = true,
-}) => {
-  const bgColorClasses: Record<ThemeKey, string> = {
-    blue: "bg-[#07B2E2]",
-    green: "bg-[#26B170]",
-    yellow: "bg-[#F5FF1E]",
-    purple: "bg-[#931D69]",
-    white: "bg-white",
-    navy: "bg-[#00002D]",
-  };
-  return (
-    <div className={`${bgColorClasses[background]} component-container`}>
-      <div
-        className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 my-8 lg:mx-20 lg:my-18`}
-      >
-        <div>
-          <Text
-            as={enableHeading ? "h1" : "h2"}
-            className="heading2 text-left text-text md:heading1 lg:text-center"
-          >
-            {title}
-          </Text>
-        </div>
-        <div className="question-answer-section mt-10 lg:mt-16">
-          {items?.map((item: any, index: number) => (
-            <div key={`item-${index}`}>
-              <AccordionComponent
-                title={item.title}
-                containerClassName="border-none"
-                buttonClassName="p-0 label1"
-                titleClassName="label3 md:label1 text-text"
-                className="p-0 pt-6 text-text"
-                iconClassName="text-icon"
-                borderRadiusNone={true}
-                openOnlyOnDesktop={false}
-              >
-                <Text as="div">{item.description}</Text>
-              </AccordionComponent>
-              {index < items.length - 1 && (
-                <Divider key={`divider-${index}`} className="my-6 md:my-10" />
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Accordion;
+import React from "react";
+import { AccordionProps, ThemeKey } from "./types";
+
+import { Accordion as AccordionComponent } from "@shared/components/accordion";
+import { Divider } from "@shared/components/divider";
+import { Text } from "@shared/components/text";
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  title,
+  background = "white",
+  enableHeading = false,
+  maxWidth = true,
+}) => {
+  const bgColorClasses: Record<ThemeKey, string> = {
+    blue: "bg-[#07B2E2]",
+    green: "bg-[#26B170]",
+    yellow: "bg-[#F5FF1E]",
+    purple: "bg-[#931D69]",
+    white: "bg-white",
+    navy: "bg-[#00002D]",
+  };
+  return (
+    <div className={`${bgColorClasses[background]} component-container`}>
+      <div
+        className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 my-8 lg:mx-20 lg:my-18`}
+      >
+        <div>
+          <Text
+            as={enableHeading ? "h1" : "h2"}
+            className="heading2 text-left text-text md:heading1 lg:text-center"
+          >
+            {title}
+          </Text>
+        </div>
+        <div className="question-answer-section mt-10 lg:mt-16">
+          {items?.map((item: any, index: number) => (
+            <div key={`item-${index}`}>
+              <AccordionComponent
+                title={item.title}
+                containerClassName="border-none"
+                buttonClassName="p-0 label1"
+                titleClassName="label3 md:label1 text-text"
+                className="p-0 pt-6 text-text"
+                iconClassName="text-icon"
+                borderRadiusNone={true}
+                openOnlyOnDesktop={false}
+              >
+                <Text as="div">{item.description}</Text>
+              </AccordionComponent>
+              {index < items.length - 1 && (
+                <Divider key={`divider-${index}`} className="my-6 md:my-10" />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;

package/src/contentful/blocks/accordion/types.ts

@@ -1,17 +1,17 @@
-import React from "react";
-
-export type AccordionProps = {
-  title: string;
-  enableHeading?: boolean;
-  background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
-  items: { title: string; description: React.ReactNode }[];
-  maxWidth?: boolean;
-};
-
-export type ThemeKey =
-  | "blue"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "white"
-  | "navy";
+import React from "react";
+
+export type AccordionProps = {
+  title: string;
+  enableHeading?: boolean;
+  background?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
+  items: { title: string; description: React.ReactNode }[];
+  maxWidth?: boolean;
+};
+
+export type ThemeKey =
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy";

package/src/contentful/blocks/address-input-banner/index.tsx

@@ -1,52 +1,52 @@
-import { FC } from "react";
-import { AddressInputBannerProps } from "./types";
-
-import { Text } from "@shared/components/text";
-import { cx } from "@shared/utils";
-
-const variantStyles: Record<string, { bg: string; text: string }> = {
-  yellow: { bg: "bg-fill-brand-accent", text: "text" },
-  white: { bg: "bg-white", text: "text" },
-  navy: { bg: "bg-bg-fill-inverse", text: "text-inverse" },
-  green: { bg: "bg-border-success", text: "text-inverse" },
-};
-
-export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
-  const {
-    title,
-    variant = "yellow",
-    cta,
-    navHeight,
-    isVisible,
-    renderCheckPlans,
-  } = props;
-
-  const style = variantStyles[variant?.toLowerCase()] || variantStyles.yellow;
-
-  if (!isVisible) return null;
-
-  const ctaLabel = cta?.buttonLabel || "Check plans";
-  const renderedCheckPlans = renderCheckPlans?.({
-    ctaText: ctaLabel,
-    buttonVariant: cta?.buttonVariant,
-    showButtonAs: "solid",
-    cta: cta,
-  });
-
-  return (
-    <div
-      style={{
-        top: `${navHeight}px`,
-      }}
-      className={cx(
-        `sticky left-0 right-0 z-[89] w-full shadow-drop transition-all duration-200 lg:fixed bg-${style.bg} text-${style.text}`,
-        "flex flex-col items-center justify-center gap-3 p-[10px] lg:flex-row lg:gap-8 lg:px-6 lg:py-[10px]"
-      )}
-    >
-      <Text className="label3 w-full text-center text-text lg:w-auto lg:text-left">
-        {title}
-      </Text>
-      {renderedCheckPlans}
-    </div>
-  );
-};
+import { FC } from "react";
+import { AddressInputBannerProps } from "./types";
+
+import { Text } from "@shared/components/text";
+import { cx } from "@shared/utils";
+
+const variantStyles: Record<string, { bg: string; text: string }> = {
+  yellow: { bg: "bg-fill-brand-accent", text: "text" },
+  white: { bg: "bg-white", text: "text" },
+  navy: { bg: "bg-bg-fill-inverse", text: "text-inverse" },
+  green: { bg: "bg-border-success", text: "text-inverse" },
+};
+
+export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
+  const {
+    title,
+    variant = "yellow",
+    cta,
+    navHeight,
+    isVisible,
+    renderCheckPlans,
+  } = props;
+
+  const style = variantStyles[variant?.toLowerCase()] || variantStyles.yellow;
+
+  if (!isVisible) return null;
+
+  const ctaLabel = cta?.buttonLabel || "Check plans";
+  const renderedCheckPlans = renderCheckPlans?.({
+    ctaText: ctaLabel,
+    buttonVariant: cta?.buttonVariant,
+    showButtonAs: "solid",
+    cta: cta,
+  });
+
+  return (
+    <div
+      style={{
+        top: `${navHeight}px`,
+      }}
+      className={cx(
+        `sticky left-0 right-0 z-[89] w-full shadow-drop transition-all duration-200 lg:fixed bg-${style.bg} text-${style.text}`,
+        "flex flex-col items-center justify-center gap-3 p-[10px] lg:flex-row lg:gap-8 lg:px-6 lg:py-[10px]"
+      )}
+    >
+      <Text className="label3 w-full text-center text-text lg:w-auto lg:text-left">
+        {title}
+      </Text>
+      {renderedCheckPlans}
+    </div>
+  );
+};

package/src/contentful/blocks/address-input-banner/types.ts

@@ -1,14 +1,14 @@
-import React from "react";
-
-import { ButtonProps } from "@shared/contentful/blocks/button/types";
-import { CheckPlansProps } from "@shared/types/micro-components";
-
-export interface AddressInputBannerProps {
-  entryName?: string;
-  title: string;
-  variant?: string;
-  cta?: ButtonProps;
-  navHeight?: number;
-  isVisible?: boolean;
-  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
-}
+import React from "react";
+
+import { ButtonProps } from "@shared/contentful/blocks/button/types";
+import { CheckPlansProps } from "@shared/types/micro-components";
+
+export interface AddressInputBannerProps {
+  entryName?: string;
+  title: string;
+  variant?: string;
+  cta?: ButtonProps;
+  navHeight?: number;
+  isVisible?: boolean;
+  renderCheckPlans?: (overrides?: CheckPlansProps) => React.ReactNode;
+}

package/src/contentful/blocks/anchored-bottom-banner/index.tsx

@@ -1,65 +1,70 @@
-import React from "react";
-import { AnchoredBottomBannerProps } from "./types";
-import Link from "next/link";
-
-import { MaterialIcon } from "@shared/components/material-icon";
-
-export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
-  ctaSuffixText,
-  backgroundColor,
-  iconName,
-  boxShadow,
-  ctaButtonLabel,
-  ctaButtonLink,
-  ctaButtonTarget,
-}) => {
-  const backGroundColorClasses = {
-    navy: "bg-bg-fill-inverse",
-    green: "bg-bg-fill-success",
-    blue: "bg-bg-fill-brand-supporting",
-    purple: "bg-bg-fill-brand-tertiary",
-    yellow: "bg-bg-fill-brand-accent",
-  };
-
-  const bgClass = backgroundColor
-    ? backGroundColorClasses[backgroundColor]
-    : "bg-bg-fill-brand-accent";
-
-  const isYellow = backgroundColor === "yellow" || !backgroundColor;
-  const textColorClass = isYellow ? "text-text-primary" : "text-white";
-
-  return (
-    <div
-      className={`fixed bottom-0 left-0 right-0 z-[30] flex w-full items-center justify-center px-4 py-3 transition-all duration-300 ${bgClass} ${
-        boxShadow ? boxShadow : "shadow-[0_-4px_10px_rgba(0,0,0,0.1)]"
-      }`}
-    >
-      <Link
-        href={ctaButtonLink || "#"}
-        target={ctaButtonTarget || "_self"}
-        className="max-w-screen-xl w-full transition-all"
-      >
-        <div className="flex flex-col items-center justify-center gap-1 text-center font-black">
-          <div
-            className={`${textColorClass} break-words text-body1 font-black leading-snug md:text-[18px]`}
-          >
-            {iconName && (
-              <MaterialIcon
-                name={
-                  iconName as React.ComponentProps<typeof MaterialIcon>["name"]
-                }
-                size={24}
-                fill={1}
-                className={`${textColorClass} align-text-bottom`}
-              />
-            )}
-            {ctaButtonLabel && ctaButtonLabel}{" "}
-            {ctaSuffixText && <span className="ml-0.5">{ctaSuffixText}</span>}
-          </div>
-        </div>
-      </Link>
-    </div>
-  );
-};
-
-export default AnchoredBottomBanner;
+import React from "react";
+import { AnchoredBottomBannerProps } from "./types";
+import Link from "next/link";
+
+import { MaterialIcon } from "@shared/components/material-icon";
+
+export const AnchoredBottomBanner: React.FC<AnchoredBottomBannerProps> = ({
+  ctaSuffixText,
+  backgroundColor,
+  iconName,
+  boxShadow,
+  ctaButtonLabel,
+  ctaButtonLink,
+  ctaButtonTarget,
+  anchorId = "anchored-banner",
+}) => {
+  const backGroundColorClasses = {
+    navy: "bg-bg-fill-inverse",
+    green: "bg-bg-fill-success",
+    blue: "bg-bg-fill-brand-supporting",
+    purple: "bg-bg-fill-brand-tertiary",
+    yellow: "bg-bg-fill-brand-accent",
+  };
+
+  const bgClass = backgroundColor
+    ? backGroundColorClasses[backgroundColor]
+    : "bg-bg-fill-brand-accent";
+
+  const isYellow = backgroundColor === "yellow" || !backgroundColor;
+  const textColorClass = isYellow ? "text-text-primary" : "text-white";
+
+  return (
+    <section id={anchorId}>
+      <div
+        className={`fixed bottom-0 left-0 right-0 z-[30] flex w-full items-center justify-center px-4 py-3 transition-all duration-300 ${bgClass} ${
+          boxShadow ? boxShadow : "shadow-[0_-4px_10px_rgba(0,0,0,0.1)]"
+        }`}
+      >
+        <Link
+          href={ctaButtonLink || "#"}
+          target={ctaButtonTarget || "_self"}
+          className="max-w-screen-xl w-full transition-all"
+        >
+          <div className="flex flex-col items-center justify-center gap-1 text-center font-black">
+            <div
+              className={`${textColorClass} break-words text-body1 font-black leading-snug md:text-[18px]`}
+            >
+              {iconName && (
+                <MaterialIcon
+                  name={
+                    iconName as React.ComponentProps<
+                      typeof MaterialIcon
+                    >["name"]
+                  }
+                  size={24}
+                  fill={1}
+                  className={`${textColorClass} align-text-bottom`}
+                />
+              )}
+              {ctaButtonLabel && ctaButtonLabel}{" "}
+              {ctaSuffixText && <span className="ml-0.5">{ctaSuffixText}</span>}
+            </div>
+          </div>
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+export default AnchoredBottomBanner;

package/src/contentful/blocks/anchored-bottom-banner/types.ts

@@ -1,9 +1,10 @@
-export interface AnchoredBottomBannerProps {
-  ctaSuffixText?: string;
-  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue";
-  iconName?: string;
-  boxShadow?: boolean;
-  ctaButtonLabel?: string;
-  ctaButtonLink?: string;
-  ctaButtonTarget?: string;
-}
+export interface AnchoredBottomBannerProps {
+  ctaSuffixText?: string;
+  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue";
+  iconName?: string;
+  boxShadow?: boolean;
+  ctaButtonLabel?: string;
+  ctaButtonLink?: string;
+  ctaButtonTarget?: string;
+  anchorId?: string;
+}