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

package/src/modules/dx/popover/popover.ts

@@ -1,313 +0,0 @@
-import { LightningElement, api } from "lwc";
-import {
-    LightningSlotElement,
-    PopoverRequestCloseType,
-    PopperPlacement
-} from "typings/custom";
-
-import { createPopper } from "@popperjs/core";
-import cx from "classnames";
-import debounce from "debounce";
-import { isPrerender } from "utils-internal/seo";
-
-const isEventOutsideElements = (
-    e: Event,
-    ...els: (HTMLElement | null)[]
-): boolean =>
-    !e
-        .composedPath()
-        .some(
-            (el) =>
-                (el as HTMLElement).isSameNode &&
-                els.some((_el) => (el as HTMLElement).isSameNode(_el))
-        );
-
-export default class Popover extends LightningElement {
-    @api ariaLabel: string | null = null;
-    @api offset?: "small" | "medium";
-    @api pagePadding?: number = 16; // padding between dropdown and the edge of the page
-    @api placement?: PopperPlacement = "bottom-start";
-    @api small?: boolean = false;
-    @api openOnHover?: boolean = false; // dropdown opens/closes with hover
-    @api width?: string | null = null;
-    @api fullWidth?: boolean | null;
-
-    @api
-    get open() {
-        return this._open;
-    }
-    set open(value: boolean | null) {
-        this.controlled = typeof value === "boolean";
-        if (value !== this._open) {
-            if (value) {
-                this.openPopover();
-            } else {
-                this.closePopover();
-            }
-        }
-    }
-
-    // public api
-
-    @api
-    dispatchRequestCloseEvent = (type: PopoverRequestCloseType) => {
-        this.dispatchEvent(
-            new CustomEvent("requestclose", {
-                detail: type,
-                bubbles: true,
-                composed: true
-            })
-        );
-    };
-
-    @api
-    openPopover() {
-        this._rendered = true;
-
-        if (this.control && !this.control.disabled) {
-            this._open = true;
-            this.control.setAttribute("aria-expanded", "true");
-
-            this.dispatchEvent(new CustomEvent("open"));
-
-            // awaiting .popover-container to receive 'visibility: visible;' in order to execute functions on it;
-            // another approach would be to use IntersectionObserver to determine exactly when the visiblity
-            // is applied before running
-            setTimeout(() => {
-                this.setPosition();
-                this.attachListenersTopopover();
-            });
-        }
-    }
-
-    @api
-    closePopover(focusControl: boolean = false) {
-        this._open = false;
-        if (focusControl && this.control && this.control.focus) {
-            this.control.focus();
-        }
-        if (this.control) {
-            this.control.setAttribute("aria-expanded", "false");
-        }
-        document.removeEventListener("click", this.interactOutsideListener);
-        document.removeEventListener("focusout", this.interactOutsideListener);
-        if (this.openOnHover) {
-            document.removeEventListener(
-                "mousemove",
-                this.interactOutsideListener
-            );
-        }
-        this.dispatchEvent(new CustomEvent("close"));
-    }
-
-    // PRIVATE VARS
-
-    private controlled: boolean = false;
-    private _open: boolean = false;
-    private _rendered: boolean = isPrerender();
-    private _role: string | null = null;
-    private control: (HTMLElement & { disabled?: boolean }) | null = null;
-    private focusedValue: string | null = null;
-    private popover: HTMLElement | null = null;
-
-    // LIFECYCLE METHODS
-
-    disconnectedCallback() {
-        document.removeEventListener("click", this.interactOutsideListener);
-        document.removeEventListener("mousemove", this.interactOutsideListener);
-        document.removeEventListener("focusout", this.interactOutsideListener);
-        this.removeControlListeners();
-    }
-
-    renderedCallback() {
-        if (!this.popover) {
-            this.popover = this.template.querySelector(".popover-container");
-        }
-    }
-
-    // GETTERS
-
-    private get className() {
-        return cx(
-            "popover",
-            this.offset && `popover-offset-${this.offset}`,
-            this.small && "popover-small",
-            this.width && "popover-overridewidth",
-            this.fullWidth && "popover-fullwidth"
-        );
-    }
-
-    private get containerClassName() {
-        return cx("popover-container", this.open && "popover-container_open");
-    }
-
-    private get style() {
-        if (this.fullWidth && this.width) {
-            console.error(
-                'The "width" and "full-width" properties cannot be provided simultaneously.'
-            );
-        }
-        return cx(this.width && `width: ${this.width};`);
-    }
-
-    // CLASS FNS
-
-    private addControlListeners() {
-        if (this.control) {
-            this.control.addEventListener("keydown", this.onControlKeydown);
-
-            if (!this.openOnHover) {
-                this.control.addEventListener("click", this.onControlClick);
-            }
-
-            if (this.openOnHover) {
-                this.control.addEventListener(
-                    "mouseenter",
-                    this.onControlMouseEnter
-                );
-            }
-        }
-    }
-
-    private removeControlListeners() {
-        if (this.control) {
-            this.control.removeEventListener("keydown", this.onControlKeydown);
-
-            this.control.removeEventListener("click", this.onControlClick);
-            this.control.removeEventListener(
-                "mouseenter",
-                this.onControlMouseEnter
-            );
-        }
-    }
-
-    private _interactOutsideListener = (e: Event) => {
-        if (
-            this.open &&
-            this.popover &&
-            isEventOutsideElements(e, this.control, this.popover)
-        ) {
-            this.closePopover();
-            this.dispatchRequestCloseEvent("interact-outside");
-        }
-    };
-    private interactOutsideListener = (e: Event) =>
-        // @ts-ignore something weird happening here with debounce types
-        debounce(this._interactOutsideListener(e), 100);
-
-    private onControlMouseEnter = () => this.openPopover();
-
-    private onControlKeydown = (e: KeyboardEvent) => {
-        switch (e.key) {
-            case "ArrowDown": {
-                e.preventDefault();
-                if (!this.open) {
-                    this.openPopover();
-                }
-                this.dispatchEvent(new CustomEvent("controlarrowdown"));
-                break;
-            }
-            default:
-        }
-    };
-
-    private onControlClick = () => {
-        if (this.controlled && this.open) {
-            this.dispatchRequestCloseEvent("click-control");
-            return;
-        }
-
-        if (this.controlled && !this.open) {
-            this.dispatchEvent(
-                new CustomEvent("requestopen", {
-                    bubbles: true,
-                    composed: true
-                })
-            );
-            return;
-        }
-
-        if (this.open) {
-            this.closePopover();
-            return;
-        }
-
-        this.openPopover();
-    };
-
-    private onSlotChange(e: LightningSlotElement) {
-        const slot = e.target;
-        const elements = slot.assignedElements();
-        const slotted = elements.length === 0 ? null : elements[0];
-        // allows dropdown/select to compose popover
-        const control =
-            slotted.tagName === "SLOT" ? slotted.firstChild : slotted;
-        const onboardControl =
-            (!this.control || (control && !control.isSameNode(this.control))) &&
-            control;
-        if (onboardControl) {
-            control.setAttribute("aria-haspopup", "true");
-            control.style.cursor = this.openOnHover ? "default" : "cursor";
-            this.control = control;
-            this.addControlListeners();
-            this.setPosition();
-        }
-    }
-
-    private onKeyDown(e: KeyboardEvent): void {
-        switch (e.key) {
-            case "Esc":
-            case "Escape":
-                this.dispatchRequestCloseEvent("keypress-escape");
-                this.closePopover(true);
-                break;
-            default:
-        }
-    }
-
-    private attachListenersTopopover() {
-        document.addEventListener("click", this.interactOutsideListener);
-        document.addEventListener("focusout", this.interactOutsideListener);
-        if (this.openOnHover) {
-            document.addEventListener(
-                "mousemove",
-                this.interactOutsideListener
-            );
-        }
-    }
-
-    private setPosition = async () => {
-        if (this.popover && this.control) {
-            await Promise.resolve();
-            createPopper(this.control, this.popover, {
-                placement: this.placement,
-                modifiers: [
-                    {
-                        name: "preventOverflow",
-                        options: {
-                            boundary: document.documentElement,
-                            padding: this.pagePadding
-                        }
-                    },
-                    {
-                        name: "flip",
-                        options: {
-                            fallbackPlacements: []
-                        }
-                    },
-                    this.fullWidth
-                        ? {
-                              name: "fullWidth",
-                              enabled: true,
-                              fn: ({ state }) => {
-                                  state.styles.popper.width = `${state.rects.reference.width}px`;
-                              },
-                              phase: "beforeWrite",
-                              requires: ["computeStyles"]
-                          }
-                        : {}
-                ]
-            });
-        }
-    };
-}

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

@@ -1,12 +0,0 @@
-export const options = [
-    { value: "english", label: "English" },
-    { value: "japanese", label: "Japanese" },
-    { value: "spanish", label: "Spanish" },
-    { value: "german", label: "German", disabled: true }
-];
-
-export default {
-    defaultValue: "japanese",
-    legend: "languages",
-    options
-};

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

@@ -1,42 +0,0 @@
-import RadioGroup from "dx/radioGroup";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-radio-group";
-const render = createRenderComponent(TAG, RadioGroup);
-
-describe(TAG, () => {
-    it("callback payload value is correct", async () => {
-        const mockChange = jest.fn();
-
-        const element = render(mockProps);
-
-        element.addEventListener("change", mockChange);
-
-        const checkbox = element.shadowRoot.querySelector("dx-checkbox");
-
-        checkbox.dispatchEvent(
-            new CustomEvent("change", { detail: { value: checkbox.value } })
-        );
-
-        await Promise.resolve();
-
-        expect(mockChange.mock.calls[0][0].detail.value).toEqual(
-            checkbox.value
-        );
-
-        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();
-    });
-});

package/src/modules/dx/radioGroup/radioGroup.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/radioGroup/radioGroup.html

@@ -1,16 +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}
-                type="radio"
-            ></dx-checkbox>
-        </template>
-    </fieldset>
-</template>

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

@@ -1,25 +0,0 @@
-import mockProps from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-radio-group",
-    component: "dx-radio-group"
-};
-
-export const Base = (args: any) => `
-  <dx-radio-group legend='${args.legend}' options='${args.options}' default-value='${args.defaultValue}'>
-  </dx-radio-group>
-`;
-
-export const Controlled = (args: any) => `
-  <dx-radio-group legend='${args.legend}' options='${args.options}' value='${args.defaultValue}'>
-  </dx-radio-group>
-`;
-
-const args = {
-    ...mockProps,
-    options: JSON.stringify(mockProps.options)
-};
-
-Base.args = args;
-
-Controlled.args = args;

package/src/modules/dx/radioGroup/radioGroup.ts

@@ -1,65 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { toJson } from "utils/normalizers";
-
-type Option = {
-    value: string;
-    label: string;
-    disabled: boolean;
-};
-
-export default class RadioGroup extends LightningElement {
-    @api disabled: boolean = false;
-    @api legend!: string;
-
-    @api
-    get options(): Option[] {
-        const statefulOptions = this._options.map((option) => ({
-            ...option,
-            checked: option.value === this._value,
-            disabled: this.disabled || option.disabled
-        }));
-        return statefulOptions;
-    }
-    set options(value) {
-        this._options = toJson(value);
-    }
-
-    @api get defaultValue(): string | null {
-        return this._defaultValue;
-    }
-    set defaultValue(value) {
-        this._value = value || null;
-    }
-
-    @api get value(): string | null {
-        return this._value;
-    }
-    set value(value) {
-        if (this.defaultValue) {
-            console.error(
-                "Do not supply both value and default-value to form groups."
-            );
-        }
-
-        this._value = value || null;
-    }
-
-    private _defaultValue: string | null = null;
-    private _options: Option[] = [];
-    private _value: string | null = null;
-
-    private onChange(e: CustomEvent) {
-        const { value: checkedValue, originalEvent } = e.detail;
-
-        this._value = checkedValue;
-
-        this.dispatchEvent(
-            new CustomEvent("change", {
-                detail: {
-                    originalEvent,
-                    value: this._value
-                }
-            })
-        );
-    }
-}

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

@@ -1,55 +0,0 @@
-const oneHour = new Date(Date.now() - 1000 * 60 * 60).toISOString();
-const fourHours = new Date(Date.now() - 4 * 1000 * 60 * 60).toISOString();
-const oneDay = new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString();
-const fourDays = new Date(Date.now() - 4 * 1000 * 60 * 60 * 24).toISOString();
-const oneWeek = new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
-const fourWeeks = new Date(
-    Date.now() - 4 * 1000 * 60 * 60 * 24 * 7
-).toISOString();
-const oneMonth = new Date(Date.now() - 1000 * 60 * 60 * 24 * 30).toISOString();
-const fourMonths = new Date(
-    Date.now() - 4 * 1000 * 60 * 60 * 24 * 30
-).toISOString();
-const oneYear = new Date(
-    Date.now() - 1000 * 60 * 60 * 24 * 30 * 12
-).toISOString();
-const fourYears = new Date(
-    Date.now() - 4 * 1000 * 60 * 60 * 24 * 30 * 12
-).toISOString();
-
-export default {
-    fourHoursCustomMessage: {
-        value: fourHours,
-        messageWhenHoursPast: "hours since"
-    },
-    oneHour: {
-        value: oneHour
-    },
-    fourHours: {
-        value: fourHours
-    },
-    oneDay: {
-        value: oneDay
-    },
-    fourDays: {
-        value: fourDays
-    },
-    oneWeek: {
-        value: oneWeek
-    },
-    fourWeeks: {
-        value: fourWeeks
-    },
-    oneMonth: {
-        value: oneMonth
-    },
-    fourMonths: {
-        value: fourMonths
-    },
-    oneYear: {
-        value: oneYear
-    },
-    fourYears: {
-        value: fourYears
-    }
-};

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

@@ -1,52 +0,0 @@
-/* eslint-disable jest/no-mocks-import */
-import RelativeDateTime from "dx/relativeDateTime";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-relative-date-time";
-const render = createRenderComponent(TAG, RelativeDateTime);
-
-describe(TAG, () => {
-    it("renders component with hours and custom message", () => {
-        const component = render(mockProps.fourHoursCustomMessage);
-
-        const dateEl = component.shadowRoot.querySelector("time");
-        expect(dateEl).not.toBeNull();
-        expect(dateEl.textContent).toEqual("4 hours since");
-        return expect(component).toBeAccessible();
-    });
-
-    [
-        { time: "oneHour", expected: "1 hour ago" },
-        { time: "fourHours", expected: "4 hours ago" },
-        { time: "oneDay", expected: "1 day ago" },
-        { time: "fourDays", expected: "4 days ago" },
-        { time: "oneWeek", expected: "1 week ago" },
-        { time: "fourWeeks", expected: "4 weeks ago" },
-        { time: "oneMonth", expected: "1 month ago" },
-        { time: "fourMonths", expected: "4 months ago" },
-        { time: "oneYear", expected: "1 year ago" },
-        { time: "fourYears", expected: "4 years ago" }
-    ].forEach((testCase) => {
-        it(`displays the correct label and title for ${testCase.expected}`, () => {
-            const component = render(mockProps[testCase.time]);
-
-            const dateEl = component.shadowRoot.querySelector("time");
-
-            expect(dateEl).not.toBeNull();
-            expect(dateEl.getAttribute("title")).toEqual(
-                new Date(mockProps[testCase.time].value).toString()
-            );
-            expect(dateEl.textContent).toEqual(testCase.expected);
-            return expect(component).toBeAccessible();
-        });
-    });
-
-    it("logs an error if value provided is an error", () => {
-        console.error = jest.fn();
-        const component = render({ value: undefined });
-
-        expect(component).not.toBeNull();
-        expect(console.error).toHaveBeenCalled();
-    });
-});

package/src/modules/dx/relativeDateTime/relativeDateTime.html

@@ -1,3 +0,0 @@
-<template>
-    <time title={original}>{value}</time>
-</template>

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

@@ -1,83 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-relative-date-time",
-    component: "dx-relative-date-time"
-};
-
-// prettier-ignore
-const createStyles = () => html `
-    <style>
-        span.date-label {
-            color: grey;
-        }
-
-        dx-relative-date-time {
-            display: block;
-            margin-bottom: 12px;
-        }
-    </style>
-`;
-
-const twoWeeks = new Date(Date.now() - 1.21e9).toISOString();
-const fourDays = new Date(Date.now() - 3.456e8).toISOString();
-const threeMonths = new Date(Date.now() - 7.884e9).toISOString();
-const twoYears = new Date(Date.now() - 6.307e10).toISOString();
-const fourHours = new Date(Date.now() - 1.44e7).toISOString();
-const oneHour = new Date(Date.now() - 3600000).toISOString();
-
-// prettier-ignore
-export const DefaultMessage = () => html ` ${createStyles()}
-
-    <span class="date-label">4 hours</span>
-    <dx-relative-date-time value="${fourHours}"></dx-relative-date-time>
-
-    <span class="date-label">4 days</span>
-    <dx-relative-date-time value="${fourDays}"></dx-relative-date-time>
-
-    <span class="date-label">2 weeks</span>
-    <dx-relative-date-time value="${twoWeeks}"></dx-relative-date-time>
-
-    <span class="date-label">3 Months</span>
-    <dx-relative-date-time value="${threeMonths}"></dx-relative-date-time>
-
-    <span class="date-label">2 Years</span>
-    <dx-relative-date-time value="${twoYears}"></dx-relative-date-time>
-
-    <span class="date-label">1 Hour</span>
-    <dx-relative-date-time value="${oneHour}"></dx-relative-date-time>
-`;
-
-export const CustomMessage = () => html`
-    ${createStyles()}
-
-    <span class="date-label">4 hours</span>
-    <dx-relative-date-time
-        value="${fourHours}"
-        message-when-hours-past="hours since upload"
-    ></dx-relative-date-time>
-
-    <span class="date-label">4 days</span>
-    <dx-relative-date-time
-        value="${fourDays}"
-        message-when-days-past="days since broadcast"
-    ></dx-relative-date-time>
-
-    <span class="date-label">2 weeks</span>
-    <dx-relative-date-time
-        value="${twoWeeks}"
-        message-when-weeks-past="weeks since last broadcast"
-    ></dx-relative-date-time>
-
-    <span class="date-label">3 Months</span>
-    <dx-relative-date-time
-        value="${threeMonths}"
-        message-when-months-past="months since the event"
-    ></dx-relative-date-time>
-
-    <span class="date-label">2 Years</span>
-    <dx-relative-date-time
-        value="${twoYears}"
-        message-when-years-past="years ago"
-    ></dx-relative-date-time>
-`;