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

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.242",
+    "version": "1.3.243-newdocux-alpha6",
     "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": "f53c5d4c4cf5fe27cc7c9cb520d2a93f8bc82973"
+    "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,6 +1,6 @@
 <template>
     <doc-content-layout
-        if:true={isVersionFetched}
+        lwc:if={isVersionFetched}
         use-old-sidebar={useOldSidebar}
         class="content-type content-type-reference"
         coveo-organization-id={coveoOrganizationId}
@@ -17,47 +17,43 @@
         toc-title={tocTitle}
         toc-options={tocOptions}
         enable-slot-change="true"
+        languages={languages}
+        language={language}
     >
         <doc-phase
             slot="doc-phase"
-            if:true={docPhaseInfo}
+            lwc:if={docPhaseInfo}
             doc-phase-info={docPhaseInfo}
         ></doc-phase>
         <doc-phase
             slot="version-banner"
-            if:true={showVersionBanner}
+            lwc:if={showVersionBanner}
             doc-phase-info={oldVersionInfo}
             icon-name="warning"
             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 lwc:if={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>
-        </template>
-        <template if:true={showSpecBasedReference}>
+        <template lwc:if={showSpecBasedReference}>
             <div class="container">
                 <div class="api-documentation">
                     <doc-amf-topic
-                        if:true={topicModel}
+                        lwc:if={topicModel}
                         model={topicModel}
                     ></doc-amf-topic>
                 </div>
             </div>
         </template>
+        <template lwc:else>
+            <slot></slot>
+        </template>
     </doc-content-layout>
 </template>

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

@@ -4,6 +4,7 @@ import { sentenceCase } from "sentence-case";
 import qs from "query-string";
 import { AmfModelParser } from "doc/amfModelParser";
 import { normalizeBoolean, toJson } from "dxUtils/normalizers";
+import type { OptionWithLink } from "typings/custom";
 import type {
     AmfConfig,
     AmfMetadataTopic,
@@ -47,6 +48,8 @@ export default class AmfReference extends LightningElement {
     @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;
@@ -118,6 +121,8 @@ export default class AmfReference extends LightningElement {
                 this.isVersionFetched = true;
                 if (this.oldVersionInfo) {
                     this.showVersionBanner = true;
+                } else {
+                    this.latestVersion = true;
                 }
             }
         } else {
@@ -200,6 +205,7 @@ export default class AmfReference extends LightningElement {
     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
@@ -1310,6 +1316,8 @@ export default class AmfReference extends LightningElement {
             this.versions = this.getVersions();
             if (this.oldVersionInfo) {
                 this.showVersionBanner = true;
+            } else {
+                this.latestVersion = true;
             }
 
             this.isVersionFetched = true;

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-md) 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,11 +115,11 @@ dx-toc {
     .content-body-container {
         padding-right: 0;
         overflow-x: auto;
+        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
     }
 
     .left-nav-bar {
         height: unset;
-        z-index: 10;
     }
 
     .content-body {

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

@@ -1,17 +1,21 @@
 <template>
     <div class="content">
-        <template if:true={useOldSidebar}>
+        <template lwc:if={useOldSidebar}>
             <dx-sidebar-old
                 class="is-sticky left-nav-bar"
                 trees={sidebarContent}
                 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}>
+        <template lwc:else>
             <dx-sidebar
                 class="is-sticky left-nav-bar"
                 trees={sidebarContent}
@@ -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">
@@ -32,15 +40,15 @@
             <div class="content-body-container">
                 <div class="content-body">
                     <doc-breadcrumbs
-                        if:true={showBreadcrumbs}
+                        lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
                     ></doc-breadcrumbs>
                     <slot onslotchange={onSlotChange}></slot>
                     <doc-sprig-survey
-                        if:true={shouldDisplayFeedback}
+                        lwc:if={shouldDisplayFeedback}
                     ></doc-sprig-survey>
                 </div>
-                <div if:true={showToc} class="right-nav-bar is-sticky">
+                <div lwc:if={showToc} class="right-nav-bar is-sticky">
                     <dx-toc
                         title={tocTitle}
                         options={tocOptions}
@@ -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,37 @@ 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;
+    min-width: 320px;
 }
 
-.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 +64,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

@@ -1,9 +1,9 @@
 <template>
-    <template if:true={shouldRender}>
+    <template lwc:if={shouldRender}>
         <dx-brand-theme-provider brand={brand}>
             <header class={className}>
                 <dx-banner
-                    if:true={showBanner}
+                    lwc:if={showBanner}
                     banner-markup={bannerMarkup}
                 ></dx-banner>
                 <div class="header_l2">
@@ -11,34 +11,18 @@
                         <a href={headerHref} class="home-link">
                             <dx-icon
                                 class="brand-icon"
-                                if:true={isValidBrand}
+                                lwc:if={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}
+                        lwc:if={hasScopedNavItems}
                         class="header_l2_group header_l2_group-nav"
                     >
                         <div
@@ -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 lwc:if={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 lwc:if={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 lwc:if={showLatestTag}>
+                        <dx-type-badge
+                            class="latest-badge"
+                            lwc:if={latestVersion}
+                            value="Latest"
+                            size="small"
+                        ></dx-type-badge>
+                        <dx-type-badge
+                            class="not-latest-badge"
+                            lwc:else
+                            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,61 @@
+import { LightningElement, api, track } 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;
+
+    @track 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;
+    }
+
+    private get showLatestTag(): boolean {
+        return !this.hideBadge;
+    }
+}

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

@@ -1,41 +1,44 @@
 <template>
     <doc-content-layout
-        if:true={loaded}
+        lwc:if={loaded}
+        lwc:ref="docContentLayout"
         coveo-organization-id={coveoOrganizationId}
         coveo-public-access-token={coveoPublicAccessToken}
         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"
-            if:true={showVersionBanner}
+            lwc:if={showVersionBanner}
             doc-phase-info={oldVersionInfo}
             icon-name="warning"
             dismissible="true"
             ondismissphase={handleDismissVersionBanner}
         ></doc-phase>
-        <div slot="sidebar-header" class="document-pickers">
-            <dx-dropdown
+        <div lwc:if={showVersionPicker} 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}
+            lwc:if={showBreadcrumbs}
             breadcrumbs={breadcrumbs}
             pixel-per-character={breadcrumbPixelPerCharacter}
         ></doc-breadcrumbs>

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;
@@ -59,20 +66,23 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private availableLanguages: Array<DocLanguage> = [];
-    private availableVersions: Array<DocVersion> = [];
+    @track private availableVersions: Array<DocVersion> = [];
     private contentProvider?: FetchContent;
     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";
-        }
-
-        if (!this.listenerAttached) {
-            this.pageHeader.addEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = true;
+            this.sidebarFooterContent.bailHref = this.pdfUrl;
+            this.sidebarFooterContent.bailLabel = "PDF";
         }
 
-        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,12 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        (this.template.querySelector(
-            "doc-content-layout"
-        ) as any)?.setSidebarInputValue(searchParam);
+        (this.refs.docContentLayout 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)}`;
@@ -779,4 +768,8 @@ export default class DocXmlContent extends LightningElementWithState<{
             headTag[0].appendChild(robotsMeta);
         }
     }
+
+    private get showVersionPicker(): boolean {
+        return !this.disableVersion;
+    }
 }

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.