@salesforcedevs/docs-components 0.70.1 → 0.74.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.70.1",
+    "version": "0.74.5",
     "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": "6f8ff92765133cf354bfb06a36a6249027c5c80e"
+    "gitHead": "2a5e20148fd0661cfd71f37f1e3e6bd519ae3ff6"
 }

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,50 @@
                     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/content/content.ts

@@ -150,7 +150,7 @@ export default class Content extends LightningElement {
                     is: ContentCallout
                 });
                 const detailEls = calloutEl.querySelectorAll(
-                    "p, div.data, ol, ul, p+.codeSection, .mediaBd > span.ph"
+                    "p, .p, div.data, ol, ul, p+.codeSection, p~.codeSection, div >.codeSection, .mediaBd > span.ph"
                 );
                 detailEls.forEach((detailEl) => {
                     if (detailEl.innerHTML.trim() !== "") {
@@ -159,7 +159,7 @@ export default class Content extends LightningElement {
                 });
 
                 let flag = 1;
-                for (let i = 0; i < detailEls.length; i++) {
+                for (let i: number = 0; i < detailEls.length; i++) {
                     flag &= detailEls[i].innerHTML.trim() === "";
                 }
 

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);
         }
@@ -111,6 +111,14 @@ 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",

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 {
@@ -587,6 +591,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         const currentNode = this.tocMap[contentDocumentId];
+
         
         if(currentNode?.parent) {
             this.breadcrumbs = this.nodeToBreadcrumb(currentNode);
@@ -604,11 +609,8 @@ export default class DocXmlContent extends LightningElementWithState<{
             label: node.label
         };
 
-        if(node.parent) {
-            return [
-                ...this.nodeToBreadcrumb(node.parent),
-                item
-            ];
+        if (node.parent) {
+            return [...this.nodeToBreadcrumb(node.parent), item];
         }
 
         return [item];