header main menu for group pages

src/components.d.ts

@@ -53,6 +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 {ProcessFlowBoxValue} from './components/process/process';
 import {ShortcutLinkValue} from './components/hy-shortcuts/hy-shortcuts';
 import {DesktopLinks as DesktopLinks1} from './components/site-header/site-header';
@@ -624,6 +625,10 @@ export namespace Components {
     menuType: MenuType;
     triggerItem: string;
   }
+  interface HyMenuMainGroup {
+    dataMainMenu: MainMenu[] | string;
+    isMobile: boolean;
+  }
   interface HyMenuMobileBreadcrumb {
     bid: string;
     isFirst: boolean;
@@ -769,6 +774,7 @@ export namespace Components {
   }
   interface HySiteHeader {
     dataDesktopLinks: DesktopLinks[] | string;
+    dataMainMenuLinks: DesktopLinks[] | string;
     dataMenuDonate: string;
     dataMenuLanguage: string;
     dataSearchTools: DesktopLinks[] | string;
@@ -1194,6 +1200,11 @@ declare global {
     prototype: HTMLHyMenuLevelContainerElement;
     new (): HTMLHyMenuLevelContainerElement;
   };
+  interface HTMLHyMenuMainGroupElement extends Components.HyMenuMainGroup, HTMLStencilElement {}
+  var HTMLHyMenuMainGroupElement: {
+    prototype: HTMLHyMenuMainGroupElement;
+    new (): HTMLHyMenuMainGroupElement;
+  };
   interface HTMLHyMenuMobileBreadcrumbElement extends Components.HyMenuMobileBreadcrumb, HTMLStencilElement {}
   var HTMLHyMenuMobileBreadcrumbElement: {
     prototype: HTMLHyMenuMobileBreadcrumbElement;
@@ -1382,6 +1393,7 @@ declare global {
     'hy-menu-language': HTMLHyMenuLanguageElement;
     'hy-menu-language-item': HTMLHyMenuLanguageItemElement;
     'hy-menu-level-container': HTMLHyMenuLevelContainerElement;
+    'hy-menu-main-group': HTMLHyMenuMainGroupElement;
     'hy-menu-mobile-breadcrumb': HTMLHyMenuMobileBreadcrumbElement;
     'hy-menu-sidebar': HTMLHyMenuSidebarElement;
     'hy-pager': HTMLHyPagerElement;
@@ -1988,6 +2000,10 @@ declare namespace LocalJSX {
     menuType?: MenuType;
     triggerItem?: string;
   }
+  interface HyMenuMainGroup {
+    dataMainMenu?: MainMenu[] | string;
+    isMobile?: boolean;
+  }
   interface HyMenuMobileBreadcrumb {
     bid?: string;
     isFirst?: boolean;
@@ -2134,6 +2150,7 @@ declare namespace LocalJSX {
   }
   interface HySiteHeader {
     dataDesktopLinks?: DesktopLinks[] | string;
+    dataMainMenuLinks?: DesktopLinks[] | string;
     dataMenuDonate?: string;
     dataMenuLanguage?: string;
     dataSearchTools?: DesktopLinks[] | string;
@@ -2312,6 +2329,7 @@ declare namespace LocalJSX {
     'hy-menu-language': HyMenuLanguage;
     'hy-menu-language-item': HyMenuLanguageItem;
     'hy-menu-level-container': HyMenuLevelContainer;
+    'hy-menu-main-group': HyMenuMainGroup;
     'hy-menu-mobile-breadcrumb': HyMenuMobileBreadcrumb;
     'hy-menu-sidebar': HyMenuSidebar;
     'hy-pager': HyPager;
@@ -2411,6 +2429,7 @@ declare module '@stencil/core' {
       'hy-menu-language-item': LocalJSX.HyMenuLanguageItem & JSXBase.HTMLAttributes<HTMLHyMenuLanguageItemElement>;
       'hy-menu-level-container': LocalJSX.HyMenuLevelContainer &
         JSXBase.HTMLAttributes<HTMLHyMenuLevelContainerElement>;
+      'hy-menu-main-group': LocalJSX.HyMenuMainGroup & JSXBase.HTMLAttributes<HTMLHyMenuMainGroupElement>;
       'hy-menu-mobile-breadcrumb': LocalJSX.HyMenuMobileBreadcrumb &
         JSXBase.HTMLAttributes<HTMLHyMenuMobileBreadcrumbElement>;
       'hy-menu-sidebar': LocalJSX.HyMenuSidebar & JSXBase.HTMLAttributes<HTMLHyMenuSidebarElement>;

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

+:host {
+  display: block;
+}

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

+export interface MainMenu {
+  label: string;
+  url: string;
+  menuLinkId: string;
+}
+
+import {Component, Host, h, Element, Prop, State, Watch, Listen} from '@stencil/core';
+
+@Component({
+  tag: 'hy-menu-main-group',
+  styleUrl: 'hy-menu-main-group.scss',
+  shadow: true,
+})
+export class HyMenuMainGroup {
+  @Element() el: HTMLElement;
+  @Prop() dataMainMenu: MainMenu[] | string;
+  @Prop() isMobile: boolean = false;
+  @State() isMenuOpen: boolean = false;
+
+  private _dataMainMenu: MainMenu[];
+
+  @Watch('dataMainMenu')
+  dataMainMenuWatcher(data: MainMenu[] | string) {
+    this._dataMainMenu = typeof data === 'string' ? JSON.parse(data) : data;
+  }
+
+  @Listen('click')
+  handleComponentClick(event) {
+    this.isMenuOpen = !this.isMenuOpen;
+    event.stopPropagation();
+  }
+
+  componentWillRender() {
+    this.dataMainMenuWatcher(this.dataMainMenu);
+  }
+
+  render() {
+    const white = 'var(--grayscale-white)';
+
+    return this.isMobile ? (
+      <div>Mobile Main Menu in Groups</div>
+    ) : (
+      <Host
+        class={{
+          'menu--main-group': true,
+          'menu--main-group__is-open': this.isMenuOpen,
+        }}
+      >
+        <button
+          class={{
+            'menu--main-group__toggle': true,
+            'is-open': this.isMenuOpen,
+          }}
+          //aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
+        >
+          <hy-icon class={'menu--main-group__globe-icon'} icon={'hy-icon-globe'} size={14} fill={white} />
+          <span>University main menu</span>
+          <hy-icon class={'menu--main-group__toggle__caret'} icon={'hy-icon-caret-down'} size={8} fill={white} />
+        </button>
+        <div
+          class={{
+            'menu--language__dropdown': true,
+            'is-open': this.isMenuOpen,
+          }}
+        >
+          {this._dataMainMenu.map((item) => {
+            return <a href={item.url}>{item.label}</a>;
+          })}
+        </div>
+      </Host>
+    );
+  }
+}

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

+# hy-menu-main-group
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property       | Attribute        | Description | Type                   | Default     |
+| -------------- | ---------------- | ----------- | ---------------------- | ----------- |
+| `dataMainMenu` | `data-main-menu` |             | `MainMenu[] \| string` | `undefined` |
+| `isMobile`     | `is-mobile`      |             | `boolean`              | `false`     |
+
+## Dependencies
+
+### Used by
+
+- [hy-site-header](../site-header)
+
+### Depends on
+
+- [hy-icon](../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+  hy-menu-main-group --> hy-icon
+  hy-site-header --> hy-menu-main-group
+  style hy-menu-main-group fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System

src/components/icon/readme.md

@@ -38,6 +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-mobile-breadcrumb](../navigation/menu-mobile-breadcrumb)
 - [hy-menu-sidebar](../navigation/menu-sidebar)
 - [hy-pager-item](../pagination/hy-pager-item)
@@ -79,6 +80,7 @@ graph TD;
   hy-menu-item-sidebar --> hy-icon
   hy-menu-language --> hy-icon
   hy-menu-level-container --> hy-icon
+  hy-menu-main-group --> hy-icon
   hy-menu-mobile-breadcrumb --> hy-icon
   hy-menu-sidebar --> hy-icon
   hy-pager-item --> hy-icon

src/components/site-header/readme.md

@@ -7,6 +7,7 @@
 | Property               | Attribute                 | Description | Type                                                                                               | Default            |
 | ---------------------- | ------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | ------------------ |
 | `dataDesktopLinks`     | `data-desktop-links`      |             | `DesktopLinks[] \| string`                                                                         | `undefined`        |
+| `dataMainMenuLinks`    | `data-main-menu-links`    |             | `DesktopLinks[] \| string`                                                                         | `undefined`        |
 | `dataMenuDonate`       | `data-menu-donate`        |             | `string`                                                                                           | `undefined`        |
 | `dataMenuLanguage`     | `data-menu-language`      |             | `string`                                                                                           | `undefined`        |
 | `dataSearchTools`      | `data-search-tools`       |             | `DesktopLinks[] \| string`                                                                         | `undefined`        |
@@ -33,6 +34,7 @@
 ### Depends on
 
 - [hy-site-logo](site-logo)
+- [hy-menu-main-group](../hy-menu-main-group)
 - [hy-menu-language](../navigation/menu-language)
 - [hy-site-search](site-search)
 - [hy-icon](../icon)
@@ -43,11 +45,13 @@
 ```mermaid
 graph TD;
   hy-site-header --> hy-site-logo
+  hy-site-header --> hy-menu-main-group
   hy-site-header --> hy-menu-language
   hy-site-header --> hy-site-search
   hy-site-header --> hy-icon
   hy-site-header --> hy-desktop-menu-links
   hy-site-logo --> hy-icon
+  hy-menu-main-group --> hy-icon
   hy-menu-language --> hy-menu-language-item
   hy-menu-language --> hy-icon
   hy-site-search --> hy-icon

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

@@ -66,11 +66,25 @@
   display: flex;
   flex-flow: row;
   place-content: center space-between;
+  position: relative;
 
   @include breakpoint($narrow) {
     margin: 0 auto;
     max-width: $fullhd;
   }
+
+  &__main-menu-container {
+    color: var(--grayscale-white);
+  }
+
+  &__main-menu {
+    background-color: black;
+    color: white;
+    display: none;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
 }
 
 .hy-site-header__logo-container {

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

@@ -40,6 +40,7 @@ export class SiteHeader {
   First level menu links to be displayed on Desktop screens.
   * */
   @Prop() dataDesktopLinks: DesktopLinks[] | string;
+  @Prop() dataMainMenuLinks: DesktopLinks[] | string;
   @Prop() dataSearchTools: DesktopLinks[] | string;
 
   @State() isMobile: boolean;
@@ -225,6 +226,13 @@ export class SiteHeader {
                 <div class={'hy-site-header__logo-container'}>
                   <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
                 </div>
+
+                <hy-menu-main-group
+                  //className={'menu--secondary__item is-first'}
+                  is-mobile={false}
+                  data-main-menu={this.dataMainMenuLinks}
+                />
+
                 <div class={'menu--secondary'}>
                   <hy-menu-language
                     class={'menu--secondary__item is-first'}