@salesforcedevs/dx-components 1.27.16 → 1.27.22-banner

package/lwc.config.json

@@ -56,6 +56,7 @@
         "dx/featuresListHeader",
         "dx/filterMenu",
         "dx/footer",
+        "dx/footerMfe",
         "dx/formattedDateTime",
         "dx/formattedRichText",
         "dx/grid",
@@ -93,7 +94,6 @@
         "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.27.16",
+    "version": "1.27.22-banner",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "92787faed8b31ef7128f8cee6421a06857def418"
+    "gitHead": "c75e59bd77c2c61b628eb54068cd366f486bd6da"
 }

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/footer/footer.html

@@ -45,6 +45,7 @@
         <dx-footer-mfe
             legal-only={showLegalOnly}
             origin={mfeConfigOrigin}
+            home-href={mfeHomeHref}
         ></dx-footer-mfe>
     </footer>
 </template>

package/src/modules/dx/footer/footer.ts

@@ -10,6 +10,9 @@ export default class Footer extends LightningElement {
     private signupUrl =
         "https://www.salesforce.com/form/other/role-based-newsletter/?Developer=true";
 
+    @api
+    mfeHomeHref: string = `/${window.location.host}`; // ugly hack: ideally this wouldn't be necessary, but the only way to remove the "See all ways to contact us" link from the footer MFE is to set this to a non-empty value other than "us"; and given the way that the footer works, the non-empty value needs to be something that can be appended to `/` and work correctly
+
     @api
     mfeConfigOrigin: string = `${window.location.origin}/developer/en-us/wp-json`;
 

package/src/modules/dx/footerMfe/footerMfe.ts

@@ -4,6 +4,7 @@ export default class FooterMfe extends LightningElement {
     private footerElement: HTMLElement | null = null;
 
     @api legalOnly = false;
+    @api homeHref: string = `/${window.location.host}`; // ugly hack by default: ideally this wouldn't be necessary, but the only way to remove the "See all ways to contact us" link from the footer MFE is to set this to a non-empty value other than "us"; and given the way that the footer works, the non-empty value needs to be something that can be appended to `/` and work correctly
     @api origin: string = `${window.location.origin}/developer/en-us/wp-json`;
 
     renderedCallback() {

package/src/modules/dx/toc/toc.css

@@ -69,6 +69,27 @@
     transition: var(--dx-g-transition-hue-1x);
 }
 
+/* Indent TOC items by heading level: H2 base, H3+ progressively indented */
+.toc-level-2 {
+    padding-left: 11px;
+}
+
+.toc-level-3 {
+    padding-left: calc(11px + var(--dx-g-spacing-md, 16px));
+}
+
+.toc-level-4 {
+    padding-left: calc(11px + 2 * var(--dx-g-spacing-md, 16px));
+}
+
+.toc-level-5 {
+    padding-left: calc(11px + 3 * var(--dx-g-spacing-md, 16px));
+}
+
+.toc-level-6 {
+    padding-left: calc(11px + 4 * var(--dx-g-spacing-md, 16px));
+}
+
 .content-button.selected {
     border-color: var(--dx-g-blue-vibrant-50);
     color: var(--dx-g-blue-vibrant-50);

package/src/modules/dx/toc/toc.ts

@@ -32,10 +32,12 @@ export default class Toc extends LightningElement {
             this.value ||
             (this._options && this._options.length > 0 && this._options[0].id);
         return this._options.map((option) => {
+            const level = option.level ?? 2;
             return {
                 ...option,
                 className: cx(
                     "content-button",
+                    `toc-level-${level}`,
                     option.id === actualValue && "selected"
                 )
             };

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

@@ -1,36 +0,0 @@
-: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

@@ -1,22 +0,0 @@
-<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

@@ -1,76 +0,0 @@
-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;
-    }
-}