Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 | 1x 1x 1x 1x 1x 1x | import ViewMoreLessButton from '../components/ViewMoreLessButton'
import ContextualAlert from '../components/ContextualAlert'
import { useEffect, useState } from 'react'
import { ReactNode } from 'react'
import { z } from 'zod'
interface AlertProps {
id: string
type: string
alertHeading: string
alertBody: string
}
interface AccordionProps {
cardTitle: string
viewMoreLessCaption: string
programUniqueId?: string
acronym: string
refPageAA: string
children: ReactNode
locale: string
cardAlert?: AlertProps[]
accordionAlert?: AlertProps[]
hasAlert?: boolean
}
const Accordion = ({
cardAlert = [
{
id: '',
type: '',
alertHeading: '',
alertBody: '',
},
],
accordionAlert = [
{
id: '',
type: '',
alertHeading: '',
alertBody: '',
},
],
locale,
cardTitle,
viewMoreLessCaption,
programUniqueId,
acronym,
refPageAA,
children,
}: AccordionProps) => {
const [isOpen, setIsOpen] = useState(false)
const CardState = z
.string()
.toLowerCase()
.transform((x) => x === 'true')
.pipe(z.boolean())
let reactDevBufferSet = false
/**
* init Effect
*
* In dev mode (npm run dev) React will prerender and render
* useEffects on page. This renders the page twice in dev mode,
* which erases the state.
*
* The reactDevBufferSet ensures it will only trigger once.
*
* This doesn't occur outside of dev.
*
* TODO: Moving the state out of the individual Cards and into
* a unified state/context may fix this this load issue.
*/
useEffect(() => {
Iif (!reactDevBufferSet) {
reactDevBufferSet = true // eslint-disable-line
Iif (programUniqueId !== undefined) {
const sessionItem = sessionStorage.getItem(programUniqueId)
setIsOpen(sessionItem !== null ? CardState.parse(sessionItem) : false)
}
}
}, [])
// on change Effect
useEffect(() => {
Iif (programUniqueId !== undefined) {
sessionStorage.setItem(programUniqueId, String(isOpen))
}
}, [isOpen, programUniqueId])
return (
<>
<ViewMoreLessButton
id={programUniqueId + 'test-card-button-'}
dataTestid={programUniqueId?.toString() + 'dataTestId'}
dataCy="viewMoreLessButton"
onClick={() => {
const newOpenState = !isOpen
setIsOpen(newOpenState)
}}
ariaExpanded={isOpen}
icon={isOpen}
caption={viewMoreLessCaption}
className="w-full px-3 pb-6 sm:px-8 md:px-15 md:pb-8 md:pt-4"
acronym={acronym}
refPageAA={refPageAA}
ariaLabel={`${cardTitle} - ${viewMoreLessCaption}`}
/>
{!isOpen ? null : (
<div>
{cardAlert.map((alert, index) => {
const alertType = alert.type[0].split('/').pop()
return (
<ul className="w-full pb-3 sm:px-8 sm:pb-6 md:px-15" key={index}>
<ContextualAlert
id={alert.id}
type={alertType}
alertHeading={alert.alertHeading}
alertBody={alert.alertBody}
alert_icon_alt_text={`${alertType} ${
locale === 'fr' ? 'Icônes' : 'icon'
}`}
alert_icon_id={` alert-icon ${alert.id}`}
/>
</ul>
)
})}
{accordionAlert.map((alert, index) => {
const alertType = alert.type[0].split('/').pop()
return (
<ul className="w-full pb-3 sm:px-8 sm:pb-6 md:px-15" key={index}>
<ContextualAlert
id={alert.id}
type={alertType}
alertHeading={alert.alertHeading}
alertBody={alert.alertBody}
alert_icon_alt_text={`${alertType} ${
locale === 'fr' ? 'Icônes' : 'icon'
}`}
alert_icon_id={` alert-icon ${alert.id}`}
/>
</ul>
)
})}
<div className="pb-6" data-cy="sectionList">
{children}
</div>
</div>
)}
</>
)
}
export default Accordion
|