YKI(Frontend): Replace use of tabs in header with navigation links [d…

…eploy]
Opetushallitus · Sep 25, 2024 · 859da10 · 859da10
1 parent 52dd69c
commit 859da10
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 121 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git a/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavigationLinks.tsx 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
@@ -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"