chore(components, styles): update post-mainnavigation

Author: alizedebray

packages/components/src/components/post-icon/readme.md

@@ -30,6 +30,7 @@ some content
  - [post-closebutton](../post-closebutton)
  - [post-language-switch](../post-language-switch)
  - [post-mainnavigation](../post-mainnavigation)
+ - [post-megadropdown-trigger](../post-megadropdown-trigger)
  - [post-rating](../post-rating)
 
 ### Graph
@@ -43,6 +44,7 @@ graph TD;
   post-closebutton --> post-icon
   post-language-switch --> post-icon
   post-mainnavigation --> post-icon
+  post-megadropdown-trigger --> post-icon
   post-rating --> post-icon
   style post-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/components/src/components/post-language-switch/post-language-switch.scss

@@ -22,8 +22,8 @@ tokens.$default-map: components.$post-button;
 }
 
 .post-language-switch-trigger {
-  @include header-mx.header-control-base;
-  @include header-mx.header-control-icon-rotate;
+  @include header-mx.header-control-styles;
+  @include header-mx.rotation-chevron-control-styles;
   text-transform: uppercase;
   cursor: pointer;
 }

packages/components/src/components/post-mainnavigation/post-mainnavigation.scss

@@ -1,232 +1,50 @@
-@use '@swisspost/design-system-styles/mixins/button';
-@use '@swisspost/design-system-styles/mixins/icons';
-@use '@swisspost/design-system-styles/mixins/utilities';
 @use '@swisspost/design-system-styles/mixins/media';
-@use '@swisspost/design-system-styles/functions/tokens';
-@use '@swisspost/design-system-styles/tokens/elements';
-@use '@swisspost/design-system-styles/variables/animation';
-@use '@swisspost/design-system-styles/variables/commons';
-@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
-@use '@swisspost/design-system-styles/variables/elevation';
 @use '@swisspost/design-system-styles/variables/color';
+@use '@swisspost/design-system-styles/variables/elevation';
 
-@include icons.custom-property('chevrondown');
-
-post-mainnavigation {
-  // reset links and buttons
-  post-list-item {
-    > a {
-      text-decoration: none;
-      border-radius: 0;
-    }
-
-    post-megadropdown-trigger button {
-      @include button.reset-button;
-      text-align: start;
-    }
-
-    > a,
-    post-megadropdown-trigger button {
-      flex: 0 0 fit-content;
-      white-space: nowrap;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      &:hover {
-        color: tokens.get('post-link-hover-fg', elements.$post-link);
-      }
+:host {
+  display: flex;
+  user-select: none;
 
-      &:focus-visible {
-        border-radius: 4px;
-        z-index: 2;
-      }
-    }
+  @include media.only(desktop) {
+    overflow: hidden;
   }
+}
 
-  // styles specific to for the mega-dropdown buttons
-  > button,
-  post-megadropdown-trigger button {
-    &::after {
-      content: '';
-      @include icons.mask-image('chevrondown');
-      height: 1em;
-      width: 1em;
-
-      @include media.only(tablet) {
-        font-size: 1.5rem;
-      }
-
-      @include media.only(mobile) {
-        font-size: 1rem;
-      }
-    }
-
-    @include utilities.high-contrast-mode() {
-      border: 1px solid ButtonBorder !important;
+nav {
+  scroll-behavior: smooth;
+  flex: 1 1 auto;
 
-      &:hover::after,
-      &[aria-expanded='true']::after {
-        color: HighlightText;
-      }
-    }
+  @include media.only(desktop) {
+    height: var(--post-main-navigation-height);
   }
+}
 
-  // desktop styles
-  post-header:not([data-burger-menu]) > & {
-    display: flex;
-    height: var(--post-main-navigation-height, 0);
-    background: color.$white;
-    user-select: none;
-
-    nav {
-      flex: 1 1 auto;
-      scroll-behavior: smooth;
-    }
-
-    &.scrollable,
-    &.scrollable nav {
-      overflow: hidden;
-    }
-
-    .scroll-control {
-      $icon-size: 1rem;
-      $button-padding: 1rem;
-      $button-width: $icon-size + 2 * $button-padding;
-
-      z-index: 2;
-      cursor: pointer;
-      padding: $button-padding;
-      background: color.$white;
-      box-shadow: elevation.$elevation-500;
-      line-height: 1;
-
-      &.scroll-left {
-        margin-inline-end: -1 * $button-width;
-      }
-
-      &.scroll-right {
-        margin-inline-start: -1 * $button-width;
-      }
-
-      &.d-none {
-        display: none;
-      }
-
-      post-icon {
-        font-size: $icon-size;
-      }
-    }
-
-    post-list > [role='list'] {
-      flex-direction: row;
-      max-width: 100vw;
-    }
-
-    post-list-item {
-      > a,
-      > button,
-      post-megadropdown-trigger button {
-        position: sticky;
-        padding-inline: 12px;
-        height: var(--post-main-navigation-height, 0);
-        gap: 8px;
-        font-size: 16px;
-
-        .nav-el-active {
-          font-weight: 700;
-          text-align: center;
-          opacity: 0;
-        }
-
-        .nav-el-inactive {
-          position: absolute;
-          opacity: 1;
-          text-align: center;
-          width: 100%;
-          inset-inline-start: 0;
-        }
-
-        &.active,
-        &[aria-current='page']:not(post-megadropdown *),
-        &[aria-expanded='true'] {
-          background-color: #050400;
-          color: #fff;
-          font-weight: 700;
-
-          .nav-el-active {
-            opacity: 1;
-          }
-
-          .nav-el-inactive {
-            opacity: 0;
-          }
-        }
-
-        &:hover {
-          background-color: #504f4b;
-          color: #fff;
-        }
-
-        @include media.max(sm) {
-          font-size: 14px;
-        }
-      }
-
-      // styles specific to for the mega-dropdown buttons
-      > button,
-      post-megadropdown-trigger button {
-        padding-inline-end: 12px;
-        transition: border-block-end-color animation.$transition-base-timing;
-
-        .nav-el-inactive {
-          width: calc(100% - 1em - 8px);
-        }
-
-        &::after {
-          transition: transform animation.$transition-base-timing;
-        }
+.scroll-control {
+  $icon-size: 1rem;
+  $button-padding: 1rem;
+  $button-width: $icon-size + 2 * $button-padding;
 
-        &[aria-expanded='true']::after {
-          transform: rotate(180deg);
-        }
-      }
-    }
+  z-index: 1;
+  cursor: pointer;
+  padding: $button-padding;
+  background: color.$white;
+  box-shadow: elevation.$elevation-500;
+  line-height: 1;
 
-    post-megadropdown {
-      button:not(:is(post-closebutton *)),
-      a {
-        @include header-mx.mobile-header-interactive;
-      }
-    }
+  &.scroll-left {
+    margin-inline-end: -1 * $button-width;
   }
 
-  // tablet/mobile styles
-  post-header[data-burger-menu] > & {
-    nav {
-      transform: none !important;
-    }
-
-    .scroll-control {
-      display: none;
-    }
-
-    post-list-item {
-      > a,
-      > button,
-      post-megadropdown-trigger button {
-        @include header-mx.mobile-header-interactive;
+  &.scroll-right {
+    margin-inline-start: -1 * $button-width;
+  }
 
-        .nav-el-inactive {
-          display: none;
-        }
-      }
-    }
+  &.d-none {
+    display: none;
+  }
 
-    // styles specific to for the mega-dropdown buttons
-    > button::after,
-    post-megadropdown-trigger button::after {
-      transform: rotate(-90deg);
-    }
+  post-icon {
+    font-size: $icon-size;
   }
 }

packages/components/src/components/post-mainnavigation/post-mainnavigation.tsx

@@ -1,4 +1,4 @@
-import { Component, Host, h, State, Listen } from '@stencil/core';
+import { Component, Element, Host, h, State, Listen } from '@stencil/core';
 import { version } from '@root/package.json';
 
 const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
@@ -7,9 +7,11 @@ const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar i
 @Component({
   tag: 'post-mainnavigation',
   styleUrl: './post-mainnavigation.scss',
-  shadow: false,
+  shadow: true,
 })
 export class PostMainnavigation {
+  @Element() private host: HTMLPostMainnavigationElement;
+
   private navbar: HTMLElement;
 
   private scrollRepeatInterval: ReturnType<typeof setInterval>;
@@ -82,19 +84,19 @@ export class PostMainnavigation {
   }
 
   private get navigationItems(): HTMLElement[] {
-    return Array.from(this.navbar.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
+    return Array.from(this.host.querySelectorAll(':is(a, button):not(post-megadropdown *)'));
   }
 
   /**
    * Hack to fix the layout shift due to bold text on active elements
    */
   private fixLayoutShift() {
     this.navigationItems
-      .filter(item => !item.matches(':has(.nav-el-active)'))
+      .filter(item => !item.matches(':has(.shown-when-inactive)'))
       .forEach(item => {
         item.innerHTML = `
-          <span class="nav-el-active">${item.innerHTML}</span>
-          <span class="nav-el-inactive" aria-hidden="true">${item.innerHTML}</span>
+          <span class="shown-when-inactive" aria-hidden="true">${item.innerHTML}</span>
+          ${item.innerHTML}
         `;
       });
   }
@@ -140,7 +142,7 @@ export class PostMainnavigation {
   }
 
   private scrollRight() {
-    const scrollRightLeftEdge = document
+    const scrollRightLeftEdge = this.host.shadowRoot
       .querySelector('.scroll-right')
       .getBoundingClientRect().left;
 
@@ -157,7 +159,7 @@ export class PostMainnavigation {
   }
 
   private scrollLeft() {
-    const scrollLeftRightEdge = document
+    const scrollLeftRightEdge = this.host.shadowRoot
       .querySelector('.scroll-left')
       .getBoundingClientRect().right;
 

packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.scss

@@ -1,6 +1,17 @@
 @use '@swisspost/design-system-styles/mixins/media';
+@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
 
 post-megadropdown-trigger {
   width: 100%;
   position: relative;
+
+  button {
+    @include header-mx.rotation-chevron-control-styles;
+
+    @include media.max(desktop) {
+      post-icon {
+        transform: rotate(-90deg);
+      }
+    }
+  }
 }