@salesforcedevs/docs-components 1.3.124-old-version-banner-6 → 1.3.124-old-version-banner-8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.124-old-version-banner-6",
+    "version": "1.3.124-old-version-banner-8",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -5,13 +5,13 @@ doc-phase {
 }
 
 /* We need to apply some borders when there are two doc phases */
-doc-phase:not(:only-child):first-child::part(container) {
-    border-top: 1px solid #f9e3b6 !important;
+doc-phase:not(:only-of-type)::part(container) {
+    border-top: 1px solid var(--dx-g-yellow-vibrant-90);
 }
 
 doc-phase:nth-child(2)::part(container) {
-    border-top: 1px solid #f9e3b6 !important;
-    border-bottom: 1px solid #f9e3b6 !important;
+    border-top: 1px solid var(--dx-g-yellow-vibrant-90);
+    border-bottom: 1px solid var(--dx-g-yellow-vibrant-90);
 }
 
 /* We don't want second component to sticky as we need to handle different cases like position */

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

@@ -23,10 +23,11 @@
         ></doc-phase>
         <doc-phase
             slot="version-banner"
-            if:true={oldVersionInfo}
+            if:true={showVersionBanner}
             doc-phase-info={oldVersionInfo}
-            dismissible="true"
             icon-name="warning"
+            dismissible="true"
+            ondismissphase={handleDismissVersionBanner}
         ></doc-phase>
         <div slot="sidebar-header" class="version-picker">
             <template if:true={isVersionEnabled}>

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

@@ -26,6 +26,8 @@ import {
     oldReferenceIdNewReferenceIdMap
 } from "./constants";
 import { restoreScroll } from "dx/scrollManager";
+import { DocPhaseInfo } from "typings/custom";
+import { oldVersionDocInfo } from "docUtils/utils";
 
 export default class AmfReference extends LightningElement {
     @api breadcrumbs?: string | null | undefined = null;
@@ -39,6 +41,7 @@ export default class AmfReference extends LightningElement {
     @api tocOptions?: string;
     @track navigation = [];
     @track versions: Array<ReferenceVersion> = [];
+    @track showVersionBanner = false;
 
     // Update this to update what component gets rendered in the content block
     @track
@@ -48,13 +51,6 @@ export default class AmfReference extends LightningElement {
         return !!this._referenceSetConfig?.versions?.length;
     }
 
-    /*TODO: Get the info based on logic*/
-    @api oldVersionInfo = {
-        title: "Newer Version Available",
-        body: `This content describes an older version of this product. <a style="font-weight: bold;" href="https://developer.salesforce.com/">
-                View Latest</a>`
-    };
-
     /**
      * Gives if the currently selected reference is spec based or not
      */
@@ -109,6 +105,12 @@ export default class AmfReference extends LightningElement {
                 this.versions = this.getVersions();
             }
             this.selectedVersion = selectedVersion;
+            if (
+                this.isSpecBasedReference(this._currentReferenceId) &&
+                this.oldVersionInfo
+            ) {
+                this.showVersionBanner = true;
+            }
         }
 
         // This is to check if the url is hash based and redirect if needed
@@ -289,6 +291,17 @@ export default class AmfReference extends LightningElement {
         return referenceId;
     }
 
+    private get oldVersionInfo(): DocPhaseInfo | null {
+        let info = null;
+        if (this.versions.length > 1 && this.selectedVersion) {
+            const currentGAVersionRef = this.versions[0];
+            if (this.selectedVersion.id !== currentGAVersionRef.id) {
+                info = oldVersionDocInfo(currentGAVersionRef.link.href);
+            }
+        }
+        return info;
+    }
+
     /**
      * @returns versions to be shown in the dropdown
      * For markdown based specs, Adds selected markdown topic url to same references
@@ -1242,6 +1255,9 @@ export default class AmfReference extends LightningElement {
             }
 
             this.versions = this.getVersions();
+            if (this.oldVersionInfo) {
+                this.showVersionBanner = true;
+            }
             this.updateDocPhase();
             this.selectedSidebarValue = window.location.pathname;
         }
@@ -1258,6 +1274,10 @@ export default class AmfReference extends LightningElement {
         );
     }
 
+    handleDismissVersionBanner() {
+        this.showVersionBanner = false;
+    }
+
     private updateNavTitleMetaTag(navTitle = ""): void {
         // this is required to update the nav title meta tag.
         // eslint-disable-next-line @lwc/lwc/no-document-query

package/src/modules/doc/content/content.css

@@ -402,3 +402,10 @@ samp,
 mark {
     background-color: var(--dx-g-yellow-vibrant-90);
 }
+
+/* offset page jump link due to fixed header */
+[id] {
+    scroll-margin-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+}

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

@@ -40,6 +40,13 @@ dx-toc {
     display: block;
 }
 
+/* offset page jump link due to fixed header */
+::slotted(doc-heading) {
+    scroll-margin-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+}
+
 .content {
     display: flex;
     position: relative;

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

@@ -1,3 +1,4 @@
+/* eslint-disable @lwc/lwc/no-document-query */
 import { LightningElement, api, track } from "lwc";
 import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
@@ -204,7 +205,10 @@ export default class ContentLayout extends LightningElement {
         const docHeaderEl = document.querySelector(
             ".sticky-doc-header"
         ) as HTMLElement;
-        const docPhaseEl = document.querySelector("doc-phase") as HTMLElement;
+
+        const docPhaseEl = this.template
+            .querySelector("[name=doc-phase]")!
+            .assignedElements()[0] as HTMLSlotElement;
 
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
@@ -237,6 +241,30 @@ export default class ContentLayout extends LightningElement {
                             : globalNavHeight + docHeaderHeight
                     }px`
                 );
+
+                // Adjust scroll margin for doc headings when doc phase is present
+                const docHeadingEls = Array.from(
+                    document.querySelectorAll("doc-heading")
+                );
+                docHeadingEls.forEach((docHeadingEl) => {
+                    docHeadingEl.style.scrollMarginTop = `${
+                        globalNavHeight +
+                        docHeaderHeight +
+                        docPhaseEl.offsetHeight
+                    }px`;
+                });
+
+                // Adjust right nav bar position when doc phase is present
+                const rightNavBarEl =
+                    this.template.querySelector(".right-nav-bar");
+
+                if (rightNavBarEl) {
+                    rightNavBarEl.style.top = `${
+                        globalNavHeight +
+                        docHeaderHeight +
+                        docPhaseEl.offsetHeight
+                    }px`;
+                }
             }
         });
     };

package/src/modules/doc/phase/phase.css

@@ -4,6 +4,7 @@
 
 :host {
     --doc-c-phase-top: 0;
+    --doc-c-phase-container-align-items: flex-start;
 
     position: sticky;
     top: var(--doc-c-phase-top);
@@ -15,28 +16,25 @@
 .doc-phase-container {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: var(--doc-c-phase-container-align-items);
     padding-left: var(--dx-g-global-header-padding-horizontal);
     padding-right: var(--dx-g-global-header-padding-horizontal);
     width: 100%;
     border: none;
 }
 
-.max-width-container {
-    max-width: var(--dx-g-doc-content-max-width);
-}
-
 .doc-phase-title-container {
     display: flex;
     flex-direction: row;
     align-items: center;
+    width: 100%;
 }
 
 dx-button {
     margin-left: auto;
 }
 
-/* 
+/*
     NOTE: Here we are assuming that indicator height won't go beyond 1000px.
 
     It's one of the suggested way to achieve the expand/collapse animation

package/src/modules/doc/phase/phase.html

@@ -1,39 +1,37 @@
 <template>
     <div class={className} part="container">
-        <div class="max-width-container">
-            <div class="doc-phase-title-container">
-                <dx-icon
-                    class="doc-status-icon doc-phase-icon"
-                    symbol={iconName}
-                    size="large"
-                    color="status-icon-color"
-                ></dx-icon>
-                <p class="doc-status-title doc-phase-title dx-text-body-3">
-                    {docPhaseTitle}
-                </p>
-                <dx-button
-                    if:false={dismissible}
-                    variant="inline"
-                    onclick={onShowHide}
-                    aria-label={hideBodyText}
-                >
-                    {hideBodyText}
-                </dx-button>
-                <dx-icon
-                    if:true={dismissible}
-                    class="dismissible-icon"
-                    onclick={onDismiss}
-                    symbol="close"
-                    size="large"
-                    color="status-icon-color"
-                ></dx-icon>
-            </div>
-            <!--
-                NOTE: Here we are rendering mark up using lwc:dom & innerHTML
-                option instead of slots because the html markup will come as a
-                property to the component from a configuration
-            -->
-            <span lwc:dom="manual" class={bodyClassName}></span>
+        <div class="doc-phase-title-container">
+            <dx-icon
+                class="doc-status-icon doc-phase-icon"
+                symbol={iconName}
+                size="large"
+                color="status-icon-color"
+            ></dx-icon>
+            <p class="doc-status-title doc-phase-title dx-text-body-3">
+                {docPhaseTitle}
+            </p>
+            <dx-button
+                if:false={dismissible}
+                variant="inline"
+                onclick={onShowHide}
+                aria-label={hideBodyText}
+            >
+                {hideBodyText}
+            </dx-button>
+            <dx-icon
+                class="dismissible-icon"
+                onclick={onDismiss}
+                if:true={dismissible}
+                symbol="close"
+                size="large"
+                color="status-icon-color"
+            ></dx-icon>
         </div>
+        <!--
+            NOTE: Here we are rendering mark up using lwc:dom & innerHTML
+            option instead of slots because the html markup will come as a
+            property to the component from a configuration
+        -->
+        <span lwc:dom="manual" class={bodyClassName}></span>
     </div>
 </template>

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

@@ -184,28 +184,7 @@ export default class DocXmlContent extends LightningElementWithState<{
                 ));
 
         if (anchorEl) {
-            const globalNavHeader = document.querySelector(
-                ".global-nav-container"
-            ) as HTMLElement;
-            const docHeader = document.querySelector(
-                "doc-header"
-            ) as HTMLElement;
-            const headerHeight = globalNavHeader.offsetHeight;
-            const docHeaderHeight = docHeader.offsetHeight;
-            const rect = anchorEl.getBoundingClientRect();
-
-            // Calculate the scroll position required to bring the element into view
-            const scrollTop =
-                window.pageYOffset || document.documentElement.scrollTop;
-            const scrollX = rect.left + window.pageXOffset;
-            const scrollY =
-                rect.top + scrollTop - (headerHeight + docHeaderHeight); // subtract the header height from the top position
-
-            // Scroll to the calculated position
-            window.scrollTo({
-                top: scrollY,
-                left: scrollX
-            });
+            anchorEl.scrollIntoView();
 
             this.setState({ internalLinkClicked: false });
         }