@salesforcedevs/dx-components 0.50.0 → 0.53.0

package/lwc.config.json

@@ -78,7 +78,6 @@
         "dx/typeBadge",
         "dx/typeBadgeGroup",
         "dx/toc",
-        "dx/prismjs",
         "dx/vimeoPlayer",
         "helpers/animations",
         "helpers/card",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.50.0",
+    "version": "0.53.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -27,6 +27,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
-    },
-    "gitHead": "5a96beba6d612129769dc371af08b2489bee1933"
+    }
 }

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/codeBlock/codeBlock.ts

@@ -43,7 +43,9 @@ export default class CodeBlock extends LightningElement {
         { label: "xml", id: "xml" },
         { label: "TypeScript", id: "typescript" },
         { label: "PHP", id: "php" },
-        { label: "JSON", id: "json" }
+        { label: "JSON", id: "json" },
+        { label: "Swift", id: "swift" },
+        { label: "Kotlin", id: "kotlin" }
     ];
 
     connectedCallback() {

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -231,7 +231,7 @@
 /* Z INDEX STUFF */
 
 .label,
-.main-content,
+.featured-content-main-content,
 .image-container {
     position: relative;
     z-index: var(--swoop-z-index);
@@ -269,12 +269,12 @@ a.image-container > img {
 
 /* MAIN CONTENT AREA */
 
-.main-content {
+.featured-content-main-content {
     grid-area: main;
     max-width: var(--dx-c-featured-content-main-content-max-width);
 }
 
-.main-content > * {
+.featured-content-main-content > * {
     z-index: 10;
 }
 

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -8,7 +8,7 @@
         >
             {label}
         </div>
-        <div class="main-content">
+        <div class="featured-content-main-content">
             <div
                 role="heading"
                 aria-level={titleAriaLevel}

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

@@ -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,15 @@
             has-children={hasChildren}
             is-selected={isSelected}
             oniconclick={onIconClick}
+            show-arrow={isParent}
         ></dx-tree-tile>
     </a>
+    <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.hasChildren && this.isChildrenLoading;
+    }
+
+    private get isParent(): boolean {
+        return this.hasChildren || this.isChildrenLoading;
+    }
+
     private get showChildren(): boolean {
         return this.isExpanded && this.hasChildren;
     }
@@ -55,7 +65,7 @@ export default class TreeItem extends LightningElement {
     }
 
     connectedCallback(): void {
-        if (this.hasChildren) {
+        if (this.isParent) {
             this.fireEvent("register", {
                 setExpanded: this.setExpanded.bind(this)
             });
@@ -92,7 +102,7 @@ export default class TreeItem extends LightningElement {
             event.preventDefault();
         }
 
-        if (this.hasChildren) {
+        if (this.isParent) {
             const isSelectAction = true;
             this.doExpand(isSelectAction);
         }

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

@@ -19,6 +19,7 @@ export default class TreeTile extends LightningElement {
     @api hasChildren = false;
     @api isSelected = false;
     @api href!: string;
+    @api showArrow = false;
 
     get tileAriaLevel() {
         return this.treeNode.level + 2;