@salesforcedevs/dx-components 0.10.0 → 0.10.1-alpha.100

package/src/modules/helpers/table/table.css

@@ -1,5 +1,7 @@
 table {
     --table-border-radius: 4px;
+    --table-cell-text-base: var(--dx-g-text-sm);
+    --table-cell-line-height: var(--dx-g-text-lg);
 
     display: block;
     overflow-x: scroll;
@@ -16,13 +18,13 @@ table tr {
 th,
 td {
     padding: var(--dx-g-spacing-md);
-    font-size: var(--dx-g-text-sm);
-    line-height: var(--dx-g-text-lg);
+    font-size: var(--table-cell-text-base);
+    line-height: var(--table-cell-line-height);
 }
 
 th {
     background-color: var(--dx-g-indigo-vibrant-95);
-    font-weight: inherit;
+    font-weight: var(--dx-g-font-bold);
     border-bottom: 3px solid var(--dx-g-indigo-vibrant-30);
 }
 
@@ -40,10 +42,6 @@ table tbody tr td {
     border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
-th:first-of-type {
-    font-weight: var(--dx-g-font-bold);
-}
-
 tr th:first-of-type,
 td:first-of-type {
     min-width: 110px;
@@ -85,6 +83,24 @@ tr td[colspan]:not([colspan="1"]) {
     text-align: center;
 }
 
+/**
+ * Inside of a <td>, we want font size not to increase as it otherwise would
+ * for standard inline/"prose-level" elements (e.g., <p>, <li>). But we *do*
+ * want to leave font size increases in place for *other* elements inside <td>,
+ * like callouts, headings (<h1>, <h2>, etc.), and so on. In order not to
+ * "stomp" on too much -- and because we don't control the markup, so can't
+ * easily add new CSS classes, etc. -- we try to pick out the specific
+ * structures only here. (See https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE0000081MGTYA2/view)
+ */
+td :is(.li, p, .p, dd) {
+    font-size: var(--table-cell-text-base);
+}
+
+td doc-content-callout :is(.li, p, .p, dd) {
+    /* Override/reset for callouts -- see https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE0000081MGTYA2/view */
+    font-size: var(--dx-g-text-base);
+}
+
 table :not(thead + tbody) tr:first-of-type td:first-of-type {
     border-top-left-radius: var(--table-border-radius);
 }

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

@@ -0,0 +1,60 @@
+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");
+
+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/highlight/highlight.ts

@@ -0,0 +1,31 @@
+import { createSearchRegExp } from "utils/regexps";
+
+const MARK_TAGS = /<\/?mark>/gi;
+
+export const highlightTerms = (
+    elements: Array<HTMLElement>,
+    searchTerm: string
+): void => {
+    searchTerm = searchTerm.trim();
+    const searchExp = createSearchRegExp(searchTerm);
+    elements.forEach((element) => {
+        if (
+            element?.innerHTML.includes("<dx-") ||
+            element?.innerHTML.includes("<doc-")
+        ) {
+            return;
+        }
+
+        let innerHtml = element.innerHTML.replace(
+            // Remove previously added mark tags
+            MARK_TAGS,
+            ""
+        );
+
+        if (searchTerm) {
+            innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+        }
+
+        element.innerHTML = innerHtml;
+    });
+};

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

@@ -0,0 +1,57 @@
+export const LOCAL_STORAGE_KEY = "dx-sidebar-recent-searches";
+
+export const LIMIT = 5;
+
+export class RecentSearches {
+    items: string[] = [];
+
+    constructor() {
+        this._init();
+    }
+
+    get() {
+        return this.items;
+    }
+
+    add(item: string | undefined) {
+        if (!item || typeof item !== "string") {
+            return;
+        }
+        const normalized = item.trim();
+        if (normalized === "") {
+            return;
+        }
+        this._prepend(normalized);
+        this._removeDuplicates(normalized);
+        this._cutOffExcess();
+        this._addToStorage();
+    }
+
+    // private
+    _init() {
+        this.items = JSON.parse(
+            window.localStorage.getItem(LOCAL_STORAGE_KEY) || "[]"
+        );
+    }
+
+    _prepend(item: string) {
+        this.items.unshift(item);
+    }
+
+    _removeDuplicates(item: string) {
+        while (this.items.lastIndexOf(item) > 0) {
+            this.items.splice(this.items.lastIndexOf(item), 1);
+        }
+    }
+
+    _cutOffExcess() {
+        this.items = this.items.slice(0, LIMIT);
+    }
+
+    _addToStorage() {
+        window.localStorage.setItem(
+            LOCAL_STORAGE_KEY,
+            JSON.stringify(this.items)
+        );
+    }
+}

package/src/modules/utils/regexps/regexps.ts

@@ -0,0 +1,5 @@
+const escapeRegExp = (text: string) =>
+    text.replace(/[-[\]{}()*+?.,\\^$|]/g, "\\$&");
+
+export const createSearchRegExp = (searchTerm: string): RegExp =>
+    new RegExp(`(?:${escapeRegExp(searchTerm)})(?![^<>]*>)`, "gi");

package/LICENSE

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

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

@@ -1,113 +0,0 @@
-import HeaderNavOption from "dx/headerNavOption";
-import Icon from "dx/icon";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-header-nav-option";
-const render = createRenderComponent(TAG, HeaderNavOption);
-
-const PROPS = {
-    label: "documentation",
-    href: "/test"
-};
-
-describe(TAG, () => {
-    it("renders a single link with a label", () => {
-        const element = render(PROPS);
-
-        const links: Array<HTMLAnchorElement> = element.shadowRoot.querySelectorAll(
-            "a"
-        );
-
-        expect(links.length).toEqual(1);
-        const [singleLink] = links;
-        expect(singleLink.href).toMatch(PROPS.href);
-        expect(singleLink.classList).toHaveLength(2);
-        expect(singleLink.classList).toContain("nav-list-item");
-        expect(singleLink.classList).toContain("nav-list-item_default");
-
-        const span: HTMLElement = singleLink.querySelector("span")!;
-        expect(span.textContent).toBe(PROPS.label);
-
-        expect(element.shadowRoot.querySelector("button")).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a link as active and small variant", () => {
-        const element = render({ ...PROPS, isActive: true, variant: "small" });
-
-        const link: HTMLAnchorElement = element.shadowRoot.querySelector("a");
-
-        expect(link.href).toMatch(PROPS.href);
-        expect(link.classList).toHaveLength(3);
-        expect(link.classList).toContain("nav-list-item");
-        expect(link.classList).toContain("nav-list-item_small");
-        expect(link.classList).toContain("state-active");
-
-        expect(element.shadowRoot.querySelector("button")).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a button if no href provided", () => {
-        const label = "test button";
-        const element = render({ label });
-
-        const buttons: Array<HTMLButtonElement> = element.shadowRoot.querySelectorAll(
-            "button"
-        );
-
-        expect(buttons).toHaveLength(1);
-        const [singleButton] = buttons;
-
-        expect(singleButton.classList).toHaveLength(2);
-        expect(singleButton.classList).toContain("nav-list-item");
-        expect(singleButton.classList).toContain("nav-list-item_default");
-
-        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");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a button with label only if variant is small", () => {
-        const label = "test button";
-        const element = render({ label, variant: "small" });
-
-        const button: HTMLButtonElement = element.shadowRoot.querySelector(
-            "button"
-        );
-
-        expect(button.classList).toHaveLength(2);
-        expect(button.classList).toContain("nav-list-item");
-        expect(button.classList).toContain("nav-list-item_small");
-
-        const span: HTMLElement = button.querySelector("span")!;
-        expect(span.textContent).toBe(label);
-
-        const icon: Element & Icon = button.querySelector("dx-icon")!;
-        expect(icon).not.toBeNull();
-        expect(icon.size).toBe("xsmall");
-
-        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");
-
-        link.click();
-
-        expect(sendGtmMock).toHaveBeenCalled();
-
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/headerNavOption/headerNavOption.css

@@ -1,91 +0,0 @@
-@import "helpers/reset";
-
-a {
-    text-decoration: none;
-}
-
-.nav-list-item {
-    --horizontal-spacing: var(--dx-g-spacing-md);
-
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: var(--dx-g-spacing-xl);
-    font-family: var(--dx-g-font-display);
-    white-space: nowrap;
-    color: var(--dx-g-blue-vibrant-20);
-    transition: var(--dx-g-transition-hue-1x);
-    cursor: pointer;
-    outline-offset: -1px;
-}
-
-.nav-list-item_default {
-    border: 0;
-    border-radius: var(--dx-g-spacing-md);
-    font-size: var(--dx-g-text-sm);
-    padding: 0 var(--horizontal-spacing);
-}
-
-.nav-list-item_small {
-    --border-color: transparent;
-
-    border-bottom: 2px solid var(--border-color);
-    font-size: var(--dx-g-text-xs);
-    height: calc(var(--dx-g-spacing-xl) - 2px);
-    margin: 0 var(--horizontal-spacing);
-}
-
-.nav-list-item > span {
-    margin-top: var(--dx-g-spacing-xs);
-}
-
-button.nav-list-item_default > dx-icon {
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-button.nav-list-item_small > dx-icon {
-    margin-left: var(--dx-g-spacing-xs);
-}
-
-.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);
-}
-
-button.nav-list-item:hover > *:last-child,
-button.nav-list-item:active > *:last-child,
-:host([aria-expanded="true"]) button.nav-list-item > *:last-child {
-    transform: rotateX(180deg);
-}
-
-.nav-list-item_small:hover,
-.nav-list-item_small:active,
-:host([aria-expanded="true"]) button.nav-list-item_small {
-    --border-color: var(--dx-g-blue-vibrant-40);
-
-    color: var(--dx-g-blue-vibrant-40);
-}
-
-.nav-list-item_small.state-active {
-    --border-color: var(--dx-g-blue-vibrant-50);
-
-    color: var(--dx-g-blue-vibrant-50);
-}
-
-.nav-list-item_default.state-active {
-    background: var(--dx-g-brand-current-button-color-background-active);
-    color: var(--dx-g-brand-current-color);
-}
-
-@media (max-width: 1160px) {
-    .nav-list-item_small {
-        --horizontal-spacing: var(--dx-g-spacing-smd);
-    }
-}
-
-@media (max-width: 1090px) {
-    .nav-list-item_small {
-        --horizontal-spacing: var(--dx-g-spacing-sm);
-    }
-}

package/src/modules/dx/headerNavOption/headerNavOption.html

@@ -1,9 +0,0 @@
-<template>
-    <a if:true={href} class={className} href={href} onclick={sendGtm}>
-        <span>{label}</span>
-    </a>
-    <button if:false={href} class={className}>
-        <span>{label}</span>
-        <dx-icon symbol="chevrondown" size={iconSize}></dx-icon>
-    </button>
-</template>

package/src/modules/dx/headerNavOption/headerNavOption.ts

@@ -1,31 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
-import cx from "classnames";
-import { HeaderNavVariant } from "typings/custom";
-
-export default class HeaderNavOption extends LightningElement {
-    @api isActive: boolean = false;
-    @api label: string | null = null;
-    @api href: string | null = null;
-    @api variant: HeaderNavVariant = "default";
-
-    private sendGtm(e: PointerEvent) {
-        track(e.currentTarget!, "custEv_topNavLinkClick", {
-            navHeading: this.label || undefined,
-            clickText: this.href || undefined,
-            pageLocation: window.location.pathname || undefined
-        });
-    }
-
-    get className() {
-        return cx(
-            "nav-list-item",
-            this.isActive && "state-active",
-            `nav-list-item_${this.variant}`
-        );
-    }
-
-    get iconSize() {
-        return this.variant === "small" ? "xsmall" : "small";
-    }
-}

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

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

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

@@ -1,4 +0,0 @@
-export default {
-    index: 0,
-    groupId: "1"
-};

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

@@ -1,4 +0,0 @@
-export default {
-    index: 0,
-    groupId: "1"
-};

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

@@ -1,46 +0,0 @@
-import TabPanel from "dx/tabPanel";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-tab-panel";
-const render = createRenderComponent(TAG, TabPanel);
-
-describe(TAG, () => {
-    it("renders an active panel", () => {
-        const element = render({
-            ...mockProps,
-            active: true
-        });
-
-        const divEl = element.shadowRoot.querySelector("div");
-        expect(divEl).not.toBeNull();
-        // Using `startsWith` here instead of exactly matching the attribute
-        // because something is auto-suffixing the id an incrementing `-${index}`
-        expect(
-            divEl.getAttribute("id").startsWith("tabs--1--panel--0")
-        ).toEqual(true);
-        expect(
-            divEl.getAttribute("aria-labelledby").startsWith("tabs--1--tab--0")
-        ).toEqual(true);
-        expect(divEl.hasAttribute("hidden")).toEqual(false);
-        expect(divEl.getAttribute("tabindex")).toEqual("0");
-        expect(divEl.getAttribute("class")).toContain("tabpanel-active");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders an inactive panel", () => {
-        const element = render({
-            ...mockProps,
-            active: false
-        });
-
-        const divEl = element.shadowRoot.querySelector("div");
-        expect(divEl).not.toBeNull();
-        expect(divEl.hasAttribute("hidden")).toEqual(true);
-        expect(divEl.getAttribute("tabindex")).toEqual("-1");
-        expect(divEl.getAttribute("class")).not.toContain("tabpanel-active");
-
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/tabPanel/tabPanel.css

@@ -1,9 +0,0 @@
-@import "helpers/reset";
-
-.tabpanel {
-    display: none;
-}
-
-.tabpanel-active {
-    display: block;
-}

package/src/modules/dx/tabPanel/tabPanel.html

@@ -1,13 +0,0 @@
-<template>
-    <div
-        role="tabpanel"
-        part="tabpanel"
-        id={panelId}
-        class={className}
-        tabindex={activeTabIndex}
-        aria-labelledby={tabId}
-        hidden={panelHidden}
-    >
-        <slot></slot>
-    </div>
-</template>