@salesforcedevs/dx-components 0.16.2 → 0.18.1

package/lwc.config.json

@@ -60,6 +60,7 @@
         "dx/sectionSmall",
         "dx/select",
         "dx/sidebar",
+        "dx/sidebarOld",
         "dx/socials",
         "dx/toc",
         "dx/tree",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.16.2",
+    "version": "0.18.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -14,7 +14,7 @@
         "access": "public"
     },
     "dependencies": {
-        "@coveo/headless": "0.1.0-alpha.33",
+        "@coveo/headless": "^1.32.0",
         "@popperjs/core": "2.9.1",
         "@sfdocs-internal/wires": "^0.6.3",
         "classnames": "^2.2.6",
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "4695c8e7dc16a958beb7717cfe01e432c57f5872"
+    "gitHead": "582d4e57d2fa40c37540bbbe3f41c01159897832"
 }

package/src/assets/svg/sidebar-loading.svg

@@ -0,0 +1,34 @@
+
+<svg width="100%" height="374px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Scoped-Search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Docs-–-Search-Results-Loading" transform="translate(-52.000000, -240.000000)" fill="#DAD8D7">
+            <g id="Group-12" transform="translate(52.000000, 240.000000)">
+                <g id="Group-5">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.8" transform="translate(0.000000, 78.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.6" transform="translate(0.000000, 156.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.4" transform="translate(0.000000, 234.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+                <g id="Group-5" opacity="0.197206577" transform="translate(0.000000, 312.000000)">
+                    <rect id="Rectangle" x="0" y="0" width="90%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="26" width="80%" height="10" rx="5"></rect>
+                    <rect id="Rectangle" x="0" y="52" width="70%" height="10" rx="5"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -21,6 +21,7 @@
         >
             <template for:each={options} for:item="option">
                 <dx-dropdown-option
+                    analytics-event={analyticsEvent}
                     active={option.active}
                     key-value={option.keyValue}
                     if:false={option.options}
@@ -39,6 +40,7 @@
                     <span class="menu_heading">{option.label}</span>
                     <template for:each={option.options} for:item="suboption">
                         <dx-dropdown-option
+                            analytics-event={analyticsEvent}
                             active={suboption.active}
                             key={suboption.id}
                             key-value={suboption.keyValue}

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

@@ -29,8 +29,10 @@ export default class Dropdown extends LightningElement {
     @api small?: boolean = false;
     @api openOnHover?: boolean = false; // dropdown opens/closes with hover
     @api width?: string | null = null;
-    @api fullWidth?: boolean | null;
-    @api navItemLabel: string | null = null;
+    @api fullWidth?: boolean | null; @api navItemLabel: string | null = null;
+
+    // props forwarded to dropdown option
+    @api analyticsEvent: string | null = null
 
     @api
     get options() {

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

@@ -1,6 +1,7 @@
 import DropdownOption from "dx/dropdownOption";
 import { createRenderComponent } from "utils/tests";
 import { MOCK_BUTTON_PROPS, MOCK_LINK_PROPS } from "./mockProps";
+import * as instrumentation from "dx/instrumentation";
 
 const TAG = "dx-dropdown-option";
 const render = createRenderComponent(TAG, DropdownOption);
@@ -13,6 +14,10 @@ const appendToMenu = (element: HTMLElement) => {
 };
 
 describe(TAG, () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
     it("renders a button by default", () => {
         const component = render(MOCK_BUTTON_PROPS);
         expect(component.shadowRoot.querySelector("button")).not.toBeNull();
@@ -23,8 +28,8 @@ describe(TAG, () => {
 
     it("renders the correct label, description, and img", () => {
         const component = render(MOCK_BUTTON_PROPS);
-        const label = component.shadowRoot.querySelector(".option_label")
-            .textContent;
+        const label =
+            component.shadowRoot.querySelector(".option_label").textContent;
         expect(label).toEqual(MOCK_BUTTON_PROPS.option.label);
 
         const description = component.shadowRoot.querySelector(
@@ -79,4 +84,29 @@ describe(TAG, () => {
 
         expect(onClickMock).toBeCalled();
     });
+
+    it("fires analytics when given an analytics event", () => {
+        const track = jest.spyOn(instrumentation, "track");
+
+        const component = render({
+            ...MOCK_BUTTON_PROPS,
+            analyticsEvent: "mock"
+        });
+
+        const option = component.shadowRoot.querySelector(".option");
+        option.click();
+
+        expect(track).toHaveBeenCalledTimes(1);
+    });
+
+    it("doesn't fire analytics when not given an analytics event", () => {
+        const track = jest.spyOn(instrumentation, "track");
+
+        const component = render(MOCK_BUTTON_PROPS);
+
+        const option = component.shadowRoot.querySelector(".option");
+        option.click();
+
+        expect(track).not.toHaveBeenCalled();
+    });
 });

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -8,6 +8,7 @@ export default class DropdownOption extends LightningElement {
     @api keyValue!: string;
     @api active: boolean = false;
     @api navItemLabel: String | null = null;
+    @api analyticsEvent: string | null = null;
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -26,11 +27,13 @@ export default class DropdownOption extends LightningElement {
             new CustomEvent("select", { detail: this.keyValue })
         );
 
-        track(e.currentTarget, "custEv_topNavLinkClick", {
-            navHeading: this.navItemLabel || undefined,
-            navSubHeading: this.option.label || undefined,
-            clickText: this.keyValue || undefined,
-            pageLocation: window.location.pathname || undefined
-        });
+        if (this.analyticsEvent && e.currentTarget) {
+            track(e.currentTarget, this.analyticsEvent, {
+                navHeading: this.navItemLabel || undefined,
+                navSubHeading: this.option.label || undefined,
+                clickText: this.keyValue || undefined,
+                pageLocation: window.location.pathname || undefined
+            });
+        }
     }
 }

package/src/modules/dx/footer/footer.ts

@@ -14,6 +14,12 @@ import { track } from "dx/instrumentation";
 const createNewsletterSignupHref = (email: string): string =>
     `/newsletter?subscriberEmail=${email}`;
 
+const ANALYTICS_INFO = {
+    itemTitle: "Newsletter Sign Up Footer",
+    elementType: "button",
+    destinationType: "internal",
+    ctaClick: true
+};
 export default class Footer extends LightningElement {
     @api locale: string | null = null;
     @api
@@ -85,7 +91,13 @@ export default class Footer extends LightningElement {
 
     private onSubmitEmail = async (e: CustomEvent) => {
         const href = createNewsletterSignupHref(e.detail);
-        track(e.currentTarget, "custEv_newsletterSubscriptionStart");
+
+        track(e.currentTarget, "custEv_ctaButtonClick", {
+            ...ANALYTICS_INFO,
+            clickText: e.detail,
+            clickUrl: href,
+        });
+
         window.location.assign(href);
     };
 

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

@@ -9,23 +9,20 @@ import {
     mockPropsNoNavigation
 } from "./mockProps";
 import { track } from "dx/instrumentation";
+import { ANALYTICS_INFO } from "utils/headerBase";
 
 const TAG = "dx-header";
 const render = createRenderComponent(TAG, Header);
 
 jest.mock("dx/instrumentation");
 
-const GTM_EVENT_NAME = "custEv_signupStart";
-const SIGN_UP_LABEL = "Sign Up";
-
 describe("dx-header", () => {
     it("renders", () => {
         const subtitle = "testsubtitle";
         const element = render({ ...mockPropsDevelopers, subtitle });
         const subtitleEl = element.shadowRoot.querySelector(".subtitle");
-        const buttons: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            "dx-button"
-        );
+        const buttons: Array<HTMLElement> =
+            element.shadowRoot.querySelectorAll("dx-button");
         const dropdown = element.shadowRoot.querySelector("dx-dropdown");
         const headerEl = element.shadowRoot.querySelector("dx-header-nav");
 
@@ -88,9 +85,8 @@ describe("dx-header", () => {
             ...mockPropsDevelopers,
             versions: JSON.stringify([version])
         });
-        const dropdown: Dropdown = element.shadowRoot.querySelector(
-            "dx-dropdown"
-        );
+        const dropdown: Dropdown =
+            element.shadowRoot.querySelector("dx-dropdown");
         expect(dropdown).not.toBeNull();
         expect(dropdown.options).toHaveLength(1);
 
@@ -180,9 +176,8 @@ describe("dx-header", () => {
             bailLabel: "test",
             signupLink: "/"
         });
-        const buttons: Array<Button> = element.shadowRoot.querySelectorAll(
-            "dx-button"
-        );
+        const buttons: Array<Button> =
+            element.shadowRoot.querySelectorAll("dx-button");
 
         expect(buttons[0].href).toEqual("/");
         expect(buttons[2].href).toEqual("test");
@@ -194,26 +189,25 @@ describe("dx-header", () => {
             subtitle: mockPropsDevelopers.subtitle,
             navItems: mockPropsDevelopers.navItems
         });
-        const headerSearch = element.shadowRoot.querySelector(
-            "dx-header-search"
-        );
+        const headerSearch =
+            element.shadowRoot.querySelector("dx-header-search");
 
         expect(headerSearch).toBeNull();
         return expect(element).toBeAccessible();
     });
 
-    it("signup button track is beign called", () => {
+    it("signup button track is being called", () => {
         const element = render(mockPropsDevelopers);
 
-        const button: HTMLElement = element.shadowRoot.querySelector(
-            "dx-button"
-        );
+        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
+        expect(track).toBeCalledWith(button, "custEv_signupStart", {
+            ...ANALYTICS_INFO,
+            clickUrl: "/sign-up"
         });
     });
 

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

@@ -13,7 +13,13 @@ import {
     mockNavAnalytics
 } from "./mockNavs";
 import mockNavDevelopers from "./mockNavDevelopers";
-import { coveoConfig } from "../../headerSearch/__tests__/mockProps";
+
+export const coveoConfig = {
+    coveoOrganizationId: "coveosalesforcetestakshatha",
+    coveoPublicAccessToken: "xx114e9d50-bc6b-40f1-b25b-fa5a06c7e168",
+    coveoSearchPipeline: "salesforcedevdoc",
+    coveoSearchHub: "salesforcedevdoc2"
+};
 
 const versions = JSON.stringify([
     {

package/src/modules/dx/headerNav/headerNav.html

@@ -13,6 +13,7 @@
 
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
+                        analytics-event="custEv_topNavLinkClick"
                         if:true={navItem.options}
                         nav-item-label={navItem.label}
                         open-on-hover

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

@@ -1,27 +1,23 @@
-import {
-    HeadlessEngine,
-    buildStandaloneSearchBox,
-    searchAppReducers
-} from "@coveo/headless";
+import { buildSearchEngine, buildStandaloneSearchBox } from "@coveo/headless";
 import Input from "dx/input";
 import Button from "dx/button";
 import Dropdown from "dx/dropdown";
 import HeaderSearch from "dx/headerSearch";
 import { PopoverRequestCloseType } from "typings/custom";
 import { createRenderComponent } from "utils/tests";
+import { coveoHeaderConfig } from "utils/coveo";
 import { MOCK_SUGGESTIONS } from "./mockData";
-import mockProps, { coveoConfig } from "./mockProps";
+import mockProps from "./mockProps";
 
 const COVEO_CONFIG = {
     configuration: {
-        organizationId: coveoConfig.coveoOrganizationId,
-        accessToken: coveoConfig.coveoPublicAccessToken,
+        organizationId: coveoHeaderConfig.coveoOrganizationId,
+        accessToken: coveoHeaderConfig.coveoPublicAccessToken,
         search: {
-            pipeline: coveoConfig.coveoSearchPipeline,
-            searchHub: coveoConfig.coveoSearchHub
+            pipeline: coveoHeaderConfig.coveoSearchPipeline,
+            searchHub: coveoHeaderConfig.coveoSearchHub
         }
-    },
-    reducers: searchAppReducers
+    }
 };
 
 const REDIRECT_URL = "https://developer.salesforce.com";
@@ -37,9 +33,8 @@ const mockUpdateText = jest.fn();
 
 jest.mock("@coveo/headless", () => {
     return {
-        HeadlessEngine: jest.fn(),
-        buildStandaloneSearchBox: jest.fn(),
-        searchAppReducers: jest.fn()
+        buildSearchEngine: jest.fn(),
+        buildStandaloneSearchBox: jest.fn()
     };
 });
 
@@ -68,14 +63,11 @@ const expectMobileToDefaultRender = ({
 };
 
 const expectSearchToInit = () => {
-    expect(HeadlessEngine).toHaveBeenCalledTimes(1);
-    expect(HeadlessEngine).toHaveBeenCalledWith(COVEO_CONFIG);
+    expect(buildSearchEngine).toHaveBeenCalledTimes(1);
+    expect(buildSearchEngine).toHaveBeenCalledWith(COVEO_CONFIG);
     expect(buildStandaloneSearchBox).toHaveBeenCalledTimes(1);
-    const [
-        engine,
-        options
-    ] = (buildStandaloneSearchBox as jest.Mock).mock.calls[0];
-    expect(engine).toBeInstanceOf(HeadlessEngine);
+    const options = (buildStandaloneSearchBox as jest.Mock).mock.calls[0][1];
+
     expect(options).toEqual({
         options: {
             numberOfSuggestions: 3,
@@ -85,8 +77,6 @@ const expectSearchToInit = () => {
     expect(mockSubscribe).toHaveBeenCalledTimes(1);
     expect(subscribeCallback).not.toBeNull();
     expect(subscribeCallback).toBeInstanceOf(Function);
-    expect(mockUpdateText).toHaveBeenCalledTimes(1);
-    expect(mockUpdateText).toHaveBeenCalledWith("");
 };
 
 describe(TAG, () => {
@@ -113,9 +103,8 @@ describe(TAG, () => {
             expect(container).not.toBeNull();
             expect(container.classList).toContain("desktop_search-container");
 
-            const suggestionsDropdown: Dropdown = element.shadowRoot.querySelector(
-                "dx-dropdown"
-            );
+            const suggestionsDropdown: Dropdown =
+                element.shadowRoot.querySelector("dx-dropdown");
             expect(suggestionsDropdown.options).toHaveLength(0);
             expect(suggestionsDropdown.open).toBe(false);
 
@@ -132,21 +121,18 @@ describe(TAG, () => {
 
         it("renders as mobile view", () => {
             const element = render({ ...mockProps, mobile: true });
-            const container: HTMLElement = element.shadowRoot.querySelector(
-                "div"
-            );
+            const container: HTMLElement =
+                element.shadowRoot.querySelector("div");
             expect(container).not.toBeNull();
             expect(container.classList).toHaveLength(0);
 
-            const dropdowns: Dropdown[] = element.shadowRoot.querySelectorAll(
-                "dx-dropdown"
-            );
+            const dropdowns: Dropdown[] =
+                element.shadowRoot.querySelectorAll("dx-dropdown");
             expect(dropdowns).toHaveLength(1);
             const [dropdown] = dropdowns;
             const input: Input = element.shadowRoot.querySelector("dx-input");
-            const button: Button = element.shadowRoot.querySelector(
-                "dx-button"
-            );
+            const button: Button =
+                element.shadowRoot.querySelector("dx-button");
             expectMobileToDefaultRender({
                 input,
                 dropdown,
@@ -165,9 +151,8 @@ describe(TAG, () => {
             const element = render({ ...mockProps, mobile: true });
 
             const input: Input = element.shadowRoot.querySelector("dx-input");
-            const dropdown: Dropdown = element.shadowRoot.querySelector(
-                "dx-dropdown"
-            );
+            const dropdown: Dropdown =
+                element.shadowRoot.querySelector("dx-dropdown");
             const button = element.shadowRoot.querySelector("dx-button");
             button.click();
 

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

@@ -1,11 +1,6 @@
-export const coveoConfig = {
-    coveoOrganizationId: "coveosalesforcetestakshatha",
-    coveoPublicAccessToken: "xx8d9c92ef-1018-4d92-a3c7-647dff01c21c",
-    coveoSearchPipeline: "salesforcedevdoc",
-    coveoSearchHub: "salesforcedevdoc"
-};
+import { coveoHeaderConfig } from "utils/coveo";
 
 export default {
     mobile: false,
-    ...coveoConfig
+    ...coveoHeaderConfig
 };

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

@@ -1,13 +1,12 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { PopoverRequestCloseType, Option } from "typings/custom";
+import { buildSearchEngine } from "utils/coveo";
 import {
-    HeadlessEngine,
     StandaloneSearchBox as StandaloneSearchBoxType,
-    StandaloneSearchBoxOptions,
     StandaloneSearchBoxState,
     buildStandaloneSearchBox,
-    searchAppReducers
+    StandaloneSearchBoxOptions
 } from "@coveo/headless";
 
 const baseSearchHref = `/search`;
@@ -32,11 +31,11 @@ export default class HeaderSearch extends LightningElement {
     private get suggestions(): Option[] {
         if (this.searchState) {
             return this.searchState.suggestions.map(
-                ({ value }: { value: string }) => ({
-                    id: value,
-                    label: value,
+                ({ highlightedValue }: { highlightedValue: string }) => ({
+                    id: highlightedValue,
+                    label: highlightedValue,
                     link: {
-                        href: this.createSearchHref(value),
+                        href: this.createSearchHref(highlightedValue),
                         target: null
                     }
                 })
@@ -83,25 +82,20 @@ export default class HeaderSearch extends LightningElement {
             redirectionUrl: "https://developer.salesforce.com"
         };
 
-        const engine = new HeadlessEngine({
-            configuration: {
-                organizationId: this.coveoOrganizationId,
-                accessToken: this.coveoPublicAccessToken,
-                search: {
-                    pipeline: this.coveoSearchPipeline,
-                    searchHub: this.coveoSearchHub
-                }
-            },
-            reducers: searchAppReducers
+        const engine = buildSearchEngine({
+            organizationId: this.coveoOrganizationId,
+            publicAccessToken: this.coveoPublicAccessToken,
+            searchPipeline: this.coveoSearchPipeline,
+            searchHub: this.coveoSearchHub
         });
 
         this.searchBox = buildStandaloneSearchBox(engine, { options });
-        this.searchBox.subscribe(() => {
+
+        this.searchBox?.subscribe(() => {
             if (this.searchBox) {
                 this.searchState = this.searchBox.state;
             }
         });
-        this.searchBox.updateText("");
     }
 
     private createSearchHref = (value: string | null = "") => {

package/src/modules/dx/lazy/lazy.ts

@@ -2,13 +2,6 @@ import { LightningElement, api } from "lwc";
 
 import { LazyMode } from "typings/custom";
 
-declare global {
-    interface Window {
-        requestIdleCallback: any;
-        cancelIdleCallback: any;
-    }
-}
-
 /**
  * Defines a fallback for BackgroundTasksAPI for browsers that doesn't support it.
  * Currently BackgroundTasksAPI is supported by all major browsers

package/src/modules/dx/newsletterForm/newsletterForm.ts

@@ -2,6 +2,18 @@ import { LightningElement, api } from "lwc";
 import { track } from "dx/instrumentation";
 import { CountryOptions, CheckboxTextSet } from "typings/custom";
 
+const ANALYTICS_INFO = {
+    itemTitle: "newsletter sign up submit",
+    formName: "newsletter",
+    formType: "newsletter",
+    method: "email",
+    destinationType: "internal",
+    clickText: "Subscribe Now",
+    clickUrl: "/newsletter/success",
+    elementType: "button",
+    ctaClick: true
+};
+
 export default class Form extends LightningElement {
     @api checkboxTextSet: string = "";
     @api countries: string = "";
@@ -134,16 +146,13 @@ export default class Form extends LightningElement {
         submitButtonEl.textContent = "...Processing request";
 
         try {
-            const res = await fetch(
-                "/pages/pardot/footer_optin",
-                {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json"
-                    },
-                    body: JSON.stringify(formData)
-                }
-            );
+            const res = await fetch("/pages/pardot/footer_optin", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(formData)
+            });
 
             if (!res.ok) {
                 throw new Error(errorMsg);
@@ -156,7 +165,7 @@ export default class Form extends LightningElement {
             }
 
             // GTM event
-            track(submitButtonEl, "custEv_newsletterSubscription");
+            track(submitButtonEl, "custEv_formCompletion", ANALYTICS_INFO);
 
             window.location.assign("/newsletter/success");
         } catch (error) {

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

@@ -0,0 +1,6 @@
+export default {
+    detail: {
+        value: "pwa",
+        results: []
+    }
+};