@salesforcedevs/dx-components 0.0.0

package/src/modules/dx/codeBlock/lightTheme.css

@@ -0,0 +1,72 @@
+.dx-theme-light .token.comment {
+    color: #706e6b;
+}
+
+.dx-theme-light .token.punctuation {
+    color: var(--dx-g-blue-vibrant-10);
+}
+
+.dx-theme-light .token.keyword {
+    color: var(--dx-g-pink-vibrant-40);
+}
+
+.dx-theme-light .token.variable {
+    color: var(--dx-g-hot-orange-vibrant-40);
+}
+
+.dx-theme-light .token.operator {
+    color: var(--dx-g-green-vibrant-50);
+}
+
+.dx-theme-light .token.property {
+    color: var(--dx-g-indigo-vibrant-40);
+}
+
+.dx-theme-light .token.selector {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+.dx-theme-light .token.function {
+    color: var(--dx-g-teal-vibrant-40);
+}
+
+.dx-theme-light .token.tag {
+    color: rgb(75, 36, 219);
+}
+
+.dx-theme-light .token.attr-name {
+    color: rgb(0, 107, 102);
+}
+
+.dx-theme-light .token.attr-value {
+    color: rgb(204, 0, 96);
+}
+
+.dx-theme-light .token.doctype {
+    color: rgb(0, 114, 215);
+}
+
+.dx-theme-light .token.prolog,
+.dx-theme-light .token.cdata,
+.dx-theme-light .token.boolean,
+.dx-theme-light .token.number,
+.dx-theme-light .token.constant,
+.dx-theme-light .token.symbol,
+.dx-theme-light .token.deleted,
+.dx-theme-light .token.string,
+.dx-theme-light .token.char,
+.dx-theme-light .token.builtin,
+.dx-theme-light .token.inserted,
+.dx-theme-light .token.atrule,
+.dx-theme-light .token.regex,
+.dx-theme-light .token.important {
+    color: var(--dx-g-gray-10);
+}
+
+.dx-theme-light .token.entity,
+.dx-theme-light .token.url,
+.dx-theme-light .language-css .token.string,
+.dx-theme-light .style .token.string {
+    color: var(--dx-g-gray-10);
+    background: var(--dx-g-gray-95);
+}

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

@@ -0,0 +1,93 @@
+@import "dxHelpers/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,73 @@
+<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" for:index="index">
+                <dx-dropdown-option
+                    suppress-gtm-nav-headings={suppressGtmNavHeadings}
+                    analytics-event={analyticsEvent}
+                    analytics-base-payload={analyticsBasePayload}
+                    active={option.active}
+                    key-value={option.keyValue}
+                    if:false={option.options}
+                    key={option.id}
+                    index-position={index}
+                    onfocus={onOptionFocus}
+                    onselect={onOptionClick}
+                    option={option}
+                    nav-item-label={navItemLabel}
+                    variant={variant}
+                ></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
+                            suppress-gtm-nav-headings={suppressGTMNavHeadings}
+                            analytics-event={analyticsEvent}
+                            analytics-base-payload={analyticsBasePayload}
+                            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,193 @@
+import {
+    AnalyticsPayload,
+    OptionWithNested,
+    PopperPlacement,
+    DropdownVariant
+} from "typings/custom";
+import { LightningElement, api, track } from "lwc";
+import cx from "classnames";
+import get from "lodash.get";
+import { deepmapOptions } from "dxUtils/options";
+import { toJson } from "dxUtils/normalizers";
+
+interface DropdownOption extends OptionWithNested {
+    // 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;
+    @api variant: DropdownVariant = "base";
+
+    // props forwarded to dropdown option
+    @api analyticsEvent: string | null = null;
+    @api analyticsBasePayload: AnalyticsPayload = {
+        elementType: "dropdown",
+        destinationType: "internal",
+        ctaClick: true
+    };
+    @api suppressGtmNavHeadings?: boolean = false;
+
+    @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,179 @@
+@import "dxHelpers/reset";
+
+.indented-shape {
+    --background: rgb(170, 203, 255);
+    --wide: 2px;
+
+    background-color: var(--background);
+    height: var(--wide);
+    margin-bottom: var(--dx-g-spacing-xs);
+    margin-right: var(--dx-g-spacing-sm);
+    position: relative;
+    width: var(--shape-width);
+}
+
+.indented-shape::after {
+    background-color: var(--background);
+    bottom: 0;
+    content: "";
+    height: 15px;
+    position: absolute;
+    width: var(--wide);
+}
+
+.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-indented .option_details {
+    align-items: center;
+    flex-direction: row;
+}
+
+.option_label {
+    color: var(--dx-c-dropdown-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-indented .option_label {
+    display: -webkit-box;
+    max-width: 300px;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+}
+
+.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;
+}
+
+.option-indented {
+    padding-top: var(--dx-g-spacing-xs);
+    padding-bottom: var(--dx-g-spacing-xs);
+}
+
+.option-indented:not([data-index="0"]) {
+    --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
+    --shape-width: 8px;
+
+    padding-left: calc(var(--indentation, 0px) + var(--dx-g-spacing-md));
+}
+
+[data-index="2"] {
+    --indentation: var(--base-indentation);
+}
+
+[data-index="3"] {
+    --indentation: calc(2 * var(--base-indentation));
+}
+
+[data-index="4"] {
+    --indentation: calc(3 * var(--base-indentation));
+}
+
+[data-index="5"] {
+    --indentation: calc(4 * var(--base-indentation));
+}
+
+[data-index="6"] {
+    --indentation: calc(5 * var(--base-indentation));
+}
+
+[data-index="7"] {
+    --indentation: calc(6 * var(--base-indentation));
+}
+
+[data-index="8"] {
+    --indentation: calc(7 * var(--base-indentation));
+}
+
+[data-index="9"] {
+    --indentation: calc(8 * var(--base-indentation));
+}
+
+[data-index="10"] {
+    --indentation: calc(9 * var(--base-indentation));
+}
+
+[data-index="11"] {
+    --indentation: calc(10 * var(--base-indentation));
+}
+
+[data-index="12"] {
+    --indentation: calc(11 * var(--base-indentation));
+}
+
+[data-index="13"] {
+    --indentation: calc(12 * var(--base-indentation));
+}
+
+[data-index="14"] {
+    --indentation: calc(13 * var(--base-indentation));
+}
+
+[data-index="15"] {
+    --indentation: calc(14 * var(--base-indentation));
+}
+
+[data-index="16"] {
+    --indentation: calc(15 * var(--base-indentation));
+}
+
+[data-index="17"] {
+    --indentation: calc(16 * var(--base-indentation));
+}
+
+[data-index="18"] {
+    --indentation: calc(17 * var(--base-indentation));
+}
+
+[data-index="19"] {
+    --indentation: calc(18 * var(--base-indentation));
+}

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

@@ -0,0 +1,57 @@
+<template>
+    <a
+        if:true={option.link}
+        class={className}
+        href={option.link.href}
+        target={option.link.target}
+        key={option.id}
+        role="menuitem"
+        tabindex="-1"
+        data-index={indexPosition}
+        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 if:true={renderIndentedShape} class="indented-shape"></div>
+            <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"
+        data-index={indexPosition}
+        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 if:true={renderIndentedShape} class="indented-shape"></div>
+            <div class="option_label">{option.label}</div>
+            <div if:true={option.description} class="option_description">
+                {option.description}
+            </div>
+        </div>
+    </button>
+</template>