Merge branch 'NXSTAGE-1493-header' of...

Merge branch 'NXSTAGE-1493-header' of version.helsinki.fi:julkiset-sivut/design-system-lib into NXSTAGE-1493-header
merging

src/components.d.ts

@@ -53,7 +53,7 @@ import {CtaLinkValue} from './components/hy-link-list/hy-link-list';
 import {AdditionalInfo, RelatedLink} from './components/hy-list-item/hy-list-item';
 import {MenuLanguage} from './components/navigation/menu-language/menu-language';
 import {ComponentLabels} from './components/site-header/site-header';
-import {MainMenu} from './components/hy-menu-main-group/hy-menu-main-group';
+import {MainMenu} from './components/navigation/hy-menu-main-group/hy-menu-main-group';
 import {ProcessFlowBoxValue} from './components/process/process';
 import {ShortcutLinkValue} from './components/hy-shortcuts/hy-shortcuts';
 import {DesktopLinks as DesktopLinks1} from './components/site-header/site-header';

src/components/icon/readme.md

@@ -38,7 +38,7 @@
 - [hy-menu-item-sidebar](../navigation/menu-item-sidebar)
 - [hy-menu-language](../navigation/menu-language)
 - [hy-menu-level-container](../navigation/menu-level-container)
-- [hy-menu-main-group](../hy-menu-main-group)
+- [hy-menu-main-group](../navigation/hy-menu-main-group)
 - [hy-menu-mobile-breadcrumb](../navigation/menu-mobile-breadcrumb)
 - [hy-menu-sidebar](../navigation/menu-sidebar)
 - [hy-pager-item](../pagination/hy-pager-item)

src/components/hy-menu-main-group/hy-menu-main-group.scss → src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss

@@ -90,3 +90,23 @@
     }
   }
 }
+
+:host(.menu--main-group--mobile) {
+  align-items: center;
+  display: flex;
+  flex-flow: row;
+  margin-left: 28px;
+
+  @include breakpoint($narrow) {
+    margin-left: 32px;
+  }
+  @include breakpoint($wide) {
+    margin-left: 40px;
+  }
+}
+
+.menu--main-group__mobile-toggle {
+  border: none;
+  background: transparent;
+  padding: 15px 28px 15px 15px;
+}

src/components/hy-menu-main-group/hy-menu-main-group.tsx → src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx

@@ -30,16 +30,20 @@ export class HyMenuMainGroup {
 
     if (this.isMenuOpen) {
       let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
-      let mainMenuToggle = event.target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
-      let mainMenuDropdown = event.target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
-      let mainMenuList = event.target.shadowRoot.querySelector('.list') as HTMLElement;
 
-      if (hyTopHeader && mainMenuDropdown && mainMenuList && mainMenuToggle) {
-        let rectHeader = hyTopHeader.getBoundingClientRect();
-        let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
-        mainMenuDropdown.style.top = `${rectHeader.height}px`;
+      if (hyTopHeader && hyTopHeader.hasAttribute('is-mobile')) {
+        console.log('do mobile stuff');
+      } else {
+        let mainMenuToggle = event.target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
+        let mainMenuDropdown = event.target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
+        let mainMenuList = event.target.shadowRoot.querySelector('.list') as HTMLElement;
+        if (mainMenuDropdown && mainMenuList && mainMenuToggle) {
+          let rectHeader = hyTopHeader.getBoundingClientRect();
+          let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
+          mainMenuDropdown.style.top = `${rectHeader.height}px`;
 
-        mainMenuList.style.left = `${rectMenuToggle.left}px`;
+          mainMenuList.style.left = `${rectMenuToggle.left}px`;
+        }
       }
     }
 
@@ -54,7 +58,41 @@ export class HyMenuMainGroup {
     const white = 'var(--grayscale-white)';
 
     return this.isMobile ? (
-      <div>Mobile Main Menu in Groups</div>
+      <Host
+        class={{
+          'menu--main-group--mobile': true,
+          'menu--main-group--mobile__is-open': this.isMenuOpen,
+        }}
+      >
+        <button
+          class={{
+            'menu--main-group__mobile-toggle': true,
+            'is-open': this.isMenuOpen,
+          }}
+        >
+          <hy-icon icon={'hy-icon-slim-hamburger-menu'} size={20} fill={white} />
+        </button>
+        <nav
+          role="navigation"
+          class={{
+            'menu--main-group__dropdown--mobile': true,
+            'is-open': this.isMenuOpen,
+          }}
+        >
+          <div class="list">
+            {this._dataMainMenu.map((item) => {
+              return (
+                <a href={item.url} class={{'menu-main-link': true}}>
+                  <span class="heading-icon">
+                    <hy-icon icon={'hy-icon-caret-right'} size={10} fill={white} />
+                  </span>
+                  <span class={'menu--main-group__label'}>{item.label}</span>
+                </a>
+              );
+            })}
+          </div>
+        </nav>
+      </Host>
     ) : (
       <Host
         class={{

src/components/hy-menu-main-group/readme.md → src/components/navigation/hy-menu-main-group/readme.md

@@ -13,11 +13,11 @@
 
 ### Used by
 
-- [hy-site-header](../site-header)
+- [hy-site-header](../../site-header)
 
 ### Depends on
 
-- [hy-icon](../icon)
+- [hy-icon](../../icon)
 
 ### Graph
 

src/components/site-header/readme.md

@@ -36,7 +36,7 @@
 ### Depends on
 
 - [hy-site-logo](site-logo)
-- [hy-menu-main-group](../hy-menu-main-group)
+- [hy-menu-main-group](../navigation/hy-menu-main-group)
 - [hy-menu-language](../navigation/menu-language)
 - [hy-site-search](site-search)
 - [hy-icon](../icon)

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

@@ -92,6 +92,12 @@
     bottom: 0;
     left: 0;
   }
+
+  .menu--secondary--group {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 .hy-site-header__logo-container {

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

@@ -444,13 +444,11 @@ export class SiteHeader {
           <header class={classAttributes.join(' ')}>
             <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
             {this.isGroup && (
-              <div class="hy-site-header__content-top">
+              <div class="hy-site-header__content-top" is-mobile={true}>
                 <div class={'hy-site-header__logo-container group '}>
                   <hy-site-logo size={logoSizeGroup} color={logoColorGroup} url={this.siteUrl} label={this.siteLabel} />
                 </div>
 
-                <hy-menu-main-group is-mobile={true} data-main-menu={this.dataMainMenuLinks} />
-
                 <div class={'menu--secondary menu--secondary--group'}>
                   <hy-site-search
                     class={'menu--secondary__item group'}
@@ -462,6 +460,7 @@ export class SiteHeader {
                     search-labels={this.dataSiteSearchLabels}
                     search-tools={this.dataSearchTools}
                   />
+                  <hy-menu-main-group is-mobile={true} data-main-menu={this.dataMainMenuLinks} />
                 </div>
               </div>
             )}