✨ feat(tooltip): new component (#999)

* chore(): add new component * chore(): refactor * chore(): refactor * chore(): refactor * chore(): refactor * chore(): refactor * chore(): format * chore(): refactor * chore(): refactor * chore(): format * chore(): add bem * chore(): update base images * chore(): refactor * chore(): refactor * chore(): update base images * chore(): trigger build * chore(): refactor --------- Co-authored-by: mladenplaninicic <[email protected]>
baloise · Sep 4, 2023 · 544f53c · 544f53c
1 parent 5c58d71
commit 544f53c
Show file tree

Hide file tree

Showing 23 changed files with 880 additions and 1 deletion.
diff --git a/.build/data/tags.json b/.build/data/tags.json
@@ -1 +1 @@
-["bal-accordion","bal-app","bal-badge","bal-button","bal-card","bal-carousel","bal-checkbox","bal-close","bal-content","bal-data","bal-datepicker","bal-divider","bal-field","bal-file-upload","bal-footer","bal-form","bal-heading","bal-hint","bal-icon","bal-input","bal-label","bal-list","bal-logo","bal-modal","bal-navbar","bal-notification","bal-number-input","bal-pagination","bal-popover","bal-progress-bar","bal-radio","bal-select","bal-shape","bal-sheet","bal-snackbar","bal-spinner","bal-stack","bal-stage","bal-step-item","bal-steps","bal-table","bal-tabs","bal-tag","bal-text","bal-time-input","bal-toast"]
+["bal-accordion","bal-app","bal-badge","bal-button","bal-card","bal-carousel","bal-checkbox","bal-close","bal-content","bal-data","bal-datepicker","bal-divider","bal-field","bal-file-upload","bal-footer","bal-form","bal-heading","bal-hint","bal-icon","bal-input","bal-label","bal-list","bal-logo","bal-modal","bal-navbar","bal-notification","bal-number-input","bal-pagination","bal-popover","bal-progress-bar","bal-radio","bal-select","bal-shape","bal-sheet","bal-snackbar","bal-spinner","bal-stack","bal-stage","bal-step-item","bal-steps","bal-table","bal-tabs","bal-tag","bal-text","bal-time-input","bal-toast","bal-tooltip"]
diff --git a/.changeset/smart-squids-dance.md b/.changeset/smart-squids-dance.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': minor
+---
+
+add tooltip component
diff --git a/CHANGELOG_v12.md b/CHANGELOG_v12.md
@@ -552,3 +552,4 @@ Follow the migration guide [Migration from 10.x to 11.x](https://design.baloise.
 - Rebranded components
 - New breakpoint high-definition
 - bal-input pattern
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/cypress/e2e/visual/bal-tooltip.visual.cy.ts b/packages/components/cypress/e2e/visual/bal-tooltip.visual.cy.ts
@@ -0,0 +1,22 @@
+describe('bal-tooltip', () => {
+  testTooltip('desktop')
+
+  function testTooltip(platform: 'desktop' | 'mobile') {
+    describe(platform, () => {
+      beforeEach(() =>
+        cy.visit('/components/bal-tooltip/test/bal-tooltip.visual.html').platform(platform).waitForDesignSystem(),
+      )
+
+      it('basic tooltip', () => {
+        cy.getByTestId('basic-trigger').click()
+        cy.compareSnapshot(`tooltip-basic-${platform}`)
+        cy.get('body').type('{esc}')
+      })
+
+      it('with placement on the right', () => {
+        cy.getByTestId('placement-right-trigger').invoke('show').click({ force: true })
+        cy.compareSnapshot(`tooltip-right-placement-${platform}`)
+      })
+    })
+  }
+})
diff --git a/...ypress/snapshots/base/visual/bal-tooltip.visual.cy.ts/tooltip-arrow-desktop.png b/...ypress/snapshots/base/visual/bal-tooltip.visual.cy.ts/tooltip-arrow-desktop.png
diff --git a/...ypress/snapshots/base/visual/bal-tooltip.visual.cy.ts/tooltip-basic-desktop.png b/...ypress/snapshots/base/visual/bal-tooltip.visual.cy.ts/tooltip-basic-desktop.png
diff --git a/...pshots/base/visual/bal-tooltip.visual.cy.ts/tooltip-right-placement-desktop.png b/...pshots/base/visual/bal-tooltip.visual.cy.ts/tooltip-right-placement-desktop.png
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -70,6 +70,7 @@
     "@baloise/design-system-icons": "13.6.2",
     "@baloise/design-system-tokens": "13.6.2",
     "@baloise/web-app-utils": "3.11.1",
+    "@floating-ui/dom": "^1.2.9",
     "@popperjs/core": "~2.11.4",
     "@stencil/core": "^3.2.2",
     "big.js": "~6.2.1",

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -3054,6 +3054,27 @@ export namespace Components {
          */
         "message": string;
     }
+    interface BalTooltip {
+        /**
+          * Defines the width of the content
+         */
+        "contentWidth"?: number;
+        "dismiss": () => Promise<boolean>;
+        /**
+          * Offset form trigger to tooltip.
+         */
+        "offset": number;
+        /**
+          * If set it turns a tooltip into a fullscreen or a drawer on touch devices
+         */
+        "placement": BalProps.BalTooltipPlacement;
+        "present": () => Promise<boolean>;
+        /**
+          * Id of the reference element default is the trigger element.
+         */
+        "reference": string;
+        "update": () => Promise<boolean>;
+    }
 }
 export interface BalAccordionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -3211,6 +3232,10 @@ export interface BalToastCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBalToastElement;
 }
+export interface BalTooltipCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBalTooltipElement;
+}
 declare global {
     interface HTMLBalAccordionElement extends Components.BalAccordion, HTMLStencilElement {
     }
@@ -4064,6 +4089,12 @@ declare global {
         prototype: HTMLBalToastElement;
         new (): HTMLBalToastElement;
     };
+    interface HTMLBalTooltipElement extends Components.BalTooltip, HTMLStencilElement {
+    }
+    var HTMLBalTooltipElement: {
+        prototype: HTMLBalTooltipElement;
+        new (): HTMLBalTooltipElement;
+    };
     interface HTMLElementTagNameMap {
         "bal-accordion": HTMLBalAccordionElement;
         "bal-accordion-details": HTMLBalAccordionDetailsElement;
@@ -4207,6 +4238,7 @@ declare global {
         "bal-textarea": HTMLBalTextareaElement;
         "bal-time-input": HTMLBalTimeInputElement;
         "bal-toast": HTMLBalToastElement;
+        "bal-tooltip": HTMLBalTooltipElement;
     }
 }
 declare namespace LocalJSX {
@@ -7331,6 +7363,32 @@ declare namespace LocalJSX {
          */
         "onBalClose"?: (event: BalToastCustomEvent<BalEvents.BalToastCloseDetail>) => void;
     }
+    interface BalTooltip {
+        /**
+          * Defines the width of the content
+         */
+        "contentWidth"?: number;
+        /**
+          * Offset form trigger to tooltip.
+         */
+        "offset"?: number;
+        /**
+          * Emitted after the animation has finished
+         */
+        "onBalDidAnimate"?: (event: BalTooltipCustomEvent<BalEvents.BalTooltipDidAnimateDetail>) => void;
+        /**
+          * Emitted before the animation starts
+         */
+        "onBalWillAnimate"?: (event: BalTooltipCustomEvent<BalEvents.BalTooltipWillAnimateDetail>) => void;
+        /**
+          * If set it turns a tooltip into a fullscreen or a drawer on touch devices
+         */
+        "placement"?: BalProps.BalTooltipPlacement;
+        /**
+          * Id of the reference element default is the trigger element.
+         */
+        "reference"?: string;
+    }
     interface IntrinsicElements {
         "bal-accordion": BalAccordion;
         "bal-accordion-details": BalAccordionDetails;
@@ -7474,6 +7532,7 @@ declare namespace LocalJSX {
         "bal-textarea": BalTextarea;
         "bal-time-input": BalTimeInput;
         "bal-toast": BalToast;
+        "bal-tooltip": BalTooltip;
     }
 }
 export { LocalJSX as JSX };
@@ -7622,6 +7681,7 @@ declare module "@stencil/core" {
             "bal-textarea": LocalJSX.BalTextarea & JSXBase.HTMLAttributes<HTMLBalTextareaElement>;
             "bal-time-input": LocalJSX.BalTimeInput & JSXBase.HTMLAttributes<HTMLBalTimeInputElement>;
             "bal-toast": LocalJSX.BalToast & JSXBase.HTMLAttributes<HTMLBalToastElement>;
+            "bal-tooltip": LocalJSX.BalTooltip & JSXBase.HTMLAttributes<HTMLBalTooltipElement>;
         }
     }
 }
diff --git a/packages/components/src/components/bal-tooltip/bal-tooltip.interfaces.ts b/packages/components/src/components/bal-tooltip/bal-tooltip.interfaces.ts
@@ -0,0 +1,27 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />
+
+namespace BalProps {
+  export type BalTooltipTouchPosition = 'top' | 'bottom'
+  export type BalTooltipVariant = 'popover' | 'fullscreen' | 'drawer'
+
+  export type BalTooltipPlacement = 'top' | 'right' | 'bottom' | 'left'
+}
+
+namespace BalEvents {
+  export interface BalTooltipCustomEvent<T> extends CustomEvent<T> {
+    detail: T
+    target: HTMLBalTooltipElement
+  }
+
+  export type BalTooltipChangeDetail = boolean
+  export type BalTooltipChange = BalTooltipCustomEvent<BalTooltipChangeDetail>
+
+  export type BalTooltipWillAnimateDetail = boolean
+  export type BalTooltipWillAnimate = BalTooltipCustomEvent<BalTooltipWillAnimateDetail>
+
+  export type BalTooltipDidAnimateDetail = boolean
+  export type BalTooltipDidAnimate = BalTooltipCustomEvent<BalTooltipDidAnimateDetail>
+}
diff --git a/packages/components/src/components/bal-tooltip/bal-tooltip.sass b/packages/components/src/components/bal-tooltip/bal-tooltip.sass
@@ -0,0 +1,54 @@
+@import '@baloise/design-system-css/sass/mixins'
+@import './bal-tooltip.vars.sass'
+
+// Tooltip
+// --------------------------------------------------
+:host
+  position: static
+  display: inline
+  z-index: var(--bal-z-index-tooltip)
+
+// Tooltip Container
+// --------------------------------------------------
+.bal-tooltip__container
+  background-color: var(--bal-tooltip-container-background)
+  display: none
+  visibility: hidden
+  color: white
+  padding: var(--bal-space-x-small)
+  border-radius: var(--bal-tooltip-radius)
+  box-shadow: var(--bal-tooltip-shadow)
+  width: var(--bal-tooltip-max-width)
+  position: absolute
+  top: 0
+  left: 0
+
+// Tooltip Container Inner
+// --------------------------------------------------
+.bal-tooltip__inner
+  overflow-y: auto
+  max-height: calc(var(--bal-app-height, 100%) - 8rem)
+
+// Tooltip Content
+// --------------------------------------------------
+.bal-tooltip__inner__content
+  width: 100%
+  font-family: var(--bal-tooltip-font-family)
+  font-size: var(--bal-tooltip-font-size)
+
+// Tooltip Arrow
+// --------------------------------------------------
+.bal-tooltip__arrow
+  +unselectable
+  position: absolute
+  width: .5rem
+  height: .5rem
+  background: var(--bal-tooltip-arrow-background)
+  transform: rotate(45deg)
+  display: none
+  visibility: hidden
+
+.bal-tooltip-variant-popover-trigger,
+.bal-tooltip-permanent-trigger
+  z-index: calc(var(--bal-z-index-tooltip) + 1) !important
+  position: relative !important