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 | 2x 2x 2x 2x 2x 2x 2x | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import { icon } from '../lib/loadIcons'
interface Tasks {
title: string
areaLabel: string
link: string
icon?: string
betaPopUp: boolean
id: string
}
export interface TaskListProps {
title: string
tasks: Tasks[]
}
interface BenefitTasksProps {
locale: string
taskList: TaskListProps
dataCy?: string
refPageAA?: string
acronym?: string
}
const BenefitTasks = ({
locale,
taskList,
dataCy,
refPageAA = 'mscaPlaceholder',
acronym = 'mscaPlaceholder',
}: BenefitTasksProps) => {
const newTabTaskExceptions = [
'https://www.canada.ca/en/services/benefits/ei/employment-insurance-reporting.html',
'https://www.canada.ca/fr/services/prestations/ae/declarations-assurance-emploi.html',
'https://www.canada.ca/en/services/benefits/ei/ei-regular-benefit/apply.html#gc-document-nav',
'http://www.servicecanada.gc.ca/cgi-bin/op-so/msca/redirection.asp?linkmsca=/104e.html',
'http://www.servicecanada.gc.ca/cgi-bin/op-so/msca/redirection.asp?linkmsca=/104f.html',
'https://srv270.hrdc-drhc.gc.ca/AW/introduction?GoCTemplateCulture=en-CA',
'https://srv270.hrdc-drhc.gc.ca/AW/introduction?GoCTemplateCulture=fr-CA',
'http://www.servicecanada.gc.ca/cgi-bin/op-so/msca/redirection.asp?linkmsca=/107e.html',
'http://www.servicecanada.gc.ca/cgi-bin/op-so/msca/redirection.asp?linkmsca=/107f.html',
'https://estimateursv-oasestimator.service.canada.ca/en',
'https://estimateursv-oasestimator.service.canada.ca/fr',
]
return (
<div className="inline-block w-full" data-testid="benefitTasks-test">
<h3 className="text-xl font-bold" data-cy={dataCy}>
{taskList.title}
</h3>
<ul
className="w-full space-y-4 px-6 pb-8 pt-3 md:pb-12 md:pl-8 lg:pl-10"
data-cy="taskList"
>
{taskList.tasks.map((task, index) => {
return (
<li
key={index}
className="list-disc font-bold text-deep-blue-dark"
data-cy="task-link"
>
<Link
aria-label={`${taskList.title} - ${task.title} -
${
newTabTaskExceptions.includes(task.link)
? locale === 'fr'
? "S'ouvre dans un nouvel onglet"
: 'Opens in a new tab'
: ''
}`}
href={task.link}
passHref
target={
newTabTaskExceptions.includes(task.link) ? '_blank' : '_self'
}
rel={
newTabTaskExceptions.includes(task.link)
? 'noopener noreferrer'
: undefined
}
data-gc-analytics-customclick={`${refPageAA} ${acronym}:${task.id}`}
className="flex items-center rounded-sm py-1 text-deep-blue-dark underline hover:text-blue-hover focus:outline-1 focus:outline-blue-hover"
>
<span className="static text-xl font-normal">
{task.title}
<span>
{newTabTaskExceptions.includes(task.link) ? (
<FontAwesomeIcon
className="absolute ml-1.5 pt-0.5"
width="14"
icon={icon['arrow-up-right-from-square']}
></FontAwesomeIcon>
) : null}
</span>
</span>
</Link>
</li>
)
})}
</ul>
</div>
)
}
export default BenefitTasks
|