@salesforcedevs/docs-components 0.57.0-alpha-1 → 0.57.1-callout-fix2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.57.0-alpha-1",
+    "version": "0.57.1-callout-fix2",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/breadcrumbItem/breadcrumbItem.css

@@ -4,13 +4,12 @@
 :host {
     display: flex;
     align-items: center;
-    justify-content: center;
     width: fit-content;
 }
 
 :host(.breadcrumb_long) {
     /* ensure 30 character min-width */
-    min-width: 200px;
+    min-width: 245px;
 }
 
 :host(.breadcrumb_back-arrow) {

package/src/modules/doc/breadcrumbs/breadcrumbs.css

@@ -4,8 +4,6 @@
 :host {
     --dx-c-breadcrumbs-title-color: var(--dx-g-blue-vibrant-20);
     --dx-c-breadcrumbs-breadcrumb-color: var(--dx-g-blue-vibrant-20);
-
-    font-family: var(--dx-g-font-sans);
 }
 
 nav {

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

@@ -36,7 +36,7 @@
                     analytics-event={analyticsEventName}
                     analytics-base-payload={analyticsBasePayload}
                     href={breadcrumb.href}
-                    key={breadcrumb.id}
+                    key={breadcrumb.label}
                     label={breadcrumb.label}
                 ></doc-breadcrumb-item>
                 <span class="breadcrumb-item_slash" key={breadcrumb.label}>

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

@@ -8,12 +8,10 @@ type BreadcrumbConfig = {
 };
 
 const GAP = 8;
-
-// Unit in pixels based on Salesforce Sans font-family.
 const CONSTANTS = {
-    pixelPerCharacter: 7.7,
-    pixelPerCrumbSpace: GAP * 2 + 8.6,
-    minWidthPerCrumb: 200,
+    pixelPerCharacter: 7.2,
+    pixelPerCrumbSpace: GAP * 2 + 4.6,
+    minWidthPerCrumb: 245,
     dropdownWidth: 32
 };
 
@@ -31,26 +29,15 @@ export default class Breadcrumbs extends LightningElement {
     get breadcrumbs(): Breadcrumb[] {
         return this._breadcrumbs;
     }
-
     set breadcrumbs(value) {
-        this.normalizeAndAssignBreadcrumbs(value);
+        this._breadcrumbs = toJson(value) || [];
         this.calculateBreadcrumbsConfigs();
         if (this.observer) {
             this.updateDropdownOptionAmount();
         }
     }
 
-    @api
-    get pixelPerCharacter(): number {
-        return this._pixelPerCharacter;
-    }
-
-    set pixelPerCharacter(value: number | string) {
-        this._pixelPerCharacter = +value;
-    }
-
     private _breadcrumbs: Breadcrumb[] = [];
-    private _pixelPerCharacter = CONSTANTS.pixelPerCharacter;
     private navWidth = 0;
     private observer: ResizeObserver | null = null;
     private breadcrumbConfigs: BreadcrumbConfig[] = [];
@@ -85,7 +72,7 @@ export default class Breadcrumbs extends LightningElement {
     private get dropdownOptions(): OptionWithLink[] {
         return this.breadcrumbs!.slice(1, this.dropdownOptionAmount! + 1).map(
             (link) => ({
-                id: link.id!,
+                id: link.href!,
                 label: link.label,
                 link: { href: link.href! }
             })
@@ -131,17 +118,6 @@ export default class Breadcrumbs extends LightningElement {
         this.observer?.disconnect();
     }
 
-    private normalizeAndAssignBreadcrumbs(breadcrumbs?: Breadcrumb[] | string) {
-        if (!breadcrumbs) {
-            return;
-        }
-
-        this._breadcrumbs = toJson(breadcrumbs).map((crumb: Breadcrumb) => ({
-            ...crumb,
-            id: crumb.id || crumb.href
-        }));
-    }
-
     private updateDropdownOptionAmount(): void {
         this.dropdownOptionAmount = this.breadcrumbConfigs.find(
             ({ minWidth }) => minWidth <= this.navWidth
@@ -174,8 +150,7 @@ export default class Breadcrumbs extends LightningElement {
             (previousValue, element) =>
                 previousValue +
                 Math.min(
-                    element.label.length *
-                        (this.pixelPerCharacter || CONSTANTS.pixelPerCharacter),
+                    element.label.length * CONSTANTS.pixelPerCharacter,
                     CONSTANTS.minWidthPerCrumb
                 ),
             (breadcrumbs.length - 1) * CONSTANTS.pixelPerCrumbSpace + offset

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

@@ -56,7 +56,7 @@ dx-toc {
     max-width: 275px;
 }
 
-doc-breadcrumbs {
+dx-breadcrumbs {
     display: block;
     margin-bottom: var(--dx-g-spacing-2xl);
 }
@@ -68,6 +68,10 @@ doc-breadcrumbs {
 }
 
 @media screen and (max-width: 800px) {
+    dx-breadcrumbs {
+        display: none;
+    }
+
     .content-body {
         margin-top: var(--dx-c-content-vertical-spacing);
     }

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

@@ -28,10 +28,17 @@
             <slot name="doc-phase"></slot>
             <div class="content-body-container">
                 <div class="content-body">
-                    <doc-breadcrumbs
+                    <dx-breadcrumbs
                         if:true={breadcrumbs}
                         breadcrumbs={breadcrumbs}
-                    ></doc-breadcrumbs>
+                        truncate
+                        hide-current-location
+                    ></dx-breadcrumbs>
+                    <dx-breadcrumbs
+                        if:false={breadcrumbs}
+                        pathname={pathname}
+                        hide-current-location
+                    ></dx-breadcrumbs>
                     <slot onslotchange={onSlotChange}></slot>
                 </div>
                 <div class="right-nav-bar is-sticky">

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

@@ -24,7 +24,6 @@ export type TreeNode = {
     name: string;
     children?: Array<TreeNode>;
     isExpanded?: boolean;
-    parent?: TreeNode;
 };
 
 type DropdownOption = {
@@ -110,5 +109,3 @@ export type ContentApiOptions = {
     version: string;
     language: string;
 };
-
-export type TocMap = { [key: string]: TreeNode };

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

@@ -8,8 +8,7 @@ import {
     DocumentData,
     DocLanguage,
     DocVersion,
-    TreeNode,
-    TocMap
+    TreeNode
 } from "./types";
 import { Language } from "typings/custom";
 import { getLanguageDisplayTextById } from "dxUtils/language";
@@ -101,26 +100,26 @@ export class FetchContent {
 
     private normalizeNavItem(
         navItem: ApiNavItem,
-        tocMap: TocMap,
-        parentNavItem?: TreeNode
+        tocMap: { [key: string]: TreeNode }
     ): TreeNode {
         const name = this.calculateNavItemName(navItem, tocMap);
         const node: TreeNode = {
             label: navItem.text,
-            name,
-            parent: parentNavItem
+            name
         };
-
         if (name) {
             tocMap[name] = node;
         }
         node.children = navItem.children?.map((child) =>
-            this.normalizeNavItem(child, tocMap, node)
+            this.normalizeNavItem(child, tocMap)
         );
         return node;
     }
 
-    private calculateNavItemName(navItem: ApiNavItem, tocMap: TocMap): string {
+    private calculateNavItemName(
+        navItem: ApiNavItem,
+        tocMap: { [key: string]: TreeNode }
+    ): string {
         let href = navItem.a_attr?.href || "";
         if (href.includes("#")) {
             const [pathUrl] = href.split("#");
@@ -145,13 +144,11 @@ export class FetchContent {
     }
 
     private normalizeLanguage(language: ApiDocLanguage): DocLanguage {
+
         return (
             language && {
-                label:
-                    getLanguageDisplayTextById(
-                        this.languages,
-                        language.locale
-                    ) || language.label,
+                label: getLanguageDisplayTextById(this.languages, language.locale) || 
+                    language.label,
                 id: language.locale,
                 code: language.code,
                 url: language.url

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

@@ -3,11 +3,6 @@
     --button-primary-color-hover: var(--dx-g-blue-vibrant-40);
 }
 
-doc-breadcrumbs {
-    display: block;
-    margin-bottom: var(--dx-g-spacing-2xl);
-}
-
 dx-dropdown {
     --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
 }

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

@@ -25,11 +25,6 @@
                 </dx-button>
             </dx-dropdown>
         </div>
-        <doc-breadcrumbs
-            if:true={breadcrumbs}
-            breadcrumbs={breadcrumbs}
-            pixel-per-character={breadcrumbPixelPerCharacter}
-        ></doc-breadcrumbs>
         <doc-content
             docs-data={docContent}
             page-reference={pageReference}

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

@@ -8,26 +8,15 @@ import {
     TreeNode,
     Header,
     HistoryState,
-    PageReference,
-    TocMap
+    PageReference
 } from "./types";
 import { SearchSyncer } from "docUtils/SearchSyncer";
 import { LightningElementWithState } from "docBaseElements/lightningElementWithState";
-import { Breadcrumb, Language } from "typings/custom";
+import { 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);
 
-const FIRST_CRUMB = {
-    href: "/docs",
-    label: "Documentation"
-};
-
-const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
-    default: 7.7,
-    "ja-jp": 12.5
-};
-
 export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
@@ -64,7 +53,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     private language: DocLanguage = null;
     private loaded = false;
     private pdfUrl = "";
-    private tocMap: TocMap = {};
+    private tocMap = null;
     private sidebarContent: Array<TreeNode> = null;
     private version: DocVersion = null;
     private docTitle = "";
@@ -113,7 +102,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     private _allLanguages: Array<Language> = [];
 
     @track private pageReference: PageReference = {};
-    @track breadcrumbs: Array<Breadcrumb> = [];
 
     constructor() {
         super();
@@ -279,13 +267,6 @@ export default class DocXmlContent extends LightningElementWithState<{
               }));
     }
 
-    private get breadcrumbPixelPerCharacter() {
-        return (
-            PIXEL_PER_CHARACTER_MAP[this.language.id] ||
-            PIXEL_PER_CHARACTER_MAP.default
-        );
-    }
-
     private handlePopState = (): void =>
         this.updatePageReference(this.getReferenceFromUrl());
 
@@ -299,15 +280,15 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         if (name) {
             const hashIndex = name.indexOf("#");
-            const hash = hashIndex > -1 ? name.slice(hashIndex) : "";
-
-            const contentDocumentId =
-                hashIndex > -1 ? name.slice(0, hashIndex) : name;
-            this.updatePageReference({
-                ...this.pageReference,
-                contentDocumentId,
-                hash
-            });
+            this.pageReference.hash =
+                hashIndex > -1 ? name.slice(hashIndex) : "";
+
+            const contentId = hashIndex > -1 ? name.slice(0, hashIndex) : name;
+            if (this.pageReference.contentDocumentId !== contentId) {
+                this.pageReference.contentDocumentId = contentId;
+                this.fetchContent().catch(handleContentError);
+            }
+
             this.updateUrl();
         }
     }
@@ -340,17 +321,15 @@ export default class DocXmlContent extends LightningElementWithState<{
             return;
         }
 
-        const isSameDocId = this.pageReference.docId === newPageReference.docId;
+        const isSameDocId = this.pageReference.docId !== newPageReference.docId;
         this.pageReference = newPageReference;
 
-        if (!isSameDocId) {
+        if (isSameDocId) {
             this.fetchDocument();
             return;
         }
 
-        this.fetchContent()
-            .then(() => this.buildBreadcrumbs())
-            .catch(handleContentError);
+        this.fetchContent().catch(handleContentError);
     }
 
     getReferenceFromUrl(): PageReference {
@@ -407,8 +386,6 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         this.updateHeader();
 
-        this.buildBreadcrumbs();
-
         if (this.pageReference.deliverable !== data.deliverable) {
             this.pageReference.deliverable = data.deliverable;
             this.updateUrl(HistoryState.REPLACE_STATE);
@@ -581,32 +558,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
     }
 
-    private buildBreadcrumbs(): void {
-        const { contentDocumentId } = this.pageReference;
-        if (!contentDocumentId) {
-            return;
-        }
-
-        const currentNode = this.tocMap[contentDocumentId];
-        this.breadcrumbs = this.nodeToBreadcrumb(currentNode);
-    }
-
-    private nodeToBreadcrumb(node?: TreeNode): Breadcrumb[] {
-        if (!node) {
-            return [FIRST_CRUMB];
-        }
-        return [
-            ...this.nodeToBreadcrumb(node.parent),
-            {
-                href: this.pageReferenceToString({
-                    ...this.pageReference,
-                    contentDocumentId: node.name
-                }),
-                label: node.label
-            }
-        ];
-    }
-
     addMetatags(): void {
         const div = document.createElement("div");
         div.innerHTML = this.docContent;