@salesforcedevs/dx-components 1.3.241-ux-alpha1 → 1.3.242-alpha2

package/lwc.config.json

@@ -78,7 +78,6 @@
         "dx/select",
         "dx/sidebar",
         "dx/sidebarOld",
-        "dx/sidebarFooterNav",
         "dx/skipNavLink",
         "dx/socials",
         "dx/spinner",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.241-ux-alpha1",
+    "version": "1.3.242-alpha2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/assets/icons/salesforcebrand-sprite/svg/symbols.svg

@@ -272,7 +272,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="data-cloud" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" style="fill:#fff">
+    <symbol id="data" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" style="fill:#fff">
         <defs>
         <style>.acls-2,.acls-4{stroke-width:0}.acls-2{fill:#8a8ed1}.acls-4{fill:#fff}</style>
         </defs>
@@ -927,7 +927,7 @@
         </clipPath>
         </defs>
     </symbol>
-    <symbol fill="none" id="data-cloud" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">
+    <symbol fill="none" id="data" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">
         <path fill="#8a8ed1" d="m28,4C14.77,4,4,14.77,4,28c0,7.9,3.84,14.93,9.76,19.3.7-4.58,3.55-8.46,7.5-10.56-2.61-2.02-4.29-5.17-4.29-8.71,0-6.08,4.95-11.03,11.03-11.03s11.03,4.95,11.03,11.03c0,3.54-1.69,6.69-4.29,8.71,3.95,2.1,6.8,5.98,7.5,10.56,5.92-4.37,9.77-11.4,9.77-19.31,0-13.23-10.77-24-24-24Z"/>
         <path fill="#8a8ed1" d="m11.07,18.3c.69-1.2,2.21-1.61,3.41-.92,1.2.68,1.61,2.21.93,3.41h0c-.46.81-1.3,1.26-2.17,1.26-.42,0-.85-.11-1.24-.34-1.2-.68-1.61-2.21-.92-3.41Z"/>
         <path fill="#8a8ed1" d="m8.49,28.06c0-1.38,1.11-2.5,2.49-2.51,1.38,0,2.51,1.11,2.51,2.5s-1.11,2.5-2.49,2.5h-.01c-1.38,0-2.5-1.11-2.5-2.49Z"/>

package/src/modules/dx/codeBlock/codeBlock.html

@@ -11,7 +11,7 @@
                     <div class="toolbar-item">
                         <dx-dropdown
                             small="true"
-                            options={allLanguages}
+                            options={supportedLanguages}
                             value={selectedLanguageId}
                             onchange={onLanguageChange}
                         >

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -44,11 +44,12 @@ export default class CodeBlock extends LightningElement {
     @api language: string = "";
     // if it is true, it renders code as is coming instead of wrapping it into html/xml comments tags.
     @api isEncoded = false;
+    @api showLanguageDropdown!: boolean;
+    private codeWithLanguages: { id: string; value: string }[] = [];
 
     private markupLangs = ["visualforce", "html", "xml"];
     private _codeBlockRendered: boolean = false;
     private componentLoaded: boolean = false;
-    private showLanguageDropdown: boolean = false;
     private copyBtnText: string = "Click to copy";
     private selectedLanguageLabel: string = "";
     private selectedLanguageId: string = "";
@@ -98,17 +99,62 @@ export default class CodeBlock extends LightningElement {
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
         let match;
-        this._codeBlock = (
-            (match = preTagRegexp.exec(value.trim())) === null
-                ? value.trim()
-                : match[1]
-        ).trim();
+        if (this.showLanguageDropdown) {
+            let selectedLangBasedCode = "";
+            try {
+                const parsedValue = value && JSON.parse(value);
+                this.codeWithLanguages = parsedValue;
+                if (typeof parsedValue === "object" && parsedValue !== null) {
+                    this.selectedLanguageId = this.language;
+                    if (this.selectedLanguageId) {
+                        const selectedCode = this.codeWithLanguages.filter(
+                            (obj) => obj.id === this.selectedLanguageId
+                        );
+                        if (selectedCode.length > 0) {
+                            selectedLangBasedCode = selectedCode[0].value;
+                        }
+                    }
+                    const supportedLanguages = parsedValue.map(
+                        (obj: { id: string }) => obj.id
+                    );
+                    this._supportedLanguages = this.allLanguages.filter(
+                        (lang) => supportedLanguages.includes(lang.id)
+                    );
+                }
+            } catch (error) {
+                //console.log('Value is not a valid JSON string:', value);
+            }
+            this._codeBlock = (
+                (match = preTagRegexp.exec(selectedLangBasedCode.trim())) ===
+                null
+                    ? selectedLangBasedCode.trim()
+                    : match[1]
+            ).trim();
+        } else {
+            this._codeBlock = (
+                (match = preTagRegexp.exec(value.trim())) === null
+                    ? value.trim()
+                    : match[1]
+            ).trim();
+        }
     }
 
     get codeBlock(): string {
         return this._codeBlock;
     }
 
+    _supportedLanguages: CodeBlockLanguage[] = [];
+    @api
+    get supportedLanguages(): CodeBlockLanguage[] {
+        return this._supportedLanguages;
+    }
+    set supportedLanguages(value: string) {
+        const codeblockSupportedLanguages = JSON.parse(value);
+        this._supportedLanguages = this.allLanguages.filter((lang) =>
+            codeblockSupportedLanguages.includes(lang.id)
+        );
+    }
+
     @track private theme: CodeBlockTheme | null = null;
 
     @wire(getLocalStorageData, { key: "dx-codeblock-theme" })
@@ -223,6 +269,14 @@ export default class CodeBlock extends LightningElement {
             ) || this.allLanguages[0];
         this.selectedLanguageLabel = this.selectedLanguage.label;
         this.selectedLanguageId = this.selectedLanguage.id;
+        if (this.showLanguageDropdown) {
+            const selectedCode = this.codeWithLanguages.filter(
+                (codeObj) => codeObj.id === this.selectedLanguageId
+            );
+            if (selectedCode.length > 0) {
+                this._codeBlock = selectedCode[0].value;
+            }
+        }
         this.formatCodeBlock();
 
         gtmTrack(newLang, "custEv_ctaLinkClick", {

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

@@ -38,7 +38,7 @@
 }
 
 .option:active {
-    background: var(--dx-g-cloud-blue-vibrant-95) !important;
+    background: var(--dx-g-blue-vibrant-95) !important;
 }
 
 .option:not(.option-active):hover {
@@ -46,9 +46,7 @@
 }
 
 .option-active {
-    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
-
-    background: var(--dx-g-cloud-blue-vibrant-95);
+    background: var(--dx-g-blue-vibrant-95);
 }
 
 .option_details {
@@ -69,7 +67,7 @@
     color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
     display: flex;
     align-items: center;
-    font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
+    font-weight: var(--dx-g-font-bold);
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
 }
 

package/src/modules/dx/popover/popover.css

@@ -28,7 +28,7 @@
     max-height: 65vh;
     padding: var(--popover-padding);
     overflow-y: auto;
-    transition: var(--popover-transition);
+    transition: opacity 0.2s linear, transform 0.2s linear;
     transition-delay: 0.02s;
     transform: translateY(var(--dx-g-spacing-xs));
     opacity: 0;
@@ -41,7 +41,7 @@
 
 .popover-container_open .popover {
     opacity: 1;
-    transform: var(--popover-container-open-transform);
+    transform: translateY(0);
 }
 
 .popover-overridewidth {

package/src/modules/dx/searchResults/coveo.css

@@ -7944,7 +7944,7 @@ select.coveo-dropdown::-ms-expand {
 
 @font-face {
   font-family: "Lato";
-  src: url('https://static.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff'), url('../fonts/lato.woff');
+  src: url('https://static.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff'), url('../fonts/lato.woff');
   font-weight: normal;
   font-style: normal;
 }

package/src/modules/dx/sidebar/sidebar.css

@@ -15,7 +15,7 @@ dx-empty-state {
 
 .sidebar-content {
     overflow-y: auto;
-    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-md);
+    padding-bottom: var(--dx-g-spacing-md);
 }
 
 .loading-skeleton {
@@ -53,13 +53,6 @@ dx-empty-state {
     --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
 }
 
-.results-heading {
-    --dx-g-text-body-color: var(--sds-g-gray-14);
-
-    margin-bottom: var(--dx-g-spacing-sm);
-    font-weight: var(--dx-g-font-bold);
-}
-
 @media (max-width: 768px) {
     :host {
         width: 100%;
@@ -68,4 +61,8 @@ dx-empty-state {
     .loading-skeleton {
         width: 100%;
     }
+
+    .sidebar-content-tree {
+        padding: 0 var(--dx-g-spacing-sm);
+    }
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -22,10 +22,7 @@
             </div>
         </div>
 
-        <div
-            class="sidebar-header padding-horizontal"
-            show-shadow={showBoxShadow}
-        >
+        <div class="sidebar-header padding-horizontal">
             <div class="header" if:false={mobile}>
                 <h2 class="dx-text-display-6 header-title">{header}</h2>
                 <slot name="header"></slot>
@@ -45,7 +42,7 @@
                 ></dx-sidebar-search>
             </div>
             <h2
-                class="results-heading dx-text-body-3"
+                class="results-heading dx-text-display-8"
                 if:true={showResultsHeading}
             >
                 Results
@@ -86,7 +83,7 @@
                 size="small"
             ></dx-empty-state>
         </div>
-        <div class={sidebarContentClass} onscroll={handleScroll}>
+        <div class="sidebar-content sidebar-content-tree">
             <dx-tree
                 for:each={trees}
                 for:item="tree"
@@ -98,27 +95,5 @@
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
-
-        <template if:false={mobile}>
-            <div if:true={hasSidebarFooter} class="footer-nav">
-                <dx-sidebar-footer-nav
-                    lang-value-path={langValuePath}
-                    language={language}
-                    languages={languages}
-                    bail-href={bailHref}
-                    bail-label={bailLabel}
-                ></dx-sidebar-footer-nav>
-            </div>
-        </template>
-
-        <template if:true={mobile}>
-            <div if:true={hasMobileSidebarFooter} class="footer-nav">
-                <dx-sidebar-footer-nav
-                    lang-value-path={langValuePath}
-                    language={language}
-                    languages={languages}
-                ></dx-sidebar-footer-nav>
-            </div>
-        </template>
     </div>
 </template>

package/src/modules/dx/sidebar/sidebar.ts

@@ -15,6 +15,15 @@ export default class Sidebar extends SidebarBase {
     @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
 
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+    }
+
     @api
     get trees() {
         return this._trees;
@@ -43,10 +52,16 @@ export default class Sidebar extends SidebarBase {
         )?.setInputValue(searchTerm);
     }
 
+    private expanded: boolean = true;
+    private _value?: string = undefined;
+
     @track
     private _trees!: Array<TreeNode>;
+
+    private mobile: boolean = true;
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
+
     private isSearchLoading: boolean = false;
     private searchValue: string | null = null;
     private searchResults: SidebarSearchResult[] = [];
@@ -156,6 +171,32 @@ export default class Sidebar extends SidebarBase {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+        this.expanded = !this.mobile;
+    };
+
+    private onSelect(event: CustomEvent) {
+        this._value = event.detail.name;
+
+        if (this.mobile) {
+            this.onToggleClick();
+        }
+    }
+
+    private onToggleClick() {
+        this.expanded = !this.expanded;
+        this.dispatchEvent(
+            new CustomEvent("togglesidebar", {
+                detail: {
+                    open: this.expanded,
+                    bubbles: true,
+                    composed: true
+                }
+            })
+        );
+    }
+
     private makeKey(): string {
         return Math.random().toString(36).substring(7);
     }
@@ -175,7 +216,7 @@ export default class Sidebar extends SidebarBase {
         this.isSearchLoading = e.detail;
     }
 
-    private onSidebarSearchContentScroll(scrollEvent) {
+    private onSidebarSearchContentScroll() {
         if (this.isSearchLoading) {
             return;
         }
@@ -192,7 +233,6 @@ export default class Sidebar extends SidebarBase {
             this.requestedFetchMoreResults = true;
             search.fetchMoreResults();
         }
-        this.handleScroll(scrollEvent);
     }
 
     private initializeSearchScrollPosition() {

package/src/modules/dx/sidebarOld/sidebarOld.css

@@ -2,7 +2,6 @@
 
 .sidebar-content {
     overflow-y: auto;
-    padding-top: var(--dx-g-spacing-sm);
 }
 
 dx-empty-state {

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

@@ -23,7 +23,7 @@
         </div>
 
         <template if:true={expanded}>
-            <div class="padding-horizontal" show-shadow={showBoxShadow}>
+            <div class="padding-horizontal">
                 <div class="header" if:false={mobile}>
                     <h2 class="dx-text-display-6 header-title">{header}</h2>
                     <slot name="header"></slot>
@@ -48,9 +48,8 @@
                 </div>
             </div>
             <div
-                class={sidebarContentClass}
+                class="sidebar-content sidebar-content-tree"
                 if:true={anyResultMatch}
-                onscroll={handleScroll}
             >
                 <dx-tree
                     for:each={filteredTrees}
@@ -71,25 +70,6 @@
                 suggestions={emptyStateSuggestions}
                 if:false={anyResultMatch}
             ></dx-empty-state>
-            <div if:true={hasMobileSidebarFooter} class="footer-nav">
-                <dx-sidebar-footer-nav
-                    lang-value-path={langValuePath}
-                    language={language}
-                    languages={languages}
-                ></dx-sidebar-footer-nav>
-            </div>
-        </template>
-
-        <template if:false={mobile}>
-            <div if:true={hasSidebarFooter} class="footer-nav">
-                <dx-sidebar-footer-nav
-                    lang-value-path={langValuePath}
-                    language={language}
-                    languages={languages}
-                    bail-href={bailHref}
-                    bail-label={bailLabel}
-                ></dx-sidebar-footer-nav>
-            </div>
         </template>
     </div>
 </template>

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

@@ -11,6 +11,15 @@ const MOBILE_SIZE_MATCH = "768px";
 export default class Sidebar extends SidebarBase {
     @api header: string = "";
 
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+    }
+
     @api
     get trees() {
         return this._trees;
@@ -28,10 +37,13 @@ export default class Sidebar extends SidebarBase {
         this.assignFilteredTrees();
     }
 
+    private expanded: boolean = true;
     private _searchTimeout?: number;
+    private _value?: string = undefined;
     private _trees!: Array<TreeNode>;
 
     private filteredTrees: Array<{ key: string; tree: TreeNode }> = [];
+    private mobile: boolean = true;
     private searchText: string = "";
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
@@ -89,6 +101,32 @@ export default class Sidebar extends SidebarBase {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+        this.expanded = !this.mobile;
+    };
+
+    private onSelect(event: CustomEvent) {
+        this._value = event.detail.name;
+
+        if (this.mobile) {
+            this.onToggleClick();
+        }
+    }
+
+    private onToggleClick() {
+        this.expanded = !this.expanded;
+        this.dispatchEvent(
+            new CustomEvent("togglesidebar", {
+                detail: {
+                    open: this.expanded,
+                    bubbles: true,
+                    composed: true
+                }
+            })
+        );
+    }
+
     /*
      * Debouncing this method: Do not apply searchText filter as long as this
      * function is being called to avoid running the recursivity logic very often.

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -8,51 +8,29 @@ a {
 }
 
 .sidebar-item {
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
-        var(--dx-g-spacing-smd) var(--dx-g-spacing-2xl);
-}
-
-.sidebar-item:focus-visible {
-    margin: 0 calc(var(--dx-g-spacing-2xs) + 1px);
-    outline: 2px solid var(--dx-g-blue-vibrant-40);
-    border-radius: 2px;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-md);
 }
 
 .search-text {
-    font-size: var(--dx-g-text-sm);
+    font-size: var(--dx-g-text-xs);
     font-family: var(--dx-g-font-sans);
-    line-height: var(--dx-g-text-lg);
-    font-weight: var(--dx-g-font-bold);
+    line-height: 18px;
     overflow-wrap: break-word;
 }
 
 .description {
     -webkit-line-clamp: 3;
     overflow-wrap: break-word;
-
-    --dx-g-text-body-color: var(--dx-g-blue-vibrant-20);
-
-    font-weight: var(--dx-g-font-normal);
 }
 
 .title {
     color: var(--dx-g-text-heading-color);
 }
 
-.title:hover {
-    color: var(--dx-g-blue-vibrant-50);
-}
-
 .bold {
     font-weight: 700;
 }
 
 a > *:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-xs);
-}
-
-@media (max-width: 768px) {
-    .sidebar-item {
-        padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
-    }
+    margin-bottom: 2px;
 }

package/src/modules/dx/tab/tab.css

@@ -11,13 +11,22 @@ a {
     );
 
     position: relative;
-    height: calc(var(--dx-g-spacing-3xl) - 4px);
+    display: flex;
+    align-items: center;
+    height: var(--dx-g-spacing-xl);
+    font-family: var(--dx-g-font-display);
+    white-space: nowrap;
+    color: var(--dx-g-blue-vibrant-20);
+    transition: var(--dx-g-transition-hue-1x);
+    cursor: pointer;
+    outline-offset: -1px;
 }
 
 .nav-list-item_default {
-    padding: calc(var(--dx-g-spacing-sm) + 2px) var(--dx-g-spacing-md);
-    justify-content: center;
-    display: flex;
+    border: 0;
+    border-radius: var(--dx-g-spacing-md);
+    font-size: var(--dx-g-text-sm);
+    padding: 0 var(--horizontal-spacing);
 }
 
 .nav-list-item_small {
@@ -37,6 +46,8 @@ button.nav-list-item_small > dx-icon {
     margin-left: var(--dx-g-spacing-xs);
 }
 
+.nav-list-item_default:hover,
+.nav-list-item_default:active,
 :host([aria-expanded="true"]) button.nav-list-item_default {
     background: var(
         --dx-g-brand-current-button-color-background-inactive,
@@ -65,10 +76,11 @@ button.nav-list-item:active > dx-icon,
 }
 
 .nav-list-item_default.state-active {
-    color: var(--dx-g-blue-vibrant-50);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-base);
-    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
+    background: var(
+        --dx-g-brand-current-button-color-background-active,
+        var(--dx-g-brand-default-button-color-background-active)
+    );
+    color: var(--dx-g-brand-current-color, var(--dx-g-brand-default-color));
 }
 
 @media (max-width: 1160px) {
@@ -88,10 +100,3 @@ button.nav-list-item:active > dx-icon,
         );
     }
 }
-
-@media (max-width: 768px) {
-    .nav-list-item {
-        height: var(--dx-g-spacing-3xl);
-        display: flex;
-    }
-}

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

@@ -14,8 +14,8 @@ button:focus {
 }
 
 .tree-children-loading {
-    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg) var(--dx-g-spacing-md)
-        var(--dx-g-spacing-2xl);
+    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-md) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-md);
 }
 
 @media (max-width: 768px) {