feat(telekom-profile-menu): WIP (#2208)

* feat: Telekom user menu (WIP) * fix: js error when closing menu-flyout * removed TODOs * updated default URLs * cleaned up demo * added profile menu demo draft to storybook * storybook: added component * storybook: added missing attributes * storybook: added missing attributes * storybook: added missing attributes * default value for serviceLinks * debug service links * debug service links * added a11y labels: close menu, open (mobile) menu * added a11y labels: close menu, open (mobile) menu * storybook: added argsTable * storybook: added loggedIn-toggle to argsTable * storybook: added loggedIn-toggle to argsTable * storybook: added loggedIn-toggle to argsTable (undo removing props) * storybook: loggedIn default true * storybook: add profile menu as separate story * storybook: add profile menu as separate story - enable argsTable * storybook: add profile menu as separate story - replaced dummy component * storybook: add profile menu as separate story - style preview * storybook: add profile menu as separate story - style preview * storybook: add profile menu as separate story - style preview * storybook: add profile menu as separate story - hide args table * storybook: add profile menu as separate story - added component properties * storybook: add profile menu as separate story - separate logged in / logged out stories * storybook: add profile menu as separate story - increased preview height * storybook: added usage docs, removed and referenced profile menu from telekom-brand-header component * storybook: fix build * storybook: extended usage description * storybook: extended usage description * storybook: extended usage description * storybook: updated example code * storybook: prevent vertical flipping of menu-flyout-list in profile-menu * yarn lint & format * fix: code format * docs: updated profile-menu dependencies * fix: menu status condition * refactor: renamed component * refactor: renamed properties * refactor: renamed component folder * fix: display in storybook * fix(storybook): state changeable in canvas tab * fix(storybook): logout label in canvas tab after state change * fix: enable shadow dom * refactor: revert change of focus handling wehn closing menu-flyout * fix: checkmark size in loggedIn-badge * fix: trigger interaction state (remain black when activated) * fix: close menu with Escape * fix: checkmark size in loggedIn-badge (mobile-menu) * docs(storybook): added english properties, fixed service urls * docs(storybook): seperated german & english properties, fixed urls for logged-out view * fix: remove menu role from profile menu parents (so JAWS < 2023 does not ignore links in menu) * fix: remove aria-haspopup from profile menu trigger (so screenreaders do not imply menu role & navigation with arrow keys) * fix: changed demo's page lang to german (for correct screenreader output) * fix: remove HR elements from accessibility tree
telekom · Feb 8, 2024 · 41374f0 · 41374f0
1 parent 736a301
commit 41374f0
Show file tree

Hide file tree

Showing 34 changed files with 1,604 additions and 43 deletions.
diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx
@@ -49,6 +49,7 @@ export class Badge {
           aria-label={this.count ? this.getAriaLabel() : this.label}
         >
           <slot />
+          <slot name="dot" />
           <span
             aria-hidden="true"
             part={cx(`circle`, this.count ? `has-count` : 'no-count')}

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

diff --git a/packages/components/src/components/button/readme.md b/packages/components/src/components/button/readme.md
@@ -45,13 +45,15 @@ Type: `Promise<void>`
  - [app-navigation-user-menu](../telekom/app-navigation-user-menu)
  - [scale-data-grid](../data-grid)
  - [scale-notification](../notification)
+ - [telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   app-navigation-user-menu --> scale-button
   scale-data-grid --> scale-button
   scale-notification --> scale-button
+  telekom-profile-menu --> scale-button
   style scale-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/components/src/components/link/readme.md b/packages/components/src/components/link/readme.md
@@ -108,13 +108,15 @@ Type: `Promise<void>`
  - [scale-data-grid](../data-grid)
  - [scale-notification-banner](../notification-banner)
  - [scale-notification-toast](../notification-toast)
+ - [telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-data-grid --> scale-link
   scale-notification-banner --> scale-link
   scale-notification-toast --> scale-link
+  telekom-profile-menu --> scale-link
   style scale-link fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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
@@ -59,6 +59,11 @@ export class MenuFlyoutList {
   @Prop() brandHeaderDropdown: boolean = false;
   /** (optional) Injected styles */
   @Prop() styles?: string;
+  /** (optional) set to true to prevent flipping orientation when off the screen vertically  */
+  @Prop() preventFlipVertical: boolean = false;
+
+  /** (optional) override to set a custom role */
+  @Prop() role? = "menu";
 
   /** Event triggered when menu list opened */
   @Event({ eventName: 'scale-open' }) scaleOpen: EventEmitter<{
@@ -282,7 +287,7 @@ export class MenuFlyoutList {
 
   updateTriggerAttributes() {
     const trigger = this.trigger();
-    if (trigger && trigger.getAttribute('aria-haspopup') === 'true') {
+    if (trigger && trigger.getAttribute('aria-haspopup') === 'true' || trigger.getAttribute('class') === 'scale-menu-trigger') {
       trigger.setAttribute('aria-expanded', String(this.opened));
     }
   }
@@ -341,14 +346,14 @@ export class MenuFlyoutList {
     if (rect.top < PAD) {
       // console.log('off top edge');
       isOutOfBounds = true;
-      if (this.direction.includes('top')) {
+      if (this.direction.includes('top') && !this.preventFlipVertical) {
         this.flipVertical = true;
       }
     }
     if (rect.bottom > this.windowHeight - PAD) {
       // console.log('off bottom edge');
       isOutOfBounds = true;
-      if (this.direction.includes('bottom')) {
+      if (this.direction.includes('bottom') && !this.preventFlipVertical) {
         this.flipVertical = true;
       }
     }
@@ -467,7 +472,7 @@ export class MenuFlyoutList {
 
   render() {
     return (
-      <Host role="menu">
+      <Host role={this.role} class="scale-menu">
         {this.styles && <style>{this.styles}</style>}
         <div
           class={this.getCssClassMap()}

diff --git a/packages/components/src/components/menu-flyout-list/readme.md b/packages/components/src/components/menu-flyout-list/readme.md
@@ -7,15 +7,16 @@
 
 ## Properties
 
-| Property              | Attribute               | Description                                                                        | Type                                                                                | Default          |
-| --------------------- | ----------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
-| `active`              | `active`                |                                                                                    | `boolean`                                                                           | `false`          |
-| `brandHeaderDropdown` | `brand-header-dropdown` | (optional) set to true when using in telekom-brand-header                          | `boolean`                                                                           | `false`          |
-| `closeOnSelect`       | `close-on-select`       | (optional) Determines whether the flyout should close when a menu item is selected | `boolean`                                                                           | `true`           |
-| `direction`           | `direction`             | (optional) Set preference for where the menu appears, space permitting             | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
-| `opened`              | `opened`                |                                                                                    | `boolean`                                                                           | `false`          |
-| `styles`              | `styles`                | (optional) Injected styles                                                         | `string`                                                                            | `undefined`      |
-| `trigger`             | --                      |                                                                                    | `() => HTMLElement`                                                                 | `undefined`      |
+| Property              | Attribute               | Description                                                                           | Type                                                                                | Default          |
+| --------------------- | ----------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
+| `active`              | `active`                |                                                                                       | `boolean`                                                                           | `false`          |
+| `brandHeaderDropdown` | `brand-header-dropdown` | (optional) set to true when using in telekom-brand-header                             | `boolean`                                                                           | `false`          |
+| `closeOnSelect`       | `close-on-select`       | (optional) Determines whether the flyout should close when a menu item is selected    | `boolean`                                                                           | `true`           |
+| `direction`           | `direction`             | (optional) Set preference for where the menu appears, space permitting                | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
+| `opened`              | `opened`                |                                                                                       | `boolean`                                                                           | `false`          |
+| `preventFlipVertical` | `prevent-flip-vertical` | (optional) set to true to prevent flipping orientation when off the screen vertically | `boolean`                                                                           | `false`          |
+| `styles`              | `styles`                | (optional) Injected styles                                                            | `string`                                                                            | `undefined`      |
+| `trigger`             | --                      |                                                                                       | `() => HTMLElement`                                                                 | `undefined`      |
 
 
 ## Events
@@ -75,13 +76,15 @@ Type: `Promise<void>`
  - [scale-app-header](../telekom/app-header)
  - [scale-data-grid](../data-grid)
  - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
+ - [telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-app-header --> scale-menu-flyout-list
   scale-data-grid --> scale-menu-flyout-list
   scale-telekom-header-data-back-compat --> scale-menu-flyout-list
+  telekom-profile-menu --> 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
@@ -12,7 +12,7 @@
 import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';
 import { isClickOutside } from '../../utils/utils';
 
-const MENU_SELECTOR = '[role="menu"]';
+const MENU_SELECTOR = '.scale-menu';
 
 const isButtonOrLink = (el: HTMLElement) => {
   if (
@@ -34,6 +34,8 @@ export class MenuFlyout {
 
   /** (optional) Determines whether the flyout should close when a menu item is selected */
   @Prop() closeOnSelect = true;
+  /** (optional) Determines whether the flyout trigger should get the aria-haspopup attribute */
+  @Prop() hasPopup = true;
   /** (optional) Set preference for where the menu appears, space permitting */
   @Prop() direction:
     | 'bottom-right'
@@ -152,7 +154,14 @@ export class MenuFlyout {
       .concat([isButtonOrLink(this.trigger)])
       .filter((x) => x != null);
     triggers.forEach((el) => {
-      el.setAttribute('aria-haspopup', 'true');
+
+      if(this.hasPopup) {
+        el.setAttribute('aria-haspopup', 'true');
+      }
+
+      el.setAttribute('class', 'scale-menu-trigger');
+
+
       el.setAttribute('aria-expanded', 'false');
     });
   }

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

diff --git a/...s/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx b/...s/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx
@@ -29,6 +29,7 @@ export class AppNavigationUserMenu {
   @Element() hostElement: HTMLElement;
   @Prop() hide: () => void;
   @Prop() navigation: any;
+  @Prop() styles: string;
   @Event({
     eventName: 'closeMenu',
     composed: true,
@@ -40,7 +41,10 @@ export class AppNavigationUserMenu {
   render() {
     return (
       <Host>
+        {this.styles && <style>{this.styles}</style>}
         <div class="app-navigation-user-menu">
+          <slot />
+
           {this.navigation.map((item) => {
             if (item.type === 'divider') {
               return (
@@ -53,7 +57,10 @@ export class AppNavigationUserMenu {
 
             if (item.type === 'userInfo') {
               return (
-                <div class="app-navigation-user-menu__user-info">
+                <div
+                  class="app-navigation-user-menu__user-info"
+                  part="userInfo"
+                >
                   <div class="app-navigation-user-menu__user-info--name scl-font-variant-heading-4">
                     {item.name}
                   </div>
@@ -71,6 +78,7 @@ export class AppNavigationUserMenu {
                   target={item.target || '_self'}
                   tabindex={0}
                   class="app-navigation-user-menu__item"
+                  part="item"
                   onClick={(e) => {
                     e.stopImmediatePropagation();
                     if (item.onClick) {
@@ -117,6 +125,7 @@ export class AppNavigationUserMenu {
               return (
                 <scale-button
                   class="app-navigation-user-menu__button"
+                  part="button"
                   onClick={(e) => {
                     if (item.onClick) {
                       item.onClick(e);

diff --git a/packages/components/src/components/telekom/app-navigation-user-menu/readme.md b/packages/components/src/components/telekom/app-navigation-user-menu/readme.md
@@ -11,6 +11,7 @@
 | ------------ | ------------ | ----------- | ------------ | ----------- |
 | `hide`       | --           |             | `() => void` | `undefined` |
 | `navigation` | `navigation` |             | `any`        | `undefined` |
+| `styles`     | `styles`     |             | `string`     | `undefined` |
 
 
 ## Events
@@ -24,7 +25,10 @@
 
 | Part                | Description |
 | ------------------- | ----------- |
+| `"button"`          |             |
+| `"item"`            |             |
 | `"rule-horizontal"` |             |
+| `"userinfo"`        |             |
 
 
 ## Dependencies
@@ -33,6 +37,7 @@
 
  - [scale-app-header](../app-header)
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [telekom-profile-menu](../telekom-profile-menu)
 
 ### Depends on
 
@@ -46,6 +51,7 @@ graph TD;
   app-navigation-user-menu --> scale-icon
   scale-app-header --> app-navigation-user-menu
   scale-telekom-header-data-back-compat --> app-navigation-user-menu
+  telekom-profile-menu --> app-navigation-user-menu
   style app-navigation-user-menu fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/components/src/components/telekom/logo/readme.md b/packages/components/src/components/telekom/logo/readme.md
@@ -1,7 +1,7 @@
-# scale-logo
-
-
-
+# scale-logo
+
+
+
 <!-- Auto Generated Below -->
 
 

diff --git a/.../components/src/components/telekom/telekom-footer-extended-navigation/readme.md b/.../components/src/components/telekom/telekom-footer-extended-navigation/readme.md
@@ -1,7 +1,7 @@
-# scale-telekom-footer-extended-navigation-column
-
-
-
+# scale-telekom-footer-extended-navigation-column
+
+
+
 <!-- Auto Generated Below -->
 
 

diff --git a/packages/components/src/components/telekom/telekom-footer/readme.md b/packages/components/src/components/telekom/telekom-footer/readme.md
@@ -1,7 +1,7 @@
-# scale-telekom-footer
-
-
-
+# scale-telekom-footer
+
+
+
 <!-- Auto Generated Below -->
 
 

diff --git a/packages/components/src/components/telekom/telekom-mega-menu/readme.md b/packages/components/src/components/telekom/telekom-mega-menu/readme.md
@@ -1,7 +1,7 @@
-# scale-telekom-mega-menu-column
-
-
-
+# scale-telekom-mega-menu-column
+
+
+
 <!-- Auto Generated Below -->
 
 

diff --git a/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md b/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md
@@ -40,6 +40,7 @@
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [telekom-profile-menu](../telekom-profile-menu)
 
 ### Depends on
 
@@ -50,6 +51,7 @@
 graph TD;
   scale-telekom-mobile-flyout-canvas --> scale-icon-action-close
   scale-telekom-header-data-back-compat --> scale-telekom-mobile-flyout-canvas
+  telekom-profile-menu --> scale-telekom-mobile-flyout-canvas
   style scale-telekom-mobile-flyout-canvas fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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

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

diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
@@ -356,6 +356,11 @@
   width: 20px;
 }
 
+.scale-telekom-nav-list[variant='functions'] [slot='dot'] .scale-icon {
+  height: 12px;
+  width: 12px;
+}
+
 @media screen and (--2xl) {
   .scale-telekom-nav-list[variant='functions'] .scale-icon {
     height: 24px;