@salesforcedevs/docs-components 1.3.228-version-picker1 → 1.3.228-version-picker3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.228-version-picker1",
+    "version": "1.3.228-version-picker3",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -205,7 +205,6 @@ export default class AmfReference extends LightningElement {
     private selectedReferenceDocPhase?: string | null = null;
     private _expandChildren?: boolean = false;
     private isVersionFetched = false;
-    @track
     private latestVersion = false;
 
     /**

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

@@ -2,6 +2,8 @@
 
 /* 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);
 }
 
@@ -12,9 +14,16 @@
     border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
-dx-button {
+.version-picker-button {
     display: flex;
-    width: var(--doc-version-picker-width, 272px);
+    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);
 }
 
 /**

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

@@ -6,6 +6,7 @@
             width="var(--doc-version-picker-width)"
         >
             <dx-button
+                class="version-picker-button"
                 variant="tertiary"
                 size="small"
                 icon-symbol="chevrondown"
@@ -15,18 +16,20 @@
                     <p class="selected-version-label">
                         {selectedVersion.label}
                     </p>
-                    <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 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>

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

@@ -1,4 +1,4 @@
-import { LightningElement, api, track } from "lwc";
+import { LightningElement, api } from "lwc";
 
 import { AnalyticsPayload, OptionWithNested } from "typings/custom";
 
@@ -8,11 +8,10 @@ export default class VersionPicker extends LightningElement {
     @api analyticsEvent?: string;
     @api analyticsPayload?: AnalyticsPayload;
 
-    @track
     private _versions!: OptionWithNested[];
     private _selectedVersion?: OptionWithNested;
-    @track
     private _latestVersion: boolean = false;
+    private _hideBadge: boolean = false;
 
     @api
     get versions() {
@@ -29,7 +28,9 @@ export default class VersionPicker extends LightningElement {
     }
 
     set selectedVersion(value: OptionWithNested) {
-        this._selectedVersion = toJson(value);
+        if (value) {
+            this._selectedVersion = toJson(value);
+        }
     }
 
     @api
@@ -38,9 +39,16 @@ export default class VersionPicker extends LightningElement {
     }
 
     set latestVersion(value) {
-        if (value) {
-            this._latestVersion = normalizeBoolean(value);
-        }
+        this._latestVersion = normalizeBoolean(value);
+    }
+
+    @api
+    get hideBadge() {
+        return this._hideBadge;
+    }
+
+    set hideBadge(value) {
+        this._hideBadge = normalizeBoolean(value);
     }
 
     private get showVersionPicker() {

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

@@ -32,6 +32,7 @@
                 versions={versionOptions}
                 selected-version={version}
                 latest-version={latestVersion}
+                hide-badge={previewVersion}
             ></doc-version-picker>
         </div>
         <doc-breadcrumbs

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

@@ -81,8 +81,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
     private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
-    @track
     private latestVersion = false;
+    private previewVersion = false;
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -137,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*/