@salesforcedevs/dx-components 0.10.1-alpha.13 → 0.10.1-alpha.133

package/src/modules/dx/spinner/spinner.html

@@ -0,0 +1,6 @@
+<template>
+    <div role="status" class={containerClass}>
+        <div class="spinner_dot-a"></div>
+        <div class="spinner_dot-b"></div>
+    </div>
+</template>

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

@@ -0,0 +1,69 @@
+import { html } from "lit-html";
+import { SpinnerSize, SpinnerVariant } from "typings/custom";
+
+type SpinnerStoryArgs = {
+    size: SpinnerSize;
+    variant: SpinnerVariant;
+};
+
+const sizeOptions: Array<SpinnerSize> = ["medium", "x-small", "small", "large"];
+const variantOptions: Array<SpinnerVariant> = ["base", "brand", "inverse"];
+const variantToBackgroundColor: { [key: string]: string } = {
+    inverse: "black"
+};
+
+export default {
+    title: "dx/dx-spinner",
+    component: "dx-spinner",
+    argTypes: {
+        size: {
+            control: {
+                type: "select",
+                options: sizeOptions
+            }
+        },
+        variant: {
+            control: {
+                type: "select",
+                options: variantOptions
+            }
+        }
+    }
+};
+
+const style = (variant: SpinnerVariant = "base") => html`
+    <style>
+        .spinner-wrapper {
+            position: relative;
+            height: 100vh;
+            background-color: ${variantToBackgroundColor[variant] || "white"};
+        }
+    </style>
+`;
+
+const [defaultSize] = sizeOptions;
+const [defaultVariant] = variantOptions;
+
+const Template = ({ size, variant }: SpinnerStoryArgs) => html`
+    ${style(variant)}
+    <div class="spinner-wrapper">
+        <dx-spinner
+            size="${size || defaultSize}"
+            variant="${variant || defaultVariant}"
+        ></dx-spinner>
+    </div>
+`;
+
+export const Base = Template;
+
+export const BrandLarge = (args: SpinnerStoryArgs) => Template(args);
+BrandLarge.args = {
+    size: "large",
+    variant: "brand"
+};
+
+export const InverseSmall = (args: SpinnerStoryArgs) => Template(args);
+InverseSmall.args = {
+    size: "small",
+    variant: "inverse"
+};

package/src/modules/dx/spinner/spinner.ts

@@ -0,0 +1,20 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import type { SpinnerSize, SpinnerVariant } from "typings/custom";
+
+export default class Spinner extends LightningElement {
+    @api size: SpinnerSize = "medium";
+    @api variant: SpinnerVariant = "base";
+
+    connectedCallback() {
+        this.classList.add("spinner_container");
+    }
+
+    get containerClass(): string {
+        return cx(
+            "spinner",
+            this.size && `spinner_${this.size}`,
+            this.variant && this.variant !== "base" && `spinner_${this.variant}`
+        );
+    }
+}

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/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

@@ -1,22 +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;
+    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/highlight/__tests__/highlight.test.ts

@@ -0,0 +1,154 @@
+import { createElement } from "lwc";
+import CodeBlock from "dx/codeBlock";
+import { highlightTerms } from "utils/highlight";
+
+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>`;
+
+const allowedTags = [
+    "p",
+    ".p",
+    ".shortdesc",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "li",
+    "dl",
+    "th",
+    "td"
+];
+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"
+            // title: "",
+            // variant: "card"
+        });
+        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)
+        );
+    });
+});