@salesforcedevs/docs-components 1.17.12-search-alpha → 1.17.13-table

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.12-search-alpha",
+    "version": "1.17.13-table",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.html

@@ -1,7 +1,13 @@
 <template>
     <doc-content-layout
         lwc:if={isVersionFetched}
+        use-old-sidebar={useOldSidebar}
         class="content-type content-type-reference"
+        coveo-organization-id={coveoOrganizationId}
+        coveo-public-access-token={coveoPublicAccessToken}
+        coveo-analytics-token={coveoAnalyticsToken}
+        coveo-search-hub={coveoSearchHub}
+        coveo-advanced-query-config={coveoAdvancedQueryConfig}
         breadcrumbs={breadcrumbs}
         sidebar-header={sidebarHeader}
         sidebar-value={selectedSidebarValue}
@@ -14,7 +20,6 @@
         languages={languages}
         language={language}
         show-footer={enableFooter}
-        empty-state-message={emptyStateMessage}
     >
         <doc-phase
             slot="doc-phase"

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

@@ -3,7 +3,7 @@ import { noCase } from "no-case";
 import { sentenceCase } from "sentence-case";
 import qs from "query-string";
 import { AmfModelParser } from "doc/amfModelParser";
-import { normalizeBoolean } from "dxUtils/normalizers";
+import { normalizeBoolean, toJson } from "dxUtils/normalizers";
 import type { OptionWithLink } from "typings/custom";
 import type {
     AmfConfig,
@@ -28,7 +28,7 @@ import {
 } from "./constants";
 import { restoreScroll } from "dx/scrollManager";
 import { DocPhaseInfo } from "typings/custom";
-import { oldVersionDocInfo } from "docUtils/utils";
+import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
 
 type NavigationItem = {
     label: string;
@@ -41,6 +41,11 @@ type NavigationItem = {
 export default class AmfReference extends LightningElement {
     @api breadcrumbs: string | null = null;
     @api sidebarHeader!: string;
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoAnalyticsToken!: string;
+    @api coveoSearchHub!: string;
+    @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
     @api languages!: OptionWithLink[];
@@ -49,6 +54,7 @@ export default class AmfReference extends LightningElement {
     @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
     @track showVersionBanner = false;
+    @track _coveoAdvancedQueryConfig!: { [key: string]: any };
 
     // Update this to update what component gets rendered in the content block
     @track
@@ -154,16 +160,33 @@ export default class AmfReference extends LightningElement {
         this._expandChildren = normalizeBoolean(value);
     }
 
-    private get enableFooter(): boolean {
-        return !this.hideFooter;
+    /*
+     * The get coveoAdvancedQueryConfig() method returns this._coveoAdvancedQueryConfig,
+     * but before returning it, it checks if there are multiple versions (this.versions.length > 1)
+     * and if a version is selected (this.selectedVersion). If both conditions are met,
+     * it updates the version property of this._coveoAdvancedQueryConfig with the selected version.
+     */
+    @api
+    get coveoAdvancedQueryConfig(): { [key: string]: any } {
+        const coveoConfig = this._coveoAdvancedQueryConfig;
+        if (this.versions.length > 1 && this.selectedVersion) {
+            const currentGAVersionRef = this.versions[0];
+            if (this.selectedVersion.id !== currentGAVersionRef.id) {
+                // Currently Coveo only supports query without "v"
+                const version = this.selectedVersion.id.replace("v", "");
+                coveoConfig.version = version;
+                this._coveoAdvancedQueryConfig = coveoConfig;
+            }
+        }
+        return this._coveoAdvancedQueryConfig;
     }
 
-    private get emptyStateMessage(): string {
-        return JSON.stringify([
-            "Please consider misspellings",
-            "Try different search keywords",
-            "Select a relevant API specification"
-        ]);
+    set coveoAdvancedQueryConfig(config) {
+        this._coveoAdvancedQueryConfig = toJson(config);
+    }
+
+    private get enableFooter(): boolean {
+        return !this.hideFooter;
     }
 
     // model
@@ -1413,6 +1436,10 @@ export default class AmfReference extends LightningElement {
                         metaVal
                     );
 
+                    logCoveoPageView(
+                        this.coveoOrganizationId,
+                        this.coveoAnalyticsToken
+                    );
                     this.updateUrlWithSelected(parentReferencePath, metaVal);
                     this.updateTags(metadata.navTitle);
                 } else {

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

@@ -1,21 +1,43 @@
 <template>
     <div class="content">
-        <dx-sidebar-old
-            class="is-sticky left-nav-bar"
-            trees={sidebarContent}
-            value={sidebarValue}
-            header={sidebarHeader}
-            ontogglesidebar={onToggleSidebar}
-            languages={languages}
-            language={language}
-            bail-href={bailHref}
-            bail-label={bailLabel}
-            dev-center={devCenter}
-            brand={brand}
-            empty-state-message={emptyStateMessage}
-        >
-            <slot name="sidebar-header" slot="version-picker"></slot>
-        </dx-sidebar-old>
+        <template lwc:if={useOldSidebar}>
+            <dx-sidebar-old
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
+                dev-center={devCenter}
+                brand={brand}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar-old>
+        </template>
+        <template lwc:else>
+            <dx-sidebar
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                coveo-organization-id={coveoOrganizationId}
+                coveo-public-access-token={coveoPublicAccessToken}
+                coveo-search-hub={coveoSearchHub}
+                coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
+                dev-center={devCenter}
+                brand={brand}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar>
+        </template>
         <div class="content-body-doc-phase-container">
             <slot name="doc-phase"></slot>
             <slot name="version-banner"></slot>

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

@@ -32,6 +32,11 @@ export default class ContentLayout extends LightningElement {
     @api sidebarHeader!: string;
     @api tocTitle!: string;
     @api enableSlotChange = false;
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoAnalyticsToken!: string;
+    @api coveoSearchHub!: string;
+    @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
     @api languages!: OptionWithLink[];
     @api language!: string;
@@ -39,7 +44,6 @@ export default class ContentLayout extends LightningElement {
     @api bailLabel!: string;
     @api devCenter: any;
     @api brand: any;
-    @api emptyStateMessage?: string;
 
     // This is needed for now to prevent failing snapshot tests due to links in the footer
     @api showFooter = false;
@@ -206,7 +210,10 @@ export default class ContentLayout extends LightningElement {
         We have to account for the global nav changing height due to animations.
     */
     adjustNavPosition = () => {
-        const sidebarEl = this.template.querySelector("dx-sidebar-old");
+        const sidebarType = this.useOldSidebar
+            ? "dx-sidebar-old"
+            : "dx-sidebar";
+        const sidebarEl = this.template.querySelector(sidebarType);
         const globalNavEl = document.querySelector(
             "hgf-c360nav"
         ) as HTMLElement;
@@ -241,41 +248,65 @@ export default class ContentLayout extends LightningElement {
             const docHeaderHeight = docHeaderEl.getBoundingClientRect().height;
             const totalHeaderHeight = globalNavHeight + docHeaderHeight;
 
+            // Collect any banners rendered via the doc-phase and version-banner slots
+            const versionBannerSlot = this.template.querySelector(
+                "[name=version-banner]"
+            ) as any;
+            const docPhaseSlot = this.template.querySelector(
+                "[name=doc-phase]"
+            ) as any;
+            const versionBannerEls = (
+                versionBannerSlot
+                    ? (versionBannerSlot.assignedElements() as HTMLElement[])
+                    : []
+            ) as HTMLElement[];
+            const docPhaseEls = (
+                docPhaseSlot
+                    ? (docPhaseSlot.assignedElements() as HTMLElement[])
+                    : []
+            ) as HTMLElement[];
+            const bannersTotalHeight = [
+                ...versionBannerEls,
+                ...docPhaseEls
+            ].reduce(
+                (sum, el) => sum + (el?.getBoundingClientRect()?.height || 0),
+                0
+            );
+
             // Selecting the doc section heading and RNB here.
             const docHeadingEls = Array.from(
                 document.querySelectorAll("doc-heading")
             );
             const rightNavBarEl = this.template.querySelector(".right-nav-bar");
 
-            sidebarEl.style.setProperty(
+            (sidebarEl as HTMLElement).style.setProperty(
                 "--dx-c-content-sidebar-sticky-top",
-                `${globalNavHeight + docHeaderHeight}px`
+                `${totalHeaderHeight}px`
             );
 
             docHeaderEl.style.setProperty(
                 "--dx-g-global-header-height",
                 `${globalNavHeight}px`
             );
+            // Expose heights as CSS variables for sticky offsets used by page content
+            const rootStyle = document.documentElement.style;
+            rootStyle.setProperty(
+                "--dx-g-doc-header-banner-height",
+                `${docHeaderHeight + bannersTotalHeight}px`
+            );
 
             // Adjusting the doc section heading on scroll.
             docHeadingEls.forEach((docHeadingEl) => {
-                (docHeadingEl as any).style.scrollMarginTop = docPhaseEl
-                    ? `${
-                          totalHeaderHeight +
-                          docPhaseEl.getBoundingClientRect().height +
-                          40
-                      }px`
-                    : `${totalHeaderHeight + 40}px`;
+                (docHeadingEl as any).style.scrollMarginTop = `${
+                    totalHeaderHeight + bannersTotalHeight + 40
+                }px`;
             });
 
             // Adjusting the right nav bar on scroll.
             if (rightNavBarEl) {
-                rightNavBarEl.style.top = docPhaseEl
-                    ? `${
-                          totalHeaderHeight +
-                          docPhaseEl.getBoundingClientRect().height
-                      }px`
-                    : `${totalHeaderHeight}px`;
+                (rightNavBarEl as HTMLElement).style.top = `${
+                    totalHeaderHeight + bannersTotalHeight
+                }px`;
             }
 
             // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -1,20 +1,43 @@
 <template>
     <div class="content">
-        <dx-sidebar-old
-            class="is-sticky left-nav-bar"
-            trees={sidebarContent}
-            value={sidebarValue}
-            header={sidebarHeader}
-            ontogglesidebar={onToggleSidebar}
-            languages={languages}
-            language={language}
-            bail-href={bailHref}
-            bail-label={bailLabel}
-            dev-center={devCenter}
-            brand={brand}
-        >
-            <slot name="sidebar-header" slot="version-picker"></slot>
-        </dx-sidebar-old>
+        <template lwc:if={useOldSidebar}>
+            <dx-sidebar-old
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
+                dev-center={devCenter}
+                brand={brand}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar-old>
+        </template>
+        <template lwc:else>
+            <dx-sidebar
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                coveo-organization-id={coveoOrganizationId}
+                coveo-public-access-token={coveoPublicAccessToken}
+                coveo-search-hub={coveoSearchHub}
+                coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
+                dev-center={devCenter}
+                brand={brand}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar>
+        </template>
         <div class="content-body-doc-phase-container">
             <slot name="doc-phase"></slot>
             <slot name="version-banner"></slot>

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -2,111 +2,44 @@ import ContentLayout from "doc/contentLayout";
 
 const TOC_HEADER_TAG = "doc-heading";
 const RNB_BY_TAB = "docs-tab";
-const SPECIFICATION_TAG = "doc-specification-content";
+const SPECIFICATION_TAB_TITLE = "Specification";
 export const OBSERVER_ATTACH_WAIT_TIME = 500;
 
 export default class LwcContentLayout extends ContentLayout {
     private rnbByTab: boolean = false;
 
-    // DOM element caches to avoid repeated queries
-    private tabPanelListCache: any = null;
-    private hasSpecContentCache: boolean | null = null;
-    private allTabsCache: any[] | null = null;
-    private mainSlotCache: any = null;
-
     private setRNBByTab() {
-        const tabPanelListItem = this.getTabPanelList();
-        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;
+        const tabPanelListItem: any = this.getTabPanelList();
+        this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB ? true : false;
     }
 
     get showTabBasedRNB() {
         return this.rnbByTab;
     }
 
-    /**
-     * Check if the main slot contains doc-specification-content
-     * Uses caching to avoid repeated DOM queries
-     */
-    private hasSpecificationContent(): boolean {
-        if (this.hasSpecContentCache !== null) {
-            return this.hasSpecContentCache;
-        }
-
-        const mainSlot = this.getMainSlot();
-        if (mainSlot) {
-            const assignedElements = (mainSlot as any).assignedElements();
-
-            for (const element of assignedElements) {
-                if (
-                    element.tagName === SPECIFICATION_TAG ||
-                    element.querySelector(SPECIFICATION_TAG) ||
-                    element.shadowRoot?.querySelector(SPECIFICATION_TAG)
-                ) {
-                    return (this.hasSpecContentCache = true);
-                }
-            }
-        }
-        return (this.hasSpecContentCache = false);
-    }
-
-    /**
-     * Clear all caches when content changes
-     */
-    private clearAllCaches(): void {
-        this.hasSpecContentCache = null;
-        this.tabPanelListCache = null;
-        this.allTabsCache = null;
-        this.mainSlotCache = null;
-    }
-
-    /**
-     * Get the main slot element with caching
-     */
-    private getMainSlot(): any {
-        if (!this.mainSlotCache) {
-            this.mainSlotCache =
-                this.template.querySelector("slot:not([name])");
-        }
-        return this.mainSlotCache;
-    }
-
-    /**
-     * Get tab panel list with caching
-     */
-    private getTabPanelList(): any {
-        if (!this.tabPanelListCache) {
-            // eslint-disable-next-line @lwc/lwc/no-document-query
-            this.tabPanelListCache =
-                document.querySelector("dx-tab-panel-list");
-        }
-        return this.tabPanelListCache;
-    }
-
     onRNBClick = (event: CustomEvent) => {
         event.stopPropagation();
-        if (this.hasSpecificationContent()) {
+        const currentTab = this.getSelectedTabId();
+        if (currentTab === SPECIFICATION_TAB_TITLE) {
             this.didScrollToSelectedHash = false;
         }
     };
 
     onTabChanged = () => {
         this.updateRNB();
-
-        const { hash } = window.location;
-        if (this.hasSpecificationContent() && hash) {
-            this.didScrollToSelectedHash = false;
-
-            requestAnimationFrame(() => this.updateHeadingForRNB());
-        }
     };
 
+    private getTabPanelList() {
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        return document.querySelector("dx-tab-panel-list");
+    }
+
     protected getHeadingElements() {
         let headingElements = super.getHeadingElements();
         if (this.showTabBasedRNB) {
-            const tabPanelListItem = this.getTabPanelList();
+            const tabPanelListItem: any = this.getTabPanelList();
             const tabPanels =
                 tabPanelListItem?.querySelectorAll("dx-tab-panel");
-
             for (const tabPanelItem of tabPanels) {
                 if (tabPanelItem.active) {
                     // This is needed for Specification tab content
@@ -132,7 +65,6 @@ export default class LwcContentLayout extends ContentLayout {
     private updateURL() {
         const tabs = this.getAllTabs();
         const selectedTabId = this.getSelectedTabId();
-
         tabs.forEach((tab: any) => {
             if (tab.getAttribute("aria-selected") === "true") {
                 const tabID = tab.getAttribute("aria-label");
@@ -169,38 +101,22 @@ export default class LwcContentLayout extends ContentLayout {
             const selectedTabId = this.getSelectedTabId();
             if (selectedTabId) {
                 this.selectTabById(selectedTabId);
-
-                // If there's a hash and we have specification content,
-                // we need to wait for the content to load before scrolling
-                const { hash } = window.location;
-                if (this.hasSpecificationContent() && hash) {
-                    // Reset the scroll flag to allow scrolling once content is loaded
-                    this.didScrollToSelectedHash = false;
-                }
             }
         });
     }
 
     private getAllTabs(): any[] {
-        // Return cached result if available
-        if (this.allTabsCache) {
-            return this.allTabsCache;
-        }
-
-        const tabPanelListItem = this.getTabPanelList();
+        const tabPanelListItem: any = this.getTabPanelList();
         if (tabPanelListItem?.shadowRoot) {
-            this.allTabsCache = Array.from(
+            return Array.from(
                 tabPanelListItem.shadowRoot.querySelectorAll(
                     "dx-tab-panel-item"
                 )
             ).map((tabPanelItem: any) =>
                 tabPanelItem.shadowRoot.querySelector("button")
             );
-        } else {
-            this.allTabsCache = [];
         }
-
-        return this.allTabsCache;
+        return [];
     }
 
     private selectTabById(tabId: string) {
@@ -242,12 +158,8 @@ export default class LwcContentLayout extends ContentLayout {
         }
     }
 
-    onSlotChange(): void {
-        this.clearAllCaches();
-        super.onSlotChange();
-    }
-
     updateHeadingForRNB(): void {
+        // We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
         if (this.showTabBasedRNB) {
             this.updateURL();
         }

package/src/modules/doc/specificationContent/specificationContent.html

@@ -73,7 +73,9 @@
                         <template lwc:if={method.firstArgument}>
                             <tr key={method.name}>
                                 <td rowspan={method.arguments.length}>
-                                    <span class="code">{method.name}</span>
+                                    <span class="code">
+                                        {method.nameInKebabCase}
+                                    </span>
                                 </td>
                                 <td rowspan={method.arguments.length}>
                                     {method.description}
@@ -98,7 +100,9 @@
                         <template lwc:else>
                             <tr key={method.name}>
                                 <td>
-                                    <span class="code">{method.name}</span>
+                                    <span class="code">
+                                        {method.nameInKebabCase}
+                                    </span>
                                 </td>
                                 <td>{method.description}</td>
                                 <td colspan="3"></td>

package/src/modules/doc/table/table.css

@@ -0,0 +1,261 @@
+/* stylelint-disable selector-class-pattern */
+
+/* Table wrapper for overflow handling */
+.doc-table-wrapper {
+    margin: 16px 0;
+
+    /* Ensure sticky positioning context */
+    position: relative;
+}
+
+/* Only add horizontal scroll when sticky headers are disabled */
+.doc-table-wrapper:not(.doc-table-wrapper--sticky-headers) {
+    overflow-x: auto;
+}
+
+/* When sticky headers are enabled, remove overflow to allow sticky positioning */
+.doc-table-wrapper--sticky-headers {
+    overflow-x: visible;
+}
+
+/* GitHub markdown table styles - exact replication */
+.doc-table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    display: table;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
+    font-size: 14px;
+    line-height: 1.45;
+    color: #1f2328;
+}
+
+/* Table caption - GitHub style */
+.doc-table__caption {
+    caption-side: top;
+    padding: 8px 0;
+    font-weight: 600;
+    color: #656d76;
+    text-align: left;
+    font-size: 14px;
+}
+
+/* Header and cell base styles */
+.doc-table__header-cell,
+.doc-table__cell {
+    padding: 6px 13px;
+    border: 1px solid #d1d9e0;
+}
+
+/* Header specific styles */
+.doc-table__header-cell {
+    font-weight: 600;
+    background-color: #f6f8fa;
+    text-align: left;
+}
+
+/* Body cell styles */
+.doc-table__cell {
+    background-color: #fff;
+}
+
+/* Row hover effect - subtle like GitHub */
+.doc-table__row:hover .doc-table__cell {
+    background-color: #f6f8fa;
+}
+
+/* Sticky headers */
+.doc-table--sticky-headers .doc-table__header-cell {
+    position: sticky;
+    top: var(--dx-g-doc-header-banner-height, 0);
+    z-index: 10;
+
+    /* Ensure background is maintained when sticky */
+    background-color: #f6f8fa;
+}
+
+/* Bordered table variant - enhanced GitHub style */
+.doc-table--bordered {
+    border: 1px solid #d1d9e0;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.doc-table--bordered .doc-table__header-cell:first-child,
+.doc-table--bordered .doc-table__cell:first-child {
+    border-left: none;
+}
+
+.doc-table--bordered .doc-table__header-cell:last-child,
+.doc-table--bordered .doc-table__cell:last-child {
+    border-right: none;
+}
+
+/* Striped table variant - GitHub style alternating rows */
+.doc-table--striped .doc-table__row:nth-child(even) .doc-table__cell {
+    background-color: #f6f8fa;
+}
+
+.doc-table--striped .doc-table__row:nth-child(even):hover .doc-table__cell {
+    background-color: #eaeef2;
+}
+
+/* Links within table cells - GitHub style */
+.doc-table__cell a {
+    color: #0969da;
+    text-decoration: none;
+}
+
+.doc-table__cell a:hover {
+    text-decoration: underline;
+}
+
+.doc-table__cell a:visited {
+    color: #8250df;
+}
+
+/* Code within table cells - GitHub style */
+.doc-table__cell code {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    white-space: break-spaces;
+    background-color: rgb(175 184 193 / 20%);
+    border-radius: 6px;
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
+        "Liberation Mono", Menlo, monospace;
+}
+
+/* Strong/bold text in cells */
+.doc-table__cell strong,
+.doc-table__cell b {
+    font-weight: 600;
+}
+
+/* Emphasis/italic text in cells */
+.doc-table__cell em,
+.doc-table__cell i {
+    font-style: italic;
+}
+
+/* Empty state - GitHub inspired */
+.doc-table__empty {
+    padding: 32px;
+    text-align: center;
+    border: 1px solid #d1d9e0;
+    border-radius: 6px;
+    background-color: #f6f8fa;
+    margin: 16px 0;
+}
+
+.doc-table__empty-message {
+    color: #656d76;
+    font-style: italic;
+    margin: 0;
+    font-size: 14px;
+}
+
+/* Responsive design - GitHub mobile behavior */
+@media (max-width: 768px) {
+    .doc-table-wrapper {
+        margin-left: -16px;
+        margin-right: -16px;
+    }
+
+    .doc-table {
+        font-size: 12px;
+    }
+
+    .doc-table__header-cell,
+    .doc-table__cell {
+        padding: 4px 8px;
+    }
+
+    /* Adjust sticky header position for mobile */
+    .doc-table--sticky-headers .doc-table__header-cell {
+        top: var(--dx-g-doc-header-banner-height, 0);
+    }
+}
+
+/* Dark mode support (GitHub style) */
+@media (prefers-color-scheme: dark) {
+    .doc-table {
+        color: #f0f6fc;
+    }
+
+    .doc-table__header-cell,
+    .doc-table__cell {
+        border-color: #30363d;
+    }
+
+    .doc-table__header-cell {
+        background-color: #161b22;
+    }
+
+    /* Ensure sticky headers maintain background in dark mode */
+    .doc-table--sticky-headers .doc-table__header-cell {
+        background-color: #161b22;
+    }
+
+    .doc-table__cell {
+        background-color: #0d1117;
+    }
+
+    .doc-table__row:hover .doc-table__cell {
+        background-color: #161b22;
+    }
+
+    .doc-table--striped .doc-table__row:nth-child(even) .doc-table__cell {
+        background-color: #161b22;
+    }
+
+    .doc-table--striped .doc-table__row:nth-child(even):hover .doc-table__cell {
+        background-color: #21262d;
+    }
+
+    .doc-table__caption {
+        color: #8b949e;
+    }
+
+    .doc-table__empty {
+        background-color: #161b22;
+        border-color: #30363d;
+    }
+
+    .doc-table__empty-message {
+        color: #8b949e;
+    }
+
+    .doc-table__cell a {
+        color: #58a6ff;
+    }
+
+    .doc-table__cell a:visited {
+        color: #bc8cff;
+    }
+
+    .doc-table__cell code {
+        background-color: rgb(110 118 129 / 40%);
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .doc-table__header-cell,
+    .doc-table__cell {
+        border: 1px solid;
+    }
+
+    .doc-table__row:hover .doc-table__cell {
+        background-color: highlight;
+        color: highlighttext;
+    }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+    .doc-table__row:hover .doc-table__cell {
+        transition: none;
+    }
+}

package/src/modules/doc/table/table.html

@@ -0,0 +1,46 @@
+<template>
+    <div class={wrapperClasses} if:true={hasData}>
+        <table class={tableClasses}>
+            <!-- Caption -->
+            <caption if:true={caption} class="doc-table__caption">
+                {caption}
+            </caption>
+            <!-- Table Header -->
+            <thead class="doc-table__head">
+                <tr class="doc-table__header-row">
+                    <th
+                        for:each={columns}
+                        for:item="column"
+                        key={column.key}
+                        class="doc-table__header-cell"
+                        scope="col"
+                    >
+                        {column.label}
+                    </th>
+                </tr>
+            </thead>
+            <!-- Table Body -->
+            <tbody class="doc-table__body">
+                <tr
+                    for:each={processedRows}
+                    for:item="row"
+                    key={row.id}
+                    class="doc-table__row"
+                >
+                    <td
+                        for:each={row.cells}
+                        for:item="cell"
+                        key={cell.key}
+                        class="doc-table__cell"
+                    >
+                        {cell.value}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <!-- Empty state -->
+    <div class="doc-table__empty" if:false={hasData}>
+        <p class="doc-table__empty-message">No data available</p>
+    </div>
+</template>

package/src/modules/doc/table/table.ts

@@ -0,0 +1,175 @@
+import { LightningElement, api } from "lwc";
+
+interface TableColumn {
+    key: string;
+    label: string;
+    type?: "text" | "link" | "html";
+}
+
+interface TableRow {
+    [key: string]: any;
+}
+
+interface TableData {
+    columns: TableColumn[];
+    rows: TableRow[];
+}
+
+export default class Table extends LightningElement {
+    @api caption: string = "";
+
+    private _striped: boolean = false;
+    private _bordered: boolean = false;
+    private _stickyHeaders: boolean = false;
+
+    @api
+    get striped(): boolean {
+        return this._striped;
+    }
+    set striped(value: boolean | string) {
+        this._striped = this.toBooleanValue(value);
+    }
+
+    @api
+    get bordered(): boolean {
+        return this._bordered;
+    }
+    set bordered(value: boolean | string) {
+        this._bordered = this.toBooleanValue(value);
+    }
+
+    @api
+    get stickyHeaders(): boolean {
+        return this._stickyHeaders;
+    }
+    set stickyHeaders(value: boolean | string) {
+        this._stickyHeaders = this.toBooleanValue(value);
+    }
+
+    private _tableData: TableData = { columns: [], rows: [] };
+
+    @api
+    get tableData(): string | TableData {
+        return this._tableData;
+    }
+
+    set tableData(value: string | TableData) {
+        if (typeof value === "string") {
+            // Handle the case where object is stringified as "[object Object]"
+            if (value === "[object Object]") {
+                console.error(
+                    "Invalid JSON provided to table component: Object was not properly serialized. Use property binding (.table-data) instead of attribute binding (table-data) for objects."
+                );
+                this._tableData = { columns: [], rows: [] };
+                return;
+            }
+
+            try {
+                this._tableData = JSON.parse(value);
+            } catch (error) {
+                console.error(
+                    "Invalid JSON provided to table component:",
+                    error
+                );
+                this._tableData = { columns: [], rows: [] };
+            }
+        } else if (value) {
+            this._tableData = value as TableData;
+        } else {
+            this._tableData = { columns: [], rows: [] };
+        }
+    }
+
+    get columns(): TableColumn[] {
+        return this._tableData?.columns || [];
+    }
+
+    get rows(): TableRow[] {
+        return this._tableData?.rows || [];
+    }
+
+    get hasData(): boolean {
+        return this.columns.length > 0 && this.rows.length > 0;
+    }
+
+    get wrapperClasses(): string {
+        const classes = ["doc-table-wrapper"];
+
+        if (this.stickyHeaders) {
+            classes.push("doc-table-wrapper--sticky-headers");
+        }
+
+        return classes.join(" ");
+    }
+
+    get tableClasses(): string {
+        const classes = ["doc-table"];
+
+        if (this.striped) {
+            classes.push("doc-table--striped");
+        }
+
+        if (this.bordered) {
+            classes.push("doc-table--bordered");
+        }
+
+        if (this.stickyHeaders) {
+            classes.push("doc-table--sticky-headers");
+        }
+        return classes.join(" ");
+    }
+
+    get processedRows(): Array<{
+        id: string;
+        cells: Array<{ key: string; value: any; type: string }>;
+    }> {
+        return this.rows.map((row, index) => ({
+            id: `row-${index}`,
+            cells: this.columns.map((column) => ({
+                key: column.key,
+                value: row[column.key] || "",
+                type: column.type || "text"
+            }))
+        }));
+    }
+
+    private renderCellContent(value: any, type: string): string {
+        if (value === null || value === undefined) {
+            return "";
+        }
+
+        switch (type) {
+            case "html":
+                return value.toString();
+            case "link":
+                if (typeof value === "object" && value.url && value.text) {
+                    return `<a href="${value.url}" target="_blank" rel="noopener noreferrer">${value.text}</a>`;
+                }
+                return value.toString();
+            case "text":
+            default:
+                return value.toString();
+        }
+    }
+
+    // Method to handle cell content rendering in the template
+    getCellContent(value: any, type: string): string {
+        return this.renderCellContent(value, type);
+    }
+
+    // Method to check if cell content should be rendered as HTML
+    isHtmlCell(type: string): boolean {
+        return type === "html" || type === "link";
+    }
+
+    // Helper method to convert string/boolean values to boolean
+    private toBooleanValue(value: boolean | string): boolean {
+        if (typeof value === "boolean") {
+            return value;
+        }
+        if (typeof value === "string") {
+            return value.toLowerCase() === "true";
+        }
+        return false;
+    }
+}

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

@@ -2,10 +2,16 @@
     <doc-content-layout
         lwc:if={displayContent}
         lwc:ref="docContentLayout"
+        coveo-organization-id={coveoOrganizationId}
+        coveo-public-access-token={coveoPublicAccessToken}
+        coveo-analytics-token={coveoAnalyticsToken}
+        coveo-search-hub={coveoSearchHub}
+        coveo-advanced-query-config={coveoAdvancedQueryConfig}
         sidebar-header={docTitle}
         sidebar-content={sidebarContent}
         sidebar-value={sidebarValue}
         onselect={handleSelect}
+        use-old-sidebar={useOldSidebar}
         onlangchange={handleLanguageChange}
         languages={sidebarFooterContent.languages}
         language={sidebarFooterContent.language}

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

@@ -1,7 +1,9 @@
 /* eslint-disable @lwc/lwc/no-document-query */
 import { api, track } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
 import { FetchContent } from "./utils";
 import {
+    CoveoAdvancedQueryXMLConfig,
     DocLanguage,
     DocVersion,
     TreeNode,
@@ -14,7 +16,7 @@ import {
 } from "./types";
 import { SearchSyncer } from "docUtils/searchSyncer";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
-import { oldVersionDocInfo } from "docUtils/utils";
+import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
 import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
 import { track as trackGTM } from "dxUtils/analytics";
 import DOMPurify from "dompurify";
@@ -40,6 +42,10 @@ export default class DocXmlContent extends LightningElementWithState<{
     internalLinkClicked: boolean;
 }> {
     @api apiDomain = "https://developer.salesforce.com";
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoAnalyticsToken!: string;
+    @api coveoSearchHub!: string;
     @api hideFooter = false;
 
     @api
@@ -53,6 +59,15 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
     }
 
+    @api
+    get enableCoveo() {
+        return this._enableCoveo;
+    }
+
+    set enableCoveo(value) {
+        this._enableCoveo = normalizeBoolean(value);
+    }
+
     private availableLanguages: Array<DocLanguage> = [];
     @track private availableVersions: Array<DocVersion> = [];
     private contentProvider?: FetchContent;
@@ -68,6 +83,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     private docTitle = "";
     private _pathName = "";
     private listenerAttached = false;
+    private _enableCoveo?: boolean = false;
     private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
     private latestVersion = false;
     private previewVersion = false;
@@ -244,13 +260,35 @@ export default class DocXmlContent extends LightningElementWithState<{
         // Coveo is enabled and the version is greater than  51 (within the latest 3 versions)
         // TODO: we need a better fix for version number check
         return !(
-            !this.version?.releaseVersion ||
-            (this.version?.releaseVersion &&
-                parseInt(this.version.releaseVersion.replace("v", ""), 10) >=
-                    53)
+            this.enableCoveo &&
+            this.coveoOrganizationId &&
+            this.coveoPublicAccessToken &&
+            (!this.version?.releaseVersion ||
+                (this.version?.releaseVersion &&
+                    parseInt(
+                        this.version.releaseVersion.replace("v", ""),
+                        10
+                    ) >= 53))
         );
     }
 
+    private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
+        const config: {
+            locale?: string;
+            topicid?: string;
+            version?: string;
+        } = {
+            locale: this.languageId,
+            topicid: this.deliverable
+        };
+
+        if (this.releaseVersionId && this.releaseVersionId !== "noversion") {
+            config.version = this.releaseVersionId;
+        }
+
+        return config;
+    }
+
     private get pageHeader(): Header {
         if (!this._pageHeader) {
             this._pageHeader = document.querySelector("doc-header")!;
@@ -551,6 +589,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     updateUrl(method = HistoryState.PUSH_STATE): void {
+        logCoveoPageView(this.coveoOrganizationId, this.coveoAnalyticsToken);
         window.history[method](
             {},
             "docs",