@salesforcedevs/dx-components 0.26.1-alpha.10 → 0.26.1-alpha.14

package/src/modules/utils/recentSearches/recentSearches.ts

@@ -0,0 +1,57 @@
+export const LOCAL_STORAGE_KEY = "dx-sidebar-recent-searches";
+
+export const LIMIT = 5;
+
+export class RecentSearches {
+    items: string[] = [];
+
+    constructor() {
+        this._init();
+    }
+
+    get() {
+        return this.items;
+    }
+
+    add(item: string | undefined) {
+        if (!item || typeof item !== "string") {
+            return;
+        }
+        const normalized = item.trim();
+        if (normalized === "") {
+            return;
+        }
+        this._prepend(normalized);
+        this._removeDuplicates(normalized);
+        this._cutOffExcess();
+        this._addToStorage();
+    }
+
+    // private
+    _init() {
+        this.items = JSON.parse(
+            window.localStorage.getItem(LOCAL_STORAGE_KEY) || "[]"
+        );
+    }
+
+    _prepend(item: string) {
+        this.items.unshift(item);
+    }
+
+    _removeDuplicates(item: string) {
+        while (this.items.lastIndexOf(item) > 0) {
+            this.items.splice(this.items.lastIndexOf(item), 1);
+        }
+    }
+
+    _cutOffExcess() {
+        this.items = this.items.slice(0, LIMIT);
+    }
+
+    _addToStorage() {
+        window.localStorage.setItem(
+            LOCAL_STORAGE_KEY,
+            JSON.stringify(this.items)
+        );
+    }
+}

package/src/modules/utils/regexps/regexps.ts

@@ -0,0 +1,5 @@
+const escapeRegExp = (text: string) =>
+    text.replace(/[-[\]{}()*+?.,\\^$|]/g, "\\$&");
+
+export const createSearchRegExp = (searchTerm: string): RegExp =>
+    new RegExp(`(?:${escapeRegExp(searchTerm)})(?![^<>]*>)`, "gi");

package/src/modules/utils/seo/seo.ts

@@ -0,0 +1,4 @@
+export function isPrerender(): boolean {
+    const userAgent = window.navigator.userAgent;
+    return userAgent.includes("Prerender");
+}

package/src/modules/utils/slot/slot.ts

@@ -0,0 +1,17 @@
+import { LightningSlotElement } from "typings/custom";
+
+export const isSlotEmpty = (e: LightningSlotElement) =>
+    // @ts-ignore
+    e.target.assignedElements().length === 0;
+
+const stopPropagation = (event: Event) => {
+    event.stopPropagation();
+};
+
+export const stopPropagationOnSlotted = (e: LightningSlotElement) => {
+    // @ts-ignore
+    const slot = e.target;
+    slot.assignedElements().forEach((el: HTMLElement) => {
+        el.addEventListener("click", stopPropagation);
+    });
+};

package/src/modules/utils/wordpress/wordpress.ts

@@ -0,0 +1,13 @@
+export const fetchWordpressPosts = async (
+    path: string,
+    normalizer: any,
+    count: string = "6"
+) => {
+    const res = await fetch(`${path}?maxResults=${count}`);
+    if (res.status !== 200) {
+        console.error("Failed to fetch posts", res);
+        return null;
+    }
+    const json = await res.json();
+    return json.posts.map(normalizer);
+};

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

@@ -1,33 +0,0 @@
-import Banner from "dx/banner";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-banner";
-const render = createRenderComponent(TAG, Banner);
-
-describe(TAG, () => {
-    it("renders banner component", () => {
-        const element = render();
-
-        const innerContainer =
-            element.shadowRoot.querySelectorAll(".container_inner");
-
-        expect(innerContainer).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders custom banner markup in the banner", () => {
-        const element = render({
-            bannerMarkup: "Give feedback about our new site"
-        });
-
-        const bannerContainer =
-            element.shadowRoot.querySelector(".info-container");
-
-        return Promise.resolve().then(() => {
-            expect(bannerContainer.innerHTML).toContain(
-                "Give feedback about our new site"
-            );
-        });
-    });
-});

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

@@ -1,49 +0,0 @@
-import BrandThemeProvider, { toCss } from "dx/brandThemeProvider";
-import { createRenderComponent } from "utils-internal/tests";
-import brandCssVars from "../brandCssVars";
-
-const TAG = "dx-brand-theme-provider";
-const render = createRenderComponent(TAG, BrandThemeProvider);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render();
-        return expect(element).toBeAccessible();
-    });
-
-    it("all css variables are accounted for", () => {
-        const brand = "commerce";
-        const element = render({ brand });
-
-        const style = element.shadowRoot.querySelector("style");
-        const { textContent } = style.childNodes[0];
-        brandCssVars.forEach((v: string) => {
-            expect(textContent).toContain(
-                `${v}: var(${v.replace("current", brand)});`
-            );
-        });
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a style element with textcontent that matches the output from the tocss fn()", () => {
-        const brand = "commerce";
-        const element = render({ brand });
-
-        const expectedTextContent = toCss(brand);
-        const style = element.shadowRoot.querySelector("style");
-        const { textContent } = style.childNodes[0];
-        expect(textContent).toEqual(expectedTextContent);
-        return expect(element).toBeAccessible();
-    });
-
-    it("keeps one style element with one childnode at a time", () => {
-        const brand = "commerce";
-        const element = render({ brand });
-
-        const styles = element.shadowRoot.querySelectorAll("style");
-        expect(styles.length).toEqual(1);
-        expect(Array.from(styles[0].childNodes).length).toEqual(1);
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,321 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-brand-theme-provider",
-    component: "dx-brand-theme-provider"
-};
-
-const style = () => html` <style>
-    body {
-        padding: 0 !important;
-    }
-    #block {
-        padding: 16px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        font-size: 12px;
-        margin-bottom: 4px;
-        box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.07);
-    }
-    #block > span > span {
-        color: grey;
-    }
-</style>`;
-
-// prettier-ignore
-export const Service = () => html` ${style()}
-    <dx-brand-theme-provider brand="service">
-        <div id="block" style="background: var(--dx-g-brand-current-color)">
-            <span>
-                --dx-g-brand-current-color:
-                <span>--dx-g-brand-service-color</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background)"
-        >
-            <span>
-                --dx-g-brand-current-color-background:
-                <span>--dx-g-brand-service-color-background</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-background-2:
-                <span>--dx-g-brand-service-color-background-2</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive:
-                <span>--dx-g-brand-service-button-color-background-inactive</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive-hover:
-                <span>--dx-g-brand-service-button-color-background-inactive-hover</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-active)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-active:
-                <span>--dx-g-brand-service-button-color-background-active</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border)"
-        >
-            <span>
-                --dx-g-brand-current-color-border:
-                <span>--dx-g-brand-service-color-border</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-border-2:
-                <span>--dx-g-brand-service-color-border-2</span>
-            </span>
-        </div>
-    </dx-brand-theme-provider>`;
-
-// prettier-ignore
-export const Partners = () => html` ${style()}
-    <dx-brand-theme-provider brand="partners">
-        <div id="block" style="background: var(--dx-g-brand-current-color)">
-            <span>
-                --dx-g-brand-current-color:
-                <span>--dx-g-brand-partners-color</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background)"
-        >
-            <span>
-                --dx-g-brand-current-color-background:
-                <span>--dx-g-brand-partners-color-background</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-background-2:
-                <span>--dx-g-brand-partners-color-background-2</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive:
-                <span>--dx-g-brand-partners-button-color-background-inactive</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive-hover:
-                <span>--dx-g-brand-partners-button-color-background-inactive-hover</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-active)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-active:
-                <span>--dx-g-brand-partners-button-color-background-active</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border)"
-        >
-            <span>
-                --dx-g-brand-current-color-border:
-                <span>--dx-g-brand-partners-color-border</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-border-2:
-                <span>--dx-g-brand-partners-color-border-2</span>
-            </span>
-        </div>
-    </dx-brand-theme-provider>`;
-
-// prettier-ignore
-export const Industries = () => html` ${style()}
-    <dx-brand-theme-provider brand="industries">
-        <div id="block" style="background: var(--dx-g-brand-current-color)">
-            <span>
-                --dx-g-brand-current-color:
-                <span>--dx-g-brand-industries-color</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background)"
-        >
-            <span>
-                --dx-g-brand-current-color-background:
-                <span>--dx-g-brand-industries-color-background</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-background-2:
-                <span>--dx-g-brand-industries-color-background-2</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive:
-                <span>--dx-g-brand-industries-button-color-background-inactive</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive-hover:
-                <span>--dx-g-brand-industries-button-color-background-inactive-hover</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-active)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-active:
-                <span>--dx-g-brand-industries-button-color-background-active</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border)"
-        >
-            <span>
-                --dx-g-brand-current-color-border:
-                <span>--dx-g-brand-industries-color-border</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-border-2:
-                <span>--dx-g-brand-industries-color-border-2</span>
-            </span>
-        </div>
-    </dx-brand-theme-provider>`;
-
-// prettier-ignore
-export const Sales = () => html ` ${style()}
-    <dx-brand-theme-provider>
-        <div id="block" style="background: var(--dx-g-brand-current-color)">
-            <span>
-                --dx-g-brand-current-color:
-                <span>--dx-g-brand-sales-color</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background)"
-        >
-            <span>
-                --dx-g-brand-current-color-background:
-                <span>--dx-g-brand-sales-color-background</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-background-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-background-2:
-                <span>--dx-g-brand-sales-color-background-2</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive:
-                <span>--dx-g-brand-sales-button-color-background-inactive</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-inactive-hover)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-inactive-hover:
-                <span>--dx-g-brand-sales-button-color-background-inactive-hover</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-button-color-background-active)"
-        >
-            <span>
-                --dx-g-brand-current-button-color-background-active:
-                <span>--dx-g-brand-sales-button-color-background-active</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border)"
-        >
-            <span>
-                --dx-g-brand-current-color-border:
-                <span>--dx-g-brand-sales-color-border</span>
-            </span>
-        </div>
-        <div
-            id="block"
-            style="background: var(--dx-g-brand-current-color-border-2)"
-        >
-            <span>
-                --dx-g-brand-current-color-border-2:
-                <span>--dx-g-brand-sales-color-border-2</span>
-            </span>
-        </div>
-    </dx-brand-theme-provider>`;

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

@@ -1,140 +0,0 @@
-import Breadcrumbs from "dx/breadcrumbs";
-import Dropdown from "dx/dropdown";
-import { createRenderComponent } from "utils-internal/tests";
-import { mockPathname, mockBreadcrumbs, mockNavItems } from "./mockProps";
-
-const TAG = "dx-breadcrumbs";
-const render = createRenderComponent(TAG, Breadcrumbs);
-
-describe(TAG, () => {
-    it("renders the correct number of crumbs", () => {
-        const expectedOptionsLength = mockBreadcrumbs.length - 1;
-
-        const element = render({ breadcrumbs: mockBreadcrumbs });
-
-        const navElement: HTMLElement = element.shadowRoot.querySelector("nav");
-        expect(navElement).not.toBeNull();
-        expect(navElement.classList).toHaveLength(0);
-
-        const breadcrumbs: Array<HTMLElement> =
-            element.shadowRoot.querySelectorAll(".breadcrumb");
-        const { length } = breadcrumbs;
-        expect(breadcrumbs).toHaveLength(length);
-        expect(
-            Array.from(breadcrumbs)
-                .splice(0, length - 1)
-                .every(({ tagName }) => tagName === "A")
-        ).toBe(true);
-        expect(breadcrumbs[length - 1].tagName).toBe("SPAN");
-
-        const dropdown: Dropdown =
-            element.shadowRoot.querySelector("dx-dropdown");
-        expect(dropdown).not.toBeNull();
-        expect(dropdown.options).toHaveLength(expectedOptionsLength);
-
-        dropdown.options.forEach((option, index) => {
-            const { href, label } = mockBreadcrumbs[index];
-            expect(option.label).toBe(label);
-            expect(option.id).toBe(href);
-            expect(option.link?.href).toBe(href);
-        });
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with current location hidden", () => {
-        const element = render({
-            breadcrumbs: mockBreadcrumbs,
-            hideCurrentLocation: true
-        });
-
-        const navElement: HTMLElement = element.shadowRoot.querySelector("nav");
-        expect(navElement).not.toBeNull();
-        expect(navElement.classList).toHaveLength(1);
-        expect(navElement.classList).toContain("hide-current-location");
-
-        const breadcrumbs: Array<HTMLElement> =
-            element.shadowRoot.querySelectorAll(".breadcrumb");
-        expect(breadcrumbs).toHaveLength(mockBreadcrumbs.length - 1);
-        expect(
-            Array.from(breadcrumbs).every(({ tagName }) => tagName === "A")
-        ).toBe(true);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with state-long class when passing truncate as true and has to many breadcrumbs", () => {
-        const element = render({
-            breadcrumbs: mockBreadcrumbs,
-            truncate: true
-        });
-
-        const navElement: HTMLElement = element.shadowRoot.querySelector("nav");
-        expect(navElement).not.toBeNull();
-        expect(navElement.classList).toHaveLength(1);
-        expect(navElement.classList[0]).toBe("state-long");
-    });
-
-    it("sets base href and title correctly", () => {
-        const baseHref = "/test";
-        const title = "testtitle";
-        const element = render({ baseHref, title, logo: true });
-
-        const logo = element.shadowRoot.querySelector("dx-logo");
-        expect(logo).not.toBeNull();
-        expect(logo.href).toEqual(baseHref);
-        expect(logo.label).toEqual(title);
-    });
-
-    it("if not given breadcrumbs, parses the pathname and renders the correct number of links, each with the correct href", () => {
-        const element = render({
-            navItems: mockNavItems,
-            pathname: mockPathname
-        });
-
-        const breadcrumbs = element.shadowRoot.querySelectorAll(".breadcrumb");
-        expect(breadcrumbs.length).toEqual(mockBreadcrumbs.length);
-
-        breadcrumbs.forEach((breadcrumb: HTMLLinkElement, i: number) => {
-            const mockBreadcrumb = mockBreadcrumbs[i];
-            if (i < breadcrumbs.length - 1) {
-                const href = breadcrumb.getAttribute("href");
-                expect(breadcrumb.tagName).toEqual("A");
-                expect(href).toEqual(mockBreadcrumb.href);
-            } else {
-                expect(breadcrumb.tagName).toEqual("SPAN");
-            }
-        });
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders no links or spans when given an empty pathname", () => {
-        const element = render({ pathname: "/" });
-
-        const els = element.shadowRoot.querySelectorAll(
-            ".breadcrumb .breadcrumb-slash span"
-        );
-        expect(els.length).toEqual(0);
-
-        expect(element.shadowRoot.querySelector("dx-dropdown")).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("Successfully sets a breadcrumb label", () => {
-        const element = render({
-            pathname: mockPathname,
-            navItems: mockNavItems
-        });
-        const breadcrumbs = element.shadowRoot.querySelectorAll(".breadcrumb");
-        expect(breadcrumbs[breadcrumbs.length - 1].textContent).toEqual(
-            "New Label"
-        );
-    });
-
-    it("renders correctly with duplicate path segments", async () => {
-        const element = render({ pathname: "/home/home/home.html" });
-
-        const breadcrumbs = element.shadowRoot.querySelectorAll(".breadcrumb");
-        expect(breadcrumbs.length).toEqual(3);
-    });
-});

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

@@ -1,28 +0,0 @@
-import { Option } from "typings/custom";
-
-export const mockPathname = "/piece1/piece2/piece3/piece4/piece5";
-
-export const mockBreadcrumbs = [
-    { href: "/piece1", label: "Piece 1" },
-    { href: "/piece1/piece2", label: "Piece 2" },
-    { href: "/piece1/piece2/piece3", label: "Piece 3" },
-    { href: "/piece1/piece2/piece3/piece4", label: "Piece 4" },
-    { href: "/piece1/piece2/piece3/piece4/piece5", label: "Piece 5" }
-];
-
-export const mockNavItems: Option[] = [
-    { id: "1", label: "Label 1" },
-    { id: "2", label: "Label 2" },
-    {
-        id: "3",
-        label: "New Label",
-        link: { href: mockPathname, target: "_blank" }
-    },
-    { id: "4", label: "Label 4" },
-    {
-        id: "5",
-        label: "Label 5",
-        link: { href: "https://www.heroku.com/", target: "_parent" },
-        options: [{ id: "5.1", label: "Label 5.1", options: [] }]
-    }
-];