From 01075c77dcb85f659c7e51758cf092e2d85afa48 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:41:21 +0200 Subject: [PATCH] feat(internet-header): Add toggleOverlayById method (#1838) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .changeset/selfish-falcons-cheer.md | 5 +++++ .../cypress/e2e/breadcrumbs.cy.ts | 17 +++++++++++++- packages/internet-header/src/components.d.ts | 9 ++++++-- .../post-internet-breadcrumbs.tsx | 22 ++++++++++++++++++- .../post-internet-breadcrumbs/readme.md | 13 +++++++++++ 5 files changed, 62 insertions(+), 4 deletions(-) create mode 100644 .changeset/selfish-falcons-cheer.md diff --git a/.changeset/selfish-falcons-cheer.md b/.changeset/selfish-falcons-cheer.md new file mode 100644 index 0000000000..042433ea91 --- /dev/null +++ b/.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. diff --git a/packages/internet-header/cypress/e2e/breadcrumbs.cy.ts b/packages/internet-header/cypress/e2e/breadcrumbs.cy.ts index e402efb333..811a9dd6ef 100644 --- a/packages/internet-header/cypress/e2e/breadcrumbs.cy.ts +++ b/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', () => { diff --git a/packages/internet-header/src/components.d.ts b/packages/internet-header/src/components.d.ts index 3a11d311fe..6a7dbc87fe 100644 --- a/packages/internet-header/src/components.d.ts +++ b/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; } interface SwisspostInternetFooter { } 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 0a005e48ee..777efc550e 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,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 { + 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; diff --git a/packages/internet-header/src/components/post-internet-breadcrumbs/readme.md b/packages/internet-header/src/components/post-internet-breadcrumbs/readme.md index 20e83ba902..5cf16f12ee 100644 --- a/packages/internet-header/src/components/post-internet-breadcrumbs/readme.md +++ b/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` + +Toggle an overlay associated with a button. + +#### Returns + +Type: `Promise` + + + + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)*