feat(internet-header): Add toggleOverlayById method (#1838)

Co-authored-by: Alizé Debray <[email protected]>

.changeset/selfish-falcons-cheer.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/internet-header': minor
+---
+
+Added ability to toggle programmatically an overlay associated with a button using the `toggleOverlayById` method.

packages/internet-header/cypress/e2e/breadcrumbs.cy.ts

@@ -61,7 +61,7 @@ describe('breadcrumb', () => {
     });
   });
 
-  describe('open/close overlay buttons', () => {
+  describe('Toggle overlay buttons', () => {
     beforeEach(() => {
       prepare('Internet Header/Breadcrumbs', 'Default');
       cy.get('div.breadcrumbs').as('breadcrumbs');
@@ -91,6 +91,21 @@ describe('breadcrumb', () => {
       closeOverlayOnKey('Escape');
       cy.get('@breadcrumbs').find('div.overlay').should('not.exist');
     });
+
+    it.only(`should open overlay programmatically`, () => {
+      cy.get('swisspost-internet-breadcrumbs').then(async el => {
+        await el[0].toggleOverlayById('help');
+        cy.get('div.breadcrumbs').find('div.overlay').should('exist');
+      });
+    });
+
+    it.only(`should close overlay programmatically`, () => {
+      cy.get('swisspost-internet-breadcrumbs').then(async el => {
+        await el[0].toggleOverlayById('help');
+        await el[0].toggleOverlayById('help');
+        cy.get('div.breadcrumbs').find('div.overlay').should('not.exist');
+      });
+    });
   });
 
   describe('mobile', () => {

packages/internet-header/src/components.d.ts

@@ -6,12 +6,12 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { DropdownEvent, NavMainEntity } from "./models/header.model";
-import { IBreadcrumbItem } from "./models/breadcrumbs.model";
+import { IBreadcrumbItem, IBreadcrumbOverlay } from "./models/breadcrumbs.model";
 import { StickynessOptions } from "./models/implementor.model";
 import { Environment, ICustomConfig } from "./models/general.model";
 import { IAvailableLanguage } from "./models/language.model";
 export { DropdownEvent, NavMainEntity } from "./models/header.model";
-export { IBreadcrumbItem } from "./models/breadcrumbs.model";
+export { IBreadcrumbItem, IBreadcrumbOverlay } from "./models/breadcrumbs.model";
 export { StickynessOptions } from "./models/implementor.model";
 export { Environment, ICustomConfig } from "./models/general.model";
 export { IAvailableLanguage } from "./models/language.model";
@@ -70,6 +70,11 @@ export namespace Components {
     }
     interface SwisspostInternetBreadcrumbs {
         "customItems"?: string | IBreadcrumbItem[];
+        /**
+          * Toggle an overlay associated with a button.
+          * @param overlayId
+         */
+        "toggleOverlayById": (overlayId: IBreadcrumbOverlay['id']) => Promise<void>;
     }
     interface SwisspostInternetFooter {
     }

packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Host, h, Prop, State, Element, Watch, Method } from '@stencil/core';
 import { debounce } from 'throttle-debounce';
 import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import { SvgIcon } from '../../utils/svg-icon.component';
@@ -24,6 +24,26 @@ export class PostInternetBreadcrumbs {
   @State() refsReady: boolean = false;
   @Element() host: Element;
 
+
+  /**
+   * Toggle an overlay associated with a button.
+   * @param {IBreadcrumbOverlay['id']} overlayId
+   */
+  @Method()
+  async toggleOverlayById(overlayId: IBreadcrumbOverlay['id']): Promise<void> {
+    const buttons = state.localizedConfig?.breadcrumb.buttons;
+    const overlay = buttons?.find(button => button.overlay.id === overlayId)?.overlay;
+
+    if(!overlay){
+      console.warn(
+        `Internet Header: Failed to toggle overlay with id #${overlayId} as it was not found in the breadcrumb buttons config.`,
+      );
+      return;
+    }
+
+    this.toggleOverlay(overlay)
+  }
+
   private controlNavRef?: HTMLElement;
   private visibleNavRef?: HTMLElement;
   private currentOverlay: IBreadcrumbOverlay;

packages/internet-header/src/components/post-internet-breadcrumbs/readme.md

@@ -12,6 +12,19 @@
 | `customItems` | `custom-items` |             | `IBreadcrumbItem[] \| string \| undefined` | `undefined` |
 
 
+## Methods
+
+### `toggleOverlayById(overlayId: IBreadcrumbOverlay['id']) => Promise<void>`
+
+Toggle an overlay associated with a button.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*