@salesforcedevs/dx-components 0.55.0 → 0.55.3-alpha-2

package/src/modules/dx/cardGridDocs/cardGridDocs.ts

@@ -0,0 +1,86 @@
+import { LightningElement, api, track } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+import { DocsCard } from "typings/custom";
+
+const stringsMatch = (val1?: string, val2?: string): boolean => {
+    return (
+        typeof val1 === "string" &&
+        typeof val2 === "string" &&
+        val1.toLowerCase().includes(val2.toLowerCase())
+    );
+};
+
+export default class CardGridDocs extends LightningElement {
+    @api pageSize = 24;
+    @api
+    get cards(): DocsCard[] {
+        return this._cards;
+    }
+    set cards(value) {
+        this._cards = toJson(value);
+    }
+
+    private page: number = 1;
+    private _cards: DocsCard[] = [];
+    @track
+    private value?: string;
+
+    private get filteredCards(): DocsCard[] {
+        return this.value
+            ? this.cards.filter(({ title, body, label }) =>
+                  [title, body, label].some((val) =>
+                      stringsMatch(val, this.value)
+                  )
+              )
+            : this.cards;
+    }
+
+    private get currentPageCards() {
+        return this.filteredCards.slice(
+            this.startingRecord - 1,
+            this.endingRecord
+        );
+    }
+
+    private get startingRecord() {
+        return this.page === 1
+            ? this.page
+            : (this.page - 1) * this.pageSize + 1;
+    }
+
+    private get endingRecord() {
+        const defaultEndingRecord = this.pageSize * this.page;
+        return defaultEndingRecord > this.filteredCards.length
+            ? this.filteredCards.length
+            : defaultEndingRecord;
+    }
+
+    private get totalPages() {
+        return Math.ceil(this.filteredCards.length / this.pageSize);
+    }
+
+    private get hidePagination() {
+        return this.totalPages < 2;
+    }
+
+    private get emptyStateSubtitle() {
+        return "No results" + (this.value !== "" ? ` for "${this.value}"` : "");
+    }
+
+    private get showEmptyState() {
+        return !this.filteredCards.length;
+    }
+
+    private onSearchChange(e: InputEvent): void {
+        const detail = `${e.detail}`;
+        this.value = detail === "" ? undefined : detail;
+
+        if (this.startingRecord > this.cards.length) {
+            this.page = 1;
+        }
+    }
+
+    private goToPage(e: CustomEvent) {
+        this.page = e.detail;
+    }
+}

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

@@ -1,11 +1,11 @@
-import { Option, PopperPlacement } from "typings/custom";
+import { OptionWithNested, PopperPlacement } 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 Option {
+interface DropdownOption extends OptionWithNested {
     // link that gets shown as a highlighted link at end of option group
     calloutLink?: {
         href: string;

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

@@ -1,10 +1,10 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
+import { OptionWithNested } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
 export default class DropdownOption extends LightningElement {
-    @api option!: Option;
+    @api option!: OptionWithNested;
     @api suppressGtmNavHeadings: boolean = false;
     @api keyValue!: string;
     @api active: boolean = false;

package/src/modules/dx/featureGrid/featureGrid.html

@@ -0,0 +1,3 @@
+<template>
+    <slot onslotchange={onSlotChange}></slot>
+</template>

package/src/modules/dx/featureGrid/featureGrid.ts

@@ -0,0 +1,15 @@
+import { LightningElement } from "lwc";
+import { LightningSlotElement } from "typings/custom";
+
+export default class FeatureGrid extends LightningElement {
+    private onSlotChange(e: LightningSlotElement) {
+        // @ts-ignore
+        const slot = e.target;
+        slot.assignedElements().forEach(
+            (featureElement: any, index: number) => {
+                featureElement.descriptionPosition =
+                    index % 2 === 0 ? "left" : "right";
+            }
+        );
+    }
+}

package/src/modules/dx/filterMenu/filterMenu.css

@@ -1,4 +1,5 @@
 @import "dxHelpers/reset";
+@import "dxHelpers/scrollbar";
 
 :host {
     --dx-c-filter-menu-margin: 0;
@@ -37,8 +38,14 @@
 }
 
 .title-group {
+    display: flex;
+}
+
+.title-group-main {
     position: relative;
+    justify-content: space-between;
     margin: 0 var(--horizontal-padding);
+    width: calc(100% - 2 * var(--horizontal-padding));
 }
 
 .filter-menu-title {
@@ -77,9 +84,6 @@ label {
 }
 
 svg {
-    position: absolute;
-    right: 0;
-    top: 0;
     background: transparent;
     stroke: var(--dx-g-blue-vibrant-50);
 }
@@ -105,6 +109,8 @@ svg,
 
 .checkbox-year {
     --dx-c-filter-menu-font-weight: bold;
+
+    width: 130px;
 }
 
 .view-more-btn {

package/src/modules/dx/filterMenu/filterMenu.html

@@ -1,6 +1,6 @@
 <template>
     <form class="container">
-        <span class="title-group" onclick={dropdownToggle}>
+        <span class="title-group-main title-group" onclick={dropdownToggle}>
             <p class="filter-menu-title">{title}</p>
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -16,7 +16,7 @@
                 <polyline points="6 9 12 15 18 9"></polyline>
             </svg>
         </span>
-        <ul class="nested first-layer">
+        <ul class="nested first-layer always-visible-scrollbar">
             <li>
                 <template if:true={isBaseVariant}>
                     <template for:each={filterMenuOptions} for:item="option">
@@ -37,33 +37,36 @@
                             for:item="option"
                         >
                             <li key={option.id}>
-                                <dx-checkbox-native
-                                    class="checkbox-year"
-                                    value={option}
-                                    onchange={onChange}
-                                >
-                                    {option.name} ({option.totalNumberOfPosts})
-                                </dx-checkbox-native>
-                                <span onclick={dropdownToggle}>
-                                    <svg
-                                        xmlns="http://www.w3.org/2000/svg"
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                        fill="none"
-                                        stroke-width="2"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        class="
-                                            feather feather-chevron-down
-                                            year-svg
-                                        "
+                                <div class="title-group">
+                                    <dx-checkbox-native
+                                        class="checkbox-year"
+                                        value={option}
+                                        onchange={onChange}
                                     >
-                                        <polyline
-                                            points="6 9 12 15 18 9"
-                                        ></polyline>
-                                    </svg>
-                                </span>
+                                        {option.name}
+                                        ({option.totalNumberOfPosts})
+                                    </dx-checkbox-native>
+                                    <span onclick={dropdownToggle}>
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            width="24"
+                                            height="24"
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke-width="2"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            class="
+                                                feather feather-chevron-down
+                                                year-svg
+                                            "
+                                        >
+                                            <polyline
+                                                points="6 9 12 15 18 9"
+                                            ></polyline>
+                                        </svg>
+                                    </span>
+                                </div>
                                 <ul class="nested second-layer">
                                     <template
                                         for:each={option.months}

package/src/modules/dx/filterMenu/filterMenu.ts

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import { toJson } from "dxUtils/normalizers";
 
 interface Option {
     id: number;
@@ -8,9 +9,17 @@ interface Option {
 export default class FilterMenu extends LightningElement {
     @api name: string = "";
     @api title: string = "Filter Menu";
-    @api options: Option[] = [];
     @api variant: string = "base";
 
+    @api
+    get options(): Option[] {
+        return this._options;
+    }
+    set options(value: any) {
+        this._options = toJson(value);
+    }
+
+    private _options: Option[] = [];
     private showMore: boolean = false;
 
     get isBaseVariant() {
@@ -99,9 +108,10 @@ export default class FilterMenu extends LightningElement {
     }
 
     private dropdownToggle(e: any) {
-        e.currentTarget.parentElement
-            .querySelector(".nested")
-            .classList.toggle("active");
+        (
+            e.currentTarget.parentElement.querySelector(".nested") ||
+            e.currentTarget.parentElement.parentElement.querySelector(".nested")
+        ).classList.toggle("active");
 
         e.currentTarget.querySelector("svg").classList.toggle("caret-down");
     }

package/src/modules/dx/footer/footer.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
+import { FooterVariant, OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
-import { FooterVariant, Option } from "typings/custom";
 import {
     generalLinks,
     termsLinks,
@@ -31,7 +31,7 @@ export default class Footer extends LightningElement {
         this._locales = toJson(value);
     }
 
-    private _locales?: Option[] | null = null;
+    private _locales?: OptionWithLink[] | null = null;
     private termsLinks = termsLinks;
     private generalLinks = generalLinks;
     private socialLinks = socialLinks;

package/src/modules/dx/grid/grid.ts

@@ -67,6 +67,8 @@ export default class Grid extends LightningElement {
     }
 
     onSlotChange(e: Event) {
-        this._itemCount = (e.target as LightningSlotElement).assignedElements().length;
+        this._itemCount = (
+            e.target as LightningSlotElement
+        ).assignedElements().length;
     }
 }

package/src/modules/dx/header/header.html

@@ -26,6 +26,7 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
+                <dx-avatar-button></dx-avatar-button>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
                         aria-label="Sign Up For Salesforce Developer Edition"

package/src/modules/dx/header/header.ts

@@ -1,10 +1,10 @@
 import { api } from "lwc";
+import type { OptionWithNested } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
-import type { Option } from "typings/custom";
 
 export default class Header extends HeaderBase {
-    private _breadcrumbs!: Option[];
+    private _breadcrumbs!: OptionWithNested[];
 
     @api
     get breadcrumbs() {

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
+import { OptionWithNested } from "typings/custom";
 import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
@@ -9,7 +9,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
     @api pathname: string | null = null;
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
     get navItems() {
@@ -24,7 +24,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         // then we use deepmapper to affect the actual root options (actual links)
         return deepmapOptions(
             navItems,
-            (app: Option, index: number, level: number) => {
+            (app: OptionWithNested, index: number, level: number) => {
                 const active = app.link
                     ? app.link.href === this.pathname
                     : false;
@@ -47,7 +47,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         );
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
     private navElement: HTMLElement | null = null;
     private wasOpen: boolean = false;
     private showScrollShadow: boolean = false;

package/src/modules/dx/headerNav/headerNav.ts

@@ -1,18 +1,18 @@
 import { LightningElement, api } from "lwc";
-import { TabVariant, Option } from "typings/custom";
+import { TabVariant, OptionWithNested } from "typings/custom";
 export default class HeaderNav extends LightningElement {
     @api pathname: string | null = null;
     @api variant: TabVariant = "default";
     @api ariaLabel: string = "Primary Navigation";
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
 
     get navItems() {
         const activeItem = this._navItems
-            .filter((navItem: Option) => {
+            .filter((navItem: OptionWithNested) => {
                 if (!navItem.link || navItem.link.href === "/") {
                     return false;
                 }
@@ -31,7 +31,7 @@ export default class HeaderNav extends LightningElement {
                     (b.link?.href.length || 0) - (a.link?.href.length || 0)
             )[0];
 
-        const items = this._navItems.map((navItem: Option) =>
+        const items = this._navItems.map((navItem: OptionWithNested) =>
             navItem.link
                 ? {
                       ...navItem,
@@ -45,7 +45,7 @@ export default class HeaderNav extends LightningElement {
         return items;
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
 
     private requestOpenNavMenu(e: PointerEvent) {
         const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { PopoverRequestCloseType, Option } from "typings/custom";
+import { PopoverRequestCloseType, OptionWithLink } from "typings/custom";
 import { buildSearchEngine } from "dxUtils/coveo";
 import {
     StandaloneSearchBox as StandaloneSearchBoxType,
@@ -28,7 +28,7 @@ export default class HeaderSearch extends LightningElement {
         return this.mobile ? null : "desktop_search-container";
     }
 
-    private get suggestions(): Option[] {
+    private get suggestions(): OptionWithLink[] {
         if (this.searchState) {
             return this.searchState.suggestions.map(
                 ({ highlightedValue }: { highlightedValue: string }) => ({

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

@@ -3,6 +3,6 @@ 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 imgAlt: string = "Salesforce logo";
     @api label!: string;
 }

package/src/modules/dx/select/select.css

@@ -1,5 +1,3 @@
-@import "dxHelpers/slds";
-
 :host {
     display: block;
 }
@@ -8,7 +6,7 @@
     outline: none;
 }
 
-.slds-select_container::before {
+.select_container::before {
     --icon-size: 0.5em;
 
     border-style: solid;
@@ -24,21 +22,196 @@
     width: var(--icon-size);
 }
 
-.placeholder {
+.select-element_placeholder {
     color: var(--sds-g-gray-9);
 }
 
-select.slds-select:focus:not([disabled]),
-select.slds-select:active:not([disabled]) {
+select.select-element:focus:not([disabled]),
+select.select-element:active:not([disabled]) {
     border-width: 2px;
     border-color: var(--dx-g-blue-vibrant-50);
     box-shadow: none;
     -webkit-box-shadow: none;
 }
 
-:host(.slds-has-error) select.slds-select:focus,
-:host(.slds-has-error) select.slds-select:active {
+.has-error select.select-element:focus,
+.has-error select.select-element:active {
     border-color: #ea001e;
     box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
     -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
 }
+
+@media (min-width: 48em) {
+    .form-element_horizontal .form-element_control {
+        padding-left: 33%;
+        clear: none;
+    }
+}
+
+abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none;
+    cursor: help;
+}
+
+abbr[title]::after {
+    content: " (" attr(title) ")";
+}
+
+abbr[title],
+fieldset,
+hr {
+    border: 0;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+.form-element_control {
+    clear: left;
+    position: relative;
+}
+
+.form-element_label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    display: inline-block;
+    color: #3e3e3c;
+    font-size: 0.75rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    margin-bottom: 0.125rem;
+}
+
+.form-element_label:empty {
+    margin: 0;
+}
+
+.form-element_stacked .form-element_label,
+.form-element_stacked .form-element_control {
+    border-bottom: 0;
+    padding-left: 0;
+}
+
+.form-element_stacked .form-element_control {
+    width: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    clear: left;
+}
+
+.assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}
+
+.required-element {
+    color: #ea001e;
+    margin: 0 0.125rem;
+}
+
+.select-element {
+    height: calc(1.875rem + (1px * 2));
+    width: 100%;
+    border: 1px solid #dddbda;
+    border-radius: 0.25rem;
+    background-color: white;
+    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
+    transition: border 0.1s linear, background-color 0.1s linear;
+}
+
+.select-element:focus,
+.select-element:active {
+    outline: 0;
+    border-color: #1b96ff;
+    background-color:white;
+    -webkit-box-shadow: 0 0 3px #0176d3;
+    box-shadow: 0 0 3px #0176d3;
+}
+
+.select-element[disabled],
+.select-element.slds-is-disabled {
+    background-color: #ecebea;
+    border-color: #c9c7c5;
+    color: #3e3e3c;
+    cursor: not-allowed;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    opacity: 1;
+}
+
+.select-element[disabled]:focus,
+.select-element[disabled]:active,
+.select-element.slds-is-disabled:focus,
+.select-element.slds-is-disabled:active {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.select-element[size] {
+    min-height: calc(1.875rem + (1px * 2));
+    height: inherit;
+}
+
+.select-element[size] option {
+    padding: 0.5rem;
+}
+
+.has-error .select-element {
+    border-color: #ea001e;
+    -webkit-box-shadow: #ea001e 0 0 0 1px inset;
+    box-shadow: #ea001e 0 0 0 1px inset;
+    background-clip: padding-box;
+}
+
+.select_container {
+    position: relative;
+}
+
+.select_container .select-element {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    padding-left: 0.5rem;
+    padding-right: 1.5rem;
+}
+
+.select_container .select-element::-ms-expand {
+    display: none;
+}
+
+.has-error .select-element:focus,
+.has-error .select-element:active {
+    -webkit-box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+    box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+}
+
+.form-element:not(.has-error) .select-element:required {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.form-element_help,
+.form-element_helper {
+    font-size: 0.75rem;
+    margin-top: 0.125rem;
+    display: block;
+}
+
+.has-error .form-element_help {
+    color: #ea001e;
+}