Feat(web): Introduce Navigation

lmc-eu · Nov 28, 2024 · f70e835 · f70e835
1 parent e67cd6c
commit f70e835
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 0 deletions.
diff --git a/packages/web/src/scss/components/Navigation/README.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -15,6 +15,7 @@
 @forward 'Header';
 @forward 'Item';
 @forward 'Modal';
+@forward 'Navigation';
 @forward 'Pagination';
 @forward 'PartnerLogo';
 @forward 'Pill';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@forward 'Navigation';
		@forward 'NavigationLink';