chore(internet-header): some typos, types and simplification in code (#…

…1839)

Co-authored-by: Philipp Gfeller <[email protected]>

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",

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[];
         /**

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>

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,25 +444,25 @@ 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)}
       >
         <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,15 +500,15 @@ 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}>
                 <post-klp-login-widget>
                   <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)}

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 {