@salesforcedevs/docs-components 1.3.221 → 1.3.227-dh-alpha1

package/lwc.config.json

@@ -17,6 +17,7 @@
         "doc/headingAnchor",
         "doc/overview",
         "doc/phase",
+        "doc/versionPicker",
         "doc/xmlContent",
         "docUtils/utils"
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.221",
+    "version": "1.3.227-dh-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "eca6f0494621686d4b7c408a316e8b230b09b6dc"
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

package/src/modules/doc/amfReference/amfReference.css

@@ -22,11 +22,3 @@ doc-phase:nth-child(2) {
 .api-documentation {
     margin-top: 48px;
 }
-
-.version-picker {
-    margin-left: auto;
-}
-
-.version-picker-text {
-    border-bottom: 1px dashed var(--dx-g-blue-vibrant-50);
-}

package/src/modules/doc/amfReference/amfReference.html

@@ -1,5 +1,6 @@
 <template>
     <doc-content-layout
+        if:true={isVersionFetched}
         use-old-sidebar={useOldSidebar}
         class="content-type content-type-reference"
         coveo-organization-id={coveoOrganizationId}
@@ -16,6 +17,8 @@
         toc-title={tocTitle}
         toc-options={tocOptions}
         enable-slot-change="true"
+        languages={languages}
+        language={language}
     >
         <doc-phase
             slot="doc-phase"
@@ -30,20 +33,14 @@
             dismissible="true"
             ondismissphase={handleDismissVersionBanner}
         ></doc-phase>
-        <div slot="sidebar-header" class="version-picker">
-            <template if:true={isVersionEnabled}>
-                <dx-dropdown
-                    onchange={handleVersionChange}
-                    data-type="version"
-                    options={versions}
-                    value={selectedVersion.id}
-                    width="290px"
-                >
-                    <dx-button variant="inline" class="version-picker-text">
-                        {selectedVersion.id}
-                    </dx-button>
-                </dx-dropdown>
-            </template>
+        <div if:true={isVersionEnabled} slot="sidebar-header">
+            <doc-version-picker
+                onchange={handleVersionChange}
+                data-type="version"
+                versions={versions}
+                selected-version={selectedVersion}
+                latest-version={latestVersion}
+            ></doc-version-picker>
         </div>
         <template if:false={showSpecBasedReference}>
             <slot></slot>

package/src/modules/doc/amfReference/amfReference.ts

@@ -3,7 +3,8 @@ import { noCase } from "no-case";
 import { sentenceCase } from "sentence-case";
 import qs from "query-string";
 import { AmfModelParser } from "doc/amfModelParser";
-import { normalizeBoolean } from "dxUtils/normalizers";
+import { normalizeBoolean, toJson } from "dxUtils/normalizers";
+import type { OptionWithLink } from "typings/custom";
 import type {
     AmfConfig,
     AmfMetadataTopic,
@@ -43,14 +44,16 @@ export default class AmfReference extends LightningElement {
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
     @api coveoAnalyticsToken!: string;
-    @api coveoAdvancedQueryConfig!: string;
     @api coveoSearchHub!: string;
     @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
+    @api languages!: OptionWithLink[];
+    @api language!: string;
     @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
     @track showVersionBanner = false;
+    @track _coveoAdvancedQueryConfig!: { [key: string]: any };
 
     // Update this to update what component gets rendered in the content block
     @track
@@ -114,12 +117,16 @@ export default class AmfReference extends LightningElement {
                 this.versions = this.getVersions();
             }
             this.selectedVersion = selectedVersion;
-            if (
-                this.isSpecBasedReference(this._currentReferenceId) &&
-                this.oldVersionInfo
-            ) {
-                this.showVersionBanner = true;
+            if (this.isSpecBasedReference(this._currentReferenceId)) {
+                this.isVersionFetched = true;
+                if (this.oldVersionInfo) {
+                    this.showVersionBanner = true;
+                } else {
+                    this.latestVersion = true;
+                }
             }
+        } else {
+            this.isVersionFetched = true;
         }
 
         // This is to check if the url is hash based and redirect if needed
@@ -152,6 +159,31 @@ export default class AmfReference extends LightningElement {
         this._expandChildren = normalizeBoolean(value);
     }
 
+    /*
+     * The get coveoAdvancedQueryConfig() method returns this._coveoAdvancedQueryConfig,
+     * but before returning it, it checks if there are multiple versions (this.versions.length > 1)
+     * and if a version is selected (this.selectedVersion). If both conditions are met,
+     * it updates the version property of this._coveoAdvancedQueryConfig with the selected version.
+     */
+    @api
+    get coveoAdvancedQueryConfig(): { [key: string]: any } {
+        const coveoConfig = this._coveoAdvancedQueryConfig;
+        if (this.versions.length > 1 && this.selectedVersion) {
+            const currentGAVersionRef = this.versions[0];
+            if (this.selectedVersion.id !== currentGAVersionRef.id) {
+                // Currently Coveo only supports query without "v"
+                const version = this.selectedVersion.id.replace("v", "");
+                coveoConfig.version = version;
+                this._coveoAdvancedQueryConfig = coveoConfig;
+            }
+        }
+        return this._coveoAdvancedQueryConfig;
+    }
+
+    set coveoAdvancedQueryConfig(config) {
+        this._coveoAdvancedQueryConfig = toJson(config);
+    }
+
     // model
     protected _amfConfigList: AmfConfig[] = [];
     protected _amfConfigMap: Map<string, AmfConfig> = new Map();
@@ -172,6 +204,8 @@ export default class AmfReference extends LightningElement {
     private isParentLevelDocPhaseEnabled = false;
     private selectedReferenceDocPhase?: string | null = null;
     private _expandChildren?: boolean = false;
+    private isVersionFetched = false;
+    private latestVersion = false;
 
     /**
      * Key for storing the currently selected reference url. This will be used to save the
@@ -1282,8 +1316,11 @@ export default class AmfReference extends LightningElement {
             this.versions = this.getVersions();
             if (this.oldVersionInfo) {
                 this.showVersionBanner = true;
+            } else {
+                this.latestVersion = true;
             }
 
+            this.isVersionFetched = true;
             this.updateDocPhase();
             this.selectedSidebarValue = window.location.pathname;
         }

package/src/modules/doc/contentLayout/contentLayout.css

@@ -22,7 +22,7 @@ doc-breadcrumbs {
 
 dx-sidebar,
 dx-sidebar-old {
-    --dx-c-sidebar-vertical-padding: var(--dx-c-content-vertical-spacing);
+    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 
     z-index: calc(var(--dx-g-z-index-100) + 5);
 }
@@ -54,6 +54,7 @@ dx-toc {
 
 .content-body-doc-phase-container {
     flex: 1;
+    border-left: 1px solid var(--dx-g-gray-90);
 }
 
 .content-body-container {
@@ -61,12 +62,16 @@ dx-toc {
     flex-direction: row;
     justify-content: center;
     max-width: var(--dx-g-doc-content-max-width);
+
+    /* Derived this manually by substracting (topHeader, doc header, banner and the content). */
+    min-height: 62vh;
     margin: auto;
     padding: 0 var(--dx-g-global-header-padding-horizontal);
+    margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
 }
 
 .content-body {
-    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-xl);
+    margin: var(--dx-g-spacing-sm) 0 0;
     max-width: 900px;
     flex: 1;
     width: 0;
@@ -92,6 +97,10 @@ dx-toc {
     .content-body {
         margin-top: var(--dx-c-content-vertical-spacing);
     }
+
+    .content-body-doc-phase-container {
+        border-left: 0;
+    }
 }
 
 @media screen and (max-width: 768px) {
@@ -106,6 +115,7 @@ dx-toc {
     .content-body-container {
         padding-right: 0;
         overflow-x: auto;
+        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
     }
 
     .left-nav-bar {

package/src/modules/doc/contentLayout/contentLayout.html

@@ -7,8 +7,12 @@
                 value={sidebarValue}
                 header={sidebarHeader}
                 ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
-                <slot name="sidebar-header" slot="header"></slot>
+                <slot name="sidebar-header" slot="version-picker"></slot>
             </dx-sidebar-old>
         </template>
         <template if:false={useOldSidebar}>
@@ -22,8 +26,12 @@
                 coveo-search-hub={coveoSearchHub}
                 coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
-                <slot name="sidebar-header" slot="header"></slot>
+                <slot name="sidebar-header" slot="version-picker"></slot>
             </dx-sidebar>
         </template>
         <div class="content-body-doc-phase-container">
@@ -48,6 +56,9 @@
                     ></dx-toc>
                 </div>
             </div>
+            <div class="footer-container">
+                <dx-footer variant="no-signup"></dx-footer>
+            </div>
         </div>
     </div>
 </template>

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -4,6 +4,7 @@ import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
+import type { OptionWithLink } from "typings/custom";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -36,6 +37,10 @@ export default class ContentLayout extends LightningElement {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
 
     @api
     get breadcrumbs() {

package/src/modules/doc/header/header.css

@@ -16,44 +16,36 @@ dx-logo {
     );
 }
 
+.has-brand.has-scoped-nav-items {
+    border-bottom: 1px solid var(--dx-g-gray-90);
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
 .nav_menu-ctas {
     margin-right: var(--dx-g-spacing-sm);
 }
 
 header:not(.has-brand) > .header_l1 {
-    background: var(--dx-g-brand-current-color-background);
+    background: white;
+    border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
 header:not(.has-brand) > .header_l2 {
-    background: var(--dx-g-brand-current-color-background-2);
+    border-bottom: 1px solid var(--dx-g-gray-90);
+    border-top: 1px solid var(--dx-g-gray-90);
 }
 
 .header_l2_group.header_l2_group-right-ctas {
     align-items: baseline;
 }
 
-.header_bail-link {
-    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
-
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-.header_lang-dropdown {
-    --button-primary-color: var(--dx-g-blue-vibrant-40);
-    --button-primary-color-hover: var(--dx-g-blue-vibrant-30);
-}
-
-.header_lang-dropdown > dx-button {
-    --dx-c-button-primary-color: var(--button-primary-color);
-    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
-    --dx-c-slot-empty-width: min-content;
-    --border-color: var(--button-primary-color);
-
-    border-bottom: 1px dashed var(--border-color);
+.has-brand .header_l2_group-title {
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-xl)
+        calc(var(--dx-g-spacing-smd - 1px)) 0;
 }
 
-.header_lang-dropdown > dx-button:hover {
-    --border-color: var(--button-primary-color-hover);
+.no-header-content {
+    border-top: 1px solid var(--dx-g-gray-90);
 }
 
 @media (max-width: 768px) {
@@ -71,37 +63,41 @@ header:not(.has-brand) > .header_l2 {
         width: 100%;
     }
 
+    .header_l2_group-title {
+        margin-right: 0;
+        padding: var(--dx-g-spacing-sm) 0 2px
+            var(--dx-g-global-header-padding-horizontal);
+        min-height: var(--dx-g-doc-header-main-nav-height);
+    }
+
     .header_l2_group-nav {
         height: var(--dx-g-spacing-3xl);
         padding: 0;
-        padding-left: var(--dx-g-spacing-sm);
+        margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
     }
 
     .header_l2_group-nav_overflow {
-        height: 48px;
+        height: var(--dx-g-spacing-3xl);
         margin-right: var(--dx-g-spacing-sm);
     }
 
-    .header_l2_group-title {
-        margin-right: 0;
-        padding: var(--dx-g-spacing-smd)
-            var(--dx-g-global-header-padding-horizontal);
-        min-height: var(--dx-g-doc-header-main-nav-height);
-    }
-
-    .header_l2_group-title .header_lang-dropdown {
-        margin-left: auto;
+    .subtitle {
+        font-weight: var(--dx-g-font-demi);
+        letter-spacing: -0.08px;
     }
 
-    .header_lang-dropdown > dx-button {
-        padding: var(--dx-g-spacing-2xs) 0;
+    .has-brand .header_l2_group-title {
+        margin-right: 0;
+        padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xs)
+            var(--dx-g-global-header-padding-horizontal);
     }
 
     .has-scoped-nav-items > .header_l2 {
         height: unset;
     }
 
-    .has-scoped-nav-items .header_l2_group-title {
-        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
+    header:not(.has-brand) > .header_l2 {
+        padding-bottom: 0;
+        border: 0;
     }
 }

package/src/modules/doc/header/header.html

@@ -14,28 +14,12 @@
                                 if:true={isValidBrand}
                                 sprite="salesforcebrand"
                                 symbol={brand}
-                                size="xlarge"
+                                size="large"
                             ></dx-icon>
-                            <span class="subtitle dx-text-display-6">
+                            <span class="subtitle dx-text-display-7">
                                 {subtitle}
                             </span>
                         </a>
-                        <dx-dropdown
-                            if:true={showMobileLanguages}
-                            class="header_lang-dropdown"
-                            options={languages}
-                            small
-                            value={language}
-                            value-path={langValuePath}
-                            onchange={onLangChange}
-                        >
-                            <dx-button
-                                aria-label="Select Language"
-                                variant="inline"
-                                icon-size="large"
-                                icon-symbol="world"
-                            ></dx-button>
-                        </dx-dropdown>
                     </div>
                     <div
                         if:true={hasScopedNavItems}
@@ -52,43 +36,11 @@
                             ></dx-header-nav>
                         </div>
                     </div>
-                    <div
-                        if:false={smallMobile}
-                        class="header_l2_group header_l2_group-right-ctas"
-                    >
-                        <dx-dropdown
-                            if:true={hasLanguages}
-                            class="header_lang-dropdown"
-                            options={languages}
-                            small
-                            value-path={langValuePath}
-                            value={language}
-                            onchange={onLangChange}
-                        >
-                            <dx-button
-                                aria-label="Select Language"
-                                variant="inline"
-                                icon-size="small"
-                                icon-symbol="world"
-                            >
-                                {languageLabel}
-                            </dx-button>
-                        </dx-dropdown>
-                        <dx-button
-                            if:true={hasBailLink}
-                            aria-label={bailLabel}
-                            class="header_bail-link"
-                            href={bailHref}
-                            onclick={handleBailClick}
-                            variant="tertiary"
-                            icon-symbol="new_window"
-                            target="_blank"
-                        >
-                            {bailLabel}
-                        </dx-button>
-                    </div>
                 </div>
             </header>
         </dx-brand-theme-provider>
     </template>
+    <template if:true={showDocDivider}>
+        <div class="no-header-content"></div>
+    </template>
 </template>

package/src/modules/doc/header/header.ts

@@ -1,14 +1,11 @@
 import { api } from "lwc";
 import cx from "classnames";
-import type { OptionWithNested, OptionWithLink } from "typings/custom";
+import type { OptionWithNested } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
-import get from "lodash.get";
-import { track } from "dxUtils/analytics";
 
 const TABLET_MATCH = "980px";
-const MOBILE_MATCH = "880px";
-const SMALL_MOBILE_MATCH = "768px";
+const MOBILE_MATCH = "768px";
 
 export default class Header extends HeaderBase {
     @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.
@@ -23,34 +20,11 @@ export default class Header extends HeaderBase {
         this._scopedNavItems = toJson(value);
     }
 
-    @api
-    get languages() {
-        return this._languages;
-    }
-
-    set languages(value) {
-        this._languages = toJson(value);
-    }
-
-    @api
-    get language() {
-        return this._language;
-    }
-
-    set language(value) {
-        if (this._language !== value) {
-            this._language = value;
-        }
-    }
-
-    private _language: string | null = null;
-    private _languages!: OptionWithLink[];
     private _scopedNavItems!: OptionWithNested[];
-    private smallMobile = false;
-    private smallMobileMatchMedia!: MediaQueryList;
     private tablet = false;
     private tabletMatchMedia!: MediaQueryList;
-    private shouldRender = false;
+    private shouldRender: boolean = false;
+    private showDocDivider: boolean = false;
 
     protected mobileBreakpoint(): string {
         return MOBILE_MATCH;
@@ -60,24 +34,6 @@ export default class Header extends HeaderBase {
         return this.scopedNavItems && this.scopedNavItems.length > 0;
     }
 
-    private get hasLanguages(): boolean {
-        return !!(this.languages && this.languages.length);
-    }
-
-    private get showMobileLanguages(): boolean {
-        return this.smallMobile && this.hasLanguages;
-    }
-
-    private get languageLabel(): string {
-        return (
-            (this.language &&
-                this.languages.find(
-                    (lang) => get(lang, this.langValuePath) === this.language
-                )?.label) ||
-            this.languages[0].label
-        );
-    }
-
     connectedCallback(): void {
         super.connectedCallback();
         this.tabletMatchMedia = window.matchMedia(
@@ -86,14 +42,6 @@ export default class Header extends HeaderBase {
         this.onTabletChange(this.tabletMatchMedia);
         this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
 
-        this.smallMobileMatchMedia = window.matchMedia(
-            `(max-width: ${SMALL_MOBILE_MATCH})`
-        );
-        this.onSmallMobileChange(this.smallMobileMatchMedia);
-        this.smallMobileMatchMedia.addEventListener(
-            "change",
-            this.onSmallMobileChange
-        );
         if (
             (window.location.pathname.includes("/docs/") &&
                 window.location.pathname !== "/docs/apis") ||
@@ -104,6 +52,13 @@ export default class Header extends HeaderBase {
         ) {
             this.shouldRender = true;
         }
+
+        if (this.shouldRender && window.location.pathname.includes("/docs/")) {
+            if (!this.brand && !this.mobile) {
+                this.shouldRender = false;
+                this.showDocDivider = true;
+            }
+        }
     }
 
     disconnectedCallback(): void {
@@ -112,53 +67,15 @@ export default class Header extends HeaderBase {
             "change",
             this.onTabletChange
         );
-
-        this.smallMobileMatchMedia.removeEventListener(
-            "change",
-            this.onSmallMobileChange
-        );
     }
 
     private onTabletChange = (e: MediaQueryListEvent | MediaQueryList) =>
         (this.tablet = e.matches);
 
-    private onSmallMobileChange = (e: MediaQueryListEvent | MediaQueryList) =>
-        (this.smallMobile = e.matches);
-
     protected additionalClasses(): string {
         return cx(
             this.brand && "has-brand",
             this.hasScopedNavItems && "has-scoped-nav-items"
         );
     }
-
-    private onLangChange(event: CustomEvent<string>): void {
-        const { detail } = event;
-        this._language = detail;
-
-        this.dispatchEvent(new CustomEvent("langchange", { detail }));
-    }
-
-    private handleBailClick(event: Event) {
-        const payload = {
-            click_text: "pdf",
-            click_url: this.bailHref,
-            element_title: "pdf",
-            element_type: "link",
-            content_category: "download"
-        };
-        track(event.target!, "custEv_pdfDownload", {
-            ...payload,
-            file_name: this.getFilename(this.bailHref!),
-            file_extension: "pdf"
-        });
-
-        track(event.target!, "custEv_linkClick", {
-            ...payload
-        });
-    }
-
-    private getFilename = function (path: string) {
-        return path.substring(path.lastIndexOf("/") + 1);
-    };
 }

package/src/modules/doc/versionPicker/versionPicker.css

@@ -0,0 +1,64 @@
+@import "dxHelpers/reset";
+
+/* NOTE: doc-version-picker-width width variable is used by both dx-button and dx-dropdown to maintain a consistent width. */
+:host {
+    --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
+    --popover-container-open-transform: translateY(4px);
+}
+
+.version-picker-container {
+    padding: 8px var(--dx-g-spacing-lg) 8px
+        var(--dx-g-global-header-padding-horizontal);
+    border-top: 1px solid var(--dx-g-gray-90);
+    border-bottom: 1px solid var(--dx-g-gray-90);
+}
+
+.version-picker-button {
+    display: flex;
+    width: var(--doc-version-picker-width, 296px);
+}
+
+.version-picker-button:hover,
+.version-picker-button:active,
+.version-picker-button:focus {
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
+}
+
+/**
+ * NOTE: This CSS ensures the span inside the button stays within the parent's width, avoiding overflow.
+ * Not keeping this in common component to ensure that existing functionality works as it is.
+ */
+dx-button::part(content) {
+    width: inherit;
+    overflow: hidden;
+}
+
+.selected-version {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.selected-version-label {
+    flex: 1;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+dx-type-badge.latest-badge {
+    --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
+    --dx-c-type-badge-background: var(--dx-g-green-vibrant-95);
+
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+dx-type-badge.not-latest-badge {
+    --dx-c-type-badge-color: var(--dx-g-red-vibrant-40);
+    --dx-c-type-badge-background: var(--dx-g-red-vibrant-95);
+
+    margin-left: var(--dx-g-spacing-sm);
+}

package/src/modules/doc/versionPicker/versionPicker.html

@@ -0,0 +1,37 @@
+<template>
+    <div if:true={showVersionPicker} class="version-picker-container">
+        <dx-dropdown
+            options={versions}
+            value={selectedVersion.id}
+            width="var(--doc-version-picker-width)"
+        >
+            <dx-button
+                class="version-picker-button"
+                variant="tertiary"
+                size="small"
+                icon-symbol="chevrondown"
+                icon-size="medium"
+            >
+                <div class="selected-version">
+                    <p class="selected-version-label">
+                        {selectedVersion.label}
+                    </p>
+                    <template if:false={hideBadge}>
+                        <dx-type-badge
+                            class="latest-badge"
+                            if:true={latestVersion}
+                            value="Latest"
+                            size="small"
+                        ></dx-type-badge>
+                        <dx-type-badge
+                            class="not-latest-badge"
+                            if:false={latestVersion}
+                            value="Not Latest"
+                            size="small"
+                        ></dx-type-badge>
+                    </template>
+                </div>
+            </dx-button>
+        </dx-dropdown>
+    </div>
+</template>

package/src/modules/doc/versionPicker/versionPicker.ts

@@ -0,0 +1,57 @@
+import { LightningElement, api } from "lwc";
+
+import { AnalyticsPayload, OptionWithNested } from "typings/custom";
+
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
+
+export default class VersionPicker extends LightningElement {
+    @api analyticsEvent?: string;
+    @api analyticsPayload?: AnalyticsPayload;
+
+    private _versions!: OptionWithNested[];
+    private _selectedVersion?: OptionWithNested;
+    private _latestVersion: boolean = false;
+    private _hideBadge: boolean = false;
+
+    @api
+    get versions() {
+        return this._versions;
+    }
+
+    set versions(value: OptionWithNested[]) {
+        this._versions = toJson(value);
+    }
+
+    @api
+    get selectedVersion(): OptionWithNested | undefined {
+        return this._selectedVersion || this.versions[0];
+    }
+
+    set selectedVersion(value: OptionWithNested) {
+        if (value) {
+            this._selectedVersion = toJson(value);
+        }
+    }
+
+    @api
+    get latestVersion() {
+        return this._latestVersion;
+    }
+
+    set latestVersion(value) {
+        this._latestVersion = normalizeBoolean(value);
+    }
+
+    @api
+    get hideBadge() {
+        return this._hideBadge;
+    }
+
+    set hideBadge(value) {
+        this._hideBadge = normalizeBoolean(value);
+    }
+
+    private get showVersionPicker() {
+        return this._versions && this._versions.length !== 0;
+    }
+}

package/src/modules/doc/xmlContent/types.ts

@@ -61,12 +61,15 @@ export type ApiDocLanguage = {
 
 export interface Header extends Element {
     subtitle: string;
+    headerHref: string;
+}
+
+export type SiderbarFooter = {
     bailHref: string;
     bailLabel: string;
     languages: Array<DocLanguage>;
     language?: string;
-    headerHref: string;
-}
+};
 
 export type ApiNavItem = {
     children: Array<ApiNavItem>;

package/src/modules/doc/xmlContent/xmlContent.css

@@ -4,17 +4,8 @@
 }
 
 doc-content-layout {
-    --dx-c-content-sidebar-sticky-top: calc(
-        var(--dx-g-global-header-height) +
-            var(--dx-g-doc-header-main-nav-height)
-    );
-    --dx-c-sidebar-height: calc(
-        100vh -
-            calc(
-                var(--dx-g-global-header-height) +
-                    var(--dx-g-doc-header-main-nav-height)
-            )
-    );
+    --dx-c-content-sidebar-sticky-top: var(--dx-g-global-header-height);
+    --dx-c-sidebar-height: calc(100vh - var(--dx-g-global-header-height));
 }
 
 doc-breadcrumbs {
@@ -40,13 +31,24 @@ dx-dropdown > dx-button:hover {
     --border-color: var(--button-primary-color-hover);
 }
 
-.document-pickers {
-    margin-left: auto;
-    margin-right: var(--dx-g-spacing-sm);
-}
-
 doc-phase {
-    --doc-c-phase-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
-    );
+    --doc-c-phase-top: var(--dx-g-global-header-height);
+}
+
+@media screen and (max-width: 768px) {
+    doc-content-layout {
+        --dx-g-doc-header-main-nav-height: 41px;
+        --dx-g-doc-header-height: calc(
+            var(--dx-g-doc-header-main-nav-height) + 40px
+        );
+        --dx-c-content-sidebar-sticky-top: calc(
+            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+        );
+    }
+
+    doc-phase {
+        --doc-c-phase-top: calc(
+            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+        );
+    }
 }

package/src/modules/doc/xmlContent/xmlContent.html

@@ -6,11 +6,16 @@
         coveo-analytics-token={coveoAnalyticsToken}
         coveo-search-hub={coveoSearchHub}
         coveo-advanced-query-config={coveoAdvancedQueryConfig}
-        sidebar-header="Pages"
+        sidebar-header={docTitle}
         sidebar-content={sidebarContent}
         sidebar-value={sidebarValue}
         onselect={handleSelect}
         use-old-sidebar={useOldSidebar}
+        onlangchange={handleLanguageChange}
+        languages={sidebarFooterContent.languages}
+        language={sidebarFooterContent.language}
+        bail-href={sidebarFooterContent.bailHref}
+        bail-label={sidebarFooterContent.bailLabel}
     >
         <doc-phase
             slot="version-banner"
@@ -20,19 +25,16 @@
             dismissible="true"
             ondismissphase={handleDismissVersionBanner}
         ></doc-phase>
-        <div slot="sidebar-header" class="document-pickers">
-            <dx-dropdown
+        <div if:false={disableVersion} slot="sidebar-header">
+            <doc-version-picker
                 data-type="version"
                 analytics-event="custEv_ctaLinkClick"
                 analytics-payload={ANALYTICS_PAYLOAD}
-                options={versionOptions}
-                value={version.id}
-                width="290px"
-            >
-                <dx-button variant="inline" disabled={disableVersion}>
-                    {version.releaseVersion}
-                </dx-button>
-            </dx-dropdown>
+                versions={versionOptions}
+                selected-version={version}
+                latest-version={latestVersion}
+                hide-badge={previewVersion}
+            ></doc-version-picker>
         </div>
         <doc-breadcrumbs
             if:true={showBreadcrumbs}

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -8,6 +8,7 @@ import {
     DocVersion,
     TreeNode,
     Header,
+    SiderbarFooter,
     HistoryState,
     PageReference,
     TocMap
@@ -26,6 +27,12 @@ const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
     "ja-jp": 12.5
 };
 
+const defaultSidebarFooter: SiderbarFooter = {
+    bailHref: "",
+    bailLabel: "",
+    languages: [],
+    language: ""
+};
 export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
@@ -64,15 +71,18 @@ export default class DocXmlContent extends LightningElementWithState<{
     private docContent = "";
     private language?: DocLanguage | null = null;
     private loaded = false;
+    private _pageHeader?: Header;
     private pdfUrl = "";
     private tocMap: TocMap = {};
     private sidebarContent: Array<TreeNode> | null = null;
     private version: DocVersion | null = null;
     private docTitle = "";
     private _pathName = "";
-    private _pageHeader?: Header;
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
+    private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
+    private latestVersion = false;
+    private previewVersion = false;
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -127,6 +137,10 @@ export default class DocXmlContent extends LightningElementWithState<{
                 try {
                     if (parseFloat(this.version.id) < parseFloat(versionNo)) {
                         info = oldVersionDocInfo(currentGAVersion.link.href);
+                    } else if (
+                        parseFloat(this.version.id) > parseFloat(versionNo)
+                    ) {
+                        this.previewVersion = true;
                     }
                 } catch (exception) {
                     /* Ideally this use case should not happen, but just added to not to break the page*/
@@ -214,13 +228,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     disconnectedCallback(): void {
         window.removeEventListener("popstate", this.handlePopState);
         this.searchSyncer.dispose();
-        if (this.listenerAttached) {
-            this.pageHeader.removeEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = false;
-        }
     }
 
     private get languageId(): string | undefined {
@@ -414,12 +421,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     getReferenceFromUrl(): PageReference {
-        const [
-            page,
-            docId,
-            deliverable,
-            contentDocumentId
-        ] = window.location.pathname.substr(1).split("/");
+        const [page, docId, deliverable, contentDocumentId] =
+            window.location.pathname.substr(1).split("/");
 
         const { origin: domain, hash, search } = window.location;
 
@@ -469,7 +472,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.availableVersions = data.availableVersions;
         this.pdfUrl = data.pdfUrl;
 
-        this.updateHeader();
+        this.updateHeaderAndSidebarFooter();
 
         this.buildBreadcrumbs();
 
@@ -480,6 +483,8 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         if (this.oldVersionInfo) {
             this.showVersionBanner = true;
+        } else {
+            this.latestVersion = true;
         }
 
         if (
@@ -533,7 +538,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         });
     }
 
-    updateHeader(): void {
+    updateHeaderAndSidebarFooter(): void {
         if (!this.pageHeader) {
             return;
         }
@@ -543,20 +548,12 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         if (this.pdfUrl) {
-            this.pageHeader.bailHref = this.pdfUrl;
-            this.pageHeader.bailLabel = "PDF";
+            this.sidebarFooterContent.bailHref = this.pdfUrl;
+            this.sidebarFooterContent.bailLabel = "PDF";
         }
 
-        if (!this.listenerAttached) {
-            this.pageHeader.addEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = true;
-        }
-
-        this.pageHeader.languages = this.availableLanguages;
-        this.pageHeader.language = this.language?.id;
+        this.sidebarFooterContent.languages = this.availableLanguages;
+        this.sidebarFooterContent.language = this.language?.id;
 
         if (this.pageReference) {
             const { docId, deliverable, page } = this.pageReference;
@@ -581,20 +578,14 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        (this.template.querySelector(
-            "doc-content-layout"
-        ) as any)?.setSidebarInputValue(searchParam);
+        (
+            this.template.querySelector("doc-content-layout") as any
+        )?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
-        const {
-            page,
-            docId,
-            deliverable,
-            contentDocumentId,
-            hash,
-            search
-        } = reference;
+        const { page, docId, deliverable, contentDocumentId, hash, search } =
+            reference;
         return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
             search!
         )}${this.normalizeHash(hash)}`;

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.