Sch 140369 toc

components/TableContents.js

@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+
+export default function TableContents(props) {
+  const lang = props.lang?.trim?.() === 'fr' ? 'fr' : 'en'
+  const { id, sectionList } = props
+  return (
+    <>
+      <section id={id}>
+        <h2 className="font-display text-2xl leading-[26px] font-bold text-gray-darker">
+          {lang === 'en' ? 'On this page' : 'Sur cette page'}
+        </h2>
+        <ul className="pl-[22px] ml-3.5">
+          {sectionList.map((option, index) => {
+            return (
+              <li
+                key={index}
+                className={
+                  'underline underline-offset-4 text-20px text-gray-darker underline-offset-3.1 decoration-1 pr-1 list-outside list-disc'
+                }
+              >
+                <Link
+                  href={option.link}
+                  id={`tableLink${index + 1}`}
+                  data-cy={`tableLink${index + 1}`}
+                  aria-label={option.name}
+                  className="text-deep-blue-dark font-body text-xl hover:text-blue-hover"
+                >
+                  {option.name}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </section>
+    </>
+  )
+}
+
+TableContents.propTypes = {
+  /**
+   * component id
+   */
+  id: PropTypes.string,
+
+  /**
+   * list of sections in table of contents
+   */
+  sectionList: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      link: PropTypes.string,
+    })
+  ),
+  lang: PropTypes.string,
+}

cypress/e2e/PageObjects/ContactUsPO.cy.js

@@ -30,7 +30,7 @@ function ValidateContactUsLinksNumber() {
 }
 
 function EmploymentInsuranceLink() {
-  return cy.get('[data-cy="ei-contact-us"]')
+  return cy.get('[data-testid="ei-contact-us"]')
 }
 
 module.exports = {

cypress/e2e/PageObjects/securitySettingsPO.cy.js

@@ -46,11 +46,11 @@ function SecurityHeader() {
 }
 
 function SecurityQuestionsLink() {
-  return cy.get('[data-cy ="securityQuestionsLink"]')
+  return cy.get('[data-testid="securityQuestionsLink"]')
 }
 
 function EmploymentInsuranceCode() {
-  return cy.get('[data-cy ="eiAccessCodeLink"]')
+  return cy.get('[data-testid="eiAccessCodeLink"]')
 }
 
 module.exports = {

cypress/e2e/SecuritySettings.cy.js

@@ -79,7 +79,7 @@ describe('Validate Security Settings page', () => {
   })
 
   it('Validate the "Profile" click navigates to Profile Page', () => {
-    securityPo.LookingForProfileLinkEn().click()
+    securityPo.LookingForProfileLinkEn().click({ force: true })
     profilePo.ProfileUrlEN()
     profilePo.ProfileHeaderEN()
   })

pages/contact-us/[id].js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { TableContent } from '@dts-stn/service-canada-design-system'
+import TableContents from '../../components/TableContents'
 import Heading from '../../components/Heading'
 import { Fragment } from 'react'
 import en from '../../locales/en'
@@ -48,7 +48,7 @@ export default function ContactUsPage(props) {
           props.pageContent.items.length > 0 && 'tableOfContents-test'
         }`}
       />
-      <TableContent
+      <TableContents
         id="cppContent"
         sectionList={props.pageContent.items.map((item, i) => {
           return { name: item.title, link: `#${item.id}` }

pages/contact-us/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { Link } from '@dts-stn/service-canada-design-system'
+import Link from 'next/link'
 import Heading from '../../components/Heading'
 import { getBetaPopupNotAvailableContent } from '../../graphql/mappers/beta-popup-page-not-available'
 import { getAuthModalsContent } from '../../graphql/mappers/auth-modals'
@@ -39,13 +39,16 @@ export default function ContactLanding(props) {
           return (
             <li className="mb-6 ml-5" key={link.linkId}>
               <Link
+                className="underline text-blue-primary font-body text-20px hover:text-blue-hover focus:text-blue-hover"
                 id={link.linkId}
-                dataTestId={link.linkId}
-                text={link.linkTitle}
+                data-testid={link.linkId}
+                aria-label={link.linkTitle}
                 href={`/${props.locale}/${
                   props.content.pageName
                 }/${link.linkDestination.split('/').pop()}`}
-              />
+              >
+                {link.linkTitle}
+              </Link>
               <p className="text-xl">{link.linkDescription}</p>
             </li>
           )

pages/security-settings.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import { Link } from '@dts-stn/service-canada-design-system'
+import Link from 'next/link'
 import Heading from '../components/Heading'
 import PageLink from '../components/PageLink'
 import en from '../locales/en'
@@ -35,19 +35,25 @@ export default function SecuritySettings(props) {
       <Heading id="my-dashboard-heading" title={props.content.heading} />
       <p className="mt-3 mb-8 text-xl">{props.content.subHeading}</p>
       <Link
+        className="underline text-blue-primary font-body text-20px hover:text-blue-hover focus:text-blue-hover"
         id="securityQuestionsLink"
-        dataTestId="securityQuestionsLink"
-        text={props.content.securityQuestions.linkTitle.text}
+        data-testid="securityQuestionsLink"
+        aria-label={props.content.securityQuestions.linkTitle.text}
         href={props.content.securityQuestions.linkTitle.link}
-      />
+      >
+        {props.content.securityQuestions.linkTitle.text}
+      </Link>
       <p className="mb-8 text-xl">{props.content.securityQuestions.subTitle}</p>
 
       <Link
+        className="underline text-blue-primary font-body text-20px hover:text-blue-hover focus:text-blue-hover"
         id="eiAccessCodeLink"
-        dataTestId="eiAccessCodeLink"
-        text={props.content.eiAccessCode.linkTitle.text}
+        data-testid="eiAccessCodeLink"
+        aria-label={props.content.eiAccessCode.linkTitle.text}
         href={props.content.eiAccessCode.linkTitle.link}
-      />
+      >
+        {props.content.eiAccessCode.linkTitle.text}
+      </Link>
       <p className="pb-7 text-xl">{props.content.eiAccessCode.subTitle}</p>
       <PageLink
         lookingForText={props.content.lookingFor.title}