From 52dd69cf5e96ef7e85e42f602023fe0d676581d7 Mon Sep 17 00:00:00 2001
From: Pyry Koivisto <pyry.koivisto@mavericks.fi>
Date: Wed, 18 Sep 2024 12:45:30 +0300
Subject: [PATCH] SHARED(Frontend): Introduce NavigationLinks component to
 replace use of MUI Tabs in header

---
 frontend/packages/shared/CHANGELOG.MD         |  5 +++
 .../NavigationLinks/NavigationLinks.scss      | 26 +++++++++++++++
 .../NavigationLinks/NavigationLinks.tsx       | 33 +++++++++++++++++++
 .../packages/shared/src/components/index.tsx  |  1 +
 4 files changed, 65 insertions(+)
 create mode 100644 frontend/packages/shared/src/components/NavigationLinks/NavigationLinks.scss
 create mode 100644 frontend/packages/shared/src/components/NavigationLinks/NavigationLinks.tsx

diff --git a/frontend/packages/shared/CHANGELOG.MD b/frontend/packages/shared/CHANGELOG.MD
index c4d3f5dab..05d911442 100644
--- a/frontend/packages/shared/CHANGELOG.MD
+++ b/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
diff --git a/frontend/packages/shared/src/components/NavigationLinks/NavigationLinks.scss b/frontend/packages/shared/src/components/NavigationLinks/NavigationLinks.scss
new file mode 100644
index 000000000..b2633f829
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/packages/shared/src/components/NavigationLinks/NavigationLinks.tsx b/frontend/packages/shared/src/components/NavigationLinks/NavigationLinks.tsx
new file mode 100644
index 000000000..44fd720cd
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/frontend/packages/shared/src/components/index.tsx b/frontend/packages/shared/src/components/index.tsx
index 4eb60be5f..7cb16132b 100644
--- a/frontend/packages/shared/src/components/index.tsx
+++ b/frontend/packages/shared/src/components/index.tsx
@@ -52,3 +52,4 @@ export {
   NativeSelect,
   NativeSelectWithLabel,
 } from './NativeSelect/NativeSelect';
+export { NavigationLinks } from './NavigationLinks/NavigationLinks';
\ No newline at end of file