@salesforcedevs/dx-components 1.28.0 → 1.28.1-banner-1

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

@@ -4,15 +4,21 @@ import { FooterVariant, LightningSlotElement } from "typings/custom";
 import { track } from "dxUtils/analytics";
 import { isSlotEmpty } from "dxUtils/slot";
 
-export default class Footer extends LightningElement {
+class Footer extends LightningElement {
     private _variant: FooterVariant = "small-signup";
     private isSlotEmpty = true;
     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`;
 
+    @api
+    useMfe: boolean = false; // TODO: Probably just remove this once the footer MFE supports rendering in non-full-width contexts
+
     @api
     set variant(value: FooterVariant) {
         if (!this.isFooterVariant(value)) {
@@ -93,3 +99,272 @@ export default class Footer extends LightningElement {
         });
     }
 }
+
+// This encapsulates the old non-MFE footer functionality that should be removed once the footer MFE supports rendering in non-full-width contexts.
+// It's encapsulated like this solely for ease of deletion later.
+function augmentWithNonMFEFooterFunctionality(FooterClass: typeof Footer) {
+    const baseSocialIconUrl = `/assets/icons/brand-sprite/svg/symbols.svg`;
+
+    return class NonMFEFooter extends FooterClass {
+        private didRequestFooterConfig = false;
+        private footerConfig: any = []; // NOTE: See mockProps.ts for the expected format of the footer config
+        private configItemTitleToItemLookup: Map<string, any> = new Map();
+        private configItemParentToChildrenLookup: Map<number, any[]> =
+            new Map();
+        private generalLinks: any = [];
+        private socialLinks: any = [];
+        private termsLinks: any = [];
+
+        async renderedCallback() {
+            super.renderedCallback?.();
+
+            if (this.didRequestFooterConfig || this.useMfe) {
+                return;
+            }
+
+            this.didRequestFooterConfig = true;
+            this.footerConfig = await this.requestFooterConfig();
+            this.buildFooterConfigLookupTables(this.footerConfig);
+            this.setSocialLinks();
+            this.setGeneralLinks();
+            this.setLegalFooter();
+        }
+
+        get showContainerMiddle() {
+            return !this.showLegalOnly;
+        }
+
+        private async requestFooterConfig() {
+            let config: any = [];
+            try {
+                const response = await fetch(
+                    `${this.mfeConfigOrigin}/c360/experience/v1/navigation`
+                );
+                const data = await response.json();
+                config = data["footer-navigation"] || [];
+            } catch (error) {
+                console.error("Error requesting footer config:", error);
+            }
+            return config;
+        }
+
+        private buildFooterConfigLookupTables(config: any[]) {
+            config.forEach((item: any) => {
+                this.configItemTitleToItemLookup.set(item.title, item);
+                if (item.menu_item_parent) {
+                    const parentId = parseInt(item.menu_item_parent, 10);
+                    const children =
+                        this.configItemParentToChildrenLookup.get(parentId) ||
+                        [];
+                    children.push(item);
+                    this.configItemParentToChildrenLookup.set(
+                        parentId,
+                        children
+                    );
+                }
+            });
+        }
+
+        private setSocialLinks() {
+            const socialLinksParentItem =
+                this.configItemTitleToItemLookup.get("social-icons");
+
+            if (!socialLinksParentItem || !socialLinksParentItem.ID) {
+                console.error(
+                    "Social links parent item not found in footer config"
+                );
+                return;
+            }
+
+            const socialLinksItems = this.configItemParentToChildrenLookup.get(
+                socialLinksParentItem.ID
+            );
+
+            if (!socialLinksItems) {
+                console.error(
+                    "Social links children items not found in footer config"
+                );
+                return;
+            }
+
+            this.socialLinks =
+                socialLinksItems.map((child: any) => {
+                    const iconSymbol =
+                        child.title === "LinkedIn"
+                            ? "linked-in"
+                            : child.title.toLowerCase();
+                    const iconUrlHash =
+                        iconSymbol === "twitter"
+                            ? "#twitter-x"
+                            : `#themed-${iconSymbol}`;
+
+                    return {
+                        href: child.url,
+                        iconSprite: "brand",
+                        iconURL: `${baseSocialIconUrl}${iconUrlHash}`,
+                        label: child.title,
+                        iconSymbol
+                    };
+                });
+        }
+
+        private setGeneralLinks() {
+            const topFooterItem =
+                this.configItemTitleToItemLookup.get("top-footer");
+            const mediaItem = this.configItemTitleToItemLookup.get("media");
+
+            if (!topFooterItem || !topFooterItem.ID) {
+                console.error("Top footer item not found in footer config");
+                return;
+            }
+
+            const generalLinksHeadingsItems =
+                this.configItemParentToChildrenLookup
+                    .get(topFooterItem.ID)
+                    ?.filter((item: any) => item.ID !== mediaItem?.ID);
+
+            if (!generalLinksHeadingsItems) {
+                console.error(
+                    "General links children items not found in footer config"
+                );
+                return;
+            }
+
+            const generalLinks: any[] = [];
+            generalLinksHeadingsItems.forEach((item: any) => {
+                const childrenItems = this.configItemParentToChildrenLookup.get(item.ID);
+
+                if (!childrenItems) {
+                    console.error(`General links children items not found for item with title "${item.title}"`);
+                    return;
+                }
+
+                generalLinks.push({
+                    id: item.title,
+                    label: item.title,
+                    options: childrenItems.map((option: any) => {
+                        return {
+                            id: option.title,
+                            label: option.title,
+                            link: {
+                                href: option.url,
+                                target: option.target
+                            }
+                        };
+                    })
+                });
+            });
+            this.generalLinks = generalLinks;
+        }
+
+        private setLegalFooter() {
+            const copyrightNoticeItem = this.configItemTitleToItemLookup.get("All rights reserved");
+
+            if (!copyrightNoticeItem) {
+                console.error("All rights reserved item not found in footer config");
+                return;
+            }
+
+            const { url, description } = copyrightNoticeItem;
+            const copyrightNoticeInnerHtml = description.replace("{{All rights reserved}}", `<a href="${url}">All rights reserved</a>`);
+            const copyrightNoticeEl = this.template.querySelector(".copyright-notice")!;
+            copyrightNoticeEl.innerHTML = copyrightNoticeInnerHtml;
+            const copyrightLink = copyrightNoticeEl.querySelector("a");
+            if (copyrightLink) {
+                copyrightLink.addEventListener("click", (e) =>
+                    this.handleCopyrightLinkClick(e as Event)
+                );
+            }
+
+            const legalLinksItems = this.configItemParentToChildrenLookup.get(copyrightNoticeItem.ID);
+
+            if (!legalLinksItems) {
+                console.error("Legal links children items not found in footer config");
+                return;
+            }
+
+            this.termsLinks = legalLinksItems.map((item: any) => {
+                const link: any = {
+                    label: item.title,
+                    href: item.url,
+                    target: item.target,
+                    rel: item.rel
+                };
+
+                if (item.title === "Cookie Preferences") {
+                    link.href = "#";
+                    link.onclick = this.handleCookiePreferencesClick;
+                } else if (item.title === "Your Privacy Choices") {
+                    link.img = "https://developer.salesforce.com/ns-assets/privacyoptions.svg";
+                }
+
+                return link;
+            });
+        }
+
+        private openOneTrustInfoDisplay() {
+            if ((window as any).OneTrust && (window as any).OneTrust.ToggleInfoDisplay) {
+                (window as any).OneTrust.ToggleInfoDisplay();
+            }
+        }
+
+        private trackFooterLinkClick(
+            e: Event,
+            options?: {
+                label?: string;
+                elementTitle?: string;
+                clickUrl?: string;
+            }
+        ) {
+            const anchor = e.currentTarget as HTMLAnchorElement;
+            const clickText =
+                options?.label ??
+                anchor.textContent?.trim() ??
+                anchor.getAttribute("aria-label") ??
+                anchor.href;
+            const elementTitle = options?.elementTitle ?? clickText;
+            const clickUrl = options?.clickUrl ?? anchor.href;
+
+            track(anchor, "custEv_linkClick", {
+                click_text: clickText,
+                click_url: clickUrl,
+                element_type: "link",
+                element_title: elementTitle,
+                content_category: "footer",
+                nav_item: clickText,
+                nav_level: "1",
+                nav_type: "footer"
+            });
+        }
+
+        private handleLogoClick(e: Event) {
+            this.trackFooterLinkClick(e, {
+                label: "Salesforce",
+                elementTitle: "Salesforce logo",
+                clickUrl: `${window.location.origin}/`
+            });
+        }
+
+        private handleSocialLinkClick(e: Event) {
+            this.trackFooterLinkClick(e);
+        }
+
+        private handleCookiePreferencesClick(e: Event) {
+            this.trackFooterLinkClick(e, {
+                label: "Cookie Preferences",
+                clickUrl: (e.currentTarget as HTMLAnchorElement).href || "#"
+            });
+            this.openOneTrustInfoDisplay();
+        }
+
+        private handleTermsClick(e: Event) {
+            this.trackFooterLinkClick(e);
+        }
+
+        private handleCopyrightLinkClick(e: Event) {
+            this.trackFooterLinkClick(e, { label: "All rights reserved" });
+        }
+    };
+}
+
+export default augmentWithNonMFEFooterFunctionality(Footer);

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() {
@@ -14,6 +15,7 @@ export default class FooterMfe extends LightningElement {
         this.footerElement = document.createElement("hgf-footer");
         this.footerElement.setAttribute("origin", this.origin);
         this.footerElement.setAttribute("hide-language-selector", "true");
+        this.footerElement.setAttribute("home-href", this.homeHref);
         if (this.legalOnly) {
             this.footerElement.setAttribute("legal-only", "true");
         }

package/src/modules/dx/input/input.ts

@@ -195,7 +195,7 @@ export default class Input extends LightningElement {
     }
 
     private get shortcutImgSrc() {
-        return `https://a.sfdcstatic.com/developer-website/prod/images/${this.commandKey}.svg`;
+        return `https://developer.salesforce.com/ns-assets/${this.commandKey}.svg`;
     }
 
     private get shortcutImgAlt() {

package/src/modules/dx/logo/logo.ts

@@ -3,7 +3,7 @@ import { LightningElement, api } from "lwc";
 export default class Logo extends LightningElement {
     @api href: string = "/";
     @api imgSrc: string =
-        "https://a.sfdcstatic.com/developer-website/prod/images/salesforce-cloud.svg";
+        "https://developer.salesforce.com/ns-assets/salesforce-cloud.svg";
     @api imgAlt: string = "Salesforce logo";
     @api label!: string;
 }

package/src/modules/dx/searchResults/resultsTemplate.js

@@ -9,7 +9,7 @@ export default html`
     <div class="coveo-show-if-no-results">
         <div class="no-results">
             <img
-                src="https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle-small.svg"
+                src="https://developer.salesforce.com/ns-assets/binary-cloud-circle-small.svg"
                 alt="purple cloud with floating binary numbers above"
             />
             <div class="no-results-info">

package/src/modules/dx/searchResults/searchResults.css

@@ -311,7 +311,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .dx-search-header {
     padding: var(--dx-g-spacing-xl);
-    background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-trees.svg")
+    background: url("https://developer.salesforce.com/ns-assets/binary-cloud-trees.svg")
             no-repeat 100% 0,
         linear-gradient(
             77deg,
@@ -352,7 +352,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 @media (min-width: 928px) and (max-width: 1024px) {
     .dx-search-header {
-        background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-trees.svg")
+        background: url("https://developer.salesforce.com/ns-assets/binary-cloud-trees.svg")
                 no-repeat 200% 0,
             linear-gradient(
                 77deg,
@@ -380,7 +380,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 @media (min-width: 768px) and (max-width: 928px) {
     .dx-search-header {
-        background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary-trees.svg")
+        background: url("https://developer.salesforce.com/ns-assets/binary-trees.svg")
                 no-repeat 90% 50%,
             linear-gradient(
                 77deg,
@@ -392,7 +392,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 @media (max-width: 768px) {
     .dx-search-header {
-        background: url("https://a.sfdcstatic.com/developer-website/prod/images/binary.svg")
+        background: url("https://developer.salesforce.com/ns-assets/binary.svg")
                 no-repeat 90% 50%,
             linear-gradient(
                 77deg,

package/src/modules/dx/sectionBanner/sectionBanner.html

@@ -3,7 +3,7 @@
         <img
             if:false={hideTopGraphic}
             class="graphic"
-            src="https://a.sfdcstatic.com/developer-website/prod/images/dx-section-banner-graphic-1.svg"
+            src="https://developer.salesforce.com/ns-assets/dx-section-banner-graphic-1.svg"
             alt=""
         />
         <div class="content">

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

@@ -69,7 +69,7 @@
             <img
                 lwc:if={isSearchLoading}
                 class="loading-skeleton padding-horizontal"
-                src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-loading.svg"
+                src="https://developer.salesforce.com/ns-assets/sidebar-loading.svg"
                 alt="loading"
             />
             <template

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

@@ -16,7 +16,7 @@
     <img
         if:true={showChildrenLoading}
         class="tree-children-loading"
-        src="https://a.sfdcstatic.com/developer-website/prod/images/sidebar-item-loading.svg"
+        src="https://developer.salesforce.com/ns-assets/sidebar-item-loading.svg"
         alt="childrenLoading"
     />
     <template if:true={showChildren} tabindex="0">

package/src/modules/dxUtils/shiki/__mocks__/shiki.ts

@@ -34,7 +34,8 @@ export const createHighlighter = jest.fn().mockImplementation(() => {
                 "apex",
                 "text",
                 "handlebars"
-            ])
+            ]),
+        loadLanguage: jest.fn().mockResolvedValue(undefined)
     });
 });
 

package/src/modules/dxUtils/shiki/__mocks__/shikijs.ts

@@ -21,3 +21,9 @@ export default mockLanguage;
 // Also export as named export for themes
 export const theme = mockTheme;
 export const lang = mockLanguage;
+
+// Mock for @shikijs/colorized-brackets
+export const transformerColorizedBrackets = () => ({
+    name: "colorized-brackets",
+    preprocess: (code: string) => code
+});