@salesforcedevs/dx-components 0.20.2 → 0.23.0

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

@@ -3,6 +3,8 @@ import SidebarSearch from "dx/sidebarSearch";
 import { createRenderComponent, renderLightningElement } from "utils/tests";
 import { coveoXMLDocsConfig } from "utils/coveo";
 import { mockQueryParameter, unmockQueryParameter } from "utils/jest";
+import { SESSION_KEY } from "dx/sidebarSearch";
+import mockPreloadedState from "./mockPreloadedState";
 
 const TAG = "dx-sidebar-search";
 const render = createRenderComponent(TAG, SidebarSearch);
@@ -11,8 +13,40 @@ const PROPS = coveoXMLDocsConfig;
 const QUERY = "test";
 
 describe(TAG, () => {
+    beforeEach(() => {
+        window.sessionStorage.clear();
+        jest.restoreAllMocks();
+    });
     afterEach(unmockQueryParameter);
 
+    it("correctly sets coveo advanced configuration", () => {
+        const element = render(PROPS);
+
+        element.coveoAdvancedQueryConfig = JSON.stringify(
+            coveoXMLDocsConfig.coveoAdvancedQueryConfig
+        );
+
+        expect(element.coveoAdvancedQueryConfig).toEqual(
+            coveoXMLDocsConfig.coveoAdvancedQueryConfig
+        );
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("calls dispatchOnChangeEvent with empty query", () => {
+        const element = render(PROPS);
+
+        const mockOnChange = jest.fn();
+
+        element.addEventListener("change", mockOnChange);
+
+        element.setInputValue("reference");
+        element.setInputValue("");
+
+        expect(mockOnChange).toHaveBeenCalled();
+        return expect(element).toBeAccessible();
+    });
+
     it("renders with the correct initial empty query", () => {
         const element = render(PROPS);
 
@@ -90,24 +124,49 @@ describe(TAG, () => {
             );
         });
     });
-});
 
-// git("correctly consumes a valid session storage object", () => {
-//     mockQueryParameter(mockPreloadedState.query.q);
+    it("correctly consumes a valid session storage object", () => {
+        mockQueryParameter(mockPreloadedState.state.query.q);
 
-//     window.sessionStorage.setItem(
-//         SESSION_KEY,
-//         JSON.stringify(mockPreloadedState)
-//     );
+        window.sessionStorage.setItem(
+            SESSION_KEY,
+            JSON.stringify(mockPreloadedState)
+        );
 
-//     const mockOnChange = jest.fn();
+        const element = render(PROPS);
+
+        expect(window.sessionStorage.getItem(SESSION_KEY)).not.toBeNull();
+
+        expect(element).toBeAccessible();
+    });
+
+    it("ignores and deletes a session storage object if query and config don't match", () => {
+        mockQueryParameter("test");
+
+        window.sessionStorage.setItem(
+            SESSION_KEY,
+            JSON.stringify(mockPreloadedState)
+        );
+
+        const element = render(PROPS);
 
-//     const element = render(PROPS);
-//     element.addEventListener("change", mockOnChange);
+        expect(window.sessionStorage.getItem(SESSION_KEY)).toBeNull();
 
-//     return Promise.resolve().then(() => {
-//         expect(mockOnChange).toHaveBeenCalledTimes(1);
+        expect(element).toBeAccessible();
+    });
+
+    it("ignores and deletes a session storage object on incorrect config", () => {
+        mockQueryParameter(mockPreloadedState.state.query.q);
+
+        window.sessionStorage.setItem(
+            SESSION_KEY,
+            JSON.stringify({ state: { query: { q: "test" } } })
+        );
+
+        const element = render(PROPS);
+
+        expect(window.sessionStorage.getItem(SESSION_KEY)).toBeNull();
 
-//         expect(element).toBeAccessible();
-//     });
-// });
+        expect(element).toBeAccessible();
+    });
+});

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

@@ -125,6 +125,7 @@ export default class SidebarSearch extends LightningElement {
     renderedCallback() {
         // in prod some of the critical coveo configuration attributes seem to arrive later
         // so I needed to put this coveo startup flow here where we can wait for them to arrive
+
         if (this.hasCorrectCoveoConfig && !this.engine) {
             this.initializeUserSession();
             this.initializeCoveo();
@@ -151,12 +152,14 @@ export default class SidebarSearch extends LightningElement {
 
     private initializeUserSession() {
         const stringified = window.sessionStorage.getItem(SESSION_KEY);
+
         if (!stringified) {
             return;
         }
 
         try {
             const json = JSON.parse(stringified);
+
             const hasSameConfig = Object.entries(
                 json.coveoAdvancedQueryConfig
             ).every(
@@ -164,6 +167,7 @@ export default class SidebarSearch extends LightningElement {
                     this.coveoAdvancedQueryConfig[key] === value
             );
             const hasSameQuery = json?.state?.query?.q === this.value;
+
             if (hasSameConfig && hasSameQuery) {
                 this.preloadedState = json?.state;
             } else {

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

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

@@ -31,9 +31,8 @@ describe(TAG, () => {
             const link = component.shadowRoot.querySelector("a");
             expect(link).not.toBeNull();
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "a > dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("a > dx-tree-tile");
             expect(tile).not.toBeNull();
             assertTile(tile, {
                 isRoot: true,
@@ -43,9 +42,8 @@ describe(TAG, () => {
                 isSelected: false
             });
 
-            const childTreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const childTreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(childTreeItem).toBeNull();
 
             return expect(component).toBeAccessible();
@@ -57,9 +55,8 @@ describe(TAG, () => {
                 treeNode
             });
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "a > dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("a > dx-tree-tile");
             expect(tile).not.toBeNull();
             assertTile(tile, {
                 isRoot: false,
@@ -69,9 +66,8 @@ describe(TAG, () => {
                 isSelected: false
             });
 
-            const children: Array<TreeItem> = component.shadowRoot.querySelectorAll(
-                "dx-tree-item"
-            );
+            const children: Array<TreeItem> =
+                component.shadowRoot.querySelectorAll("dx-tree-item");
             expect(children).toHaveLength(NODE_WITH_CHILDREN.children!.length);
 
             children.forEach((child, index) => {
@@ -99,9 +95,8 @@ describe(TAG, () => {
                 SINGLE_NODE_WITH_LINK.link!.target
             );
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "a > dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("a > dx-tree-tile");
             expect(tile).not.toBeNull();
             assertTile(tile, {
                 isRoot: false,
@@ -111,9 +106,8 @@ describe(TAG, () => {
                 isSelected: true
             });
 
-            const anyChild: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const anyChild: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(anyChild).toBeNull();
 
             return expect(component).toBeAccessible();
@@ -143,9 +137,8 @@ describe(TAG, () => {
                 selectedKey: "not_this"
             });
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "a > dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("a > dx-tree-tile");
             expect(tile).not.toBeNull();
             assertTile(tile, {
                 isRoot: false,
@@ -163,10 +156,6 @@ describe(TAG, () => {
         const mockExpandCollapse = jest.fn();
         const mockTileSelected = jest.fn();
 
-        afterEach(() => {
-            jest.clearAllMocks();
-        });
-
         it("should render the children when the dx-tree-tile emits iconclick", () => {
             const component = renderComponent({
                 treeNode: NODE_WITH_CHILDREN
@@ -175,14 +164,12 @@ describe(TAG, () => {
             component.addEventListener("expandcollapse", mockExpandCollapse);
             component.addEventListener("tileselected", mockTileSelected);
 
-            const anyChild: TreeItem = component.shadowRoot.querySelector(
-                "dx-tree-item"
-            );
+            const anyChild: TreeItem =
+                component.shadowRoot.querySelector("dx-tree-item");
             expect(anyChild).toBeNull();
 
-            const tile: HTMLElement = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            )!;
+            const tile: HTMLElement =
+                component.shadowRoot.querySelector("dx-tree-tile")!;
             expect(tile).toHaveProperty("isExpanded", false);
             tile.dispatchEvent(new CustomEvent("iconclick"));
 
@@ -193,9 +180,8 @@ describe(TAG, () => {
             });
 
             return Promise.resolve().then(() => {
-                const children: Array<TreeItem> = component.shadowRoot.querySelectorAll(
-                    "dx-tree-item"
-                );
+                const children: Array<TreeItem> =
+                    component.shadowRoot.querySelectorAll("dx-tree-item");
                 expect(children).toHaveLength(
                     NODE_WITH_CHILDREN.children!.length
                 );
@@ -224,14 +210,12 @@ describe(TAG, () => {
             component.addEventListener("expandcollapse", mockExpandCollapse);
             component.addEventListener("tileselected", mockTileSelected);
 
-            const tile: HTMLElement = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            );
+            const tile: HTMLElement =
+                component.shadowRoot.querySelector("dx-tree-tile");
             expect(tile).toHaveProperty("isExpanded", true);
 
-            const children: Array<TreeItem> = component.shadowRoot.querySelectorAll(
-                "dx-tree-item"
-            );
+            const children: Array<TreeItem> =
+                component.shadowRoot.querySelectorAll("dx-tree-item");
             expect(children).toHaveLength(NODE_WITH_CHILDREN.children!.length);
 
             tile.dispatchEvent(new CustomEvent("iconclick"));
@@ -245,9 +229,8 @@ describe(TAG, () => {
             return Promise.resolve().then(() => {
                 expect(tile).toHaveProperty("isExpanded", false);
 
-                const anyChild: TreeItem = component.shadowRoot.querySelector(
-                    "dx-tree-item"
-                );
+                const anyChild: TreeItem =
+                    component.shadowRoot.querySelector("dx-tree-item");
                 expect(anyChild).toBeNull();
 
                 expect(mockExpandCollapse).toBeCalledTimes(1);
@@ -313,9 +296,8 @@ describe(TAG, () => {
             component.addEventListener("tileselected", mockTileSelected);
             component.addEventListener("expandcollapse", mockExpandCollapse);
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("dx-tree-tile");
             expect(tile).toHaveProperty("isSelected", true);
 
             const link: HTMLElement = component.shadowRoot.querySelector("a");
@@ -349,16 +331,13 @@ describe(TAG, () => {
             });
 
             expect(mockRegister).toBeCalledTimes(1);
-            const {
-                key: actualKey,
-                setExpanded
-            } = mockRegister.mock.calls[0][0].detail;
+            const { key: actualKey, setExpanded } =
+                mockRegister.mock.calls[0][0].detail;
             expect(actualKey).toBe(NODE_WITH_CHILDREN.key);
             expect(typeof setExpanded).toBe("function");
 
-            const tile: TreeTile = component.shadowRoot.querySelector(
-                "dx-tree-tile"
-            );
+            const tile: TreeTile =
+                component.shadowRoot.querySelector("dx-tree-tile");
             expect(tile).not.toBeNull();
             expect(tile).toHaveProperty("isExpanded", false);
 
@@ -371,9 +350,8 @@ describe(TAG, () => {
             return Promise.resolve().then(() => {
                 expect(tile).toHaveProperty("isExpanded", true);
 
-                const trees = component.shadowRoot.querySelectorAll(
-                    "dx-tree-item"
-                );
+                const trees =
+                    component.shadowRoot.querySelectorAll("dx-tree-item");
                 expect(trees).toHaveLength(NODE_WITH_CHILDREN.children!.length);
             });
         });
@@ -383,9 +361,8 @@ describe(TAG, () => {
                 treeNode: SINGLE_NODE_WITH_LINK
             });
 
-            const link: HTMLAnchorElement = component.shadowRoot.querySelector(
-                "a"
-            );
+            const link: HTMLAnchorElement =
+                component.shadowRoot.querySelector("a");
             expect(link).not.toBeNull();
 
             link.click();

package/src/modules/dx/typeBadge/typeBadge.css

@@ -66,7 +66,7 @@
 }
 
 @media screen and (max-width: 768px) {
-    .typebadge:not(.size-small):not(.size-xs) {
+    .typebadge.typebadge_metadata:not(.size-small) {
         height: var(--dx-g-spacing-lg);
         padding: 0 var(--dx-g-spacing-sm);
         font-size: var(--dx-g-text-2xs);

package/src/modules/helpers/text/text.css

@@ -154,3 +154,10 @@
     font-size: var(--dx-g-text-xs);
     line-height: 14px;
 }
+
+.dx-text-truncate {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--dx-c-max-lines, 6);
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}