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

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

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

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

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

@@ -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/radioGroup/radioGroup.html

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

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

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

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

@@ -0,0 +1,52 @@
+/* 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

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

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

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