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

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

@@ -1,10 +1,15 @@
 import CodeBlock from "../codeBlock";
 import { createRenderComponent } from "utils/tests";
 import mockProps from "./mockProps";
+import { track as gtmTrack } from "dx/instrumentation";
 //import Prism from "utils/prismjs";
 
 const TAG = "dx-code-block";
 const render = createRenderComponent(TAG, CodeBlock);
+
+jest.mock("dx/instrumentation");
+
+const GTM_EVENT_NAME = "custEv_codeBlock";
 /*
 const mockPrismHighlight = jest.fn();
 jest.mock("utils/prismjs", () =>
@@ -20,6 +25,10 @@ describe(TAG, () => {
     const oldNavigator = window.navigator;
     const oldError = console.error;
 
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
     afterAll(() => {
         Object.assign(window.navigator, oldNavigator);
         Object.assign(console.error, oldError);
@@ -46,9 +55,8 @@ describe(TAG, () => {
             title: "Java Example",
             language: "java"
         });
-        const dxThemeLight = element.shadowRoot.querySelector(
-            ".dx-theme-light"
-        );
+        const dxThemeLight =
+            element.shadowRoot.querySelector(".dx-theme-light");
         expect(dxThemeLight).not.toContain(null);
 
         expect(element.shadowRoot.querySelector(".source-btn")).toBe(null);
@@ -67,8 +75,15 @@ describe(TAG, () => {
         const divTheme = element.shadowRoot.querySelector(".dx-theme-light");
         expect(divTheme).not.toBeNull();
 
+        const updateThemeBtn = element.shadowRoot.querySelector(
+            "dx-button.update-theme-btn"
+        );
+
         //update light -> dark
-        element.shadowRoot.querySelector("dx-button.update-theme-btn").click();
+        updateThemeBtn.click();
+
+        //gtm event
+        expect(gtmTrack).toBeCalled();
 
         return Promise.resolve()
             .then(() => {
@@ -77,10 +92,28 @@ describe(TAG, () => {
                 element.shadowRoot
                     .querySelector("dx-button.update-theme-btn")
                     .click();
+
+                //expect gtm event for dark mode
+                expect(gtmTrack).toBeCalledWith(
+                    updateThemeBtn,
+                    GTM_EVENT_NAME,
+                    {
+                        codeBlockAction: "darkmode"
+                    }
+                );
             })
             .then(() => {
                 //expect -> light
                 expect(divTheme.classList).toContain("dx-theme-light");
+
+                //expect gtm event for dark mode
+                expect(gtmTrack).toBeCalledWith(
+                    updateThemeBtn,
+                    GTM_EVENT_NAME,
+                    {
+                        codeBlockAction: "lightmode"
+                    }
+                );
             });
     });
 
@@ -140,6 +173,13 @@ describe(TAG, () => {
         expect(sourceBtn).not.toBe(null);
         sourceBtn.click();
 
+        //gtm event
+        expect(gtmTrack).toBeCalled();
+
+        expect(gtmTrack).toBeCalledWith(sourceBtn, GTM_EVENT_NAME, {
+            codeBlockAction: "copy"
+        });
+
         expect(window.navigator.clipboard.writeText).toBeCalledTimes(1);
         expect(window.navigator.clipboard.writeText).toBeCalledWith(
             element.shadowRoot.querySelector(".code-block-content").textContent
@@ -195,6 +235,8 @@ describe(TAG, () => {
 
         const divTheme = element.shadowRoot.querySelector(".dx-theme-light");
         expect(divTheme).not.toBeNull();
-        expect(window.localStorage.getItem("dx-codeblock-theme")).toBe("dark");
+        expect(window.localStorage.getItem("dx-codeblock-theme")).toBe(
+            element.defaultTheme
+        );
     });
 });

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

@@ -16,7 +16,7 @@ const styles = `
   }
 </style>`;
 
-export const DarkTheme = (args: any) => `${styles}
+export const Base = (args: any) => `${styles}
 
 <span class="dx-text-heading-7 dx-code-block-heading">XML Example - Dark Theme</span>
 <dx-code-block
@@ -98,74 +98,7 @@ export const DarkTheme = (args: any) => `${styles}
       language="php"
       default-theme="dark"
   ></dx-code-block>`;
-DarkTheme.args = mockProps;
-
-export const LightTheme = (args: any) => `${styles}
-
-<span class="dx-text-heading-7 dx-code-block-heading">XML Example - Light Theme</span>
-<dx-code-block
-    title="XML example"
-    code-block="${args.xml}"
-    language="xml
-></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Visualforce Example - Light Theme</span>
-  <dx-code-block
-      title="Visualforce example"
-      code-block="${args.visualforce}"
-      language="visualforce"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Java Example - Light Theme</span>
-  <dx-code-block
-      title="Java example"
-      code-block="${args.java}"
-      language="java"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Light Theme</span>
-  <dx-code-block
-      title="HTML Example"
-      code-block="${args.html}"
-      source-link="http://www.salesforce.com"
-      language="html"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">TypeScript Example - Light Theme</span>
-  <dx-code-block
-      title="TypeScript example"
-      code-block="${args.TypeScript}"
-      language="TypeScript"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Light Theme</span>
-  <dx-code-block
-      title="CSS example"
-      code-block="${args.css}"
-      language="css"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Apex Example - Light Theme</span>
-  <dx-code-block
-      title="Apex example"
-      code-block="${args.apex}"
-      language="apex"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">No Language Example - Light Theme</span>
-  <dx-code-block
-      title="No Language"
-      code-block="${args.apex}"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Light Theme</span>
-  <dx-code-block
-      title="PHP Example"
-      code-block="${args.php}"
-      language="php"
-  ></dx-code-block>`;
-
-LightTheme.args = mockProps;
+Base.args = mockProps;
 
 export const PreTag = (args: any) => `${styles}
     <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -1,25 +1,28 @@
-import { LightningElement, api, wire, track } from "lwc";
+import { LightningElement, api, track } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
-import Prism from "utils/prismjs";
-import {
-    getLocalStorageData,
-    setLocalStorageData
-} from "@sfdocs-internal/wires";
+// import Prism from "utils/prismjs";
+// import {
+//     getLocalStorageData,
+//     setLocalStorageData
+// } from "@sfdocs-internal/wires";
+import { track as gtmTrack } from "dx/instrumentation";
 
 // Used por remove enclosing <pre> tag's (if occurs)
 const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;
 
 const LIGHT = "light";
 const DARK = "dark";
-const themes: CodeBlockTheme[] = [LIGHT, DARK];
-const LOCAL_STORAGE_KEY = "dx-codeblock-theme";
+// const themes: CodeBlockTheme[] = [LIGHT, DARK];
+// const LOCAL_STORAGE_KEY = "dx-codeblock-theme";
 
 export default class CodeBlock extends LightningElement {
     @api defaultTheme: CodeBlockTheme = LIGHT;
     @api title: string = "title";
     @api sourceLink: string = "";
     @api language: string = "";
+    // if it is true, it renders code as is coming instead of wrapping it into html/xml comments tags.
+    @api isEncoded = false;
 
     private markupLangs = ["visualforce", "html", "xml"];
     private _codeBlockRendered: boolean = false;
@@ -65,14 +68,17 @@ export default class CodeBlock extends LightningElement {
 
     @track private theme: CodeBlockTheme | null = null;
 
-    @wire(getLocalStorageData, { key: "dx-codeblock-theme" })
-    updateThemeForCodeblock(value: any) {
-        if (themes.includes(value)) {
-            this.theme = value;
-        } else {
-            setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
-        }
-    }
+    // @wire(getLocalStorageData, { key: "dx-codeblock-theme" })
+    // updateThemeForCodeblock(value: any) {
+    //     if (themes.includes(value)) {
+    //         this.theme = value;
+    //     } else {
+    //         setLocalStorageData(
+    //             LOCAL_STORAGE_KEY,
+    //             this.theme || this.defaultTheme
+    //         );
+    //     }
+    // }
 
     get updateThemeBtnText(): string {
         return `Switch to ${this.theme === DARK ? "Light" : "Dark"} mode`;
@@ -89,7 +95,10 @@ export default class CodeBlock extends LightningElement {
     formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
-        if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
+        if (
+            !this.isEncoded &&
+            this.markupLangs.includes(this.selectedLanguage.id || "")
+        ) {
             // eslint-disable-next-line
             templateEl.innerHTML = `<pre class='codeblock'><!-- ${this.codeBlock.replace(
                 /<!--(.*?)-->/gs,
@@ -97,7 +106,11 @@ export default class CodeBlock extends LightningElement {
             )} --></pre>`;
         } else {
             // eslint-disable-next-line
-            templateEl.innerHTML = `<pre class='codeblock'>${this.codeBlock}</pre>`;
+            const innerHtml = this.isEncoded
+                ? this.codeBlock
+                : this.codeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
+
+            templateEl.innerHTML = `<pre class='codeblock'>${innerHtml}</pre>`;
         }
         const codeBlockEls = templateEl.content.querySelectorAll("pre");
         codeBlockEls.forEach((codeBlockEl) => {
@@ -120,7 +133,7 @@ export default class CodeBlock extends LightningElement {
             // eslint-disable-next-line
             codeBlockEl.innerHTML = "";
             codeBlockEl.appendChild(codeEl);
-            Prism.highlightAllUnder(codeBlockEl);
+            // Prism.highlightAllUnder(codeBlockEl);
         });
 
         if (divEl) {
@@ -154,7 +167,11 @@ export default class CodeBlock extends LightningElement {
      * Note: There is a known issue in storybook@6.1.13 where some apis are not available if you access Storybook through IP address.
      * https://github.com/storybookjs/storybook/issues/13529
      */
-    async copySource() {
+    async copySource(event: any) {
+        gtmTrack(event.target, "custEv_codeBlock", {
+            codeBlockAction: "copy"
+        });
+
         try {
             const snippetContainer: HTMLElement | null = this.template.querySelector(
                 ".code-block-content"
@@ -173,9 +190,13 @@ export default class CodeBlock extends LightningElement {
         }
     }
 
-    updateTheme() {
+    updateTheme(event: any) {
         this.theme = this.theme === DARK ? LIGHT : DARK;
-        setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
+        // setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
+
+        gtmTrack(event.target, "custEv_codeBlock", {
+            codeBlockAction: this.theme === DARK ? "darkmode" : "lightmode"
+        });
     }
 
     renderedCallback() {

package/src/modules/dx/codeBlock/darkTheme.css

@@ -19,7 +19,6 @@
 }
 
 .dx-theme-dark .token.operator {
-    background-color: var(--dx-g-blue-vibrant-20);
     color: var(--dx-g-pink-vibrant-65);
 }
 

package/src/modules/dx/codeBlock/lightTheme.css

@@ -16,7 +16,6 @@
 
 .dx-theme-light .token.operator {
     color: var(--dx-g-green-vibrant-50);
-    background-color: #fff;
 }
 
 .dx-theme-light .token.property {

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

@@ -8,15 +8,12 @@ const render = createRenderComponent(TAG, EmptyState);
 describe(TAG, () => {
     it("renders", () => {
         const element = render(mockProps);
-        const container: HTMLElement = element.shadowRoot.querySelector(
-            ".container"
-        );
-        const renderedTitle: HTMLElement = element.shadowRoot.querySelector(
-            "h3"
-        );
-        const renderedSubTitle: HTMLElement = element.shadowRoot.querySelector(
-            "p"
-        );
+        const container: HTMLElement =
+            element.shadowRoot.querySelector(".container");
+        const renderedTitle: HTMLElement =
+            element.shadowRoot.querySelector("h3");
+        const renderedSubTitle: HTMLElement =
+            element.shadowRoot.querySelector("p");
         const image: HTMLImageElement = element.shadowRoot.querySelector("img");
 
         expect(renderedTitle).not.toBeNull();
@@ -26,8 +23,30 @@ describe(TAG, () => {
 
         expect(renderedSubTitle.textContent).toEqual(mockProps.subtitle);
         expect(renderedTitle.textContent).toEqual(mockProps.title);
-        expect(image.src).toEqual(`http://localhost${mockProps.imgSrc}`);
 
         return expect(element).toBeAccessible();
     });
+
+    it("renders as the large variant by default", () => {
+        const element = render(mockProps);
+        const container: HTMLElement =
+            element.shadowRoot.querySelector(".container");
+        const image: HTMLImageElement = element.shadowRoot.querySelector("img");
+        expect(container.classList).toContain("size-large");
+        expect(container.classList).toHaveLength(2);
+        expect(image.src).not.toContain("-small.svg");
+    });
+
+    it("renders as the small variant when specified", () => {
+        const element = render({
+            ...mockProps,
+            size: "small"
+        });
+        const container: HTMLElement =
+            element.shadowRoot.querySelector(".container");
+        const image: HTMLImageElement = element.shadowRoot.querySelector("img");
+        expect(container.classList).toContain("size-small");
+        expect(container.classList).toHaveLength(2);
+        expect(image.src).toContain("-small.svg");
+    });
 });

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

@@ -1,6 +1,4 @@
 export default {
     title: "No matches",
-    subtitle: "Try searching for different words",
-    imgSrc: "/assets/svg/lake-mountain.svg",
-    imgAlt: "test"
+    subtitle: "Try searching for different words"
 };

package/src/modules/dx/emptyState/emptyState.css

@@ -1,31 +1,63 @@
 @import "helpers/reset";
 @import "helpers/text";
 
+:host {
+    --dx-c-empty-state-background: var(--dx-g-gray-95);
+    --dx-c-empty-state-image-width: 600px;
+
+    width: 100%;
+}
+
 .container {
-    text-align: center;
-    display: block;
+    position: relative;
+    background: var(--dx-c-empty-state-background);
+    border-radius: var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-2xl) 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
 }
 
 img {
-    margin: auto;
+    width: var(--dx-c-empty-state-image-width);
+    min-width: var(--dx-c-empty-state-image-width);
+}
+
+.size-small img {
+    width: calc(100% - 40px);
+    min-width: calc(100% - 40px);
+}
+
+.text {
+    position: absolute;
+    top: 35%;
+    min-height: 15%;
+    left: 0;
     width: 100%;
-    margin-bottom: var(--dx-g-spacing-xl);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    padding: 0 var(--dx-g-spacing-xl);
 }
 
-.subtitle {
-    font-size: var(--dx-g-text-xs);
+.size-small .text {
+    top: 40%;
 }
 
 .title {
-    font-size: var(--dx-g-text-lg);
-    padding-bottom: var(--dx-g-spacing-sm);
+    font-size: var(--dx-g-text-2xl);
 }
 
-.title.dx-text-heading-3 {
-    font-size: var(--dx-g-text-2xl);
+.size-small .title {
+    font-size: var(--dx-g-text-base);
+    white-space: nowrap;
 }
 
-.subtitle.dx-text-label-1 {
-    font-size: var(--dx-g-text-md);
-    text-transform: none;
+.subtitle {
+    padding-top: var(--dx-g-spacing-sm);
+    color: var(--dx-g-text-heading-color);
+    font-weight: bold;
 }

package/src/modules/dx/emptyState/emptyState.html

@@ -1,7 +1,9 @@
 <template>
-    <div class="container" part="container">
-        <img src={imgSrc} alt={imgAlt} />
-        <h3 class={titleClass} part="title">{title}</h3>
-        <p class={subtitleClass} part="subtitle">{subtitle}</p>
+    <div class={containerClassName} part="container">
+        <img src={imageAssetPath} alt="Mountains" />
+        <div class="text">
+            <h3 class="title dx-text-heading-3">{title}</h3>
+            <p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>
+        </div>
     </div>
 </template>

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

@@ -8,58 +8,38 @@ export default {
 const createStyles = () => html`
     <style>
         body {
-            padding: 12px 0 0 0 !important;
+            padding: 12px !important;
         }
         .title {
             font-weight: bold;
             margin: 24px;
         }
-    </style>
-`;
-
-const title = (value: string) => html`<p class="title">${value}</p>`;
-
-const customTextStyles = () => html`
-    <style>
-        .custom-text-styles::part(container) {
-            position: relative;
-        }
-
-        .custom-text-styles::part(title),
-        .custom-text-styles::part(subtitle) {
-            --y-pos: -100%;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translateX(-50%) translateY(var(--y-pos));
+        #styled {
+            --dx-c-empty-state-background: var(--sds-g-gray-2);
+            --dx-c-empty-state-image-width: 400px;
+            width: 300px;
+            display: block;
         }
-
-        .custom-text-styles::part(subtitle) {
-            --y-pos: 100%;
+        .small-container {
+            width: 250px;
         }
     </style>
 `;
 
+const title = (value: string) => html`<p class="title">${value}</p>`;
+
 export const Base = () => html`
     ${createStyles()} ${title("Default")}
-    <dx-empty-state
-        title="No matches"
-        subtitle="Try searching for different words"
-        img-src="/assets/svg/lake-mountain.svg"
-        img-alt="test"
-    ></dx-empty-state>
-
-    ${title(
-        "Large title/subtitle. Center text w/ external styles via part selector."
-    )}
-    ${customTextStyles()}
     <dx-empty-state
         title="Beep boop. That did not compute."
         subtitle="No results"
-        img-src="/assets/svg/docs-empty-state.svg"
-        img-alt="test"
-        subtitle-size="large"
-        title-size="large"
-        class="custom-text-styles"
     ></dx-empty-state>
+
+    ${title("No subtitle and customized with style hooks")}
+    <dx-empty-state id="styled" title="No Results"></dx-empty-state>
+
+    ${title("Small variant")}
+    <div class="small-container">
+        <dx-empty-state title="No Results" size="small"></dx-empty-state>
+    </div>
 `;

package/src/modules/dx/emptyState/emptyState.ts

@@ -1,29 +1,20 @@
 import { LightningElement, api } from "lwc";
-import cx from "classnames";
+import { EmptyStateSize } from "typings/custom";
 
 export default class EmptyState extends LightningElement {
     @api title: string = "";
-    @api subtitle: string = "";
-    @api imgSrc: string = "";
-    @api imgAlt: string = "";
-    @api titleSize?: "large" | "small" = "small";
-    @api subtitleSize?: "large" | "small" = "small";
+    @api subtitle?: string | null = null;
+    @api size?: EmptyStateSize = "large";
 
-    private get titleClass() {
-        return cx(
-            "title",
-            this.titleSize === "small"
-                ? "dx-text-heading-alt-1"
-                : "dx-text-heading-3"
-        );
+    get containerClassName() {
+        return `container ${
+            !this.size || this.size === "large" ? "size-large" : "size-small"
+        }`;
     }
 
-    private get subtitleClass() {
-        return cx(
-            "subtitle",
-            this.subtitleSize === "small"
-                ? "dx-text-heading-alt-1"
-                : "dx-text-label-1"
-        );
+    get imageAssetPath() {
+        return `/assets/svg/docs-empty-state${
+            this.size === "small" ? "-small" : ""
+        }.svg`;
     }
 }

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

@@ -45,7 +45,7 @@ export const generalLinksRaw = [
         label: "Community",
         options: [
             {
-                href: "https://trailblazers.salesforce.com/",
+                href: "https://trailhead.salesforce.com/trailblazer-community/feed",
                 label: "Trailblazer Community"
             },
             {
@@ -90,13 +90,11 @@ export const intellectualHref =
 export const termsLinks = [
     { href: privacyHref, label: "Privacy Statement" },
     {
-        href:
-            "https://trailblazer.me/resource/documents/documents/pdf/TermsOfUse_en_US.pdf",
+        href: "https://trailblazer.me/resource/documents/documents/pdf/TermsOfUse_en_US.pdf",
         label: "Terms of Use"
     },
     {
-        href:
-            "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
+        href: "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
         label: "Use of Cookies"
     },
     { href: "https://trust.salesforce.com/en/", label: "Trust" }

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/__tests__/headerNav.test.ts

@@ -11,9 +11,7 @@ describe(TAG, () => {
             const element = render({ navItems });
 
             const items = element.shadowRoot.querySelectorAll(".nav-list-item");
-            const dropdownItems = element.shadowRoot.querySelectorAll(
-                "dx-header-nav-option"
-            );
+            const dropdownItems = element.shadowRoot.querySelectorAll("dx-tab");
 
             // items with more options render something different on mobile and desktop whose display is toggled by `display: none;`
             const expectedItemLength =
@@ -34,7 +32,7 @@ describe(TAG, () => {
             const mockOpenNav = jest.fn();
             element.addEventListener("requestopennavmenu", mockOpenNav);
             const navOption: HTMLElement = element.shadowRoot.querySelector(
-                "dx-header-nav-option.nav-list-item-nav-menu"
+                "dx-tab.nav-list-item-nav-menu"
             );
             expect(navOption).not.toBeNull();
             navOption.click();