@salesforcedevs/dx-components 0.10.1-alpha.93 → 0.10.1-alpha.97

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

@@ -0,0 +1,55 @@
+import SidebarSearchResult from "dx/sidebarSearchResult";
+import { createRenderComponent } from "utils/tests";
+
+const TAG = "dx-sidebar-search-result";
+const render = createRenderComponent(TAG, SidebarSearchResult);
+
+const PROPS = {
+    description: "test description here",
+    descriptionHighlights: [{ length: 5, offset: 5 }],
+    href: "/test",
+    selected: false,
+    title: "test title here",
+    titleHighlights: [{ length: 5, offset: 5 }]
+};
+
+describe(TAG, () => {
+    it("renders a result with the correct highlighted content", () => {
+        const element = render(PROPS);
+
+        const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
+        expect(titleBolds.length).toEqual(1);
+        expect(titleBolds[0].textContent).toEqual("title");
+
+        const descriptionBolds =
+            element.shadowRoot.querySelectorAll(".description .bold");
+        expect(descriptionBolds.length).toEqual(1);
+        expect(descriptionBolds[0].textContent).toEqual("descr");
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders a result as selected when specified", () => {
+        const element = render({ ...PROPS, selected: true });
+
+        const selected = element.shadowRoot.querySelector(
+            ".sidebar-item-selected"
+        );
+        expect(selected).not.toBeNull();
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("doesn't add bold class when there is no highlighted term", () => {
+        const element = render({
+            ...PROPS,
+            descriptionHighlights: [],
+            titleHighlights: []
+        });
+
+        const selected = element.shadowRoot.querySelector(".bold");
+        expect(selected).toBeNull();
+
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -28,7 +28,7 @@ a {
 }
 
 .bold {
-    font-weight: bold;
+    font-weight: 700;
 }
 
 a > *:not(:last-child) {

package/src/modules/dx/{headerNavOption/__tests__/headerNavOption.test.ts → tab/__tests__/tab.test.ts}

@@ -1,9 +1,12 @@
-import HeaderNavOption from "dx/headerNavOption";
+import Tab from "dx/tab";
 import Icon from "dx/icon";
+import { track } from "dx/instrumentation";
 import { createRenderComponent } from "utils/tests";
 
-const TAG = "dx-header-nav-option";
-const render = createRenderComponent(TAG, HeaderNavOption);
+jest.mock("dx/instrumentation");
+
+const TAG = "dx-tab";
+const render = createRenderComponent(TAG, Tab);
 
 const PROPS = {
     label: "documentation",
@@ -14,9 +17,8 @@ describe(TAG, () => {
     it("renders a single link with a label", () => {
         const element = render(PROPS);
 
-        const links: Array<HTMLAnchorElement> = element.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            element.shadowRoot.querySelectorAll("a");
 
         expect(links.length).toEqual(1);
         const [singleLink] = links;
@@ -53,9 +55,8 @@ describe(TAG, () => {
         const label = "test button";
         const element = render({ label });
 
-        const buttons: Array<HTMLButtonElement> = element.shadowRoot.querySelectorAll(
-            "button"
-        );
+        const buttons: Array<HTMLButtonElement> =
+            element.shadowRoot.querySelectorAll("button");
 
         expect(buttons).toHaveLength(1);
         const [singleButton] = buttons;
@@ -66,6 +67,23 @@ describe(TAG, () => {
 
         const span: HTMLElement = singleButton.querySelector("span")!;
         expect(span.textContent).toBe(label);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders a button with an icon if useIcon is passed as true", () => {
+        const label = "test button";
+        const element = render({ label, useIcon: true });
+
+        const buttons: Array<HTMLButtonElement> =
+            element.shadowRoot.querySelectorAll("button");
+
+        expect(buttons).toHaveLength(1);
+        const [singleButton] = buttons;
+
+        const span: HTMLElement = singleButton.querySelector("span")!;
+        expect(span.textContent).toBe(label);
+
         const icon: Element & Icon = singleButton.querySelector("dx-icon")!;
         expect(icon).not.toBeNull();
         expect(icon.size).toBe("small");
@@ -75,11 +93,10 @@ describe(TAG, () => {
 
     it("renders a button with label only if variant is small", () => {
         const label = "test button";
-        const element = render({ label, variant: "small" });
+        const element = render({ label, variant: "small", useIcon: "true" });
 
-        const button: HTMLButtonElement = element.shadowRoot.querySelector(
-            "button"
-        );
+        const button: HTMLButtonElement =
+            element.shadowRoot.querySelector("button");
 
         expect(button.classList).toHaveLength(2);
         expect(button.classList).toContain("nav-list-item");
@@ -95,19 +112,18 @@ describe(TAG, () => {
         return expect(element).toBeAccessible();
     });
 
-    it("fires sendGtm function when button is clicked", () => {
-        const sendGtmMock = jest.fn();
-        const element = render({
-            ...PROPS,
-            onclick: sendGtmMock
-        });
-
-        const link = element.shadowRoot.querySelector("a");
+    it("calls track when the link is clicked", () => {
+        const element = render(PROPS);
 
+        const link: HTMLElement = element.shadowRoot.querySelector("a");
+        expect(link).not.toBeNull();
         link.click();
 
-        expect(sendGtmMock).toHaveBeenCalled();
-
-        return expect(element).toBeAccessible();
+        expect(track).toHaveBeenCalledTimes(1);
+        expect(track).toBeCalledWith(link, "custEv_topNavLinkClick", {
+            navHeading: PROPS.label,
+            clickText: PROPS.href,
+            pageLocation: window.location.pathname
+        });
     });
 });

package/src/modules/dx/{headerNavOption/headerNavOption.css → tab/tab.css}

@@ -5,7 +5,10 @@ a {
 }
 
 .nav-list-item {
-    --horizontal-spacing: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(
+        --dx-c-tab-horizontal-spacing,
+        var(--dx-g-spacing-md)
+    );
 
     position: relative;
     display: flex;
@@ -50,12 +53,15 @@ button.nav-list-item_small > dx-icon {
 .nav-list-item_default:hover,
 .nav-list-item_default:active,
 :host([aria-expanded="true"]) button.nav-list-item_default {
-    background: var(--dx-g-brand-current-button-color-background-inactive);
+    background: var(
+        --dx-g-brand-current-button-color-background-inactive,
+        var(--dx-g-brand-default-button-color-background-inactive)
+    );
 }
 
-button.nav-list-item:hover > *:last-child,
-button.nav-list-item:active > *:last-child,
-:host([aria-expanded="true"]) button.nav-list-item > *:last-child {
+button.nav-list-item:hover > dx-icon,
+button.nav-list-item:active > dx-icon,
+:host([aria-expanded="true"]) button.nav-list-item > dx-icon {
     transform: rotateX(180deg);
 }
 
@@ -74,18 +80,27 @@ button.nav-list-item:active > *:last-child,
 }
 
 .nav-list-item_default.state-active {
-    background: var(--dx-g-brand-current-button-color-background-active);
-    color: var(--dx-g-brand-current-color);
+    background: var(
+        --dx-g-brand-current-button-color-background-active,
+        var(--dx-g-brand-default-button-color-background-active)
+    );
+    color: var(--dx-g-brand-current-color, var(--dx-g-brand-default-color));
 }
 
 @media (max-width: 1160px) {
     .nav-list-item_small {
-        --horizontal-spacing: var(--dx-g-spacing-smd);
+        --horizontal-spacing: var(
+            --dx-c-tab-horizontal-spacing,
+            var(--dx-g-spacing-smd)
+        );
     }
 }
 
 @media (max-width: 1090px) {
     .nav-list-item_small {
-        --horizontal-spacing: var(--dx-g-spacing-sm);
+        --horizontal-spacing: var(
+            --dx-c-tab-horizontal-spacing,
+            var(--dx-g-spacing-sm)
+        );
     }
 }

package/src/modules/dx/{headerNavOption/headerNavOption.html → tab/tab.html}

@@ -4,6 +4,10 @@
     </a>
     <button if:false={href} class={className}>
         <span>{label}</span>
-        <dx-icon symbol="chevrondown" size={iconSize}></dx-icon>
+        <dx-icon
+            if:true={useIcon}
+            symbol="chevrondown"
+            size={iconSize}
+        ></dx-icon>
     </button>
 </template>

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

@@ -0,0 +1,57 @@
+import { html } from "lit-html";
+import { TabVariant } from "typings/custom";
+
+type StoryArgs = {
+    isActive: boolean;
+    label: string;
+    useIcon: boolean;
+    variant: TabVariant;
+};
+const VARIANT_OPTIONS: Array<TabVariant> = ["default", "small"];
+
+export default {
+    title: "dx/dx-tab",
+    component: "dx-tab",
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+                options: VARIANT_OPTIONS
+            }
+        }
+    }
+};
+
+const Template = ({ variant, label, isActive, useIcon }: StoryArgs) => html`
+    <dx-tab
+        label="${label}"
+        is-active="${isActive}"
+        variant="${variant}"
+        use-icon="${useIcon}"
+    ></dx-tab>
+`;
+
+export const Base = (args: StoryArgs) => Template(args);
+Base.args = {
+    isActive: false,
+    useIcon: false,
+    label: "Banana",
+    variant: VARIANT_OPTIONS[0]
+};
+
+export const TabGroup = ({ variant }: { variant: TabVariant }) => html`
+    <style>
+        .container {
+            display: flex;
+            --dx-c-tab-horizontal-spacing: var(--dx-g-spacing-xs);
+        }
+    </style>
+    <nav class="container">
+        <dx-tab label="Banana" variant="${variant}"></dx-tab>
+        <dx-tab label="Apple" variant="${variant}"></dx-tab>
+    </nav>
+`;
+
+TabGroup.args = {
+    variant: VARIANT_OPTIONS[0]
+};

package/src/modules/dx/{headerNavOption/headerNavOption.ts → tab/tab.ts}

@@ -1,19 +1,40 @@
 import { LightningElement, api } from "lwc";
 import { track } from "dx/instrumentation";
 import cx from "classnames";
-import { HeaderNavVariant } from "typings/custom";
+import { TabVariant } from "typings/custom";
+import { normalizeBoolean } from "utils/normalizers";
 
-export default class HeaderNavOption extends LightningElement {
-    @api isActive: boolean = false;
+export default class Tab extends LightningElement {
     @api label: string | null = null;
     @api href: string | null = null;
-    @api variant: HeaderNavVariant = "default";
+    @api variant: TabVariant = "default";
+
+    @api
+    get isActive() {
+        return this._isActive;
+    }
+
+    set isActive(value) {
+        this._isActive = normalizeBoolean(value);
+    }
+
+    @api
+    get useIcon() {
+        return this._useIcon;
+    }
+
+    set useIcon(value) {
+        this._useIcon = normalizeBoolean(value);
+    }
+
+    _useIcon = false;
+    _isActive = false;
 
     private sendGtm(e: PointerEvent) {
         track(e.currentTarget!, "custEv_topNavLinkClick", {
             navHeading: this.label || undefined,
             clickText: this.href || undefined,
-            pageLocation: window.location.pathname || undefined
+            pageLocation: window.location.pathname
         });
     }
 

package/src/modules/utils/coveo/coveo.ts

@@ -1,25 +1,60 @@
-import { buildSearchEngine as _buildSearchEngine } from "@coveo/headless";
+import {
+    buildSearchEngine as _buildSearchEngine,
+    SearchAppState,
+    SearchEngineOptions
+} from "@coveo/headless";
 
 export const buildSearchEngine = ({
     organizationId,
+    preloadedState,
     publicAccessToken,
-    searchPipeline: pipeline,
-    searchHub
+    searchHub,
+    searchPipeline
 }: {
     organizationId: string;
     publicAccessToken: string;
     searchPipeline: string;
     searchHub: string;
+    preloadedState: SearchAppState;
 }) => {
-    const search = pipeline ? { pipeline, searchHub } : { searchHub };
-    return _buildSearchEngine({
-        configuration: {
-            organizationId,
-            accessToken: publicAccessToken,
-            search
-        }
-    });
+    const search = searchPipeline
+        ? { pipeline: searchPipeline, searchHub }
+        : { searchHub };
+
+    const configuration = {
+        accessToken: publicAccessToken,
+        organizationId,
+        search
+    };
+
+    const engineConfiguration: SearchEngineOptions = preloadedState
+        ? { configuration, preloadedState }
+        : { configuration };
+
+    return _buildSearchEngine(engineConfiguration);
 };
 
 export const getSidebarSearchParams = () =>
     new URLSearchParams(window.location.search).get("q");
+
+export const coveoXMLDocsConfig = {
+    coveoOrganizationId: "coveosalesforcetestakshatha",
+    coveoPublicAccessToken: "xxfeb39525-e402-4e41-a870-7132441f7875",
+    coveoSearchHub: "Developer_Docs_SS",
+    coveoAdvancedQueryConfig: JSON.stringify({
+        objecttype: "HTDeveloperDocumentsC",
+        sflanguage: "en_US",
+        sfrelease__c: "232.0",
+        sfdelivarable__c: "apexcode"
+    })
+};
+
+export const coveoSFDocsConfig = {
+    coveoOrganizationId: "coveosalesforcetestakshatha",
+    coveoPublicAccessToken: "xxfeb39525-e402-4e41-a870-7132441f7875",
+    coveoSearchHub: "Developer_MdDocs_SS",
+    coveoAdvancedQueryConfig: JSON.stringify({
+        source: "Sitemap - Developer Docs",
+        path_segment_3: "pardot"
+    })
+};

package/src/modules/utils/normalizers/normalizers.ts

@@ -86,3 +86,6 @@ export const normalizePost = ({
     id,
     title
 });
+
+export const normalizeBoolean = (value: string | boolean | number): boolean =>
+    typeof value === "string" ? value === "true" : !!value;

package/src/modules/utils/recentSearches/__tests__/recentSearches.test.ts

@@ -0,0 +1,79 @@
+import { RecentSearches, LOCAL_STORAGE_KEY, LIMIT } from "utils/recentSearches";
+
+describe("recentSearches", () => {
+    beforeEach(() => {
+        window.localStorage.clear();
+    });
+
+    it("initializes correctly from local storage", () => {
+        const initial = ["test", "test1", "test2"];
+
+        window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(initial));
+        const Searches = new RecentSearches();
+
+        expect(Searches.get()).toEqual(initial);
+    });
+
+    it("ignores exact duplicate additions", () => {
+        const Searches = new RecentSearches();
+
+        const item = "test";
+
+        Searches.add(item);
+        Searches.add(item);
+
+        expect(Searches.get().length).toEqual(1);
+    });
+
+    it("ignores duplicate additions with extraneous white space", () => {
+        const Searches = new RecentSearches();
+
+        const item1 = "test";
+        const item2 = " test ";
+
+        Searches.add(item1);
+        Searches.add(item2);
+
+        expect(Searches.get().length).toEqual(1);
+        expect(Searches.get()[0]).toEqual(item1);
+    });
+
+    it("prioritizes the last searched item", () => {
+        const Searches = new RecentSearches();
+
+        const item1 = "test1";
+        const item2 = "test2";
+
+        Searches.add(item1);
+        Searches.add(item2);
+
+        expect(Searches.get().length).toEqual(2);
+
+        expect(Searches.get()[0]).toEqual(item2);
+        expect(Searches.get()[1]).toEqual(item1);
+
+        Searches.add(item1);
+
+        expect(Searches.get().length).toEqual(2);
+        expect(Searches.get()[0]).toEqual(item1);
+        expect(Searches.get()[1]).toEqual(item2);
+    });
+
+    it("will not exceed the limit", () => {
+        const Searches = new RecentSearches();
+
+        Array.apply(null, Array(LIMIT + 1)).forEach((_, i) => {
+            Searches.add(i.toString());
+        });
+
+        expect(Searches.get().length).toEqual(LIMIT);
+    });
+
+    it("doesn't add a bogus value", () => {
+        const Searches = new RecentSearches();
+
+        [null, "", " ", "    ", 5].forEach((v) => Searches.add(v));
+
+        expect(Searches.get().length).toEqual(0);
+    });
+});

package/src/modules/utils/recentSearches/recentSearches.ts

@@ -1,6 +1,6 @@
-const RECENT_SEARCHES = "dx-sidebar-recent-searches";
+export const LOCAL_STORAGE_KEY = "dx-sidebar-recent-searches";
 
-const LIMIT = 5;
+export const LIMIT = 5;
 
 export class RecentSearches {
     items: string[] = [];
@@ -10,16 +10,16 @@ export class RecentSearches {
     }
 
     get() {
-        return this.items.map((item) => ({ id: item, label: item }));
+        return this.items;
     }
 
     add(item: string | undefined) {
-        if (!item) {
+        if (!item || typeof item !== "string") {
             return;
         }
         const normalized = item.trim();
         if (normalized === "") {
-            return
+            return;
         }
         this._prepend(normalized);
         this._removeDuplicates(normalized);
@@ -30,7 +30,7 @@ export class RecentSearches {
     // private
     _init() {
         this.items = JSON.parse(
-            window.localStorage.getItem(RECENT_SEARCHES) || "[]"
+            window.localStorage.getItem(LOCAL_STORAGE_KEY) || "[]"
         );
     }
 
@@ -50,17 +50,8 @@ export class RecentSearches {
 
     _addToStorage() {
         window.localStorage.setItem(
-            RECENT_SEARCHES,
+            LOCAL_STORAGE_KEY,
             JSON.stringify(this.items)
         );
     }
-
-    _isDuplicate(searchItem: string) {
-        return (
-            this.items.filter(
-                (item: string) =>
-                    item.toLowerCase() === searchItem.toLowerCase()
-            ).length > 0
-        );
-    }
 }