@salesforcedevs/dx-components 0.25.5 → 0.26.1-alpha0.3

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: [] }]
-    }
-];

package/src/modules/dx/breadcrumbs/breadcrumbs.css

@@ -1,111 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-:host {
-    --dx-c-breadcrumbs-title-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-breadcrumbs-breadcrumb-color: var(--dx-g-blue-vibrant-20);
-}
-
-nav {
-    display: flex;
-    align-items: center;
-    height: 100%;
-}
-
-nav > *:not(:last-child) {
-    margin-right: var(--dx-g-spacing-xs);
-}
-
-a,
-span {
-    transition: var(--dx-g-transition-hue-1x);
-    display: flex;
-    align-items: center;
-}
-
-dx-logo {
-    --dx-c-logo-label-color: var(--dx-c-breadcrumbs-title-color);
-}
-
-.breadcrumb {
-    white-space: nowrap;
-}
-
-.breadcrumb,
-span {
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-sm);
-    font-weight: var(--dx-g-font-bold);
-    color: var(--dx-c-breadcrumbs-breadcrumb-color);
-}
-
-a:hover {
-    color: var(--dx-g-blue-vibrant-40);
-}
-
-span.breadcrumb {
-    font-weight: var(--dx-g-font-normal);
-    overflow: hidden;
-    position: relative;
-    display: inline-block;
-    text-decoration: none;
-    text-overflow: ellipsis;
-}
-
-dx-dropdown {
-    display: none;
-}
-
-.breadcrumb-overflow {
-    flex-grow: 1;
-    display: block;
-}
-
-.breadcrumbs_options-slash {
-    display: none;
-}
-
-@media (max-width: 1024px) {
-    nav.state-long dx-dropdown {
-        display: initial;
-    }
-
-    nav.state-long .breadcrumb:not(span) {
-        display: none;
-    }
-
-    nav.state-long.hide-current-location .breadcrumb:not(span):last-of-type {
-        display: initial;
-    }
-
-    nav.state-long
-        .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
-        display: none;
-    }
-
-    nav.state-long .breadcrumbs_options-slash {
-        display: flex;
-    }
-}
-
-@media (max-width: 768px) {
-    dx-dropdown {
-        display: initial;
-    }
-
-    .breadcrumb:not(span) {
-        display: none;
-    }
-
-    nav.hide-current-location .breadcrumb:not(span):last-of-type {
-        display: initial;
-    }
-
-    .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
-        display: none;
-    }
-
-    .breadcrumbs_options-slash {
-        display: flex;
-    }
-}

package/src/modules/dx/breadcrumbs/breadcrumbs.html

@@ -1,44 +0,0 @@
-<template>
-    <nav class={className} role="navigation" aria-label={ariaLabel}>
-        <template if:true={logo}>
-            <dx-logo href={baseHref} label={title}></dx-logo>
-            <span if:false={breadcrumbsEmpty}>/</span>
-        </template>
-        <dx-dropdown
-            if:true={breadcrumbDropdownOptions}
-            options={breadcrumbDropdownOptions}
-            value-path="link.href"
-        >
-            <dx-button
-                aria-label="Open Breadcrumbs Dropdown"
-                icon-symbol="threedots"
-                icon-size="large"
-                variant="tertiary"
-            ></dx-button>
-        </dx-dropdown>
-        <template for:each={breadcrumbs} for:item="breadcrumb">
-            <a
-                if:true={breadcrumb.asLink}
-                class="breadcrumb"
-                key={breadcrumb.href}
-                href={breadcrumb.href}
-            >
-                {breadcrumb.label}
-            </a>
-            <span
-                class="breadcrumb"
-                if:false={breadcrumb.asLink}
-                key={breadcrumb.label}
-            >
-                {breadcrumb.label}
-            </span>
-            <span
-                if:false={breadcrumb.last}
-                class="breadcrumb-slash"
-                key={breadcrumb.href}
-            >
-                /
-            </span>
-        </template>
-    </nav>
-</template>

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

@@ -1,39 +0,0 @@
-import { html } from "lit-html";
-import { mockBreadcrumbs } from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-breadcrumbs",
-    component: "dx-breadcrumbs",
-    argTypes: {
-        breadcrumbs: {
-            defaultValue: JSON.stringify(mockBreadcrumbs),
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-export const Base = (args: any) => html`
-    <dx-breadcrumbs breadcrumbs="${args.breadcrumbs}"></dx-breadcrumbs>
-`;
-
-export const HideCurrentLocation = (args: any) => html`
-    <dx-breadcrumbs
-        breadcrumbs="${args.breadcrumbs}"
-        hide-current-location="true"
-        truncate="true"
-    ></dx-breadcrumbs>
-`;
-
-export const autoBreadcrumbs = () => html`
-    <dx-breadcrumbs logo="true"></dx-breadcrumbs>
-`;
-
-export const WithLogo = (args: any) => html`
-    <dx-breadcrumbs
-        breadcrumbs="${args.breadcrumbs}"
-        logo="true"
-        truncate="true"
-    ></dx-breadcrumbs>
-`;

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

@@ -1,122 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import { Breadcrumb, Option } from "typings/custom";
-import { toJson } from "utils/normalizers";
-
-type LabelMap = { [href: string]: string };
-type NormalizedBreadcrumb = Breadcrumb & { last: boolean; asLink: boolean };
-
-const toLabel = (val: string) => {
-    const noFileExt = val.replace(/\..+$/, "");
-    const spaces = noFileExt.replace(/-/g, " ");
-    const titlecase = spaces.replace(
-        /\w\S*/g,
-        (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
-    );
-    return titlecase;
-};
-
-export default class Breadcrumbs extends LightningElement {
-    @api ariaLabel: string = "Navigation Breadcrumbs";
-    @api baseHref: string = "/";
-    @api navItems: Option[] = [];
-    @api pathname: string = window.location.pathname;
-    @api title: string = "Salesforce";
-    @api logo: boolean = false;
-    @api truncate = false;
-    @api hideCurrentLocation = false;
-
-    @api
-    get breadcrumbs(): NormalizedBreadcrumb[] {
-        const breadcrumbs = this._breadcrumbs || this.autoBreadcrumbs;
-        return this.normalizeBreadcrumbs(
-            this.hideCurrentLocation && breadcrumbs.length > 1
-                ? breadcrumbs.slice(0, breadcrumbs.length - 1)
-                : breadcrumbs
-        );
-    }
-    set breadcrumbs(value) {
-        this._breadcrumbs = toJson(value);
-    }
-
-    private _breadcrumbs!: Breadcrumb[];
-
-    private get labelMap(): LabelMap {
-        const deepReducer = (options: Option[]) =>
-            options.reduce((acc: LabelMap, item: Option): LabelMap => {
-                if (item.options) {
-                    return { ...acc, ...deepReducer(item.options) };
-                }
-                if (!item.link) {
-                    return acc;
-                }
-                return {
-                    ...acc,
-                    [item.link.href]: item.label
-                };
-            }, {});
-        return this.navItems ? deepReducer(this.navItems) : {};
-    }
-
-    private get autoBreadcrumbs() {
-        if (!this.pathname || this.pathname === "/") {
-            return [];
-        }
-        // assumes url starts with "/", which it always should
-        const pieces = this.pathname.slice(1).split("/");
-        // @ts-ignore
-        return pieces.reduce((acc, val, i) => {
-            const href = `/${pieces.slice(0, i + 1).join("/")}`;
-            const label = this.labelMap[href] || toLabel(val);
-            return [
-                ...acc,
-                {
-                    href,
-                    label
-                }
-            ];
-        }, []) as { href: string; label: string }[];
-    }
-
-    private normalizeBreadcrumbs(
-        breadcrumbs: Breadcrumb[]
-    ): NormalizedBreadcrumb[] {
-        const { length } = breadcrumbs;
-        return breadcrumbs.map(
-            (breadcrumb, i): NormalizedBreadcrumb => {
-                const last = i === length - 1;
-                return {
-                    ...breadcrumb,
-                    asLink: this.hideCurrentLocation || !last,
-                    last
-                };
-            }
-        );
-    }
-
-    private get breadcrumbDropdownOptions() {
-        if (this.breadcrumbs.length < 2) {
-            return null;
-        }
-        return this.breadcrumbs
-            .slice(0, this.breadcrumbs.length - 1)
-            .map((link) => ({
-                id: link.href,
-                label: link.label,
-                link: {
-                    href: link.href
-                }
-            }));
-    }
-
-    private get breadcrumbsEmpty(): boolean {
-        return this.breadcrumbs.length === 0;
-    }
-
-    private get className(): string {
-        return cx(
-            this.truncate && this.breadcrumbs.length > 3 && "state-long",
-            this.hideCurrentLocation && "hide-current-location"
-        );
-    }
-}

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

@@ -1,107 +0,0 @@
-import Button from "dx/button";
-import ButtonTest from "test-components/buttonTest";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-button";
-const render = createRenderComponent(TAG, Button);
-const renderSlotted = createRenderComponent("dx-button-test", ButtonTest);
-
-describe(TAG, () => {
-    it("renders an empty button element with no icon", () => {
-        const element = render({ ariaLabel: "Default" });
-        const buttonEl = element.shadowRoot.querySelector("button");
-        const iconEl = element.shadowRoot.querySelector("dx-icon");
-        expect(buttonEl).not.toBeNull();
-        expect(iconEl).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders button defaults if no overrides are specified", () => {
-        const element = render({ ariaLabel: "Default" });
-
-        const buttonEl = element.shadowRoot.querySelector("button");
-        const buttonElClasses = buttonEl.getAttribute("class");
-        expect(buttonEl.getAttribute("disabled")).toBeFalsy();
-        expect(buttonEl.getAttribute("type")).toBe("button");
-        expect(buttonElClasses).toContain("variant_primary");
-        expect(buttonElClasses).toContain("size-small");
-        expect(buttonElClasses).not.toContain("style-full");
-        expect(buttonElClasses).not.toContain("style-icon");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("is accessible when the slot is used", () => {
-        const element = renderSlotted();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can focus itself", () => {
-        const element = render({ ariaLabel: "Default" });
-
-        const buttonEl = element.shadowRoot.querySelector("button");
-
-        element.focus();
-
-        expect(element.shadowRoot.activeElement.isSameNode(buttonEl)).toEqual(
-            true
-        );
-    });
-
-    it("only shows a loading message when the component is in `loading` state", () => {
-        const element = render({ loading: true, iconSymbol: "search" });
-        const loadingEl = element.shadowRoot.querySelector(
-            ".temp-loading-message"
-        );
-        expect(loadingEl).not.toBeNull();
-        const spans = element.shadowRoot.querySelectorAll("span");
-        expect(spans.length).toEqual(1);
-        const icon = element.shadowRoot.querySelector("dx-icon");
-        expect(icon).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("can display an icon with the expected settings", () => {
-        const iconSize = "large";
-        const iconSymbol = "automate";
-        const ariaLabel = "Automate";
-        const element = render({
-            ariaLabel,
-            iconSize,
-            iconSymbol,
-            loading: false
-        });
-        const iconEl = element.shadowRoot.querySelector("dx-icon");
-        expect(iconEl).not.toBeNull();
-        expect(iconEl.sprite).toBe("utility");
-        expect(iconEl.size).toBe(iconSize);
-        expect(iconEl.symbol).toBe(iconSymbol);
-        return expect(element).toBeAccessible();
-    });
-
-    it("displays a link when given an href", () => {
-        const element = render({
-            ariaLabel: "Google",
-            href: "https://www.google.com"
-        });
-        expect(element.shadowRoot.querySelector("a")).toBeDefined();
-        expect(element.shadowRoot.querySelector("button")).toBeFalsy();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("applies correct font family class", () => {
-        const element = render({ ariaLabel: "Default" });
-        const buttonEl = element.shadowRoot.querySelector(".button");
-        const className = buttonEl.getAttribute("class");
-        expect(className.includes("font-display")).toBeTruthy();
-
-        const elementOther = render({ font: "sans" });
-        const buttonElOther = elementOther.shadowRoot.querySelector(".button");
-        const classNameOther = buttonElOther.getAttribute("class");
-        expect(classNameOther.includes("font-sans")).toBeTruthy();
-
-        return expect(element).toBeAccessible();
-    });
-});