feat: added post-popover and post-popup components

Also refactored post-tooltip to use post-popover as a base

packages/components/src/components.d.ts

@@ -6,10 +6,8 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { AlertType } from "./components/post-alert/alert-types";
-import { BackgroundColor } from "./components/post-tooltip/types";
 import { Placement } from "@floating-ui/dom";
 export { AlertType } from "./components/post-alert/alert-types";
-export { BackgroundColor } from "./components/post-tooltip/types";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
     interface PostAlert {
@@ -85,6 +83,52 @@ export namespace Components {
          */
         "scale"?: number | null;
     }
+    interface PostPopover {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
+        /**
+          * Programmatically hide this tooltip
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         */
+        "placement"?: Placement;
+        /**
+          * Programmatically display the tooltip
+          * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+         */
+        "show": (target: HTMLElement) => Promise<void>;
+        /**
+          * Toggle tooltip display
+          * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+          * @param force Pass true to always show or false to always hide
+         */
+        "toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
+    }
+    interface PostPopup {
+        /**
+          * Programmatically hide this popup
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Defines the placement of the popup according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popups are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         */
+        "placement"?: Placement;
+        /**
+          * Programmatically display the popup
+          * @param target An element with [data-popup-target="id"] where the popup should be shown
+         */
+        "show": (target: HTMLElement) => Promise<void>;
+        /**
+          * Toggle popup display
+          * @param target An element with [data-popup-target="id"] where the popup should be anchored to
+          * @param force Pass true to always show or false to always hide
+         */
+        "toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
+    }
     interface PostTabHeader {
         /**
           * The name of the panel controlled by the tab header.
@@ -108,10 +152,6 @@ export namespace Components {
         "show": (panelName: string) => Promise<void>;
     }
     interface PostTooltip {
-        /**
-          * Defines the background color of the tooltip. Choose the one that provides the best contrast in your scenario.
-         */
-        "backgroundColor"?: BackgroundColor;
         /**
           * Programmatically hide this tooltip
          */
@@ -137,6 +177,10 @@ export interface PostAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostAlertElement;
 }
+export interface PostPopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostPopoverElement;
+}
 export interface PostTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostTabsElement;
@@ -163,6 +207,18 @@ declare global {
         prototype: HTMLPostIconElement;
         new (): HTMLPostIconElement;
     };
+    interface HTMLPostPopoverElement extends Components.PostPopover, HTMLStencilElement {
+    }
+    var HTMLPostPopoverElement: {
+        prototype: HTMLPostPopoverElement;
+        new (): HTMLPostPopoverElement;
+    };
+    interface HTMLPostPopupElement extends Components.PostPopup, HTMLStencilElement {
+    }
+    var HTMLPostPopupElement: {
+        prototype: HTMLPostPopupElement;
+        new (): HTMLPostPopupElement;
+    };
     interface HTMLPostTabHeaderElement extends Components.PostTabHeader, HTMLStencilElement {
     }
     var HTMLPostTabHeaderElement: {
@@ -191,6 +247,8 @@ declare global {
         "post-alert": HTMLPostAlertElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-icon": HTMLPostIconElement;
+        "post-popover": HTMLPostPopoverElement;
+        "post-popup": HTMLPostPopupElement;
         "post-tab-header": HTMLPostTabHeaderElement;
         "post-tab-panel": HTMLPostTabPanelElement;
         "post-tabs": HTMLPostTabsElement;
@@ -267,6 +325,23 @@ declare namespace LocalJSX {
          */
         "scale"?: number | null;
     }
+    interface PostPopover {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
+        "onPostPopoverToggled"?: (event: PostPopoverCustomEvent<boolean>) => void;
+        /**
+          * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         */
+        "placement"?: Placement;
+    }
+    interface PostPopup {
+        /**
+          * Defines the placement of the popup according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popups are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+         */
+        "placement"?: Placement;
+    }
     interface PostTabHeader {
         /**
           * The name of the panel controlled by the tab header.
@@ -290,10 +365,6 @@ declare namespace LocalJSX {
         "onTabChange"?: (event: PostTabsCustomEvent<HTMLPostTabPanelElement['name']>) => void;
     }
     interface PostTooltip {
-        /**
-          * Defines the background color of the tooltip. Choose the one that provides the best contrast in your scenario.
-         */
-        "backgroundColor"?: BackgroundColor;
         /**
           * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
          */
@@ -303,6 +374,8 @@ declare namespace LocalJSX {
         "post-alert": PostAlert;
         "post-collapsible": PostCollapsible;
         "post-icon": PostIcon;
+        "post-popover": PostPopover;
+        "post-popup": PostPopup;
         "post-tab-header": PostTabHeader;
         "post-tab-panel": PostTabPanel;
         "post-tabs": PostTabs;
@@ -319,6 +392,8 @@ declare module "@stencil/core" {
              * @class PostIcon - representing a stencil component
              */
             "post-icon": LocalJSX.PostIcon & JSXBase.HTMLAttributes<HTMLPostIconElement>;
+            "post-popover": LocalJSX.PostPopover & JSXBase.HTMLAttributes<HTMLPostPopoverElement>;
+            "post-popup": LocalJSX.PostPopup & JSXBase.HTMLAttributes<HTMLPostPopupElement>;
             "post-tab-header": LocalJSX.PostTabHeader & JSXBase.HTMLAttributes<HTMLPostTabHeaderElement>;
             "post-tab-panel": LocalJSX.PostTabPanel & JSXBase.HTMLAttributes<HTMLPostTabPanelElement>;
             "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;

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

@@ -0,0 +1,48 @@
+@use 'sass:meta';
+@use 'sass:math';
+@use '@swisspost/design-system-styles/variables/color';
+@use '@swisspost/design-system-styles/variables/commons';
+@use '@swisspost/design-system-styles/variables/spacing';
+@use '@swisspost/design-system-styles/mixins/color' as color-mx;
+@use '@swisspost/design-system-styles/functions/color' as color-fn;
+
+// Puts polyfilled styles in a separate layer so they are easy to override
+// Can be removed as soon as popover is supported by all major browsers
+// https://caniuse.com/?search=popover
+@layer polyfill {
+  @include meta.load-css('@oddbird/popover-polyfill/dist/popover.css');
+}
+
+div {
+  position: absolute;
+  z-index: commons.$zindex-popover;
+
+  width: max-content;
+  max-width: 30ch;
+  margin: 0;
+  padding: 0;
+
+  color: var(--post-contrast-color);
+  background-color: rgb(var(--post-bg-rgb));
+  border-color: transparent; // Keeping the default border for HCM
+  border-radius: commons.$border-radius;
+
+  // Keeps the little arrow visible
+  overflow: visible;
+}
+
+.arrow {
+  position: absolute;
+  // Diagonale of 16px -> 1rem -> 1/1.41 = ~0.7
+  // https://www.omnicalculator.com/math/square-diagonal?c=CHF&v=hide:0,diagonal:16!cm
+  width: math.div(spacing.$spacer, math.sqrt(2));
+  aspect-ratio: 1/1;
+  background-color: inherit;
+  rotate: 45deg;
+  pointer-events: none;
+  z-index: -1;
+
+  // High contrast mode borders
+  border-right: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}