@windstream/react-shared-components 0.1.69 → 0.1.71

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

@@ -1,112 +1,112 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { AccordionItem, 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,
-  anchorId,
-  background = "white",
-  enableHeading = false,
-  maxWidth = true,
-  initialExpandedItems: initialExpandedItemsProp = [],
-  hashAutoExpand = false,
-  descriptionMaxWidth = "max-w-[980px]",
-  itemContainerClassName,
-}) => {
-  const [expandedItems, setExpandedItems] = useState<string[]>(
-    initialExpandedItemsProp
-  );
-
-  useEffect(() => {
-    if (hashAutoExpand && typeof window !== "undefined") {
-      const hash = window.location.hash;
-      if (hash) {
-        const expandItemId = hash.substring(hash.indexOf("#") + 1);
-        setExpandedItems(prev => {
-          if (prev.includes(expandItemId)) return prev;
-          return [...prev, expandItemId];
-        });
-      }
-    }
-  }, [hashAutoExpand]);
-
-  const handleToggle = (itemAnchorId: string) => {
-    setExpandedItems(prev =>
-      prev.includes(itemAnchorId)
-        ? prev.filter(id => id !== itemAnchorId)
-        : [...prev, itemAnchorId]
-    );
-  };
-
-  const bgColorClasses: Record<ThemeKey, string> = {
-    blue: "bg-[#07B2E2]",
-    green: "bg-[#26B170]",
-    yellow: "bg-[#F5FF1E]",
-    purple: "bg-[#931D69]",
-    white: "bg-white",
-    navy: "bg-[#00002D]",
-    cream500: "bg-[#FFFEEF]",
-  };
-
-  return (
-    <section
-      id={anchorId}
-      className={`${bgColorClasses[background]} flex flex-col px-2 pb-20 pt-4 md:px-10`}
-    >
-      <div className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}>
-        <Text
-          as={enableHeading ? "h1" : "h2"}
-          className="heading2 mb-10 pt-12 text-left text-text md:heading1 lg:text-center"
-        >
-          {title}
-        </Text>
-        <div className={`pt-6 md:pt-10 ${itemContainerClassName ?? ""}`}>
-          {items?.map((item: AccordionItem, index: number) => {
-            const itemKey = item.anchorId || `item-${index}`;
-            const isOpen = item.anchorId
-              ? expandedItems.includes(item.anchorId)
-              : undefined;
-
-            return (
-              <div
-                key={itemKey}
-                id={item.anchorId}
-                className="snap-start scroll-mt-48 lg:scroll-mt-60"
-              >
-                <AccordionComponent
-                  title={item.title}
-                  defaultOpen={isOpen}
-                  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}
-                  {...(item.anchorId && {
-                    onClick: () => handleToggle(item.anchorId!),
-                  })}
-                >
-                  <div className={descriptionMaxWidth}>
-                    <Text as="div">{item.description}</Text>
-                  </div>
-                </AccordionComponent>
-                {index < items.length - 1 && (
-                  <Divider key={`divider-${index}`} className="my-6 md:my-10" />
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Accordion;
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { AccordionItem, 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,
+  anchorId,
+  background = "white",
+  enableHeading = false,
+  maxWidth = true,
+  initialExpandedItems: initialExpandedItemsProp = [],
+  hashAutoExpand = false,
+  descriptionMaxWidth = "max-w-[980px]",
+  itemContainerClassName,
+}) => {
+  const [expandedItems, setExpandedItems] = useState<string[]>(
+    initialExpandedItemsProp
+  );
+
+  useEffect(() => {
+    if (hashAutoExpand && typeof window !== "undefined") {
+      const hash = window.location.hash;
+      if (hash) {
+        const expandItemId = hash.substring(hash.indexOf("#") + 1);
+        setExpandedItems(prev => {
+          if (prev.includes(expandItemId)) return prev;
+          return [...prev, expandItemId];
+        });
+      }
+    }
+  }, [hashAutoExpand]);
+
+  const handleToggle = (itemAnchorId: string) => {
+    setExpandedItems(prev =>
+      prev.includes(itemAnchorId)
+        ? prev.filter(id => id !== itemAnchorId)
+        : [...prev, itemAnchorId]
+    );
+  };
+
+  const bgColorClasses: Record<ThemeKey, string> = {
+    blue: "bg-[#07B2E2]",
+    green: "bg-[#26B170]",
+    yellow: "bg-[#F5FF1E]",
+    purple: "bg-[#931D69]",
+    white: "bg-white",
+    navy: "bg-[#00002D]",
+    cream500: "bg-[#FFFEEF]",
+  };
+
+  return (
+    <section
+      id={anchorId}
+      className={`${bgColorClasses[background]} flex flex-col px-5 pb-20 pt-4 md:px-10`}
+    >
+      <div className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""}`}>
+        <Text
+          as={enableHeading ? "h1" : "h2"}
+          className="heading2 mb-10 pt-12 text-left text-text md:heading1 lg:text-center"
+        >
+          {title}
+        </Text>
+        <div className={`pt-6 md:pt-10 ${itemContainerClassName ?? ""}`}>
+          {items?.map((item: AccordionItem, index: number) => {
+            const itemKey = item.anchorId || `item-${index}`;
+            const isOpen = item.anchorId
+              ? expandedItems.includes(item.anchorId)
+              : undefined;
+
+            return (
+              <div
+                key={itemKey}
+                id={item.anchorId}
+                className="snap-start scroll-mt-48 lg:scroll-mt-60"
+              >
+                <AccordionComponent
+                  title={item.title}
+                  defaultOpen={isOpen}
+                  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}
+                  {...(item.anchorId && {
+                    onClick: () => handleToggle(item.anchorId!),
+                  })}
+                >
+                  <div className={descriptionMaxWidth}>
+                    <Text as="div">{item.description}</Text>
+                  </div>
+                </AccordionComponent>
+                {index < items.length - 1 && (
+                  <Divider key={`divider-${index}`} className="my-6 md:my-10" />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Accordion;

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

@@ -1,34 +1,34 @@
-import React from "react";
-
-export type AccordionItem = {
-  anchorId?: string;
-  title: string;
-  description: React.ReactNode;
-};
-
-export type AccordionProps = {
-  /** Section-level anchor ID applied to the outer <section> element */
-  anchorId?: string;
-  title: string;
-  enableHeading?: boolean;
-  background?: ThemeKey;
-  items: AccordionItem[];
-  maxWidth?: boolean;
-  /** Array of anchorIds that should be expanded on mount */
-  initialExpandedItems?: string[];
-  /** Enable URL hash auto-expand on mount */
-  hashAutoExpand?: boolean;
-  /** Max-width class for item descriptions (default: "max-w-[980px]") */
-  descriptionMaxWidth?: string;
-  /** Custom class for the accordion list wrapper */
-  itemContainerClassName?: string;
-};
-
-export type ThemeKey =
-  | "blue"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "white"
-  | "navy"
-  | "cream500";
+import React from "react";
+
+export type AccordionItem = {
+  anchorId?: string;
+  title: string;
+  description: React.ReactNode;
+};
+
+export type AccordionProps = {
+  /** Section-level anchor ID applied to the outer <section> element */
+  anchorId?: string;
+  title: string;
+  enableHeading?: boolean;
+  background?: ThemeKey;
+  items: AccordionItem[];
+  maxWidth?: boolean;
+  /** Array of anchorIds that should be expanded on mount */
+  initialExpandedItems?: string[];
+  /** Enable URL hash auto-expand on mount */
+  hashAutoExpand?: boolean;
+  /** Max-width class for item descriptions (default: "max-w-[980px]") */
+  descriptionMaxWidth?: string;
+  /** Custom class for the accordion list wrapper */
+  itemContainerClassName?: string;
+};
+
+export type ThemeKey =
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy"
+  | "cream500";

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: "white", text: "text" },
+  navy: { bg: "bg-fill-inverse", text: "text-inverse" },
+  green: { bg: "bg-fill-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 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 md:label1 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,70 +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,
-  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;
+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,10 +1,10 @@
-export interface AnchoredBottomBannerProps {
-  ctaSuffixText?: string;
-  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue";
-  iconName?: string;
-  boxShadow?: boolean;
-  ctaButtonLabel?: string;
-  ctaButtonLink?: string;
-  ctaButtonTarget?: string;
-  anchorId?: string;
-}
+export interface AnchoredBottomBannerProps {
+  ctaSuffixText?: string;
+  backgroundColor?: "navy" | "yellow" | "green" | "purple" | "blue";
+  iconName?: string;
+  boxShadow?: boolean;
+  ctaButtonLabel?: string;
+  ctaButtonLink?: string;
+  ctaButtonTarget?: string;
+  anchorId?: string;
+}