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 | 2x 2x 2x 5x | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {
faCircleChevronUp,
faCircleChevronDown,
} from '@fortawesome/free-solid-svg-icons'
interface ViewMoreLessButtonProps {
caption: string
icon: boolean
onClick: () => void
id: string
dataTestid: string
ariaExpanded: boolean
className: string
dataCy: string
ariaLabel: string
refPageAA: string
acronym: string
}
const ViewMoreLessButton = ({
caption,
icon,
onClick,
id = 'mscaPlaceholder',
dataTestid,
ariaExpanded,
className,
dataCy,
ariaLabel = 'mscaPlaceholder',
refPageAA = 'mscaPlaceholder',
acronym = 'mscaPlaceholder',
}: ViewMoreLessButtonProps) => {
return (
<button
className={
'text-xl leading-8 text-deep-blue-60d hover:text-blue-hover focus:text-blue-hover ' +
className
}
data-cy={dataCy}
onClick={onClick}
id={id}
data-testid={dataTestid}
aria-expanded={ariaExpanded}
aria-label={ariaLabel}
// this AA tag is set to the oposite of what the actual aria-label value is because when AA pulls the value, it's on the current state not the state after the click so it looks backwards.
data-gc-analytics-customclick={`${refPageAA} - ${acronym}:ViewMoreLessButton ${ariaExpanded === false ? 'open' : 'close'}`}
>
<div className="flex sm:items-center">
{icon ? (
<FontAwesomeIcon
icon={faCircleChevronUp}
className={`pr-3 text-46px`}
/>
) : (
<FontAwesomeIcon
icon={faCircleChevronDown}
className={`pr-3 text-46px`}
/>
)}
<span className="text-left">{caption}</span>
</div>
</button>
)
}
export default ViewMoreLessButton
|