@salesforcedevs/dx-components 1.3.242 → 1.3.243-newdocux-alpha6

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",
+    "version": "1.3.243-newdocux-alpha6",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -43,6 +43,5 @@
     },
     "volta": {
         "node": "16.19.1"
-    },
-    "gitHead": "f53c5d4c4cf5fe27cc7c9cb520d2a93f8bc82973"
+    }
 }

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

@@ -1,7 +1,9 @@
 import { LightningElement, api } from "lwc";
 
+const SEARCH_HUB = "developerWebsiteBlogs";
 export default class CoveoRecommendations extends LightningElement {
     @api coveoAuthToken!: string;
+    @api coveoOrganizationId!: string;
 
     _recommendations = [] as any[];
 
@@ -17,6 +19,7 @@ export default class CoveoRecommendations extends LightningElement {
             "__coveo.analytics.history"
         );
         const url = "https://platform.cloud.coveo.com/rest/search/v2";
+        const searchStart = performance.now();
         fetch(url, {
             headers: {
                 Authorization: `Bearer ${this.coveoAuthToken}`,
@@ -25,14 +28,22 @@ export default class CoveoRecommendations extends LightningElement {
             method: "POST",
             body: JSON.stringify({
                 pipeline: "Recommendations_Developer_Blogs",
-                searchHub: "developerWebsiteBlogs",
+                searchHub: SEARCH_HUB,
                 numberOfResults: 3,
-                actionsHistory: JSON.parse(actionsHistory!)
+                actionsHistory: JSON.parse(actionsHistory!),
+                isGuestUser: true
             })
         }).then(
             async (response) => {
                 try {
-                    const results = (await response.json()).results;
+                    const json = await response.json();
+                    const results = json.results;
+
+                    this.logSearchAnalytics(
+                        json.searchUid,
+                        performance.now() - searchStart
+                    );
+
                     const blogDataLoadTasks = results
                         .slice(0, 3)
                         .map(async (rec: any) => {
@@ -57,4 +68,28 @@ export default class CoveoRecommendations extends LightningElement {
             }
         );
     }
+
+    logSearchAnalytics = (uid: string, time: number) => {
+        const payload = {
+            anonymous: true,
+            language: "en",
+            originLevel1: SEARCH_HUB,
+            originLevel2: SEARCH_HUB,
+            actionCause: "recommendationInterfaceLoad",
+            queryText: "", // This has to be included, but is empty, because recommendations use the 'search' endpoint with an empty query string
+            responseTime: time,
+            searchQueryUid: uid
+        };
+        fetch(
+            `https://${this.coveoOrganizationId}.analytics.org.coveo.com/rest/ua/v15/analytics/search`,
+            {
+                headers: {
+                    Authorization: `Bearer ${this.coveoAuthToken}`,
+                    "Content-Type": "application/json"
+                },
+                method: "POST",
+                body: JSON.stringify(payload)
+            }
+        );
+    };
 }

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/mainContentHeader/mainContentHeader.css

@@ -1,10 +1,25 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
 
+:host {
+    --dx-c-padding: 0 var(--dx-g-page-padding-horizontal);
+    --dx-c-container-justify-content: left;
+}
+
+dx-formatted-rich-text {
+    --dx-c-formatted-rich-text-inline-link-color: var(
+        --dx-g-cloud-blue-vibrant-95
+    );
+    --dx-c-formatted-rich-text-inline-link-color-hover: var(
+        --dx-g-blue-vibrant-70
+    );
+}
+
 .container {
     display: flex;
     flex-direction: row;
-    padding: 0 var(--dx-g-page-padding-horizontal);
+    padding: var(--dx-c-padding);
+    justify-content: var(--dx-c-container-justify-content);
     overflow: hidden;
 }
 
@@ -62,6 +77,29 @@ img.mobile {
     min-width: 1024px;
 }
 
+.multiple-image-container {
+    position: relative;
+    max-width: 646px;
+}
+
+.image-one {
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 418px;
+    height: 515px;
+}
+
+.image-two {
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 341px;
+    height: 339px;
+}
+
 .text-container > *:not(:last-child) {
     margin-bottom: var(--dx-g-spacing-smd);
 }
@@ -76,6 +114,16 @@ svg {
     bottom: 60px;
 }
 
+.foot-note-container {
+    display: flex;
+}
+
+@media screen and (min-width: 1024px) {
+    .text-container {
+        text-align: left;
+    }
+}
+
 @media screen and (max-width: 1024px) {
     .container {
         flex-direction: column;
@@ -87,12 +135,15 @@ svg {
 
     .text-container {
         align-items: center;
-        text-align: center;
         padding-top: var(--dx-g-spacing-4xl);
         padding-bottom: 0;
         min-height: unset;
     }
 
+    .button-container {
+        justify-content: center;
+    }
+
     .text-container > * {
         max-width: 700px;
     }
@@ -109,6 +160,10 @@ svg {
         display: block;
         margin-top: var(--dx-g-spacing-3xl);
     }
+
+    .multiple-image-container {
+        display: none;
+    }
 }
 
 @media screen and (max-width: 768px) {
@@ -123,3 +178,20 @@ svg {
         line-height: var(--dx-g-text-4xl);
     }
 }
+@media screen and (min-width: 479px) and (max-width: 1024px) {
+    .text-container {
+        text-align: center;
+    }
+}
+
+@media screen and (min-width: 479px) {
+    .foot-note-image {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 479px) {
+    .foot-note-image {
+        object-fit: contain;
+    }
+}

package/src/modules/dx/mainContentHeader/mainContentHeader.html

@@ -3,37 +3,62 @@
         <div class={textStyle}>
             <h1 class="heading dx-text-display-2">{title}</h1>
             <span class="body dx-text-body-1">{body}</span>
-            <span if:true={subtitle} class="subtitle dx-text-display-7">
+            <span lwc:if={subtitle} class="subtitle dx-text-display-7">
                 {subtitle}
             </span>
-            <div class="button-container">
-                <dx-button
-                    onclick={onCtaClick}
-                    href={ctaHref}
-                    target={ctaTarget}
-                    size="large"
-                >
-                    {ctaLabel}
-                </dx-button>
-                <dx-button
-                    class="secondary-button"
-                    if:true={ctaLabelSecondary}
-                    onclick={onCtaClickSecondary}
-                    href={ctaHrefSecondary}
-                    target={ctaTargetSecondary}
-                    size="large"
-                    variant="secondary"
-                >
-                    {ctaLabelSecondary}
-                </dx-button>
+            <div class="foot-note-container">
+                <div class="foot-note-text-button-container">
+                    <span
+                        lwc:if={footNote}
+                        class="dx-text-body-4"
+                        style={footNoteStyle}
+                    >
+                        <dx-formatted-rich-text
+                            value={footNote}
+                        ></dx-formatted-rich-text>
+                    </span>
+                    <div class="button-container">
+                        <dx-button
+                            onclick={onCtaClick}
+                            href={ctaHref}
+                            target={ctaTarget}
+                            size="large"
+                        >
+                            {ctaLabel}
+                        </dx-button>
+                        <dx-button
+                            class="secondary-button"
+                            lwc:if={ctaLabelSecondary}
+                            onclick={onCtaClickSecondary}
+                            href={ctaHrefSecondary}
+                            target={ctaTargetSecondary}
+                            size="large"
+                            variant="secondary"
+                        >
+                            {ctaLabelSecondary}
+                        </dx-button>
+                    </div>
+                </div>
+                <img
+                    lwc:if={footNoteImage}
+                    class="foot-note-image"
+                    src={footNoteImage}
+                    alt={footNoteImageAlt}
+                    width={footNoteImageWidth}
+                    height={footNoteImageHeight}
+                />
             </div>
         </div>
-        <div class="image-container">
+        <div lwc:if={multipleImages} class="multiple-image-container">
+            <img class="image-one" src={imgSrcOne} alt="" />
+            <img class="image-two" src={imgSrcTwo} alt="" />
+        </div>
+        <div lwc:else class="image-container">
             <img class="desktop" src={imgSrc} alt="" />
             <img class="mobile" src={imgSrcMobile} alt="" />
         </div>
     </div>
-    <template if:true={hasSwoop}>
+    <template lwc:if={hasSwoop}>
         <svg
             width="500"
             height="80"

package/src/modules/dx/mainContentHeader/mainContentHeader.ts

@@ -6,17 +6,26 @@ export default class MainContentHeader extends LightningElement {
     @api title!: string;
     @api subtitle?: string;
     @api body!: string;
+    @api footNote?: string;
+    @api footNoteImage?: string;
+    @api footNoteImageAlt?: string;
+    @api footNoteImageHeight?: string;
+    @api footNoteImageWidth?: string;
     @api ctaLabel!: string;
     @api ctaLabelSecondary?: string;
     @api ctaHref!: string;
     @api ctaHrefSecondary?: string;
-    @api imgSrc!: string;
-    @api imgSrcMobile!: string;
+    @api imgSrc?: string;
+    @api imgSrcMobile?: string;
     @api ctaTarget?: string | null = null;
     @api ctaTargetSecondary?: string | null = null;
     @api backgroundGradientColor?: string;
-    @api backgroundGradientDark: boolean = false;
-    @api hasSwoop: boolean = false;
+    @api backgroundImage?: string;
+    @api backgroundGradientDark = false;
+    @api hasSwoop = false;
+    @api multipleImages = false;
+    @api imgSrcOne?: string;
+    @api imgSrcTwo?: string;
 
     private get style() {
         return cx(
@@ -24,7 +33,9 @@ export default class MainContentHeader extends LightningElement {
                 !this.backgroundGradientDark &&
                 `background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffff 100%), var(--dx-g-${this.backgroundGradientColor});`,
             this.backgroundGradientDark &&
-                `background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%);`
+                `background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%);`,
+            this.backgroundImage &&
+                `background: #260F8F url('${this.backgroundImage}') no-repeat bottom; background-size: cover;`
         );
     }
 
@@ -35,6 +46,10 @@ export default class MainContentHeader extends LightningElement {
         );
     }
 
+    private get footNoteStyle() {
+        return cx(this.backgroundGradientDark && "color: white;");
+    }
+
     private onCtaClick(e: Event) {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {

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/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>