Merge branch 'NXSTAGE-1248-header' into 'development'

Nxstage 1248 header

See merge request julkiset-sivut/design-system-lib!116

src/components.d.ts

@@ -736,6 +736,7 @@ export namespace Components {
     dataSiteHeaderLabels: string;
     logoLabel?: string;
     logoUrl?: string;
+    menuLabel: string;
     menuLabelClose?: string;
     menuLabelOpen?: string;
     menuType: MenuType;
@@ -2032,6 +2033,7 @@ declare namespace LocalJSX {
     dataSiteHeaderLabels?: string;
     logoLabel?: string;
     logoUrl?: string;
+    menuLabel?: string;
     menuLabelClose?: string;
     menuLabelOpen?: string;
     menuType?: MenuType;

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss

@@ -61,7 +61,7 @@
       &__label {
         position: relative;
         width: min-content;
-        @include breakpoint($xlarge) {
+        @include breakpoint($overwide) {
           width: 100%;
         }
 
@@ -220,7 +220,7 @@
             @include font-size(26px, 32px);
             letter-spacing: -0.81px;
             margin-bottom: 6px;
-            padding-top: 19px;
+            padding: 25px 32px 20px 32px;
           }
 
           .label {
@@ -256,7 +256,7 @@
             top: 12px;
             left: -6px;
             @include breakpoint($xlarge) {
-              top: 27px;
+              top: 20px;
             }
             svg {
               background-color: var(--brand-main-light);

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

@@ -235,6 +235,7 @@ export class HyDesktopMenuLinks {
     let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
     const headerHeight = hyHeader.offsetTop + hyHeader.offsetHeight;
 
+    console.log('leave ' + leaveEvent.clientY + ' ' + headerHeight);
     if (leaveEvent.clientY < headerHeight - 4) {
       this.closePanel();
     }
@@ -242,22 +243,28 @@ export class HyDesktopMenuLinks {
     event.stopPropagation();
   }
 
+  /*
+    Close the panel if mouse is moving over the menu label.
+  * */
   handleDesktopMenuMove(event, id) {
-    let toggleEvent = event as MouseEvent;
-
-    const activeMenuItem = this.el.shadowRoot.querySelector(
-      `.desktop-menu-link[link-id="${id}"] .desktop-menu-link__label`
-    ) as HTMLElement;
-    let topBorder = activeMenuItem.getClientRects()[0].top;
-
-    if (this.currenOpenMenuId == id) {
-      // Mouse moving around the same menu link
-      if (toggleEvent.clientY < topBorder) {
-        this.closePanel();
+    if (this.isDesktopMenuOpen) {
+      let moveEvent = event as MouseEvent;
+
+      const activeMenuItem = this.el.shadowRoot.querySelector(
+        `.desktop-menu-link[link-id="${id}"] .desktop-menu-link__label`
+      ) as HTMLElement;
+      let topBorder = activeMenuItem.getClientRects()[0].top;
+
+      if (this.currenOpenMenuId == id) {
+        // Mouse moving around the same menu link
+        if (moveEvent.clientY < topBorder - 8) {
+          console.log(topBorder + ' ' + moveEvent.clientY);
+          this.closePanel();
+        }
       }
-    }
 
-    event.stopPropagation();
+      event.stopPropagation();
+    }
   }
 
   handleDesktopMenuFocus(event, id) {
@@ -322,18 +329,13 @@ export class HyDesktopMenuLinks {
                 onMouseDown={(e) => this.handleDesktopMenuClick(e, id)}
                 onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
                 onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)}
-                onMouseLeave={(e) => this.handleDesktopMenuLeave(e)}
                 onMouseMove={(e) => this.handleDesktopMenuMove(e, id)}
                 aria-expanded="false"
               >
                 <span class={classAttributesLabel}>{label}</span>
                 <hy-icon icon={'hy-icon-caret-down'} size={32} />
               </button>
-              <div
-                class="hy-desktop-menu-panel"
-                onMouseLeave={(e) => this.handleDesktopMenuClose(e)}
-                aria-hidden="true"
-              >
+              <div class="hy-desktop-menu-panel" aria-hidden="true">
                 <div class="hy-desktop-menu-panel__desktop-menu">
                   <div class="hy-desktop-menu-panel__desktop-menu__menu-items">
                     <a
@@ -418,7 +420,11 @@ export class HyDesktopMenuLinks {
 
   render() {
     return (
-      <nav role={'navigation'} class="hy-site-header__menu-desktop">
+      <nav
+        role={'navigation'}
+        class="hy-site-header__menu-desktop"
+        onMouseLeave={(e) => this.handleDesktopMenuClose(e)}
+      >
         <ul class="hy-site-header__menu-desktop-container">{this.menuLinkItems}</ul>
       </nav>
     );

src/components/site-header/readme.md

@@ -12,6 +12,7 @@
 | `dataSiteHeaderLabels` | `data-site-header-labels` |             | `string`                                                                                           | `undefined`        |
 | `logoLabel`            | `logo-label`              |             | `string`                                                                                           | `undefined`        |
 | `logoUrl`              | `logo-url`                |             | `string`                                                                                           | `undefined`        |
+| `menuLabel`            | `menu-label`              |             | `string`                                                                                           | `'Menu'`           |
 | `menuLabelClose`       | `menu-label-close`        |             | `string`                                                                                           | `undefined`        |
 | `menuLabelOpen`        | `menu-label-open`         |             | `string`                                                                                           | `undefined`        |
 | `menuType`             | `menu-type`               |             | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.default` |

src/components/site-header/site-header.scss

@@ -101,6 +101,9 @@
     @include breakpoint($narrow) {
       padding: 15px 28px 15px 15px;
     }
+    @include breakpoint($wide) {
+      padding: 15px 28px 15px 6px;
+    }
 
     &.is-open {
       position: fixed;
@@ -139,6 +142,15 @@
       }
     }
   }
+
+  &__menu-label {
+    @include font-size(14px, 24px);
+    @include font-weight($bold);
+    font-family: var(--main-font-family);
+    letter-spacing: -0.45px;
+    padding-right: 2px;
+    text-transform: uppercase;
+  }
 }
 
 .hy-backdrop {

src/components/site-header/site-header.tsx

@@ -30,6 +30,7 @@ export class SiteHeader {
   @Prop() dataSiteHeaderLabels: string;
   @Prop() logoUrl?: string;
   @Prop() logoLabel?: string;
+  @Prop() menuLabel: string = 'Menu';
   @Prop() menuLabelOpen?: string;
   @Prop() menuLabelClose?: string;
   @Prop({reflect: true}) menuType: MenuType = MenuType.default;
@@ -241,6 +242,14 @@ export class SiteHeader {
               })}
             </div>
             <div class={'hy-site-header__menu-container'}>
+              <span
+                class={{
+                  'hy-site-header__menu-label': true,
+                  'is-visible': this.isMenuOpen,
+                }}
+              >
+                {this.menuLabel}
+              </span>
               <button
                 onClick={() => this.mobileMenuToggle()}
                 class={{

src/global/_breakpoints.scss

@@ -10,6 +10,7 @@ $narrow: 30rem; // 480px  480-767
 $medium: 48rem; // 768px  768-959
 $wide: 60rem; // 960px-1200px; small
 $extrawide: 75.0625rem; // 1201px-1440px; mid-size
+$overwide: 90.063rem; // 1441px-1600px; large-size
 $xlarge: 1601px; //1601px-1920px, x-large
 $fullhd: 120.0625rem; // 1921px
 $max-width: $extrawide;

src/utils/utils.ts

@@ -161,7 +161,7 @@ export enum MenuType {
   sidenav = 'sidenav',
   sidepanel = 'sidepanel',
   mobile = 'mobile',
-  tablet = 'tabled',
+  tablet = 'tablet',
   default = 'desktop',
 }