@salesforcedevs/docs-components 0.74.3 → 0.79.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.74.3",
+    "version": "0.79.1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "5b1dbe02a568ae6db02402a2d9e420b5b09b0f47"
+    "gitHead": "31fa5005b9be9a1e38f71f6ee6a8cd45f75eb40a"
 }

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

@@ -184,7 +184,7 @@ export default class AmfReference extends LightningElement {
         );
         this._scrollInterval = window.setInterval(() => {
             this.saveScroll();
-          }, 1000);
+        }, 1000);
     }
 
     disconnectedCallback(): void {
@@ -200,11 +200,16 @@ export default class AmfReference extends LightningElement {
     }
 
     saveScroll() {
-        window.history.replaceState({ scrollValue: document.body.scrollTop }, "", window.location.href);
+        window.history.replaceState(
+            { scrollValue: document.body.scrollTop },
+            "",
+            window.location.href
+        );
     }
 
     restoreScroll() {
-        document.body.scrollTop = document.documentElement.scrollTop = window.history.state?.scrollValue;
+        document.body.scrollTop = document.documentElement.scrollTop =
+            window.history.state?.scrollValue;
     }
 
     renderedCallback(): void {
@@ -776,7 +781,7 @@ export default class AmfReference extends LightningElement {
             const encodedMeta = this.getUrlEncoded(meta);
 
             window.history.pushState(
-                { },
+                {},
                 "",
                 `${parentReferencePath}?meta=${encodedMeta}`
             );
@@ -885,7 +890,6 @@ export default class AmfReference extends LightningElement {
         elementId: string,
         meta: string
     ): void {
-
         this.selectedTopic = {
             referenceId,
             parentReferencePath,
@@ -1227,8 +1231,11 @@ export default class AmfReference extends LightningElement {
                     window.location.href = redirectReferenceUrl;
                 } else {
                     // This is for CASE 1,3 and 4 mentioned above, Where we need to update the browser history
-                    window.history.replaceState(window.history.state, "", redirectReferenceUrl);
-
+                    window.history.replaceState(
+                        window.history.state,
+                        "",
+                        redirectReferenceUrl
+                    );
                 }
             }
         }
@@ -1274,7 +1281,7 @@ export default class AmfReference extends LightningElement {
 
     onNavSelect(event: CustomEvent): void {
         this.saveScroll();
-        
+
         const name = event.detail.name;
         if (name) {
             const urlReferenceId = this.getReferenceIdFromUrl(name);

package/src/modules/doc/breadcrumbs/breadcrumbs.html

@@ -1,7 +1,7 @@
 <template>
     <nav role="navigation" aria-label={ariaLabel}>
-        <template if:false={renderSmallVariant}>
-            <template if:true={renderFirstCrumb}>
+        <template if:true={displayCrumbs}>
+            <template if:false={renderSmallVariant}>
                 <doc-breadcrumb-item
                     analytics-event={analyticsEventName}
                     analytics-base-payload={analyticsBasePayload}
@@ -9,50 +9,52 @@
                     label={firstCrumb.label}
                 ></doc-breadcrumb-item>
                 <span class="breadcrumb-item_slash">/</span>
+                <template if:true={renderDropdown}>
+                    <dx-dropdown
+                        if:true={renderDropdown}
+                        analytics-event={analyticsEventName}
+                        analytics-base-payload={analyticsBasePayload}
+                        options={dropdownOptions}
+                        open-on-hover
+                        placement="bottom"
+                        suppress-gtm-nav-headings
+                        variant="indented"
+                        width="fit-content"
+                    >
+                        <dx-button
+                            aria-label="Open Breadcrumbs Dropdown"
+                            icon-size="large"
+                            icon-symbol="threedots"
+                            variant="tertiary"
+                        ></dx-button>
+                    </dx-dropdown>
+                    <span class="breadcrumb-item_slash">/</span>
+                </template>
+                <template for:each={breadcrumbItems} for:item="breadcrumb">
+                    <doc-breadcrumb-item
+                        analytics-event={analyticsEventName}
+                        analytics-base-payload={analyticsBasePayload}
+                        href={breadcrumb.href}
+                        key={breadcrumb.id}
+                        label={breadcrumb.label}
+                    ></doc-breadcrumb-item>
+                    <span class="breadcrumb-item_slash" key={breadcrumb.label}>
+                        /
+                    </span>
+                </template>
+                <doc-breadcrumb-item
+                    label={lastCrumb.label}
+                ></doc-breadcrumb-item>
             </template>
-            <template if:true={renderDropdown}>
-                <dx-dropdown
-                    if:true={renderDropdown}
-                    analytics-event={analyticsEventName}
-                    analytics-base-payload={analyticsBasePayload}
-                    options={dropdownOptions}
-                    open-on-hover
-                    placement="bottom"
-                    suppress-gtm-nav-headings
-                    variant="indented"
-                    width="fit-content"
-                >
-                    <dx-button
-                        aria-label="Open Breadcrumbs Dropdown"
-                        icon-size="large"
-                        icon-symbol="threedots"
-                        variant="tertiary"
-                    ></dx-button>
-                </dx-dropdown>
-                <span class="breadcrumb-item_slash">/</span>
-            </template>
-            <template for:each={breadcrumbItems} for:item="breadcrumb">
+            <template if:true={renderSmallVariant}>
                 <doc-breadcrumb-item
                     analytics-event={analyticsEventName}
                     analytics-base-payload={analyticsBasePayload}
-                    href={breadcrumb.href}
-                    key={breadcrumb.id}
-                    label={breadcrumb.label}
+                    href={lastLinkCrump.href}
+                    label={lastLinkCrump.label}
+                    variant="back-arrow"
                 ></doc-breadcrumb-item>
-                <span class="breadcrumb-item_slash" key={breadcrumb.label}>
-                    /
-                </span>
             </template>
-            <doc-breadcrumb-item label={lastCrumb.label}></doc-breadcrumb-item>
-        </template>
-        <template if:true={renderSmallVariant}>
-            <doc-breadcrumb-item
-                analytics-event={analyticsEventName}
-                analytics-base-payload={analyticsBasePayload}
-                href={lastLinkCrump.href}
-                label={lastLinkCrump.label}
-                variant="back-arrow"
-            ></doc-breadcrumb-item>
         </template>
     </nav>
 </template>

package/src/modules/doc/breadcrumbs/breadcrumbs.ts

@@ -92,7 +92,7 @@ export default class Breadcrumbs extends LightningElement {
         );
     }
 
-    private get renderFirstCrumb(): boolean {
+    private get displayCrumbs(): boolean {
         return this.breadcrumbs.length > 1;
     }
 

package/src/modules/doc/contentCallout/contentCallout.html

@@ -4,7 +4,9 @@
             <dx-icon symbol={iconName} size="large" color={iconColor}></dx-icon>
         </div>
         <div class="dx-callout-content">
-            <p class="doc-status-title dx-callout-title dx-text-body-3">{title}</p>
+            <p class="doc-status-title dx-callout-title dx-text-body-3">
+                {title}
+            </p>
             <span class="dx-callout-body dx-text-body-3">
                 <slot onslotchange={onSlotChange}></slot>
             </span>

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

@@ -29,10 +29,12 @@
             <div class="content-body-container">
                 <div class="content-body">
                     <doc-breadcrumbs
-                        if:true={breadcrumbs}
+                        if:true={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
                     ></doc-breadcrumbs>
-                    <slot onslotchange={onSlotChange}></slot>
+                    <div style={docContentStyle}>
+                        <slot onslotchange={onSlotChange}></slot>
+                    </div>
                 </div>
                 <div class="right-nav-bar is-sticky">
                     <dx-toc

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

@@ -38,7 +38,7 @@ export default class ContentLayout extends LightningElement {
         return this._breadcrumbs;
     }
 
-    set breadcrumbs(value) {
+    set breadcrumbs(value): [] {
         if (value) {
             this._breadcrumbs = toJson(value);
         }
@@ -79,7 +79,7 @@ export default class ContentLayout extends LightningElement {
     private lastScrollPosition: number;
     private observer?: IntersectionObserver;
     private hasRendered: boolean = false;
-    
+
     private searchSyncer = new SearchSyncer({
         callbacks: {
             onUrlChange: (nextSearchString: string): void => {
@@ -111,6 +111,16 @@ export default class ContentLayout extends LightningElement {
         return window.location.pathname;
     }
 
+    get showBreadcrumbs(): boolean {
+        return (
+            this.breadcrumbs != null && (this.breadcrumbs as any[]).length > 1
+        );
+    }
+
+    get docContentStyle(): string {
+        return this.showBreadcrumbs ? "" : "margin-top: 48px";
+    }
+
     connectedCallback(): void {
         const hasParentHighlightListener = closest(
             "doc-xml-content",
@@ -126,9 +136,7 @@ export default class ContentLayout extends LightningElement {
 
         this._scrollInterval = window.setInterval(() => {
             this.saveScroll();
-          }, 1000);
-
-          
+        }, 1000);
     }
 
     renderedCallback(): void {
@@ -141,7 +149,7 @@ export default class ContentLayout extends LightningElement {
             this.attachInteractionObserver,
             OBSERVER_ATTACH_WAIT_TIME
         );
-        if(!this.hasRendered) {
+        if (!this.hasRendered) {
             this.hasRendered = true;
             this.restoreScroll();
         }
@@ -160,11 +168,16 @@ export default class ContentLayout extends LightningElement {
     }
 
     saveScroll() {
-        window.history.replaceState({ scrollValue: document.body.scrollTop }, "", window.location.href);
+        window.history.replaceState(
+            { scrollValue: document.body.scrollTop },
+            "",
+            window.location.href
+        );
     }
 
     restoreScroll() {
-        document.body.scrollTop = document.documentElement.scrollTop = window.history.state?.scrollValue;
+        document.body.scrollTop = document.documentElement.scrollTop =
+            window.history.state?.scrollValue;
     }
 
     clearRenderObserverTimer = () => {
@@ -224,8 +237,7 @@ export default class ContentLayout extends LightningElement {
                 );
             for (const headingElement of headingElements) {
                 // Sometimes elements hash is not being set when slot content is wrapped with div
-                headingElement.hash =
-                    headingElement.attributes.hash?.nodeValue;
+                headingElement.hash = headingElement.attributes.hash?.nodeValue;
             }
             const tocOptions = [];
             for (const headingElement of headingElements) {

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

@@ -7,7 +7,9 @@
                 size="large"
                 color="status-icon-color"
             ></dx-icon>
-            <p class="doc-status-title doc-phase-title dx-text-body-3">{docPhaseTitle}</p>
+            <p class="doc-status-title doc-phase-title dx-text-body-3">
+                {docPhaseTitle}
+            </p>
             <dx-button
                 variant="inline"
                 onclick={onButtonClick}

package/src/modules/doc/toc/toc.html

@@ -96,7 +96,9 @@
                                                                     <a
                                                                         href={child5.a_attr.href}
                                                                         data-id={child5.id}
-                                                                        class="nav1"
+                                                                        class="
+                                                                            nav1
+                                                                        "
                                                                         onclick={handleNavClick}
                                                                     >
                                                                         {child5.text}

package/src/modules/doc/toolbar/toolbar.ts

@@ -40,9 +40,9 @@ export default class Toolbar extends LightningElement {
             "select[name=languages]"
         ) as HTMLSelectElement;
         if (languageEl) {
-            const languageValue = (languageEl[
-                languageEl.selectedIndex
-            ] as HTMLOptionElement).value;
+            const languageValue = (
+                languageEl[languageEl.selectedIndex] as HTMLOptionElement
+            ).value;
             this.dispatchEvent(
                 new CustomEvent("languageselected", {
                     detail: {
@@ -61,9 +61,9 @@ export default class Toolbar extends LightningElement {
             "select[name=versions]"
         ) as HTMLSelectElement;
         if (versionEl) {
-            const versionValue = (versionEl[
-                versionEl.selectedIndex
-            ] as HTMLOptionElement).value;
+            const versionValue = (
+                versionEl[versionEl.selectedIndex] as HTMLOptionElement
+            ).value;
             this.dispatchEvent(
                 new CustomEvent("versionselected", {
                     detail: {

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

@@ -34,6 +34,7 @@
             docs-data={docContent}
             page-reference={pageReference}
             onnavclick={handleNavClick}
+            style={docContentStyle}
         ></doc-content>
     </doc-content-layout>
 </template>

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

@@ -577,7 +577,11 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     get showBreadcrumbs(): boolean {
-        return this.breadcrumbs && this.breadcrumbs.length > 0;
+        return this.breadcrumbs && this.breadcrumbs.length > 1;
+    }
+
+    get docContentStyle(): string {
+        return this.showBreadcrumbs ? "" : "margin-top: 48px";
     }
 
     private buildBreadcrumbs(): void {
@@ -588,8 +592,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         const currentNode = this.tocMap[contentDocumentId];
 
-        
-        if(currentNode?.parent) {
+        if (currentNode?.parent) {
             this.breadcrumbs = this.nodeToBreadcrumb(currentNode);
         } else {
             this.breadcrumbs = [];