@salesforcedevs/docs-components 1.33.2-alpha-iphone-scroll-7 → 1.33.2-llms-txt-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.33.2-alpha-iphone-scroll-7",
+  "version": "1.33.2-llms-txt-2",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",

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

@@ -1,31 +1,24 @@
 @import "dxHelpers/reset";
 
 :host {
-    display: block;
-}
+    /* 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);
 
-.toolbar {
-    display: flex;
-    align-items: center;
-    gap: var(--dx-g-spacing-smd);
-    margin-bottom: var(--dx-g-spacing-lg);
-}
+    /* 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-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;
-}
+    /* 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;
 
-.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;
-    }
+    display: inline-flex;
+    margin-bottom: var(--dx-g-spacing-lg);
 }

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

@@ -1,53 +1,15 @@
 <template>
-    <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>
+    <dx-split-button
+        lwc:if={markdownUrl}
+        label="Copy as Markdown"
+        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>
 </template>

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

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import { OptionWithNested } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
 const DEFAULT_COPY_TOOLTIP_LABEL = "Click to copy";
@@ -9,6 +10,22 @@ 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
@@ -23,8 +40,9 @@ export default class ContentActionToolbar extends LightningElement {
     }
     private _pageUrl?: string;
 
-    copyMarkdownLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
-    copyUrlLabel: string = DEFAULT_COPY_TOOLTIP_LABEL;
+    // 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;
 
     private copyTooltipResetTimeout: number | null = null;
 
@@ -50,16 +68,100 @@ export default class ContentActionToolbar extends LightningElement {
         return url.toString();
     }
 
-    get copyMarkdownButtonText(): string {
-        return COPY_MARKDOWN_LABEL;
+    /**
+     * 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 viewMarkdownButtonText(): string {
-        return VIEW_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 copyUrlButtonText(): string {
-        return COPY_URL_LABEL;
+    // "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:
+        }
     }
 
     async handleCopyMarkdown(event: Event) {
@@ -81,7 +183,7 @@ export default class ContentActionToolbar extends LightningElement {
             }
             const markdown = await response.text();
             await navigator.clipboard.writeText(markdown);
-            this.flashCopied("copyMarkdownLabel");
+            this.flashCopied(OPTION_COPY_MARKDOWN);
         } catch (error) {
             console.error(error);
         }
@@ -116,16 +218,55 @@ export default class ContentActionToolbar extends LightningElement {
 
         try {
             await navigator.clipboard.writeText(this.markdownUrl);
-            this.flashCopied("copyUrlLabel");
+            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);
         } 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: string,
+        label: ToolbarCtaLabel,
         url: string
     ): void {
         track(event.currentTarget!, eventName, {
@@ -135,21 +276,9 @@ 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
-            // `.md` destination. Uses the same `page_path` expression as the
+            // 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 "Copied" tooltip, the "View as Markdown" new tab, and the
-"Copy URL to Markdown" clipboard behavior are all exercisable in
+the "Copy as Markdown" clipboard action, 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,18 +19,30 @@ 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
 )}`;
 
-/** Intercepts any `.md` GET request and returns the dummy markdown. */
+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. */
 export const contentActionToolbarMswHandlers = [
-    http.get(/\.md(\?.*)?$/, () => HttpResponse.text(DUMMY_MARKDOWN_CONTENT))
+    http.get(/\.md(\?.*)?$/, () => HttpResponse.text(DUMMY_MARKDOWN_CONTENT)),
+    http.get(/\/llms\.txt(\?.*)?$/, () => HttpResponse.text(DUMMY_LLMS_CONTENT))
 ];
 
 let windowOpenIntercepted = false;
 
-/** Redirects `window.open` calls for `.md` URLs to the dummy markdown data URL (MSW does not cover new tabs). */
+/** Redirects `window.open` calls for `.md` and `llms.txt` URLs to dummy data URLs (MSW does not cover new tabs). */
 export function interceptWindowOpenForContentActionToolbar() {
     if (windowOpenIntercepted) {
         return;
@@ -43,6 +55,9 @@ 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/sprigSurvey/sprigSurvey.scoped.css

@@ -1,9 +1,3 @@
-@media screen and (max-width: 768px) {
-    :host {
-        display: block;
-    }
-}
-
 :host .survey-container {
     align-items: center;
     align-content: center;
@@ -13,18 +7,6 @@
     margin: 20px 0;
 }
 
-/* when phone size, make the survey container a column */
-@media screen and (max-width: 768px) {
-    :host .survey-container {
-        flex-direction: column;
-        gap: var(--dx-g-spacing-md);
-    }
-
-    .text-container {
-        text-align: center;
-    }
-}
-
 dx-hr:first-of-type::part(hr) {
     margin-top: var(--dx-g-spacing-2xl);
 }