@salesforcedevs/dx-components 0.0.0

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

@@ -0,0 +1,62 @@
+<template>
+    <label if:true={label} id="label" for="input" tabindex="-1">
+        {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}
+                aria-labelledby="label description"
+            />
+            <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 id="description" class={descriptionClassName} tabindex="-1">
+        {description}
+    </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,246 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { IconSize, IconSymbol } from "typings/custom";
+import { isMac } from "dxUtils/devices";
+import { setContainerInnerHtml } from "dxUtils/lwc";
+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 descriptionMarkup?: 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 descriptionClassName() {
+        return cx("description", !this.descriptionMarkup && "hide");
+    }
+
+    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");
+        }
+        const container = this.template.querySelector(".description");
+        setContainerInnerHtml(container, this.descriptionMarkup);
+    }
+
+    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/logo/logo.css

@@ -0,0 +1,33 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);
+
+    flex-shrink: 0;
+}
+
+a {
+    transition: var(--dx-g-transition-hue-1x);
+    display: flex;
+    align-items: center;
+}
+
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+.logo-link {
+    flex-shrink: 0;
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+.logo-link > span {
+    margin-top: 3px;
+    color: var(--dx-c-logo-label-color);
+}
+
+.logo-link > img {
+    margin-right: var(--dx-g-spacing-sm);
+    width: 28px;
+}

package/src/modules/dx/logo/logo.html

@@ -0,0 +1,6 @@
+<template>
+    <a href={href} class="logo-link">
+        <img src={imgSrc} alt={imgAlt} />
+        <span class="dx-text-heading-7">{label}</span>
+    </a>
+</template>

package/src/modules/dx/logo/logo.ts

@@ -0,0 +1,8 @@
+import { LightningElement, api } from "lwc";
+
+export default class Logo extends LightningElement {
+    @api href: string = "/";
+    @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
+    @api imgAlt: string = "Salesforce log";
+    @api label!: string;
+}

package/src/modules/dx/modalDrawer/modalDrawer.css

@@ -0,0 +1,41 @@
+:host {
+    --dx-c-modal-drawer-z-index: 5000;
+    --dx-c-modal-padding-around: var(--dx-g-spacing-smd);
+    --dx-c-modal-height: calc(100vh - var(--dx-c-modal-padding-around) * 2);
+}
+
+dx-button {
+    display: block;
+    margin-left: auto;
+}
+
+.modal-drawer_container {
+    background-color: white;
+    height: var(--dx-c-modal-height);
+    left: 0;
+    padding: var(--dx-c-modal-padding-around);
+    position: fixed;
+    transform: translateX(-100%);
+    transition: transform 0.4s ease;
+    top: 0;
+    width: inherit;
+    z-index: var(--dx-c-modal-drawer-z-index);
+    overflow-y: auto;
+}
+
+.modal-drawer_container.modal-drawer_active {
+    transform: translateX(0);
+}
+
+.modal-drawer_overlay {
+    background-color: #195594;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    opacity: 0.62;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
+}

package/src/modules/dx/modalDrawer/modalDrawer.html

@@ -0,0 +1,11 @@
+<template>
+    <div class={containerClass}>
+        <slot></slot>
+        <dx-button onclick={handleCloseModal}>Done</dx-button>
+    </div>
+    <div
+        if:true={open}
+        class="modal-drawer_overlay"
+        onclick={handleCloseModal}
+    ></div>
+</template>

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -0,0 +1,27 @@
+import cx from "classnames";
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class ModalDrawer extends LightningElement {
+    private _open = false;
+
+    @api get open() {
+        return this._open;
+    }
+
+    set open(value) {
+        this._open = normalizeBoolean(value);
+    }
+
+    get containerClass(): string {
+        return cx(
+            "modal-drawer_container",
+            this._open && "modal-drawer_active"
+        );
+    }
+
+    handleCloseModal() {
+        this._open = !this._open;
+        this.dispatchEvent(new CustomEvent("clickclose"));
+    }
+}

package/src/modules/dx/pagination/pagination.css

@@ -0,0 +1,51 @@
+@import "dxHelpers/reset";
+
+.dx-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0;
+    width: min-content;
+}
+
+.dx-pagination dx-button {
+    --dx-c-button-primary-color: transparent;
+}
+
+.dx-pagination.has-prev dx-button:first-of-type {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+}
+
+.dx-pagination.has-next dx-button:last-of-type {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+}
+
+.dx-pagination-pages {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+}
+
+.dx-pagination-pages button {
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
+    border-radius: var(--dx-g-spacing-lg);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-blue-vibrant-20);
+    transition: var(--dx-g-transition-hue-1x);
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.dx-pagination-pages button:last-child {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.dx-pagination-pages button:hover {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.dx-pagination-pages button.current-page {
+    background-color: var(--dx-g-blue-vibrant-50);
+    color: white;
+}

package/src/modules/dx/pagination/pagination.html

@@ -0,0 +1,45 @@
+<template>
+    <div class={rootClass}>
+        <dx-button
+            data-part-id="previous"
+            aria-label="Previous Page"
+            variant="tertiary"
+            size="large"
+            icon-symbol="back"
+            icon-position="left"
+            onclick={onPageChange}
+            disabled={previousIsDisabled}
+        ></dx-button>
+        <div class="dx-pagination-pages">
+            <template for:each={pages} for:item="item" for:index="i">
+                <button
+                    if:true={item.isCurrentPage}
+                    class="current-page"
+                    onclick={onPageChange}
+                    data-page-id={item.index}
+                    key={item.index}
+                >
+                    {item.label}
+                </button>
+                <button
+                    if:false={item.isCurrentPage}
+                    onclick={onPageChange}
+                    data-page-id={item.index}
+                    key={item.index}
+                >
+                    {item.label}
+                </button>
+            </template>
+        </div>
+        <dx-button
+            data-part-id="next"
+            aria-label="Next Page"
+            variant="tertiary"
+            size="large"
+            icon-symbol="forward"
+            icon-position="right"
+            onclick={onPageChange}
+            disabled={nextIsDisabled}
+        ></dx-button>
+    </div>
+</template>

package/src/modules/dx/pagination/pagination.ts

@@ -0,0 +1,135 @@
+import classNames from "classnames";
+import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
+
+const ANALYTICS_INFO = {
+    clickUrl: window.location.href,
+    ctaClick: false,
+    elementType: "button",
+    destinationType: "internal"
+};
+
+enum PaginationClickType {
+    Number,
+    Next,
+    Previous
+}
+
+export default class Pagination extends LightningElement {
+    @api currentPage: string = "1";
+    @api totalPages: string = "1";
+    @api pagesToShow: string = "5";
+
+    private get _currentPage() {
+        return parseInt(this.currentPage, 10);
+    }
+
+    private get _totalPages() {
+        return parseInt(this.totalPages, 10);
+    }
+
+    private get _pagesToShow() {
+        return parseInt(this.pagesToShow, 10);
+    }
+
+    private get hasPrev(): boolean {
+        return this._currentPage > 1;
+    }
+
+    private get hasNext(): boolean {
+        return this._currentPage < this._totalPages;
+    }
+
+    private get previousIsDisabled(): boolean {
+        return !this.hasPrev;
+    }
+
+    private get nextIsDisabled(): boolean {
+        return !this.hasNext;
+    }
+
+    private get rootClass(): string {
+        return classNames(
+            "dx-pagination",
+            this.hasNext && "has-next",
+            this.hasPrev && "has-prev"
+        );
+    }
+
+    private get pages(): {
+        label: string;
+        index: number;
+        isCurrentPage: boolean;
+    }[] {
+        const offset =
+            this._pagesToShow === 2 ? 2 : Math.ceil(this._pagesToShow / 2);
+        let start = this._currentPage - offset + 1;
+        let end = this._currentPage + offset - 1;
+
+        if (this._totalPages < this._pagesToShow) {
+            start = 1;
+            end = this._totalPages;
+        } else if (this._currentPage < offset) {
+            start = 1;
+            end = this._pagesToShow;
+        } else if (this._currentPage + offset > this._totalPages) {
+            start = this._totalPages - this._pagesToShow + 1;
+            end = this._totalPages;
+        }
+
+        return [
+            ...Array.from(Array(end - start + 1).keys()).map((index) => {
+                const page = index + start;
+                return {
+                    label: `${page}`,
+                    index: page,
+                    isCurrentPage: page === this._currentPage
+                };
+            })
+        ];
+    }
+
+    private onPageChange(e: Event) {
+        const page = this.calculatePage(e);
+        const clickType = this.getPaginationClickType(e);
+
+        const clickText =
+            clickType === PaginationClickType.Number
+                ? page
+                : (e.target as HTMLElement).dataset.partId;
+
+        track(e.currentTarget!, "custEv_pagination", {
+            ...ANALYTICS_INFO,
+            clickText,
+            itemTitle: clickText
+        });
+
+        this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));
+    }
+
+    private getPaginationClickType(e: Event): PaginationClickType {
+        const button = (e.target as HTMLElement).dataset.partId;
+        if (button === "previous") {
+            return PaginationClickType.Previous;
+        } else if (button === "next") {
+            return PaginationClickType.Next;
+        }
+
+        return PaginationClickType.Number;
+    }
+
+    private calculatePage(e: Event) {
+        const clickType = this.getPaginationClickType(e);
+
+        let page = 0;
+        if (clickType === PaginationClickType.Previous) {
+            page = this._currentPage - 1;
+        } else if (clickType === PaginationClickType.Next) {
+            page = this._currentPage + 1;
+        } else {
+            page = +(e.target as HTMLElement).dataset.pageId!;
+        }
+
+        return page;
+    }
+}