@salesforcedevs/dx-components 0.5.5 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.5.5",
+    "version": "0.8.3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -22,12 +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": "b837abbfadaf24fa1c9df28a3566431ab05dd1ea"
+    "gitHead": "6eea544cc7d58dc43abb71a74816c23dff1191ea"
 }

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

@@ -28,7 +28,10 @@
                 </template>
                 <template if:true={showCodeSourceBtn}>
                     <div class="toolbar-item">
-                        <dx-tooltip persist label="View Code Source">
+                        <dx-tooltip
+                            label="View Code Source"
+                            placement="top-left"
+                        >
                             <dx-button
                                 href={sourceLink}
                                 type="button"
@@ -44,7 +47,7 @@
                     <div class="divider"></div>
                 </template>
                 <div class="toolbar-item">
-                    <dx-tooltip label={updateThemeBtnText}>
+                    <dx-tooltip label={updateThemeBtnText} placement="top-left">
                         <dx-button
                             onclick={updateTheme}
                             type="button"
@@ -57,7 +60,7 @@
                 </div>
                 <div class="divider"></div>
                 <div class="toolbar-item">
-                    <dx-tooltip persist label={copyBtnText}>
+                    <dx-tooltip label={copyBtnText} placement="top-left">
                         <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

@@ -1,5 +1,6 @@
 import Button from "dx/button";
 import Input from "dx/input";
+import { track } from "dx/instrumentation";
 import Sidebar from "dx/sidebar";
 import Tree from "dx/tree";
 import { TreeNode } from "typings/custom";
@@ -7,14 +8,21 @@ import { createMediaMock } from "utils/jest";
 import { createRenderComponent } from "utils/tests";
 import { SAMPLE_TREES } from "./mockProps";
 
+jest.mock("dx/instrumentation");
+
 const TAG = "dx-sidebar";
 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(() => {
+        jest.clearAllMocks();
+    });
+
     describe("desktop", () => {
         describe("component render", () => {
             it("should render as expanded with all the elements that sidebar includes", () => {
@@ -160,6 +168,12 @@ describe(TAG, () => {
                 );
                 toggleButton.click();
 
+                expect(track).toBeCalledTimes(1);
+                expect(track).toBeCalledWith(toggleButton, GTM_EVENT_NAME, {
+                    sidebarNavAction: "collapse",
+                    clickText: TOGGLE_BUTTON_LABEL
+                });
+
                 return Promise.resolve()
                     .then(() => {
                         expect(container.classList).toContain(COLLAPSED_CLASS);
@@ -185,6 +199,16 @@ describe(TAG, () => {
                         expect(trees).toBeNull();
 
                         toggleButton.click();
+
+                        expect(track).toBeCalledTimes(2);
+                        expect(track).toHaveBeenLastCalledWith(
+                            toggleButton,
+                            GTM_EVENT_NAME,
+                            {
+                                sidebarNavAction: "expand",
+                                clickText: TOGGLE_BUTTON_LABEL
+                            }
+                        );
                     })
                     .then(() => {
                         expect(container.classList).not.toContain(
@@ -337,6 +361,12 @@ describe(TAG, () => {
                 );
                 toggleDiv.click();
 
+                expect(track).toBeCalledTimes(1);
+                expect(track).toBeCalledWith(toggleDiv, GTM_EVENT_NAME, {
+                    sidebarNavAction: "expand",
+                    clickText: TOGGLE_BUTTON_LABEL
+                });
+
                 return Promise.resolve()
                     .then(() => {
                         expect(container.classList).not.toContain(
@@ -382,6 +412,16 @@ describe(TAG, () => {
                         expect(toggleButtonDesktop).toBeNull();
 
                         toggleDiv.click();
+
+                        expect(track).toBeCalledTimes(2);
+                        expect(track).toHaveBeenLastCalledWith(
+                            toggleDiv,
+                            GTM_EVENT_NAME,
+                            {
+                                sidebarNavAction: "collapse",
+                                clickText: TOGGLE_BUTTON_LABEL
+                            }
+                        );
                     })
                     .then(() => {
                         expect(container.classList).toContain(COLLAPSED_CLASS);

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

@@ -1,11 +1,13 @@
+import cx from "classnames";
+import { track } from "dx/instrumentation";
 import { LightningElement, api } from "lwc";
 
-import { TreeNode } from "typings/custom";
-import cx from "classnames";
+import { TreeNode, SidebarGtmAction } from "typings/custom";
 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 = "";
@@ -89,9 +91,16 @@ export default class Sidebar extends LightningElement {
         this._value = event.detail.name;
     }
 
-    private onToggleClick() {
+    private onToggleClick(event: Event) {
         this.expanded = !this.expanded;
         this._toggleHovered = false;
+        const sidebarNavAction: SidebarGtmAction = this.expanded
+            ? "expand"
+            : "collapse";
+        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+            sidebarNavAction,
+            clickText: TOGGLE_BUTTON_LABEL
+        });
     }
 
     private onToggleMouseEnter() {

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/dx/treeItem/__tests__/treeItem.test.ts

@@ -3,6 +3,7 @@ import {
     NODE_WITH_CHILDREN,
     SINGLE_NODE_WITH_LINK
 } from "./mockProps";
+import { track } from "dx/instrumentation";
 import TreeItem from "dx/treeItem";
 import TreeTile from "dx/treeTile";
 import { createRenderComponent } from "utils/tests";
@@ -10,6 +11,10 @@ import { createRenderComponent } from "utils/tests";
 const TAG = "dx-tree-item";
 const renderComponent = createRenderComponent(TAG, TreeItem);
 
+jest.mock("dx/instrumentation");
+
+const GTM_EVENT_NAME = "custEv_leftNavLinkClick";
+
 const assertTile = (tile: TreeTile, properties: { [key: string]: any }) =>
     Object.keys(properties).forEach((key) =>
         expect(tile).toHaveProperty(key, properties[key])
@@ -167,7 +172,7 @@ describe(TAG, () => {
         const mockTileSelected = jest.fn();
 
         afterEach(() => {
-            jest.resetAllMocks();
+            jest.clearAllMocks();
         });
 
         it("should render the children when the dx-tree-tile emits iconclick", () => {
@@ -189,6 +194,12 @@ describe(TAG, () => {
             expect(tile).toHaveProperty("isExpanded", false);
             tile.dispatchEvent(new CustomEvent("iconclick"));
 
+            expect(track).toBeCalledTimes(1);
+            expect(track).toBeCalledWith(tile, GTM_EVENT_NAME, {
+                clickText: NODE_WITH_CHILDREN.label,
+                sidebarNavAction: "expand"
+            });
+
             return Promise.resolve().then(() => {
                 const children: Array<TreeItem> = component.shadowRoot.querySelectorAll(
                     "dx-tree-item"
@@ -233,6 +244,12 @@ describe(TAG, () => {
 
             tile.dispatchEvent(new CustomEvent("iconclick"));
 
+            expect(track).toBeCalledTimes(1);
+            expect(track).toBeCalledWith(tile, GTM_EVENT_NAME, {
+                clickText: NODE_WITH_CHILDREN.label,
+                sidebarNavAction: "collapse"
+            });
+
             return Promise.resolve().then(() => {
                 expect(tile).toHaveProperty("isExpanded", false);
 
@@ -269,6 +286,12 @@ describe(TAG, () => {
             expect(button).not.toBeNull();
             button.click();
 
+            expect(track).toBeCalledTimes(1);
+            expect(track).toBeCalledWith(button, GTM_EVENT_NAME, {
+                clickText: NODE_WITH_CHILDREN.label,
+                sidebarNavAction: "click"
+            });
+
             return Promise.resolve().then(() => {
                 expect(mockExpandCollapse).toBeCalledTimes(1);
                 const [expandCall] = mockExpandCollapse.mock.calls[0];
@@ -366,5 +389,24 @@ describe(TAG, () => {
                 expect(trees).toHaveLength(NODE_WITH_CHILDREN.children!.length);
             });
         });
+
+        it("should call track from dx/instrumentation when link is clicked", () => {
+            const component = renderComponent({
+                treeNode: SINGLE_NODE_WITH_LINK
+            });
+
+            const link: HTMLAnchorElement = component.shadowRoot.querySelector(
+                "a"
+            );
+            expect(link).not.toBeNull();
+
+            link.click();
+
+            expect(track).toBeCalledTimes(1);
+            expect(track).toBeCalledWith(link, GTM_EVENT_NAME, {
+                clickText: SINGLE_NODE_WITH_LINK.label,
+                sidebarNavAction: "click"
+            });
+        });
     });
 });

package/src/modules/dx/treeItem/treeItem.html

@@ -9,7 +9,7 @@
             oniconclick={onIconClick}
         ></dx-tree-tile>
     </button>
-    <a if:true={href} href={href} target={target}>
+    <a if:true={href} href={href} target={target} onclick={onLinkClick}>
         <dx-tree-tile
             is-root={isRoot}
             tree-node={treeNode}

package/src/modules/dx/treeItem/treeItem.ts

@@ -1,5 +1,7 @@
 import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
+import { track } from "dx/instrumentation";
+import { SidebarGtmAction } from "typings/custom";
 
 const DEFAULT_TARGET = "_self";
 
@@ -55,18 +57,24 @@ export default class TreeItem extends LightningElement {
         }
     }
 
-    private onIconClick(): void {
+    private onIconClick(event: CustomEvent): void {
         this.doExpand();
+        this.sendGtm(event, this.isExpanded ? "expand" : "collapse");
     }
 
-    private onButtonClick(): void {
+    private onButtonClick(event: Event): void {
         if (this.hasChildren) {
             this.doExpand();
         }
 
+        this.sendGtm(event, "click");
         this.fireEvent("tileselected", { name: this._treeNode.name });
     }
 
+    private onLinkClick(event: Event): void {
+        this.sendGtm(event, "click");
+    }
+
     private doExpand(): void {
         this.isExpanded = !this.isExpanded;
         this.fireEvent("expandcollapse");
@@ -88,4 +96,11 @@ export default class TreeItem extends LightningElement {
     private setExpanded(value: boolean): void {
         this.isExpanded = value;
     }
+
+    private sendGtm(event: Event, sidebarNavAction: SidebarGtmAction) {
+        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+            clickText: this._treeNode.label,
+            sidebarNavAction
+        });
+    }
 }

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}