From 3124205e89f7ff01bbfe72b6314e486c160c037b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 25 Sep 2023 08:25:39 +0200
Subject: [PATCH] chore(internet-header): some typos, types and simplification
 in code (#1839)

Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
---
 packages/internet-header/package.json         |  1 +
 packages/internet-header/src/components.d.ts  |  4 +-
 .../post-internet-breadcrumbs.tsx             | 20 ++++++----
 .../post-internet-header.tsx                  | 38 +++++++++----------
 .../components/post-search/post-search.tsx    |  4 ++
 pnpm-lock.yaml                                |  7 ++++
 6 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
index a1ff8cd98d..c58ed8dd40 100644
--- a/packages/internet-header/package.json
+++ b/packages/internet-header/package.json
@@ -59,6 +59,7 @@
     "@percy/cypress": "3.1.2",
     "@stencil/eslint-plugin": "0.4.0",
     "@stencil/sass": "3.0.5",
+    "@types/body-scroll-lock": "3.1.0",
     "@types/iframe-resizer": "3.5.9",
     "@types/jest": "27.5.2",
     "@types/jquery": "3.5.19",
diff --git a/packages/internet-header/src/components.d.ts b/packages/internet-header/src/components.d.ts
index a15b739486..3a11d311fe 100644
--- a/packages/internet-header/src/components.d.ts
+++ b/packages/internet-header/src/components.d.ts
@@ -112,7 +112,7 @@ export namespace Components {
          */
         "languageLocalStorageKey"?: string;
         /**
-          * Override the language switch links with custom URLs. Helpful when your application contains sub-pages and you would like to stay on subpages when the user changes language.
+          * Override the language switch links with custom URLs. Helpful when your application contains sub-pages, and you would like to stay on subpages when the user changes language.
          */
         "languageSwitchOverrides"?: string | IAvailableLanguage[];
         /**
@@ -297,7 +297,7 @@ declare namespace LocalJSX {
          */
         "languageLocalStorageKey"?: string;
         /**
-          * Override the language switch links with custom URLs. Helpful when your application contains sub-pages and you would like to stay on subpages when the user changes language.
+          * Override the language switch links with custom URLs. Helpful when your application contains sub-pages, and you would like to stay on subpages when the user changes language.
          */
         "languageSwitchOverrides"?: string | IAvailableLanguage[];
         /**
diff --git a/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx b/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx
index 261e831a22..0a005e48ee 100644
--- a/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx
+++ b/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx
@@ -1,11 +1,11 @@
-import { Component, Host, h, Prop, State, Element, Watch } from '@stencil/core';
+import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 import { debounce } from 'throttle-debounce';
-import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import { SvgIcon } from '../../utils/svg-icon.component';
 import { state } from '../../data/store';
 import { OverlayComponent } from './components/overlay.component';
-import iframeResizer from 'iframe-resizer/js/iframeResizer';
-import { IBreadcrumbOverlay, IBreadcrumbItem } from '../../models/breadcrumbs.model';
+import { iframeResizer } from 'iframe-resizer';
+import { IBreadcrumbItem, IBreadcrumbOverlay } from '../../models/breadcrumbs.model';
 import { SvgSprite } from '../../utils/svg-sprite.component';
 import { BreadcrumbList } from './components/breadcrumb-list.component';
 import { prefersReducedMotion } from '../../utils/utils';
@@ -61,7 +61,7 @@ export class PostInternetBreadcrumbs {
   }
 
   @Watch('customItems')
-  handleCustomConfigChage(newValue: string | IBreadcrumbItem[]) {
+  handleCustomConfigChange(newValue: string | IBreadcrumbItem[]) {
     try {
       this.customBreadcrumbItems = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
     } catch (error) {
@@ -95,7 +95,7 @@ export class PostInternetBreadcrumbs {
     const newVisibility = force ?? !this.overlayVisible;
 
     if (newVisibility) {
-      // Will trigger overlayRef() once the HTLM is rendered
+      // Will trigger overlayRef() once the HTML is rendered
       this.overlayVisible = newVisibility;
       this.currentOverlay = overlay;
       this.setBodyScroll(overlay);
@@ -125,8 +125,10 @@ export class PostInternetBreadcrumbs {
    */
   setBodyScroll(overlay: IBreadcrumbOverlay) {
     if (this.overlayVisible) {
+      // @ts-ignore
       disableBodyScroll(overlay, { reserveScrollBarGap: true });
     } else {
+      // @ts-ignore
       enableBodyScroll(overlay);
     }
   }
@@ -145,7 +147,7 @@ export class PostInternetBreadcrumbs {
     this.toggleDropdown(false);
   }
 
-  registerIFrameResizer(iFrame: HTMLIFrameElement) {
+  registerIFrameResizer(iFrame: HTMLIFrameElement | undefined) {
     if (!iFrame) {
       return;
     }
@@ -215,6 +217,7 @@ export class PostInternetBreadcrumbs {
 
   render() {
     // There is something wrong entirely
+    // eslint-disable-next-line @stencil/strict-boolean-conditions
     if (!state) {
       console.warn(
         `Internet Breadcrumbs: Could not load config. Please make sure that you included the <swisspost-internet-header></swisspost-internet-header> component.`,
@@ -228,6 +231,7 @@ export class PostInternetBreadcrumbs {
     }
 
     // Config has loaded but there is no breadcrumbs config
+    // eslint-disable-next-line @stencil/strict-boolean-conditions
     if (!state.localizedConfig.breadcrumb) {
       console.warn(
         `Internet Header: Current project "${state.projectId}" does not include a breadcrumb config. The breadcrumbs will not be rendered. Remove `,
@@ -276,7 +280,7 @@ export class PostInternetBreadcrumbs {
               <button
                 class="btn btn-secondary btn-icon"
                 key={button.text}
-                aria-expanded={`${!!this.overlayVisible && this.currentOverlay === button.overlay}`}
+                aria-expanded={`${this.overlayVisible && this.currentOverlay === button.overlay}`}
                 onClick={() => this.toggleOverlay(button.overlay, true)}
               >
                 <SvgIcon name={button.svgIcon.name}></SvgIcon>
diff --git a/packages/internet-header/src/components/post-internet-header/post-internet-header.tsx b/packages/internet-header/src/components/post-internet-header/post-internet-header.tsx
index 2610ab463e..d0e90c4e12 100644
--- a/packages/internet-header/src/components/post-internet-header/post-internet-header.tsx
+++ b/packages/internet-header/src/components/post-internet-header/post-internet-header.tsx
@@ -82,7 +82,7 @@ export class PostInternetHeader {
   @Prop() environment: Environment = 'prod';
 
   /**
-   * Override the language switch links with custom URLs. Helpful when your application contains sub-pages and you
+   * Override the language switch links with custom URLs. Helpful when your application contains sub-pages, and you
    * would like to stay on subpages when the user changes language.
    */
   @Prop() languageSwitchOverrides?: string | IAvailableLanguage[];
@@ -241,7 +241,7 @@ export class PostInternetHeader {
   }
 
   @Watch('languageSwitchOverrides')
-  handleAvailableLanguagesChage(newValue: string | IAvailableLanguage[]) {
+  handleAvailableLanguagesChange(newValue: string | IAvailableLanguage[]) {
     state.languageSwitchOverrides = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
   }
 
@@ -308,7 +308,7 @@ export class PostInternetHeader {
 
   @Listen('languageChanged')
   handleLanguageChangeEvent(event: CustomEvent<string>) {
-    this.handleLanguageChange(event.detail);
+    void this.handleLanguageChange(event.detail);
   }
 
   @Watch('stickyness')
@@ -322,17 +322,17 @@ export class PostInternetHeader {
   private handleClickOutside(event: Event) {
     // Close active dropdown element on click outside of it
     if (this.activeDropdownElement && !event.composedPath().includes(this.activeDropdownElement)) {
-      this.activeDropdownElement.toggleDropdown(false);
+      void this.activeDropdownElement.toggleDropdown(false);
     }
   }
 
   private handleKeyUp(event: KeyboardEvent) {
     if (event.key === 'Escape') {
       if (this.activeDropdownElement) {
-        this.activeDropdownElement.toggleDropdown(false);
+        void this.activeDropdownElement.toggleDropdown(false);
       }
       if (this.activeFlyout !== null && this.mainNav) {
-        this.mainNav.toggleDropdown(false);
+        void this.mainNav.toggleDropdown(false);
       }
     }
   }
@@ -376,15 +376,15 @@ export class PostInternetHeader {
       return;
     }
 
-    if (event.detail.open === true) {
+    if (event.detail.open) {
       if (this.activeDropdownElement) {
-        this.activeDropdownElement.toggleDropdown(false);
+        void this.activeDropdownElement.toggleDropdown(false);
       }
 
       this.activeDropdownElement = event.detail.element;
 
       if (window.innerWidth >= 1024) {
-        // Add event listener to close active dropdown element on click outsite of it
+        // Add event listener to close active dropdown element on click outside of it
         // Also adds 10ms delay in case of an external interaction:
         //    Some button on the page calls toggleDropdown() -> dropdown opens
         //    Click event bubbles to the window, this.handleClickOutsideBound closes dropdown again
@@ -394,7 +394,7 @@ export class PostInternetHeader {
       }
 
       if (this.activeFlyout !== null && this.mainNav) {
-        this.mainNav.setActiveFlyout(null);
+        void this.mainNav.setActiveFlyout(null);
       }
     } else {
       this.activeDropdownElement = null;
@@ -412,7 +412,7 @@ export class PostInternetHeader {
     this.activeFlyout = event.detail;
 
     if (this.activeDropdownElement && event.detail && !this.isMainNavOpen()) {
-      this.activeDropdownElement.toggleDropdown(false);
+      void this.activeDropdownElement.toggleDropdown(false);
     }
   }
 
@@ -444,7 +444,7 @@ export class PostInternetHeader {
     return (
       <Host
         class={`stickyness-${this.stickyness} ${
-          this.activeDropdownElement || this.activeFlyout ? 'dropdown-open' : ''
+          Boolean(this.activeDropdownElement) || Boolean(this.activeFlyout) ? 'dropdown-open' : ''
         }`}
         data-version={packageJson.version}
         onKeyup={(e: KeyboardEvent) => this.handleKeyUp(e)}
@@ -452,17 +452,17 @@ export class PostInternetHeader {
         <header class={`post-internet-header${this.fullWidth ? ' full-width' : ''}`}>
           <SvgSprite />
           <h1 class="visually-hidden">{translate('Navigate on post.ch')}</h1>
-          <If condition={this.skiplinks === true}>
+          <If condition={this.skiplinks}>
             <post-skiplinks></post-skiplinks>
           </If>
-          <If condition={renderMetaNavigation === true}>
+          <If condition={renderMetaNavigation}>
             <post-meta-navigation
               orientation="horizontal"
               class="hidden-lg"
               full-width={this.fullWidth}
               ref={el => (this.metaNav = el)}
             >
-              <If condition={renderLanguageSwitch === true}>
+              <If condition={renderLanguageSwitch}>
                 <post-language-switch
                   id="post-language-switch-desktop"
                   mode="dropdown"
@@ -488,9 +488,9 @@ export class PostInternetHeader {
               onFlyoutToggled={e => this.handleFlyoutToggled(e)}
               ref={el => (this.mainNav = el)}
             >
-              <If condition={renderMetaNavigation === true}>
+              <If condition={renderMetaNavigation}>
                 <post-meta-navigation orientation="vertical">
-                  <If condition={renderLanguageSwitch === true}>
+                  <If condition={renderLanguageSwitch}>
                     <post-language-switch
                       id="post-language-switch-mobile"
                       mode="list"
@@ -500,7 +500,7 @@ export class PostInternetHeader {
               </If>
             </post-main-navigation>
             <div class="main-navigation-controls">
-              <If condition={this.search !== false}>
+              <If condition={this.search}>
                 <post-search onDropdownToggled={e => this.handleDropdownToggled(e)}></post-search>
               </If>
               <If condition={!!renderLogin}>
@@ -508,7 +508,7 @@ export class PostInternetHeader {
                   <slot name="login-widget"></slot>
                 </post-klp-login-widget>
               </If>
-              <If condition={renderMetaNavigation === false && renderLanguageSwitch === true}>
+              <If condition={!renderMetaNavigation && renderLanguageSwitch}>
                 <post-language-switch
                   id="post-language-switch-no-meta"
                   onDropdownToggled={e => this.handleDropdownToggled(e)}
diff --git a/packages/internet-header/src/components/post-search/post-search.tsx b/packages/internet-header/src/components/post-search/post-search.tsx
index 4439b1d580..dfa6b50bc1 100644
--- a/packages/internet-header/src/components/post-search/post-search.tsx
+++ b/packages/internet-header/src/components/post-search/post-search.tsx
@@ -148,6 +148,10 @@ export class PostSearch implements HasDropdown, IsFocusable {
    * Disable or re-enable body scrolling, depending on whether search dropdown is open or closed in mobile view (width < 1024px)
    */
   private setBodyScroll() {
+    if(!this.searchFlyout) {
+      return;
+    }
+
     if (this.searchDropdownOpen && window.innerWidth < 1024) {
       disableBodyScroll(this.searchFlyout);
     } else {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f5817b6521..35a0fe5c5a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -684,6 +684,9 @@ importers:
       '@stencil/sass':
         specifier: 3.0.5
         version: 3.0.5(@stencil/core@3.4.2)
+      '@types/body-scroll-lock':
+        specifier: 3.1.0
+        version: 3.1.0
       '@types/iframe-resizer':
         specifier: 3.5.9
         version: 3.5.9
@@ -7983,6 +7986,10 @@ packages:
       '@types/node': 18.17.18
     dev: true
 
+  /@types/body-scroll-lock@3.1.0:
+    resolution: {integrity: sha512-3owAC4iJub5WPqRhxd8INarF2bWeQq1yQHBgYhN0XLBJMpd5ED10RrJ3aKiAwlTyL5wK7RkBD4SZUQz2AAAMdA==}
+    dev: true
+
   /@types/bonjour@3.5.10:
     resolution: {integrity: sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==}
     dependencies: