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

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

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

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

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

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

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

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

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

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

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

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

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

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

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