@salesforcedevs/docs-components 1.3.268-ref-rnb-tab1 → 1.3.282-scroll-fix-alpha1

package/lwc.config.json

@@ -15,7 +15,6 @@
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",
-        "doc/lwcReferenceLayout",
         "doc/overview",
         "doc/phase",
         "doc/versionPicker",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.268-ref-rnb-tab1",
+    "version": "1.3.282-scroll-fix-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -385,6 +385,7 @@ mark {
 /* 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)
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-4xl) - var(--dx-g-spacing-xs)
     );
 }

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

@@ -1 +1,127 @@
-@import "docHelpers/contentLayoutStyle";
+:host {
+    --dx-c-content-vertical-spacing: var(--dx-g-spacing-lg);
+    --dx-c-content-sidebar-sticky-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+    --dx-c-sidebar-height: calc(
+        100vh -
+            calc(
+                var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+            )
+    );
+
+    display: block;
+}
+
+doc-breadcrumbs {
+    --dx-c-popover-z-index: 5;
+
+    display: block;
+    margin-bottom: var(--dx-g-spacing-2xl);
+}
+
+dx-sidebar,
+dx-sidebar-old {
+    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
+
+    z-index: calc(var(--dx-g-z-index-100) + 5);
+}
+
+dx-toc {
+    --dx-c-toc-width: unset;
+
+    height: calc(100% - var(--dx-c-content-vertical-spacing) * 2);
+    margin: var(--dx-c-content-vertical-spacing) 0;
+    overflow-y: auto;
+}
+
+dx-sidebar,
+dx-toc {
+    display: block;
+}
+
+/* offset page jump link due to fixed header */
+::slotted(doc-heading) {
+    scroll-margin-top: calc(var(--dx-c-content-sidebar-sticky-top) + 30px);
+}
+
+.content {
+    display: flex;
+    position: relative;
+}
+
+.content-body-doc-phase-container {
+    flex: 1;
+    border-left: 1px solid var(--dx-g-gray-90);
+}
+
+.content-body-container {
+    display: flex;
+    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-md) 0 0;
+    max-width: 900px;
+    flex: 1;
+    width: 0;
+}
+
+.is-sticky {
+    align-self: flex-start;
+    position: sticky;
+    top: var(--dx-c-content-sidebar-sticky-top);
+}
+
+.right-nav-bar {
+    margin-left: var(--dx-g-spacing-2xl);
+}
+
+@media screen and (max-width: 1024px) {
+    .right-nav-bar {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .content-body {
+        margin-top: var(--dx-c-content-vertical-spacing);
+    }
+
+    .content-body-doc-phase-container {
+        border-left: 0;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .is-sticky {
+        width: 100%;
+    }
+
+    .content {
+        flex-direction: column;
+    }
+
+    .content-body-container {
+        padding-right: 0;
+        overflow-x: auto;
+        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
+    }
+
+    .left-nav-bar {
+        height: unset;
+    }
+
+    .content-body {
+        margin-left: var(--dx-g-spacing-mlg, 20px);
+        margin-right: var(--dx-g-spacing-mlg, 20px);
+    }
+}

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

@@ -37,7 +37,6 @@ export default class ContentLayout extends LightningElement {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
-    @api rnbByTabId?: string = "";
     @api languages!: OptionWithLink[];
     @api language!: string;
     @api bailHref!: string;
@@ -83,7 +82,7 @@ export default class ContentLayout extends LightningElement {
     }
 
     @track
-    _sidebarContent: unknown;
+    private _sidebarContent: unknown;
 
     private _breadcrumbs = null;
 
@@ -131,10 +130,6 @@ export default class ContentLayout extends LightningElement {
         return window.location.pathname;
     }
 
-    get showTabBasedRNB() {
-        return this.rnbByTabId ? true : false;
-    }
-
     get showBreadcrumbs(): boolean {
         return (
             this.breadcrumbs != null && (this.breadcrumbs as any[]).length > 1
@@ -153,24 +148,8 @@ export default class ContentLayout extends LightningElement {
             );
             this.searchSyncer.init();
         }
-
-        if (this.showTabBasedRNB) {
-            window.addEventListener("tabchanged", this.onTabChanged);
-        }
     }
 
-    onTabChanged = () => {
-        this.updateRNB();
-    };
-
-    updateRNB = () => {
-        const headingElements = this.getHeadingElements();
-        headingElements.forEach((headingElement) => {
-            headingElement.hash = headingElement.attributes.hash?.nodeValue;
-        });
-        this.updateTocItems(headingElements);
-    };
-
     renderedCallback(): void {
         /**
          * Note: We are adding timeout because chrome is optimizing and not triggering recent renderedCallback though elements reference is changed
@@ -198,10 +177,6 @@ export default class ContentLayout extends LightningElement {
             "highlightedtermchange",
             this.updateHighlighted
         );
-
-        if (this.showTabBasedRNB) {
-            window.removeEventListener("tabchanged", this.onTabChanged);
-        }
         window.removeEventListener("scroll", this.adjustNavPosition);
         window.removeEventListener("resize", this.adjustNavPosition);
         this.searchSyncer.dispose();
@@ -221,29 +196,6 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
-    private getHeadingElements() {
-        let headingElements = document.querySelectorAll(TOC_HEADER_TAG);
-        if (this.showTabBasedRNB) {
-            const tabPanelListItems =
-                document.querySelectorAll("dx-tab-panel-list");
-            for (const tabPanelListItem of tabPanelListItems) {
-                if (tabPanelListItem.id === this.rnbByTabId) {
-                    const tabPanelItems =
-                        tabPanelListItem.querySelectorAll("dx-tab-panel");
-                    for (const tabPanelItem of tabPanelItems) {
-                        if (tabPanelItem.active) {
-                            headingElements =
-                                tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
-                            break;
-                        }
-                    }
-                    break;
-                }
-            }
-        }
-        return headingElements;
-    }
-
     /*
         This is a workaround for the global nav sticky header being decoupled from the doc header & doc phase.
         We have to account for the global nav changing height due to animations.
@@ -289,6 +241,12 @@ export default class ContentLayout extends LightningElement {
                 `${globalNavHeight}px`
             );
 
+            const rnbEl = this.template.querySelector(".right-nav-bar");
+
+            if (rnbEl) {
+                rnbEl.style.top = `${globalNavHeight + docHeaderHeight + 30}px`;
+            }
+
             // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
             if (docPhaseEl) {
                 docPhaseEl.style.setProperty(
@@ -303,7 +261,9 @@ export default class ContentLayout extends LightningElement {
                 );
 
                 // Adjust scroll margin for doc headings when doc phase is present
-                const docHeadingEls = this.getHeadingElements();
+                const docHeadingEls = Array.from(
+                    document.querySelectorAll("doc-heading")
+                );
                 docHeadingEls.forEach((docHeadingEl) => {
                     (docHeadingEl as any).style.scrollMarginTop = `${
                         globalNavHeight +
@@ -359,7 +319,7 @@ export default class ContentLayout extends LightningElement {
         );
 
         // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
-        const headingElements = this.getHeadingElements();
+        const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
         for (const headingElement of headingElements as any) {
             // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
             const id = headingElement.getAttribute("id")!;
@@ -375,34 +335,47 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
-    onSlotChange(): void {
-        this.updateRNB();
-    }
+    onSlotChange(event: Event): void {
+        const slotElements = (
+            event.target as HTMLSlotElement
+        ).assignedElements();
+
+        if (slotElements.length) {
+            this.contentLoaded = true;
+            const slotContentElement = slotElements[0];
+            const headingElements =
+                slotContentElement.ownerDocument?.getElementsByTagName(
+                    TOC_HEADER_TAG
+                );
 
-    // eslint-disable-next-line no-undef
-    private updateTocItems(headingElements: NodeListOf<Element>): void {
-        const tocOptions = [];
-
-        for (const headingElement of headingElements) {
-            headingElement.id = headingElement.hash;
-
-            // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
-            const headingAriaLevel =
-                headingElement.attributes["aria-level"]?.nodeValue || "2";
-            const isH2 = headingAriaLevel === "2";
-
-            if (isH2) {
-                const tocItem = {
-                    anchor: `#${headingElement.hash}`,
-                    id: headingElement.id,
-                    label: headingElement.title
-                };
-                tocOptions.push(tocItem);
-                this.tocOptionIdsSet.add(headingElement.id);
+            for (const headingElement of headingElements as any) {
+                // Sometimes elements hash is not being set when slot content is wrapped with div
+                headingElement.hash = headingElement.attributes.hash?.nodeValue;
+            }
+
+            const tocOptions = [];
+
+            for (const headingElement of headingElements as any) {
+                headingElement.id = headingElement.hash;
+
+                // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
+                const headingAriaLevel =
+                    headingElement.attributes["aria-level"]?.nodeValue || "2";
+                const isH2 = headingAriaLevel === "2";
+
+                if (isH2) {
+                    const tocItem = {
+                        anchor: `#${headingElement.hash}`,
+                        id: headingElement.id,
+                        label: headingElement.title
+                    };
+                    tocOptions.push(tocItem);
+                    this.tocOptionIdsSet.add(headingElement.id);
+                }
             }
-        }
 
-        this._tocOptions = tocOptions;
+            this._tocOptions = tocOptions;
+        }
     }
 
     private disconnectObserver(): void {

package/src/modules/doc/lwcReferenceLayout/lwcReferenceLayout.css

@@ -1 +0,0 @@
-@import "docHelpers/contentLayoutStyle";

package/src/modules/doc/lwcReferenceLayout/lwcReferenceLayout.html

@@ -1,53 +0,0 @@
-<template>
-    <div class="content">
-        <template if:true={useOldSidebar}>
-            <dx-sidebar-old
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                ontogglesidebar={onToggleSidebar}
-            >
-                <slot name="sidebar-header" slot="header"></slot>
-            </dx-sidebar-old>
-        </template>
-        <template if:false={useOldSidebar}>
-            <dx-sidebar
-                class="is-sticky left-nav-bar"
-                trees={sidebarContent}
-                value={sidebarValue}
-                header={sidebarHeader}
-                coveo-organization-id={coveoOrganizationId}
-                coveo-public-access-token={coveoPublicAccessToken}
-                coveo-search-hub={coveoSearchHub}
-                coveo-advanced-query-config={coveoAdvancedQueryConfig}
-                ontogglesidebar={onToggleSidebar}
-            >
-                <slot name="sidebar-header" slot="header"></slot>
-            </dx-sidebar>
-        </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
-                        if:true={showBreadcrumbs}
-                        breadcrumbs={breadcrumbs}
-                    ></doc-breadcrumbs>
-                    <slot onslotchange={onSlotChange}></slot>
-                    <doc-sprig-survey
-                        if:true={shouldDisplayFeedback}
-                    ></doc-sprig-survey>
-                </div>
-                <div if:true={showToc} class="right-nav-bar is-sticky">
-                    <dx-toc
-                        title={tocTitle}
-                        options={tocOptions}
-                        value={tocValue}
-                    ></dx-toc>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

package/src/modules/doc/lwcReferenceLayout/lwcReferenceLayout.ts

@@ -1,36 +0,0 @@
-import ContentLayout from "doc/contentLayout";
-import { api } from "lwc";
-import { toJson } from "dxUtils/normalizers";
-import { ParsedTopic } from "typings/custom";
-
-export default class LWCReferenceLayout extends ContentLayout {
-    @api rnbByTabId?: string = "lwc-doc-tab";
-
-    @api
-    get sidebarContent() {
-        return this._sidebarContent;
-    }
-
-    set sidebarContent(value) {
-        console.log("LWCReferenceLayout set sidebarContent");
-        if (value) {
-            const topics: ParsedTopic[] = toJson(value);
-            const currentUrl = window.location.href;
-            if (currentUrl.endsWith(topics[0].name)) {
-                const topicIndex = topics.findIndex(
-                    (parentTopic: ParsedTopic) =>
-                        parentTopic.label === "Components"
-                );
-                if (topicIndex !== -1) {
-                    // Expand the Components topic
-                    topics[topicIndex].isExpanded = true;
-                    // Expand children of the component topic as well
-                    topics[topicIndex].children?.forEach(
-                        (topic: ParsedTopic) => (topic.isExpanded = true)
-                    );
-                }
-            }
-            this._sidebarContent = topics;
-        }
-    }
-}

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -1,129 +0,0 @@
-:host {
-    --dx-c-content-vertical-spacing: var(--dx-g-spacing-lg);
-    --dx-c-content-sidebar-sticky-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
-    );
-    --dx-c-sidebar-height: calc(
-        100vh -
-            calc(
-                var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
-            )
-    );
-
-    display: block;
-}
-
-doc-breadcrumbs {
-    --dx-c-popover-z-index: 5;
-
-    display: block;
-    margin-bottom: var(--dx-g-spacing-2xl);
-}
-
-dx-sidebar,
-dx-sidebar-old {
-    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
-
-    z-index: calc(var(--dx-g-z-index-100) + 5);
-}
-
-dx-toc {
-    --dx-c-toc-width: unset;
-
-    height: calc(100% - var(--dx-c-content-vertical-spacing) * 2);
-    margin: var(--dx-c-content-vertical-spacing) 0;
-    overflow-y: auto;
-}
-
-dx-sidebar,
-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;
-}
-
-.content-body-doc-phase-container {
-    flex: 1;
-    border-left: 1px solid var(--dx-g-gray-90);
-}
-
-.content-body-container {
-    display: flex;
-    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-md) 0 0;
-    max-width: 900px;
-    flex: 1;
-    width: 0;
-}
-
-.is-sticky {
-    align-self: flex-start;
-    position: sticky;
-    top: var(--dx-c-content-sidebar-sticky-top);
-}
-
-.right-nav-bar {
-    margin-left: var(--dx-g-spacing-2xl);
-}
-
-@media screen and (max-width: 1024px) {
-    .right-nav-bar {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 800px) {
-    .content-body {
-        margin-top: var(--dx-c-content-vertical-spacing);
-    }
-
-    .content-body-doc-phase-container {
-        border-left: 0;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .is-sticky {
-        width: 100%;
-    }
-
-    .content {
-        flex-direction: column;
-    }
-
-    .content-body-container {
-        padding-right: 0;
-        overflow-x: auto;
-        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
-    }
-
-    .left-nav-bar {
-        height: unset;
-    }
-
-    .content-body {
-        margin-left: var(--dx-g-spacing-mlg, 20px);
-        margin-right: var(--dx-g-spacing-mlg, 20px);
-    }
-}