@salesforcedevs/dx-components 0.5.5-alpha1 → 0.8.1

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.5.5-alpha1",
+    "version": "0.8.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -22,11 +22,12 @@
         "debounce": "^1.2.0",
         "lightning-base-components": "1.12.3-alpha",
         "lodash.get": "^4.4.2",
-        "tippy.js": "^6.2.7"
+        "microtip": "0.2.2"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
-    }
+    },
+    "gitHead": "9c9dc1dbb7ff863bfa26b863daac98f638b7c299"
 }

package/src/modules/dx/codeBlock/codeBlock.html

@@ -28,7 +28,7 @@
                 </template>
                 <template if:true={showCodeSourceBtn}>
                     <div class="toolbar-item">
-                        <dx-tooltip persist label="View Code Source">
+                        <dx-tooltip label="View Code Source">
                             <dx-button
                                 href={sourceLink}
                                 type="button"
@@ -57,7 +57,7 @@
                 </div>
                 <div class="divider"></div>
                 <div class="toolbar-item">
-                    <dx-tooltip persist label={copyBtnText}>
+                    <dx-tooltip label={copyBtnText}>
                         <dx-button
                             onclick={copySource}
                             type="button"

package/src/modules/dx/dropdown/__tests__/dropdown.test.ts

@@ -1,5 +1,6 @@
 import Dropdown from "dx/dropdown";
 import DropdownOption from "dx/dropdownOption";
+import Popover from "dx/popover";
 import { getOptionsCount } from "utils/options";
 import { createRenderComponent } from "utils/tests";
 import mockNestedOptions from "./mockNestedOptions";
@@ -12,6 +13,13 @@ describe(TAG, () => {
     describe("render", () => {
         it("renders all options when open", () => {
             const component = render({ ...mockProps, open: true });
+
+            const menuDiv: HTMLElement = component.shadowRoot.querySelector(
+                ".menu_list"
+            );
+            expect(menuDiv).not.toBeNull();
+            expect(menuDiv.getAttribute("role")).toBe("menu");
+
             const options = component.shadowRoot.querySelectorAll(
                 "dx-dropdown-option"
             );
@@ -55,6 +63,24 @@ describe(TAG, () => {
             expect(id).toEqual(mockProps.value);
             return expect(component).toBeAccessible();
         });
+
+        it("renders with menu-offset-small and menu-hidden", () => {
+            const component = render({ offset: "small", options: [] });
+            const popover: Popover = component.shadowRoot.querySelector(
+                "dx-popover"
+            );
+            expect(popover).not.toBeNull();
+
+            expect(popover.classList).toContain("menu-offset-small");
+            expect(popover.classList).toContain("menu-hidden");
+
+            const options = component.shadowRoot.querySelectorAll(
+                "dx-dropdown-option"
+            );
+            expect(options).toHaveLength(0);
+
+            return expect(component).toBeAccessible();
+        });
     });
 
     describe("interactions", () => {
@@ -98,34 +124,49 @@ describe(TAG, () => {
             option.dispatchEvent(new CustomEvent("select", { detail: id }));
 
             expect(mockClose).toHaveBeenCalledTimes(1);
-            expect(component.open).toEqual(false);
             return expect(component).toBeAccessible();
         });
 
-        it("handles open event from popover", () => {
-            const component = render(mockProps);
-            expect(component.open).toBeFalsy();
+        it("handles keydown event with ArrowDown key", () => {
+            const [firstOption] = mockProps.options;
+            const component = render({ ...mockProps, value: null, open: true });
+            expect(component.focusedValue).toBeNull();
 
-            const popover: HTMLElement = component.shadowRoot.querySelector(
-                "dx-popover"
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowDown" })
             );
-            expect(popover).not.toBeNull();
-            popover.dispatchEvent(new CustomEvent("open"));
+            expect(component.focusedValue).toBe(firstOption.id);
+        });
+
+        it("ignores other click keys", () => {
+            const component = render({ ...mockProps, open: true });
 
-            expect(component.open).toBe(true);
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowDown" })
+            );
+            expect(component.focusedValue).toBe(mockProps.value);
+
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowLeft" })
+            );
+
+            expect(component.focusedValue).toBe(mockProps.value);
         });
 
         it("handles close event from popover", () => {
             const component = render({ ...mockProps, open: true });
-            expect(component.open).toBe(true);
+
+            component.dispatchEvent(
+                new KeyboardEvent("keydown", { key: "ArrowDown" })
+            );
+            expect(component.focusedValue).toBe(mockProps.value);
 
             const popover: HTMLElement = component.shadowRoot.querySelector(
                 "dx-popover"
             );
             expect(popover).not.toBeNull();
             popover.dispatchEvent(new CustomEvent("close"));
-
-            expect(component.open).toBe(false);
+            expect(component.focusedValue).toBeNull();
         });
     });
 });

package/src/modules/dx/dropdown/dropdown.html

@@ -4,7 +4,6 @@
         class={className}
         full-width={fullWidth}
         offset={offset}
-        onopen={onOpen}
         onclose={onClose}
         open-on-hover={openOnHover}
         open={open}

package/src/modules/dx/dropdown/dropdown.ts

@@ -23,6 +23,7 @@ export default class Dropdown extends LightningElement {
     @api ariaLabel: string | null = null;
     @api tempId: string | null = null;
     @api offset?: "small" | "medium";
+    @api open: boolean | null = null;
     @api pagePadding?: number = 16; // padding between dropdown and the edge of the page
     @api placement?: PopperPlacement = "bottom-start";
     @api small?: boolean = false;
@@ -44,12 +45,8 @@ export default class Dropdown extends LightningElement {
     }
 
     @api
-    get open() {
-        return this._open;
-    }
-
-    set open(value) {
-        this._open = value;
+    get focusedValue() {
+        return this._focusedValue;
     }
 
     @track
@@ -57,8 +54,7 @@ export default class Dropdown extends LightningElement {
 
     // PRIVATE VARS
 
-    private focusedValue: string | null = null;
-    private _open = false;
+    private _focusedValue: string | null = null;
     private popoverEl: HTMLElement | null = null;
 
     constructor() {
@@ -98,18 +94,16 @@ export default class Dropdown extends LightningElement {
     // CLASS FNS
 
     private onKeyDown = (e: KeyboardEvent) => {
-        if (this.open) {
-            switch (e.key) {
-                case "ArrowDown":
-                    e.preventDefault();
-                    this.incrementOptionFocus(1);
-                    break;
-                case "ArrowUp":
-                    e.preventDefault();
-                    this.incrementOptionFocus(-1);
-                    break;
-                default:
-            }
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                this.incrementOptionFocus(1);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                this.incrementOptionFocus(-1);
+                break;
+            default:
         }
     };
 
@@ -125,7 +119,7 @@ export default class Dropdown extends LightningElement {
     private onOptionFocus(e: PointerEvent) {
         if (e.target) {
             // @ts-ignore
-            this.focusedValue = e.target.option.id;
+            this._focusedValue = e.target.option.id;
         }
     }
 
@@ -137,13 +131,13 @@ export default class Dropdown extends LightningElement {
     }
 
     private incrementOptionFocus(indexChange: number) {
-        if (!this.focusedValue) {
+        if (!this._focusedValue) {
             this.focusDefaultOption();
             return;
         }
 
         const focusedOptionIndex = this.findOptionElementIndex(
-            this.focusedValue
+            this._focusedValue
         );
 
         let nextIndex = focusedOptionIndex + indexChange;
@@ -160,13 +154,8 @@ export default class Dropdown extends LightningElement {
         }
     }
 
-    private onOpen(): void {
-        this._open = true;
-    }
-
     private onClose(): void {
-        this.focusedValue = null;
-        this._open = false;
+        this._focusedValue = null;
     }
 
     private focusDefaultOption() {
@@ -179,7 +168,7 @@ export default class Dropdown extends LightningElement {
         ];
         if (optionToFocus) {
             optionToFocus.focus();
-            this.focusedValue = optionToFocus.option.id;
+            this._focusedValue = optionToFocus.option.id;
         }
     }
 

package/src/modules/dx/header/__tests__/header.test.ts

@@ -8,10 +8,16 @@ import {
     mockPropsEmployees,
     mockPropsNoNavigation
 } from "./mockProps";
+import { track } from "dx/instrumentation";
 
 const TAG = "dx-header";
 const render = createRenderComponent(TAG, Header);
 
+jest.mock("dx/instrumentation");
+
+const GTM_EVENT_NAME = "custEv_signUpClick";
+const SIGN_UP_LABEL = "Sign Up";
+
 describe("dx-header", () => {
     it("renders", () => {
         const subtitle = "testsubtitle";
@@ -195,4 +201,19 @@ describe("dx-header", () => {
         expect(headerSearch).toBeNull();
         return expect(element).toBeAccessible();
     });
+
+    it("signup button track is beign called", () => {
+        const element = render(mockPropsDevelopers);
+
+        const button: HTMLElement = element.shadowRoot.querySelector(
+            "dx-button"
+        );
+
+        button.click();
+
+        expect(track).toBeCalledTimes(1);
+        expect(track).toBeCalledWith(button, GTM_EVENT_NAME, {
+            clickText: SIGN_UP_LABEL
+        });
+    });
 });

package/src/modules/dx/header/header.html

@@ -27,6 +27,7 @@
                         aria-label="Sign Up For Salesforce Developer Edition"
                         size="small"
                         href={signupLink}
+                        onclick={handleSignUpClick}
                     >
                         Sign Up
                     </dx-button>

package/src/modules/dx/headerSearch/__tests__/headerSearch.test.ts

@@ -24,7 +24,7 @@ const COVEO_CONFIG = {
     reducers: searchAppReducers
 };
 
-const REDIRECT_URL = "https://beta.developer.salesforce.com";
+const REDIRECT_URL = "https://developer.salesforce.com";
 
 const TAG = "dx-header-search";
 const render = createRenderComponent(TAG, HeaderSearch);

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -80,7 +80,7 @@ export default class HeaderSearch extends LightningElement {
     private instantiateSearchbox() {
         const options: StandaloneSearchBoxOptions = {
             numberOfSuggestions: 3,
-            redirectionUrl: "https://beta.developer.salesforce.com"
+            redirectionUrl: "https://developer.salesforce.com"
         };
 
         const engine = new HeadlessEngine({

package/src/modules/dx/popover/__tests__/mockProps.ts

@@ -4,6 +4,5 @@ export default {
     pagePadding: 20,
     placement: "top-start",
     small: true,
-    openOnHover: true,
     width: "300px"
 };

package/src/modules/dx/popover/popover.ts

@@ -37,6 +37,7 @@ export default class Popover extends LightningElement {
         return this._open;
     }
     set open(value: boolean | null) {
+        this.controlled = typeof value === "boolean";
         if (value !== this._open) {
             if (value) {
                 this.openPopover();
@@ -101,6 +102,7 @@ export default class Popover extends LightningElement {
 
     // PRIVATE VARS
 
+    private controlled: boolean = false;
     private _open: boolean = false;
     private _rendered: boolean = isPrerender();
     private _role: string | null = null;
@@ -152,19 +154,26 @@ export default class Popover extends LightningElement {
 
     private addControlListeners() {
         if (this.control) {
-            this.control.addEventListener("click", this.onControlClick);
             this.control.addEventListener("keydown", this.onControlKeydown);
-            this.control.addEventListener(
-                "mouseenter",
-                this.onControlMouseEnter
-            );
+
+            if (!this.openOnHover) {
+                this.control.addEventListener("click", this.onControlClick);
+            }
+
+            if (this.openOnHover) {
+                this.control.addEventListener(
+                    "mouseenter",
+                    this.onControlMouseEnter
+                );
+            }
         }
     }
 
     private removeControlListeners() {
         if (this.control) {
-            this.control.removeEventListener("click", this.onControlClick);
             this.control.removeEventListener("keydown", this.onControlKeydown);
+
+            this.control.removeEventListener("click", this.onControlClick);
             this.control.removeEventListener(
                 "mouseenter",
                 this.onControlMouseEnter
@@ -186,11 +195,7 @@ export default class Popover extends LightningElement {
         // @ts-ignore something weird happening here with debounce types
         debounce(this._interactOutsideListener(e), 100);
 
-    private onControlMouseEnter = () => {
-        if (this.openOnHover) {
-            this.openPopover();
-        }
-    };
+    private onControlMouseEnter = () => this.openPopover();
 
     private onControlKeydown = (e: KeyboardEvent) => {
         switch (e.key) {
@@ -207,13 +212,13 @@ export default class Popover extends LightningElement {
     };
 
     private onControlClick = () => {
-        if (this.open && !this.openOnHover) {
-            this.closePopover();
+        if (this.controlled) {
+            this.dispatchRequestCloseEvent("click-control");
             return;
         }
 
         if (this.open) {
-            this.dispatchRequestCloseEvent("click-control");
+            this.closePopover();
             return;
         }
 

package/src/modules/dx/sidebar/__tests__/sidebar.test.ts

@@ -16,6 +16,7 @@ const renderComponent = createRenderComponent(TAG, Sidebar);
 const COLLAPSED_CLASS = "collapsed";
 const EXPECTED_QUERY = "(max-width: 768px)";
 const GTM_EVENT_NAME = "custEv_leftNavLinkClick";
+const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
 describe(TAG, () => {
     afterEach(() => {
@@ -169,7 +170,8 @@ describe(TAG, () => {
 
                 expect(track).toBeCalledTimes(1);
                 expect(track).toBeCalledWith(toggleButton, GTM_EVENT_NAME, {
-                    sidebarNavAction: "collapse"
+                    sidebarNavAction: "collapse",
+                    clickText: TOGGLE_BUTTON_LABEL
                 });
 
                 return Promise.resolve()
@@ -203,7 +205,8 @@ describe(TAG, () => {
                             toggleButton,
                             GTM_EVENT_NAME,
                             {
-                                sidebarNavAction: "expand"
+                                sidebarNavAction: "expand",
+                                clickText: TOGGLE_BUTTON_LABEL
                             }
                         );
                     })
@@ -360,7 +363,8 @@ describe(TAG, () => {
 
                 expect(track).toBeCalledTimes(1);
                 expect(track).toBeCalledWith(toggleDiv, GTM_EVENT_NAME, {
-                    sidebarNavAction: "expand"
+                    sidebarNavAction: "expand",
+                    clickText: TOGGLE_BUTTON_LABEL
                 });
 
                 return Promise.resolve()
@@ -414,7 +418,8 @@ describe(TAG, () => {
                             toggleDiv,
                             GTM_EVENT_NAME,
                             {
-                                sidebarNavAction: "collapse"
+                                sidebarNavAction: "collapse",
+                                clickText: TOGGLE_BUTTON_LABEL
                             }
                         );
                     })

package/src/modules/dx/sidebar/sidebar.ts

@@ -7,6 +7,7 @@ import { toJson } from "utils/normalizers";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
+const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
 export default class Sidebar extends LightningElement {
     @api header: string = "";
@@ -97,7 +98,8 @@ export default class Sidebar extends LightningElement {
             ? "expand"
             : "collapse";
         track(event.currentTarget!, "custEv_leftNavLinkClick", {
-            sidebarNavAction
+            sidebarNavAction,
+            clickText: TOGGLE_BUTTON_LABEL
         });
     }
 

package/src/modules/dx/tooltip/__tests__/tooltip.test.ts

@@ -1,66 +1,23 @@
 import Tooltip from "dx/tooltip";
 import { createRenderComponent } from "utils/tests";
-import createTooltip from "tippy.js";
-
-const mockSetProps = jest.fn();
-jest.mock("tippy.js", () =>
-    jest.fn().mockImplementation(() => {
-        return {
-            setProps: mockSetProps
-        };
-    })
-);
 
 const TAG = "dx-tooltip";
 const render = createRenderComponent(TAG, Tooltip);
 
 describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     it("calls tippy constructor with correct parameters", () => {
-        const element = render({ label: "First Label", persist: true });
+        const element = render({ label: "First Label", placement: "top" });
 
-        const slotContainer = element.shadowRoot.querySelector(
-            "div.slot-container"
+        const slotContainer: HTMLElement = element.shadowRoot.querySelector(
+            "div"
         );
 
         expect(slotContainer).not.toBeNull();
-
-        expect(createTooltip).toBeCalledTimes(1);
-        expect(createTooltip).toBeCalledWith(slotContainer, {
-            content: "First Label",
-            placement: "top",
-            hideOnClick: false,
-            appendTo: slotContainer
-        });
-        expect(mockSetProps).not.toBeCalled();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't call tippy if label is not provided", () => {
-        const element = render();
-
-        const slotContainer = element.shadowRoot.querySelector(
-            "div.slot-container"
+        expect(slotContainer.getAttribute("data-microtip-position")).toEqual(
+            "top"
         );
-        expect(slotContainer).not.toBeNull();
-
-        expect(createTooltip).not.toBeCalled();
-        expect(mockSetProps).not.toBeCalled();
-    });
-
-    it("changes label after creation", () => {
-        const element = render({ label: "First Label" });
-
-        expect(createTooltip).toBeCalledTimes(1);
-        element.label = "New label";
+        expect(slotContainer.getAttribute("aria-label")).toEqual("First Label");
 
-        expect(createTooltip).toBeCalledTimes(1);
-        expect(mockSetProps).toBeCalledTimes(1);
-        expect(mockSetProps).toBeCalledWith({ content: "New label" });
         return expect(element).toBeAccessible();
     });
 });

package/src/modules/dx/tooltip/microtip.css

@@ -0,0 +1,269 @@
+/* Code generated by scripts/postinstall.js DO NOT EDIT*/
+
+
+/* -------------------------------------------------------------------
+  Microtip
+
+  Modern, lightweight css-only tooltips
+  Just 1kb minified and gzipped
+
+  @author Ghosh
+  @package Microtip
+
+----------------------------------------------------------------------
+  1. Base Styles
+  2. Direction Modifiers
+  3. Position Modifiers
+--------------------------------------------------------------------*/
+
+
+/* ------------------------------------------------
+  [1] Base Styles
+-------------------------------------------------*/
+
+[aria-label][role~="tooltip"] {
+  position: relative;
+}
+
+[aria-label][role~="tooltip"]::before,
+[aria-label][role~="tooltip"]::after {
+  transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: transform;
+  opacity: 0;
+  pointer-events: none;
+  transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
+  position: absolute;
+  box-sizing: border-box;
+  z-index: 10;
+  transform-origin: top;
+}
+
+[aria-label][role~="tooltip"]::before {
+  background-size: 100% auto !important;
+  content: "";
+}
+
+[aria-label][role~="tooltip"]::after {
+  background: rgba(17, 17, 17, .9);
+  border-radius: 4px;
+  color: #ffffff;
+  content: attr(aria-label);
+  font-size: var(--microtip-font-size, 13px);
+  font-weight: var(--microtip-font-weight, normal);
+  text-transform: var(--microtip-text-transform, none);
+  padding: .5em 1em;
+  white-space: nowrap;
+  box-sizing: content-box;
+}
+
+[aria-label][role~="tooltip"]:hover::before,
+[aria-label][role~="tooltip"]:hover::after,
+[aria-label][role~="tooltip"]:focus::before,
+[aria-label][role~="tooltip"]:focus::after {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+
+
+/* ------------------------------------------------
+  [2] Position Modifiers
+-------------------------------------------------*/
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 6px;
+  width: 18px;
+  margin-bottom: 5px;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::after {
+  margin-bottom: 11px;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]:hover::before {
+  transform: translate3d(-50%, -5px, 0);
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::after {
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position="top"]:hover::after {
+  transform: translate3d(-50%, -5px, 0);
+}
+
+/* ------------------------------------------------
+  [2.1] Top Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="top-left"]::after {
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+  bottom: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
+  transform: translate3d(calc(-100% + 16px), -5px, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.2] Top Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="top-right"]::after {
+  transform: translate3d(calc(0% + -16px), 0, 0);
+  bottom: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
+  transform: translate3d(calc(0% + -16px), -5px, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.3] Bottom
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 6px;
+  width: 18px;
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::after {
+  margin-top: 11px;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+  transform: translate3d(-50%, -10px, 0);
+  bottom: auto;
+  left: 50%;
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
+  transform: translate3d(-50%, 0, 0);
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::after {
+  transform: translate3d(-50%, -10px, 0);
+  top: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
+  transform: translate3d(-50%, 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.4] Bottom Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="bottom-left"]::after {
+  transform: translate3d(calc(-100% + 16px), -10px, 0);
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.5] Bottom Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="bottom-right"]::after {
+  transform: translate3d(calc(0% + -16px), -10px, 0);
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
+  transform: translate3d(calc(0% + -16px), 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.6] Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="left"]::before,
+[role~="tooltip"][data-microtip-position="left"]::after {
+  bottom: auto;
+  left: auto;
+  right: 100%;
+  top: 50%;
+  transform: translate3d(10px, -50%, 0);
+}
+
+[role~="tooltip"][data-microtip-position="left"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 18px;
+  width: 6px;
+  margin-right: 5px;
+  margin-bottom: 0;
+}
+
+[role~="tooltip"][data-microtip-position="left"]::after {
+  margin-right: 11px;
+}
+
+[role~="tooltip"][data-microtip-position="left"]:hover::before,
+[role~="tooltip"][data-microtip-position="left"]:hover::after {
+  transform: translate3d(0, -50%, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.7] Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="right"]::before,
+[role~="tooltip"][data-microtip-position="right"]::after {
+  bottom: auto;
+  left: 100%;
+  top: 50%;
+  transform: translate3d(-10px, -50%, 0);
+}
+
+[role~="tooltip"][data-microtip-position="right"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 18px;
+  width: 6px;
+  margin-bottom: 0;
+  margin-left: 5px;
+}
+
+[role~="tooltip"][data-microtip-position="right"]::after {
+  margin-left: 11px;
+}
+
+[role~="tooltip"][data-microtip-position="right"]:hover::before,
+[role~="tooltip"][data-microtip-position="right"]:hover::after {
+  transform: translate3d(0, -50%, 0);
+}
+
+/* ------------------------------------------------
+  [3] Size
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-size="small"]::after {
+  white-space: initial;
+  width: 80px;
+}
+
+[role~="tooltip"][data-microtip-size="medium"]::after {
+  white-space: initial;
+  width: 150px;
+}
+
+[role~="tooltip"][data-microtip-size="large"]::after {
+  white-space: initial;
+  width: 260px;
+}

package/src/modules/dx/tooltip/tooltip.css

@@ -1,4 +1,4 @@
-@import "./tippy.css";
+@import "./microtip.css";
 
 :host {
     display: inline-block;
@@ -8,17 +8,29 @@
     display: inherit;
 }
 
-.tippy-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: var(--dx-g-spacing-xl);
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="left"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="right"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[aria-label][role~="tooltip"]::after {
     background-color: var(--dx-g-gray-50);
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-xs);
     color: white;
 }
-
-.tippy-arrow {
-    color: var(--dx-g-gray-50);
-}

package/src/modules/dx/tooltip/tooltip.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="slot-container">
+    <div data-microtip-position={placement} role="tooltip" aria-label={label}>
         <slot></slot>
     </div>
 </template>

package/src/modules/dx/tooltip/tooltip.stories.ts

@@ -5,29 +5,18 @@ export default {
     component: "dx-tooltip",
     argTypes: {
         placement: {
-            defaultValue: "top-end",
+            defaultValue: "top",
             control: {
                 type: "select",
                 options: [
-                    "auto",
-                    "auto-end",
-                    "auto-start",
-
+                    "top",
+                    "top-left",
+                    "top-right",
                     "bottom",
-                    "bottom-end",
-                    "bottom-start",
-
+                    "bottom-left",
+                    "bottom-right",
                     "left",
-                    "left-end",
-                    "left-start",
-
-                    "right",
-                    "right-end",
-                    "right-start",
-
-                    "top",
-                    "top-end",
-                    "top-start"
+                    "right"
                 ]
             }
         },
@@ -55,11 +44,3 @@ export const Default = (args: any) => html `${createStyles()}
             <button>Hover</button>
         </dx-tooltip>
     </div>`;
-
-// prettier-ignore
-export const PersistOnClick = (args: any) => html `${createStyles()}
-    <div class="story-container">
-        <dx-tooltip label="${args.label}" persist=${true} placement="${args.placement}">
-            <button>Hover and click</button>
-        </dx-tooltip>
-    </div>`;

package/src/modules/dx/tooltip/tooltip.ts

@@ -1,42 +1,6 @@
 import { LightningElement, api } from "lwc";
-import tippy from "tippy.js";
-import { Placement } from "@popperjs/core";
-export default class Tooltip extends LightningElement {
-    @api placement?: Placement = "top";
-    @api persist: Boolean = false;
-
-    @api
-    set label(value: string) {
-        const isChanged: boolean = this._label !== value;
-        this._label = value;
-        if (this.tooltip && isChanged) {
-            this.tooltip.setProps({ content: this._label });
-        }
-    }
-
-    get label(): string {
-        return this._label;
-    }
 
-    private _label: string = "";
-    private tooltip: any = null;
-    private container: HTMLElement | null = null;
-
-    renderedCallback() {
-        if (!this.container) {
-            this.container = this.template.querySelector(".slot-container");
-            this.addTooltip();
-        }
-    }
-
-    private addTooltip() {
-        if (this.container && this.label) {
-            this.tooltip = tippy(this.container, {
-                content: this.label,
-                appendTo: this.container,
-                placement: this.placement,
-                hideOnClick: !this.persist
-            });
-        }
-    }
+export default class Tooltip extends LightningElement {
+    @api placement?: String = "top";
+    @api label: string = "";
 }

package/src/modules/utils/headerBase/headerBase.ts

@@ -2,6 +2,7 @@ import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Brand, Option } from "typings/custom";
 import { toJson } from "utils/normalizers";
+import { track } from "dx/instrumentation";
 
 const VALID_BRANDS = [
     "analytics",
@@ -17,6 +18,7 @@ const VALID_BRANDS = [
     "service",
     "success"
 ];
+const SIGN_UP_LABEL = "Sign Up";
 
 export abstract class HeaderBase extends LightningElement {
     @api bailHref?: string | null = null;
@@ -178,6 +180,12 @@ export abstract class HeaderBase extends LightningElement {
         }
     };
 
+    private handleSignUpClick(e: PointerEvent) {
+        track(e.currentTarget!, "custEv_signUpClick", {
+            clickText: SIGN_UP_LABEL
+        });
+    }
+
     protected additionalClasses(): string {
         return "";
     }

package/src/modules/dx/tooltip/tippy.css

@@ -1 +0,0 @@
-/* Code generated by scripts/postinstall.js DO NOT EDIT */.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}