@ordergroove/offers 2.45.6-alpha-PR-1241-2.6 → 2.45.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.45.6-alpha-PR-1241-2.6+370a7cae",
+  "version": "2.45.6",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -49,5 +49,5 @@
     "@ordergroove/offers-templates": "^0.9.8",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "370a7cae4b24ebc33219ca374ae22f8eaa51a5f2"
+  "gitHead": "60f759b8f2452b4569e6e5d0f6c8e06c96581d8e"
 }

package/src/components/Tooltip.js

@@ -1,32 +1,9 @@
 import { LitElement, html, css } from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-
-const ACTIVATION_TYPES = {
-  AUTOMATIC: 'automatic',
-  MANUAL: 'manual'
-};
 
 export class Tooltip extends LitElement {
-  constructor() {
-    super();
-    this.triggerLabel = 'Show tooltip';
-    this.open = false;
-    /** Default is "automatic" for backwards compatibility with existing templates */
-    this.activationType = ACTIVATION_TYPES.AUTOMATIC;
-  }
-
   static get properties() {
     return {
-      placement: { type: String, default: 'bottom' },
-      /** Set the aria-label attribute of the trigger. */
-      triggerLabel: { type: String, attribute: 'trigger-label' },
-      /**
-       * "automatic" - show tooltip on hover and focus
-       * "manual" - show tooltip on hover and click
-       */
-      activationType: { type: String, attribute: 'activation-type' },
-      /** Whether the tooltip is showing. Internal property; only here so that we re-render when it changes */
-      open: { type: Boolean, attribute: false }
+      placement: { type: String, default: 'bottom' }
     };
   }
 
@@ -42,27 +19,11 @@ export class Tooltip extends LitElement {
         z-index: 9;
       }
 
-      /* reset default button styles */
-      button.trigger {
-        all: unset;
-      }
-
-      /* do not reset the button's default focus outline */
-      button.trigger:focus {
-        outline: revert;
-      }
-
       .trigger {
         display: block;
         cursor: pointer;
       }
 
-      /* for manual activation, hide the content completely from screen readers when the tooltip is closed */
-      /* otherwise, interactive elements may receive focus even when they are not visible */
-      [data-manual] .content {
-        visibility: hidden;
-      }
-
       .content {
         box-sizing: border-box;
         font-family: var(--og-tooltip-family, inherit);
@@ -191,8 +152,9 @@ export class Tooltip extends LitElement {
         border-left: solid var(--og-tooltip-background, #ececec) 10px;
       }
 
-      .tooltip[data-open] .content {
-        visibility: visible;
+      .tooltip:hover .content,
+      .trigger:focus + .content,
+      .content:focus-within {
         opacity: 1;
         width: 200px;
         pointer-events: auto;
@@ -203,21 +165,12 @@ export class Tooltip extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.abortController = new AbortController();
-    const signal = this.abortController.signal;
-
-    this.addEventListener('mouseenter', this.handleMouseEnter.bind(this), { signal });
-    this.addEventListener('mouseleave', this.handleMouseLeave.bind(this), { signal });
-    this.addEventListener('focusin', this.handleFocusIn.bind(this), { signal });
-    this.addEventListener('focusout', this.handleFocusOut.bind(this), { signal });
-    this.addEventListener('keydown', this.handleKeyDown.bind(this), { signal });
-
-    document.addEventListener('click', this.handleDocumentClick.bind(this), { signal });
+    this.recalculatePosition = this.recalculatePosition.bind(this);
+    this.addEventListener('mouseenter', this.recalculatePosition);
+    this.addEventListener('focusin', this.recalculatePosition);
   }
 
-  async recalculatePosition() {
-    // wait for state changes to apply
-    await this.updateComplete;
+  recalculatePosition() {
     const trigger = this.shadowRoot.querySelector('.trigger');
     const triggerRect = trigger.getBoundingClientRect();
     const content = this.shadowRoot.querySelector('.content');
@@ -228,83 +181,19 @@ export class Tooltip extends LitElement {
       content.style.top = `${(-1 * contentRect.height + triggerRect.height) / 2}px`;
   }
 
-  handleMouseEnter() {
-    this.open = true;
-    this.recalculatePosition();
-  }
-
-  handleMouseLeave() {
-    this.open = false;
-  }
-
-  handleFocusIn() {
-    if (this.activationType !== ACTIVATION_TYPES.AUTOMATIC) return;
-    this.open = true;
-    this.recalculatePosition();
-  }
-
-  handleFocusOut(event) {
-    if (this.activationType !== ACTIVATION_TYPES.AUTOMATIC) return;
-    // keep the tooltip open if we're moving focus to another element inside the tooltip
-    if (!this.contains(event.relatedTarget)) {
-      this.open = false;
-    }
-  }
-
-  handleKeyDown(event) {
-    if (this.activationType !== ACTIVATION_TYPES.MANUAL) return;
-    // close the tooltip on Escape press
-    if (event.key === 'Escape' && this.open) {
-      this.open = false;
-      event.stopPropagation();
-    }
-  }
-
-  handleClick() {
-    if (this.activationType !== ACTIVATION_TYPES.MANUAL) return;
-    this.open = !this.open;
-    this.recalculatePosition();
-  }
-
-  handleDocumentClick(event) {
-    if (this.activationType !== ACTIVATION_TYPES.MANUAL || !this.open) return;
-    // close the tooltip if the user clicks outside of it
-    if (!this.contains(event.target)) {
-      this.open = false;
-    }
-  }
-
   disconnectedCallback() {
     super.disconnectedCallback();
-    // remove event listeners
-    this.abortController.abort();
+    this.removeEventListener('mouseenter', this.recalculatePosition);
+    this.removeEventListener('focusin', this.recalculatePosition);
   }
 
   render() {
-    // allow removing aria-label by setting trigger-label to any falsy value
-    // e.g. if the content inside the tooltip is sufficient
-    const triggerLabel = this.triggerLabel ? this.triggerLabel : undefined;
-
     return html`
-      <span class="tooltip" ?data-open="${this.open}" ?data-manual="${this.activationType === ACTIVATION_TYPES.MANUAL}">
-        ${this.activationType === ACTIVATION_TYPES.MANUAL
-          ? html`
-              <button
-                class="trigger"
-                aria-label="${ifDefined(triggerLabel)}"
-                aria-expanded="${this.open}"
-                aria-controls="tooltip-content"
-                @click="${this.handleClick}"
-              >
-                <slot name="trigger">${this.trigger}</slot>
-              </button>
-            `
-          : html`
-              <span class="trigger" tabindex="0" aria-label="${ifDefined(triggerLabel)}">
-                <slot name="trigger">${this.trigger}</slot>
-              </span>
-            `}
-        <div class="content ${this.placement || 'bottom'}" role="tooltip" id="tooltip-content">
+      <span class="tooltip">
+        <span class="trigger" tabindex="0">
+          <slot name="trigger">${this.trigger}</slot>
+        </span>
+        <div class="content ${this.placement || 'bottom'}">
           <slot name="content">${this.content}</slot>
         </div>
       </span>

package/src/components/__tests__/Tooltip.spec.js

@@ -16,20 +16,17 @@ describe('Tooltip', () => {
     );
   });
 
-  const getTooltip = async ({ placement, activationType } = {}) => {
+  const getTooltip = async placement => {
     const element = new Tooltip();
     if (placement) {
       element.setAttribute('placement', placement);
     }
-    if (activationType) {
-      element.setAttribute('activation-type', activationType);
-    }
     await appendToBody(element);
     return element;
   };
 
   const checkContentStyles = async (expectedStyles, placement, contentStyles) => {
-    const element = await getTooltip({ placement });
+    const element = await getTooltip(placement);
     const contentDiv = element.shadowRoot.querySelector('.content');
 
     // Modify shadow content
@@ -39,7 +36,7 @@ describe('Tooltip', () => {
       });
     }
 
-    await element.recalculatePosition();
+    element.recalculatePosition();
     Object.keys(expectedStyles).forEach(key => expect(contentDiv.style[key]).toEqual(expectedStyles[key]));
   };
 
@@ -78,211 +75,4 @@ describe('Tooltip', () => {
   it('should not set style properties if placement is top-left', async () => {
     await checkContentStyles({ top: '', left: '' }, 'top-left');
   });
-
-  const ACTIVATION_TYPES = ['automatic', 'manual'];
-
-  ACTIVATION_TYPES.forEach(activationType => {
-    it(`${activationType} should show tooltip on mouseenter`, async () => {
-      const element = await getTooltip({ activationType });
-      expect(element.open).toBe(false);
-
-      element.dispatchEvent(new Event('mouseenter'));
-      await element.updateComplete;
-
-      expect(element.open).toBe(true);
-    });
-
-    it(`${activationType} should hide tooltip on mouseleave`, async () => {
-      const element = await getTooltip();
-      element.open = true;
-      await element.updateComplete;
-
-      element.dispatchEvent(new Event('mouseleave'));
-      await element.updateComplete;
-
-      expect(element.open).toBe(false);
-    });
-
-    it(`${activationType} should remove aria-label when trigger-label is empty`, async () => {
-      const element = await getTooltip({ activationType });
-      element.setAttribute('trigger-label', '');
-      await element.updateComplete;
-
-      const trigger = element.shadowRoot.querySelector('.trigger');
-      expect(trigger.hasAttribute('aria-label')).toBe(false);
-    });
-
-    it(`${activationType} should set aria-label when trigger-label has value`, async () => {
-      const element = await getTooltip({ activationType });
-      element.setAttribute('trigger-label', 'Custom tooltip label');
-      await element.updateComplete;
-
-      const trigger = element.shadowRoot.querySelector('.trigger');
-      expect(trigger.getAttribute('aria-label')).toBe('Custom tooltip label');
-    });
-  });
-
-  describe('automatic activation behavior', () => {
-    it('should show tooltip on focusin', async () => {
-      const element = await getTooltip();
-      expect(element.open).toBe(false);
-
-      element.dispatchEvent(new Event('focusin'));
-      await element.updateComplete;
-
-      expect(element.open).toBe(true);
-    });
-
-    it('should hide tooltip on focusout when focus moves outside', async () => {
-      const element = await getTooltip();
-      const externalElement = document.createElement('div');
-      document.body.appendChild(externalElement);
-
-      element.open = true;
-      await element.updateComplete;
-
-      const focusOutEvent = new FocusEvent('focusout', { relatedTarget: externalElement });
-      element.dispatchEvent(focusOutEvent);
-      await element.updateComplete;
-
-      expect(element.open).toBe(false);
-      document.body.removeChild(externalElement);
-    });
-
-    it('should keep tooltip open on focusout when focus stays within tooltip', async () => {
-      const element = await getTooltip();
-      const trigger = element.shadowRoot.querySelector('.trigger');
-
-      element.open = true;
-      await element.updateComplete;
-
-      // focus moving out of one element and back to the trigger
-      const focusOutEvent = new FocusEvent('focusout', { relatedTarget: trigger });
-      element.dispatchEvent(focusOutEvent);
-      await element.updateComplete;
-
-      expect(element.open).toBe(true);
-    });
-
-    it('should not open tooltip on click', async () => {
-      const element = await getTooltip();
-      const trigger = element.shadowRoot.querySelector('.trigger');
-
-      expect(element.open).toBe(false);
-
-      trigger.click();
-      await element.updateComplete;
-
-      expect(element.open).toBe(false);
-    });
-
-    it('should not do anything when clicking outside tooltip', async () => {
-      const element = await getTooltip();
-      element.open = true;
-      await element.updateComplete;
-
-      const outsideClick = new Event('click', { bubbles: true });
-      document.body.dispatchEvent(outsideClick);
-      await element.updateComplete;
-
-      expect(element.open).toBe(true);
-    });
-
-    it('updates attributes', async () => {
-      const element = await getTooltip();
-      element.open = true;
-      await element.updateComplete;
-
-      let style = getComputedStyle(element.shadowRoot.querySelector('.content'));
-      expect(style.opacity).toBe('1');
-
-      element.open = false;
-      await element.updateComplete;
-      style = getComputedStyle(element.shadowRoot.querySelector('.content'));
-      expect(style.opacity).toBe('0');
-    });
-  });
-
-  describe('manual activation behavior', () => {
-    it('should toggle tooltip on click', async () => {
-      const element = await getTooltip({ activationType: 'manual' });
-      const trigger = element.shadowRoot.querySelector('.trigger');
-
-      expect(element.open).toBe(false);
-
-      trigger.click();
-      await element.updateComplete;
-      expect(element.open).toBe(true);
-
-      trigger.click();
-      await element.updateComplete;
-      expect(element.open).toBe(false);
-    });
-
-    it('should not open tooltip on focus', async () => {
-      const element = await getTooltip({ activationType: 'manual' });
-
-      expect(element.open).toBe(false);
-
-      element.dispatchEvent(new Event('focusin'));
-      await element.updateComplete;
-
-      expect(element.open).toBe(false);
-    });
-
-    it('should close tooltip when clicking outside', async () => {
-      const element = await getTooltip({ activationType: 'manual' });
-      element.open = true;
-      await element.updateComplete;
-
-      const outsideClick = new Event('click', { bubbles: true });
-      document.body.dispatchEvent(outsideClick);
-      await element.updateComplete;
-
-      expect(element.open).toBe(false);
-    });
-
-    it('updates attributes', async () => {
-      const element = await getTooltip({ activationType: 'manual' });
-      element.open = true;
-      await element.updateComplete;
-      expect(element.shadowRoot.querySelector('.trigger').ariaExpanded).toBe('true');
-      let style = getComputedStyle(element.shadowRoot.querySelector('.content'));
-      expect(style.visibility).toBe('visible');
-      expect(style.opacity).toBe('1');
-
-      element.open = false;
-      await element.updateComplete;
-      expect(element.shadowRoot.querySelector('.trigger').ariaExpanded).toBe('false');
-      style = getComputedStyle(element.shadowRoot.querySelector('.content'));
-      expect(style.visibility).toBe('hidden');
-      expect(style.opacity).toBe('0');
-    });
-
-    it('should close tooltip on Escape key', async () => {
-      const element = await getTooltip({ activationType: 'manual' });
-      element.open = true;
-      await element.updateComplete;
-
-      expect(element.open).toBe(true);
-
-      const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
-      element.dispatchEvent(escapeEvent);
-      await element.updateComplete;
-
-      expect(element.open).toBe(false);
-    });
-
-    it('should not close tooltip on other keys', async () => {
-      const element = await getTooltip({ activationType: 'manual' });
-      element.open = true;
-      await element.updateComplete;
-
-      const enterEvent = new KeyboardEvent('keydown', { key: 'Alt' });
-      element.dispatchEvent(enterEvent);
-      await element.updateComplete;
-
-      expect(element.open).toBe(true);
-    });
-  });
 });

package/src/core/__tests__/experiments.spec.js

@@ -97,7 +97,11 @@ describe('experiments', () => {
   }
   inputs.forEach(weights =>
     it(`should roll the dice ${weights}`, () => {
-      expect(test(weights)).toEqual(weights);
+      const results = test(weights);
+      results.forEach((result, index) => {
+        // since this is random, we give it +-1 margin of error
+        expect(Math.abs(result - weights[index])).toBeLessThanOrEqual(1);
+      });
     })
   );
 });

package/src/make-api.js

@@ -109,6 +109,7 @@ export default function makeApi(store) {
         delete window.og;
       } else {
         window.og.previewMode = true;
+        console.log('OG Offers preview mode enabled');
       }
       return this;
     },