@salesforcedevs/dx-components 0.0.0

package/src/modules/dx/podcastHost/podcastHost.css

@@ -0,0 +1,62 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-host-img-width: 48px;
+    --dx-c-host-img-margin-right: 16px;
+}
+
+.container {
+    background: white;
+    box-shadow: var(--dx-g-box-shadow-sm);
+    border-radius: 16px;
+    padding: 36px;
+    overflow: hidden;
+}
+
+.host-presentation,
+.host-img {
+    display: flex;
+}
+
+.host-img {
+    margin-right: var(--dx-c-host-img-margin-right);
+    align-items: center;
+}
+
+.host-img > img {
+    border-radius: 99999px;
+    width: var(--dx-c-host-img-width);
+}
+
+.host-bio > p {
+    margin: 16px 0;
+}
+
+.dx-text-label-2 {
+    color: var(--dx-g-gray-30);
+}
+
+@media (min-width: 640px) {
+    .host {
+        position: relative;
+    }
+
+    .host dx-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+
+    .host-bio {
+        margin-left: calc(
+            var(--dx-c-host-img-width) + var(--dx-c-host-img-margin-right)
+        );
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+    }
+}

package/src/modules/dx/podcastHost/podcastHost.html

@@ -0,0 +1,28 @@
+<template>
+    <div class="container">
+        <div class="host">
+            <div class="host-presentation">
+                <div class="host-img">
+                    <img src={imgSrc} alt={fullName} />
+                </div>
+                <h2>
+                    <span class="dx-text-label-2">Hosted by</span>
+                    <br />
+                    <span class="dx-text-heading-4">{fullName}</span>
+                </h2>
+            </div>
+            <div class="host-bio">
+                <p>{bio}</p>
+            </div>
+            <dx-button
+                href={twitterHref}
+                target="_blank"
+                variant="inline"
+                icon-symbol="twitter"
+                icon-sprite="brand"
+            >
+                Follow {firstName} on Twitter
+            </dx-button>
+        </div>
+    </div>
+</template>

package/src/modules/dx/podcastHost/podcastHost.ts

@@ -0,0 +1,13 @@
+import { LightningElement, api } from "lwc";
+
+export default class PodcastHost extends LightningElement {
+    @api firstName: string = "";
+    @api lastName: string = "";
+    @api imgSrc: string = "";
+    @api twitterHref: string = "";
+    @api bio: string = "";
+
+    get fullName() {
+        return `${this.firstName} ${this.lastName}`;
+    }
+}

package/src/modules/dx/podcastPlayer/podcastPlayer.css

@@ -0,0 +1,10 @@
+audio {
+    display: block;
+    width: 100%;
+    max-height: 40px;
+    border-radius: 3px;
+}
+
+audio:focus {
+    outline: none;
+}

package/src/modules/dx/podcastPlayer/podcastPlayer.html

@@ -0,0 +1,3 @@
+<template>
+    <audio controls src={src}></audio>
+</template>

package/src/modules/dx/podcastPlayer/podcastPlayer.ts

@@ -0,0 +1,5 @@
+import { LightningElement, api } from "lwc";
+
+export default class PodcastPlayer extends LightningElement {
+    @api src: string = "";
+}

package/src/modules/dx/popover/popover.css

@@ -0,0 +1,65 @@
+@import "dxHelpers/reset";
+
+:host {
+    --popover-border-radius: var(
+        --dx-c-popover-border-radius,
+        var(--dx-g-spacing-sm)
+    );
+    --popover-border: var(--dx-c-popover-border, 1px solid var(--dx-g-gray-90));
+}
+
+.popover-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.popover {
+    background: white;
+    border: var(--popover-border);
+    box-shadow: var(--dx-g-box-shadow-lg);
+    border-radius: var(--popover-border-radius);
+    width: 168px;
+    max-width: calc(100vw - var(--dx-g-spacing-lg));
+    max-height: 65vh;
+    padding: var(--dx-g-spacing-sm);
+    overflow-y: auto;
+    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition-delay: 0.02s;
+    transform: translateY(var(--dx-g-spacing-xs));
+    opacity: 0;
+}
+
+.popover-container_open {
+    visibility: visible;
+    pointer-events: auto;
+}
+
+.popover-container_open .popover {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.popover-overridewidth {
+    max-width: unset;
+}
+
+.popover-fullwidth {
+    width: unset;
+    max-width: unset;
+}
+
+.popover-offset-small {
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+.popover-offset-medium {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.popover-small {
+    width: 136px;
+}

package/src/modules/dx/popover/popover.html

@@ -0,0 +1,16 @@
+<template>
+    <slot name="control" onslotchange={onSlotChange}></slot>
+    <div class={containerClassName}>
+        <div
+            class={className}
+            style={style}
+            aria-label={ariaLabel}
+            part="content"
+            onkeydown={onKeyDown}
+        >
+            <div class="popover-content" if:true={_rendered}>
+                <slot name="content"></slot>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,306 @@
+import { LightningElement, api } from "lwc";
+import {
+    LightningSlotElement,
+    PopoverRequestCloseType,
+    PopperPlacement
+} from "typings/custom";
+
+import { computePosition, flip, size, shift } from "@floating-ui/dom";
+import cx from "classnames";
+import debounce from "debounce";
+import { isPrerender } from "dxUtils/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"));
+
+            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();
+            const popoverEl = this.popover;
+
+            computePosition(this.control, popoverEl, {
+                placement: this.placement,
+                middleware: [
+                    ...(this.fullWidth
+                        ? [
+                              size({
+                                  apply({ rects }) {
+                                      Object.assign(popoverEl.style, {
+                                          width: `${rects.reference.width}px`
+                                      });
+                                  }
+                              })
+                          ]
+                        : []),
+                    flip(),
+                    shift({ padding: this.pagePadding })
+                ]
+            }).then(({ x, y }) => {
+                Object.assign(popoverEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+            });
+        }
+    };
+}

package/src/modules/dx/radioGroup/radioGroup.css

@@ -0,0 +1,12 @@
+@import "dxHelpers/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.ts

@@ -0,0 +1,65 @@
+import { LightningElement, api } from "lwc";
+import { toJson } from "dxUtils/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/relativeDateTime.html

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