@salesforcedevs/dx-components 1.3.242-alpha2 → 1.3.243-newdocux-alpha5

package/lwc.config.json

@@ -78,6 +78,7 @@
         "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.242-alpha2",
+    "version": "1.3.243-newdocux-alpha5",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/button/button.html

@@ -7,7 +7,7 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
+        <span if:false={loading} part="content">
             <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon
@@ -29,7 +29,7 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
+        <span if:false={loading} part="content">
             <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon

package/src/modules/dx/button/button.ts

@@ -80,6 +80,6 @@ export default class Button extends LightningElement {
 
     private onSlotChange(e: LightningSlotElement) {
         const slot = e.target;
-        this.isSlotEmpty = slot.assignedElements().length !== 0;
+        this.isSlotEmpty = slot.assignedNodes().length === 0;
     }
 }

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

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

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

@@ -44,12 +44,11 @@ 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 = "";
@@ -99,62 +98,17 @@ export default class CodeBlock extends LightningElement {
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
         let match;
-        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();
-        }
+        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" })
@@ -269,14 +223,6 @@ 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/coveoRecommendations/coveoRecommendations.html

@@ -6,27 +6,25 @@
     ></dx-hr>
 
     <dx-section lwc:if={showRecommendations} class="section-reduced-padding">
-        <dx-section class="section-reduced-padding">
-            <dx-spinner lwc:if={recommendationsLoading}>
-                <div class="spinner-container">
-                    <dx-spinner size="large" variant="brand"></dx-spinner>
-                </div>
-            </dx-spinner>
-            <dx-grid columns="three" class="recent-posts">
-                <template for:each={recommendations} for:item="recommendation">
-                    <dx-card-blog-post
-                        authors={recommendation.authors}
-                        body={recommendation.yoast_head_json.description}
-                        datetime={recommendation.yoast_head_json.article_published_time}
-                        href={recommendation.yoast_head_json.canonical}
-                        img-alt={recommendation.yoast_head_json.title}
-                        img-src={recommendation.featured_image}
-                        key={recommendation.id}
-                        title={recommendation.yoast_head_json.title}
-                        origin="coveo"
-                    ></dx-card-blog-post>
-                </template>
-            </dx-grid>
-        </dx-section>
+        <dx-spinner lwc:if={recommendationsLoading}>
+            <div class="spinner-container">
+                <dx-spinner size="large" variant="brand"></dx-spinner>
+            </div>
+        </dx-spinner>
+        <dx-grid columns="three" class="recent-posts">
+            <template for:each={recommendations} for:item="recommendation">
+                <dx-card-blog-post
+                    authors={recommendation.authors}
+                    body={recommendation.yoast_head_json.description}
+                    datetime={recommendation.yoast_head_json.article_published_time}
+                    href={recommendation.yoast_head_json.canonical}
+                    img-alt={recommendation.yoast_head_json.title}
+                    img-src={recommendation.featured_image}
+                    key={recommendation.id}
+                    title={recommendation.yoast_head_json.title}
+                    origin="coveo"
+                ></dx-card-blog-post>
+            </template>
+        </dx-grid>
     </dx-section>
 </template>

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

@@ -38,7 +38,7 @@
 }
 
 .option:active {
-    background: var(--dx-g-blue-vibrant-95) !important;
+    background: var(--dx-g-cloud-blue-vibrant-95) !important;
 }
 
 .option:not(.option-active):hover {
@@ -46,7 +46,9 @@
 }
 
 .option-active {
-    background: var(--dx-g-blue-vibrant-95);
+    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
+
+    background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
 .option_details {
@@ -67,7 +69,7 @@
     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-weight: var(--dx-c-dropdown-option-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/headerNav/headerNav.css

@@ -10,17 +10,26 @@ nav {
 
 .nav-list {
     display: flex;
+    margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
 }
 
 .nav-list li {
     position: relative;
 }
 
+.nav-list li:not(:last-child) {
+    margin-right: var(--dx-g-spacing-md);
+}
+
 .nav-list-item-nav-menu {
     display: none;
 }
 
 @media (max-width: 768px) {
+    .nav-list {
+        margin-top: 0;
+    }
+
     .nav-list-item-nav-menu {
         display: flex;
     }

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

@@ -28,7 +28,7 @@
     max-height: 65vh;
     padding: var(--popover-padding);
     overflow-y: auto;
-    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition: var(--popover-transition);
     transition-delay: 0.02s;
     transform: translateY(var(--dx-g-spacing-xs));
     opacity: 0;
@@ -41,7 +41,7 @@
 
 .popover-container_open .popover {
     opacity: 1;
-    transform: translateY(0);
+    transform: var(--popover-container-open-transform);
 }
 
 .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.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');
+  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');
   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-bottom: var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
 }
 
 .loading-skeleton {
@@ -53,6 +53,14 @@ 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);
+    padding-top: var(--dx-g-spacing-smd);
+    font-weight: var(--dx-g-font-bold);
+}
+
 @media (max-width: 768px) {
     :host {
         width: 100%;
@@ -61,8 +69,4 @@ dx-empty-state {
     .loading-skeleton {
         width: 100%;
     }
-
-    .sidebar-content-tree {
-        padding: 0 var(--dx-g-spacing-sm);
-    }
 }

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

@@ -1,7 +1,7 @@
 <template>
     <div class={containerClass} part="container">
         <div
-            if:true={mobile}
+            lwc:if={mobile}
             class="header padding-horizontal"
             onclick={onToggleClick}
         >
@@ -16,22 +16,17 @@
                     <dx-icon
                         sprite="utility"
                         symbol={menuSymbol}
-                        color="blue-vibrant-20"
+                        color="blue-vibrant-50"
+                        size="medium"
                     ></dx-icon>
                 </dx-button>
             </div>
         </div>
-
-        <div class="sidebar-header padding-horizontal">
-            <div class="header" if:false={mobile}>
+        <div class="sidebar-header" show-shadow={showBoxShadow}>
+            <div class="header padding-horizontal" lwc:if={isDesktop}>
                 <h2 class="dx-text-display-6 header-title">{header}</h2>
-                <slot name="header"></slot>
             </div>
-            <div class="mobile-header" if:true={mobile}>
-                <h2 class="dx-text-display-6">{header}</h2>
-                <slot name="header"></slot>
-            </div>
-            <div class="search">
+            <div class="search padding-horizontal">
                 <dx-sidebar-search
                     onchange={onSearchChange}
                     onloading={onSearchLoading}
@@ -41,9 +36,10 @@
                     coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ></dx-sidebar-search>
             </div>
+            <slot name="version-picker"></slot>
             <h2
-                class="results-heading dx-text-display-8"
-                if:true={showResultsHeading}
+                class="results-heading dx-text-body-3 padding-horizontal"
+                lwc:if={showResultsHeading}
             >
                 Results
             </h2>
@@ -53,13 +49,13 @@
             onscroll={onSidebarSearchContentScroll}
         >
             <img
-                if:true={isSearchLoading}
+                lwc:if={isSearchLoading}
                 class="loading-skeleton padding-horizontal"
                 src="https://a.sfdcstatic.com/developer-website/images/sidebar-loading.svg"
                 alt="loading"
             />
             <template
-                if:true={showSearchResults}
+                lwc:if={showSearchResults}
                 for:each={searchResults}
                 for:item="result"
             >
@@ -83,7 +79,7 @@
                 size="small"
             ></dx-empty-state>
         </div>
-        <div class="sidebar-content sidebar-content-tree">
+        <div class={sidebarContentClass} onscroll={handleScroll}>
             <dx-tree
                 for:each={trees}
                 for:item="tree"
@@ -95,5 +91,25 @@
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
+        <template lwc:if={mobile}>
+            <div lwc:if={hasMobileSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                ></dx-sidebar-footer-nav>
+            </div>
+        </template>
+        <template lwc:else>
+            <div lwc:if={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/sidebar/sidebar.ts

@@ -15,15 +15,6 @@ 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;
@@ -52,16 +43,10 @@ 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[] = [];
@@ -171,32 +156,6 @@ 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);
     }
@@ -216,7 +175,7 @@ export default class Sidebar extends SidebarBase {
         this.isSearchLoading = e.detail;
     }
 
-    private onSidebarSearchContentScroll() {
+    private onSidebarSearchContentScroll(scrollEvent) {
         if (this.isSearchLoading) {
             return;
         }
@@ -233,6 +192,7 @@ export default class Sidebar extends SidebarBase {
             this.requestedFetchMoreResults = true;
             search.fetchMoreResults();
         }
+        this.handleScroll(scrollEvent);
     }
 
     private initializeSearchScrollPosition() {

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.css

@@ -0,0 +1,49 @@
+@import "dxHelpers/reset";
+
+:host {
+    --button-primary-color: var(--dx-g-blue-vibrant-50);
+    --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --popover-container-open-transform: translateX(-4px) translateY(-8px);
+    --popover-transition: none;
+    --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
+}
+
+.footer-item {
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    align-items: center;
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+.footer-display {
+    display: flex;
+}
+
+.footer_lang-dropdown {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --dx-c-button-secondary-color-hover: var(--button-primary-color-hover);
+    --border-color: var(--button-primary-color);
+}
+
+.footer_lang-dropdown[aria-expanded="true"] {
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
+}
+
+.footer_lang-dropdown:hover,
+.footer_lang-dropdown:active,
+.pdf_bail-link:hover {
+    /* background-color: var(--button-primary-color-hover);
+
+    --border-color: var(--button-primary-color-hover); */
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
+}
+
+.pdf_bail-link {
+    --dx-c-button-secondary-color-hover: var(--button-primary-color-hover);
+    --dx-c-button-primary-color: var(--button-primary-color);
+
+    margin-right: var(--dx-g-spacing-sm);
+}

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.html

@@ -0,0 +1,55 @@
+<template>
+    <div lwc:if={mobile} class="footer-display">
+        <dx-dropdown
+            lwc:if={hasLanguages}
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+        >
+            <dx-button
+                class="footer-item footer_lang-dropdown"
+                aria-label="Select Language"
+                variant="tertiary"
+                icon-size="small"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+    <div lwc:else class="footer-display">
+        <dx-button
+            lwc:if={hasBailLink}
+            aria-label={bailLabel}
+            class="footer-item pdf_bail-link"
+            href={bailHref}
+            onclick={handleBailClick}
+            variant="tertiary"
+            icon-size="medium"
+            icon-symbol="new_window"
+            target="_blank"
+        >
+            {bailLabel}
+        </dx-button>
+        <dx-dropdown
+            lwc:if={hasLanguages}
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+        >
+            <dx-button
+                class="footer-item footer_lang-dropdown"
+                aria-label="Select Language"
+                variant="tertiary"
+                icon-size="medium"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+</template>