SHARED(Frontend): Introduce NavigationLinks component to replace use …

…of MUI Tabs in header

frontend/packages/shared/CHANGELOG.MD

@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.11.2] - 2024-09-18 (TODO: Bump actual version in package.json)
+
+### Added
+- New NavigationLinks component as a more accessible replacement for navigation tabs
+
 ## [1.11.1] - 2024-09-13
 
 ### Fixed

frontend/packages/shared/src/components/NavigationLinks/NavigationLinks.scss

@@ -0,0 +1,26 @@
+@use '../../styles/abstracts/colors';
+
+.navigation-links {
+  ul {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    gap: 6rem;
+    margin: 0;
+
+    > li {
+      padding-bottom: 2rem;
+      > a {
+        text-decoration: none;
+      }
+    }
+
+    li.active {
+      p {
+        color: colors.$color-secondary;
+        font-weight: 700;
+      }
+      border-bottom: 2px solid colors.$color-secondary;
+    }
+  }
+}

frontend/packages/shared/src/components/NavigationLinks/NavigationLinks.tsx

@@ -0,0 +1,33 @@
+import { Text } from '../Text/Text';
+import { Link } from 'react-router-dom';
+import './NavigationLinks.scss';
+
+interface NavigationLinksProps {
+  navigationAriaLabel: string;
+  links: Array<NavigationLink>;
+}
+
+interface NavigationLink {
+  active: boolean;
+  href: string;
+  label: string;
+}
+
+export const NavigationLinks = ({
+  navigationAriaLabel,
+  links,
+}: NavigationLinksProps) => {
+  return (
+    <nav className="navigation-links" aria-label={navigationAriaLabel}>
+      <ul>
+        {links.map((l, i) => (
+          <li key={i} className={l.active ? 'active' : undefined}>
+            <Link to={l.href} aria-current={l.active && 'page'}>
+              <Text>{l.label}</Text>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};

frontend/packages/shared/src/components/index.tsx

@@ -52,3 +52,4 @@ export {
   NativeSelect,
   NativeSelectWithLabel,
 } from './NativeSelect/NativeSelect';
+export { NavigationLinks } from './NavigationLinks/NavigationLinks';