@salesforcedevs/dx-components 0.26.0 → 0.26.1-alpha.13

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

@@ -1,114 +0,0 @@
-import { html } from "lit-html";
-import { TypeBadgeColor, TypeBadgeSize, BadgeType } from "typings/custom";
-
-const BADGE_COLOR_OPTIONS: Array<TypeBadgeColor> = [
-    "default",
-    "hot-orange",
-    "orange",
-    "yellow",
-    "green",
-    "teal",
-    "cloud-blue",
-    "blue",
-    "indigo",
-    "purple",
-    "violet",
-    "pink",
-    "red",
-    "analytics",
-    "employees",
-    "marketing",
-    "partners",
-    "commerce",
-    "sales",
-    "success",
-    "integration",
-    "platform",
-    "industries",
-    "learning",
-    "service"
-];
-const SIZE_OPTIONS: Array<TypeBadgeSize> = ["default", "small"];
-const BADGE_TYPE_OPTIONS: Array<BadgeType> = ["metadata", "content-type"];
-
-export default {
-    title: "dx/dx-type-badge",
-    component: "dx-type-badge",
-    argTypes: {
-        color: {
-            control: {
-                type: "select"
-            },
-            options: BADGE_COLOR_OPTIONS
-        },
-        type: {
-            control: {
-                type: "select"
-            },
-            options: BADGE_TYPE_OPTIONS
-        },
-        size: {
-            control: {
-                type: "select"
-            },
-            options: SIZE_OPTIONS
-        },
-        value: {
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-export const Base = (args: any) => html`
-    <dx-type-badge
-        value="${args.value}"
-        color="${args.color}"
-        size="${args.size}"
-        type="${args.type}"
-    ></dx-type-badge>
-`;
-Base.args = {
-    color: BADGE_COLOR_OPTIONS[0],
-    type: BADGE_TYPE_OPTIONS[0],
-    size: SIZE_OPTIONS[0],
-    value: "Developer Experience"
-};
-
-export const CSSHooked = () => html`
-    <style>
-        .hooks {
-            --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
-            --dx-c-type-badge-background: var(--dx-g-green-vibrant-90);
-            --dx-c-type-badge-border-radius: var(--dx-g-spacing-xl);
-            --dx-c-type-badge-height: var(--dx-g-spacing-xl);
-        }
-        .hookinfo {
-            color: gray;
-            font-size: 12px;
-        }
-    </style>
-
-    <p class="hookinfo">
-        <b>--dx-c-type-badge-color:</b> <i>var(--dx-g-green-vibrant-40);</i>
-    </p>
-    <p class="hookinfo">
-        <b>--dx-c-type-badge-background:</b>
-        <i>var(--dx-g-green-vibrant-90);</i>
-    </p>
-    <p class="hookinfo">
-        <b>--dx-c-type-badge-border-radius:</b>
-        <i>var(--dx-g-spacing-xl);</i>
-    </p>
-    <p class="hookinfo">
-        <b>--dx-c-type-badge-height:</b>
-        <i>var(--dx-g-spacing-xl);</i>
-    </p>
-    <br />
-
-    <dx-type-badge
-        class="hooks"
-        value="Hey I am a very loooong text"
-    ></dx-type-badge>
-`;

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

@@ -1,11 +0,0 @@
-export const badges = [
-    "Developer Experience",
-    "Search Optimization",
-    "Analytics",
-    "Testing",
-    "Traffic Monitoring"
-];
-
-export default {
-    badges: JSON.stringify(badges)
-};

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

@@ -1,72 +0,0 @@
-import TypeBadge from "dx/typeBadge";
-import TypeBadgeGroup from "dx/typeBadgeGroup";
-import { TypeBadgeSize } from "typings/custom";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps, { badges } from "./mockProps";
-
-const TAG = "dx-type-badge-group";
-const render = createRenderComponent(TAG, TypeBadgeGroup);
-
-describe(TAG, () => {
-    it("renders correct number of badges", () => {
-        const expectedSize: TypeBadgeSize = "medium";
-        const element = render(mockProps);
-
-        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]);
-            expect(el.size).toBe(expectedSize);
-        });
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render a comma delimited string", () => {
-        const expectedSize: TypeBadgeSize = "small";
-        const element = render({
-            badges: "test1,test2,test3",
-            size: expectedSize
-        });
-
-        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");
-        expect(els[1].value).toBe("test2");
-        expect(els[2].value).toBe("test3");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render single string value", () => {
-        const expectedBadge = "testsinglebadge";
-        const element = render({ badges: expectedBadge });
-
-        const els: Array<TypeBadge> =
-            element.shadowRoot.querySelectorAll("dx-type-badge");
-        expect(els).toHaveLength(1);
-        expect(els[0].value).toBe(expectedBadge);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render a regular array of string", () => {
-        const element = render({ badges });
-
-        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]));
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("throws an error if badges value is not compatible", () => {
-        expect(() => render({ badges: { test: "badges" } })).toThrow(
-            /Key must be a string or number/
-        );
-    });
-});

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

@@ -1,19 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-type-badge-group",
-    component: "dx-type-badge-group"
-};
-
-export const Base = () => html`
-    <dx-type-badge-group
-        badges="Developer Experience, Search Optimization, Analytics"
-    ></dx-type-badge-group>
-`;
-
-export const Small = () => html`
-    <dx-type-badge-group
-        badges='["Testing", "Traffic Monitoring"]'
-        size="small"
-    ></dx-type-badge-group>
-`;

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

@@ -1,108 +0,0 @@
-import { createElement } from "lwc";
-import CodeBlock from "dx/codeBlock";
-import { highlightTerms } from "utils/highlight";
-import { mockContent, allowedTags } from "./mockProps";
-
-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"
-        });
-        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)
-        );
-    });
-});

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

@@ -1,45 +0,0 @@
-export 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>`;
-
-export const allowedTags = [
-    "p",
-    ".p",
-    ".shortdesc",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "li",
-    "dl",
-    "th",
-    "td"
-];

package/src/modules/utils-internal/recentSearches/__tests__/recentSearches.test.ts

@@ -1,83 +0,0 @@
-import {
-    RecentSearches,
-    LOCAL_STORAGE_KEY,
-    LIMIT
-} from "utils-internal/recentSearches";
-
-describe("recentSearches", () => {
-    beforeEach(() => {
-        window.localStorage.clear();
-    });
-
-    it("initializes correctly from local storage", () => {
-        const initial = ["test", "test1", "test2"];
-
-        window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(initial));
-        const searches = new RecentSearches();
-
-        expect(searches.get()).toEqual(initial);
-    });
-
-    it("ignores exact duplicate additions", () => {
-        const searches = new RecentSearches();
-
-        const item = "test";
-
-        searches.add(item);
-        searches.add(item);
-
-        expect(searches.get().length).toEqual(1);
-    });
-
-    it("ignores duplicate additions with extraneous white space", () => {
-        const searches = new RecentSearches();
-
-        const item1 = "test";
-        const item2 = " test ";
-
-        searches.add(item1);
-        searches.add(item2);
-
-        expect(searches.get().length).toEqual(1);
-        expect(searches.get()[0]).toEqual(item1);
-    });
-
-    it("prioritizes the last searched item", () => {
-        const searches = new RecentSearches();
-
-        const item1 = "test1";
-        const item2 = "test2";
-
-        searches.add(item1);
-        searches.add(item2);
-
-        expect(searches.get().length).toEqual(2);
-
-        expect(searches.get()[0]).toEqual(item2);
-        expect(searches.get()[1]).toEqual(item1);
-
-        searches.add(item1);
-
-        expect(searches.get().length).toEqual(2);
-        expect(searches.get()[0]).toEqual(item1);
-        expect(searches.get()[1]).toEqual(item2);
-    });
-
-    it("will not exceed the limit", () => {
-        const searches = new RecentSearches();
-
-        Array.apply(null, Array(LIMIT + 1)).forEach((_, i) => {
-            searches.add(i.toString());
-        });
-
-        expect(searches.get().length).toEqual(LIMIT);
-    });
-
-    it("doesn't add a bogus value", () => {
-        const searches = new RecentSearches();
-
-        [null, "", " ", "    ", 5].forEach((v) => searches.add(v));
-
-        expect(searches.get().length).toEqual(0);
-    });
-});

package/src/modules/utils-internal/wordpress/__tests__/wordpress.test.ts

@@ -1,15 +0,0 @@
-import { fetchWordpressPosts } from "../wordpress";
-
-global.fetch = jest.fn(() =>
-    Promise.resolve({
-        json: () => Promise.resolve({ res: { status: 404 } })
-    })
-);
-
-describe("wordpress network request", () => {
-    it("displays a console error and returns null on unsuccessful request", async () => {
-        const res = await fetchWordpressPosts("", "");
-
-        expect(res).toBeNull();
-    });
-});