@windstream/react-shared-components 0.1.44 → 0.1.45

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,34 @@
-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",
+    anchorId: undefined,
+    initialExpandedItems: [],
+    hashAutoExpand: false,
+    descriptionMaxWidth: "max-w-[980px]",
+    itemContainerClassName: undefined,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};

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

@@ -1,62 +1,112 @@
-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;
+"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;

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

@@ -1,17 +1,34 @@
-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 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: "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,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;