fix(components): update styles of megadropdown

.changeset/poor-laws-impress.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Fixed display of `post-megadropdown` in header.

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

@@ -41,6 +41,12 @@ post-mainnavigation {
     }
   }
 
+  .back-button {
+    post-icon {
+      transform: rotate(180deg);
+    }
+  }
+
   // desktop styles
   @include media.min(lg) {
     nav {
@@ -103,6 +109,13 @@ post-mainnavigation {
       }
     }
 
+    post-megadropdown {
+      button:not(.btn-icon-close),
+      a {
+        @include header-mx.mobile-header-interactive;
+      }
+    }
+
     [slot='back-button'] {
       display: none;
     }

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

@@ -1,5 +1,6 @@
 @use '@swisspost/design-system-styles/mixins/media';
 @use '@swisspost/design-system-styles/variables/color';
+@use '@swisspost/design-system-styles/components/header/mixins' as header-mx;
 
 @keyframes slide-in {
   0% {
@@ -39,6 +40,7 @@ post-popovercontainer {
 
   @include media.max(lg) {
     --post-global-header-height: 64px;
+    --post-main-header-height: 48px;
     position: absolute;
     top: var(--post-header-height) !important;
     bottom: 0;
@@ -103,15 +105,6 @@ post-popovercontainer {
     }
   }
 
-  // Unset styles added by parent main navigation
-  a:hover {
-    border-block-width: 0;
-
-    &::after {
-      content: unset;
-    }
-  }
-
   post-list {
     display: grid;
     grid-row: span 2;
@@ -134,44 +127,57 @@ post-popovercontainer {
 
       h3 {
         font-size: 20px;
-        border-bottom: 1px solid #050400;
-        padding: 15px 12px 14px 0;
         display: block;
         font-weight: 900;
 
+        &:not(:has(a)) {
+          padding: 15px 12px 14px 0;
+          border-bottom: 1px solid #050400;
+        }
+
         a {
+          padding-block: 15px 14px;
+          padding-inline-start: 8px;
+          border-radius: 0;
           text-decoration: none;
-          width: 100%;
           font-size: inherit;
-          display: inline-block;
-          font-weight: inherit;
-          height: unset;
-          padding: 0;
-          border: 0;
+          display: flex;
+          justify-content: space-between;
+          min-height: 53px;
+
+          @include header-mx.mobile-header-interactive() {
+            height: unset;
+            font-weight: 900;
+          }
         }
 
         @include media.max(lg) {
           font-size: 16px;
-          padding: 12px 12px 11px 0;
+
+          &:not(:has(a)) {
+            padding: 15px 12px 14px 8px;
+            border-bottom: 1px solid #050400;
+          }
         }
       }
     }
   }
 
   post-list-item {
-    border-bottom: 1px solid #050400;
-
     > a {
-      padding: 13px 12px 12px 0;
-      display: block;
+      padding-block: 13px 12px;
+      padding-inline-start: 8px;
+      display: flex;
       text-decoration: none;
       width: 100%;
-      border-bottom: 0;
       height: auto;
-      border-top: 0;
+
+      &:hover {
+        border-block-width: 0;
+      }
 
       @include media.max(lg) {
-        padding: 12px 12px 11px 0;
+        padding-block: 12px 12px;
       }
     }
   }
@@ -184,10 +190,6 @@ post-popovercontainer {
       width: auto;
     }
 
-    post-icon {
-      transform: rotate(180deg);
-    }
-
     @include media.max(lg) {
       display: block;
     }

packages/components/src/index.html

@@ -68,7 +68,7 @@ <h1 slot="title">Application title</h1>
       <!-- Main navigation -->
       <post-mainnavigation caption="Hauptnavigation">
         <button type="button" slot="back-button" class="btn btn-sm btn-tertiary p-0">
-          <post-icon aria-hidden="true" name="3024"></post-icon> Back
+          <post-icon aria-hidden="true" name="arrowright"></post-icon> Back
         </button>
 
         <post-list title-hidden="">
@@ -82,12 +82,12 @@ <h2>Main Navigation</h2>
           <post-list-item>
             <post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
             <post-megadropdown id="briefe">
-              <button slot="back-button" class="btn btn-tertiary px-0">
+              <button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
                 <post-icon name="arrowright"></post-icon>
-                Zurück
+                Back
               </button>
               <post-closebutton slot="close-button">Schliessen</post-closebutton>
-              <h2 slot="megadropdown-title"><a href="">Briefe title</a></h2>
+              <h2 slot="megadropdown-title">Briefe title</h2>
               <post-list>
                 <h3>Briefe senden</h3>
                 <post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
@@ -107,12 +107,12 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
           <post-list-item>
             <post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
             <post-megadropdown id="pakete">
-              <button slot="back-button" class="btn btn-tertiary px-0">
+              <button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
                 <post-icon name="arrowright"></post-icon>
-                Zurück
+                Back
               </button>
               <post-closebutton slot="close-button">Schliessen</post-closebutton>
-              <h2 slot="megadropdown-title"><a href="">Pakete title</a></h2>
+              <h2 slot="megadropdown-title">Pakete title</h2>
               <post-list>
                 <h3>Pakete senden</h3>
                 <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>

packages/documentation/src/stories/modules/header/components/header.markup.ts

@@ -53,7 +53,7 @@ export default html`<post-header>
   <!-- Main navigation -->
   <post-mainnavigation caption="Hauptnavigation">
     <button type="button" slot="back-button" class="btn btn-sm btn-tertiary p-0">
-      <post-icon aria-hidden="true" name="3024"></post-icon> Back
+      <post-icon aria-hidden="true" name="arrowright"></post-icon> Back
     </button>
     <post-list title-hidden="">
       <h2>Main Navigation</h2>
@@ -67,10 +67,10 @@ export default html`<post-header>
         <post-megadropdown id="briefe">
           <button slot="back-button" class="btn btn-tertiary px-0">
             <post-icon name="arrowright"></post-icon>
-            Zurück
+            Back
           </button>
           <post-closebutton slot="close-button">Schliessen</post-closebutton>
-          <h2 slot="megadropdown-title"><a href="">Briefe title</a></h2>
+          <h2 slot="megadropdown-title">Briefe title</h2>
           <post-list>
             <h3>Briefe senden</h3>
             <post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
@@ -92,10 +92,10 @@ export default html`<post-header>
         <post-megadropdown id="pakete">
           <button slot="back-button" class="btn btn-tertiary px-0">
             <post-icon name="arrowright"></post-icon>
-            Zurück
+            Back
           </button>
           <post-closebutton slot="close-button">Schliessen</post-closebutton>
-          <h2 slot="megadropdown-title"><a href="">Pakete title</a></h2>
+          <h2 slot="megadropdown-title">Pakete title</h2>
           <post-list>
             <h3>Pakete senden</h3>
             <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>

packages/styles/src/components/header/_mixins.scss

@@ -13,22 +13,36 @@
 @mixin mobile-header-interactive() {
   width: 100%;
   height: var(--post-core-dimension-48);
-  padding-inline-end: var(--post-core-dimension-6);
+  padding-inline-end: calc(
+    var(--post-core-dimension-6) + var(--post-core-dimension-24) + var(--post-core-dimension-16)
+  );
   gap: var(--post-core-dimension-16);
-  border-block: var(--post-core-dimension-1) solid transparent;
-  border-block-end-color: currentColor;
   font-weight: var(--post-core-font-weight-700);
+  position: relative;
 
-  &:hover,
-  &.selected {
-    border-block-width: var(--post-core-dimension-3);
+  @content;
+
+  &::before {
+    content: '';
+    background-color: currentColor;
+    bottom: 0;
+    width: 100%;
+    height: var(--post-core-dimension-1);
+    position: absolute;
+    left: 0;
+  }
+
+  &:hover::before {
+    height: var(--post-core-dimension-3);
   }
 
   &:hover::after {
     content: '';
     display: block;
+    margin-right: calc((var(--post-core-dimension-24) + var(--post-core-dimension-16)) * -1);
     @include icons.icon(3020);
     width: var(--post-core-dimension-24);
+    min-width: var(--post-core-dimension-24);
     height: var(--post-core-dimension-24);
   }
 }