@salesforcedevs/dx-components 0.26.1-alpha0.5 → 0.26.3

package/src/modules/dx/input/input.css

@@ -0,0 +1,165 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-input-background-active: white;
+    --dx-c-input-background: white;
+    --dx-c-input-border-active: 2px solid var(--dx-g-blue-vibrant-50);
+    --dx-c-input-border-radius: var(--dx-g-spacing-xs);
+    --dx-c-input-border: 1px solid var(--dx-g-gray-90);
+    --dx-c-input-boxshadow-active: none;
+    --dx-c-input-height: var(--dx-g-spacing-3xl);
+    --dx-c-input-icon-color: var(--dx-g-gray-50);
+    --dx-c-input-padding: none;
+    --dx-c-input-width: 376px;
+
+    max-width: 100%;
+}
+
+.input-group.size-small {
+    --dx-c-input-height: var(--dx-g-spacing-xl);
+}
+
+.input-group {
+    --error-color: var(--dx-g-red-vibrant-50);
+
+    height: var(--dx-c-input-height);
+    width: var(--dx-c-input-width);
+    max-width: inherit;
+    display: flex;
+    flex-direction: row;
+}
+
+.input-group > *:not(:last-child) {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.input-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: inherit;
+    font-size: var(--dx-g-text-sm);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-50);
+    border: var(--dx-c-input-border);
+    border-radius: var(--dx-c-input-border-radius);
+    transition: var(--dx-g-transition-hue-1x),
+        var(--dx-g-transition-box-shadow-1x);
+    background: var(--dx-c-input-background);
+    padding: var(--dx-c-input-padding);
+    flex-grow: 1;
+}
+
+.input-container.has-floating-item {
+    padding-right: var(--dx-g-spacing-sm);
+}
+
+.input-container.state-focused {
+    background: var(--dx-c-input-background-active);
+    box-shadow: var(--dx-c-input-boxshadow-active);
+}
+
+.input-container.state-focused:not(.has-error) {
+    border: var(--dx-c-input-border-active);
+}
+
+.input-container > dx-icon {
+    color: var(--dx-c-input-icon-color);
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.input-container > dx-button {
+    margin: 0 var(--dx-g-spacing-sm);
+}
+
+input {
+    height: 100%;
+    width: 100%;
+    min-width: 0;
+    border: none;
+    padding: 0 var(--dx-g-spacing-md);
+    border-radius: var(--dx-g-spacing-xs);
+    font-size: inherit;
+    font-family: inherit;
+    color: var(--dx-g-gray-10);
+    caret-color: var(--dx-g-blue-vibrant-50);
+    text-overflow: ellipsis;
+    transition: var(--dx-g-transition-hue-1x);
+    outline: none;
+    background: none;
+}
+
+label {
+    color: var(--sds-g-gray-11);
+    display: inline-block;
+    font-size: var(--dx-g-text-xs);
+    hyphens: auto;
+    margin-bottom: var(--dx-g-spacing-2xs);
+    padding-right: var(--dx-g-spacing-sm);
+    padding-top: var(--dx-g-spacing-xs);
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-hyphens: auto;
+    -webkit-hyphens: auto;
+}
+
+.input-group.size-small input {
+    padding: 0 var(--dx-g-spacing-sm);
+}
+
+input::placeholder {
+    color: var(--dx-g-gray-30);
+}
+
+.input-container > img {
+    position: absolute;
+    z-index: 2;
+    height: var(--dx-g-spacing-sm);
+    top: calc(50% - var(--dx-g-spacing-xs));
+    right: var(--dx-g-spacing-sm);
+    pointer-events: none;
+}
+
+.shortcut {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: row;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    color: var(--dx-g-gray-50);
+    line-height: var(--dx-g-text-base);
+    text-transform: uppercase;
+}
+
+.shortcut > img {
+    margin-right: var(--dx-g-spacing-2xs);
+}
+
+.has-error {
+    background-clip: padding-box;
+    border: 2px solid var(--error-color);
+}
+
+.has-error.state-focused {
+    box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
+    -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
+}
+
+.error-message-box {
+    margin-top: var(--dx-g-spacing-2xs);
+    display: block;
+}
+
+.clear-button > dx-icon {
+    --dx-c-icon-color: var(--sds-g-gray-9);
+}
+
+.clear-button > dx-icon::part(svg) {
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+.clear-button:hover > dx-icon {
+    --dx-c-icon-color: var(--dx-g-blue-vibrant-30);
+}

package/src/modules/dx/input/input.html

@@ -0,0 +1,58 @@
+<template>
+    <label if:true={label} for="input">
+        {label}
+        <abbr if:true={required}>*</abbr>
+    </label>
+    <div class={className}>
+        <div class={inputContainerClassName} onclick={onClick} role={role}>
+            <dx-icon
+                if:true={iconSymbol}
+                symbol={iconSymbol}
+                size={iconSize}
+            ></dx-icon>
+            <input
+                aria-label={ariaLabel}
+                aria-keyshortcuts={ariaKeyShortcuts}
+                autocomplete={autocomplete}
+                name={name}
+                disabled={inputDisabled}
+                id="input"
+                onblur={onInputBlur}
+                onfocus={onInputFocus}
+                oninput={onInputChange}
+                onkeydown={onKeyDown}
+                placeholder={placeholder}
+                type={type}
+                value={value}
+            />
+            <button
+                class="clear-button"
+                aria-label="Clear"
+                if:true={showClearButton}
+                onclick={clear}
+            >
+                <dx-icon symbol="clear" size="medium"></dx-icon>
+            </button>
+            <div class="shortcut" if:true={showShortcutKey}>
+                <img src={shortcutImgSrc} alt={shortcutImgAlt} />
+                <span>{shortcutKey}</span>
+            </div>
+        </div>
+        <dx-button
+            if:true={submitLabel}
+            disabled={buttonDisabled}
+            onclick={onButtonClick}
+            type="submit"
+            size={size}
+        >
+            {submitLabel}
+        </dx-button>
+    </div>
+    <div
+        if:true={errorMessage}
+        aria-live="assertive"
+        class="error-message-box dx-text-form-error-message"
+    >
+        {errorMessage}
+    </div>
+</template>

package/src/modules/dx/input/input.ts

@@ -0,0 +1,238 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { IconSize, IconSymbol } from "typings/custom";
+import { isMac } from "utils/devices";
+import { isValidEmail } from "./validators";
+
+type ValidatorMap = {
+    [key: string]: {
+        validator: (value: string | null) => boolean;
+        errorMessage: string;
+    };
+};
+
+const typeValidatorMap: ValidatorMap = {
+    email: {
+        validator: isValidEmail,
+        errorMessage: "Enter valid email"
+    }
+};
+export default class Input extends LightningElement {
+    @api ariaLabel!: string;
+    @api autocomplete: string | null = null;
+    @api clearable: boolean = false;
+    @api disabled: boolean = false;
+    @api iconSize: IconSize = "medium";
+    @api iconSymbol: IconSymbol | null = null;
+    @api label?: string;
+    @api loading: boolean = false;
+    @api missingErrorMessage: string = "Complete this field";
+    @api formatErrorMessage?: string;
+    @api name?: string;
+    @api placeholder!: string;
+    @api required = false;
+    @api role: string | null = null;
+    @api shortcutKey: string | null = null;
+    @api size: "small" | "large" | "override" = "small";
+    @api submitLabel?: string | null = null;
+    @api type: string = "text";
+    @api validityOnBlur = false;
+
+    @api
+    get value() {
+        return this._value;
+    }
+    set value(value: string | null) {
+        this._value = value || "";
+    }
+
+    @api
+    get errorMessage() {
+        return this._errorMessage;
+    }
+
+    set errorMessage(value) {
+        this._errorMessage = value;
+    }
+
+    @api focus() {
+        if (this.input) {
+            this.input.focus();
+        }
+    }
+
+    @api
+    reportValidity(): boolean {
+        if (this.isRequiredAndFilled) {
+            this._errorMessage = this.missingErrorMessage;
+            return false;
+        }
+
+        const typeValidator = typeValidatorMap[this.type];
+        if (typeValidator && !typeValidator.validator(this.value)) {
+            this._errorMessage =
+                this.formatErrorMessage || typeValidator.errorMessage;
+            return false;
+        }
+
+        this._errorMessage = "";
+        return true;
+    }
+
+    private _errorMessage: string = "";
+    private focused: boolean = false;
+    private input: HTMLInputElement | null = null;
+    private _value: string | null = null;
+    private _loading: boolean = false;
+
+    private get showClearButton(): boolean {
+        return this.clearable && !!this.value;
+    }
+
+    private get showShortcutKey(): boolean {
+        return !this.showClearButton && !!this.shortcutKey;
+    }
+
+    private get ariaKeyShortcuts() {
+        return this.shortcutKey ? `meta+${this.shortcutKey}` : null;
+    }
+
+    private get inputLoading() {
+        return this.loading || this._loading;
+    }
+
+    private get inputInvalid() {
+        const typeValidator = typeValidatorMap[this.type];
+        return (
+            this.isRequiredAndFilled &&
+            typeValidator &&
+            !typeValidator.validator(this.value)
+        );
+    }
+
+    private get inputDisabled() {
+        return this.inputLoading || this.disabled;
+    }
+
+    private get className() {
+        return cx("input-group", `size-${this.size}`);
+    }
+
+    private get inputContainerClassName() {
+        return cx(
+            "input-container",
+            this.focused && "state-focused",
+            (this.showClearButton || this.showShortcutKey) &&
+                "has-floating-item",
+            !!this.errorMessage && "has-error"
+        );
+    }
+
+    private get buttonDisabled() {
+        return this.inputLoading || this.inputInvalid || this.disabled;
+    }
+
+    private get commandKey() {
+        return isMac() ? "command" : "control";
+    }
+
+    private get shortcutImgSrc() {
+        return `/assets/svg/${this.commandKey}.svg`;
+    }
+
+    private get shortcutImgAlt() {
+        return `${this.commandKey}-${this.shortcutKey} is the search shortcut`;
+    }
+
+    private get isRequiredAndFilled() {
+        return this.required && (!this.value || !this.value.trim());
+    }
+
+    connectedCallback() {
+        window.addEventListener("keydown", this.onWindowKeydown);
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("keydown", this.onWindowKeydown);
+    }
+
+    renderedCallback() {
+        if (!this.input) {
+            this.input = <HTMLInputElement>this.template.querySelector("input");
+        }
+    }
+
+    onClick() {
+        if (this.input) {
+            this.input.focus();
+        }
+    }
+
+    onInputFocus() {
+        this.focused = true;
+    }
+
+    onInputBlur() {
+        this.focused = false;
+
+        if (this.validityOnBlur) {
+            this.reportValidity();
+        }
+    }
+
+    onInputChange(e: InputEvent) {
+        if (!e || !e.target) {
+            return;
+        }
+        this.dispatchChange((<HTMLInputElement>e.target).value || "");
+    }
+
+    onButtonClick(e: Event) {
+        if (!this.buttonDisabled) {
+            e.stopPropagation();
+        }
+        this.submit();
+    }
+
+    dispatchChange(value: string) {
+        this._value = value;
+        this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
+    }
+
+    clear(e?: Event) {
+        if (e) {
+            e.stopPropagation();
+        }
+        this.dispatchChange("");
+        this.dispatchEvent(new CustomEvent("clear"));
+        if (this.input) {
+            this.input.blur();
+        }
+    }
+
+    submit = async () => {
+        if (this.inputInvalid) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("submit", { detail: this.value }));
+    };
+
+    private onKeyDown(e: KeyboardEvent) {
+        switch (e.key) {
+            case "Escape":
+                this.clear();
+                break;
+            case "Enter":
+                this.submit();
+                break;
+            default:
+        }
+    }
+
+    private onWindowKeydown = (e: KeyboardEvent) => {
+        if (this.shortcutKey && e.metaKey && e.key === this.shortcutKey) {
+            e.preventDefault();
+            this.focus();
+        }
+    };
+}

package/src/modules/dx/input/validators.ts

@@ -0,0 +1,5 @@
+export const isValidEmail = (value: string | null) =>
+    // eslint-disable-next-line
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+        value || ""
+    );

package/src/modules/dx/instrumentation/instrumentation.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/dx/instrumentation/instrumentation.ts

@@ -0,0 +1,116 @@
+import { LightningElement, api } from "lwc";
+
+const TRACKING_EVENT_NAME = "developerwebsite_track";
+const LISTENER_QUEUE = "__DX_INSTRUMENTATION_QUEUE__";
+const LISTENER_INDICATOR = "__DX_INSTRUMENTATION_IS_INITIALIZED__";
+
+export function track(
+    element: EventTarget,
+    event: string,
+    payload: Record<string, unknown>
+): void {
+    const detail = { event, payload };
+    // if window.LISTENER_INDICATOR is undefined, `dx-instrumentation` has not
+    // been mounted, and the listener hasn't been attached.
+    if ((window as any)[LISTENER_INDICATOR] === undefined) {
+        (window as any)[LISTENER_QUEUE] = (window as any)[LISTENER_QUEUE] || [];
+        (window as any)[LISTENER_QUEUE].push(detail);
+    } else {
+        const e = new CustomEvent(TRACKING_EVENT_NAME, {
+            bubbles: true,
+            composed: true,
+            detail
+        });
+        element.dispatchEvent(e);
+    }
+}
+
+const googleTagManager = {
+    track: function (e: Event) {
+        if ((window as any).dataLayer === undefined) {
+            (window as any).dataLayer = [];
+        }
+        const { event, payload } = (e as CustomEvent).detail;
+        (window as any).dataLayer.push({ ...payload, event });
+    }
+};
+
+interface TrackEventListener {
+    add: () => void;
+    remove: () => void;
+}
+
+export function developerwebTrackEventListener(
+    trackerFns: { track: (e: Event) => void }[] = []
+): TrackEventListener {
+    if (trackerFns.length === 0) {
+        throw new Error("No tracker functions passed");
+    }
+
+    const trackdeveloperwebEvent = (e: Event) => {
+        trackerFns.forEach((tracker) => {
+            tracker.track(e);
+        });
+    };
+
+    const attachEventListener = () => {
+        document.addEventListener(TRACKING_EVENT_NAME, trackdeveloperwebEvent);
+    };
+
+    const removeEventListener = () => {
+        document.removeEventListener(
+            TRACKING_EVENT_NAME,
+            trackdeveloperwebEvent
+        );
+    };
+
+    return {
+        add: attachEventListener,
+        remove: removeEventListener
+    };
+}
+
+export default class Instrumentation extends LightningElement {
+    @api useGoogleTagManager = false;
+
+    private tracker: TrackEventListener | null = null;
+
+    private setupTracker() {
+        const trackerFunctions = this.useGoogleTagManager
+            ? [googleTagManager]
+            : [];
+        this.tracker = developerwebTrackEventListener(trackerFunctions);
+        this.tracker.add();
+        (window as any)[LISTENER_INDICATOR] = true;
+    }
+
+    private dispatchQueuedEvents() {
+        while ((window as any)[LISTENER_QUEUE].length > 0) {
+            const event = (window as any)[LISTENER_QUEUE].pop() as {
+                event: string;
+                payload: Record<string, unknown>;
+            };
+            track(this, event.event, event.payload);
+        }
+    }
+
+    renderedCallback() {
+        if (this.tracker === null) {
+            this.setupTracker();
+
+            if (
+                (window as any)[LISTENER_QUEUE] !== undefined &&
+                (window as any)[LISTENER_QUEUE].length > 0
+            ) {
+                this.dispatchQueuedEvents();
+            }
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.tracker !== null) {
+            this.tracker.remove();
+            this.tracker = null;
+        }
+    }
+}

package/src/modules/dx/interactiveImage/interactiveImage.css

@@ -0,0 +1,59 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+article {
+    border: 1px solid var(--dx-g-gray-90);
+    border-radius: 0.3125rem;
+}
+
+header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    border-radius: 0.3125rem 0.3125rem 0 0;
+    background-color: var(--dx-g-gray-95);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-10);
+    padding: var(--dx-g-spacing-sm);
+}
+
+header span {
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
+    font-size: var(--dx-g-text-sm);
+}
+
+footer {
+    border-radius: 0 0 0.3125rem 0.3125rem;
+}
+
+.body {
+    margin: var(--dx-g-spacing-md);
+    overflow-x: auto;
+}
+
+.body img {
+    min-width: 650px;
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+/* Breakpoints for mobile */
+
+@media screen and (max-width: 640px) {
+    header {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+}
+
+@media screen and (max-width: 320px) {
+    .controls,
+    .controls dx-dropdown,
+    .controls dx-button {
+        width: 100%;
+    }
+}

package/src/modules/dx/interactiveImage/interactiveImage.html

@@ -0,0 +1,32 @@
+<template>
+    <article>
+        <header>
+            <span>{title}</span>
+            <div class="controls">
+                <template if:true={isSingleDownload}>
+                    <dx-button
+                        icon-symbol="download"
+                        href={singleDownloadHref}
+                        download={singleDownloadFilename}
+                    >
+                        {downloadButtonLabel}
+                    </dx-button>
+                </template>
+                <template if:false={isSingleDownload}>
+                    <dx-dropdown
+                        options={urls}
+                        onchange={handleDownloadOptionChange}
+                        placement="bottom-end"
+                    >
+                        <dx-button variant="primary" icon-symbol="chevrondown">
+                            {downloadButtonLabel}
+                        </dx-button>
+                    </dx-dropdown>
+                </template>
+            </div>
+        </header>
+        <div class="body">
+            <img src={featuredSrc} alt={title} />
+        </div>
+    </article>
+</template>