@salesforcedevs/docs-components 1.34.1 → 1.34.4-topic-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.34.1",
+    "version": "1.34.4-topic-alpha.1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "e14396ab322a7cec69a1ebf180adbf8ac2902c3b"
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

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

@@ -0,0 +1,43 @@
+export const DEFAULT_TOOLTIP_LABEL = "Click to copy";
+export const COPIED_TOOLTIP_LABEL = "Copied!";
+export const COPIED_RESET_MS = 1000;
+
+export const ANALYTICS_CONTENT_CATEGORY = "content action toolbar";
+export const MORE_ACTIONS_LABEL = "More actions";
+
+export const COPY_MARKDOWN_LABEL = "Copy as Markdown";
+export const VIEW_MARKDOWN_LABEL = "View as Markdown";
+export const COPY_MARKDOWN_URL_LABEL = "Copy URL to Markdown";
+export const VIEW_LLMS_LABEL = "View llms.txt";
+export const COPY_LLMS_URL_LABEL = "Copy URL to llms.txt";
+export const OPEN_CHATGPT_LABEL = "Open in ChatGPT";
+export const OPEN_CLAUDE_LABEL = "Open in Claude";
+export const OPEN_PERPLEXITY_LABEL = "Open in Perplexity";
+
+export const LLMS_TXT_PATH = "/docs/llms.txt";
+export const CHATGPT_URL = "https://chatgpt.com/";
+export const CLAUDE_URL = "https://claude.ai/new";
+export const PERPLEXITY_URL = "https://www.perplexity.ai/search";
+
+export const ACTION_COPY_MARKDOWN = "copy-markdown";
+export const ACTION_VIEW_MARKDOWN = "view-markdown";
+export const ACTION_COPY_MARKDOWN_URL = "copy-markdown-url";
+export const ACTION_VIEW_LLMS = "view-llms";
+export const ACTION_COPY_LLMS_URL = "copy-llms-url";
+export const ACTION_OPEN_CHATGPT = "open-chatgpt";
+export const ACTION_OPEN_CLAUDE = "open-claude";
+export const ACTION_OPEN_PERPLEXITY = "open-perplexity";
+
+export const AI_ASSISTANTS = [
+    {
+        action: ACTION_OPEN_CHATGPT,
+        base: CHATGPT_URL,
+        label: OPEN_CHATGPT_LABEL
+    },
+    { action: ACTION_OPEN_CLAUDE, base: CLAUDE_URL, label: OPEN_CLAUDE_LABEL },
+    {
+        action: ACTION_OPEN_PERPLEXITY,
+        base: PERPLEXITY_URL,
+        label: OPEN_PERPLEXITY_LABEL
+    }
+] as const;

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

@@ -2,16 +2,27 @@
 
 :host {
     display: block;
+
+    /* 4px gap below the trigger, and the same 4px gap above when the menu
+       flips */
+    --popover-container-open-transform: translateY(var(--dx-g-spacing-xs));
+    --popover-container-open-transform-up: translateY(
+        calc(-1 * var(--dx-g-spacing-xs))
+    );
 }
 
 .toolbar {
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: var(--dx-g-spacing-smd);
     margin-bottom: var(--dx-g-spacing-lg);
 }
 
+.toolbar > * {
+    flex-shrink: 0;
+}
+
 .toolbar-button {
     --dx-c-button-font-weight: var(--dx-g-font-demi);
     --dx-c-button-line-height: var(--dx-g-spacing-mlg);
@@ -24,9 +35,26 @@
     background-color: var(--dx-g-gray-70);
 }
 
-@media screen and (max-width: 480px) {
-    .toolbar-button_copy-url,
-    .divider_copy-url {
-        display: none;
-    }
+.toolbar_no-markdown .divider_view-llms {
+    display: none;
+}
+
+.toolbar-menu {
+    --dx-c-popover-z-index: calc(var(--dx-g-z-index-100) + 6);
+
+    flex: 0 0 auto;
+}
+
+.menu-trigger {
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.toolbar > [data-overflow="true"] {
+    display: none;
+}
+
+.toolbar > .divider_view-markdown[data-overflow="true"] ~ .divider_menu,
+.toolbar_no-markdown .divider_menu {
+    display: none;
 }

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

@@ -1,53 +1,88 @@
 <template>
-    <div class="toolbar" lwc:if={markdownUrl}>
-        <dx-tooltip placement="top-right" label={copyMarkdownLabel}>
+    <div class={toolbarClass}>
+        <template lwc:if={hasMarkdown}>
+            <dx-tooltip
+                placement="top-right"
+                label={copyMarkdownTooltipLabel}
+                visible={copyMarkdownTooltipVisible}
+            >
+                <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 divider_view-markdown"></div>
+
             <dx-button
-                class="toolbar-button"
+                class="toolbar-button toolbar-button_view-markdown"
                 variant="inline"
                 size="small"
                 icon-sprite="utility"
-                icon-symbol="copy"
+                icon-symbol="new_window"
                 icon-size="medium"
                 icon-position="right"
-                aria-label={copyMarkdownButtonText}
-                onclick={handleCopyMarkdown}
+                aria-label={viewMarkdownButtonText}
+                onclick={handleViewMarkdown}
             >
-                {copyMarkdownButtonText}
+                {viewMarkdownButtonText}
             </dx-button>
-        </dx-tooltip>
+        </template>
 
-        <div class="divider"></div>
+        <div class="divider divider_view-llms"></div>
 
         <dx-button
-            class="toolbar-button"
+            class="toolbar-button toolbar-button_view-llms"
             variant="inline"
             size="small"
             icon-sprite="utility"
             icon-symbol="new_window"
             icon-size="medium"
             icon-position="right"
-            aria-label={viewMarkdownButtonText}
-            onclick={handleViewMarkdown}
+            aria-label={viewLlmsButtonText}
+            onclick={handleViewLlms}
         >
-            {viewMarkdownButtonText}
+            {viewLlmsButtonText}
         </dx-button>
 
-        <div class="divider divider_copy-url"></div>
+        <div class="divider divider_menu"></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}
+        <dx-dropdown
+            class="toolbar-menu"
+            options={menuOptions}
+            placement="bottom-end"
+            width-mode="fit-content"
+            onchange={handleMenuSelect}
+            onopen={handleMenuOpen}
+            onclose={handleMenuClose}
+        >
+            <dx-tooltip
+                placement="top-right"
+                label={menuTooltipLabel}
+                visible={menuTooltipVisible}
+                suppressed={menuOpen}
             >
-                {copyUrlButtonText}
-            </dx-button>
-        </dx-tooltip>
+                <dx-button
+                    class="menu-trigger"
+                    variant="secondary"
+                    size="small"
+                    icon-sprite="utility"
+                    icon-symbol="threedots"
+                    icon-size="medium"
+                    icon-only
+                >
+                    {moreActionsLabel}
+                </dx-button>
+            </dx-tooltip>
+        </dx-dropdown>
     </div>
 </template>