@salesforcedevs/dx-components 1.28.6-alpha.1 → 1.28.7-alpha.0

package/lwc.config.json

@@ -94,6 +94,7 @@
         "dx/sidebarOld",
         "dx/sidebarFooterNav",
         "dx/skipNavLink",
+        "dx/socials",
         "dx/spinner",
         "dx/stepSequence",
         "dx/stepSequenceStep",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.28.6-alpha.1",
+    "version": "1.28.7-alpha.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "6cfd671b3d33f43fcc4bb3f83c6f1b5ec0a7ed3b"
+    "gitHead": "fd19dde09113f8458a649b7f5e27fac4db3d2bb5"
 }

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -34,6 +34,7 @@ export default class CodeBlock extends LightningElement {
     private _codeBlockRendered: boolean = false;
     private _showLoadingIndicator: boolean = false;
     private _isCbHeightCalculated: boolean = false;
+    private _plainCodeForCopy: string = "";
     private markupLangs = ["visualforce", "html", "xml"];
     private componentLoaded: boolean = false;
     private showLanguageDropdown: boolean = false;
@@ -290,6 +291,9 @@ export default class CodeBlock extends LightningElement {
                     );
                 }
             }
+            // Get the plain code for copy functionality
+            const codeElement = this.template.querySelector("code");
+            this._plainCodeForCopy = codeElement?.textContent?.trim() ?? "";
             // Add line numbers to each line
             this.addLineNumbers();
         }
@@ -328,12 +332,8 @@ export default class CodeBlock extends LightningElement {
         });
 
         try {
-            const snippetContainer: HTMLElement | null =
-                this.template.querySelector(".code-block-content");
-            if (snippetContainer && snippetContainer.textContent) {
-                await navigator.clipboard.writeText(
-                    snippetContainer.textContent
-                );
+            if (this._plainCodeForCopy) {
+                await navigator.clipboard.writeText(this._plainCodeForCopy);
                 this.copyBtnText = "Copied!";
                 setTimeout(() => {
                     this.copyBtnText = "Click to copy";

package/src/modules/dx/sidebar/sidebar.html

@@ -48,7 +48,6 @@
                 <dx-sidebar-search
                     onchange={onSearchChange}
                     onloading={onSearchLoading}
-                    enable-data-cloud-search={enableDataCloudSearch}
                 ></dx-sidebar-search>
             </div>
             <slot name="version-picker"></slot>

package/src/modules/dx/sidebar/sidebar.ts

@@ -13,7 +13,6 @@ const getSearchQueryParam = (): string | null =>
         : null;
 
 export default class Sidebar extends SidebarBase {
-    @api enableDataCloudSearch: boolean | string = false;
     @api header: string = "";
 
     @api

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -15,10 +15,6 @@ const UserRecentSearches = new RecentSearches();
 const getSearchQueryParam = (): string =>
     new URLSearchParams(window.location.search).get("q") ?? "";
 
-/** Data Cloud Search API base URL derived from current origin */
-const getDataCloudSearchBaseUrl = (): string =>
-    `${window.location.origin}${DATA_CLOUD_SEARCH_PATH}`;
-
 /**
  * Returns the current page base URL without the last path segment.
  * e.g. https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_dev_guide.htm
@@ -38,8 +34,6 @@ interface DataCloudSearchResultItem {
 }
 
 export default class SidebarSearch extends LightningElement {
-    @api enableDataCloudSearch: boolean | string = false;
-
     @api
     public fetchMoreResults() {
         // Data Cloud Search API does not expose pagination in the same way; no-op
@@ -78,23 +72,7 @@ export default class SidebarSearch extends LightningElement {
         this.value = getSearchQueryParam();
     }
 
-    private get isDataCloudSearchEnabled(): boolean {
-        return (
-            this.enableDataCloudSearch === true ||
-            this.enableDataCloudSearch === "true"
-        );
-    }
-
-    private get searchApiBaseUrl(): string | null {
-        return this.isDataCloudSearchEnabled
-            ? getDataCloudSearchBaseUrl()
-            : null;
-    }
-
     renderedCallback() {
-        if (!this.isDataCloudSearchEnabled) {
-            return;
-        }
         if (!this.dataCloudSearchInitialized) {
             this.dataCloudSearchInitialized = true;
             if (!this.didRender && this.value) {

package/src/modules/dx/socials/socials.css

@@ -0,0 +1,36 @@
+:host {
+    display: inline-block;
+}
+
+.details-section {
+    color: var(--dx-g-text-label-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-xs);
+    letter-spacing: 0.7px;
+    margin-bottom: var(--dx-g-spacing-sm);
+    text-transform: uppercase;
+}
+
+.details-section span {
+    display: block;
+    line-height: var(--dx-g-spacing-md);
+}
+
+.socials-group {
+    display: flex;
+}
+
+.socials-group a:not(:last-child) {
+    margin-right: var(--dx-g-spacing-md);
+}
+
+dx-icon-badge {
+    --dx-c-icon-badge-background-color: var(--dx-g-social-svg-background-color);
+    --dx-c-icon-badge-color: var(--dx-g-social-svg-icon-color);
+    --dx-c-icon-badge-size: 34px;
+    --dx-c-icon-badge-icon-size: 18px;
+}
+
+dx-icon-badge:hover {
+    --dx-c-icon-badge-background-color: var(--dx-g-social-svg-hover-color);
+}

package/src/modules/dx/socials/socials.html

@@ -0,0 +1,22 @@
+<template>
+    <div class="details-section" if:true={hasDetails}>
+        <template for:each={details} for:item="detail">
+            <span key={detail}>{detail}</span>
+        </template>
+    </div>
+    <div class="socials-group">
+        <template for:each={socials} for:item="social">
+            <a
+                href={social.href}
+                key={social.name}
+                target={linksTarget}
+                title={social.name}
+            >
+                <dx-icon-badge
+                    sprite={spriteName}
+                    symbol={social.symbol}
+                ></dx-icon-badge>
+            </a>
+        </template>
+    </div>
+</template>

package/src/modules/dx/socials/socials.ts

@@ -0,0 +1,76 @@
+import { LightningElement, api } from "lwc";
+import { normalizeToArray } from "dxUtils/normalizers";
+
+type Icon = { name: string; symbol: string; baseShareUrl: string };
+
+const URL_TOKEN = "{url}";
+const TEXT_TOKEN = "{text}";
+
+const SOCIAL_ICONS: Array<Icon> = [
+    {
+        name: "Twitter",
+        symbol: "twitter",
+        baseShareUrl: `https://twitter.com/intent/tweet?url=${URL_TOKEN}&text=${TEXT_TOKEN}`
+    },
+    {
+        name: "Linkedin",
+        symbol: "linkedin-in",
+        baseShareUrl: `http://www.linkedin.com/sharing/share-offsite/?url=${URL_TOKEN}`
+    }
+];
+
+const SPRITE_NAME = "brand";
+
+const VALID_TARGETS = ["_self", "_blank", "_parent", "_top", "framename"];
+
+export default class Socials extends LightningElement {
+    private _linksTarget: string = "_blank";
+    private _details: Array<string> = [];
+
+    @api
+    get details() {
+        return this._details;
+    }
+
+    set details(value) {
+        this._details = normalizeToArray(value, "|") as Array<string>;
+    }
+
+    @api
+    get linksTarget(): string {
+        return this._linksTarget;
+    }
+
+    set linksTarget(value: string) {
+        if (value && !VALID_TARGETS.includes(value)) {
+            console.error(
+                `Invalid links target, valid options are: ${VALID_TARGETS.join(
+                    ", "
+                )}`
+            );
+            return;
+        }
+        this._linksTarget = value;
+    }
+
+    get socials() {
+        const url = encodeURIComponent(document.location.href);
+        const text = encodeURIComponent(document.title);
+        return SOCIAL_ICONS.map(({ baseShareUrl, ...value }: Icon) => {
+            return {
+                ...value,
+                href: baseShareUrl
+                    .replace(URL_TOKEN, url)
+                    .replace(TEXT_TOKEN, text)
+            };
+        });
+    }
+
+    get spriteName() {
+        return SPRITE_NAME;
+    }
+
+    get hasDetails() {
+        return this.details && this.details.length > 0;
+    }
+}