@salesforcedevs/dx-components 0.21.0 → 0.23.0-alpha.3

package/src/modules/dx/imageAndLabel/imageAndLabel.html

@@ -1,10 +1,22 @@
 <template>
     <div if:false={href} class="container">
-        <img class={imgClass} src={imgSrc} alt={imgAlt} part="image" />
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+        />
         <span class="dx-text-label-1-dark" part="label">{label}</span>
     </div>
     <a if:true={href} href={href} class="container">
-        <img class={imgClass} src={imgSrc} alt={imgAlt} part="image" />
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+        />
         <span class="dx-text-label-1-dark" part="label">{label}</span>
     </a>
 </template>

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

@@ -16,10 +16,6 @@ describe(TAG, () => {
             global.console = { ...global.console, error: jest.fn() };
         });
 
-        afterEach(() => {
-            jest.clearAllMocks();
-        });
-
         afterAll(() => {
             global.console = originalConsole;
         });
@@ -29,15 +25,13 @@ describe(TAG, () => {
 
             expect(console.error).not.toBeCalled();
 
-            const menuEl: HTMLElement = component.shadowRoot.querySelector(
-                ".popover-container"
-            );
+            const menuEl: HTMLElement =
+                component.shadowRoot.querySelector(".popover-container");
             expect(menuEl).not.toBeNull();
             expect(menuEl.classList).toHaveLength(1);
 
-            const popoverDiv: HTMLElement = menuEl.querySelector(
-                "div.popover"
-            )!;
+            const popoverDiv: HTMLElement =
+                menuEl.querySelector("div.popover")!;
             expect(popoverDiv).not.toBeNull();
             expect(popoverDiv.classList).toHaveLength(1);
 
@@ -47,15 +41,13 @@ describe(TAG, () => {
         it("renders with api properties", () => {
             const component = render(mockProps);
             expect(console.error).not.toBeCalled();
-            const menuEl: HTMLElement = component.shadowRoot.querySelector(
-                ".popover-container"
-            );
+            const menuEl: HTMLElement =
+                component.shadowRoot.querySelector(".popover-container");
             expect(menuEl).not.toBeNull();
             expect(menuEl.classList).toHaveLength(1);
 
-            const popoverDiv: HTMLElement = menuEl.querySelector(
-                "div.popover"
-            )!;
+            const popoverDiv: HTMLElement =
+                menuEl.querySelector("div.popover")!;
             expect(popoverDiv).not.toBeNull();
             expect(popoverDiv.classList).toHaveLength(4);
             expect(popoverDiv.classList).toContain(
@@ -74,9 +66,8 @@ describe(TAG, () => {
 
             expect(console.error).not.toBeCalled();
 
-            const popoverDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.popover"
-            );
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector("div.popover");
             expect(popoverDiv.classList).toHaveLength(2);
             expect(popoverDiv.classList).toContain("popover-fullwidth");
         });
@@ -89,9 +80,8 @@ describe(TAG, () => {
                 'The "width" and "full-width" properties cannot be provided simultaneously.'
             );
 
-            const popoverDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.popover"
-            );
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector("div.popover");
             expect(popoverDiv.style).not.toBeNull();
             expect(popoverDiv.classList).toHaveLength(5);
             expect(popoverDiv.classList).toContain(
@@ -120,9 +110,8 @@ describe(TAG, () => {
 
         it("doesn't render menu content before interaction", async () => {
             const component = render();
-            const content = component.shadowRoot.querySelector(
-                ".popover-content"
-            );
+            const content =
+                component.shadowRoot.querySelector(".popover-content");
 
             expect(content).toBeNull();
 
@@ -130,9 +119,8 @@ describe(TAG, () => {
 
             await Promise.resolve();
 
-            const contentAfterOpen = component.shadowRoot.querySelector(
-                ".popover-content"
-            );
+            const contentAfterOpen =
+                component.shadowRoot.querySelector(".popover-content");
 
             expect(contentAfterOpen).not.toBeNull();
 
@@ -145,9 +133,8 @@ describe(TAG, () => {
 
             const renderComponent = createRenderComponent(TAG, Popover);
             const component = renderComponent();
-            const content = component.shadowRoot.querySelector(
-                ".popover-content"
-            );
+            const content =
+                component.shadowRoot.querySelector(".popover-content");
 
             expect(content).not.toBeNull();
         });
@@ -183,9 +170,12 @@ describe(TAG, () => {
         it("doesn't fire open if passed control is disabled", () => {
             const element = render();
 
-            const { slot: controlSlot, slottedElement } = mockSlottedElement<
-                HTMLButtonElement
-            >(element, "button", "control");
+            const { slot: controlSlot, slottedElement } =
+                mockSlottedElement<HTMLButtonElement>(
+                    element,
+                    "button",
+                    "control"
+                );
             expect(controlSlot.assignedElements).toBeCalledTimes(1);
             expect(slottedElement.ariaHasPopup).toBe("true");
             expect(slottedElement.style.cursor).toBe("cursor");
@@ -237,9 +227,8 @@ describe(TAG, () => {
             const closeEvent = jest.fn();
             component.addEventListener("close", closeEvent);
 
-            const popoverDiv: HTMLElement = component.shadowRoot.querySelector(
-                ".popover"
-            );
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector(".popover");
             expect(popoverDiv).not.toBeNull();
 
             expect(component.open).toBe(true);

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

@@ -25,10 +25,6 @@ const GTM_EVENT_NAME = "custEv_leftNavLinkClick";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
 describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     describe("desktop", () => {
         beforeEach(() => {
             unmockQueryParameter();

package/src/modules/dx/sidebar/sidebar.ts

@@ -205,6 +205,7 @@ export default class Sidebar extends LightningElement {
             );
         }
         this.isSearchLoading = e.detail;
+        console.log(e)
     }
 
     private onSidebarSearchContentScroll() {

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

@@ -19,10 +19,6 @@ const GTM_EVENT_NAME = "custEv_leftNavLinkClick";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
 describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     describe("desktop", () => {
         describe("component render", () => {
             it("should render as expanded with all the elements that sidebar includes", () => {

package/src/modules/dx/sidebarSearch/sidebarSearch.html

@@ -10,9 +10,9 @@
         <dx-input
             class="search-box"
             type="search"
-            placeholder="Search this list..."
+            placeholder="Search"
             role="search"
-            aria-label="Content Search"
+            aria-label="Search in this guide"
             icon-symbol="search"
             size="small"
             value={value}

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -53,6 +53,7 @@ export default class SidebarSearch extends LightningElement {
 
         if (hasChanged && this.engine) {
             // set advanced filters needs access to the latest coveoAdvancedQueryConfig
+            console.log('dispatching in the query change')
             this.dispatchOnLoading(true);
             this.setAdvancedFilters(this.engine);
             this.submitSearch(true);

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

@@ -14,10 +14,6 @@ describe(TAG, () => {
         global.console = { ...global.console, error: jest.fn() };
     });
 
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     afterAll(() => {
         global.console = originalConsole;
     });
@@ -25,9 +21,8 @@ describe(TAG, () => {
     it("renders dx-icon-badge for each social link", () => {
         const component = render();
 
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            component.shadowRoot.querySelectorAll("a");
         expect(links).toHaveLength(3);
 
         const [facebookLink, twitterLink, linkedinLink] = links;
@@ -50,9 +45,8 @@ describe(TAG, () => {
         expect(linkedinLink.target).toBe("_blank");
         expect(linkedinLink.title).toBe("Linkedin");
 
-        const iconBadge: Array<IconBadge> = component.shadowRoot.querySelectorAll(
-            "dx-icon-badge"
-        );
+        const iconBadge: Array<IconBadge> =
+            component.shadowRoot.querySelectorAll("dx-icon-badge");
         expect(iconBadge).toHaveLength(3);
 
         const [facebookIcon, twitterIcon, linkedinIcon] = iconBadge;
@@ -66,9 +60,8 @@ describe(TAG, () => {
         expect(linkedinIcon.sprite).toBe("brand");
         expect(linkedinIcon.symbol).toBe("linkedin-in");
 
-        const detailSection = component.shadowRoot.querySelector(
-            ".details-section"
-        );
+        const detailSection =
+            component.shadowRoot.querySelector(".details-section");
         expect(detailSection).toBeNull();
 
         return expect(component).toBeAccessible();
@@ -78,9 +71,8 @@ describe(TAG, () => {
         const expectedTarget = "_self";
         const component = render({ linksTarget: expectedTarget });
 
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            component.shadowRoot.querySelectorAll("a");
         expect(links).toHaveLength(3);
         links.forEach(({ target }) => expect(target).toBe(expectedTarget));
 
@@ -93,9 +85,8 @@ describe(TAG, () => {
         const testTarget = "not_valid_at_all";
         const component = render({ linksTarget: testTarget });
 
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            component.shadowRoot.querySelectorAll("a");
         expect(links).toHaveLength(3);
         links.forEach(({ target }) => expect(target).toBe("_blank"));
 
@@ -110,9 +101,8 @@ describe(TAG, () => {
     it("renders details section", () => {
         const component = render({ details: "Test|Another Test" });
 
-        const details: Array<HTMLElement> = component.shadowRoot.querySelectorAll(
-            ".details-section span"
-        );
+        const details: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll(".details-section span");
         expect(details).toHaveLength(2);
 
         const [testDetail, anotherTestDetail] = details;

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

@@ -0,0 +1,3 @@
+export default {
+    topics: ["mobile", "performance"]
+};

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

@@ -0,0 +1,31 @@
+import Topics from "dx/topics";
+import { createRenderComponent } from "utils/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-topics";
+const render = createRenderComponent(TAG, Topics);
+describe(TAG, () => {
+    it("renders", () => {
+        const component = render(mockProps);
+        expect(component.topics).toEqual(mockProps.topics);
+
+        const spans: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll("span");
+        expect(spans).toHaveLength(3);
+
+        const [expectedFirst, expectedSecond] = mockProps.topics;
+        const [first, dot, second] = spans;
+        expect(first.textContent).toBe(expectedFirst);
+        expect(second.textContent).toBe(expectedSecond);
+        expect(dot.classList).toContain("dot-separator");
+
+        return expect(component).toBeAccessible();
+    });
+
+    it("doesn't render any span if list is empty", () => {
+        const component = render();
+        const spans: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll("span");
+        expect(spans).toHaveLength(0);
+    });
+});

package/src/modules/dx/topics/topics.css

@@ -0,0 +1,25 @@
+:host {
+    display: block;
+}
+
+.container {
+    align-items: center;
+    color: var(--dx-g-blue-vibrant-20);
+    font-size: var(--dx-g-text-xs);
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
+    display: flex;
+    gap: var(--dx-g-spacing-sm);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+.dot-separator {
+    --size: 4px;
+
+    height: var(--size);
+    width: var(--size);
+    background-color: var(--dx-g-blue-vibrant-20);
+    border-radius: 100%;
+    margin-bottom: 3px;
+}

package/src/modules/dx/topics/topics.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="container dx-text-label-1-dark">
+        <template for:each={normalizedTopics} for:item="topic">
+            <span key={topic.id}>{topic.label}</span>
+            <span
+                key={topic.id}
+                if:false={topic.isLast}
+                class="dot-separator"
+            ></span>
+        </template>
+    </div>
+</template>

package/src/modules/dx/topics/topics.ts

@@ -0,0 +1,25 @@
+import { LightningElement, api } from "lwc";
+import { normalizeToArray } from "utils/normalizers";
+
+export default class Topics extends LightningElement {
+    private _topics: Array<string> = [];
+
+    @api
+    get topics() {
+        return this._topics;
+    }
+
+    set topics(value) {
+        this._topics = normalizeToArray(value);
+    }
+
+    get normalizedTopics() {
+        const { length } = this._topics;
+
+        return this._topics?.map((topic, index) => ({
+            id: topic,
+            label: topic,
+            isLast: index === length - 1
+        }));
+    }
+}

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

@@ -37,10 +37,6 @@ describe(TAG, () => {
         mockInitialize.mockReturnValue(INITIALIZE_MOCK_RESULT);
     });
 
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     describe("component render", () => {
         it("should render dx-tree-item with appropiate properties", () => {
             const component = renderComponent({
@@ -49,9 +45,8 @@ describe(TAG, () => {
             expect(component.treeRoot).toEqual(INITIALIZE_MOCK_RESULT);
             expect(component.value).toBeUndefined();
 
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const treeItem: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(treeItem).not.toBeNull();
             expect(treeItem.treeNode).toEqual(INITIALIZE_MOCK_RESULT);
             expect(treeItem.isRoot).toBe(true);
@@ -81,9 +76,8 @@ describe(TAG, () => {
             expect(component.treeRoot).toEqual(INITIALIZE_MOCK_RESULT);
             expect(component.value).toBe(INITIALIZE_MOCK_PARAMETER.name);
 
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const treeItem: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(treeItem).not.toBeNull();
             expect(treeItem.treeNode).toEqual(INITIALIZE_MOCK_RESULT);
             expect(treeItem.isRoot).toBe(true);
@@ -122,9 +116,8 @@ describe(TAG, () => {
                 value: INITIALIZE_MOCK_PARAMETER.name
             });
 
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const treeItem: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(treeItem).not.toBeNull();
             expect(treeItem.selectedKey).toBe(validKey);
 
@@ -183,9 +176,8 @@ describe(TAG, () => {
             expect(mockGetNode).not.toBeCalled();
 
             return Promise.resolve().then(() => {
-                const treeItem: TreeItem = component.shadowRoot.querySelector(
-                    "dx-tree-item"
-                );
+                const treeItem: TreeItem =
+                    component.shadowRoot.querySelector("dx-tree-item");
                 expect(treeItem).not.toBeNull();
                 expect(treeItem.selectedKey).toBe(expectedKey);
 
@@ -241,9 +233,8 @@ describe(TAG, () => {
             const mockTileSelected = jest.fn();
             component.addEventListener("tileselected", mockTileSelected);
 
-            const treeItem: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const treeItem: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             treeItem.dispatchEvent(
                 new CustomEvent("tileselected", MOCK_TILE_DETAIL)
             );
@@ -339,15 +330,13 @@ describe(TAG, () => {
             const mockRegister = jest.fn();
             component.addEventListener("register", mockRegister);
 
-            component.shadowRoot
-                .querySelector("dx-tree-item")
-                .dispatchEvent(
-                    new CustomEvent("register", {
-                        detail,
-                        bubbles: true,
-                        composed: true
-                    })
-                );
+            component.shadowRoot.querySelector("dx-tree-item").dispatchEvent(
+                new CustomEvent("register", {
+                    detail,
+                    bubbles: true,
+                    composed: true
+                })
+            );
 
             expect(mockRegisterSetExpanded).toBeCalledTimes(1);
             expect(mockRegisterSetExpanded).toBeCalledWith(detail);