From f70e8356d2b7b3d4914f90e58dc4633c66a7be7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Thu, 28 Nov 2024 13:53:19 +0100
Subject: [PATCH] Feat(web): Introduce Navigation

---
 .../src/scss/components/Navigation/README.md  |  7 +++
 .../components/Navigation/_Navigation.scss    | 35 +++++++++++++
 .../Navigation/_NavigationLink.scss           | 50 +++++++++++++++++++
 .../scss/components/Navigation/_theme.scss    | 22 ++++++++
 .../src/scss/components/Navigation/index.html | 10 ++++
 .../src/scss/components/Navigation/index.scss |  2 +
 packages/web/src/scss/components/index.scss   |  1 +
 7 files changed, 127 insertions(+)
 create mode 100644 packages/web/src/scss/components/Navigation/README.md
 create mode 100644 packages/web/src/scss/components/Navigation/_Navigation.scss
 create mode 100644 packages/web/src/scss/components/Navigation/_NavigationLink.scss
 create mode 100644 packages/web/src/scss/components/Navigation/_theme.scss
 create mode 100644 packages/web/src/scss/components/Navigation/index.html
 create mode 100644 packages/web/src/scss/components/Navigation/index.scss

diff --git a/packages/web/src/scss/components/Navigation/README.md b/packages/web/src/scss/components/Navigation/README.md
new file mode 100644
index 0000000000..c34c315c55
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/README.md
@@ -0,0 +1,7 @@
+# Divider
+
+The `Divider` component is used as horizontal separator of the content.
+
+```html
+<hr class="Divider" />
+```
diff --git a/packages/web/src/scss/components/Navigation/_Navigation.scss b/packages/web/src/scss/components/Navigation/_Navigation.scss
new file mode 100644
index 0000000000..fdcd08d508
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/_Navigation.scss
@@ -0,0 +1,35 @@
+@use '../../tools/reset';
+@use 'theme';
+
+.Navigation,
+.Navigation > ul,
+.Navigation > ul > li {
+    display: flex;
+}
+
+.Navigation:not(.Navigation--main),
+.Navigation:not(.Navigation--main) > ul {
+    gap: theme.$gap;
+    align-content: center;
+}
+
+.Navigation > ul {
+    @include reset.list();
+}
+
+.Navigation--main {
+    align-self: stretch;
+    align-items: stretch;
+}
+
+.Navigation--start {
+    margin-inline-end: auto;
+
+    &:not(:first-child) {
+        margin-inline-start: theme.$start-spacing;
+    }
+}
+
+.Navigation--end {
+    margin-inline-start: auto;
+}
diff --git a/packages/web/src/scss/components/Navigation/_NavigationLink.scss b/packages/web/src/scss/components/Navigation/_NavigationLink.scss
new file mode 100644
index 0000000000..b228e2dd24
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/_NavigationLink.scss
@@ -0,0 +1,50 @@
+@use '../../tools/typography';
+@use 'theme';
+
+.NavigationLink {
+    @include typography.generate(theme.$link-typography);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: theme.$link-spacing;
+    color: theme.$link-color-state-default;
+    border-top: theme.$link-border-bottom-width theme.$link-border-bottom-style transparent;
+    border-bottom: theme.$link-border-bottom-width theme.$link-border-bottom-style
+        theme.$link-border-bottom-color-style-state-default;
+    background-color: theme.$link-background-color-state-default;
+
+    @media (hover: hover) {
+        &:hover {
+            text-decoration: none;
+            color: theme.$link-color-state-hover;
+            background-color: theme.$link-background-color-state-hover;
+        }
+    }
+
+    &:active {
+        color: theme.$link-color-state-active;
+        background-color: theme.$link-background-color-state-active;
+    }
+}
+
+.NavigationLink--selected {
+    color: theme.$link-color-state-selected;
+    border-bottom-color: theme.$link-border-bottom-color-style-selected-state-default;
+    background-color: theme.$link-background-color-state-selected;
+
+    @media (hover: hover) {
+        &:hover {
+            border-bottom-color: theme.$link-border-bottom-color-style-selected-state-hover;
+        }
+    }
+
+    &:active {
+        border-bottom-color: theme.$link-border-bottom-color-style-selected-state-active;
+    }
+}
+
+.NavigationLink--disabled {
+    color: theme.$link-color-state-disabled;
+    pointer-events: none;
+}
diff --git a/packages/web/src/scss/components/Navigation/_theme.scss b/packages/web/src/scss/components/Navigation/_theme.scss
new file mode 100644
index 0000000000..3e1506fa6e
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/_theme.scss
@@ -0,0 +1,22 @@
+@use '@tokens' as tokens;
+
+$gap: tokens.$space-700;
+$start-spacing: tokens.$space-1000;
+
+$link-typography: tokens.$body-small-semibold;
+$link-spacing: tokens.$space-600;
+$link-color-state-default: tokens.$component-header-item-state-default;
+$link-color-state-hover: tokens.$component-header-item-state-hover;
+$link-color-state-active: tokens.$component-header-item-state-active;
+$link-color-state-selected: tokens.$component-header-item-state-selected;
+$link-color-state-disabled: tokens.$disabled-content;
+$link-border-bottom-width: tokens.$border-width-200;
+$link-border-bottom-style: solid;
+$link-border-bottom-color-style-state-default: transparent;
+$link-border-bottom-color-style-selected-state-default: tokens.$component-header-stripe-state-selected;
+$link-border-bottom-color-style-selected-state-hover: tokens.$component-header-stripe-state-unselected;
+$link-border-bottom-color-style-selected-state-active: tokens.$component-header-stripe-state-unselected;
+$link-background-color-state-default: tokens.$component-header-item-background-state-default;
+$link-background-color-state-hover: tokens.$component-header-item-background-state-hover;
+$link-background-color-state-active: tokens.$component-header-item-background-state-active;
+$link-background-color-state-selected: tokens.$component-header-item-background-state-selected;
diff --git a/packages/web/src/scss/components/Navigation/index.html b/packages/web/src/scss/components/Navigation/index.html
new file mode 100644
index 0000000000..7056a7371f
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/index.html
@@ -0,0 +1,10 @@
+{{#> web/layout/default title="Navigation" parentPageName="Components" }}
+
+<section class="UNSTABLE_Section">
+  <h2 class="docs-Heading">Default</h2>
+  <div class="docs-Stack docs-Stack--stretch">
+    x
+  </div>
+</section>
+
+{{/web/layout/default }}
diff --git a/packages/web/src/scss/components/Navigation/index.scss b/packages/web/src/scss/components/Navigation/index.scss
new file mode 100644
index 0000000000..b7fc4e9b32
--- /dev/null
+++ b/packages/web/src/scss/components/Navigation/index.scss
@@ -0,0 +1,2 @@
+@forward 'Navigation';
+@forward 'NavigationLink';
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index d569873ac0..51fc1d2214 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -15,6 +15,7 @@
 @forward 'Header';
 @forward 'Item';
 @forward 'Modal';
+@forward 'Navigation';
 @forward 'Pagination';
 @forward 'PartnerLogo';
 @forward 'Pill';