@salesforcedevs/dx-components 0.26.1-alpha.11 → 0.26.1-alpha.16

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/test-components/buttonTest/buttonTest.html

@@ -1,3 +0,0 @@
-<template>
-    <dx-button>test</dx-button>
-</template>

package/src/modules/test-components/buttonTest/buttonTest.ts

@@ -1,3 +0,0 @@
-import { LightningElement } from "lwc";
-
-export default class ButtonTest extends LightningElement {}

package/src/modules/test-components/codeBlockTest/codeBlockTest.js

@@ -1,4 +0,0 @@
-import { LightningElement } from "lwc";
-// Wrapper component required to test dx/featureGrid.
-// This component is not exposed in the build.
-export default class CodeBlockTest extends LightningElement {}

package/src/modules/test-components/featureGridTest/featureGridTest.html

@@ -1,7 +0,0 @@
-<template>
-    <dx-feature-grid>
-        <dx-feature button-label="Feature 1" title="Feature 1"></dx-feature>
-        <dx-feature button-label="Feature 2" title="Feature 2"></dx-feature>
-        <dx-feature button-label="Feature 3" title="Feature 3"></dx-feature>
-    </dx-feature-grid>
-</template>

package/src/modules/test-components/featureGridTest/featureGridTest.ts

@@ -1,5 +0,0 @@
-import { LightningElement } from "lwc";
-
-// Wrapper component required to test dx/featureGrid.
-// This component is not exposed in the build.
-export default class FeatureGridTest extends LightningElement {}

package/src/modules/test-components/instrumentationTest/instrumentationTest.html

@@ -1,4 +0,0 @@
-<template>
-    <button onclick={handleButtonClick}>Click me!</button>
-    <dx-instrumentation use-google-tag-manager></dx-instrumentation>
-</template>

package/src/modules/test-components/instrumentationTest/instrumentationTest.ts

@@ -1,8 +0,0 @@
-import { LightningElement } from "lwc";
-import { track } from "dx/instrumentation";
-
-export default class InstrumentationTest extends LightningElement {
-    handleButtonClick(e: MouseEvent) {
-        track(e.currentTarget, "buttonClick", { buttonName: "default" });
-    }
-}

package/src/modules/test-components/popoverTest/popoverTest.html

@@ -1,6 +0,0 @@
-<template>
-    <dx-popover open-on-hover={openOnHover}>
-        <dx-button slot="control">test control</dx-button>
-        <div slot="content">test content</div>
-    </dx-popover>
-</template>

package/src/modules/test-components/popoverTest/popoverTest.ts

@@ -1,5 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class PopoverTest extends LightningElement {
-    @api openOnHover: boolean = false;
-}

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/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/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();
-    });
-});

package/src/modules/utils-internal/jest/jest.ts

@@ -1,58 +0,0 @@
-const mockMediaMatch = (matches: boolean) => (query: string) => ({
-    matches,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-});
-
-export const createMediaMock = (
-    defaultMatch = false,
-    matchesList: Array<boolean> = []
-) => {
-    const mediaMock = jest.fn(mockMediaMatch(defaultMatch));
-    matchesList.forEach((value) =>
-        mediaMock.mockImplementationOnce(mockMediaMatch(value))
-    );
-    return mediaMock;
-};
-
-export const matchMediaMock = createMediaMock();
-
-export const mockLocalStorage = function () {
-    let store: { [key: string]: string } = {};
-    return {
-        getItem: function (key: string) {
-            return store[key] || null;
-        },
-        setItem: function (key: string, value: string) {
-            store[key] = value.toString();
-        },
-        removeItem: function (key: string) {
-            delete store[key];
-        },
-        clear: function () {
-            store = {};
-        }
-    };
-};
-
-export const mockQueryParameter = (q: string): void => {
-    global.window = Object.create(window);
-    const search = q ? `?q=${q}` : "";
-    const href = `http://dummy.com${search}`;
-    // @ts-ignore
-    delete window.location.value;
-    Object.defineProperty(window, "location", {
-        value: {
-            href,
-            search
-        },
-        writable: true
-    });
-};
-
-export const unmockQueryParameter = () => mockQueryParameter("");

package/src/modules/utils-internal/storybook/storybook.ts

@@ -1,32 +0,0 @@
-import { html } from "lit-html";
-
-export const createRenderComponents =
-    (component: string) =>
-    (num: number = 12, props: string = "") => {
-        let shell = ``;
-        for (let i = 0; i < num; i++) {
-            const insertIndex = component.indexOf(">");
-            const _component = [
-                component.slice(0, insertIndex),
-                ` ${props}`,
-                component.slice(insertIndex)
-            ].join("");
-            shell = `
-        ${shell}
-        ${_component}
-      `;
-        }
-        return shell;
-    };
-
-export const renderStyle = (componentTag: string) => html`
-    <style>
-        span {
-            color: grey;
-        }
-        ${componentTag} {
-            margin-top: 16px;
-            margin-bottom: 36px;
-        }
-    </style>
-`;

package/src/modules/utils-internal/tests/tests.ts

@@ -1,38 +0,0 @@
-import { createElement, LightningElement } from "lwc";
-
-export const renderLightningElement = (
-    element: LightningElement,
-    properties = {}
-) => {
-    Object.assign(element, properties);
-    document.body.appendChild(element as unknown as Node);
-    return element;
-};
-
-export const createRenderComponent =
-    (tag: string, LWC: new () => LightningElement) =>
-    (properties = {}) => {
-        const component = createElement(tag, {
-            is: LWC
-        });
-
-        renderLightningElement(component, properties);
-        return component;
-    };
-
-export const mockSlottedElement = <T extends HTMLElement>(
-    element: any,
-    elementType = "button",
-    slotName?: string
-): { slottedElement: T; slot: HTMLSlotElement } => {
-    const slot: HTMLSlotElement = element.shadowRoot.querySelector(
-        `slot${slotName ? `[name='${slotName}` : ""}']`
-    );
-    expect(slot).not.toBeNull();
-
-    const slottedElement = document.createElement(elementType) as T;
-    slot.assignedElements = jest.fn(() => [slottedElement]);
-    slot.dispatchEvent(new Event("slotchange"));
-
-    return { slottedElement, slot };
-};