@salesforcedevs/docs-components 0.56.2-comp-flex-ref-1 → 0.56.2-example

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

@@ -24,6 +24,7 @@ export type TreeNode = {
     name: string;
     children?: Array<TreeNode>;
     isExpanded?: boolean;
+    parent?: TreeNode;
 };
 
 type DropdownOption = {
@@ -34,6 +35,9 @@ type DropdownOption = {
 export type DocVersion = DropdownOption & {
     releaseVersion: string;
     url: string;
+    link?: {
+        href: string;
+    };
 };
 
 export type DocLanguage = DropdownOption & {
@@ -57,12 +61,15 @@ export type ApiDocLanguage = {
 
 export interface Header extends Element {
     subtitle: string;
+    headerHref: string;
+}
+
+export type SiderbarFooter = {
     bailHref: string;
     bailLabel: string;
     languages: Array<DocLanguage>;
-    language: string;
-    headerHref: string;
-}
+    language?: string;
+};
 
 export type ApiNavItem = {
     children: Array<ApiNavItem>;
@@ -109,3 +116,5 @@ export type ContentApiOptions = {
     version: string;
     language: string;
 };
+
+export type TocMap = { [key: string]: TreeNode };

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

@@ -8,7 +8,8 @@ import {
     DocumentData,
     DocLanguage,
     DocVersion,
-    TreeNode
+    TreeNode,
+    TocMap
 } from "./types";
 import { Language } from "typings/custom";
 import { getLanguageDisplayTextById } from "dxUtils/language";
@@ -86,7 +87,9 @@ export class FetchContent {
         return json;
     }
 
-    private normalizeToc(apiToc: Array<ApiNavItem>): {
+    private normalizeToc(
+        apiToc: Array<ApiNavItem>
+    ): {
         tocMap: { [key: string]: TreeNode };
         normalizedToc: Array<TreeNode>;
     } {
@@ -100,26 +103,26 @@ export class FetchContent {
 
     private normalizeNavItem(
         navItem: ApiNavItem,
-        tocMap: { [key: string]: TreeNode }
+        tocMap: TocMap,
+        parentNavItem?: TreeNode
     ): TreeNode {
         const name = this.calculateNavItemName(navItem, tocMap);
         const node: TreeNode = {
             label: navItem.text,
-            name
+            name,
+            parent: parentNavItem
         };
+
         if (name) {
             tocMap[name] = node;
         }
         node.children = navItem.children?.map((child) =>
-            this.normalizeNavItem(child, tocMap)
+            this.normalizeNavItem(child, tocMap, node)
         );
         return node;
     }
 
-    private calculateNavItemName(
-        navItem: ApiNavItem,
-        tocMap: { [key: string]: TreeNode }
-    ): string {
+    private calculateNavItemName(navItem: ApiNavItem, tocMap: TocMap): string {
         let href = navItem.a_attr?.href || "";
         if (href.includes("#")) {
             const [pathUrl] = href.split("#");
@@ -144,11 +147,13 @@ 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,6 +3,18 @@
     --button-primary-color-hover: var(--dx-g-blue-vibrant-40);
 }
 
+doc-content-layout {
+    --dx-c-content-sidebar-sticky-top: var(--dx-g-global-header-height);
+    --dx-c-sidebar-height: calc(100vh - var(--dx-g-global-header-height));
+}
+
+doc-breadcrumbs {
+    --dx-c-popover-z-index: 5;
+
+    display: block;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
 dx-dropdown {
     --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
 }
@@ -19,7 +31,24 @@ dx-dropdown > dx-button:hover {
     --border-color: var(--button-primary-color-hover);
 }
 
-.document-pickers {
-    margin-left: auto;
-    margin-right: var(--dx-g-spacing-sm);
+doc-phase {
+    --doc-c-phase-top: var(--dx-g-global-header-height);
+}
+
+@media screen and (max-width: 768px) {
+    doc-content-layout {
+        --dx-g-doc-header-main-nav-height: 41px;
+        --dx-g-doc-header-height: calc(
+            var(--dx-g-doc-header-main-nav-height) + 40px
+        );
+        --dx-c-content-sidebar-sticky-top: calc(
+            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+        );
+    }
+
+    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

@@ -1,34 +1,60 @@
 <template>
     <doc-content-layout
-        if:true={loaded}
+        lwc:if={displayContent}
+        lwc:ref="docContentLayout"
         coveo-organization-id={coveoOrganizationId}
         coveo-public-access-token={coveoPublicAccessToken}
-        coveo-search-hub="Developer_Docs_SS"
+        coveo-analytics-token={coveoAnalyticsToken}
+        coveo-search-hub={coveoSearchHub}
         coveo-advanced-query-config={coveoAdvancedQueryConfig}
-        sidebar-header="Pages"
+        sidebar-header={docTitle}
         sidebar-content={sidebarContent}
         sidebar-value={sidebarValue}
         onselect={handleSelect}
         use-old-sidebar={useOldSidebar}
+        onlangchange={handleLanguageChange}
+        languages={sidebarFooterContent.languages}
+        language={sidebarFooterContent.language}
+        bail-href={sidebarFooterContent.bailHref}
+        bail-label={sidebarFooterContent.bailLabel}
+        show-footer={enableFooter}
     >
-        <div slot="sidebar-header" class="document-pickers">
-            <dx-dropdown
+        <doc-phase
+            slot="version-banner"
+            lwc:if={showVersionBanner}
+            doc-phase-info={oldVersionInfo}
+            icon-name="warning"
+            dismissible="true"
+            ondismissphase={handleDismissVersionBanner}
+        ></doc-phase>
+        <div lwc:if={showVersionPicker} slot="sidebar-header">
+            <doc-version-picker
                 data-type="version"
-                suppress-gtm-nav-headings
-                analytics-event={analyticsEvent}
-                options={versionOptions}
-                value={version.id}
-                width="290px"
-            >
-                <dx-button variant="inline" disabled={disableVersion}>
-                    {version.releaseVersion}
-                </dx-button>
-            </dx-dropdown>
+                analytics-event="custEv_ctaLinkClick"
+                analytics-payload={ANALYTICS_PAYLOAD}
+                versions={versionOptions}
+                selected-version={version}
+                latest-version={latestVersion}
+                hide-badge={previewVersion}
+            ></doc-version-picker>
         </div>
+        <doc-breadcrumbs
+            lwc:if={showBreadcrumbs}
+            breadcrumbs={breadcrumbs}
+            pixel-per-character={breadcrumbPixelPerCharacter}
+        ></doc-breadcrumbs>
         <doc-content
             docs-data={docContent}
             page-reference={pageReference}
             onnavclick={handleNavClick}
         ></doc-content>
     </doc-content-layout>
+    <div lwc:if={display404}>
+        <dx-error
+            image="https://a.sfdcstatic.com/developer-website/images/404.svg"
+            code="404"
+            header="Beep boop. That did not compute."
+            subtitle="The document you're looking for doesn't seem to exist."
+        ></dx-error>
+    </div>
 </template>