fix(component-header-footer): fix footer clashing classes with bootstrap JS

Author: davidornelas11

packages/component-header-footer/src/footer/components/ColumnSection/index.js

@@ -9,19 +9,32 @@ import React, { useState, useEffect, useRef } from "react";
  */
 
 /**
- * @param {{ columnIndex: number, column: Column }} props
+ * @param {{ columnIndex: number, column: Column, isOpen?: boolean, onToggle?: () => void }} props
  * @returns {JSX.Element}
  */
 
-const ColumnSection = ({ columnIndex, column: { title, links } }) => {
-  const [show, setShow] = useState(false);
+const ColumnSection = ({
+  columnIndex,
+  column: { title, links },
+  isOpen = false,
+  onToggle,
+}) => {
+  const [show, setShow] = useState(isOpen);
   const isWindowDefined = typeof window !== "undefined";
   const initialMatches = isWindowDefined ? window.innerWidth >= 1260 : false;
   const [isLgDesktop, setIsLgDesktop] = useState(initialMatches);
 
   /** @type {React.RefObject<HTMLDivElement> | null} */
   const accordionBodyRef = useRef(null);
 
+  // Update local state when prop changes
+  useEffect(() => {
+    if (!isLgDesktop && onToggle) {
+      handleAnimation(isOpen);
+    }
+    setShow(isOpen);
+  }, [isOpen, isLgDesktop, onToggle]);
+
   useEffect(() => {
     const mediaWatcher = window.matchMedia("screen and (min-width: 1260px)");
     const handleMediaChange = e => setIsLgDesktop(e.matches);
@@ -33,27 +46,27 @@ const ColumnSection = ({ columnIndex, column: { title, links } }) => {
 
   const handleAnimation = showingContent => {
     const accordionBody = accordionBodyRef?.current;
-    if (!accordionBody) return;
-    accordionBody.classList.add("collapsing");
+    if (!accordionBody || !accordionBody.animate) return;
+    accordionBody.classList.add("footer-collapsing");
     const animation = accordionBody.animate(
       [
         {
           maxHeight: showingContent ? `${accordionBody.scrollHeight}px` : "0px",
         },
       ],
       {
-        duration: 350,
+        duration: 250,
         easing: "ease-in-out",
         fill: "forwards",
       }
     );
 
     animation.onfinish = () => {
-      accordionBody.classList.remove("collapsing");
+      accordionBody.classList.remove("footer-collapsing");
       if (showingContent) {
-        accordionBody.classList.add("show");
+        accordionBody.classList.add("footer-column-show");
       } else {
-        accordionBody.classList.remove("show");
+        accordionBody.classList.remove("footer-column-show");
       }
     };
   };
@@ -64,24 +77,29 @@ const ColumnSection = ({ columnIndex, column: { title, links } }) => {
       return;
     }
 
-    setShow(prev => {
-      const showingContent = !prev;
-      handleAnimation(showingContent);
-      return showingContent;
-    });
+    if (onToggle) {
+      onToggle();
+    } else {
+      // Fallback for backward compatibility
+      setShow(prev => {
+        const showingContent = !prev;
+        handleAnimation(showingContent);
+        return showingContent;
+      });
+    }
   };
 
   return (
     <div className="col-xl flex-footer testname-column">
       <div className="card accordion-item desktop-disable-xl">
-        <div className="accordion-header">
+        <div className="footer-accordion-header">
           <div className="h5">
             {isLgDesktop ? (
               <p className="accordion-button">{title}</p>
             ) : (
               <button
                 id={`footlink-header-${columnIndex}`}
-                className="accordion-button"
+                className="footer-accordion-button"
                 aria-expanded={show || isLgDesktop}
                 aria-controls={`footlink-${columnIndex}`}
                 onClick={handleToggle}
@@ -90,7 +108,7 @@ const ColumnSection = ({ columnIndex, column: { title, links } }) => {
               >
                 {title}
                 <FontAwesomeIcon
-                  className={show || isLgDesktop ? "open" : ""}
+                  className={show || isLgDesktop ? "column-open" : ""}
                   icon={faChevronDown}
                 />
               </button>
@@ -99,7 +117,7 @@ const ColumnSection = ({ columnIndex, column: { title, links } }) => {
         </div>
         <div
           id={`footlink-${columnIndex}`}
-          className="accordion-body"
+          className="footer-accordion-body"
           role="region"
           ref={accordionBodyRef}
         >
@@ -131,6 +149,8 @@ ColumnSection.propTypes = {
       })
     ),
   }),
+  isOpen: PropTypes.bool,
+  onToggle: PropTypes.func,
 };
 
 export { ColumnSection };

packages/component-header-footer/src/footer/components/Contact/index.js

@@ -1,6 +1,6 @@
 // @ts-check
 import PropTypes, { shape, arrayOf } from "prop-types";
-import React from "react";
+import React, { useState } from "react";
 
 import { Button } from "../../../header/components/Button";
 import { ColumnSection } from "../ColumnSection";
@@ -14,6 +14,9 @@ import { ColumnSection } from "../ColumnSection";
 const ContactComponent = ({
   contact: { title = "", contactLink = "", contributionLink = "", columns },
 }) => {
+  const [openAccordionIndex, setOpenAccordionIndex] = useState(
+    /** @type {number | null} */ (null)
+  );
   return (
     <div className="wrapper" id="wrapper-footer-columns" data-testid="contact">
       <div className="container" id="footer-columns">
@@ -46,6 +49,12 @@ const ContactComponent = ({
                   key={`footlink-${column.title}`}
                   columnIndex={columnIndex}
                   column={column}
+                  isOpen={openAccordionIndex === columnIndex}
+                  onToggle={() => {
+                    setOpenAccordionIndex(
+                      openAccordionIndex === columnIndex ? null : columnIndex
+                    );
+                  }}
                 />
               ))}
             </>

packages/component-header-footer/src/footer/index.styles.js

@@ -25,14 +25,15 @@ const StyledFooter = styled.footer`
   // Base Styles
   * {
     box-sizing: border-box;
-    font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans,
-      sans-serif;
+    font-family:
+      Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
     line-height: 1.5rem;
 
     a:focus,
     button:focus {
       outline: none;
-      box-shadow: 0 0 0 2px var(--color-base-white),
+      box-shadow:
+        0 0 0 2px var(--color-base-white),
         0 0 0 4px var(--color-base-grey-7) !important;
       -webkit-tap-highlight-color: transparent;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -201,29 +202,29 @@ const StyledFooter = styled.footer`
 
     .flex-footer {
       .accordion-item,
-      .accordion-header,
-      .accordion-body {
+      .footer-accordion-header,
+      .footer-accordion-body {
         background: var(--color-divider-darker);
         color: var(--color-base-white);
         border: 0;
       }
 
-      .accordion-header {
+      .footer-accordion-header {
         border-top: 1px solid var(--color-divider-lighter);
         padding-left: 0;
 
         h5,
         .h5 {
           margin: 0;
           a,
-          .accordion-button {
+          .footer-accordion-button {
             ${flexCenter}
             justify-content: space-between;
           }
         }
 
         a,
-        .accordion-button {
+        .footer-accordion-button {
           color: var(--color-base-grey-2);
           padding: 1.5rem 0;
           text-decoration: none;
@@ -234,6 +235,7 @@ const StyledFooter = styled.footer`
           cursor: pointer;
           text-align: inherit;
           width: 100%;
+          transition: background-color 0.15s ease;
 
           &:hover {
             background: var(--color-divider-darker);
@@ -242,11 +244,11 @@ const StyledFooter = styled.footer`
           svg,
           fa-chevron-up {
             margin-left: 1rem;
-            transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
+            transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
             margin-left: 0.5rem;
             font-size: 1rem;
 
-            &.open {
+            &.column-open {
               transform: rotate(180deg);
             }
           }
@@ -256,7 +258,7 @@ const StyledFooter = styled.footer`
           border-top: 0;
           padding: 0;
           a,
-          .accordion-button {
+          .footer-accordion-button {
             padding: 0;
             cursor: default;
           }
@@ -267,16 +269,16 @@ const StyledFooter = styled.footer`
         }
       }
 
-      .accordion-body {
+      .footer-accordion-body {
         display: none;
         overflow: hidden;
         padding: 0 0 0 1.5rem;
 
-        &.collapsing {
+        &.footer-collapsing {
           display: block;
           max-height: 0px;
         }
-        &.show {
+        &.footer-column-show {
           display: block;
           max-height: 1000px;
         }
@@ -310,7 +312,7 @@ const StyledFooter = styled.footer`
       .h5 {
         margin: 0 0 1.5rem 0;
       }
-      .accordion-header:has(.h5, h5) {
+      .footer-accordion-header:has(.h5, h5) {
         h5,
         .h5 {
           margin: 0 0 1.5rem 0;