@salesforcedevs/docs-components 0.56.2-seo-test16 → 0.57.0

package/src/modules/doc/amfReference/route-meta.ts

@@ -0,0 +1,22 @@
+/**
+ * Represents the URL reference meta on Reference page.
+ * Contains information on selected Reference ID, Topic ID, and Topic Type
+ * separated by ":"
+ */
+export class RouteMeta {
+    meta: string;
+    referenceId = "";
+    topicId = "";
+    type = "";
+
+    constructor(meta: string) {
+        this.meta = meta;
+
+        if (meta && meta.includes(":")) {
+            const [referenceId, type, topicId] = meta.split(":");
+            this.referenceId = referenceId;
+            this.topicId = topicId || type;
+            this.type = type;
+        }
+    }
+}

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

@@ -2,7 +2,6 @@ import { Json } from "typings/custom";
 
 export interface AmfTopicType {
     referenceId: string;
-    parentReferencePath: string;
     amfId: string;
     elementId: string;
     type: string;
@@ -11,7 +10,6 @@ export interface AmfTopicType {
 export interface AmfMetadataTopic extends AmfTopicType {
     meta: string;
     identifier: string;
-    navTitle?: string;
 }
 
 export interface AmfMetaTopicType extends AmfTopicType {
@@ -55,37 +53,11 @@ export type DocPhaseEntry = {
     body: string;
 };
 
-export type ReferenceType = "markdown" | "rest-raml" | "rest-oa2" | "rest-oa3";
-
-/**
- * Represents parsed topic for the sidebar.
- */
-export interface ParsedMarkdownTopic {
-    label: string;
-    name: string;
-    children: ParsedMarkdownTopic[];
-    link?: {
-        href: string;
-        target?: string;
-    };
-}
-
-export interface AmfConfig {
+export interface AmfConfig extends AmfModelRecord {
     id: string;
+    amf: string;
     version?: string;
     docPhase?: DocPhaseEntry;
-    title: string;
-    href: string;
-    referenceType: ReferenceType;
-
-    // determines if a reference config is the current active and selected one.
-    isSelected: boolean;
-
-    // required for spec based references
-    amf?: string;
-
-    // required for markdown based references
-    topic?: ParsedMarkdownTopic;
 }
 
 export interface ParsedTopicModel {
@@ -112,22 +84,10 @@ export interface ReferenceVersion {
     label: string;
     deprecated?: boolean;
     selected?: boolean;
-    link: {
-        href: string;
-    };
 }
 
 export interface ReferenceSetConfig {
-    refId?: string;
     versionToRefMap?: Map<string, Array<AmfConfig>>;
     refList: Array<AmfConfig>;
-    versions: Array<ReferenceVersion>;
-}
-
-export interface RouteMeta {
-    meta: string;
-    referenceId: string;
-    topicId: string;
-    //type is only for spec based references
-    type?: string;
+    versions?: Array<ReferenceVersion>;
 }

package/src/modules/doc/breadcrumbItem/breadcrumbItem.html

@@ -1,5 +1,5 @@
 <template>
     <dx-icon if:true={isBackArrowVariant} symbol="back"></dx-icon>
-    <a if:true={href} href={href}>{label}</a>
+    <a if:true={href} href={href} onclick={onLinkClick}>{label}</a>
     <span if:false={href}>{label}</span>
 </template>

package/src/modules/doc/breadcrumbItem/breadcrumbItem.ts

@@ -1,5 +1,6 @@
+import { track } from "dxUtils/analytics";
 import { LightningElement, api } from "lwc";
-import { BreadcrumbItemVariant } from "typings/custom";
+import { AnalyticsPayload, BreadcrumbItemVariant } from "typings/custom";
 
 const BREADCRUMB_LONG = "breadcrumb_long";
 const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
@@ -7,6 +8,8 @@ const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
 const LONG_LABEL_NUMBER = 30;
 export default class BreadcrumbItem extends LightningElement {
     @api href?: string;
+    @api analyticsEvent!: string;
+    @api analyticsBasePayload!: AnalyticsPayload;
 
     @api
     get label() {
@@ -46,4 +49,17 @@ export default class BreadcrumbItem extends LightningElement {
     private get isBackArrowVariant(): boolean {
         return this._variant === "back-arrow";
     }
+
+    private onLinkClick(event: Event): void {
+        if (!this.analyticsEvent) {
+            return;
+        }
+
+        track(event.target!, this.analyticsEvent, {
+            ...this.analyticsBasePayload,
+            clickText: this.label,
+            itemTitle: this.label,
+            pageLocation: window.location.pathname
+        });
+    }
 }

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

@@ -9,7 +9,6 @@
 nav {
     display: flex;
     align-items: center;
-    height: 100%;
     position: relative;
     gap: var(--dx-g-spacing-sm);
 }
@@ -17,3 +16,10 @@ nav {
 .breadcrumb-item_slash {
     min-width: fit-content;
 }
+
+dx-dropdown {
+    --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
+    --dx-c-dropdown-option-label-color: var(
+        --dx-c-breadcrumbs-breadcrumb-color
+    );
+}

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

@@ -3,6 +3,8 @@
         <template if:false={renderSmallVariant}>
             <template if:true={renderFirstCrumb}>
                 <doc-breadcrumb-item
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     href={firstCrumb.href}
                     label={firstCrumb.label}
                 ></doc-breadcrumb-item>
@@ -11,10 +13,14 @@
             <template if:true={renderDropdown}>
                 <dx-dropdown
                     if:true={renderDropdown}
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     options={dropdownOptions}
                     open-on-hover
                     placement="bottom"
-                    width="200px"
+                    suppress-gtm-nav-headings
+                    variant="indented"
+                    width="fit-content"
                 >
                     <dx-button
                         aria-label="Open Breadcrumbs Dropdown"
@@ -27,6 +33,8 @@
             </template>
             <template for:each={breadcrumbItems} for:item="breadcrumb">
                 <doc-breadcrumb-item
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     href={breadcrumb.href}
                     key={breadcrumb.label}
                     label={breadcrumb.label}
@@ -39,6 +47,8 @@
         </template>
         <template if:true={renderSmallVariant}>
             <doc-breadcrumb-item
+                analytics-event={analyticsEventName}
+                analytics-base-payload={analyticsBasePayload}
                 href={lastLinkCrump.href}
                 label={lastLinkCrump.label}
                 variant="back-arrow"

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

@@ -15,6 +15,13 @@ const CONSTANTS = {
     dropdownWidth: 32
 };
 
+export const ANALYTICS_EVENT_NAME = "custEv_breadcrumbClick";
+export const ANALYTICS_BASE_PAYLOAD = {
+    elementType: "breadcrumb",
+    locationOnPage: "breadcrumb",
+    ctaClick: true
+};
+
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Documentation Breadcrumbs";
 
@@ -84,6 +91,14 @@ export default class Breadcrumbs extends LightningElement {
         return this.breadcrumbs[this.breadcrumbs.length - 1];
     }
 
+    private get analyticsEventName() {
+        return ANALYTICS_EVENT_NAME;
+    }
+
+    private get analyticsBasePayload() {
+        return ANALYTICS_BASE_PAYLOAD;
+    }
+
     renderedCallback(): void {
         if (!this.observer) {
             this.observer = new ResizeObserver((entries) => {

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

@@ -20,7 +20,6 @@ const HIGHLIGHTABLE_SELECTOR = [
     "th",
     "td"
 ].join(",");
-const OBSERVER_ATTACH_WAIT_TIME = 500;
 
 export default class ContentLayout extends LightningElement {
     @api sidebarValue: string;
@@ -96,8 +95,6 @@ export default class ContentLayout extends LightningElement {
         target: window
     });
     private tocValue?: string = undefined;
-    private observerTimerId = null;
-    private didScrollToSelectedHash = false;
 
     get showToc(): boolean {
         return this.tocOptions && this.tocOptions.length > 0;
@@ -122,18 +119,6 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
-    renderedCallback(): void {
-        /**
-         * Note: We are adding timeout because chrome is optimizing and not triggering recent renderedCallback though elements reference is changed
-         * Also we are considering recent renderedCallback
-         */
-        this.clearRenderObserverTimer();
-        this.observerTimerId = setTimeout(
-            this.attachInteractionObserver,
-            OBSERVER_ATTACH_WAIT_TIME
-        );
-    }
-
     disconnectedCallback(): void {
         this.disconnectObserver();
         window.removeEventListener(
@@ -141,25 +126,19 @@ export default class ContentLayout extends LightningElement {
             this.updateHighlighted
         );
         this.searchSyncer.dispose();
-        this.clearRenderObserverTimer();
     }
 
-    clearRenderObserverTimer = () => {
-        if (this.observerTimerId) {
-            clearTimeout(this.observerTimerId);
-        }
-    };
-
     updateHighlighted = (event: Event): void =>
         highlightTerms(
             this.querySelectorAll(HIGHLIGHTABLE_SELECTOR),
             (event as CustomEvent<string>).detail
         );
 
-    attachInteractionObserver = (): void => {
+    onSlotChange(event: Event): void {
         if (!this.enableSlotChange) {
             return;
         }
+
         this.disconnectObserver();
         this.observer = new IntersectionObserver((entries) => {
             entries.forEach(
@@ -171,54 +150,30 @@ export default class ContentLayout extends LightningElement {
             this.calculateActualSection();
         });
 
-        // Note: We are doing document.querySelectorAll as a quick fix as we are not getting heading elements reference this.querySelectorAll
-        const headingElements = document.querySelectorAll(TOC_HEADER_TAG);
-        for (const headingElement of headingElements) {
-            // Add headingElements to intersectionObserver for highlighting respective RNB item when user scroll
-            const id = headingElement.getAttribute("id");
+        const anchoredTags = (event.target as HTMLSlotElement)
+            .assignedElements()
+            .filter(({ tagName }) => tagName === TOC_HEADER_TAG)
+            .map((tag) => {
+                tag.id = tag.hash;
+                return tag;
+            });
+
+        this._tocOptions = anchoredTags.map((tag) => ({
+            anchor: `#${tag.hash}`,
+            id: tag.id,
+            label: tag.title
+        }));
+
+        this.scrollToHash(anchoredTags);
+
+        anchoredTags.forEach((section) => {
+            const id = section.getAttribute("id");
             this.anchoredElements[id] = {
                 id,
                 intersect: false
             };
-            this.observer.observe(headingElement);
-        }
-        if (!this.didScrollToSelectedHash) {
-            this.didScrollToSelectedHash = true;
-            this.scrollToHash(headingElements);
-        }
-    };
-
-    onSlotChange(event: Event): void {
-        const slotElements = (
-            event.target as HTMLSlotElement
-        ).assignedElements();
-
-        if (slotElements.length) {
-            const slotContentElement = slotElements[0];
-            const headingElements =
-                slotContentElement.ownerDocument?.getElementsByTagName(
-                    TOC_HEADER_TAG
-                );
-            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;
-            }
-            const tocOptions = [];
-            for (const headingElement of headingElements) {
-                headingElement.id = headingElement.hash;
-
-                // Update tocOptions from anchorTags
-                const tocItem = {
-                    anchor: `#${headingElement.hash}`,
-                    id: headingElement.id,
-                    label: headingElement.title
-                };
-                tocOptions.push(tocItem);
-            }
-
-            this._tocOptions = tocOptions;
-        }
+            this.observer.observe(section);
+        });
     }
 
     private disconnectObserver(): void {
@@ -228,16 +183,16 @@ export default class ContentLayout extends LightningElement {
         }
     }
 
-    // eslint-disable-next-line no-undef
-    private scrollToHash(headingElements: NodeListOf<Element>): void {
+    private scrollToHash(anchoredTags: Array<Element>): void {
         let { hash } = window.location;
+
         if (hash) {
             hash = hash.substr(1);
-            for (const headingElement of headingElements) {
-                if (headingElement.getAttribute("id") === hash) {
-                    headingElement.scrollIntoView({ behavior: "auto" });
-                    break;
-                }
+            const toScrollElement = anchoredTags.find(
+                (element) => element.getAttribute("id") === hash
+            );
+            if (toScrollElement) {
+                toScrollElement.scrollIntoView({ behavior: "auto" });
             }
         }
     }

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

@@ -1,76 +0,0 @@
-const NAVIGATION_ITEMS = [
-    {
-        label: "Summary",
-        name: "summary",
-        childrenPropertyName: undefined,
-        type: "summary"
-    },
-    {
-        label: "Endpoints",
-        name: "endpoints",
-        childrenPropertyName: "endpoints",
-        type: "endpoint"
-    },
-    {
-        label: "Documentation",
-        name: "documentation",
-        childrenPropertyName: "docs",
-        type: "documentation"
-    },
-    {
-        label: "Types",
-        name: "types",
-        childrenPropertyName: "types",
-        type: "type"
-    },
-    {
-        label: "Security",
-        name: "security",
-        childrenPropertyName: "security",
-        type: "security"
-    }
-];
-
-const URL_CONFIG = {
-    summary: {
-        urlIdentifer: "label"
-    },
-    endpoint: {
-        urlIdentifer: "path"
-    },
-    method: {
-        urlIdentifer: "label"
-    },
-    documentation: {
-        urlIdentifer: "label"
-    },
-    type: {
-        urlIdentifer: "label",
-        prefix: "type:"
-    },
-    security: {
-        urlIdentifer: "label",
-        prefix: "security:"
-    }
-};
-
-export const REFERENCE_TYPES = {
-    markdown: "markdown",
-    raml: "rest-raml",
-    oa2: "rest-oa2",
-    oa3: "rest-oa3"
-};
-
-const oldReferenceIdNewReferenceIdMap: Record<string, string> = {
-    "commerce-api-assignments": "assignments",
-    "commerce-api-campaigns": "campaigns",
-    "commerce-api-catalogs": "catalogs",
-    "cdn-zones": "cdn-api-process-apis",
-    "inventory-impex": "impex",
-    "inventory-reservations": "inventory-reservation-service",
-    "shopper-login-and-api-access-service": "shopper-login",
-    "shopper-login-and-api-access-service-admin": "slas-admin",
-    "einstein-recommendations": "einstein-api-quick-start-guide"
-};
-
-export { NAVIGATION_ITEMS, URL_CONFIG, oldReferenceIdNewReferenceIdMap };