@salesforcedevs/docs-components 1.33.2-llms-txt-3 → 1.34.0-alpha

package/lwc.config.json

@@ -18,6 +18,7 @@
         "doc/contentMedia",
         "doc/docXmlContent",
         "doc/lwcContentLayout",
+        "doc/unifiedContentLayout",
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.33.2-llms-txt-3",
+  "version": "1.34.0-alpha",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",
@@ -25,6 +25,5 @@
     "@types/lodash.orderby": "4.6.9",
     "@types/lodash.uniqby": "4.7.9"
   },
-  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad",
-  "stableVersion": "1.33.1"
+  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

package/src/modules/doc/contentActionToolbar/contentActionToolbar.css

@@ -1,24 +1,32 @@
 @import "dxHelpers/reset";
 
 :host {
-    /* Match the Figma menu rows: Body 2 Regular, gray-10 (the dropdown option
-       default is bold + blue), with 24px (spacing-lg) horizontal padding on
-       both option rows and subheaders. These custom properties inherit through
-       the composed tree down to each dx-dropdown-option. */
-    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
-    --dx-c-dropdown-option-font-weight: var(--dx-g-font-normal);
-    --dx-c-dropdown-option-padding-horizontal: var(--dx-g-spacing-lg);
+    display: block;
+}
 
-    /* Popover only needs 8px vertical padding; horizontal is 0 since the
-       options already carry 24px each side. Inherits down to the dropdown's
-       dx-popover. */
-    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
+.toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--dx-g-spacing-smd);
+    margin-bottom: var(--dx-g-spacing-lg);
+}
 
-    /* Size the menu to its widest option instead of the default fixed 168px,
-       so labels like "Copy as Markdown" aren't clipped or awkwardly narrow.
-       Inherits down to the dropdown's dx-popover. */
-    --dx-c-popover-width: max-content;
+.toolbar-button {
+    --dx-c-button-font-weight: var(--dx-g-font-demi);
+    --dx-c-button-line-height: var(--dx-g-spacing-mlg);
+    --dx-c-button-letter-spacing: 0.005em;
+}
 
-    display: inline-flex;
-    margin-bottom: var(--dx-g-spacing-lg);
+.divider {
+    width: 1px;
+    height: var(--dx-g-spacing-md);
+    background-color: var(--dx-g-gray-70);
+}
+
+@media screen and (max-width: 480px) {
+    .toolbar-button_copy-url,
+    .divider_copy-url {
+        display: none;
+    }
 }

package/src/modules/doc/contentActionToolbar/contentActionToolbar.html

@@ -1,16 +1,53 @@
 <template>
-    <dx-split-button
-        lwc:if={markdownUrl}
-        label="Copy as Markdown"
-        action-tooltip={actionTooltip}
-        icon-symbol="copy"
-        icon-position="right"
-        variant="secondary"
-        size="small"
-        menu-aria-label="More content actions"
-        options={options}
-        stay-open-after-change
-        onactionclick={handleCopyMarkdown}
-        onselect={handleMenuSelect}
-    ></dx-split-button>
+    <div class="toolbar" lwc:if={markdownUrl}>
+        <dx-tooltip placement="top-right" label={copyMarkdownLabel}>
+            <dx-button
+                class="toolbar-button"
+                variant="inline"
+                size="small"
+                icon-sprite="utility"
+                icon-symbol="copy"
+                icon-size="medium"
+                icon-position="right"
+                aria-label={copyMarkdownButtonText}
+                onclick={handleCopyMarkdown}
+            >
+                {copyMarkdownButtonText}
+            </dx-button>
+        </dx-tooltip>
+
+        <div class="divider"></div>
+
+        <dx-button
+            class="toolbar-button"
+            variant="inline"
+            size="small"
+            icon-sprite="utility"
+            icon-symbol="new_window"
+            icon-size="medium"
+            icon-position="right"
+            aria-label={viewMarkdownButtonText}
+            onclick={handleViewMarkdown}
+        >
+            {viewMarkdownButtonText}
+        </dx-button>
+
+        <div class="divider divider_copy-url"></div>
+
+        <dx-tooltip placement="top-right" label={copyUrlLabel}>
+            <dx-button
+                class="toolbar-button toolbar-button_copy-url"
+                variant="inline"
+                size="small"
+                icon-sprite="utility"
+                icon-symbol="link"
+                icon-size="medium"
+                icon-position="right"
+                aria-label={copyUrlButtonText}
+                onclick={handleCopyUrl}
+            >
+                {copyUrlButtonText}
+            </dx-button>
+        </dx-tooltip>
+    </div>
 </template>

package/src/modules/doc/contentActionToolbar/contentActionToolbar.ts

@@ -1,5 +1,4 @@
 import { LightningElement, api } from "lwc";
-import { OptionWithNested } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
 const DEFAULT_COPY_TOOLTIP_LABEL = "Click to copy";
@@ -10,22 +9,6 @@ const ANALYTICS_CONTENT_CATEGORY = "content action toolbar";
 const COPY_MARKDOWN_LABEL = "Copy as Markdown";
 const VIEW_MARKDOWN_LABEL = "View as Markdown";
 const COPY_URL_LABEL = "Copy URL to Markdown";
-const VIEW_LLMS_LABEL = "View llms.txt";
-const COPY_LLMS_URL_LABEL = "Copy URL to llms.txt";
-
-// Option ids for the split-button menu; used to route `select` events.
-const OPTION_COPY_MARKDOWN = "copy-markdown";
-const OPTION_VIEW_MARKDOWN = "view-markdown";
-const OPTION_COPY_MARKDOWN_URL = "copy-markdown-url";
-const OPTION_VIEW_LLMS = "view-llms";
-const OPTION_COPY_LLMS_URL = "copy-llms-url";
-
-type ToolbarCtaLabel =
-    | typeof COPY_MARKDOWN_LABEL
-    | typeof VIEW_MARKDOWN_LABEL
-    | typeof COPY_URL_LABEL
-    | typeof VIEW_LLMS_LABEL
-    | typeof COPY_LLMS_URL_LABEL;
 
 export default class ContentActionToolbar extends LightningElement {
     @api
@@ -40,9 +23,8 @@ export default class ContentActionToolbar extends LightningElement {
     }
     private _pageUrl?: string;
 
-    // Id of the copy option currently flashing "Copied!" (null = none). Drives
-    // the per-option tooltip label; reassigning it re-renders `options`.
-    private copiedOptionId: string | null = null;
+    copyMarkdownLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
+    copyUrlLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
 
     private copyTooltipResetTimeout: number | null = null;
 
@@ -68,107 +50,16 @@ export default class ContentActionToolbar extends LightningElement {
         return url.toString();
     }
 
-    /**
-     * Site-root llms.txt file (same for every page), e.g.
-     * `https://example.com/llms.txt`.
-     */
-    get llmsTxtUrl(): string {
-        return new URL("/docs/llms.txt", window.location.origin).toString();
+    get copyMarkdownButtonText(): string {
+        return COPY_MARKDOWN_LABEL;
     }
 
-    // Hardcoded menu preset rendered by dx-split-button, grouped under bold
-    // subheaders with a divider between "This Page" and "All Documentation".
-    // Copy options carry a tooltip that flashes "Copied!" after a copy.
-    get options(): OptionWithNested[] {
-        return [
-            { id: "this-page", label: "This Page", subheader: true },
-            {
-                id: OPTION_COPY_MARKDOWN,
-                label: COPY_MARKDOWN_LABEL,
-                tooltip: this.copyTooltipFor(OPTION_COPY_MARKDOWN),
-                rightIconData: {
-                    iconSymbol: "copy",
-                    iconSprite: "utility",
-                    iconColor: "gray-50"
-                }
-            },
-            {
-                id: OPTION_VIEW_MARKDOWN,
-                label: VIEW_MARKDOWN_LABEL,
-                rightIconData: {
-                    iconSymbol: "new_window",
-                    iconSprite: "utility",
-                    iconColor: "gray-50"
-                }
-            },
-            {
-                id: OPTION_COPY_MARKDOWN_URL,
-                label: COPY_URL_LABEL,
-                tooltip: this.copyTooltipFor(OPTION_COPY_MARKDOWN_URL),
-                rightIconData: {
-                    iconSymbol: "link",
-                    iconSprite: "utility",
-                    iconColor: "gray-50"
-                }
-            },
-            { id: "divider-1", label: "", divider: true },
-            { id: "all-docs", label: "All Documentation", subheader: true },
-            {
-                id: OPTION_VIEW_LLMS,
-                label: VIEW_LLMS_LABEL,
-                rightIconData: {
-                    iconSymbol: "new_window",
-                    iconSprite: "utility",
-                    iconColor: "gray-50"
-                }
-            },
-            {
-                id: OPTION_COPY_LLMS_URL,
-                label: COPY_LLMS_URL_LABEL,
-                tooltip: this.copyTooltipFor(OPTION_COPY_LLMS_URL),
-                rightIconData: {
-                    iconSymbol: "link",
-                    iconSprite: "utility",
-                    iconColor: "gray-50"
-                }
-            }
-        ];
+    get viewMarkdownButtonText(): string {
+        return VIEW_MARKDOWN_LABEL;
     }
 
-    // Tooltip for the split button's primary action (Copy as Markdown). Shares
-    // the copy-markdown flash state, so it flips to "Copied!" after a successful
-    // copy from either the primary button or the matching menu option.
-    get actionTooltip(): string {
-        return this.copyTooltipFor(OPTION_COPY_MARKDOWN);
-    }
-
-    // "Copied!" while this option is flashing, otherwise "Click to copy".
-    private copyTooltipFor(optionId: string): string {
-        return this.copiedOptionId === optionId
-            ? COPIED_TOOLTIP_LABEL
-            : DEFAULT_COPY_TOOLTIP_LABEL;
-    }
-
-    /** Routes a menu selection to the matching action handler. */
-    handleMenuSelect(event: CustomEvent) {
-        switch (event.detail) {
-            case OPTION_COPY_MARKDOWN:
-                this.handleCopyMarkdown(event);
-                break;
-            case OPTION_VIEW_MARKDOWN:
-                this.handleViewMarkdown(event);
-                break;
-            case OPTION_COPY_MARKDOWN_URL:
-                this.handleCopyUrl(event);
-                break;
-            case OPTION_VIEW_LLMS:
-                this.handleViewLlms(event);
-                break;
-            case OPTION_COPY_LLMS_URL:
-                this.handleCopyLlmsUrl(event);
-                break;
-            default:
-        }
+    get copyUrlButtonText(): string {
+        return COPY_URL_LABEL;
     }
 
     async handleCopyMarkdown(event: Event) {
@@ -190,7 +81,7 @@ export default class ContentActionToolbar extends LightningElement {
             }
             const markdown = await response.text();
             await navigator.clipboard.writeText(markdown);
-            this.flashCopied(OPTION_COPY_MARKDOWN);
+            this.flashCopied("copyMarkdownLabel");
         } catch (error) {
             console.error(error);
         }
@@ -225,55 +116,16 @@ export default class ContentActionToolbar extends LightningElement {
 
         try {
             await navigator.clipboard.writeText(this.markdownUrl);
-            this.flashCopied(OPTION_COPY_MARKDOWN_URL);
-        } catch (error) {
-            console.error(error);
-        }
-    }
-
-    handleViewLlms(event: Event) {
-        this.trackToolbarEvent(
-            event,
-            "custEv_linkClick",
-            VIEW_LLMS_LABEL,
-            this.llmsTxtUrl
-        );
-
-        window.open(this.llmsTxtUrl, "_blank", "noopener,noreferrer");
-    }
-
-    async handleCopyLlmsUrl(event: Event) {
-        this.trackToolbarEvent(
-            event,
-            "custEv_linkClick",
-            COPY_LLMS_URL_LABEL,
-            this.llmsTxtUrl
-        );
-
-        try {
-            await navigator.clipboard.writeText(this.llmsTxtUrl);
-            this.flashCopied(OPTION_COPY_LLMS_URL);
+            this.flashCopied("copyUrlLabel");
         } catch (error) {
             console.error(error);
         }
     }
 
-    // Flash the given copy option's tooltip to "Copied!" then revert.
-    private flashCopied(optionId: string) {
-        if (this.copyTooltipResetTimeout !== null) {
-            window.clearTimeout(this.copyTooltipResetTimeout);
-        }
-        this.copiedOptionId = optionId;
-        this.copyTooltipResetTimeout = window.setTimeout(() => {
-            this.copiedOptionId = null;
-            this.copyTooltipResetTimeout = null;
-        }, COPIED_TOOLTIP_RESET_MS);
-    }
-
     private trackToolbarEvent(
         event: Event,
         eventName: "custEv_linkClick",
-        label: ToolbarCtaLabel,
+        label: string,
         url: string
     ): void {
         track(event.currentTarget!, eventName, {
@@ -283,9 +135,21 @@ export default class ContentActionToolbar extends LightningElement {
             element_title: label,
             content_category: ANALYTICS_CONTENT_CATEGORY,
             // Source page the CTA was clicked from; `click_url` above is the
-            // destination. Uses the same `page_path` expression as the
+            // `.md` destination. Uses the same `page_path` expression as the
             // amfReference doc_page_view events.
             page_path: window.location.pathname + window.location.search
         });
     }
+
+    private flashCopied(labelKey: "copyMarkdownLabel" | "copyUrlLabel") {
+        if (this.copyTooltipResetTimeout !== null) {
+            window.clearTimeout(this.copyTooltipResetTimeout);
+        }
+        this[labelKey] = COPIED_TOOLTIP_LABEL;
+        this.copyTooltipResetTimeout = window.setTimeout(() => {
+            this.copyMarkdownLabel = DEFAULT_COPY_TOOLTIP_LABEL;
+            this.copyUrlLabel = DEFAULT_COPY_TOOLTIP_LABEL;
+            this.copyTooltipResetTimeout = null;
+        }, COPIED_TOOLTIP_RESET_MS);
+    }
 }

package/src/modules/doc/contentActionToolbar/contentActionToolbarMocks.ts

@@ -10,8 +10,8 @@ export const DUMMY_MARKDOWN_CONTENT = `# Dummy Markdown
 
 Storybook serves this placeholder content in place of the real markdown
 that the docs backend would return for the current page. It exists so
-the "Copy as Markdown" clipboard action, the "View as Markdown" new tab,
-and the "Copy URL to Markdown" clipboard behavior are all exercisable in
+the "Copied" tooltip, the "View as Markdown" new tab, and the
+"Copy URL to Markdown" clipboard behavior are all exercisable in
 storybook without hitting the live backend.
 
 - Item 1
@@ -19,30 +19,18 @@ storybook without hitting the live backend.
 - Item 3
 `;
 
-export const DUMMY_LLMS_CONTENT = `# Dummy llms.txt
-
-Storybook serves this placeholder in place of the site-root llms.txt so
-the "View llms.txt" new tab and "Copy URL to llms.txt" clipboard behavior
-are exercisable without hitting the live backend.
-`;
-
 export const DUMMY_MARKDOWN_DATA_URL = `data:text/markdown;charset=utf-8,${encodeURIComponent(
     DUMMY_MARKDOWN_CONTENT
 )}`;
 
-export const DUMMY_LLMS_DATA_URL = `data:text/plain;charset=utf-8,${encodeURIComponent(
-    DUMMY_LLMS_CONTENT
-)}`;
-
-/** Intercepts `.md` and `/llms.txt` GET requests and returns dummy content. */
+/** Intercepts any `.md` GET request and returns the dummy markdown. */
 export const contentActionToolbarMswHandlers = [
-    http.get(/\.md(\?.*)?$/, () => HttpResponse.text(DUMMY_MARKDOWN_CONTENT)),
-    http.get(/\/llms\.txt(\?.*)?$/, () => HttpResponse.text(DUMMY_LLMS_CONTENT))
+    http.get(/\.md(\?.*)?$/, () => HttpResponse.text(DUMMY_MARKDOWN_CONTENT))
 ];
 
 let windowOpenIntercepted = false;
 
-/** Redirects `window.open` calls for `.md` and `llms.txt` URLs to dummy data URLs (MSW does not cover new tabs). */
+/** Redirects `window.open` calls for `.md` URLs to the dummy markdown data URL (MSW does not cover new tabs). */
 export function interceptWindowOpenForContentActionToolbar() {
     if (windowOpenIntercepted) {
         return;
@@ -55,9 +43,6 @@ export function interceptWindowOpenForContentActionToolbar() {
         if (stringUrl.endsWith(".md")) {
             return originalOpen(DUMMY_MARKDOWN_DATA_URL, target, features);
         }
-        if (stringUrl.endsWith("llms.txt")) {
-            return originalOpen(DUMMY_LLMS_DATA_URL, target, features);
-        }
         return originalOpen(url ?? "", target, features);
     }) as typeof window.open;
 }

package/src/modules/doc/redocReference/redocReference.css

@@ -1,7 +1,7 @@
 :host {
     --dx-footer-margin-top: 142px;
     --doc-c-redoc-sidebar-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
-            var(--dx-g-spacing-xl)
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
     );
+    --doc-c-redoc-sidebar-bg: white;
 }