@salesforcedevs/dx-components 0.24.1 → 0.25.2-alpha.30

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

@@ -1,5 +1,5 @@
 import Spinner from "dx/spinner";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-spinner";
 const render = createRenderComponent(TAG, Spinner);

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

@@ -1,7 +1,7 @@
 import Tab from "dx/tab";
 import Icon from "dx/icon";
 import { track } from "dx/instrumentation";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 jest.mock("dx/instrumentation");
 

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

@@ -17,6 +17,12 @@ export default {
                 "Why build on Quip? This is an extra long blurb to test the toc wrapping ability",
             id: "quip",
             anchor: "#test3"
+        },
+        {
+            label:
+                "SomeLongExampleWordWithoutAnyBreaks and Then a Word",
+            id: "long-word",
+            anchor: "#test4"
         }
     ]
 };

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

@@ -1,6 +1,6 @@
 import Button from "dx/button";
 import Toc from "dx/toc";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import mockProps from "./mockProps";
 
 const TAG = "dx-toc";
@@ -11,12 +11,10 @@ describe(TAG, () => {
         const element = render(mockProps);
 
         const container: HTMLElement = element.shadowRoot.querySelector(".toc");
-        const renderedTitle: HTMLElement = element.shadowRoot.querySelector(
-            "h2"
-        );
-        const button: Button = element.shadowRoot.querySelector(
-            ".toggle-button"
-        );
+        const renderedTitle: HTMLElement =
+            element.shadowRoot.querySelector("h2");
+        const button: Button =
+            element.shadowRoot.querySelector(".toggle-button");
         expect(renderedTitle).not.toBeNull();
         expect(container).not.toBeNull();
         expect(renderedTitle.textContent).toEqual(mockProps.title);
@@ -27,9 +25,8 @@ describe(TAG, () => {
     it("renders table of contents buttons, and the first one is selected", () => {
         const element = render(mockProps);
 
-        const optionsListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const optionsListComponent: Array<HTMLElement> =
+            element.shadowRoot.querySelectorAll("a");
         expect(optionsListComponent).toHaveLength(mockProps.options.length);
         expect(optionsListComponent[0].className).toEqual(
             "content-button selected"
@@ -59,9 +56,8 @@ describe(TAG, () => {
         const element = render({ ...mockProps });
 
         return Promise.resolve().then(() => {
-            const optionsListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-                "a"
-            );
+            const optionsListComponent: Array<HTMLElement> =
+                element.shadowRoot.querySelectorAll("a");
             optionsListComponent.forEach((e) => {
                 if (e.getAttribute("contentid") === mockProps.value) {
                     expect(e.className).toEqual("content-button selected");
@@ -75,9 +71,8 @@ describe(TAG, () => {
         const element = render({ ...mockProps, value: undefined });
 
         return Promise.resolve().then(() => {
-            const buttons: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-                "a"
-            );
+            const buttons: Array<HTMLElement> =
+                element.shadowRoot.querySelectorAll("a");
             expect(buttons[0].className).toEqual("content-button selected");
             return expect(element).toBeAccessible();
         });
@@ -105,9 +100,8 @@ describe(TAG, () => {
         });
 
         return Promise.resolve().then(() => {
-            const optionListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-                "a"
-            );
+            const optionListComponent: Array<HTMLElement> =
+                element.shadowRoot.querySelectorAll("a");
             expect(optionListComponent).toHaveLength(element.options.length);
             return expect(element).toBeAccessible();
         });

package/src/modules/dx/toc/toc.css

@@ -9,6 +9,7 @@
     display: flex;
     flex-direction: row-reverse;
     width: var(--dx-c-toc-width);
+    word-break: break-word;
 }
 
 .toc_collapsed {

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

@@ -1,5 +1,5 @@
 import Tooltip from "dx/tooltip";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-tooltip";
 const render = createRenderComponent(TAG, Tooltip);
@@ -8,9 +8,8 @@ describe(TAG, () => {
     it("calls tippy constructor with correct parameters", () => {
         const element = render({ label: "First Label", placement: "top" });
 
-        const slotContainer: HTMLElement = element.shadowRoot.querySelector(
-            "div"
-        );
+        const slotContainer: HTMLElement =
+            element.shadowRoot.querySelector("div");
 
         expect(slotContainer).not.toBeNull();
         expect(slotContainer.getAttribute("data-microtip-position")).toEqual(

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

@@ -1,5 +1,5 @@
 import Topics from "dx/topics";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import mockProps from "./mockProps";
 
 const TAG = "dx-topics";

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

@@ -1,6 +1,6 @@
 import Tree from "dx/tree";
 import TreeItem from "dx/treeItem";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import { TreeHandler } from "../treeHandler";
 import {
     INITIALIZE_MOCK_PARAMETER,

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

@@ -6,7 +6,7 @@ import {
 import { track } from "dx/instrumentation";
 import TreeItem from "dx/treeItem";
 import TreeTile from "dx/treeTile";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-tree-item";
 const renderComponent = createRenderComponent(TAG, TreeItem);

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

@@ -1,6 +1,6 @@
 import TreeTile from "dx/treeTile";
 import Icon from "dx/icon";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 import { SINGLE_NODE, SINGLE_NODE_WITH_METHOD } from "./mockProps";
 

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

@@ -1,5 +1,5 @@
 import TypeBadge from "dx/typeBadge";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import { TypeBadgeSize, BadgeType } from "typings/custom";
 
 const TAG = "dx-type-badge";

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -7,7 +7,7 @@ import {
     BadgeType,
     Brand
 } from "typings/custom";
-import { colorToDxColors } from "utils/css";
+import { colorToDxColors } from "utils-internal/css";
 
 const DEFAULT_TYPE = "typebadge_metadata";
 const VALID_BRANDS: Array<Brand> = [

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

@@ -1,7 +1,7 @@
 import TypeBadge from "dx/typeBadge";
 import TypeBadgeGroup from "dx/typeBadgeGroup";
 import { TypeBadgeSize } from "typings/custom";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import mockProps, { badges } from "./mockProps";
 
 const TAG = "dx-type-badge-group";
@@ -12,9 +12,8 @@ describe(TAG, () => {
         const expectedSize: TypeBadgeSize = "medium";
         const element = render(mockProps);
 
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
+        const els: Array<TypeBadge> =
+            element.shadowRoot.querySelectorAll("dx-type-badge");
         expect(els).toHaveLength(badges.length);
         els.forEach((el, index) => {
             expect(el.value).toBe(badges[index]);
@@ -31,9 +30,8 @@ describe(TAG, () => {
             size: expectedSize
         });
 
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
+        const els: Array<TypeBadge> =
+            element.shadowRoot.querySelectorAll("dx-type-badge");
         expect(els).toHaveLength(3);
         els.forEach((el) => expect(el.size).toBe(expectedSize));
         expect(els[0].value).toBe("test1");
@@ -47,9 +45,8 @@ describe(TAG, () => {
         const expectedBadge = "testsinglebadge";
         const element = render({ badges: expectedBadge });
 
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
+        const els: Array<TypeBadge> =
+            element.shadowRoot.querySelectorAll("dx-type-badge");
         expect(els).toHaveLength(1);
         expect(els[0].value).toBe(expectedBadge);
 
@@ -59,9 +56,8 @@ describe(TAG, () => {
     it("can render a regular array of string", () => {
         const element = render({ badges });
 
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
+        const els: Array<TypeBadge> =
+            element.shadowRoot.querySelectorAll("dx-type-badge");
         expect(els).toHaveLength(badges.length);
         els.forEach((el, index) => expect(el.value).toBe(badges[index]));
 

package/src/modules/utils/highlight/__tests__/highlight.test.ts

@@ -10,99 +10,101 @@ describe("highlight utility", () => {
 
     it("highlights text that matches search criteria", () => {
         container.innerHTML = mockContent;
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            "apex"
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query: "apex",
+            termsToHighlight: ["apex"]
+        });
         expect(container.querySelectorAll("mark")).toHaveLength(14);
     });
 
     it("doesn't highlight elements that contains dx/docs components", () => {
-        const searchTerm = "customreport";
+        const query = "customreport";
         const codeBlock = createElement("dx-code-block", { is: CodeBlock });
         Object.assign(codeBlock, {
-            codeBlock: searchTerm,
+            codeBlock: query,
             language: "text"
         });
         container.appendChild(document.createElement("p"));
         container.firstElementChild?.appendChild(codeBlock);
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            searchTerm
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query,
+            termsToHighlight: [query]
+        });
         expect(container.querySelectorAll("mark")).toHaveLength(0);
-        expect(codeBlock.shadowRoot.innerHTML).toMatch(searchTerm); // sanity check
+        expect(codeBlock.shadowRoot.innerHTML).toMatch(query); // sanity check
     });
 
     it("doesn't highlight terms separated by html tags", () => {
+        const query = "loadDatawithin";
         container.innerHTML = "<p>loadData<span>within</span></p>";
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            "loadDatawithin"
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query,
+            termsToHighlight: [query]
+        });
         expect(container.querySelectorAll("mark")).toHaveLength(0);
     });
 
     it("escapes regex especial characters", () => {
+        const query = "apex.+";
         container.innerHTML = mockContent;
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            "apex.+"
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query,
+            termsToHighlight: [query]
+        });
         expect(container.querySelectorAll("mark")).toHaveLength(0);
     });
 
     it("cleans previous search result before searching for a new term", () => {
-        const firstSearch = "apex";
-        const secondSearch = "salesforce";
+        const firstQuery = "apex";
+        const secondQuery = "salesforce";
 
         container.innerHTML = mockContent;
 
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            firstSearch
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query: firstQuery,
+            termsToHighlight: [firstQuery]
+        });
         const firstMarks = container.querySelectorAll("mark");
         expect(firstMarks).toHaveLength(14);
         firstMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(firstSearch)
+            expect(textContent?.toLowerCase()).toBe(firstQuery)
         );
 
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            secondSearch
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query: secondQuery,
+            termsToHighlight: [secondQuery]
+        });
         const secondMarks = container.querySelectorAll("mark");
         expect(secondMarks).toHaveLength(4);
         secondMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(secondSearch)
+            expect(textContent?.toLowerCase()).toBe(secondQuery)
         );
     });
 
     it("cleans all marks if the search term is empty string", () => {
-        const firstSearch = "apex";
-        const secondSearch = "";
+        const firstQuery = "apex";
+        const secondQuery = "";
 
         container.innerHTML = mockContent;
 
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            firstSearch
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query: firstQuery,
+            termsToHighlight: [firstQuery]
+        });
         const firstMarks = container.querySelectorAll("mark");
         expect(firstMarks).toHaveLength(14);
         firstMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(firstSearch)
+            expect(textContent?.toLowerCase()).toBe(firstQuery)
         );
 
-        highlightTerms(
-            container.querySelectorAll(allowedTags.join(",")),
-            secondSearch
-        );
+        highlightTerms(container.querySelectorAll(allowedTags.join(",")), {
+            query: secondQuery,
+            termsToHighlight: [secondQuery]
+        });
         const secondMarks = container.querySelectorAll("mark");
         expect(secondMarks).toHaveLength(0);
         secondMarks.forEach(({ textContent }) =>
-            expect(textContent?.toLowerCase()).toBe(secondSearch)
+            expect(textContent?.toLowerCase()).toBe(secondQuery)
         );
     });
 });

package/src/modules/utils/highlight/highlight.ts

@@ -1,14 +1,16 @@
-import { createSearchRegExp } from "utils/regexps";
+import { createSearchRegExp } from "utils-internal/regexps";
 
-const MARK_TAGS = /<\/?mark>/gi;
+const MARK_TAGS = /<\/?mark[^>]*>/gi;
+
+// mark tags dif color on ref page
 
 export const highlightTerms = (
     // eslint-disable-next-line no-undef
-    elements: NodeListOf<Element>,
-    searchTerm: string
+    elements: NodeListOf<HTMLElement>,
+    { query, termsToHighlight }: { query: string; termsToHighlight: string[] }
 ): void => {
-    searchTerm = searchTerm.trim();
-    const searchExp = createSearchRegExp(searchTerm);
+    const searchExp = createSearchRegExp(termsToHighlight);
+    let scrolled = false;
     elements.forEach((element) => {
         if (
             element?.innerHTML.includes("<dx-") ||
@@ -17,16 +19,27 @@ export const highlightTerms = (
             return;
         }
 
-        let innerHtml = element.innerHTML.replace(
-            // Remove previously added mark tags
-            MARK_TAGS,
-            ""
-        );
-
-        if (searchTerm) {
-            innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+        try {
+            if (element.innerHTML.match(MARK_TAGS)) {
+                // Remove previously added mark tags
+                element.innerHTML = element.innerHTML.replace(MARK_TAGS, "");
+            }
+            if (element.innerHTML.match(searchExp) && query) {
+                element.innerHTML = element.innerHTML.replace(
+                    searchExp,
+                    '<mark style="background-color:var(--dx-g-yellow-vibrant-90)">$&</mark>'
+                );
+            }
+        } catch (e) {
+            console.error(
+                `${element} could not be parsed by the highlight utility: ${e}`
+            );
         }
 
-        element.innerHTML = innerHtml;
+        const mark = element.querySelector("mark");
+        if (mark && !scrolled) {
+            scrolled = true;
+            mark.scrollIntoView({ block: "nearest" });
+        }
     });
 };

package/src/modules/{utils → utils-internal}/headerBase/headerBase.ts

@@ -43,7 +43,6 @@ export abstract class HeaderBase extends LightningElement {
     @api bannerMarkup =
         '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
 
-
     @api
     get navItems() {
         return this._navItems;
@@ -193,7 +192,7 @@ export abstract class HeaderBase extends LightningElement {
     private handleSignUpClick(e: PointerEvent) {
         track(e.currentTarget!, "custEv_signupStart", {
             ...ANALYTICS_INFO,
-            clickUrl: this.signupLink,
+            clickUrl: this.signupLink
         });
     }