feat(core/map-navigation): overlay can be configured via slot attribu…

…te (#133)
siemens · Nov 15, 2022 · be58975 · be58975
1 parent 0cafe03
commit be58975
Show file tree

Hide file tree

Showing 22 changed files with 289 additions and 35 deletions.
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -73,7 +73,7 @@ import { Toast } from 'src/preview-examples/toast';
 import { ToastCustom } from 'src/preview-examples/toast-custom';
 import { Toggle } from 'src/preview-examples/toggle';
 import { ToggleColor } from 'src/preview-examples/toggle-color';
-import { ToggleCustomDisabled } from 'src/preview-examples/toggle-custom-disable';
+import { ToggleCustomDisabled } from 'src/preview-examples/toggle-disabled';
 import { ToggleCustomLabel } from 'src/preview-examples/toggle-custom-label';
 import { Tree } from 'src/preview-examples/tree';
 import { TreeCustom } from 'src/preview-examples/tree-custom';
@@ -84,6 +84,7 @@ import { VerticalTabsWithAvatar } from 'src/preview-examples/vertical-tabs-with-
 import { Workflow } from 'src/preview-examples/workflow';
 import { WorkflowVertical } from 'src/preview-examples/workflow-vertical';
 import { NavigationTestComponent } from './components/navigation-test.component';
+import { MapNavigationOverlay } from 'src/preview-examples/map-navigation-overlay';
 
 const routes: Routes = [
   {
@@ -252,7 +253,7 @@ const routes: Routes = [
       { path: 'tile', component: Tile },
       { path: 'timepicker', component: Timepicker },
       { path: 'toggle-color', component: ToggleColor },
-      { path: 'toggle-custom-disabled', component: ToggleCustomDisabled },
+      { path: 'toggle-disabled', component: ToggleCustomDisabled },
       { path: 'toggle-custom-label', component: ToggleCustomLabel },
       { path: 'toggle', component: Toggle },
       { path: 'upload', component: Upload },
@@ -262,6 +263,7 @@ const routes: Routes = [
       { path: 'workflow', component: Workflow },
       { path: 'workflow-vertical', component: WorkflowVertical },
       { path: 'map-navigation', component: MapNavigation },
+      { path: 'map-navigation-overlay', component: MapNavigationOverlay },
     ],
   },
 ];

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -57,6 +57,7 @@ import { InputReadonly } from 'src/preview-examples/input-readonly';
 import { InputWithIcon } from 'src/preview-examples/input-with-icon';
 import { Kpi } from 'src/preview-examples/kpi';
 import { MapNavigation } from 'src/preview-examples/map-navigation';
+import { MapNavigationOverlay } from 'src/preview-examples/map-navigation-overlay';
 import { MessageBar } from 'src/preview-examples/message-bar';
 import { Modal } from 'src/preview-examples/modal';
 import { Pill } from 'src/preview-examples/pill';
@@ -81,7 +82,7 @@ import { Toast } from 'src/preview-examples/toast';
 import { ToastCustom } from 'src/preview-examples/toast-custom';
 import { Toggle } from 'src/preview-examples/toggle';
 import { ToggleColor } from 'src/preview-examples/toggle-color';
-import { ToggleCustomDisabled } from 'src/preview-examples/toggle-custom-disable';
+import { ToggleCustomDisabled } from 'src/preview-examples/toggle-disabled';
 import { ToggleCustomLabel } from 'src/preview-examples/toggle-custom-label';
 import { Tree } from 'src/preview-examples/tree';
 import { TreeCustom } from 'src/preview-examples/tree-custom';
@@ -169,6 +170,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     Workflow,
     WorkflowVertical,
     MapNavigation,
+    MapNavigationOverlay,
     TabsRounded,
     DatepickerRange,
   ],

diff --git a/packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts b/packages/angular-test-app/src/preview-examples/map-navigation-overlay.ts
@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-map-navigation-overlay',
+  template: `
+    <ix-map-navigation
+      application-name="Test Application"
+      navigation-title="Some other content"
+    >
+      <ix-icon name="rocket" slot="logo"></ix-icon>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+        <ix-menu-item>Item 3</ix-menu-item>
+      </ix-menu>
+      <div slot="sidebar-content">Sidebar content</div>
+      <ix-button (click)="showOverlay = true">Show overlay</ix-button>
+      <ix-map-navigation-overlay
+        *ngIf="showOverlay"
+        name="Custom overlay title"
+        icon="bulb"
+        slot="overlay"
+        (closeClick)="showOverlay = false"
+      ></ix-map-navigation-overlay>
+    </ix-map-navigation>
+  `,
+})
+export class MapNavigationOverlay {
+  showOverlay = true;
+}
diff --git a/...preview-examples/toggle-custom-disable.ts → ...p/src/preview-examples/toggle-disabled.ts b/...preview-examples/toggle-custom-disable.ts → ...p/src/preview-examples/toggle-disabled.ts
@@ -10,7 +10,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-toggle-custom-disabled',
+  selector: 'app-toggle-disabled',
   template: ` <ix-toggle disabled></ix-toggle> `,
 })
 export class ToggleCustomDisabled {}
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -4376,7 +4376,13 @@
           "signature": "closeOverlay() => Promise<void>",
           "parameters": [],
           "docs": "Close current shown overlay",
-          "docsTags": []
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "will get removed with next major release in favor of slot based approach"
+            }
+          ],
+          "deprecation": "will get removed with next major release in favor of slot based approach"
         },
         {
           "name": "openOverlay",
@@ -4388,6 +4394,10 @@
           "parameters": [],
           "docs": "Open a overlay inside content area",
           "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "will get removed with next major release in favor of slot based approach"
+            },
             {
               "name": "param",
               "text": "name"
@@ -4404,7 +4414,8 @@
               "name": "param",
               "text": "color"
             }
-          ]
+          ],
+          "deprecation": "will get removed with next major release in favor of slot based approach"
         }
       ],
       "events": [

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -704,6 +704,7 @@ export namespace Components {
         "applicationName": string;
         /**
           * Close current shown overlay
+          * @deprecated will get removed with next major release in favor of slot based approach
          */
         "closeOverlay": () => Promise<void>;
         /**
@@ -716,6 +717,7 @@ export namespace Components {
         "navigationTitle": string;
         /**
           * Open a overlay inside content area
+          * @deprecated will get removed with next major release in favor of slot based approach
           * @param name
           * @param component
           * @param icon

diff --git a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
@@ -16,6 +16,7 @@
   width: 100%;
   height: 100%;
   z-index: 2;
+  top: 0;
 
   background-color: var(--theme-overlay--background);
 

diff --git a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
@@ -7,14 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+} from '@stencil/core';
+import anime from 'animejs';
 
 @Component({
   tag: 'ix-map-navigation-overlay',
   styleUrl: 'map-navigation-overlay.scss',
   scoped: true,
 })
 export class MapNavigationOverlay {
+  private static readonly slowTime = 500;
+
+  @Element() hostElement: HTMLIxMapNavigationOverlayElement;
+
   /**
    * Title of overlay
    */
@@ -35,6 +48,31 @@ export class MapNavigationOverlay {
    */
   @Event() closeClick: EventEmitter;
 
+  componentWillLoad() {
+    anime({
+      targets: this.hostElement,
+      duration: MapNavigationOverlay.slowTime,
+      backdropFilter: [0, 'blur(1rem)'],
+      translateX: ['-4rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+    });
+  }
+
+  private closeOverlay() {
+    anime({
+      targets: this.hostElement,
+      duration: MapNavigationOverlay.slowTime,
+      backdropFilter: ['blur(1rem)', 0],
+      translateX: [0, '-4rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        this.closeClick.emit();
+      },
+    });
+  }
+
   render() {
     return (
       <Host>
@@ -61,7 +99,7 @@ export class MapNavigationOverlay {
             invisible
             icon="close"
             size="24"
-            onClick={() => this.closeClick.emit()}
+            onClick={() => this.closeOverlay()}
           ></ix-icon-button>
         </div>
 

diff --git a/packages/core/src/components/map-navigation-overlay/test/basic/index.html b/packages/core/src/components/map-navigation-overlay/test/basic/index.html
@@ -0,0 +1,24 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <ix-map-navigation>
+      <ix-map-navigation-overlay name="Title" icon="bulb" color="color-info">
+        Lorem ipsum
+      </ix-map-navigation-overlay>
+    </ix-map-navigation>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts b/packages/core/src/components/map-navigation-overlay/test/map-navigation.e2e.ts
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect } from '@playwright/test';
+import { regressionTest } from '@utils/test';
+
+regressionTest.describe('map-navigation-overlay', () => {
+  regressionTest('basic', async ({ page }) => {
+    await page.goto(`map-navigation-overlay/test/basic`);
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
diff --git a/...napshots/map-navigation-overlay-basic-1-chromium---theme-classic-dark-linux.png b/...napshots/map-navigation-overlay-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...apshots/map-navigation-overlay-basic-1-chromium---theme-classic-light-linux.png b/...apshots/map-navigation-overlay-basic-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/components/map-navigation/map-navigation.scss b/packages/core/src/components/map-navigation/map-navigation.scss
@@ -126,12 +126,4 @@
     overflow: hidden;
     z-index: calc(var(--theme-z-index-sticky) - 1);
   }
-
-  #overlay {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    z-index: calc(#{var(--theme-z-index-sticky)} + 1);
-  }
 }
diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx
@@ -8,15 +8,15 @@
  */
 
 import {
-    Component,
-    Element,
-    Event,
-    EventEmitter,
-    h,
-    Host,
-    Method,
-    Prop,
-    State
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
 } from '@stencil/core';
 import anime from 'animejs';
 
@@ -48,7 +48,6 @@ export class MapNavigation {
 
   @State() isSidebarOpen = true;
 
-
   /**
    * Navigation toggled
    */
@@ -81,7 +80,6 @@ export class MapNavigation {
 
   componentDidRender() {
     this.appendMenu();
-    // this.openOverlay('Test', document.createElement('ix-breadcrumb'), 'info', 'color-warning');
     this.closeOverlay();
   }
 
@@ -142,6 +140,7 @@ export class MapNavigation {
 
   /**
    * Open a overlay inside content area
+   * @deprecated will get removed with next major release in favor of slot based approach
    *
    * @param name
    * @param component
@@ -178,6 +177,7 @@ export class MapNavigation {
 
   /**
    * Close current shown overlay
+   * @deprecated will get removed with next major release in favor of slot based approach
    */
   @Method()
   async closeOverlay() {
@@ -189,6 +189,9 @@ export class MapNavigation {
       opacity: [1, 0],
       easing: 'easeInSine',
       complete: () => {
+        if (!this.overlay) {
+          return;
+        }
         this.overlay.firstChild?.remove();
         this.overlay.classList.add('d-none');
       },
@@ -236,7 +239,6 @@ export class MapNavigation {
             <main>
               <slot></slot>
             </main>
-            <div id="overlay"></div>
           </div>
         </div>
       </Host>

diff --git a/packages/core/src/components/map-navigation/readme.md b/packages/core/src/components/map-navigation/readme.md
@@ -30,7 +30,7 @@ SPDX-License-Identifier: MIT
 
 ### `closeOverlay() => Promise<void>`
 
-Close current shown overlay
+<span style="color:red">**[DEPRECATED]**</span> will get removed with next major release in favor of slot based approach<br/><br/>Close current shown overlay
 
 #### Returns
 
@@ -40,7 +40,7 @@ Type: `Promise<void>`
 
 ### `openOverlay(name: string, component: HTMLElement, icon?: string, color?: string) => Promise<void>`
 
-Open a overlay inside content area
+<span style="color:red">**[DEPRECATED]**</span> will get removed with next major release in favor of slot based approach<br/><br/>Open a overlay inside content area
 
 #### Returns