feat(header): user menu

telekom · Oct 28, 2021 · 741acaa · 741acaa
1 parent 29a3a8b
commit 741acaa
Show file tree

Hide file tree

Showing 32 changed files with 569 additions and 36 deletions.
diff --git a/packages/components/src/components/button/readme.md b/packages/components/src/components/button/readme.md
@@ -26,11 +26,13 @@
 
 ### Used by
 
+ - [app-navigation-user-menu](../telekom/app-navigation-user-menu)
  - [scale-data-grid](../data-grid)
 
 ### Graph
 ```mermaid
 graph TD;
+  app-navigation-user-menu --> scale-button
   scale-data-grid --> scale-button
   style scale-button fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/packages/components/src/components/icon/readme.md b/packages/components/src/components/icon/readme.md
@@ -23,6 +23,7 @@
 
 ### Used by
 
+ - [app-navigation-user-menu](../telekom/app-navigation-user-menu)
  - [scale-app-footer](../telekom/app-footer)
  - [scale-data-grid](../data-grid)
  - [scale-input](../input)
@@ -31,6 +32,7 @@
 ### Graph
 ```mermaid
 graph TD;
+  app-navigation-user-menu --> scale-icon
   scale-app-footer --> scale-icon
   scale-data-grid --> scale-icon
   scale-input --> scale-icon

diff --git a/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx b/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx
@@ -23,7 +23,7 @@ import {
   Watch,
 } from '@stencil/core';
 import classNames from 'classnames';
-import { emitEvent, isClickOutside } from '../../utils/utils';
+import { emitEvent } from '../../utils/utils';
 
 const PAD = 10;
 const ITEM_ROLES = ['menuitem', 'menuitemcheckbox', 'menuitemradio'];
@@ -183,13 +183,6 @@ export class MenuFlyoutList {
     }
   }
 
-  @Listen('click', { target: 'document', capture: true })
-  handleDocumentClick(event: MouseEvent) {
-    if (isClickOutside(event, this.hostElement) && this.opened) {
-      this.close(true);
-    }
-  }
-
   /**
    * Focus newly selected item
    */

diff --git a/packages/components/src/components/menu-flyout-list/readme.md b/packages/components/src/components/menu-flyout-list/readme.md
@@ -71,11 +71,13 @@ Type: `Promise<void>`
 
 ### Used by
 
+ - [scale-app-header](../telekom/app-header)
  - [scale-data-grid](../data-grid)
 
 ### Graph
 ```mermaid
 graph TD;
+  scale-app-header --> scale-menu-flyout-list
   scale-data-grid --> scale-menu-flyout-list
   style scale-menu-flyout-list fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/packages/components/src/components/menu-flyout/menu-flyout.tsx b/packages/components/src/components/menu-flyout/menu-flyout.tsx
@@ -10,7 +10,6 @@
  */
 
 import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';
-import statusNote from '../../utils/status-note';
 import { isClickOutside } from '../../utils/utils';
 
 const MENU_SELECTOR = '[role="menu"]';
@@ -95,10 +94,6 @@ export class MenuFlyout {
     }
   }
 
-  connectedCallback() {
-    statusNote({ source: this.hostElement, tag: 'beta' });
-  }
-
   componentDidLoad() {
     const triggerSlot = this.hostElement.querySelector(
       '[slot="trigger"]'

diff --git a/packages/components/src/components/menu-flyout/readme.md b/packages/components/src/components/menu-flyout/readme.md
@@ -25,11 +25,13 @@
 
 ### Used by
 
+ - [scale-app-header](../telekom/app-header)
  - [scale-data-grid](../data-grid)
 
 ### Graph
 ```mermaid
 graph TD;
+  scale-app-header --> scale-menu-flyout
   scale-data-grid --> scale-menu-flyout
   style scale-menu-flyout fill:#f9f,stroke:#333,stroke-width:4px
 ```

diff --git a/packages/components/src/components/telekom/app-header/__snapshots__/app-header.spec.ts.snap b/packages/components/src/components/telekom/app-header/__snapshots__/app-header.spec.ts.snap
@@ -51,6 +51,9 @@ exports[`app-Header snapshots hasSlots 1`] = `
       <nav aria-label="main" class="header__nav__mobile-menu">
         <div slot="menu-mobile"></div>
       </nav>
+      <nav aria-label="main" class="header__nav__mobile-menu">
+        <div></div>
+      </nav>
     </div>
   </header>
 </scale-app-header>
@@ -99,6 +102,9 @@ exports[`app-Header snapshots smoke test 1`] = `
           <app-navigation-main-mobile></app-navigation-main-mobile>
         </div>
       </nav>
+      <nav aria-label="main" class="header__nav__mobile-menu">
+        <div></div>
+      </nav>
     </div>
   </header>
 </scale-app-header>

diff --git a/packages/components/src/components/telekom/app-header/app-header.css b/packages/components/src/components/telekom/app-header/app-header.css
@@ -42,11 +42,26 @@ scale-app-header {
   height: 128px;
 }
 
+.header__user-menu--desktop {
+  display: block;
+}
+
+.header__user-menu--mobile {
+  display: none;
+}
+
 @media (max-width: 1023px) {
   .header__container {
     width: 100%;
     height: 66px;
   }
+  .header__user-menu--desktop {
+    display: none;
+  }
+
+  .header__user-menu--mobile {
+    display: block;
+  }
 }
 
 .header {
@@ -120,6 +135,8 @@ scale-app-header {
   padding: 0;
   list-style: none;
   align-items: center;
+  margin-block-start: 0;
+  margin-block-end: 0;
 }
 @media (max-width: 1023px) {
   .header {

diff --git a/packages/components/src/components/telekom/app-header/app-header.tsx b/packages/components/src/components/telekom/app-header/app-header.tsx
@@ -43,13 +43,16 @@ const readData = (data) => {
 export class Header {
   @Element() hostElement: HTMLStencilElement;
   mobileMenuToggle?: HTMLAnchorElement;
+  userMenuToggle?: HTMLAnchorElement;
+  userMenuMobileToggle?: HTMLAnchorElement;
   @Prop() logoHref?: string;
   @Prop() logoTitle?: string;
   @Prop() logoClick?: any;
   @Prop() claimLang: string;
   @Prop() portalName?: string = '';
   @Prop() mainNavigation?: any = [];
   @Prop() iconNavigation?: any = [];
+  @Prop() userNavigation?: any = [];
   @Prop() sectorNavigation?: any = [];
   @Prop() addonNavigation?: any = [];
   @Prop() activeRouteId: string;
@@ -65,6 +68,8 @@ export class Header {
       ({ id }) => id === this.activeSectorId
     ) || readData(this.sectorNavigation)[0];
   @State() mobileMenu: boolean = false;
+  @State() userMenu: boolean = false;
+  @State() userMenuMobile: boolean = false;
   @State() visibleMegaMenu: string = '';
   @State() scrolled: boolean = false;
 
@@ -98,6 +103,17 @@ export class Header {
     this.mobileMenu = false;
   }
 
+  @Listen('scale-close')
+  handleCloseUserMenu() {
+    this.userMenuToggle.focus();
+    this.userMenu = false;
+  }
+
+  @Listen('scale-open')
+  handleOpenUserMenu() {
+    this.userMenu = true;
+  }
+
   @Watch('activeSectorId')
   handleActiveSegment(newValue) {
     this.activeSegment =
@@ -182,6 +198,7 @@ export class Header {
         return;
       }
     }
+    this.userMenuMobile = false;
     this.mobileMenu = !this.mobileMenu;
   }
 
@@ -258,6 +275,13 @@ export class Header {
     const { defaultName, openedName } = readData(this.iconNavigation).find(
       ({ id }) => id === 'menu'
     ) || { defaultName: 'Menu', openedName: 'Close' };
+    const { shortName = 'Login', openedShortName = 'Close' } = readData(
+      this.userNavigation
+    ).find(({ type }) => type === 'userInfo') || {
+      shortName: 'Login',
+      openedShortName: 'Close',
+    };
+
     return (
       <ul class="meta-navigation">
         {this.hasSlotMenuIcon ? (
@@ -279,6 +303,51 @@ export class Header {
               </scale-nav-icon>
             ))
         )}
+
+        {readData(this.userNavigation).length > 0 && (
+          <span>
+            <span class="header__user-menu--desktop">
+              <scale-menu-flyout>
+                <scale-nav-icon
+                  slot="trigger"
+                  active={this.userMenu}
+                  icon={'user-file-user'}
+                  refUserMenuToggle={(el) => (this.userMenuToggle = el)}
+                >
+                  {shortName}
+                </scale-nav-icon>
+                <scale-menu-flyout-list>
+                  <app-navigation-user-menu
+                    hide={() => {
+                      this.userMenu = false;
+                      this.userMenuToggle.focus();
+                    }}
+                    navigation={readData(this.userNavigation)}
+                  ></app-navigation-user-menu>
+                </scale-menu-flyout-list>
+              </scale-menu-flyout>
+            </span>
+            <span class="header__user-menu--mobile">
+              <scale-nav-icon
+                slot="trigger"
+                active={this.userMenuMobile}
+                icon={
+                  this.userMenuMobile ? 'action-circle-close' : 'user-file-user'
+                }
+                refMobileUserMenuToggle={(el) =>
+                  (this.userMenuMobileToggle = el)
+                }
+                clickLink={() => {
+                  this.mobileMenu = false;
+                  this.userMenuMobile = !this.userMenuMobile;
+                }}
+              >
+                {this.userMenuMobile ? openedShortName : shortName}
+              </scale-nav-icon>
+            </span>
+          </span>
+        )}
+
         {(readData(this.mainNavigation).length > 0 ||
           this.hasSlotMenuMobile) && (
           <scale-nav-icon
@@ -419,6 +488,24 @@ export class Header {
                 </div>
               )}
             </nav>
+            <nav
+              class={`header__nav__mobile-menu${
+                this.userMenuMobile ? ' header__nav__mobile-menu--opened' : ''
+              }`}
+              aria-label="main"
+            >
+              <div>
+                {this.userMenuMobile && (
+                  <app-navigation-user-menu
+                    hide={() => {
+                      this.userMenuMobile = false;
+                      this.userMenuMobileToggle.focus();
+                    }}
+                    navigation={readData(this.userNavigation)}
+                  ></app-navigation-user-menu>
+                )}
+              </div>
+            </nav>
           </div>
         </header>
       </Host>
@@ -429,7 +516,8 @@ export class Header {
     return classNames(
       'header',
       this.scrolled && 'header--sticky',
-      (this.visibleMegaMenu || this.mobileMenu) && 'menu--open'
+      (this.visibleMegaMenu || this.mobileMenu || this.userMenuMobile) &&
+        'menu--open'
     );
   }
 }
diff --git a/packages/components/src/components/telekom/app-header/readme.md b/packages/components/src/components/telekom/app-header/readme.md
@@ -24,6 +24,7 @@
 | `mobileMenuVisible`   | `mobile-menu-visible`    |             | `boolean` | `false`     |
 | `portalName`          | `portal-name`            |             | `string`  | `''`        |
 | `sectorNavigation`    | `sector-navigation`      |             | `any`     | `[]`        |
+| `userNavigation`      | `user-navigation`        |             | `any`     | `[]`        |
 
 
 ## Dependencies
@@ -37,6 +38,9 @@
 - [scale-nav-main](../nav-main)
 - [app-mega-menu](../app-mega-menu)
 - [scale-nav-icon](../nav-icon)
+- [scale-menu-flyout](../../menu-flyout)
+- [scale-menu-flyout-list](../../menu-flyout-list)
+- [app-navigation-user-menu](../app-navigation-user-menu)
 - [scale-nav-segment](../nav-segment)
 - [app-logo](../app-logo)
 - [app-navigation-sector-mobile](../app-navigation-sector-mobile)
@@ -48,11 +52,16 @@ graph TD;
   scale-app-header --> scale-nav-main
   scale-app-header --> app-mega-menu
   scale-app-header --> scale-nav-icon
+  scale-app-header --> scale-menu-flyout
+  scale-app-header --> scale-menu-flyout-list
+  scale-app-header --> app-navigation-user-menu
   scale-app-header --> scale-nav-segment
   scale-app-header --> app-logo
   scale-app-header --> app-navigation-sector-mobile
   scale-app-header --> app-navigation-main-mobile
   scale-nav-icon --> scale-icon
+  app-navigation-user-menu --> scale-button
+  app-navigation-user-menu --> scale-icon
   app-navigation-main-mobile --> scale-icon-navigation-left
   app-navigation-main-mobile --> scale-icon-navigation-right
   scale-app-shell --> scale-app-header