OPHJOD-1194: Use NavigationBar from design system

Opetushallitus · Jan 20, 2025 · dcfd481 · dcfd481
1 parent 8a50bbd
commit dcfd481
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 290 deletions.
diff --git a/src/components/NavigationBar/NavigationBar.test.tsx b/src/components/NavigationBar/NavigationBar.test.tsx
diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx
diff --git a/src/components/NavigationBar/__snapshots__/NavigationBar.test.tsx.snap b/src/components/NavigationBar/__snapshots__/NavigationBar.test.tsx.snap
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -31,7 +31,6 @@ export {
 export { MainLayout } from './MainLayout/MainLayout';
 export { RoutesNavigationList, type RoutesNavigationListProps } from './MainLayout/RoutesNavigationList';
 export { SimpleNavigationList } from './MainLayout/SimpleNavigationList';
-export { NavigationBar } from './NavigationBar/NavigationBar';
 export { OpportunityCard } from './OpportunityCard/OpportunityCard';
 export { OsaamisSuosittelija, type Osaaminen, type OsaaminenValue } from './OsaamisSuosittelija/OsaamisSuosittelija';
 export { Title } from './Title/Title';

diff --git a/src/routes/Root/Root.tsx b/src/routes/Root/Root.tsx
@@ -1,21 +1,12 @@
 import { components } from '@/api/schema';
-import {
-  LanguageButton,
-  LanguageMenu,
-  LogoIconRgb,
-  LogoRgbEn,
-  LogoRgbFi,
-  LogoRgbSv,
-  NavigationBar,
-  UserButton,
-} from '@/components';
+import { LanguageButton, LanguageMenu, UserButton } from '@/components';
 import { ErrorNote, useErrorNote } from '@/components/ErrorNote';
 import { MegaMenu } from '@/components/MegaMenu/MegaMenu';
 import { ActionBarContext } from '@/hooks/useActionBar';
 import { useMenuClickHandler } from '@/hooks/useMenuClickHandler';
 import i18n from '@/i18n/config';
 import { useToolStore } from '@/stores/useToolStore';
-import { Footer, SkipLink, useMediaQueries } from '@jod/design-system';
+import { Footer, NavigationBar, SkipLink, useMediaQueries } from '@jod/design-system';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdMenu } from 'react-icons/md';
@@ -44,17 +35,6 @@ const NavigationBarItem = (to: string, text: string) => ({
   ),
 });
 
-const LogoRgb = ({ language, size }: { language: string; size: number }) => {
-  switch (language) {
-    case 'sv':
-      return <LogoRgbSv size={size} />;
-    case 'en':
-      return <LogoRgbEn size={size} />;
-    default:
-      return <LogoRgbFi size={size} />;
-  }
-};
-
 const Root = () => {
   const {
     t,
@@ -187,14 +167,11 @@ const Root = () => {
         <NavigationBar
           languageButtonComponent={<LanguageButton onClick={toggleMenu('lang')} />}
           userButtonComponent={<UserButton onLogout={logout} />}
-          logo={
-            <NavLink to={`/${language}`} className="flex">
-              <div className="inline-flex select-none items-center p-3">
-                {sm ? <LogoRgb language={language} size={32} /> : <LogoIconRgb size={32} />}
-                <span className="sr-only">{t('osaamispolku')}</span>
-              </div>
-            </NavLink>
-          }
+          logo={{
+            to: `/${language}`,
+            language,
+            srText: t('osaamispolku'),
+          }}
           menuComponent={
             sm ? (
               <button
@@ -224,6 +201,11 @@ const Root = () => {
             )
           }
           refs={{ langMenuButtonRef: langMenuButtonRef }}
+          renderLink={({ to, className, children }) => (
+            <NavLink to={to} className={className}>
+              {children as React.ReactNode}
+            </NavLink>
+          )}
         />
         {langMenuOpen && (
           <div className="relative xl:container mx-auto">