@salesforcedevs/docs-components 1.3.227-docheader3-alpha → 1.3.227-newdocux-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.227-docheader3-alpha",
+    "version": "1.3.227-newdocux-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -33,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

@@ -121,6 +121,8 @@ export default class AmfReference extends LightningElement {
                 this.isVersionFetched = true;
                 if (this.oldVersionInfo) {
                     this.showVersionBanner = true;
+                } else {
+                    this.latestVersion = true;
                 }
             }
         } else {
@@ -203,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
@@ -1313,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 {
@@ -96,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) {
@@ -115,7 +120,6 @@ dx-toc {
 
     .left-nav-bar {
         height: unset;
-        z-index: 10;
     }
 
     .content-body {

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

@@ -12,7 +12,7 @@
                 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}>
@@ -31,7 +31,7 @@
                 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">

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

@@ -40,10 +40,15 @@ header:not(.has-brand) > .header_l2 {
 }
 
 .has-brand .header_l2_group-title {
-    padding: 12px 32px 11px 0;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-xl)
+        calc(var(--dx-g-spacing-smd) - 1px) 0;
     min-width: 320px;
 }
 
+.no-header-content {
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
 @media (max-width: 768px) {
     .header_l2 {
         padding: 0;
@@ -63,13 +68,13 @@ header:not(.has-brand) > .header_l2 {
         margin-right: 0;
         padding: var(--dx-g-spacing-sm) 0 2px
             var(--dx-g-global-header-padding-horizontal);
-        min-height: 41px;
+        min-height: var(--dx-g-doc-header-main-nav-height);
     }
 
     .header_l2_group-nav {
         height: var(--dx-g-spacing-3xl);
         padding: 0;
-        margin-top: 3px;
+        margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
     }
 
     .header_l2_group-nav_overflow {
@@ -84,9 +89,8 @@ header:not(.has-brand) > .header_l2 {
 
     .has-brand .header_l2_group-title {
         margin-right: 0;
-        padding: var(--dx-g-spacing-sm) 0 2px
+        padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xs)
             var(--dx-g-global-header-padding-horizontal);
-        min-height: 41px;
     }
 
     .has-scoped-nav-items > .header_l2 {

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

@@ -40,4 +40,7 @@
             </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

@@ -5,7 +5,7 @@ import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
 
 const TABLET_MATCH = "980px";
-const MOBILE_MATCH = "880px";
+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,7 +23,8 @@ export default class Header extends HeaderBase {
     private _scopedNavItems!: OptionWithNested[];
     private tablet = false;
     private tabletMatchMedia!: MediaQueryList;
-    private shouldRender = false;
+    private shouldRender: boolean = false;
+    private showDocDivider: boolean = false;
 
     protected mobileBreakpoint(): string {
         return MOBILE_MATCH;
@@ -51,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 {

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/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,12 @@
         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}
@@ -24,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

@@ -81,6 +81,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
     private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
+    private latestVersion = false;
+    private previewVersion = false;
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -135,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*/
@@ -477,6 +483,8 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         if (this.oldVersionInfo) {
             this.showVersionBanner = true;
+        } else {
+            this.latestVersion = true;
         }
 
         if (