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 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 {