@salesforcedevs/dx-components 0.45.0-alpha3 → 0.46.0-tree-loading

package/lwc.config.json

@@ -12,7 +12,6 @@
         "dx/cardDocs",
         "dx/cardEvent",
         "dx/cardExpanded",
-        "dx/cardGridDocs",
         "dx/cardMinimal",
         "dx/cardNews",
         "dx/cardPodcastEpisode",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.45.0-alpha3",
+    "version": "0.46.0-tree-loading",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/assets/svg/sidebar-item-loading.svg

@@ -0,0 +1,9 @@
+<svg width="100%" height="128" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_581_15739" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="16" y="8" width="267" height="112">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 8C19.5817 8 16 11.5817 16 16C16 20.4183 19.5817 24 24 24H252C256.418 24 260 20.4183 260 16C260 11.5817 256.418 8 252 8H24ZM24 40C19.5817 40 16 43.5817 16 48C16 52.4183 19.5817 56 24 56H213C217.418 56 221 52.4183 221 48C221 43.5817 217.418 40 213 40H24ZM16 80C16 75.5817 19.5817 72 24 72H275C279.418 72 283 75.5817 283 80C283 84.4183 279.418 88 275 88H24C19.5817 88 16 84.4183 16 80ZM24 104C19.5817 104 16 107.582 16 112C16 116.418 19.5817 120 24 120H175C179.418 120 183 116.418 183 112C183 107.582 179.418 104 175 104H24Z" fill="#E5E5E5"/>
+    </mask>
+    <g mask="url(#mask0_581_15739)">
+        <rect width="100%" height="128" fill="#E5E5E5"/>
+    </g>
+</svg>

package/src/modules/dx/button/button.css

@@ -116,7 +116,8 @@
     border: 1px solid var(--dx-c-button-primary-color);
 }
 
-.button.variant_primary:hover {
+.button.variant_primary:hover,
+:host([aria-expanded="true"]) .button.variant_primary {
     background: var(--dx-c-button-primary-color-hover);
     border-color: var(--dx-c-button-primary-color-hover);
 }
@@ -129,7 +130,8 @@
     border: 1px solid var(--dx-c-button-primary-color);
 }
 
-.button.variant_secondary:hover {
+.button.variant_secondary:hover,
+:host([aria-expanded="true"]) .button.variant_secondary {
     background: var(--dx-c-button-secondary-color-hover);
 }
 
@@ -146,7 +148,8 @@
     color: white;
 }
 
-.button.variant_tertiary:hover {
+.button.variant_tertiary:hover,
+:host([aria-expanded="true"]) .button.variant_tertiary {
     background: var(--dx-c-button-secondary-color-hover);
     border-color: var(--dx-c-button-secondary-color-hover);
 }
@@ -161,7 +164,9 @@
 }
 
 .button.variant_inline:hover,
-.button.variant_inline-inherit:hover {
+.button.variant_inline-inherit:hover,
+:host([aria-expanded="true"])
+    :is(.button.variant_inline, .button.variant_inline-inherit) {
     color: var(--dx-c-button-inline-color-hover);
 }
 
@@ -176,7 +181,8 @@
     border: 1px solid var(--dx-c-button-custom-border);
 }
 
-.button.variant_custom:hover {
+.button.variant_custom:hover,
+:host([aria-expanded="true"]) .button.variant_custom {
     color: var(--dx-c-button-custom-color-hover);
     background: var(--dx-c-button-custom-background-hover);
     border-color: var(--dx-c-button-custom-border-hover);

package/src/modules/dx/{cardGridDocs/cardGridDocs.css → cardGrid/cardGrid.css}

@@ -16,15 +16,27 @@
     display: flex;
 }
 
+.filter-checkbox-group,
+.filter-button::part(container) {
+    --dx-c-checkbox-text-transform: capitalize;
+
+    text-transform: var(--dx-c-checkbox-text-transform);
+}
+
 .docs-action-bar .filters-container > *:not(:first-child),
-dx-search-input {
+.docs-search-input {
     margin-left: var(--dx-g-spacing-sm);
 }
 
-dx-search-input {
+.docs-search-input {
     --dx-c-input-width: 285px;
 }
 
+.docs-card {
+    --dx-c-body-max-lines: 4;
+    --dx-c-heading-max-lines: 2;
+}
+
 .pagination-container {
     max-width: fit-content;
     max-width: -moz-fit-content;
@@ -44,7 +56,7 @@ dx-search-input {
         padding: 0;
     }
 
-    dx-search-input {
+    .docs-search-input {
         --dx-c-input-width: 100%;
 
         width: 100%;

package/src/modules/dx/cardGrid/cardGrid.html

@@ -0,0 +1,46 @@
+<template>
+    <div class="card-grid">
+        <div class="docs-action-bar">
+            <div class="records-container">
+                <span if:true={endingRecord}>
+                    Showing { startingRecord } to { endingRecord } of {
+                    cards.length }
+                </span>
+            </div>
+            <div class="filters-container">
+                <slot name="filters"></slot>
+            </div>
+            <dx-input
+                size="small"
+                placeholder="Search..."
+                icon-symbol="search"
+                shortcut-key="j"
+                class="docs-search-input"
+                onchange={handleSearchChange}
+                value={searchTerm}
+            ></dx-input>
+        </div>
+        <dx-grid
+            columns={tileColumns}
+            if:false={showEmptyState}
+            class="card-container"
+        ></dx-grid>
+        <div style="display: none">
+            <slot name="cards" onslotchange={onSlotChange}></slot>
+        </div>
+        <div class="pagination-container" if:false={showEmptyState}>
+            <dx-pagination
+                current-page={page}
+                total-pages={totalPages}
+                pages-to-show={pagesToShow}
+                onpagechange={goToPage}
+                if:false={hidePagination}
+            ></dx-pagination>
+        </div>
+    </div>
+    <dx-empty-state
+        title="Beep boop. That did not compute."
+        subtitle={emptyStateSubtitle}
+        if:true={showEmptyState}
+    ></dx-empty-state>
+</template>

package/src/modules/dx/cardGrid/cardGrid.ts

@@ -0,0 +1,140 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardGrid extends LightningElement {
+    @api pageSize = 24;
+    @api searchDebounce = 500;
+    page = 1;
+
+    private searchTerm = "";
+    private matchDesktop!: MediaQueryList;
+    private matchMobile!: MediaQueryList;
+    private matchMobileSmall!: MediaQueryList;
+    private deviceType: "desktop" | "mobile" | "mobile-small" = "desktop";
+    private searchTimeout?: number;
+    private cards: any[] = [];
+
+    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.cards.length
+            ? this.cards.length
+            : defaultEndingRecord;
+    }
+
+    private get totalPages() {
+        return Math.ceil(this.cards.length / this.pageSize);
+    }
+
+    private get hidePagination() {
+        return this.totalPages < 2;
+    }
+
+    private get emptyStateSubtitle() {
+        return (
+            "No results" +
+            (this.searchTerm !== "" ? ` for "${this.searchTerm}"` : "")
+        );
+    }
+
+    private get showEmptyState() {
+        return !this.cards.length;
+    }
+
+    private get tileColumns() {
+        return this.deviceType === "desktop" ? "three" : "two";
+    }
+
+    private get pagesToShow() {
+        return this.deviceType === "mobile-small" ? 3 : 5;
+    }
+
+    connectedCallback(): void {
+        this.matchDesktop = window.matchMedia("(min-width: 1024px)");
+        this.matchDesktop.addEventListener("change", this.handleDesktopView);
+
+        this.matchMobile = window.matchMedia(
+            "(min-width: 401px) and (max-width: 1023px)"
+        );
+        this.matchMobile.addEventListener("change", this.handleMobileView);
+
+        this.matchMobileSmall = window.matchMedia("(max-width: 340px)");
+        this.matchMobileSmall.addEventListener(
+            "change",
+            this.handleMobileSmallView
+        );
+
+        if (this.matchMobile.matches) {
+            this.deviceType = "mobile";
+        }
+        if (this.matchMobileSmall.matches) {
+            this.deviceType = "mobile-small";
+        }
+    }
+
+    disconnectedCallback(): void {
+        this.matchDesktop.removeEventListener("change", this.handleDesktopView);
+        this.matchMobile.removeEventListener("change", this.handleMobileView);
+        this.matchMobileSmall.removeEventListener(
+            "change",
+            this.handleMobileSmallView
+        );
+    }
+
+    renderedCallback(): void {
+        this.displayCurrentPage();
+    }
+
+    onSlotChange() {
+        const slots = Array.from(
+            this.template.querySelectorAll("slot")
+        ) as HTMLSlotElement[];
+        this.cards = Array.from(slots[1].assignedElements()[0].children);
+    }
+
+    handleDesktopView = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (e.matches) {
+            this.deviceType = "desktop";
+        }
+    };
+
+    handleMobileView = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (e.matches) {
+            this.deviceType = "mobile";
+        }
+    };
+
+    handleMobileSmallView = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (e.matches) {
+            this.deviceType = "mobile-small";
+        }
+    };
+
+    handleSearchChange(event: InputEvent): void {
+        window.clearTimeout(this.searchTimeout);
+        this.searchTimeout = window.setTimeout(() => {
+            this.dispatchEvent(
+                new CustomEvent("searchchange", { detail: event.detail })
+            );
+        }, this.searchDebounce);
+    }
+
+    goToPage(e: CustomEvent) {
+        this.page = e.detail;
+        this.displayCurrentPage();
+    }
+
+    displayCurrentPage() {
+        const cardContainer = this.template.querySelector(".card-container");
+        if (cardContainer) {
+            cardContainer.innerHTML = "";
+            this.cards
+                .slice(this.startingRecord - 1, this.endingRecord)
+                .map((node) => cardContainer?.appendChild(node));
+        }
+    }
+}

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

@@ -67,8 +67,6 @@ 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/sidebar/sidebar.ts

@@ -145,7 +145,7 @@ export default class Sidebar extends SidebarBase {
     }
 
     renderedCallback() {
-        super.renderedCallback()
+        super.renderedCallback();
         this.initializeSearchScrollPosition();
     }
 
@@ -160,7 +160,7 @@ export default class Sidebar extends SidebarBase {
     }
 
     disconnectedCallback() {
-        super.disconnectedCallback()
+        super.disconnectedCallback();
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -49,7 +49,10 @@
                     ></dx-input>
                 </div>
             </div>
-            <div class="sidebar-content sidebar-content-tree" if:true={anyResultMatch}>
+            <div
+                class="sidebar-content sidebar-content-tree"
+                if:true={anyResultMatch}
+            >
                 <dx-tree
                     for:each={filteredTrees}
                     for:item="tree"

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -86,7 +86,7 @@ export default class Sidebar extends SidebarBase {
     }
 
     disconnectedCallback() {
-        super.disconnectedCallback()
+        super.disconnectedCallback();
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
@@ -160,8 +160,9 @@ export default class Sidebar extends SidebarBase {
         valuePattern: RegExp,
         node: TreeNode
     ): TreeNode | undefined {
+        const isExpanded = node.isChildrenLoading ? false : true;
         if (valuePattern.test(node.label.toLowerCase())) {
-            return { ...node, isExpanded: true };
+            return { ...node, isExpanded };
         }
 
         const filteredChildren = this.filterChildren(
@@ -169,7 +170,7 @@ export default class Sidebar extends SidebarBase {
             node.children
         );
         return filteredChildren.length > 0
-            ? { ...node, children: filteredChildren, isExpanded: true }
+            ? { ...node, children: filteredChildren, isExpanded }
             : undefined;
     }
 

package/src/modules/dx/tree/treeHandler.ts

@@ -62,6 +62,7 @@ export class TreeHandler {
             ),
             level: level,
             isExpanded: node.isExpanded || false,
+            isChildrenLoading: node.isChildrenLoading || false,
             link: node.link,
             method: node.method
         };

package/src/modules/dx/treeItem/treeItem.css

@@ -12,3 +12,9 @@ button {
 button:focus {
     outline-offset: -1px;
 }
+
+@media (max-width: 768px) {
+    .tree-children-loading {
+        width: 100%;
+    }
+}

package/src/modules/dx/treeItem/treeItem.html

@@ -8,8 +8,16 @@
             has-children={hasChildren}
             is-selected={isSelected}
             oniconclick={onIconClick}
+            show-arrow={showArrow}
         ></dx-tree-tile>
     </a>
+    <!-- TODO: Need to change the loading svg or change it to animated component-->
+    <img
+        if:true={showChildrenLoading}
+        class="tree-children-loading"
+        src="/assets/svg/sidebar-item-loading.svg"
+        alt="childrenLoading"
+    />
     <template if:true={showChildren}>
         <template for:each={treeNode.children} for:item="child">
             <dx-tree-item

package/src/modules/dx/treeItem/treeItem.ts

@@ -18,10 +18,12 @@ export default class TreeItem extends LightningElement {
     public set treeNode(node) {
         this._treeNode = node;
         this.isExpanded = (node && node.isExpanded) || false;
+        this.isChildrenLoading = (node && node.isChildrenLoading) || false;
     }
 
     private _treeNode!: InternalTreeNode;
     private isExpanded: boolean = false;
+    private isChildrenLoading: boolean = false;
 
     private get isSelected(): boolean {
         return this._treeNode.key === this.selectedKey;
@@ -35,6 +37,14 @@ export default class TreeItem extends LightningElement {
         );
     }
 
+    private get showChildrenLoading(): boolean {
+        return this.isExpanded && this.isChildrenLoading;
+    }
+
+    private get showArrow(): boolean {
+        return this.hasChildren || this.isChildrenLoading;
+    }
+
     private get showChildren(): boolean {
         return this.isExpanded && this.hasChildren;
     }

package/src/modules/dx/treeTile/treeTile.html

@@ -7,7 +7,7 @@
             >
                 {treeNode.label}
             </span>
-            <div class="flex tile-expand-icon tile-icon" if:true={hasChildren}>
+            <div class="flex tile-expand-icon tile-icon" if:true={showArrow}>
                 <dx-icon
                     aria-expanded={isExpanded}
                     size={iconSize}

package/src/modules/dx/treeTile/treeTile.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { InternalTreeNode } from "typings/custom";
+import { normalizeBoolean } from "utils/normalizers";
 
 const methodTextMap: {
     [key: string]: string;
@@ -24,6 +25,17 @@ export default class TreeTile extends LightningElement {
         return this.treeNode.level + 2;
     }
 
+    private _showArrow = false;
+
+    @api
+    get showArrow() {
+        return this._showArrow;
+    }
+
+    set showArrow(value) {
+        this._showArrow = normalizeBoolean(value);
+    }
+
     private get iconSize() {
         return this.isRoot ? "small" : "xsmall";
     }

package/src/modules/dx/cardGridDocs/cardGridDocs.html

@@ -1,67 +0,0 @@
-<template>
-    <div class="card-grid">
-        <div class="docs-action-bar">
-            <div class="records-container">
-                <span if:true={endingRecord}>
-                    Showing { startingRecord } to { endingRecord } of {
-                    cards.length }
-                </span>
-            </div>
-            <div class="filters-container">
-                <slot name="filters"></slot>
-            </div>
-            <dx-input
-                size="small"
-                placeholder="Search..."
-                icon-symbol="search"
-                shortcut-key="j"
-                class="docs-search-input"
-                onchange={onSearchChange}
-                value={value}
-            ></dx-input>
-        </div>
-        <dx-grid columns="four">
-            <template for:each={currentPageCards} for:item="card">
-                <dx-card-docs
-                    key={card.title}
-                    body={card.body}
-                    href={card.href}
-                    img-alt={card.imgAlt}
-                    img-src={card.imgSrc}
-                    label={card.label}
-                    title={card.title}
-                    target={card.target}
-                    show-mobile-img={card.showMobileImg}
-                >
-                    <template
-                        if:true={card.links}
-                        for:each={card.links}
-                        for:item="link"
-                    >
-                        <dx-button
-                            key={link.title}
-                            href={link.href}
-                            variant="inline"
-                        >
-                            { link.title }
-                        </dx-button>
-                    </template>
-                </dx-card-docs>
-            </template>
-        </dx-grid>
-        <div class="pagination-container" if:false={showEmptyState}>
-            <dx-pagination
-                current-page={page}
-                total-pages={totalPages}
-                pages-to-show="5"
-                onpagechange={goToPage}
-                if:false={hidePagination}
-            ></dx-pagination>
-        </div>
-    </div>
-    <dx-empty-state
-        title="Beep boop. That did not compute."
-        subtitle={emptyStateSubtitle}
-        if:true={showEmptyState}
-    ></dx-empty-state>
-</template>

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

@@ -1,73 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-import { toJson } from "utils/normalizers";
-import { DocsCard } from "typings/custom";
-
-export default class CardGridDocs extends LightningElement {
-    @api pageSize = 24;
-    @api
-    get cards(): DocsCard[] {
-        return this.value
-            ? this._cards.filter((card: DocsCard) =>
-                  Object.values(card).some(
-                      (val) =>
-                          typeof val === "string" &&
-                          val.includes(this.value || "")
-                  )
-              )
-            : this._cards;
-    }
-    set cards(value) {
-        this._cards = toJson(value);
-    }
-
-    private page: number = 1;
-    private _cards: DocsCard[] = [];
-    @track
-    private value?: string;
-
-    private get currentPageCards() {
-        return this.cards.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.cards.length
-            ? this.cards.length
-            : defaultEndingRecord;
-    }
-
-    private get totalPages() {
-        return Math.ceil(this.cards.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.cards.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;
-    }
-}