@salesforcedevs/dx-components 0.16.1 → 0.18.0

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

@@ -0,0 +1,56 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { CoveoHighlights } from "typings/custom";
+
+const toChunks = (value: string, highlights: CoveoHighlights) => {
+    if (!highlights || highlights.length < 1) {
+        return [
+            {
+                value,
+                id: 0
+            }
+        ];
+    }
+
+    let endIndex = 0;
+    return highlights.reduce((acc, { length, offset }) => {
+        const plainValue = value.slice(endIndex, offset);
+        const plainChunk = {
+            value: plainValue,
+            id: endIndex
+        };
+
+        endIndex = offset + length;
+        const boldValue = value.slice(offset, endIndex);
+        const boldChunk = {
+            value: boldValue,
+            class: "bold",
+            id: offset
+        };
+
+        return plainValue.length > 0
+            ? [...acc, plainChunk, boldChunk]
+            : [...acc, boldChunk];
+    }, []);
+};
+
+export default class SidebarSearchResult extends LightningElement {
+    @api description!: string;
+    @api descriptionHighlights!: CoveoHighlights;
+    @api href!: string;
+    @api selected!: boolean;
+    @api title!: string;
+    @api titleHighlights!: CoveoHighlights;
+
+    private get titleChunks() {
+        return toChunks(this.title, this.titleHighlights);
+    }
+
+    private get descriptionChunks() {
+        return toChunks(this.description, this.descriptionHighlights);
+    }
+
+    private get className(): string {
+        return cx("sidebar-item", this.selected && "sidebar-item-selected");
+    }
+}

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

@@ -24,23 +24,20 @@ describe(TAG, () => {
     describe("render", () => {
         it("should render as a leaf tile", () => {
             const component = render({ treeNode: SINGLE_NODE, href: "/test" });
-            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
-                "a.tile"
-            );
+            const tileAnchor: HTMLElement =
+                component.shadowRoot.querySelector("a.tile");
 
             expect(tileAnchor.getAttribute("href")).toBe("/test");
-            expect(tileAnchor.classList).toHaveLength(1);
+            expect(tileAnchor.classList).toHaveLength(2);
             expect(tileAnchor).not.toBeNull();
             assertLevelAndLabel(tileAnchor);
 
-            const arrowIcon: Icon = component.shadowRoot.querySelector(
-                "dx-icon"
-            );
+            const arrowIcon: Icon =
+                component.shadowRoot.querySelector("dx-icon");
             expect(arrowIcon).toBeNull();
 
-            const typeBadge = component.shadowRoot.querySelector(
-                "dx-type-badge"
-            );
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
             expect(typeBadge).toBeNull();
 
             return expect(component).toBeAccessible();
@@ -52,23 +49,20 @@ describe(TAG, () => {
                 isRoot: true,
                 hasChildren: true
             });
-            const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
-                "a.tile.tile-root"
-            );
+            const tileAnchor: HTMLElement =
+                component.shadowRoot.querySelector("a.tile.tile-root");
             expect(tileAnchor).not.toBeNull();
-            expect(tileAnchor.classList).toHaveLength(2);
+            expect(tileAnchor.classList).toHaveLength(3);
             assertLevelAndLabel(tileAnchor);
 
-            const arrowIcon: Icon = component.shadowRoot.querySelector(
-                "dx-icon"
-            )!;
+            const arrowIcon: Icon =
+                component.shadowRoot.querySelector("dx-icon")!;
             expect(arrowIcon).not.toBeNull();
             expect(arrowIcon.getAttribute("aria-expanded")).toBe("false");
             expect(arrowIcon.size).toBe("small");
 
-            const typeBadge = component.shadowRoot.querySelector(
-                "dx-type-badge"
-            );
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
             expect(typeBadge).toBeNull();
 
             return expect(component).toBeAccessible();
@@ -85,19 +79,17 @@ describe(TAG, () => {
             );
 
             expect(tileAnchor).not.toBeNull();
-            expect(tileAnchor.classList).toHaveLength(2);
+            expect(tileAnchor.classList).toHaveLength(3);
             assertLevelAndLabel(tileAnchor);
 
-            const arrowIcon: Icon = component.shadowRoot.querySelector(
-                "dx-icon"
-            );
+            const arrowIcon: Icon =
+                component.shadowRoot.querySelector("dx-icon");
             expect(arrowIcon).not.toBeNull();
             expect(arrowIcon.getAttribute("aria-expanded")).toBe("true");
             expect(arrowIcon.size).toBe("xsmall");
 
-            const typeBadge = component.shadowRoot.querySelector(
-                "dx-type-badge"
-            );
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
             expect(typeBadge).toBeNull();
 
             return expect(component).toBeAccessible();
@@ -109,19 +101,18 @@ describe(TAG, () => {
                 isSelected: true
             });
             const tileAnchor: HTMLElement = component.shadowRoot.querySelector(
-                "a.tile.tile-selected"
+                "a.tile.sidebar-item-selected"
             );
             expect(tileAnchor).not.toBeNull();
-            expect(tileAnchor.classList).toHaveLength(2);
+            expect(tileAnchor.classList).toHaveLength(3);
 
             return expect(component).toBeAccessible();
         });
 
         it("should render a leaf tile with a valid brand method", () => {
             const component = render({ treeNode: SINGLE_NODE_WITH_METHOD });
-            const typeBadge = component.shadowRoot.querySelector(
-                "dx-type-badge"
-            );
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
 
             expect(typeBadge).not.toBeNull();
             expect(typeBadge.classList).toHaveLength(3);
@@ -140,9 +131,8 @@ describe(TAG, () => {
             const component = render({
                 treeNode: { ...SINGLE_NODE_WITH_METHOD, method }
             });
-            const typeBadge = component.shadowRoot.querySelector(
-                "dx-type-badge"
-            );
+            const typeBadge =
+                component.shadowRoot.querySelector("dx-type-badge");
 
             expect(typeBadge).not.toBeNull();
             expect(typeBadge.classList).toHaveLength(3);
@@ -163,9 +153,8 @@ describe(TAG, () => {
                 isExpanded: true
             });
 
-            const arrowIcon: HTMLElement = component.shadowRoot.querySelector(
-                "dx-icon"
-            );
+            const arrowIcon: HTMLElement =
+                component.shadowRoot.querySelector("dx-icon");
 
             const mockIconClick = jest.fn();
             component.addEventListener("iconclick", mockIconClick);

package/src/modules/dx/treeTile/treeTile.css

@@ -1,3 +1,6 @@
+@import "helpers/reset";
+@import "helpers/sidebar";
+
 :host {
     display: block;
 
@@ -22,11 +25,6 @@
     font-family: var(--dx-g-font-sans);
     font-size: 13px;
     line-height: var(--tile-height);
-    padding: 6px var(--dx-g-spacing-md);
-}
-
-.tile:not(.tile-selected):hover {
-    background-color: var(--dx-g-gray-90);
 }
 
 .tile-root {
@@ -37,20 +35,6 @@
     display: block;
 }
 
-.tile-selected {
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-60);
-    border-radius: 0;
-}
-
-.truncate {
-    display: -webkit-box;
-    overflow: hidden;
-    word-break: break-word;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
 .tile-icon {
     align-items: center;
     height: var(--tile-height);

package/src/modules/dx/treeTile/treeTile.html

@@ -1,7 +1,10 @@
 <template>
     <a href={href} class={tileClass}>
         <div class="flex indentation" aria-level={tileAriaLevel}>
-            <span class="tile-label truncate" title={treeNode.label}>
+            <span
+                class="tile-label sidebar-item-truncate-text"
+                title={treeNode.label}
+            >
                 {treeNode.label}
             </span>
             <div class="flex tile-expand-icon tile-icon" if:true={hasChildren}>

package/src/modules/dx/treeTile/treeTile.ts

@@ -44,10 +44,10 @@ export default class TreeTile extends LightningElement {
     }
 
     private get tileClass() {
-        return cx("tile", {
+        return cx("tile", "sidebar-item", {
             "tile-root": this.isRoot,
             "tile-with-children": !this.isRoot && this.hasChildren,
-            "tile-selected": this.isSelected
+            "sidebar-item-selected": this.isSelected
         });
     }
 

package/src/modules/helpers/sidebar/sidebar.css

@@ -0,0 +1,21 @@
+.sidebar-item-truncate-text {
+    display: -webkit-box;
+    overflow: hidden;
+    word-break: break-word;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+}
+
+.sidebar-item-selected {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-60);
+    border-radius: 0;
+}
+
+.sidebar-item {
+    padding: 6px var(--dx-g-spacing-md);
+}
+
+.sidebar-item:not(.sidebar-item-selected):hover {
+    background-color: var(--dx-g-gray-90);
+}

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

@@ -0,0 +1,69 @@
+import {
+    buildSearchEngine as _buildSearchEngine,
+    SearchAppState,
+    SearchEngineOptions
+} from "@coveo/headless";
+
+export const buildSearchEngine = ({
+    organizationId,
+    preloadedState,
+    publicAccessToken,
+    searchHub,
+    searchPipeline
+}: {
+    organizationId: string;
+    publicAccessToken: string;
+    searchPipeline?: string;
+    searchHub: string;
+    preloadedState?: SearchAppState;
+}) => {
+    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");
+
+const coveoOrganizationId = "coveosalesforcetestakshatha";
+
+export const coveoHeaderConfig = {
+    coveoOrganizationId,
+    coveoPublicAccessToken: "xx8d9c92ef-1018-4d92-a3c7-647dff01c21c",
+    coveoSearchPipeline: "salesforcedevdoc",
+    coveoSearchHub: "salesforcedevdoc"
+};
+
+export const coveoXMLDocsConfig = {
+    coveoOrganizationId,
+    coveoPublicAccessToken: "xxfeb39525-e402-4e41-a870-7132441f7875",
+    coveoSearchHub: "Developer_Docs_SS",
+    coveoAdvancedQueryConfig: JSON.stringify({
+        objecttype: "HTDeveloperDocumentsC",
+        sflocale__c: "en_US",
+        sfrelease__c: "232.0",
+        sfdelivarable__c: "apexcode"
+    })
+};
+
+export const coveoSFDocsConfig = {
+    coveoOrganizationId,
+    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/headerBase/headerBase.ts

@@ -18,7 +18,14 @@ const VALID_BRANDS = [
     "service",
     "success"
 ];
-const SIGN_UP_LABEL = "Sign Up";
+
+export const ANALYTICS_INFO = {
+    clickText: "Sign Up",
+    itemTitle: "Sign Up Header Button",
+    elementType: "button",
+    destinationType: "internal",
+    ctaClick: true
+};
 
 export abstract class HeaderBase extends LightningElement {
     @api bailHref?: string | null = null;
@@ -33,6 +40,9 @@ export abstract class HeaderBase extends LightningElement {
     @api subtitle!: string;
     @api title: string = "Salesforce";
     @api version?: string | null = null;
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
+
 
     @api
     get navItems() {
@@ -182,7 +192,8 @@ export abstract class HeaderBase extends LightningElement {
 
     private handleSignUpClick(e: PointerEvent) {
         track(e.currentTarget!, "custEv_signupStart", {
-            clickText: SIGN_UP_LABEL
+            ...ANALYTICS_INFO,
+            clickUrl: this.signupLink,
         });
     }
 

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

@@ -0,0 +1,108 @@
+import { createElement } from "lwc";
+import CodeBlock from "dx/codeBlock";
+import { highlightTerms } from "utils/highlight";
+import { mockContent, allowedTags } from "./mockProps";
+
+const container = document.createElement("div");
+
+describe("highlight utility", () => {
+    afterEach(() => (container.innerHTML = ""));
+
+    it("highlights text that matches search criteria", () => {
+        container.innerHTML = mockContent;
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            "apex"
+        );
+        expect(container.querySelectorAll("mark")).toHaveLength(14);
+    });
+
+    it("doesn't highlight elements that contains dx/docs components", () => {
+        const searchTerm = "customreport";
+        const codeBlock = createElement("dx-code-block", { is: CodeBlock });
+        Object.assign(codeBlock, {
+            codeBlock: searchTerm,
+            language: "text"
+        });
+        container.appendChild(document.createElement("p"));
+        container.firstElementChild?.appendChild(codeBlock);
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            searchTerm
+        );
+        expect(container.querySelectorAll("mark")).toHaveLength(0);
+        expect(codeBlock.shadowRoot.innerHTML).toMatch(searchTerm); // sanity check
+    });
+
+    it("doesn't highlight terms separated by html tags", () => {
+        container.innerHTML = "<p>loadData<span>within</span></p>";
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            "loadDatawithin"
+        );
+        expect(container.querySelectorAll("mark")).toHaveLength(0);
+    });
+
+    it("escapes regex especial characters", () => {
+        container.innerHTML = mockContent;
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            "apex.+"
+        );
+        expect(container.querySelectorAll("mark")).toHaveLength(0);
+    });
+
+    it("cleans previous search result before searching for a new term", () => {
+        const firstSearch = "apex";
+        const secondSearch = "salesforce";
+
+        container.innerHTML = mockContent;
+
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            firstSearch
+        );
+        const firstMarks = container.querySelectorAll("mark");
+        expect(firstMarks).toHaveLength(14);
+        firstMarks.forEach(({ textContent }) =>
+            expect(textContent?.toLowerCase()).toBe(firstSearch)
+        );
+
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            secondSearch
+        );
+        const secondMarks = container.querySelectorAll("mark");
+        expect(secondMarks).toHaveLength(4);
+        secondMarks.forEach(({ textContent }) =>
+            expect(textContent?.toLowerCase()).toBe(secondSearch)
+        );
+    });
+
+    it("cleans all marks if the search term is empty string", () => {
+        const firstSearch = "apex";
+        const secondSearch = "";
+
+        container.innerHTML = mockContent;
+
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            firstSearch
+        );
+        const firstMarks = container.querySelectorAll("mark");
+        expect(firstMarks).toHaveLength(14);
+        firstMarks.forEach(({ textContent }) =>
+            expect(textContent?.toLowerCase()).toBe(firstSearch)
+        );
+
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            secondSearch
+        );
+        const secondMarks = container.querySelectorAll("mark");
+        expect(secondMarks).toHaveLength(0);
+        secondMarks.forEach(({ textContent }) =>
+            expect(textContent?.toLowerCase()).toBe(secondSearch)
+        );
+    });
+});

package/src/modules/utils/highlight/__tests__/mockProps.ts

@@ -0,0 +1,45 @@
+export const mockContent = `<div><a name='apex_dev_guide'><!-- --></a><h1 class='helpHead1'>Apex Developer Guide</h1><div class='shortdesc'>Salesforce has changed the way organizations do business by moving enterprise
+applications that were traditionally client-server-based into the Lightning Platform, an
+on-demand, multitenant Web environment. This environment enables you to run and customize
+applications, such as Salesforce Automation and Service &amp; Support, and build new custom
+applications based on particular business needs. </div><div id='sfdc:seealso' class='related-links'>
+<ul class='ullinks'>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_intro_get_started.htm'>Getting Started with Apex</a></strong><br>
+Apex is a strongly typed, object-oriented programming language that allows developers         to execute flow and transaction control statements on the Lightning Platform server, in         conjunction with calls to the API.</li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_writing.htm'>Writing Apex</a></strong><br>
+Apex is like Java for Salesforce. It enables you to add and interact with data in the         Lightning Platform persistence layer. It uses classes, data types, variables, and if-else         statements. You can make it execute based on a condition, or have a block of code execute         repeatedly.</li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_running.htm'>Running Apex</a></strong><br>
+You can access many features of the Salesforce user interface programmatically in         Apex, and you can integrate with external SOAP and REST Web services. You can run Apex code         using a variety of mechanisms. Apex code runs in atomic transactions. </li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_debug_test_deploy.htm'>Debugging, Testing, and Deploying Apex</a></strong><br>
+Develop your Apex code in a sandbox and debug it with the Developer Console and debug         logs. Unit-test your code, then distribute it to customers using packages.</li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_reference.htm'>Apex Language Reference</a></strong><br>
+This Apex reference goes into detail about DML statements and the built-in Apex         classes and interfaces.</li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_appendices.htm'>Appendices</a></strong><br>
+</li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/glossary_apex.htm'>Glossary</a></strong><br>
+</li>
+</ul>
+</div><!--DRC 228.7--></div>`;
+
+export const allowedTags = [
+    "p",
+    ".p",
+    ".shortdesc",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "li",
+    "dl",
+    "th",
+    "td"
+];

package/src/modules/utils/highlight/highlight.ts

@@ -3,7 +3,8 @@ import { createSearchRegExp } from "utils/regexps";
 const MARK_TAGS = /<\/?mark>/gi;
 
 export const highlightTerms = (
-    elements: Array<HTMLElement>,
+    // eslint-disable-next-line no-undef
+    elements: NodeListOf<Element>,
     searchTerm: string
 ): void => {
     searchTerm = searchTerm.trim();

package/src/modules/utils/jest/jest.ts

@@ -21,3 +21,38 @@ export const createMediaMock = (
 };
 
 export const matchMediaMock = createMediaMock();
+
+export const mockLocalStorage = function () {
+    let store: { [key: string]: string } = {};
+    return {
+        getItem: function (key: string) {
+            return store[key] || null;
+        },
+        setItem: function (key: string, value: string) {
+            store[key] = value.toString();
+        },
+        removeItem: function (key: string) {
+            delete store[key];
+        },
+        clear: function () {
+            store = {};
+        }
+    };
+};
+
+export const mockQueryParameter = (q: string): void => {
+    global.window = Object.create(window);
+    const search = q ? `?q=${q}` : "";
+    const href = `http://dummy.com${search}`;
+    // @ts-ignore
+    delete window.location.value;
+    Object.defineProperty(window, "location", {
+        value: {
+            href,
+            search
+        },
+        writable: true
+    });
+};
+
+export const unmockQueryParameter = () => mockQueryParameter("");

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);
+    });
+});