Update staging from dev April 12, 2024 (#610)

* aa fix for card buttton * h33 to div * OAuth Cookie Adjustments (for cookies too large issue) (#599) * OAuth Cookie Adjustments (for cookies too large issue) * adding in logic gates around new settings for testing * Keeping the functional setting for our purposes, still logic gated for staging testing * Removing scope from the deployment * clarifying env var names * aa fixes for menu * update dashboard e2e tests * added test for state of the cards * add analytics to breadcrumbs * Update dashboard mapper to include alternate stream 3 links if they exist (#607) * update most required card view --------- Co-authored-by: shewood <[email protected]> Co-authored-by: lhr-git <[email protected]> Co-authored-by: shewood <[email protected]> Co-authored-by: Susan Mintz <[email protected]> Co-authored-by: susan-esdc <[email protected]>
DTS-STN · Apr 17, 2024 · 09c46e8 · 09c46e8
1 parent 3ca2027
commit 09c46e8
Show file tree

Hide file tree

Showing 14 changed files with 326 additions and 173 deletions.
diff --git a/__tests__/components/Breadcrumb.test.js b/__tests__/components/Breadcrumb.test.js
@@ -21,6 +21,7 @@ describe('BreadCrumb', () => {
       <Breadcrumb
         id="breadcrumbID"
         items={[{ text: 'Canada.ca', link: '/' }]}
+        refPageAA='dashboard'
       />,
     )
     expect(primary).toBeTruthy()
@@ -36,6 +37,7 @@ describe('BreadCrumb', () => {
           { text: 'Link2', link: '/' },
           { text: 'Link3', link: '/' },
         ]}
+        refPageAA='dashboard'
       />,
     )
     expect(withItems).toBeTruthy()
@@ -52,6 +54,7 @@ describe('BreadCrumb', () => {
           { text: 'Max length of breadcrumb 28', link: '/' },
           { text: 'Link3', link: '/' },
         ]}
+        refPageAA='dashboard'
       />,
     )
     expect(withItemsWithLongText).toBeTruthy()
@@ -62,6 +65,7 @@ describe('BreadCrumb', () => {
       <Breadcrumb
         id="breadcrumbID"
         items={[{ text: 'Canada.ca', link: '/' }]}
+      refPageAA='dashboard'
       />,
     )
     const results = await axe(container)

diff --git a/__tests__/components/Header.test.js b/__tests__/components/Header.test.js
@@ -62,6 +62,7 @@ describe('Header', () => {
       { text: 'Max length of breadcrumb 28', link: '/' },
       { text: 'Link3', link: '/' },
     ],
+    refPageAA: 'dashboard'
   }
   test('renders Header component with default props', () => {
     render(<Header {...defaultProps} />)

diff --git a/components/BenefitTasks.tsx b/components/BenefitTasks.tsx
@@ -81,7 +81,7 @@ const BenefitTasks = ({
                     ? 'noopener noreferrer'
                     : undefined
                 }
-                data-gc-analytics-customclick={`${refPageAA} ${acronym}:${task.id}`}
+                data-gc-analytics-customclick={`${refPageAA} ${acronym} ${taskList.title}:${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">

diff --git a/components/Breadcrumb.tsx b/components/Breadcrumb.tsx
@@ -10,9 +10,10 @@ export interface BreadcrumbItem {
 export interface BreadcrumbProps {
   id?: string
   items?: BreadcrumbItem[]
+  refPageAA: string
 }
 
-const Breadcrumb = ({ id, items }: BreadcrumbProps) => {
+const Breadcrumb = ({ id, items, refPageAA }: BreadcrumbProps) => {
   return (
     <nav className="py-6" aria-label="Breadcrumb-Fil d’ariane" id={id}>
       <ul className="block font-body text-base leading-[23px] text-deep-blue-dark">
@@ -32,6 +33,7 @@ const Breadcrumb = ({ id, items }: BreadcrumbProps) => {
                     data-cy={'breadcrumb-' + item.text}
                     href={item.link}
                     className="font-body underline hover:text-blue-hover focus:text-blue-hover"
+                    data-gc-analytics-customclick={`${refPageAA}:${item.text}`}
                   >
                     {item.text}
                   </Link>

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -45,7 +45,9 @@ interface HeaderProps {
   menuProps: MenuProps
   topnavProps: TopNavProps
   breadCrumbItems: BreadcrumbItemProps[]
+  refPageAA: string
   dataGcAnalyticsCustomClickInstitutionVariable: string
+  dataGcAnalyticsCustomClickMenuVariable: string
 }
 
 const Header = ({
@@ -54,8 +56,10 @@ const Header = ({
   linkPath,
   menuProps,
   breadCrumbItems,
+  refPageAA,
   topnavProps,
   dataGcAnalyticsCustomClickInstitutionVariable,
+  dataGcAnalyticsCustomClickMenuVariable,
 }: HeaderProps) => {
   return (
     <div className="font-display" id={id} data-testid="header">
@@ -73,9 +77,9 @@ const Header = ({
               <Image
                 className={`${
                   lang === 'en'
-                    ? 'md:max-h-[34px] max-h-[19px]'
-                    : 'md:max-h-[35px] max-h-[20px]'
-                } md:max-w-[360px] max-w-[206px]`}
+                    ? 'max-h-[19px] md:max-h-[34px]'
+                    : 'max-h-[20px] md:max-h-[35px]'
+                } max-w-[206px] md:max-w-[360px]`}
                 src={lang === 'en' ? logoFile : logoFileFR}
                 alt={
                   lang === 'en'
@@ -86,7 +90,7 @@ const Header = ({
                 height={76}
               />
             </div>
-            <div className="sm:hidden ml-auto pb-2.5">
+            <div className="ml-auto pb-2.5 sm:hidden">
               <Language
                 id="lang2"
                 lang={lang}
@@ -98,7 +102,7 @@ const Header = ({
               />
             </div>
           </div>
-          <div className="pb-2.5 sm:pb-3.5 md:pb-0 hidden sm:ml-auto sm:flex sm:pt-2.5 md:ds-pt-4.5">
+          <div className="md:ds-pt-4.5 hidden pb-2.5 sm:ml-auto sm:flex sm:pb-3.5 sm:pt-2.5 md:pb-0">
             <Language
               id="lang1"
               lang={lang}
@@ -112,12 +116,12 @@ const Header = ({
         <Menu
           lang={lang}
           menuList={menuProps.menuList}
-          dataGcAnalyticsCustomClickInstitutionVariable={
-            dataGcAnalyticsCustomClickInstitutionVariable
-          }
+          dataGcAnalyticsCustomClick={dataGcAnalyticsCustomClickMenuVariable}
         />
         <div className="sch-container">
-          <Breadcrumb items={breadCrumbItems} />
+          <Breadcrumb items={breadCrumbItems}
+            refPageAA={refPageAA}
+        />
         </div>
       </header>
     </div>

diff --git a/components/Layout.js b/components/Layout.js
@@ -123,6 +123,7 @@ export default function Layout(props) {
         breadCrumbItems={
           props.breadCrumbItems ? props.breadCrumbItems : defaultBreadcrumbs
         }
+        refPageAA={props.refPageAA}
         topnavProps={{
           skipToMainPath: '#mainContent',
           skipToAboutPath: '#page-footer',
@@ -132,6 +133,9 @@ export default function Layout(props) {
         dataGcAnalyticsCustomClickInstitutionVariable={
           props.children.props.aaPrefix
         }
+        dataGcAnalyticsCustomClickMenuVariable={
+          props.dataGcAnalyticsCustomClickMenuVariable
+        }
         menuProps={{
           legacyBehavior: true,
           menuList: [

diff --git a/components/Menu.tsx b/components/Menu.tsx
@@ -12,15 +12,11 @@ interface MenuItem {
 
 interface MenuProps {
   lang: string
-  dataGcAnalyticsCustomClickInstitutionVariable: string
+  dataGcAnalyticsCustomClick: string
   menuList: MenuItem[]
 }
 
-const Menu = ({
-  lang,
-  dataGcAnalyticsCustomClickInstitutionVariable,
-  menuList,
-}: MenuProps) => {
+const Menu = ({ lang, dataGcAnalyticsCustomClick, menuList }: MenuProps) => {
   const [showDropdown, setShowDropdown] = useState<boolean>(false)
   const dropdown = useRef<HTMLDivElement>(null)
 
@@ -52,16 +48,16 @@ const Menu = ({
 
   return (
     <div className="w-full bg-blue-primary">
-      <nav className="sch-container sch-container-menu sm:flex items-center justify-between sm:h-[60px]">
-        <div className="h-[60px] flex items-center text-white font-display font-bold text-[19px] leading-[21px] md:text-2xl mx-15px md:m-0 ">
+      <nav className="sch-container sch-container-menu items-center justify-between sm:flex sm:h-[60px]">
+        <div className="mx-15px flex h-[60px] items-center font-display text-[19px] font-bold leading-[21px] text-white md:m-0 md:text-2xl ">
           <span id="mainSiteNav">
             {lang === 'fr'
               ? 'Mon dossier Service Canada'
               : 'My Service Canada Account'}
           </span>
         </div>
         <div
-          className="w-full sm:w-[260px] h-full bg-bright-blue-pale hover:bg-gray-50a focus:bg-gray-50a"
+          className="h-full w-full bg-bright-blue-pale hover:bg-gray-50a focus:bg-gray-50a sm:w-[260px]"
           ref={dropdown}
         >
           <button
@@ -70,7 +66,7 @@ const Menu = ({
             aria-haspopup="true"
             data-testid="menuButton"
             aria-expanded={showDropdown}
-            className="flex justify-between w-full h-full font-bold font-body items-center py-0.5 pl-4 text-blue-primary ring-offset-2 focus:ring-2 ring-blue-hover rounded-sm focus:outline-none focus:mb-1"
+            className="flex h-full w-full items-center justify-between rounded-sm py-0.5 pl-4 font-body font-bold text-blue-primary ring-blue-hover ring-offset-2 focus:mb-1 focus:outline-none focus:ring-2"
           >
             <span className="flex items-center">
               <svg
@@ -89,7 +85,7 @@ const Menu = ({
               {lang === 'fr' ? 'Compte' : 'Account'}
             </span>
             <svg
-              className="w-4 h-4 mx-4"
+              className="mx-4 h-4 w-4"
               fill="currentColor"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"
@@ -112,7 +108,7 @@ const Menu = ({
           {showDropdown && (
             <div
               id="dropdownNavbar"
-              className="sm:absolute sm:w-[260px] drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] rounded-b-[5px] text-deep-blue-dark bg-white z-10"
+              className="z-10 rounded-b-[5px] bg-white text-deep-blue-dark drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)] sm:absolute sm:w-[260px]"
               aria-labelledby="dropdownLargeButton"
             >
               {menuList.map((element, index) => {
@@ -121,15 +117,15 @@ const Menu = ({
                     <Link
                       className={`${
                         index === 0 ? 'border-none' : 'border-t-2'
-                      } font-body flex items-center h-[55px] px-4 hover:text-blue-hover focus:outline-none ring-offset-2 focus:ring-2 ring-blue-hover rounded-sm focus:border-none`}
+                      } flex h-[55px] items-center rounded-sm px-4 font-body ring-blue-hover ring-offset-2 hover:text-blue-hover focus:border-none focus:outline-none focus:ring-2`}
                       onClick={
                         element.showIcon
                           ? element.onSignOut
                           : () => setShowDropdown((e) => !e)
                       }
                       href={element.path}
                       aria-label={element.value}
-                      data-gc-analytics-customclick={`${dataGcAnalyticsCustomClickInstitutionVariable}:Menu-${element.id}`}
+                      data-gc-analytics-customclick={`${dataGcAnalyticsCustomClick}:${element.id}`}
                     >
                       {element.showIcon && (
                         <svg