@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,357 @@
+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

@@ -0,0 +1,165 @@
+@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

@@ -0,0 +1,58 @@
+<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

@@ -0,0 +1,102 @@
+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>
+`;