@windstream/react-shared-components 0.1.44 → 0.1.46

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

@@ -1,5 +1,7 @@
-import React from "react";
-import { AccordionProps, ThemeKey } from "./types";
+"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";
@@ -8,10 +10,40 @@ 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]",
@@ -19,43 +51,61 @@ export const Accordion: React.FC<AccordionProps> = ({
     purple: "bg-[#931D69]",
     white: "bg-white",
     navy: "bg-[#00002D]",
+    cream500: "bg-[#FFFEEF]",
   };
+
   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}
+    <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"
               >
-                <Text as="div">{item.description}</Text>
-              </AccordionComponent>
-              {index < items.length - 1 && (
-                <Divider key={`divider-${index}`} className="my-6 md:my-10" />
-              )}
-            </div>
-          ))}
+                <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>
-    </div>
+    </section>
   );
 };
 

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

@@ -1,11 +1,27 @@
 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?: "blue" | "green" | "navy" | "purple" | "white" | "yellow";
-  items: { title: string; description: React.ReactNode }[];
+  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 =
@@ -14,4 +30,5 @@ export type ThemeKey =
   | "yellow"
   | "purple"
   | "white"
-  | "navy";
+  | "navy"
+  | "cream500";

package/src/contentful/blocks/cta-callout/index.tsx

@@ -27,7 +27,9 @@ export const CtaCallout: React.FC<CtaCalloutProps> = ({
     white: "bg-bg",
   };
   return (
-    <div className={`${bgColorClasses[background]} component-container px-5 py-16 lg:px-13 lg:py-24`}>
+    <div
+      className={`${bgColorClasses[background]} component-container px-5 py-16 lg:px-13 lg:py-24`}
+    >
       <div
         className={`${maxWidth ? "mx-auto max-w-120" : ""} color-${color} flex flex-col ${color == "dark" ? "text-text" : "text-text-inverse"}`}
       >

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

@@ -45,7 +45,7 @@ export const Footer: React.FC<FooterProps> = ({
                         <Button
                           {...site}
                           linkVariant="unstyled"
-                          linkClassName="text-white body3"
+                          linkClassName="text-white body3 hover:underline underline-offset-4"
                           onClick={footerClick}
                         />
                       </li>
@@ -60,7 +60,7 @@ export const Footer: React.FC<FooterProps> = ({
 
         <div className="py-8">
           <Divider className="my-8 hidden border-border-inverse md:my-8 md:block" />
-          
+
           <p className="terms-text footnote text-white">
             &copy; {new Date().getFullYear()} {terms}
           </p>
@@ -74,7 +74,7 @@ export const Footer: React.FC<FooterProps> = ({
                 >
                   <Button
                     {...link}
-                    linkClassName="footnote text-white"
+                    linkClassName="footnote text-white hover:underline underline-offset-4"
                     linkVariant="unstyled"
                     onClick={footerClick}
                   />

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

@@ -165,7 +165,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
           <aside className="flex w-full shrink-0 items-center justify-center lg:w-auto">
             {/* Media Section */}
             {image && (
-              <div className="relative w-[334px] h-[334px] md:w-[486px] md:h-[486px] rounded-image overflow-hidden">
+              <div className="relative h-[334px] w-[334px] overflow-hidden rounded-image md:h-[486px] md:w-[486px]">
                 <NextImage
                   src={image}
                   alt="section-image"

package/src/contentful/blocks/primary-hero/types.ts

@@ -23,7 +23,7 @@ export type PrimaryHeroProps = {
   primaryCta1?: any;
   primaryCta2?: any;
   hideOnMobileCta1?: boolean;
-  hideOnMobileCta2?: boolean;   
+  hideOnMobileCta2?: boolean;
   secondaryCtaPrefix?: string;
   secondaryCta?: any;
   bottomLink?: any;