feat(components): create post popover trigger component

.changeset/forty-jokes-sin.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-components-angular-workspace': patch
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+---
+
+Introduced `<post-popover-trigger>` web component to replace the previous `data-popover-target` implementation.

packages/components-angular/projects/consumer-app/cypress/e2e/popover.cy.ts

@@ -0,0 +1,112 @@
+describe('Popover', () => {
+  beforeEach(() => {
+    cy.visit('/popover');
+    cy.get('post-popover[data-hydrated]').as('popover');
+    cy.get('post-popovercontainer[data-hydrated]').as('popovercontainer');
+    cy.get('#popoverContent').as('popoverContent');
+    cy.get('post-popover-trigger[data-hydrated][for="popover-one"]')
+      .children()
+      .first()
+      .as('trigger');
+  });
+
+  it('should contain an HTML element inside the trigger, not just plain text', () => {
+    cy.get('post-popover-trigger[data-hydrated][for="popover-one"]')
+      .children()
+      .should('have.length.at.least', 1);
+  });
+  it('should show up on click', () => {
+    cy.get('@popoverContent').should('not.be.visible');
+    cy.get('@trigger').should('have.attr', 'aria-expanded', 'false');
+    cy.get('@trigger').click();
+    cy.get('@popover').should('be.visible');
+    cy.get('@trigger').should('have.attr', 'aria-expanded', 'true');
+    // Void click light dismiss does not work in cypress for closing
+  });
+
+  it('should show up when clicking on a nested element inside the trigger', () => {
+    // Modify trigger by adding a nested span
+    cy.get('@trigger').then($trigger => {
+      const originalText = $trigger.text();
+      $trigger.html(`<span class="nested-element">${originalText}</span>`);
+    });
+
+    cy.get('@popoverContent').should('not.be.visible');
+    cy.get('@trigger').should('have.attr', 'aria-expanded', 'false');
+    cy.get('.nested-element').click();
+    cy.get('@popoverContent').should('be.visible');
+    cy.get('@trigger').should('have.attr', 'aria-expanded', 'true');
+    cy.get('.btn-close').click();
+    cy.get('@popoverContent').should('not.be.visible');
+    cy.get('@trigger').should('have.attr', 'aria-expanded', 'false');
+  });
+
+  it('should show up when clicking on a deeply nested element inside the trigger', () => {
+    // Set up a trigger with a deeply nested structure
+    cy.get('@trigger').then($trigger => {
+      const originalText = $trigger.text();
+      $trigger.html(`
+          <div class="level-1">
+            <div class="level-2">
+              <span class="level-3">${originalText}</span>
+            </div>
+          </div>
+        `);
+    });
+
+    cy.get('@popoverContent').should('not.be.visible');
+    cy.get('.level-3').click();
+    cy.get('@popoverContent').should('be.visible');
+    cy.get('@trigger').should('have.attr', 'aria-expanded', 'true');
+  });
+
+  it('should close on X click', () => {
+    cy.get('@trigger').click();
+    cy.get('@popoverContent').should('be.visible');
+    cy.get('.btn-close').click();
+    cy.get('@popoverContent').should('not.be.visible');
+  });
+
+  it('should open on enter and close on escape', () => {
+    cy.get('@popoverContent').should('not.be.visible');
+    cy.get('@trigger').focus().type('{enter}');
+    cy.get('@popoverContent').should('be.visible');
+  });
+
+  it('should open and close with the API', () => {
+    Promise.all([cy.get('@trigger'), cy.get('@popoverContent')])
+      .then(([$trigger, $popover]: [JQuery<HTMLButtonElement>, JQuery<HTMLPostPopoverElement>]) => [
+        $trigger.get(0),
+        $popover.get(0),
+      ])
+      .then(([trigger, popover]: [HTMLButtonElement, HTMLPostPopoverElement]) => {
+        cy.get('@popoverContent').should('not.be.visible');
+        popover.show(trigger);
+        cy.get('@popoverContent').should('be.visible');
+        popover.hide();
+        cy.get('@popoverContent').should('not.be.visible');
+        popover.toggle(trigger);
+        cy.get('@popoverContent').should('be.visible');
+        popover.toggle(trigger);
+        cy.get('@popoverContent').should('not.be.visible');
+      });
+
+    it('should switch position', () => {
+      cy.get('post-popover').invoke('attr', 'placement', 'top');
+      cy.get('@popoverContent').should('not.be.visible');
+
+      Promise.all([cy.get('@trigger'), cy.get('@popover')])
+        .then(
+          ([$trigger, $popover]: [JQuery<HTMLButtonElement>, JQuery<HTMLPostPopoverElement>]) => [
+            $trigger.get(0),
+            $popover.get(0),
+          ],
+        )
+        .then(([trigger, popover]: [HTMLButtonElement, HTMLPostPopoverElement]) => {
+          const t = trigger.getBoundingClientRect();
+          const p = popover.getBoundingClientRect();
+          expect(t.top < p.top);
+        });
+    });
+  });
+});

packages/components-angular/projects/consumer-app/src/app/app-routing.module.ts

@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './routes/home/home.component';
 import { CardControlComponent } from './routes/card-control/card-control.component';
+import { PopoverComponent } from './routes/popover/popover.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   { title: 'Home', path: 'home', component: HomeComponent },
   { title: 'Card-Control', path: 'card-control', component: CardControlComponent },
+  { title: 'Popover', path: 'popover', component: PopoverComponent },
 ];
 
 @NgModule({

packages/components-angular/projects/consumer-app/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { providePostComponents } from '@swisspost/design-system-components-angul
 
 import { AppComponent } from './app.component';
 import { CardControlComponent } from './routes/card-control/card-control.component';
+import { PopoverComponent } from './routes/popover/popover.component';
 
 @NgModule({
   imports: [
@@ -15,6 +16,7 @@ import { CardControlComponent } from './routes/card-control/card-control.compone
     AppRoutingModule,
     FormsModule,
     CardControlComponent,
+    PopoverComponent,
   ],
   declarations: [AppComponent],
   providers: [providePostComponents()],

packages/components-angular/projects/consumer-app/src/app/routes/popover/popover.component.html

@@ -0,0 +1,18 @@
+<h2>Popover</h2>
+
+<post-popover-trigger for="popover-one">
+  <button class="btn btn-secondary">Popover Trigger</button>
+</post-popover-trigger>
+<post-popover
+  class="palette palette-accent"
+  id="popover-one"
+  placement="top"
+  close-button-caption="Close"
+  arrow=""
+  ><div id="popoverContent">
+    <h2 class="h6">Optional title</h2>
+    <span class="mb-0">
+      A longer message that needs more time to read. <a href="#">Links</a> are also possible.</span
+    >
+  </div>
+</post-popover>

packages/components-angular/projects/consumer-app/src/app/routes/popover/popover.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { PostComponentsModule } from 'components';
+
+@Component({
+  selector: 'popover-page',
+  templateUrl: './popover.component.html',
+  imports: [CommonModule, ReactiveFormsModule, PostComponentsModule],
+})
+export class PopoverComponent {}

packages/components/cypress/e2e/popover.cy.ts

@@ -7,10 +7,19 @@ describe('popover', { baseUrl: null, includeShadowDom: true }, () => {
       cy.get('post-popover[data-hydrated]');
 
       // Aria-expanded is set by the web component, therefore it's a good measure to indicate the component is ready
-      cy.get('[data-popover-target="popover-one"][aria-expanded]').as('trigger');
+      cy.get('post-popover-trigger[data-hydrated][for="popover-one"]')
+        .children()
+        .first()
+        .as('trigger');
       cy.get('#testtext').as('popover');
     });
 
+    it('should contain an HTML element inside the trigger, not just plain text', () => {
+      cy.get('post-popover-trigger[data-hydrated][for="popover-one"]')
+        .children()
+        .should('have.length.at.least', 1);
+    });
+
     it('should show up on click', () => {
       cy.get('@popover').should('not.be.visible');
       cy.get('@trigger').should('have.attr', 'aria-expanded', 'false');
@@ -63,12 +72,10 @@ describe('popover', { baseUrl: null, includeShadowDom: true }, () => {
       cy.get('@popover').should('not.be.visible');
     });
 
-    it('should open and close on enter', () => {
+    it('should open on enter', () => {
       cy.get('@popover').should('not.be.visible');
       cy.get('@trigger').focus().type('{enter}');
       cy.get('@popover').should('be.visible');
-      cy.get('@trigger').type('{enter}');
-      cy.get('@popover').should('not.be.visible');
     });
 
     it('should open and close with the API', () => {
@@ -119,7 +126,8 @@ describe('popover', { baseUrl: null, includeShadowDom: true }, () => {
       cy.get('post-popover[data-hydrated]');
 
       // Aria-expanded is set by the web component, therefore it's a good measure to indicate the component is ready
-      cy.get('[data-popover-target="popover-one"][aria-expanded]').as('trigger');
+
+      cy.get('post-popover-trigger[data-hydrated][for="popover-one"]').as('trigger');
 
       cy.injectAxe();
     });

packages/components/cypress/e2e/popovercontainer.cy.ts

@@ -3,9 +3,17 @@ describe('popovercontainer', { baseUrl: null, includeShadowDom: true }, () => {
     const selector = isPopoverSupported() ? ':popover-open' : '.\\:popover-open';
 
     beforeEach(() => {
-      // There is no dedicated docs page for the popovercontainer
       cy.visit('./cypress/fixtures/post-popover.test.html');
-      cy.get('[data-popover-target="popover-one"][aria-expanded]').as('trigger');
+
+      // Ensure the component is hydrated, which is necessary to ensure the component is ready for interaction
+      cy.get('post-popover[data-hydrated]');
+
+      // Aria-expanded is set by the web component, therefore it's a good measure to indicate the component is ready
+      cy.get('post-popover-trigger[data-hydrated][for="popover-one"]')
+        .children()
+        .first()
+        .as('trigger');
+
       cy.get('#testtext').as('container');
     });
 

packages/components/cypress/fixtures/post-popover.test.html

@@ -11,7 +11,9 @@
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
   </head>
   <body>
-    <button data-popover-target="popover-one">toggle</button>
+    <post-popover-trigger for="popover-one">
+      <button type="button" class="btn btn-secondary">Popover Trigger</button>
+    </post-popover-trigger>
     <post-popover id="popover-one" close-button-caption="Close Popover">
       <p id="testtext">This is a test</p>
     </post-popover>

packages/components/src/components.d.ts

@@ -372,16 +372,22 @@ export namespace Components {
         "placement"?: Placement;
         /**
           * Programmatically display the popover
-          * @param target An element with [data-popover-target="id"] where the popover should be shown
+          * @param target A <post-popover-trigger> component that controls the popover
          */
         "show": (target: HTMLElement) => Promise<void>;
         /**
           * Toggle popover display
-          * @param target An element with [data-popover-target="id"] where the popover should be anchored to
+          * @param target A <post-popover-trigger> component that controls the popover
           * @param force Pass true to always show or false to always hide
          */
         "toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
     }
+    interface PostPopoverTrigger {
+        /**
+          * ID of the popover element that this trigger is linked to. Used to open and close the popover.
+         */
+        "for": string;
+    }
     interface PostPopovercontainer {
         /**
           * Animation style
@@ -418,12 +424,12 @@ export namespace Components {
         "safeSpace"?: 'triangle' | 'trapezoid';
         /**
           * Programmatically display the popovercontainer
-          * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
+          * @param target A <post-popover-trigger> component that controls the popover
          */
         "show": (target: HTMLElement) => Promise<void>;
         /**
           * Toggle popovercontainer display
-          * @param target An element with [data-popover-target="id"] where the popovercontainer should be shown
+          * @param target A <post-popover-trigger> component that controls the popover
           * @param force Pass true to always show or false to always hide
          */
         "toggle": (target: HTMLElement, force?: boolean) => Promise<boolean>;
@@ -805,6 +811,12 @@ declare global {
         prototype: HTMLPostPopoverElement;
         new (): HTMLPostPopoverElement;
     };
+    interface HTMLPostPopoverTriggerElement extends Components.PostPopoverTrigger, HTMLStencilElement {
+    }
+    var HTMLPostPopoverTriggerElement: {
+        prototype: HTMLPostPopoverTriggerElement;
+        new (): HTMLPostPopoverTriggerElement;
+    };
     interface HTMLPostPopovercontainerElementEventMap {
         "postToggle": { isOpen: boolean; first?: boolean };
     }
@@ -915,6 +927,7 @@ declare global {
         "post-menu-item": HTMLPostMenuItemElement;
         "post-menu-trigger": HTMLPostMenuTriggerElement;
         "post-popover": HTMLPostPopoverElement;
+        "post-popover-trigger": HTMLPostPopoverTriggerElement;
         "post-popovercontainer": HTMLPostPopovercontainerElement;
         "post-rating": HTMLPostRatingElement;
         "post-tab-header": HTMLPostTabHeaderElement;
@@ -1238,6 +1251,12 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
     }
+    interface PostPopoverTrigger {
+        /**
+          * ID of the popover element that this trigger is linked to. Used to open and close the popover.
+         */
+        "for": string;
+    }
     interface PostPopovercontainer {
         /**
           * Animation style
@@ -1397,6 +1416,7 @@ declare namespace LocalJSX {
         "post-menu-item": PostMenuItem;
         "post-menu-trigger": PostMenuTrigger;
         "post-popover": PostPopover;
+        "post-popover-trigger": PostPopoverTrigger;
         "post-popovercontainer": PostPopovercontainer;
         "post-rating": PostRating;
         "post-tab-header": PostTabHeader;
@@ -1444,6 +1464,7 @@ declare module "@stencil/core" {
             "post-menu-item": LocalJSX.PostMenuItem & JSXBase.HTMLAttributes<HTMLPostMenuItemElement>;
             "post-menu-trigger": LocalJSX.PostMenuTrigger & JSXBase.HTMLAttributes<HTMLPostMenuTriggerElement>;
             "post-popover": LocalJSX.PostPopover & JSXBase.HTMLAttributes<HTMLPostPopoverElement>;
+            "post-popover-trigger": LocalJSX.PostPopoverTrigger & JSXBase.HTMLAttributes<HTMLPostPopoverTriggerElement>;
             "post-popovercontainer": LocalJSX.PostPopovercontainer & JSXBase.HTMLAttributes<HTMLPostPopovercontainerElement>;
             "post-rating": LocalJSX.PostRating & JSXBase.HTMLAttributes<HTMLPostRatingElement>;
             "post-tab-header": LocalJSX.PostTabHeader & JSXBase.HTMLAttributes<HTMLPostTabHeaderElement>;

packages/components/src/components/post-popover-trigger/post-popover-trigger.scss

@@ -0,0 +1,3 @@
+:host {
+  cursor: pointer;
+}