@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

package/src/modules/dx/dropdown/dropdown.css

@@ -0,0 +1,93 @@
+@import "helpers/reset";
+
+.menu-nested::part(content) {
+    padding-top: var(--dx-g-spacing-sm);
+    width: 354px;
+}
+
+.menu_list {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+
+.menu-hidden::part(content) {
+    display: none;
+}
+
+@media screen and (max-width: 1000px) {
+    .menu-nested .menu_option:not(:first-child) {
+        border-top: var(--border);
+        margin-top: var(--dx-g-spacing-lg);
+        padding-top: var(--dx-g-spacing-lg);
+    }
+}
+
+@media screen and (min-width: 1000px) {
+    .menu-nested-2-col::part(content) {
+        width: 592px;
+    }
+
+    .menu-nested-2-col .menu_list {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .menu-nested-2-col .menu_option {
+        flex-grow: 1;
+        flex-basis: 40%;
+    }
+
+    .menu-nested .menu_option:nth-child(n + 3) {
+        border-top: var(--border);
+        margin-top: var(--dx-g-spacing-lg);
+        padding-top: var(--dx-g-spacing-lg);
+    }
+
+    .menu-nested-2-col .menu_option:nth-child(2n) {
+        padding-left: var(--dx-g-spacing-sm);
+    }
+
+    .callout_link {
+        margin-bottom: var(--dx-g-spacing-xs);
+    }
+}
+
+.menu_option {
+    --border: 1px solid var(--dx-g-blue-natural-90);
+
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.menu_option > a:first-of-type {
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+.menu_heading {
+    display: block;
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: var(--dx-g-spacing-sm);
+}
+
+.callout_link {
+    --dx-c-button-font-size: var(--dx-g-text-base);
+
+    display: block;
+    padding-top: var(--dx-g-spacing-xl);
+    margin-top: auto;
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.empty {
+    padding: var(--dx-g-spacing-sm);
+    color: var(--dx-g-gray-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+}

package/src/modules/dx/dropdown/dropdown.html

@@ -0,0 +1,67 @@
+<template>
+    <dx-popover
+        aria-label={ariaLabel}
+        class={className}
+        full-width={fullWidth}
+        offset={offset}
+        onclose={onClose}
+        open-on-hover={openOnHover}
+        open={open}
+        page-padding={pagePadding}
+        placement={placement}
+        small={small}
+        width={width}
+    >
+        <slot slot="control"></slot>
+        <div
+            class="menu_list"
+            if:false={areOptionsEmpty}
+            role={role}
+            slot="content"
+        >
+            <template for:each={options} for:item="option">
+                <dx-dropdown-option
+                    analytics-event={analyticsEvent}
+                    active={option.active}
+                    key-value={option.keyValue}
+                    if:false={option.options}
+                    key={option.id}
+                    onfocus={onOptionFocus}
+                    onselect={onOptionClick}
+                    option={option}
+                    nav-item-label={navItemLabel}
+                ></dx-dropdown-option>
+                <div
+                    key={option.id}
+                    role="presentation"
+                    class="menu_option"
+                    if:true={option.options}
+                >
+                    <span class="menu_heading">{option.label}</span>
+                    <template for:each={option.options} for:item="suboption">
+                        <dx-dropdown-option
+                            analytics-event={analyticsEvent}
+                            active={suboption.active}
+                            key={suboption.id}
+                            key-value={suboption.keyValue}
+                            onfocus={onOptionFocus}
+                            onselect={onOptionClick}
+                            option={suboption}
+                            nav-item-label={navItemLabel}
+                        ></dx-dropdown-option>
+                    </template>
+                    <dx-button
+                        class="callout_link"
+                        if:true={option.calloutLink}
+                        href={option.calloutLink.href}
+                        target={option.calloutLink.target}
+                        icon-symbol="forward"
+                        variant="inline"
+                    >
+                        {option.calloutLink.label}
+                    </dx-button>
+                </div>
+            </template>
+        </div>
+    </dx-popover>
+</template>

package/src/modules/dx/dropdown/dropdown.ts

@@ -0,0 +1,182 @@
+import { Option, PopperPlacement } from "typings/custom";
+import { LightningElement, api, track } from "lwc";
+import cx from "classnames";
+import get from "lodash.get";
+import { deepmapOptions } from "utils/options";
+import { toJson } from "utils/normalizers";
+
+interface DropdownOption extends Option {
+    // link that gets shown as a highlighted link at end of option group
+    calloutLink?: {
+        href: string;
+        target?: string;
+        label: string;
+    };
+}
+
+export default class Dropdown extends LightningElement {
+    @api value: string | null = null; // "active option" id
+    @api valuePath: string = "id"; // path to match for the active value (useful for url matching)
+    @api stayOpenAfterChange?: boolean = false;
+
+    // props forwarded to popover:
+    @api ariaLabel: string | null = null;
+    @api tempId: string | null = null;
+    @api offset?: "small" | "medium";
+    @api open: boolean | null = null;
+    @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 navItemLabel: string | null = null;
+
+    // props forwarded to dropdown option
+    @api analyticsEvent: string | null = null;
+
+    @api
+    get options() {
+        return deepmapOptions(this._options, (option: DropdownOption) => ({
+            ...option,
+            active: this.value === get(option, this.valuePath),
+            keyValue: get(option, this.valuePath)
+        }));
+    }
+    set options(value: DropdownOption[]) {
+        this._options = toJson(value);
+    }
+
+    @api
+    get focusedValue() {
+        return this._focusedValue;
+    }
+
+    @track
+    private _options!: DropdownOption[];
+
+    // PRIVATE VARS
+
+    private _focusedValue: string | null = null;
+    private popoverEl: HTMLElement | null = null;
+
+    constructor() {
+        super();
+
+        // @ts-ignore
+        this.addEventListener("keydown", this.onKeyDown);
+    }
+
+    // GETTERS
+
+    private get role() {
+        return this.areOptionsEmpty ? null : "menu";
+    }
+
+    private get className() {
+        return cx(
+            this.isNested && "menu-nested",
+            this.isNested && this.options.length >= 2 && "menu-nested-2-col",
+            this.offset && `menu-offset-${this.offset}`,
+            this.areOptionsEmpty && "menu-hidden"
+        );
+    }
+
+    private get isNested() {
+        return this.options.some((option) => !!option.options);
+    }
+
+    private get optionsElements() {
+        return this.template.querySelectorAll("dx-dropdown-option");
+    }
+
+    private get areOptionsEmpty() {
+        return this.options.length === 0;
+    }
+
+    // CLASS FNS
+
+    private onKeyDown = (e: KeyboardEvent) => {
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                this.incrementOptionFocus(1);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                this.incrementOptionFocus(-1);
+                break;
+            default:
+        }
+    };
+
+    private onOptionClick(e: CustomEvent) {
+        if (e.detail !== this.value) {
+            this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
+        }
+        if (!this.stayOpenAfterChange && this.popoverEl) {
+            this.popoverEl.closePopover();
+        }
+    }
+
+    private onOptionFocus(e: PointerEvent) {
+        if (e.target) {
+            // @ts-ignore
+            this._focusedValue = e.target.option.id;
+        }
+    }
+
+    private findOptionElementIndex(value: string) {
+        return Array.from(this.optionsElements).findIndex(
+            // @ts-ignore
+            (el) => el.option.id === value
+        );
+    }
+
+    private incrementOptionFocus(indexChange: number) {
+        if (!this._focusedValue) {
+            this.focusDefaultOption();
+            return;
+        }
+
+        const focusedOptionIndex = this.findOptionElementIndex(
+            this._focusedValue
+        );
+
+        let nextIndex = focusedOptionIndex + indexChange;
+        if (nextIndex < 0) {
+            nextIndex = this.optionsElements.length - 1;
+        }
+        if (nextIndex >= this.optionsElements.length) {
+            nextIndex = 0;
+        }
+
+        const element = this.optionsElements[nextIndex];
+        if (element) {
+            element.focus();
+        }
+    }
+
+    private onClose(): void {
+        this._focusedValue = null;
+    }
+
+    private focusDefaultOption() {
+        const defaultIndex = this.value
+            ? this.findOptionElementIndex(this.value)
+            : 0;
+
+        const optionToFocus: any =
+            this.optionsElements[defaultIndex < 0 ? 0 : defaultIndex];
+        if (optionToFocus) {
+            optionToFocus.focus();
+            this._focusedValue = optionToFocus.option.id;
+        }
+    }
+
+    renderedCallback() {
+        if (!this.popoverEl) {
+            this.popoverEl = this.template.querySelector("dx-popover");
+        }
+    }
+}

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -0,0 +1,61 @@
+@import "helpers/reset";
+
+.option {
+    display: flex;
+    font-family: var(--dx-g-font-sans);
+    width: 100%;
+    padding: var(--dx-g-spacing-sm);
+    font-size: var(--dx-g-text-sm);
+    border-radius: var(--dx-g-spacing-xs);
+    transition: var(--dx-g-transition-hue-1x);
+    align-items: center;
+    outline: none !important;
+}
+
+.option:focus {
+    box-shadow: inset 0 0 0 1px var(--dx-g-blue-vibrant-50);
+}
+
+.option:active {
+    background: var(--dx-g-blue-vibrant-95) !important;
+}
+
+.option:not(.option-active):hover {
+    background: var(--dx-g-gray-95);
+}
+
+.option-active {
+    background: var(--dx-g-blue-vibrant-95);
+}
+
+.option_details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    text-align: left;
+}
+
+.option_label {
+    color: var(--dx-g-blue-vibrant-50);
+    display: flex;
+    align-items: center;
+    font-weight: var(--dx-g-font-bold);
+    font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
+}
+
+.option_label > *:last-child {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.option_description {
+    color: var(--dx-g-gray-30);
+    margin-top: var(--dx-g-spacing-xs);
+    line-height: 18px;
+}
+
+.option_icon {
+    margin-right: var(--dx-g-spacing-md);
+    flex-shrink: 0;
+}

package/src/modules/dx/dropdownOption/dropdownOption.html

@@ -0,0 +1,53 @@
+<template>
+    <a
+        if:true={option.link}
+        class={className}
+        href={option.link.href}
+        target={option.link.target}
+        key={option.id}
+        role="menuitem"
+        tabindex="-1"
+        onclick={onClick}
+    >
+        <dx-icon
+            class="option_icon"
+            symbol={option.iconSymbol}
+            sprite={option.iconSprite}
+            if:true={option.iconSymbol}
+            size="large"
+        ></dx-icon>
+        <div class="option_details">
+            <div class="option_label">
+                {option.label}
+                <dx-icon
+                    symbol="new_window"
+                    if:true={option.link.target}
+                ></dx-icon>
+            </div>
+            <div if:true={option.description} class="option_description">
+                {option.description}
+            </div>
+        </div>
+    </a>
+    <button
+        if:false={option.link}
+        class={className}
+        role="menuitem"
+        tabindex="-1"
+        onclick={onClick}
+    >
+        <dx-icon
+            class="option_icon"
+            symbol={option.iconSymbol}
+            sprite={option.iconSprite}
+            if:true={option.iconSymbol}
+            size="large"
+        ></dx-icon>
+        <div class="option_details">
+            <div class="option_label">{option.label}</div>
+            <div if:true={option.description} class="option_description">
+                {option.description}
+            </div>
+        </div>
+    </button>
+</template>

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -0,0 +1,39 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { Option } from "typings/custom";
+import { track } from "dx/instrumentation";
+
+export default class DropdownOption extends LightningElement {
+    @api option!: Option;
+    @api keyValue!: string;
+    @api active: boolean = false;
+    @api navItemLabel: String | null = null;
+    @api analyticsEvent: string | null = null;
+
+    @api focus() {
+        const option = this.template.querySelector(".option");
+        if (!option) {
+            return;
+        }
+        option.focus();
+    }
+
+    private get className(): string {
+        return cx("option", this.active && "option-active");
+    }
+
+    private onClick(e: PointerEvent) {
+        this.dispatchEvent(
+            new CustomEvent("select", { detail: this.keyValue })
+        );
+
+        if (this.analyticsEvent && e.currentTarget) {
+            track(e.currentTarget, this.analyticsEvent, {
+                navHeading: this.navItemLabel || undefined,
+                navSubHeading: this.option.label || undefined,
+                clickText: this.keyValue || undefined,
+                pageLocation: window.location.pathname || undefined
+            });
+        }
+    }
+}

package/src/modules/dx/emptyState/emptyState.css

@@ -0,0 +1,64 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-empty-state-background: var(--dx-g-gray-95);
+    --dx-c-empty-state-image-width: 600px;
+
+    width: 100%;
+}
+
+.container {
+    position: relative;
+    background: var(--dx-c-empty-state-background);
+    border-radius: var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-2xl) 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+img {
+    width: var(--dx-c-empty-state-image-width);
+    min-width: var(--dx-c-empty-state-image-width);
+}
+
+.size-small img {
+    max-width: 250px;
+    min-width: unset;
+    width: calc(100% - 40px);
+}
+
+.text {
+    position: absolute;
+    top: 35%;
+    min-height: 15%;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    padding: 0 var(--dx-g-spacing-xl);
+}
+
+.size-small .text {
+    top: 40%;
+}
+
+.title {
+    font-size: var(--dx-g-text-2xl);
+}
+
+.size-small .title {
+    font-size: var(--dx-g-text-base);
+    white-space: nowrap;
+}
+
+.subtitle {
+    padding-top: var(--dx-g-spacing-sm);
+    color: var(--dx-g-text-heading-color);
+    font-weight: bold;
+}

package/src/modules/dx/emptyState/emptyState.html

@@ -0,0 +1,9 @@
+<template>
+    <div class={containerClassName} part="container">
+        <img src={imageAssetPath} alt="Mountains" />
+        <div class="text">
+            <h3 class="title dx-text-heading-3">{title}</h3>
+            <p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>
+        </div>
+    </div>
+</template>

package/src/modules/dx/emptyState/emptyState.ts

@@ -0,0 +1,20 @@
+import { LightningElement, api } from "lwc";
+import { EmptyStateSize } from "typings/custom";
+
+export default class EmptyState extends LightningElement {
+    @api title: string = "";
+    @api subtitle?: string | null = null;
+    @api size?: EmptyStateSize = "large";
+
+    get containerClassName() {
+        return `container ${
+            !this.size || this.size === "large" ? "size-large" : "size-small"
+        }`;
+    }
+
+    get imageAssetPath() {
+        return `/assets/svg/docs-empty-state${
+            this.size === "small" ? "-small" : ""
+        }.svg`;
+    }
+}