@salesforcedevs/dx-components 1.3.245-alpha3 → 1.3.245-dc-alpha3

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.245-alpha3",
+    "version": "1.3.245-dc-alpha3",
     "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/cardBlogPost/cardBlogPost.ts

@@ -14,7 +14,6 @@ export default class CardBlogPost extends LightningElement {
     @api title!: string;
     @api authors?: Array<any> | null = null;
     @api origin?: string = "wordpress";
-    @api clickEvent?: () => void;
 
     // LWC is being compiled so that datetime is being interpreted as date-time
     // ONLY from from the implementation in dx-card-blog-post-provider
@@ -23,10 +22,6 @@ export default class CardBlogPost extends LightningElement {
     }
 
     private onLinkClick(event: Event) {
-        if (this.clickEvent) {
-            this.clickEvent();
-        }
-
         const payload = {
             click_text: this.title,
             click_url: `${window.location.origin}${this.href}`,

package/src/modules/dx/coveoRecommendations/coveoRecommendations.html

@@ -23,7 +23,6 @@
                     key={recommendation.id}
                     title={recommendation.yoast_head_json.title}
                     origin="coveo"
-                    click-event={recommendation.clickEvent}
                 ></dx-card-blog-post>
             </template>
         </dx-grid>

package/src/modules/dx/coveoRecommendations/coveoRecommendations.ts

@@ -1,25 +1,11 @@
 import { LightningElement, api } from "lwc";
 
 const SEARCH_HUB = "developerWebsiteBlogs";
-
-interface Recommendation {
-    originalCoveoData: {
-        uri: string;
-        title: string;
-        searchUid: string;
-        raw: {
-            permanentId: string;
-        };
-        "@source": string;
-    };
-    clickEvent: () => void;
-}
-
 export default class CoveoRecommendations extends LightningElement {
     @api coveoAuthToken!: string;
     @api coveoOrganizationId!: string;
 
-    _recommendations = [] as Recommendation[];
+    _recommendations = [] as any[];
 
     private get recommendations(): any[] {
         return this._recommendations || [];
@@ -60,17 +46,10 @@ export default class CoveoRecommendations extends LightningElement {
 
                     const blogDataLoadTasks = results
                         .slice(0, 3)
-                        .map(async (rec: any, index: number) => {
+                        .map(async (rec: any) => {
                             const slug = rec.uri.split("/").pop();
                             const blogDataUrl = `https://developer.salesforce.com/blogs/wp-json/wp/v2/posts?slug=${slug}&state=publish&_embed=wp:featuredmedia`;
-                            const wordPressData = (
-                                await (await fetch(blogDataUrl)).json()
-                            )[0];
-                            wordPressData.originalCoveoData = rec;
-                            wordPressData.originalCoveoData.searchUid =
-                                json.searchUid;
-                            wordPressData.clickEvent =
-                                this.buildClickAnalyticsLogger(index);
+                            return (await (await fetch(blogDataUrl)).json())[0];
                         });
                     this._recommendations = await Promise.all(
                         blogDataLoadTasks
@@ -113,38 +92,4 @@ export default class CoveoRecommendations extends LightningElement {
             }
         );
     };
-
-    buildClickAnalyticsLogger = (index: number) => () => {
-        const payload = {
-            anonymous: true,
-            documentPosition: index,
-            documentTitle: this._recommendations[index].originalCoveoData.title,
-            documentUrl: this._recommendations[index].originalCoveoData.uri,
-            language: "en",
-            originLevel1: SEARCH_HUB,
-            originLevel2: SEARCH_HUB,
-            actionCause: "recommendationOpen",
-            queryText: "", // This has to be included, but is empty, because recommendations use the 'search' endpoint with an empty query string
-            searchQueryUid: this._recommendations[index].originalCoveoData.uri,
-            sourceName:
-                this._recommendations[index].originalCoveoData["@source"],
-            customData: {
-                contentIDKey: "permanentId",
-                contentIDValue:
-                    this._recommendations[index].originalCoveoData.raw
-                        .permanentId
-            }
-        };
-        fetch(
-            `https://${this.coveoOrganizationId}.analytics.org.coveo.com/rest/ua/v15/analytics/click`,
-            {
-                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

@@ -16,11 +16,19 @@ nav {
     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>