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

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

@@ -0,0 +1,147 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-card-video-preview",
+    component: "dx-card-video-preview"
+};
+
+const date = new Date().toISOString();
+
+const createStyles = () => html`
+    <style>
+        dx-card-video-preview {
+            width: 400px;
+            max-width: 100%;
+            min-width: 240px;
+            margin-botom: 48px;
+        }
+    </style>
+`;
+
+export const Base = () => html`
+    ${createStyles()}
+
+    <dx-card-video-preview
+        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+        datetime="${date}"
+        href="https://developer.salesforce.com/"
+        img-alt="Scenic view of a mountain."
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        title="How to Harness Einstein Vision and Language in Any App"
+        target="_blank"
+    >
+    </dx-card-video-preview>
+
+    <br />
+    horizontal layout
+    <br />
+    <dx-card-video-preview
+        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+        datetime="${date}"
+        href="https://developer.salesforce.com/"
+        img-alt="Scenic view of a mountain."
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        title="How to Harness Einstein Vision and Language in Any App"
+        target="_blank"
+        layout="horizontal"
+    >
+    </dx-card-video-preview>
+
+    <br />
+    featured
+    <br />
+    <dx-card-video-preview
+        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+        datetime="${date}"
+        featured="true"
+        href="https://developer.salesforce.com/"
+        img-alt="Scenic view of a mountain."
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        title="How to Harness Einstein Vision and Language in Any App"
+        target="_blank"
+    >
+    </dx-card-video-preview>
+`;
+
+export const Grid = () => html`
+    <dx-grid columns="three">
+        <dx-card-video-preview
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned. Confidence is hard-earned. Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="How to Harness Einstein Vision and Language in Any App"
+        >
+        </dx-card-video-preview>
+        <dx-card-video-preview
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="How to Harness Einstein Vision and Language in Any App"
+        >
+        </dx-card-video-preview>
+        <dx-card-video-preview
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="How to Harness Einstein Vision and Language in Any App"
+        >
+        </dx-card-video-preview>
+        <dx-card-video-preview
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="How to Harness Einstein Vision and Language in Any App"
+        >
+        </dx-card-video-preview>
+        <dx-card-video-preview
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned. Do you know how your customizations will perform when the crowds show up?"
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a banana."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="How to Harness Einstein Vision and Language in Any App Banana"
+        >
+        </dx-card-video-preview>
+        <dx-card-video-preview
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="How to Harness Einstein Vision and Language in Any App"
+        >
+        </dx-card-video-preview>
+        <dx-card-video-preview
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="How to Harness Einstein Vision and Language in Any App"
+        >
+        </dx-card-video-preview>
+        <dx-card-video-preview
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="How to Harness Einstein Vision and Language in Any App"
+        >
+        </dx-card-video-preview>
+        <dx-card-callout
+            background-color="indigo-vibrant-30"
+            href="/build-stuff"
+            title="Find an upcoming event"
+            label="Calendar"
+        ></dx-card-callout>
+    </dx-grid>
+`;

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -0,0 +1,13 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardVideoPreview extends LightningElement {
+    @api body?: string | null = null;
+    @api datetime!: string;
+    @api featured?: boolean = false;
+    @api href!: string;
+    @api imgAlt?: string;
+    @api imgSrc?: string | null;
+    @api target?: string | null = null;
+    @api layout: "vertical" | "horizontal" = "vertical";
+    @api title!: string;
+}

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

@@ -0,0 +1,85 @@
+import Checkbox from "dx/checkbox";
+import { createRenderComponent } from "utils-internal/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-checkbox";
+const render = createRenderComponent(TAG, Checkbox);
+
+describe(TAG, () => {
+    it("renders with the correct defaults", () => {
+        const element = render({ ...mockProps, type: "radio" });
+
+        const input = element.shadowRoot.querySelector("input");
+        const span = element.shadowRoot.querySelector("span");
+
+        expect(input).not.toBeNull();
+        expect(input.type).toBe("radio");
+        expect(input.checked).toBe(true);
+        expect(input.value).toBe(mockProps.value);
+        expect(span.textContent).toBe(mockProps.label);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("passes disabled through correctly", () => {
+        const element = render({ ...mockProps, disabled: true });
+
+        const input = element.shadowRoot.querySelector("input");
+
+        expect(input.disabled).toBe(true);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("shows error messaging when showValidity is called and is invalid", () => {
+        const element = render({
+            ...mockProps,
+            required: true,
+            checked: false
+        });
+
+        const valid = element.reportValidity();
+        expect(valid).toBe(false);
+
+        return Promise.resolve().then(() => {
+            const err = element.shadowRoot.querySelector(".show-error");
+            expect(err).not.toBeNull();
+
+            return expect(element).toBeAccessible();
+        });
+    });
+
+    it("doesn't show error messaging when showValidity called and not required", () => {
+        const element = render({ ...mockProps, checked: false });
+
+        const valid = element.reportValidity();
+        expect(valid).toBe(true);
+
+        return Promise.resolve().then(() => {
+            expect(element.className).not.toContain("show-error");
+            return expect(element).toBeAccessible();
+        });
+    });
+
+    it("fires the correct event onclick", () => {
+        const mockChange = jest.fn();
+
+        const element = render(mockProps);
+
+        element.addEventListener("change", mockChange);
+
+        const input: HTMLInputElement =
+            element.shadowRoot.querySelector("input");
+        input.checked = false;
+        input.dispatchEvent(new InputEvent("change"));
+
+        expect(mockChange.mock.calls[0][0].detail).toEqual(
+            expect.objectContaining({
+                value: mockProps.value,
+                checked: false
+            })
+        );
+
+        return expect(element).toBeAccessible();
+    });
+});

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

@@ -0,0 +1,5 @@
+export default {
+    value: "industries",
+    label: "Industries",
+    checked: true
+};

package/src/modules/dx/checkbox/checkbox.css

@@ -0,0 +1,168 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    display: block;
+}
+
+.container {
+    --error-color: var(--dx-g-red-vibrant-50);
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.checkbox-label,
+input {
+    cursor: pointer;
+}
+
+label {
+    display: var(--dx-c-checkbox-display, flex);
+    align-items: var(--dx-c-checkbox-align-label, flex-start);
+}
+
+input {
+    flex-shrink: 0;
+    margin: 0;
+}
+
+.checkbox-label {
+    line-height: var(--dx-c-checkbox-text-line-height, 20px);
+    font-size: var(--dx-c-checkbox-font-size, --dx-g-text-base);
+    transform: translateY(-2px);
+    padding-left: 12px;
+}
+
+.checkbox-error {
+    opacity: 0;
+    margin-top: var(--dx-g-spacing-xs);
+    user-select: none;
+}
+
+input:disabled {
+    cursor: not-allowed;
+    opacity: 0.9;
+}
+
+input:disabled + .checkbox-label {
+    cursor: not-allowed;
+    color: var(--sds-g-gray-9);
+}
+
+.container.show-error .checkbox-error {
+    opacity: 1;
+    user-select: auto;
+}
+
+/* adapted from https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ */
+@supports (-webkit-appearance: none) or (-moz-appearance: none) {
+    input {
+        --active-color: var(--dx-g-blue-vibrant-50);
+        --active-inner-color: #fff;
+        --focus-shadow: 1px var(--dx-g-blue-vibrant-80);
+        --border-color: var(--sds-g-gray-5);
+        --border-color-hover: var(--sds-g-gray-6);
+        --background: #fff;
+        --disabled-color: var(--sds-g-gray-4);
+        --disabled-inner-color: var(--dx-g-gray-60);
+        --size: var(--dx-g-spacing-md);
+
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        height: var(--size);
+        width: var(--size);
+        outline: none;
+        display: inline-block;
+        vertical-align: top;
+        position: relative;
+        cursor: pointer;
+        border: 1px solid var(--border-color-override, var(--border-color));
+        background: var(--background-override, var(--background));
+        transition: var(--dx-g-transition-box-shadow-1x),
+            var(--dx-g-transition-hue-1x);
+    }
+
+    input::after {
+        content: "";
+        display: block;
+        left: 0;
+        top: 0;
+        position: absolute;
+        opacity: var(--opacity, 0);
+        transition: transform var(--transition-duration-transform, 0.3s)
+                var(--transition-easing-transorm, ease),
+            opacity var(--transition-duration-opacity, 0.2s);
+    }
+
+    input[type="checkbox"] {
+        border-radius: 2px;
+    }
+
+    input[type="radio"] {
+        border-radius: 50%;
+    }
+
+    input:disabled {
+        --background-override: var(--disabled-color);
+    }
+
+    input:focus {
+        box-shadow: 0 0 0 var(--focus-shadow);
+    }
+
+    input:checked {
+        --opacity: 1;
+        --transition-duration-opacity: 0.3s;
+        --transition-duration-transform: 0.6s;
+        --transition-easing-transorm: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+    }
+
+    input:disabled:checked {
+        --border-color-override: var(--border-color);
+    }
+
+    input:hover:not(:disabled) {
+        --border-color-override: var(--border-color-hover);
+    }
+
+    input[type="checkbox"]::after {
+        --checkbox-width: 4px;
+        --checkbox-height: 8px;
+
+        width: var(--checkbox-width);
+        height: var(--checkbox-height);
+        border: 2px solid var(--active-color);
+        border-top: 0;
+        border-left: 0;
+        left: calc(50% - var(--checkbox-width) / 2);
+        top: calc(50% - var(--checkbox-height) / 2);
+        transform: rotate(var(--checkbox-rotation, 20deg));
+    }
+
+    input[type="checkbox"]:checked {
+        --checkbox-rotation: 43deg;
+    }
+
+    input[type="radio"]::after {
+        --opacity: 0;
+
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--active-color);
+        margin: 3px;
+        transition: var(--dx-g-transition-hue-1x);
+    }
+
+    input:checked[type="radio"]::after {
+        --opacity: 1;
+    }
+
+    .container.show-error input {
+        --border-color-override: var(--error-color) !important;
+
+        box-shadow: 0 0 0 1px var(--error-color) !important;
+    }
+}

package/src/modules/dx/checkbox/checkbox.html

@@ -0,0 +1,26 @@
+<template>
+    <div class={className}>
+        <label>
+            <input
+                type={type}
+                disabled={disabled}
+                name={name}
+                value={value}
+                checked={checked}
+                onchange={onChange}
+                required={required}
+            />
+            <span class="dx-text-body-2 checkbox-label">
+                {label}
+                <slot></slot>
+            </span>
+        </label>
+        <span
+            aria-live="assertive"
+            class="dx-text-body-2 checkbox-error dx-text-form-error-message"
+            if:true={required}
+        >
+            {errorMessage}
+        </span>
+    </div>
+</template>

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

@@ -0,0 +1,38 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-checkbox",
+    component: "dx-checkbox"
+};
+
+const styles = () => html`
+    <style>
+        .terms {
+            --dx-c-checkbox-text-line-height: 20px;
+            --dx-c-checkbox-font-size: 14px;
+        }
+    </style>
+`;
+
+export const Base = () => html`
+    ${styles()}
+    <dx-checkbox value="industries" label="Industries"> </dx-checkbox>
+    <br />
+    <dx-checkbox value="industries" label="Industries" type="radio">
+    </dx-checkbox>
+    <br />
+    <dx-checkbox value="terms" required="true" class="terms">
+        By registering, you confirm you have read and agree to the
+        <dx-button variant="inline-inherit" href="https://www.google.com"
+            >Terms of Use</dx-button
+        >
+        and the
+        <dx-button variant="inline-inherit" href="https://www.google.com"
+            >Master Subscription Agreement</dx-button
+        >
+        and agree that my data is subject to the
+        <dx-button variant="inline-inherit" href="https://www.google.com"
+            >Privacy Statement</dx-button
+        >, including use for marketing purposes.
+    </dx-checkbox>
+`;

package/src/modules/dx/checkbox/checkbox.ts

@@ -0,0 +1,55 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+export default class Checkbox extends LightningElement {
+    @api disabled: boolean = false;
+    @api errorMessage?: string = "Please check this box if you want to proceed";
+    @api label?: string;
+    @api name: string | null = null;
+    @api required: boolean = false;
+    @api type: "checkbox" | "radio" = "checkbox";
+    @api value!: string;
+
+    private _checked: boolean = false;
+    @api
+    get checked(): boolean {
+        return this._checked;
+    }
+    set checked(value: boolean) {
+        this._checked = value;
+    }
+
+    private showValidity = false;
+
+    private get valid(): boolean {
+        return !!(!this.required || this.checked);
+    }
+
+    private get showError(): boolean {
+        return this.showValidity && !this.valid;
+    }
+
+    private get className() {
+        return cx("container", this.showError && "show-error");
+    }
+
+    @api
+    reportValidity(): boolean {
+        this.showValidity = true;
+        return this.valid;
+    }
+
+    private onChange(e: InputEvent) {
+        this._checked = ((e.currentTarget as HTMLInputElement) || {}).checked;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: {
+                    originalEvent: e,
+                    checked: this._checked,
+                    value: this.value
+                }
+            })
+        );
+        this.showValidity = true;
+    }
+}

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

@@ -0,0 +1,80 @@
+import CheckboxGroup from "dx/checkboxGroup";
+import { createRenderComponent } from "utils-internal/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-checkbox-group";
+const render = createRenderComponent(TAG, CheckboxGroup);
+
+describe(TAG, () => {
+    it("renders the correct number of checkboxes and renders the legend", () => {
+        const element = render(mockProps);
+
+        const checkboxes = element.shadowRoot.querySelectorAll("dx-checkbox");
+        const legend = element.shadowRoot.querySelector("legend");
+
+        expect(checkboxes.length).toBe(mockProps.options.length);
+        expect(legend.textContent).toBe(mockProps.legend);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("accepts a value", () => {
+        const element = render({
+            options: mockProps.options,
+            legend: mockProps.legend,
+            value: mockProps.defaultValue
+        });
+
+        expect(element.value).toEqual(mockProps.defaultValue);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("disables all checkboxes when disabled is true", () => {
+        const element = render({ ...mockProps, disabled: true });
+
+        const checkboxes = element.shadowRoot.querySelectorAll("dx-checkbox");
+
+        const allChecked = Array.from(checkboxes).every(
+            (checkbox: any) => checkbox.disabled
+        );
+
+        expect(allChecked).toBe(true);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("adds and removes option value from the callback payload's value", async () => {
+        const mockChange = jest.fn();
+
+        const element = render(mockProps);
+
+        element.addEventListener("change", mockChange);
+
+        const checkbox = element.shadowRoot.querySelector("dx-checkbox");
+
+        const dispatchOnChange = () =>
+            checkbox.dispatchEvent(
+                new CustomEvent("change", { detail: { value: checkbox.value } })
+            );
+
+        dispatchOnChange();
+
+        await Promise.resolve();
+
+        expect(mockChange.mock.calls[0][0].detail.value).toEqual([
+            ...mockProps.defaultValue,
+            checkbox.value
+        ]);
+
+        dispatchOnChange();
+
+        await Promise.resolve();
+
+        expect(mockChange.mock.calls[1][0].detail.value).toEqual(
+            mockProps.defaultValue
+        );
+
+        return expect(element).toBeAccessible();
+    });
+});

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

@@ -0,0 +1,14 @@
+export const options = [
+    { value: "analytics", label: "Analytics" },
+    { value: "collaboration", label: "Collaboration" },
+    { value: "commerce", label: "Commerce", disabled: true },
+    { value: "marketing", label: "Marketing", disabled: true },
+    { value: "heroku", label: "Heroku" },
+    { value: "sales", label: "Sales" }
+];
+
+export default {
+    defaultValue: ["sales", "heroku", "marketing"],
+    legend: "products",
+    options
+};

package/src/modules/dx/checkboxGroup/checkboxGroup.css

@@ -0,0 +1,12 @@
+@import "helpers/reset";
+
+fieldset {
+    display: grid;
+    grid-template-rows: auto;
+    grid-gap: 20px;
+}
+
+legend {
+    position: absolute;
+    clip: rect(0 0 0 0);
+}

package/src/modules/dx/checkboxGroup/checkboxGroup.html

@@ -0,0 +1,15 @@
+<template>
+    <fieldset>
+        <legend>{legend}</legend>
+        <template for:each={options} for:item="option">
+            <dx-checkbox
+                key={option.value}
+                value={option.value}
+                label={option.label}
+                checked={option.checked}
+                disabled={option.disabled}
+                onchange={onChange}
+            ></dx-checkbox>
+        </template>
+    </fieldset>
+</template>