@salesforcedevs/docs-components 1.3.124-old-version-banner-7 → 1.3.127-alpha.0

package/package.json

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

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

@@ -4,21 +4,6 @@ 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:nth-child(2)::part(container) {
-    border-top: 1px solid #f9e3b6 !important;
-    border-bottom: 1px solid #f9e3b6 !important;
-}
-
-/* We don't want second component to sticky as we need to handle different cases like position */
-doc-phase:nth-child(2) {
-    position: static;
-}
-
 .api-documentation {
     margin-top: 48px;
 }

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

@@ -21,13 +21,6 @@
             if:true={docPhaseInfo}
             doc-phase-info={docPhaseInfo}
         ></doc-phase>
-        <doc-phase
-            slot="version-banner"
-            if:true={oldVersionInfo}
-            doc-phase-info={oldVersionInfo}
-            dismissible="true"
-            icon-name="warning"
-        ></doc-phase>
         <div slot="sidebar-header" class="version-picker">
             <template if:true={isVersionEnabled}>
                 <dx-dropdown

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

@@ -48,13 +48,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
      */
@@ -174,10 +167,12 @@ export default class AmfReference extends LightningElement {
     constructor() {
         super();
 
-        this._boundOnApiNavigationChanged =
-            this.onApiNavigationChanged.bind(this);
-        this._boundUpdateSelectedItemFromUrlQuery =
-            this.updateSelectedItemFromUrlQuery.bind(this);
+        this._boundOnApiNavigationChanged = this.onApiNavigationChanged.bind(
+            this
+        );
+        this._boundUpdateSelectedItemFromUrlQuery = this.updateSelectedItemFromUrlQuery.bind(
+            this
+        );
     }
 
     connectedCallback(): void {
@@ -233,8 +228,9 @@ export default class AmfReference extends LightningElement {
                 const updatedReferenceId =
                     oldReferenceIdNewReferenceIdMap[referenceId];
                 const newReferenceId = updatedReferenceId || referenceId;
-                const referenceItemConfig =
-                    this.getAmfConfigWithId(newReferenceId);
+                const referenceItemConfig = this.getAmfConfigWithId(
+                    newReferenceId
+                );
                 if (referenceItemConfig) {
                     hashBasedRedirectUrl = `${referenceItemConfig.href}?meta=${encodedMeta}`;
                 }
@@ -303,8 +299,9 @@ export default class AmfReference extends LightningElement {
                 for (let i = 0; i < allVersions.length; i++) {
                     const versionItem = allVersions[i];
                     const referenceLink = versionItem.link.href;
-                    const referenceId =
-                        this.getReferenceIdFromUrl(referenceLink);
+                    const referenceId = this.getReferenceIdFromUrl(
+                        referenceLink
+                    );
                     if (this._currentReferenceId === referenceId) {
                         // This is to navigate to respective topic in the changed version
                         versionItem.link.href = `${referenceLink}/${currentRefMeta}`;
@@ -1229,10 +1226,12 @@ export default class AmfReference extends LightningElement {
         }
         if (!isRedirecting) {
             const currentReferenceUrl = window.location.href;
-            const referenceMeta =
-                this.getMarkdownReferenceMeta(currentReferenceUrl);
-            const selectedItemRefId =
-                this.getReferenceIdFromUrl(currentReferenceUrl);
+            const referenceMeta = this.getMarkdownReferenceMeta(
+                currentReferenceUrl
+            );
+            const selectedItemRefId = this.getReferenceIdFromUrl(
+                currentReferenceUrl
+            );
             const referenceDetails = this.getRefDetailsForGivenTopicMeta(
                 selectedItemRefId,
                 referenceMeta
@@ -1271,8 +1270,9 @@ export default class AmfReference extends LightningElement {
         const name = event.detail.name;
         if (name) {
             const urlReferenceId = this.getReferenceIdFromUrl(name);
-            const specBasedReference =
-                this.isSpecBasedReference(urlReferenceId);
+            const specBasedReference = this.isSpecBasedReference(
+                urlReferenceId
+            );
             if (specBasedReference) {
                 const metaVal = this.getMetaFromUrl(name);
                 const currentSelectedMeta = this.selectedTopic
@@ -1322,8 +1322,9 @@ export default class AmfReference extends LightningElement {
             const currentReferenceId = this.getReferenceIdFromUrl(currentUrl);
             //No need to do anything if user is expanding currently selected reference
             if (referenceId !== currentReferenceId) {
-                const isSpecBasedReference =
-                    this.isSpecBasedReference(referenceId);
+                const isSpecBasedReference = this.isSpecBasedReference(
+                    referenceId
+                );
                 if (isSpecBasedReference) {
                     // Perform functionality same as item selection
                     this.onNavSelect(event);

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

@@ -1,4 +1,4 @@
-import { Json, DocPhaseInfo } from "typings/custom";
+import { Json } from "typings/custom";
 
 export interface AmfTopicType {
     referenceId: string;
@@ -46,6 +46,14 @@ export interface AmfModelRecord {
     parsedModel: Json;
 }
 
+export type DocPhase = "pilot" | "dev-preview" | "beta";
+
+export type DocPhaseEntry = {
+    phase: DocPhase;
+    title: string;
+    body: string;
+};
+
 export type ReferenceType = "markdown" | "rest-raml" | "rest-oa2" | "rest-oa3";
 
 /**
@@ -65,7 +73,7 @@ export interface ParsedMarkdownTopic {
 export interface AmfConfig {
     id: string;
     version?: string;
-    docPhase?: DocPhaseInfo;
+    docPhase?: DocPhaseEntry;
     title: string;
     href: string;
     referenceType: ReferenceType;

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.html

@@ -28,7 +28,6 @@
         </template>
         <div class="content-body-doc-phase-container">
             <slot name="doc-phase"></slot>
-            <slot name="version-banner"></slot>
             <div class="content-body-container">
                 <div class="content-body">
                     <doc-breadcrumbs

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,17 @@ export default class ContentLayout extends LightningElement {
                             : globalNavHeight + docHeaderHeight
                     }px`
                 );
+
+                const rightNavBarEl =
+                    this.template.querySelector(".right-nav-bar");
+
+                if (rightNavBarEl) {
+                    rightNavBarEl.style.top = `${
+                        globalNavHeight +
+                        docHeaderHeight +
+                        docPhaseEl.offsetHeight
+                    }px`;
+                }
             }
         });
     };

package/src/modules/doc/overview/overview.html

@@ -2,6 +2,7 @@
     <div class="container">
         <doc-phase
             if:true={docPhaseInfo}
+            max-width-size="large"
             doc-phase-info={docPhaseInfo}
         ></doc-phase>
 

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,7 +16,7 @@
 .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%;
@@ -23,6 +24,10 @@
 }
 
 .max-width-container {
+    max-width: var(--dx-g-doc-content-body-max-width);
+}
+
+.doc-phase-max-width-large .max-width-container {
     max-width: var(--dx-g-doc-content-max-width);
 }
 
@@ -36,7 +41,7 @@ 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
@@ -64,11 +69,6 @@ dx-button {
     color: var(--dx-g-blue-vibrant-50);
 }
 
-.dismissible-icon {
-    margin-left: auto;
-    cursor: pointer;
-}
-
 /* Small Devices */
 @media screen and (max-width: 480px) {
     .doc-phase-container {

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

@@ -4,7 +4,7 @@
             <div class="doc-phase-title-container">
                 <dx-icon
                     class="doc-status-icon doc-phase-icon"
-                    symbol={iconName}
+                    symbol="recipe"
                     size="large"
                     color="status-icon-color"
                 ></dx-icon>
@@ -12,27 +12,18 @@
                     {docPhaseTitle}
                 </p>
                 <dx-button
-                    if:false={dismissible}
                     variant="inline"
-                    onclick={onShowHide}
+                    onclick={onButtonClick}
                     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
-            -->
+            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>
     </div>

package/src/modules/doc/phase/phase.ts

@@ -2,48 +2,27 @@ import { LightningElement, api } from "lwc";
 import cx from "classnames";
 
 import { DocPhaseInfo } from "typings/custom";
-import { toJson, normalizeBoolean } from "dxUtils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 export default class Phase extends LightningElement {
     _docPhaseInfo: DocPhaseInfo | null = null;
-    _dismissible = false;
-    _iconName = "recipe";
 
-    @api
-    get docPhaseInfo(): DocPhaseInfo | null {
-        return this._docPhaseInfo;
-    }
-
-    set docPhaseInfo(value) {
-        this._docPhaseInfo = toJson(value);
-    }
+    isBodyHidden = false;
 
     @api
-    get dismissible(): boolean {
-        return this._dismissible;
-    }
+    maxWidthSize: "small" | "large" = "small";
 
-    set dismissible(value) {
-        if (value) {
-            this._dismissible = normalizeBoolean(value);
-        }
+    get docPhaseTitle() {
+        return this.docPhaseInfo?.title;
     }
 
     @api
-    get iconName(): string {
-        return this._iconName;
-    }
-
-    set iconName(value) {
-        if (value) {
-            this._iconName = value;
-        }
+    get docPhaseInfo(): DocPhaseInfo | null {
+        return this._docPhaseInfo;
     }
 
-    isBodyHidden = false;
-
-    get docPhaseTitle() {
-        return this.docPhaseInfo?.title;
+    set docPhaseInfo(value) {
+        this._docPhaseInfo = toJson(value);
     }
 
     get hideBodyText() {
@@ -54,7 +33,8 @@ export default class Phase extends LightningElement {
         return cx(
             "doc-status-base",
             "doc-status-container",
-            "doc-phase-container"
+            "doc-phase-container",
+            `doc-phase-max-width-${this.maxWidthSize}`
         );
     }
 
@@ -75,19 +55,7 @@ export default class Phase extends LightningElement {
         }
     }
 
-    onShowHide() {
+    onButtonClick() {
         this.isBodyHidden = !this.isBodyHidden;
     }
-
-    onDismiss() {
-        this.dispatchEvent(
-            new CustomEvent("dismissphase", {
-                detail: {
-                    docPhaseInfo: this.docPhaseInfo
-                },
-                composed: true,
-                bubbles: true
-            })
-        );
-    }
 }

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

@@ -35,9 +35,6 @@ type DropdownOption = {
 export type DocVersion = DropdownOption & {
     releaseVersion: string;
     url: string;
-    link?: {
-        href: string;
-    };
 };
 
 export type DocLanguage = DropdownOption & {

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

@@ -44,9 +44,3 @@ dx-dropdown > dx-button:hover {
     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)
-    );
-}

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

@@ -11,14 +11,6 @@
         onselect={handleSelect}
         use-old-sidebar={useOldSidebar}
     >
-        <doc-phase
-            slot="version-banner"
-            if:true={showVersionBanner}
-            doc-phase-info={oldVersionInfo}
-            icon-name="warning"
-            dismissible="true"
-            ondismissphase={handleDismissVersionBanner}
-        ></doc-phase>
         <div slot="sidebar-header" class="document-pickers">
             <dx-dropdown
                 data-type="version"

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

@@ -14,8 +14,7 @@ import {
 } from "./types";
 import { SearchSyncer } from "docUtils/SearchSyncer";
 import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
-import { oldVersionDocInfo } from "docUtils/utils";
-import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
+import { Breadcrumb, Language } from "typings/custom";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
 const handleContentError = (error): void => console.log(error);
@@ -109,33 +108,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     });
     private _allLanguages: Array<Language> = [];
 
-    private get oldVersionInfo(): DocPhaseInfo | null {
-        let info = null;
-        if (!this.disableVersion) {
-            const currentGAVersion = this.versionOptions.find(
-                (version) => !version.url.includes(version.id)
-            );
-            if (currentGAVersion?.link?.href && this.version?.id) {
-                const versionNo = currentGAVersion.id;
-                /**
-                 * Need to show old version doc banner only if the version is less than the current ga version
-                 * We should not show it to the preview version whose version is more than ga
-                 **/
-                try {
-                    if (parseFloat(this.version.id) < parseFloat(versionNo)) {
-                        info = oldVersionDocInfo(currentGAVersion.link.href);
-                    }
-                } catch (exception) {
-                    /* Ideally this use case should not happen, but just added to not to break the page*/
-                    console.warn(exception);
-                }
-            }
-        }
-        return info;
-    }
-
-    @track showVersionBanner = false;
-
     @track private pageReference: PageReference = {};
     @track breadcrumbs: Array<Breadcrumb> = [];
 
@@ -184,28 +156,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 });
         }
@@ -342,10 +293,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     private handlePopState = (event: PopStateEvent): void =>
         this.updatePageReference(this.getReferenceFromUrl(), event);
 
-    handleDismissVersionBanner() {
-        this.showVersionBanner = false;
-    }
-
     handleSelect(event: CustomEvent<{ name: string }>): void {
         event.stopPropagation();
         const { name } = event.detail;
@@ -477,10 +424,6 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.updateUrl(HistoryState.REPLACE_STATE);
         }
 
-        if (this.oldVersionInfo) {
-            this.showVersionBanner = true;
-        }
-
         if (
             this.pageReference?.contentDocumentId?.replace(/\.htm$/, "") !==
             data.id

package/src/modules/docUtils/utils/utils.ts

@@ -1,7 +0,0 @@
-export const oldVersionDocInfo = (latestVersionLink: string) => {
-    return {
-        title: "Newer Version Available",
-        body: `This content describes an older version of this product. 
-        <a style="font-weight: bold;" href="${latestVersionLink}">View Latest</a>`
-    };
-};