refactor(tooltip): lint warnings are fixed (#170)

Trendyol · Jul 26, 2022 · 6a97d12 · 6a97d12
1 parent 0d986ef
commit 6a97d12
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 54 deletions.
diff --git a/src/components/tooltip/bl-tooltip.css b/src/components/tooltip/bl-tooltip.css
@@ -40,7 +40,7 @@
   top: var(--bl-tooltip-arrow-top);
   bottom: var(--bl-tooltip-arrow-bottom);
   right: var(--bl-tooltip-arrow-right);
-  left: var(--bl-tooltip-arrow-left)
+  left: var(--bl-tooltip-arrow-left);
 }
 
 .visible {
@@ -49,4 +49,4 @@
 
 .hidden {
   --bl-tooltip-visibility: hidden;
-}
+}
diff --git a/src/components/tooltip/bl-tooltip.test.ts b/src/components/tooltip/bl-tooltip.test.ts
@@ -1,9 +1,8 @@
-import { assert, elementUpdated, expect, fixture, html,oneEvent } from '@open-wc/testing';
+import { assert, elementUpdated, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { sendMouse } from '@web/test-runner-commands';
 import BlTooltip from './bl-tooltip';
 import type typeOfBlTooltip from './bl-tooltip';
 
-
 describe('bl-tooltip', () => {
   it('should be defined tooltip instance', () => {
     //when
@@ -21,11 +20,11 @@ describe('bl-tooltip', () => {
     assert.shadowDom.equal(
       el,
       `
-      <slot 
-       class="trigger" 
+      <slot
+       class="trigger"
        name="tooltip-trigger">
       </slot>
-      <div class='tooltip'>  
+      <div class='tooltip'>
         <slot></slot>
         <div class="arrow"></div>
       </div>
@@ -43,27 +42,35 @@ describe('bl-tooltip', () => {
 
   it('should be rendered with slot', async () => {
     //when
-    const el = await fixture<typeOfBlTooltip>(html`<bl-tooltip><button slot='tooltip-trigger'>Test</button>
-    Tooltip Test </bl-tooltip>`);
+    const el = await fixture<typeOfBlTooltip>(html`<bl-tooltip
+      ><button slot="tooltip-trigger">Test</button> Tooltip Test
+    </bl-tooltip>`);
 
     //then
     expect(el.shadowRoot?.querySelector('.trigger')).to.exist;
     expect(el.shadowRoot?.querySelector('.arrow')).to.exist;
     expect(el.shadowRoot?.querySelector('.tooltip')).to.exist;
   });
 
-
   it('should be rendered with correct placement attribute', async () => {
     //when
-    const el = await fixture<typeOfBlTooltip>(html`<bl-tooltip placement="top-end"><button slot='tooltip-trigger'>Test</button> Test Tooltip</bl-tooltip>`);
+    const el = await fixture<typeOfBlTooltip>(
+      html`<bl-tooltip placement="top-end"
+        ><button slot="tooltip-trigger">Test</button> Test Tooltip</bl-tooltip
+      >`
+    );
 
     //then
     expect(el.getAttribute('placement')).to.eq('top-end');
   });
 
   it('should be rendered with correct placement attribute when placement attribute was changed', async () => {
     //given
-    const el = await fixture<typeOfBlTooltip>(html`<bl-tooltip placement="top-end"><button slot='tooltip-trigger'>Test</button> Test Tooltip</bl-tooltip>`);
+    const el = await fixture<typeOfBlTooltip>(
+      html`<bl-tooltip placement="top-end"
+        ><button slot="tooltip-trigger">Test</button> Test Tooltip</bl-tooltip
+      >`
+    );
     el.setAttribute('placement', 'right-start');
 
     //when
@@ -72,10 +79,14 @@ describe('bl-tooltip', () => {
     //then
     expect(el.getAttribute('placement')).to.eq('right-start');
   });
-   
+
   it('should have `visible` class when mouse over of trigger', async () => {
     //given
-    const el = await fixture<typeOfBlTooltip>(html`<bl-tooltip placement="top-end"><button slot='tooltip-trigger'>Test</button> Test Tooltip</bl-tooltip>`);
+    const el = await fixture<typeOfBlTooltip>(
+      html`<bl-tooltip placement="top-end"
+        ><button slot="tooltip-trigger">Test</button> Test Tooltip</bl-tooltip
+      >`
+    );
     const tooltip = el.shadowRoot?.querySelector('.tooltip') as HTMLElement;
     const trigger = document.querySelector('button') as HTMLElement;
     const { x, y } = getMiddleOfElement(trigger);
@@ -89,13 +100,17 @@ describe('bl-tooltip', () => {
 
   it('should not have `show` class when mouse leave of trigger', async () => {
     //given
-    const el = await fixture<typeOfBlTooltip>(html`<bl-tooltip placement="left-end"><button slot='tooltip-trigger'>Test</button> Test Tooltip</bl-tooltip>`);
+    const el = await fixture<typeOfBlTooltip>(
+      html`<bl-tooltip placement="left-end"
+        ><button slot="tooltip-trigger">Test</button> Test Tooltip</bl-tooltip
+      >`
+    );
     const tooltip = el.shadowRoot?.querySelector('.tooltip') as HTMLElement;
     const trigger = document.querySelector('button') as HTMLElement;
     const body = document.querySelector('body') as HTMLElement;
 
-    const { x:triggerX, y:triggerY } = getMiddleOfElement(trigger);
-    const { x:bodyX, y:bodyY } = getMiddleOfElement(body);
+    const { x: triggerX, y: triggerY } = getMiddleOfElement(trigger);
+    const { x: bodyX, y: bodyY } = getMiddleOfElement(body);
 
     //when
     await sendMouse({ type: 'move', position: [triggerX, triggerY] });
@@ -107,7 +122,11 @@ describe('bl-tooltip', () => {
 
   it('should fires bl-tooltip-show on mouse over', async () => {
     //given
-    const el = await fixture<typeOfBlTooltip>(html`<bl-tooltip placement="top-end"><button slot='tooltip-trigger'>Test</button> Test Tooltip</bl-tooltip>`);
+    const el = await fixture<typeOfBlTooltip>(
+      html`<bl-tooltip placement="top-end"
+        ><button slot="tooltip-trigger">Test</button> Test Tooltip</bl-tooltip
+      >`
+    );
     const trigger = document.querySelector('button') as HTMLElement;
     const { x, y } = getMiddleOfElement(trigger);
 
@@ -117,21 +136,25 @@ describe('bl-tooltip', () => {
     //then
     const ev = await oneEvent(el, 'bl-tooltip-show');
     expect(ev).to.exist;
-    expect(ev.detail).to.be.equal('Show event fired!');  
+    expect(ev.detail).to.be.equal('Show event fired!');
   });
 
   it('should fires bl-tooltip-hide on mouse leave', async () => {
     //given
-    const el = await fixture<typeOfBlTooltip>(html`<bl-tooltip placement="left-end"><button slot='tooltip-trigger'>Test</button> Test Tooltip</bl-tooltip>`);
+    const el = await fixture<typeOfBlTooltip>(
+      html`<bl-tooltip placement="left-end"
+        ><button slot="tooltip-trigger">Test</button> Test Tooltip</bl-tooltip
+      >`
+    );
     const trigger = document.querySelector('button') as HTMLElement;
     const body = document.querySelector('body') as HTMLElement;
-    const { x:triggerX, y:triggerY } = getMiddleOfElement(trigger);
-    const { x:bodyX, y:bodyY } = getMiddleOfElement(body);
+    const { x: triggerX, y: triggerY } = getMiddleOfElement(trigger);
+    const { x: bodyX, y: bodyY } = getMiddleOfElement(body);
 
     //when
-    await sendMouse({ type: 'move', position: [triggerX, triggerY]});
-    setTimeout(() =>  {
-      sendMouse({ type: 'move', position: [bodyX, bodyY]})
+    await sendMouse({ type: 'move', position: [triggerX, triggerY] });
+    setTimeout(() => {
+      sendMouse({ type: 'move', position: [bodyX, bodyY] });
     });
 
     //then

diff --git a/src/components/tooltip/bl-tooltip.ts b/src/components/tooltip/bl-tooltip.ts
@@ -20,7 +20,7 @@ export type Placement =
   | 'right'
   | 'right-end';
 
-  /**
+/**
  * @tag bl-tooltip
  * @summary Baklava Tooltip component
  *
@@ -41,41 +41,48 @@ export default class BlTooltip extends LitElement {
 
   /**
    * Sets placement of the tooltip
-  */
+   */
   @property({ type: String })
   placement: Placement = 'top';
 
   @state() private _visible = false;
-  @state() private _position : Strategy = 'absolute';
-  @state() private host : HTMLElement;
+  @state() private _position: Strategy = 'absolute';
+  @state() private host: HTMLElement;
 
   /**
-  * Fires when hovering over a trigger
-  */
+   * Fires when hovering over a trigger
+   */
   @event('bl-tooltip-show') private onShow: EventDispatcher<string>;
 
   /**
-  * Fires when leaving over from trigger
-  */
+   * Fires when leaving over from trigger
+   */
   @event('bl-tooltip-hide') private onHide: EventDispatcher<string>;
 
   connectedCallback() {
     super.connectedCallback();
 
     setTimeout(() => {
-     this.host = this.shadowRoot?.host as HTMLElement;
-     this._position = getComputedStyle(this.host).getPropertyValue('--bl-tooltip-position') as Strategy; 
+      this.host = this.shadowRoot?.host as HTMLElement;
+      this._position = getComputedStyle(this.host).getPropertyValue(
+        '--bl-tooltip-position'
+      ) as Strategy;
     });
   }
 
   private setTooltip() {
     computePosition(this.trigger, this.tooltip, {
       placement: this.placement,
       strategy: this._position,
-      middleware: [offset(8), shift({ padding: 5 }), flip(),arrow({ element: this.arrow,padding: 5})],
+      middleware: [
+        offset(8),
+        shift({ padding: 5 }),
+        flip(),
+        arrow({ element: this.arrow, padding: 5 }),
+      ],
     }).then(({ x, y, placement, middlewareData }) => {
       const arrowX = middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : ' ';
-      const arrowY = middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px`  : ' ';
+      const arrowY = middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : ' ';
       const arrowDirections = {
         top: 'bottom',
         right: 'left',
@@ -85,13 +92,13 @@ export default class BlTooltip extends LitElement {
       const tooltipPlacement = placement.split('-')[0] as keyof typeof arrowDirections;
       const arrowDirection = arrowDirections[tooltipPlacement];
 
-      this.host.style.setProperty('--bl-tooltip-left',`${x}px`);
-      this.host.style.setProperty('--bl-tooltip-top',`${y}px`)
-      this.host.style.setProperty('--bl-tooltip-arrow-left',arrowX);
-      this.host.style.setProperty('--bl-tooltip-arrow-top',arrowY);
-      this.host.style.setProperty('--bl-tooltip-arrow-bottom','0');
-      this.host.style.setProperty('--bl-tooltip-arrow-right','0');
-      this.host.style.setProperty(`--bl-tooltip-arrow-${arrowDirection}`,'-4px');
+      this.host.style.setProperty('--bl-tooltip-left', `${x}px`);
+      this.host.style.setProperty('--bl-tooltip-top', `${y}px`);
+      this.host.style.setProperty('--bl-tooltip-arrow-left', arrowX);
+      this.host.style.setProperty('--bl-tooltip-arrow-top', arrowY);
+      this.host.style.setProperty('--bl-tooltip-arrow-bottom', '0');
+      this.host.style.setProperty('--bl-tooltip-arrow-right', '0');
+      this.host.style.setProperty(`--bl-tooltip-arrow-${arrowDirection}`, '-4px');
     });
   }
 
@@ -106,20 +113,20 @@ export default class BlTooltip extends LitElement {
     this.onHide('Hide event fired!');
   }
 
-  render(): TemplateResult { 
+  render(): TemplateResult {
     const classes = classMap({
-      'tooltip': true,
-      'visible': this._visible,
+      tooltip: true,
+      visible: this._visible,
     });
 
-    return html`
-      <slot 
-        class="trigger" 
+    return html` <slot
+        class="trigger"
         name="tooltip-trigger"
-        @mouseover="${this.show}" 
-        @mouseleave="${this.hide}">
+        @mouseover="${this.show}"
+        @mouseleave="${this.hide}"
+      >
       </slot>
-      <div class=${classes}>  
+      <div class=${classes}>
         <slot></slot>
         <div class="arrow"></div>
       </div>`;
@@ -130,4 +137,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'bl-tooltip': BlTooltip;
   }
-}
+}