Skip to content

Commit 2700d2a

Browse files
davidornelas11davidornelas11
authored
Merge pull request #1570 from ASU/footer-clashing-classes
fix(component-header-footer): fix footer clashing classes with bootsrap JS
2 parents cff832a + 1b5293f commit 2700d2a

File tree

3 files changed

+69
-34
lines changed

3 files changed

+69
-34
lines changed

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

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,36 @@ import React, { useState, useEffect, useRef } from "react";
99
*/
1010

1111
/**
12-
* @param {{ columnIndex: number, column: Column }} props
12+
* @param {Object} props - The component props
13+
* @param {number} props.columnIndex - The index of the column
14+
* @param {Column} props.column - The column data object
15+
* @param {boolean} [props.isOpen=false] - Whether the column is initially open
16+
* @param {Function} [props.onToggle] - Optional callback function for toggle events
1317
* @returns {JSX.Element}
1418
*/
1519

16-
const ColumnSection = ({ columnIndex, column: { title, links } }) => {
17-
const [show, setShow] = useState(false);
20+
const ColumnSection = ({
21+
columnIndex,
22+
column: { title, links },
23+
isOpen = false,
24+
onToggle,
25+
}) => {
26+
const [show, setShow] = useState(isOpen);
1827
const isWindowDefined = typeof window !== "undefined";
1928
const initialMatches = isWindowDefined ? window.innerWidth >= 1260 : false;
2029
const [isLgDesktop, setIsLgDesktop] = useState(initialMatches);
2130

2231
/** @type {React.RefObject<HTMLDivElement> | null} */
2332
const accordionBodyRef = useRef(null);
2433

34+
// Update local state when prop changes
35+
useEffect(() => {
36+
if (!isLgDesktop && onToggle) {
37+
handleAnimation(isOpen);
38+
}
39+
setShow(isOpen);
40+
}, [isOpen, isLgDesktop, onToggle]);
41+
2542
useEffect(() => {
2643
const mediaWatcher = window.matchMedia("screen and (min-width: 1260px)");
2744
const handleMediaChange = e => setIsLgDesktop(e.matches);
@@ -33,27 +50,27 @@ const ColumnSection = ({ columnIndex, column: { title, links } }) => {
3350

3451
const handleAnimation = showingContent => {
3552
const accordionBody = accordionBodyRef?.current;
36-
if (!accordionBody) return;
37-
accordionBody.classList.add("collapsing");
53+
if (!accordionBody || !accordionBody.animate) return;
54+
accordionBody.classList.add("footer-collapsing");
3855
const animation = accordionBody.animate(
3956
[
4057
{
4158
maxHeight: showingContent ? `${accordionBody.scrollHeight}px` : "0px",
4259
},
4360
],
4461
{
45-
duration: 350,
62+
duration: 250,
4663
easing: "ease-in-out",
4764
fill: "forwards",
4865
}
4966
);
5067

5168
animation.onfinish = () => {
52-
accordionBody.classList.remove("collapsing");
69+
accordionBody.classList.remove("footer-collapsing");
5370
if (showingContent) {
54-
accordionBody.classList.add("show");
71+
accordionBody.classList.add("footer-column-show");
5572
} else {
56-
accordionBody.classList.remove("show");
73+
accordionBody.classList.remove("footer-column-show");
5774
}
5875
};
5976
};
@@ -64,24 +81,29 @@ const ColumnSection = ({ columnIndex, column: { title, links } }) => {
6481
return;
6582
}
6683

67-
setShow(prev => {
68-
const showingContent = !prev;
69-
handleAnimation(showingContent);
70-
return showingContent;
71-
});
84+
if (onToggle) {
85+
onToggle();
86+
} else {
87+
// Fallback for backward compatibility
88+
setShow(prev => {
89+
const showingContent = !prev;
90+
handleAnimation(showingContent);
91+
return showingContent;
92+
});
93+
}
7294
};
7395

7496
return (
7597
<div className="col-xl flex-footer testname-column">
7698
<div className="card accordion-item desktop-disable-xl">
77-
<div className="accordion-header">
99+
<div className="footer-accordion-header">
78100
<div className="h5">
79101
{isLgDesktop ? (
80102
<p className="accordion-button">{title}</p>
81103
) : (
82104
<button
83105
id={`footlink-header-${columnIndex}`}
84-
className="accordion-button"
106+
className="footer-accordion-button"
85107
aria-expanded={show || isLgDesktop}
86108
aria-controls={`footlink-${columnIndex}`}
87109
onClick={handleToggle}
@@ -90,7 +112,7 @@ const ColumnSection = ({ columnIndex, column: { title, links } }) => {
90112
>
91113
{title}
92114
<FontAwesomeIcon
93-
className={show || isLgDesktop ? "open" : ""}
115+
className={show || isLgDesktop ? "column-open" : ""}
94116
icon={faChevronDown}
95117
/>
96118
</button>
@@ -99,7 +121,7 @@ const ColumnSection = ({ columnIndex, column: { title, links } }) => {
99121
</div>
100122
<div
101123
id={`footlink-${columnIndex}`}
102-
className="accordion-body"
124+
className="footer-accordion-body"
103125
role="region"
104126
ref={accordionBodyRef}
105127
>
@@ -131,6 +153,8 @@ ColumnSection.propTypes = {
131153
})
132154
),
133155
}),
156+
isOpen: PropTypes.bool,
157+
onToggle: PropTypes.func,
134158
};
135159

136160
export { ColumnSection };

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// @ts-check
22
import PropTypes, { shape, arrayOf } from "prop-types";
3-
import React from "react";
3+
import React, { useState } from "react";
44

55
import { Button } from "../../../header/components/Button";
66
import { ColumnSection } from "../ColumnSection";
@@ -14,6 +14,9 @@ import { ColumnSection } from "../ColumnSection";
1414
const ContactComponent = ({
1515
contact: { title = "", contactLink = "", contributionLink = "", columns },
1616
}) => {
17+
const [openAccordionIndex, setOpenAccordionIndex] = useState(
18+
/** @type {number | null} */ (null)
19+
);
1720
return (
1821
<div className="wrapper" id="wrapper-footer-columns" data-testid="contact">
1922
<div className="container" id="footer-columns">
@@ -46,6 +49,12 @@ const ContactComponent = ({
4649
key={`footlink-${column.title}`}
4750
columnIndex={columnIndex}
4851
column={column}
52+
isOpen={openAccordionIndex === columnIndex}
53+
onToggle={() => {
54+
setOpenAccordionIndex(
55+
openAccordionIndex === columnIndex ? null : columnIndex
56+
);
57+
}}
4958
/>
5059
))}
5160
</>

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,15 @@ const StyledFooter = styled.footer`
2525
// Base Styles
2626
* {
2727
box-sizing: border-box;
28-
font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans,
29-
sans-serif;
28+
font-family:
29+
Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
3030
line-height: 1.5rem;
3131
3232
a:focus,
3333
button:focus {
3434
outline: none;
35-
box-shadow: 0 0 0 2px var(--color-base-white),
35+
box-shadow:
36+
0 0 0 2px var(--color-base-white),
3637
0 0 0 4px var(--color-base-grey-7) !important;
3738
-webkit-tap-highlight-color: transparent;
3839
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -201,29 +202,29 @@ const StyledFooter = styled.footer`
201202
202203
.flex-footer {
203204
.accordion-item,
204-
.accordion-header,
205-
.accordion-body {
205+
.footer-accordion-header,
206+
.footer-accordion-body {
206207
background: var(--color-divider-darker);
207208
color: var(--color-base-white);
208209
border: 0;
209210
}
210211
211-
.accordion-header {
212+
.footer-accordion-header {
212213
border-top: 1px solid var(--color-divider-lighter);
213214
padding-left: 0;
214215
215216
h5,
216217
.h5 {
217218
margin: 0;
218219
a,
219-
.accordion-button {
220+
.footer-accordion-button {
220221
${flexCenter}
221222
justify-content: space-between;
222223
}
223224
}
224225
225226
a,
226-
.accordion-button {
227+
.footer-accordion-button {
227228
color: var(--color-base-grey-2);
228229
padding: 1.5rem 0;
229230
text-decoration: none;
@@ -234,6 +235,7 @@ const StyledFooter = styled.footer`
234235
cursor: pointer;
235236
text-align: inherit;
236237
width: 100%;
238+
transition: background-color 0.15s ease;
237239
238240
&:hover {
239241
background: var(--color-divider-darker);
@@ -242,11 +244,11 @@ const StyledFooter = styled.footer`
242244
svg,
243245
fa-chevron-up {
244246
margin-left: 1rem;
245-
transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
247+
transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
246248
margin-left: 0.5rem;
247249
font-size: 1rem;
248250
249-
&.open {
251+
&.column-open {
250252
transform: rotate(180deg);
251253
}
252254
}
@@ -256,7 +258,7 @@ const StyledFooter = styled.footer`
256258
border-top: 0;
257259
padding: 0;
258260
a,
259-
.accordion-button {
261+
.footer-accordion-button {
260262
padding: 0;
261263
cursor: default;
262264
}
@@ -267,16 +269,16 @@ const StyledFooter = styled.footer`
267269
}
268270
}
269271
270-
.accordion-body {
272+
.footer-accordion-body {
271273
display: none;
272274
overflow: hidden;
273275
padding: 0 0 0 1.5rem;
274276
275-
&.collapsing {
277+
&.footer-collapsing {
276278
display: block;
277279
max-height: 0px;
278280
}
279-
&.show {
281+
&.footer-column-show {
280282
display: block;
281283
max-height: 1000px;
282284
}
@@ -310,7 +312,7 @@ const StyledFooter = styled.footer`
310312
.h5 {
311313
margin: 0 0 1.5rem 0;
312314
}
313-
.accordion-header:has(.h5, h5) {
315+
.footer-accordion-header:has(.h5, h5) {
314316
h5,
315317
.h5 {
316318
margin: 0 0 1.5rem 0;

0 commit comments

Comments
 (0)