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 | 1x 1x 1x 1x 1x 2x 2x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | 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 CardProps {
cardTitle: string
viewMoreLessCaption: string
programUniqueId?: string
acronym: string
refPageAA: string
children: ReactNode
locale: string
cardAlert?: AlertProps[]
hasAlert?: boolean
}
const Card = ({
cardAlert = [
{
id: '',
type: '',
alertHeading: '',
alertBody: '',
},
],
locale,
cardTitle,
viewMoreLessCaption,
programUniqueId,
acronym,
refPageAA,
children,
}: CardProps) => {
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(() => {
if (!reactDevBufferSet) {
reactDevBufferSet = true // eslint-disable-line
if (programUniqueId !== undefined) {
const sessionItem = sessionStorage.getItem(programUniqueId)
setIsOpen(sessionItem !== null ? CardState.parse(sessionItem) : false)
}
}
}, [])
// on change Effect
useEffect(() => {
if (programUniqueId !== undefined) {
sessionStorage.setItem(programUniqueId, String(isOpen))
}
}, [isOpen, programUniqueId])
return (
<div className="my-6 rounded border border-gray-300 shadow" data-cy="cards">
<h2
className="px-3 py-4 font-display text-4xl font-bold text-gray-darker sm:px-8 md:mt-2 md:px-15 md:py-8"
data-cy="cardtitle"
>
{cardTitle}
</h2>
<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>
)
})}
<div className="pb-6" data-cy="sectionList">
{children}
</div>
</div>
)}
</div>
)
}
export default Card
|