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

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

Hide file tree

Showing 6 changed files with 57 additions and 57 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),
+        },
+      ]}
+    />
+  );
+};