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

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

@@ -1,357 +0,0 @@
-import Input from "dx/input";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-input";
-const render = createRenderComponent(TAG, Input);
-
-const shortcutKey = "k";
-
-const windowsUserAgent =
-    "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1";
-const macUserAgent =
-    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1.2 Safari/605.1.15";
-
-const mockUserAgent = (userAgent: string) => {
-    Object.defineProperty(window.navigator, "userAgent", {
-        get: function () {
-            return userAgent;
-        },
-        configurable: true
-    });
-};
-
-const assertErrorRender = (element: any, errorMessage: string) =>
-    Promise.resolve().then(() => {
-        const inputContainer: HTMLElement =
-            element.shadowRoot.querySelector(".input-container");
-        expect(inputContainer.classList).toHaveLength(2);
-        expect(inputContainer.classList).toContain("has-error");
-
-        const errorBox: HTMLElement =
-            element.shadowRoot.querySelector(".error-message-box");
-        expect(errorBox).not.toBeNull();
-        expect(errorBox.textContent).toBe(errorMessage);
-    });
-
-const assertErrorMissing = (element: any) => {
-    const inputContainer: HTMLElement =
-        element.shadowRoot.querySelector(".input-container");
-    expect(inputContainer.classList).toHaveLength(1);
-    expect(element.shadowRoot.querySelector(".error-message-box")).toBeNull();
-};
-
-describe(TAG, () => {
-    it("renders an input", () => {
-        const ariaLabel = "Default label";
-        const element = render({ ariaLabel });
-        const inputEl = element.shadowRoot.querySelector("input");
-        expect(inputEl).not.toBeNull();
-        expect(inputEl.ariaLabel).toBe("Default label");
-        expect(
-            element.shadowRoot.querySelector(
-                "label, abbr, dx-icon, .shortcut, dx-button, .error-message-box"
-            )
-        ).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders an input, a label and an abbr", () => {
-        const label = "Test label";
-        const element = render({
-            ariaLabel: "Default label",
-            required: true,
-            label
-        });
-
-        const labelEl: HTMLElement = element.shadowRoot.querySelector("label");
-        expect(labelEl).not.toBeNull();
-        expect(labelEl.textContent).toBe(`${label}*`);
-
-        const abbrEl: HTMLElement = labelEl.querySelector("abbr")!;
-        expect(abbrEl).not.toBeNull();
-        expect(abbrEl?.textContent).toBe("*");
-
-        const inputEl: HTMLElement = element.shadowRoot.querySelector("input");
-        expect(inputEl).not.toBeNull();
-        expect(inputEl.getAttribute("id")).toBe(labelEl.getAttribute("for"));
-
-        expect(
-            element.shadowRoot.querySelector(".error-message-box")
-        ).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("blurs input on escape", () => {
-        const element = render({ ariaLabel: "Default label" });
-        const inputEl = element.shadowRoot.querySelector("input");
-        const blurMock = jest.fn();
-        inputEl.onblur = blurMock;
-        inputEl.focus();
-        inputEl.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-        expect(blurMock).toHaveBeenCalled();
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render a specific icon", () => {
-        const element = render({ ariaLabel: "Search", iconSymbol: "search" });
-        const icons = element.shadowRoot.querySelectorAll("dx-icon");
-        const searchIcon = Array.from(icons).filter(
-            // @ts-ignore
-            (icon) => icon.symbol === "search"
-        );
-        expect(searchIcon).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("has the correct shortcut elements and renders the control shortcut on windows", () => {
-        mockUserAgent(windowsUserAgent);
-
-        const element = render({ ariaLabel: "Search", shortcutKey: "k" });
-
-        const shortcutImg = element.shadowRoot.querySelector(".shortcut img");
-        expect(shortcutImg.src).toContain("/control.svg");
-
-        const shortcutSpan = element.shadowRoot.querySelector(".shortcut span");
-        expect(shortcutSpan.textContent).toBe(shortcutKey);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the command shortcut on mac", () => {
-        mockUserAgent(macUserAgent);
-
-        const element = render({ ariaLabel: "Search", shortcutKey: "k" });
-
-        const shortcutImg = element.shadowRoot.querySelector(".shortcut img");
-        expect(shortcutImg.src).toContain("/command.svg");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("focuses the input on shortcut keydown", () => {
-        const element = render({ ariaLabel: "Search", shortcutKey });
-
-        const input = element.shadowRoot.querySelector("input");
-
-        window.dispatchEvent(
-            new KeyboardEvent("keydown", { key: shortcutKey, metaKey: true })
-        );
-
-        expect(input.isSameNode(element.shadowRoot.activeElement)).toBe(true);
-    });
-
-    it("renders submit button when given submit-label", () => {
-        const element = render({ ariaLabel: "Search", submitLabel: "Submit" });
-        const buttonEl = element.shadowRoot.querySelector("dx-button");
-        expect(buttonEl).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires onsubmit when enter pressed or submit button clicked", () => {
-        const element = render({ ariaLabel: "Search", submitLabel: "Submit" });
-        const submitMock = jest.fn();
-        element.addEventListener("submit", submitMock);
-
-        const inputEl = element.shadowRoot.querySelector("input");
-        inputEl.focus();
-        inputEl.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
-
-        expect(submitMock).toHaveBeenCalledTimes(1);
-
-        const buttonEl = element.shadowRoot.querySelector("dx-button");
-        buttonEl.dispatchEvent(new MouseEvent("click"));
-
-        expect(submitMock).toHaveBeenCalledTimes(2);
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires onchange when input changes", () => {
-        const element = render({ ariaLabel: "Search", submitLabel: "Submit" });
-        const changeMock = jest.fn();
-        element.addEventListener("change", changeMock);
-        const inputEl = element.shadowRoot.querySelector("input");
-        inputEl.focus();
-
-        inputEl.value = "test";
-        inputEl.dispatchEvent(new KeyboardEvent("input"));
-
-        expect(changeMock).toHaveBeenCalledTimes(1);
-        expect(changeMock.mock.calls[0][0].detail).toEqual("test");
-        return expect(element).toBeAccessible();
-    });
-
-    it("value can be controlled", async () => {
-        const element = render({ ariaLabel: "Search", value: "test" });
-        const inputEl = element.shadowRoot.querySelector("input");
-
-        await Promise.resolve();
-        expect(inputEl.value).toEqual("test");
-        return expect(element).toBeAccessible();
-    });
-
-    it("applies disabled correctly", () => {
-        const element = render({
-            ariaLabel: "Search",
-            submitLabel: "submit",
-            disabled: true
-        });
-        const inputEl = element.shadowRoot.querySelector("input");
-        const buttonEl = element.shadowRoot.querySelector("dx-button");
-        expect(inputEl.disabled && buttonEl.disabled).toBeTruthy();
-        return expect(element).toBeAccessible();
-    });
-
-    [
-        ["default", {}, "size-small"],
-        ["large", { size: "large" }, "size-large"]
-    ].forEach(([size, props, className]) =>
-        it(`applies ${size} size correctly`, () => {
-            const element = render(props);
-            const container = element.shadowRoot.querySelector(".input-group");
-            const _className = container.getAttribute("class");
-            expect(_className.includes(className)).toBeTruthy();
-        })
-    );
-
-    it("shows error box if blurs when dx-input is required and has validityOnBlur as true", () => {
-        const missingErrorMessage = "This field is required";
-        const element = render({
-            ariaLabel: "Default label",
-            required: true,
-            label: "Test label",
-            missingErrorMessage,
-            validityOnBlur: true
-        });
-
-        assertErrorMissing(element);
-
-        const inputEl: HTMLElement = element.shadowRoot.querySelector("input");
-        expect(inputEl).not.toBeNull();
-        inputEl.dispatchEvent(new Event("blur"));
-
-        return assertErrorRender(element, missingErrorMessage);
-    });
-
-    it("has a reportValidity api and return if dx-input has a valid value", () => {
-        const element = render({
-            ariaLabel: "Default label",
-            type: "email",
-            label: "Test label"
-        });
-
-        const inputEl: HTMLInputElement =
-            element.shadowRoot.querySelector("input");
-        inputEl.value = "not_valid_email";
-        inputEl.dispatchEvent(new Event("input"));
-
-        assertErrorMissing(element);
-
-        const result = element.reportValidity();
-        expect(result).toBe(false);
-
-        return assertErrorRender(element, "Enter valid email");
-    });
-
-    it("shows error box if blurs when dx-input format is invalid and has validityOnBlur as true", () => {
-        const formatErrorMessage = "The email format is incorrect, try again";
-        const element = render({
-            ariaLabel: "Default label",
-            formatErrorMessage,
-            label: "Test label",
-            type: "email",
-            validityOnBlur: true,
-            value: "not_valid_email"
-        });
-
-        assertErrorMissing(element);
-
-        const inputEl: HTMLInputElement =
-            element.shadowRoot.querySelector("input");
-        expect(inputEl).not.toBeNull();
-        inputEl.dispatchEvent(new Event("blur"));
-
-        return assertErrorRender(element, formatErrorMessage);
-    });
-
-    it("returns true and doesn't show errors if required field is populated", () => {
-        const element = render({
-            ariaLabel: "Default label",
-            required: true,
-            label: "Test label"
-        });
-
-        const inputEl: HTMLInputElement =
-            element.shadowRoot.querySelector("input");
-        inputEl.value = "I'm a value";
-        inputEl.dispatchEvent(new Event("input"));
-
-        assertErrorMissing(element);
-
-        const result = element.reportValidity();
-        expect(result).toBe(true);
-
-        return Promise.resolve().then(() => assertErrorMissing(element));
-    });
-
-    it("doesn't show error message as value is a valid email", () => {
-        const element = render({
-            ariaLabel: "Default label",
-            type: "email",
-            label: "Test label",
-            validityOnBlur: true
-        });
-
-        const inputEl: HTMLInputElement =
-            element.shadowRoot.querySelector("input");
-        expect(inputEl).not.toBeNull();
-        inputEl.value = "email@email.com";
-        inputEl.dispatchEvent(new Event("input"));
-
-        assertErrorMissing(element);
-
-        inputEl.dispatchEvent(new Event("blur"));
-
-        return Promise.resolve().then(() => assertErrorMissing(element));
-    });
-
-    it("shows clear button if value is nonempty and clearable is true", () => {
-        const element = render({
-            value: "test",
-            clearable: true
-        });
-
-        const clearButton: HTMLButtonElement =
-            element.shadowRoot.querySelector(".clear-button");
-        expect(clearButton).not.toBeNull();
-    });
-
-    it("doesn't show clear button if no value", () => {
-        const element = render({
-            value: "",
-            clearable: true
-        });
-
-        const clearButton: HTMLButtonElement =
-            element.shadowRoot.querySelector(".clear-button");
-        expect(clearButton).toBeNull();
-    });
-
-    it("clears input value on click of clear button", async () => {
-        const element = render({
-            value: "test",
-            clearable: true
-        });
-
-        const input: HTMLInputElement =
-            element.shadowRoot.querySelector("input");
-        expect(input.value).toEqual("test");
-
-        const clearButton: HTMLButtonElement =
-            element.shadowRoot.querySelector(".clear-button");
-        clearButton.dispatchEvent(new MouseEvent("click"));
-
-        await Promise.resolve();
-
-        expect(input.value).toEqual("");
-    });
-});

package/src/modules/dx/input/input.css

@@ -1,165 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-:host {
-    --dx-c-input-background-active: white;
-    --dx-c-input-background: white;
-    --dx-c-input-border-active: 2px solid var(--dx-g-blue-vibrant-50);
-    --dx-c-input-border-radius: var(--dx-g-spacing-xs);
-    --dx-c-input-border: 1px solid var(--dx-g-gray-90);
-    --dx-c-input-boxshadow-active: none;
-    --dx-c-input-height: var(--dx-g-spacing-3xl);
-    --dx-c-input-icon-color: var(--dx-g-gray-50);
-    --dx-c-input-padding: none;
-    --dx-c-input-width: 376px;
-
-    max-width: 100%;
-}
-
-.input-group.size-small {
-    --dx-c-input-height: var(--dx-g-spacing-xl);
-}
-
-.input-group {
-    --error-color: var(--dx-g-red-vibrant-50);
-
-    height: var(--dx-c-input-height);
-    width: var(--dx-c-input-width);
-    max-width: inherit;
-    display: flex;
-    flex-direction: row;
-}
-
-.input-group > *:not(:last-child) {
-    margin-right: var(--dx-g-spacing-sm);
-}
-
-.input-container {
-    display: flex;
-    align-items: center;
-    position: relative;
-    height: inherit;
-    font-size: var(--dx-g-text-sm);
-    font-family: var(--dx-g-font-sans);
-    color: var(--dx-g-gray-50);
-    border: var(--dx-c-input-border);
-    border-radius: var(--dx-c-input-border-radius);
-    transition: var(--dx-g-transition-hue-1x),
-        var(--dx-g-transition-box-shadow-1x);
-    background: var(--dx-c-input-background);
-    padding: var(--dx-c-input-padding);
-    flex-grow: 1;
-}
-
-.input-container.has-floating-item {
-    padding-right: var(--dx-g-spacing-sm);
-}
-
-.input-container.state-focused {
-    background: var(--dx-c-input-background-active);
-    box-shadow: var(--dx-c-input-boxshadow-active);
-}
-
-.input-container.state-focused:not(.has-error) {
-    border: var(--dx-c-input-border-active);
-}
-
-.input-container > dx-icon {
-    color: var(--dx-c-input-icon-color);
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-.input-container > dx-button {
-    margin: 0 var(--dx-g-spacing-sm);
-}
-
-input {
-    height: 100%;
-    width: 100%;
-    min-width: 0;
-    border: none;
-    padding: 0 var(--dx-g-spacing-md);
-    border-radius: var(--dx-g-spacing-xs);
-    font-size: inherit;
-    font-family: inherit;
-    color: var(--dx-g-gray-10);
-    caret-color: var(--dx-g-blue-vibrant-50);
-    text-overflow: ellipsis;
-    transition: var(--dx-g-transition-hue-1x);
-    outline: none;
-    background: none;
-}
-
-label {
-    color: var(--sds-g-gray-11);
-    display: inline-block;
-    font-size: var(--dx-g-text-xs);
-    hyphens: auto;
-    margin-bottom: var(--dx-g-spacing-2xs);
-    padding-right: var(--dx-g-spacing-sm);
-    padding-top: var(--dx-g-spacing-xs);
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -ms-hyphens: auto;
-    -webkit-hyphens: auto;
-}
-
-.input-group.size-small input {
-    padding: 0 var(--dx-g-spacing-sm);
-}
-
-input::placeholder {
-    color: var(--dx-g-gray-30);
-}
-
-.input-container > img {
-    position: absolute;
-    z-index: 2;
-    height: var(--dx-g-spacing-sm);
-    top: calc(50% - var(--dx-g-spacing-xs));
-    right: var(--dx-g-spacing-sm);
-    pointer-events: none;
-}
-
-.shortcut {
-    align-items: center;
-    display: flex;
-    flex-shrink: 0;
-    flex-direction: row;
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-xs);
-    color: var(--dx-g-gray-50);
-    line-height: var(--dx-g-text-base);
-    text-transform: uppercase;
-}
-
-.shortcut > img {
-    margin-right: var(--dx-g-spacing-2xs);
-}
-
-.has-error {
-    background-clip: padding-box;
-    border: 2px solid var(--error-color);
-}
-
-.has-error.state-focused {
-    box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
-    -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
-}
-
-.error-message-box {
-    margin-top: var(--dx-g-spacing-2xs);
-    display: block;
-}
-
-.clear-button > dx-icon {
-    --dx-c-icon-color: var(--sds-g-gray-9);
-}
-
-.clear-button > dx-icon::part(svg) {
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-.clear-button:hover > dx-icon {
-    --dx-c-icon-color: var(--dx-g-blue-vibrant-30);
-}

package/src/modules/dx/input/input.html

@@ -1,58 +0,0 @@
-<template>
-    <label if:true={label} for="input">
-        {label}
-        <abbr if:true={required}>*</abbr>
-    </label>
-    <div class={className}>
-        <div class={inputContainerClassName} onclick={onClick} role={role}>
-            <dx-icon
-                if:true={iconSymbol}
-                symbol={iconSymbol}
-                size={iconSize}
-            ></dx-icon>
-            <input
-                aria-label={ariaLabel}
-                aria-keyshortcuts={ariaKeyShortcuts}
-                autocomplete={autocomplete}
-                name={name}
-                disabled={inputDisabled}
-                id="input"
-                onblur={onInputBlur}
-                onfocus={onInputFocus}
-                oninput={onInputChange}
-                onkeydown={onKeyDown}
-                placeholder={placeholder}
-                type={type}
-                value={value}
-            />
-            <button
-                class="clear-button"
-                aria-label="Clear"
-                if:true={showClearButton}
-                onclick={clear}
-            >
-                <dx-icon symbol="clear" size="medium"></dx-icon>
-            </button>
-            <div class="shortcut" if:true={showShortcutKey}>
-                <img src={shortcutImgSrc} alt={shortcutImgAlt} />
-                <span>{shortcutKey}</span>
-            </div>
-        </div>
-        <dx-button
-            if:true={submitLabel}
-            disabled={buttonDisabled}
-            onclick={onButtonClick}
-            type="submit"
-            size={size}
-        >
-            {submitLabel}
-        </dx-button>
-    </div>
-    <div
-        if:true={errorMessage}
-        aria-live="assertive"
-        class="error-message-box dx-text-form-error-message"
-    >
-        {errorMessage}
-    </div>
-</template>

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

@@ -1,102 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-input",
-    component: "dx-input"
-};
-
-const createStyles = (properties: string) => html`
-    <style>
-        dx-input {
-            ${properties}
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles(`
-        display: block;
-        margin-bottom: 25px;
-        margin-top: 25px;
-    `)}
-
-    <dx-input placeholder="Example"></dx-input>
-
-    <dx-input placeholder="Example Clearable" clearable="true"></dx-input>
-
-    <dx-input placeholder="Example Large" size="large"></dx-input>
-
-    <dx-input placeholder="Example with Icon" icon-symbol="search"></dx-input>
-
-    <dx-input placeholder="Submit Example" submit-label="Submit"></dx-input>
-
-    <dx-input
-        placeholder="Submit Example Large"
-        submit-label="Submit"
-        size="large"
-    ></dx-input>
-
-    <dx-input size="small" placeholder="Small Example"></dx-input>
-
-    <dx-input
-        size="small"
-        placeholder="Small Example with Icon"
-        icon-symbol="search"
-    ></dx-input>
-
-    <dx-input
-        size="small"
-        placeholder="Shortcut Example"
-        icon-symbol="search"
-        shortcut-key="k"
-    ></dx-input>
-
-    <dx-input size="small" placeholder="Enter Email" type="email"></dx-input>
-`;
-
-export const FormInput = () => html`
-    ${createStyles(`
-        display: block;
-        height: 77px;
-    `)}
-
-    <dx-input
-        label="Hello Input"
-        required="true"
-        placeholder="type something..."
-        validity-on-blur="true"
-    ></dx-input>
-
-    <dx-input
-        label="Email"
-        placeholder="Email"
-        required="true"
-        size="small"
-        type="email"
-        missing-error-message="Enter your email address"
-        validity-on-blur="true"
-    ></dx-input>
-
-    <dx-input
-        label="Custom error email"
-        placeholder="Email"
-        required="true"
-        size="small"
-        type="email"
-        format-error-message="Check the email format, it's incorrect"
-        validity-on-blur="true"
-    ></dx-input>
-
-    <dx-input
-        label="Not required field"
-        size="small"
-        validity-on-blur="true"
-    ></dx-input>
-
-    <dx-input
-        label="With assigned Error"
-        size="small"
-        error-message="Hey I'm custom"
-        validity-on-blur="true"
-    ></dx-input>
-`;