From 859da10761dde81a7c0b6de81619166ed3d412b2 Mon Sep 17 00:00:00 2001
From: Pyry Koivisto <pyry.koivisto@mavericks.fi>
Date: Wed, 18 Sep 2024 12:49:39 +0300
Subject: [PATCH] YKI(Frontend): Replace use of tabs in header with navigation
 links [deploy]

---
 .../yki/public/i18n/en-GB/common.json         |  3 +-
 .../yki/public/i18n/fi-FI/common.json         |  3 +-
 .../yki/public/i18n/sv-SE/common.json         |  3 +-
 .../yki/src/components/layouts/Header.tsx     |  4 +-
 .../layouts/publicHeader/PublicNavTabs.tsx    | 52 -----------
 .../publicHeader/PublicNavigationLinks.tsx    | 49 ++++++++++
 .../__snapshots__/Header.test.tsx.snap        | 92 ++++++-------------
 7 files changed, 85 insertions(+), 121 deletions(-)
 delete mode 100644 frontend/packages/yki/src/components/layouts/publicHeader/PublicNavTabs.tsx
 create mode 100644 frontend/packages/yki/src/components/layouts/publicHeader/PublicNavigationLinks.tsx

diff --git a/frontend/packages/yki/public/i18n/en-GB/common.json b/frontend/packages/yki/public/i18n/en-GB/common.json
index 46c1207a0..78406154f 100644
--- a/frontend/packages/yki/public/i18n/en-GB/common.json
+++ b/frontend/packages/yki/public/i18n/en-GB/common.json
@@ -68,7 +68,8 @@
       "header": {
         "accessibility": {
           "continueToMain": "Continue to content",
-          "langSelectorAriaLabel": "Kieli / Språk / Language"
+          "langSelectorAriaLabel": "Kieli / Språk / Language",
+          "mainNavigation": "Main navigation"
         },
         "sessionState": {
           "activeRegistrations_one": "You have already started 1 registration.",
diff --git a/frontend/packages/yki/public/i18n/fi-FI/common.json b/frontend/packages/yki/public/i18n/fi-FI/common.json
index bc26e0506..500a5660a 100644
--- a/frontend/packages/yki/public/i18n/fi-FI/common.json
+++ b/frontend/packages/yki/public/i18n/fi-FI/common.json
@@ -68,7 +68,8 @@
       "header": {
         "accessibility": {
           "continueToMain": "Jatka sisältöön",
-          "langSelectorAriaLabel": "Kieli / Språk / Language"
+          "langSelectorAriaLabel": "Kieli / Språk / Language",
+          "mainNavigation": "Päänavigaatio"
         },
         "sessionState": {
           "activeRegistrations_one": "Sinulla on 1 ilmoittautuminen kesken.",
diff --git a/frontend/packages/yki/public/i18n/sv-SE/common.json b/frontend/packages/yki/public/i18n/sv-SE/common.json
index 36e66da43..1e6b90f99 100644
--- a/frontend/packages/yki/public/i18n/sv-SE/common.json
+++ b/frontend/packages/yki/public/i18n/sv-SE/common.json
@@ -68,7 +68,8 @@
       "header": {
         "accessibility": {
           "continueToMain": "Fortsätt till innehållet",
-          "langSelectorAriaLabel": "Kieli / Språk / Language"
+          "langSelectorAriaLabel": "Kieli / Språk / Language",
+          "mainNavigation": "Huvudnavigering"
         },
         "sessionState": {
           "activeRegistrations_one": "Du har redan påbörjat 1 anmälan.",
diff --git a/frontend/packages/yki/src/components/layouts/Header.tsx b/frontend/packages/yki/src/components/layouts/Header.tsx
index a7083cef6..f628e11ab 100644
--- a/frontend/packages/yki/src/components/layouts/Header.tsx
+++ b/frontend/packages/yki/src/components/layouts/Header.tsx
@@ -10,7 +10,7 @@ import {
 import { AppLanguage, Direction } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
 
-import { PublicNavTabs } from 'components/layouts/publicHeader/PublicNavTabs';
+import { PublicNavigationLinks } from 'components/layouts/publicHeader/PublicNavigationLinks';
 import { SessionStateHeader } from 'components/layouts/SessionStateHeader';
 import {
   changeLang,
@@ -70,7 +70,7 @@ export const Header = (): JSX.Element => {
             </Link>
           </div>
           <div className="header__tabs">
-            <PublicNavTabs />
+            <PublicNavigationLinks />
           </div>
           <div className="header__language-select">
             {!isPhone && (
diff --git a/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavTabs.tsx b/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavTabs.tsx
deleted file mode 100644
index 87bf1539b..000000000
--- a/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavTabs.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Tab, Tabs } from '@mui/material';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom';
-import { Color } from 'shared/enums';
-
-import { useCommonTranslation } from 'configs/i18n';
-import { AppRoutes, HeaderTabNav } from 'enums/app';
-
-const getTabForPath = (path: string) => {
-  if (
-    path === AppRoutes.Registration ||
-    matchPath(AppRoutes.ExamSession, path) ||
-    matchPath(AppRoutes.ExamSessionRegistration, path) ||
-    matchPath(AppRoutes.RegistrationPaymentStatus, path)
-  ) {
-    return HeaderTabNav.Registration;
-  } else if (
-    path === AppRoutes.Reassessment ||
-    matchPath(AppRoutes.ReassessmentOrder, path) ||
-    matchPath(AppRoutes.ReassessmentOrderStatus, path)
-  ) {
-    return HeaderTabNav.Reassessment;
-  } else {
-    return false;
-  }
-};
-
-export const PublicNavTabs = (): JSX.Element => {
-  const translateCommon = useCommonTranslation();
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
-
-  return (
-    <Tabs
-      value={getTabForPath(pathname)}
-      textColor={Color.Secondary}
-      indicatorColor={Color.Secondary}
-    >
-      <Tab
-        data-testid={'public-nav-tab__registration'}
-        value={HeaderTabNav.Registration}
-        label={translateCommon(HeaderTabNav.Registration)}
-        onClick={() => navigate(AppRoutes.Registration)}
-      />
-      <Tab
-        data-testid={'public-nav-tab__reassessment'}
-        value={HeaderTabNav.Reassessment}
-        label={translateCommon(HeaderTabNav.Reassessment)}
-        onClick={() => navigate(AppRoutes.Reassessment)}
-      />
-    </Tabs>
-  );
-};
diff --git a/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavigationLinks.tsx b/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavigationLinks.tsx
new file mode 100644
index 000000000..d83288348
--- /dev/null
+++ b/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavigationLinks.tsx
@@ -0,0 +1,49 @@
+import { matchPath, useLocation } from 'react-router-dom';
+import { NavigationLinks } from 'shared/components';
+
+import { useCommonTranslation } from 'configs/i18n';
+import { AppRoutes, HeaderTabNav } from 'enums/app';
+
+const getTabForPath = (path: string) => {
+  if (
+    path === AppRoutes.Registration ||
+    matchPath(AppRoutes.ExamSession, path) ||
+    matchPath(AppRoutes.ExamSessionRegistration, path) ||
+    matchPath(AppRoutes.RegistrationPaymentStatus, path)
+  ) {
+    return HeaderTabNav.Registration;
+  } else if (
+    path === AppRoutes.Reassessment ||
+    matchPath(AppRoutes.ReassessmentOrder, path) ||
+    matchPath(AppRoutes.ReassessmentOrderStatus, path)
+  ) {
+    return HeaderTabNav.Reassessment;
+  } else {
+    return false;
+  }
+};
+
+export const PublicNavigationLinks = () => {
+  const translateCommon = useCommonTranslation();
+  const { pathname } = useLocation();
+
+  return (
+    <NavigationLinks
+      navigationAriaLabel={translateCommon(
+        'header.accessibility.mainNavigation',
+      )}
+      links={[
+        {
+          active: getTabForPath(pathname) === HeaderTabNav.Registration,
+          href: AppRoutes.Registration,
+          label: translateCommon(HeaderTabNav.Registration),
+        },
+        {
+          active: getTabForPath(pathname) === HeaderTabNav.Reassessment,
+          href: AppRoutes.Reassessment,
+          label: translateCommon(HeaderTabNav.Reassessment),
+        },
+      ]}
+    />
+  );
+};
diff --git a/frontend/packages/yki/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap b/frontend/packages/yki/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap
index 81a733970..32ce0402d 100644
--- a/frontend/packages/yki/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap
+++ b/frontend/packages/yki/src/tests/jest/components/layouts/__snapshots__/Header.test.tsx.snap
@@ -113,75 +113,39 @@ exports[`Header should render Header correctly 1`] = `
       <div
         className="header__tabs"
       >
-        <div
-          className="MuiTabs-root css-1ujnqem-MuiTabs-root"
+        <nav
+          aria-label="header.accessibility.mainNavigation"
+          className="navigation-links"
         >
-          <div
-            className="MuiTabs-scroller MuiTabs-fixed css-jpln7h-MuiTabs-scroller"
-            style={
-              {
-                "marginBottom": -0,
-                "overflow": "hidden",
-              }
-            }
-          >
-            <div
-              aria-orientation={null}
-              className="MuiTabs-flexContainer css-heg063-MuiTabs-flexContainer"
-              onKeyDown={[Function]}
-              role="tablist"
-            >
-              <button
-                aria-selected={false}
-                className="MuiButtonBase-root MuiTab-root MuiTab-textColorSecondary css-1a4cg4j-MuiButtonBase-root-MuiTab-root"
-                data-testid="public-nav-tab__registration"
-                disabled={false}
-                onBlur={[Function]}
+          <ul>
+            <li>
+              <a
+                aria-current={false}
+                href="/yki/ilmoittautuminen"
                 onClick={[Function]}
-                onContextMenu={[Function]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                role="tab"
-                tabIndex={0}
-                type="button"
               >
-                registration
-              </button>
-              <button
-                aria-selected={false}
-                className="MuiButtonBase-root MuiTab-root MuiTab-textColorSecondary css-1a4cg4j-MuiButtonBase-root-MuiTab-root"
-                data-testid="public-nav-tab__reassessment"
-                disabled={false}
-                onBlur={[Function]}
+                <p
+                  className="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+                >
+                  registration
+                </p>
+              </a>
+            </li>
+            <li>
+              <a
+                aria-current={false}
+                href="/yki/tarkistusarviointi"
                 onClick={[Function]}
-                onContextMenu={[Function]}
-                onDragLeave={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                role="tab"
-                tabIndex={-1}
-                type="button"
               >
-                reassessment
-              </button>
-            </div>
-          </div>
-        </div>
+                <p
+                  className="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+                >
+                  reassessment
+                </p>
+              </a>
+            </li>
+          </ul>
+        </nav>
       </div>
       <div
         className="header__language-select"