@salesforcedevs/dx-components 1.28.3 → 1.28.5-node22-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,275 @@ 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) => {
+                // attr_title is preferable to title because it is not language-specific
+                this.configItemTitleToItemLookup.set(item.attr_title || 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 childTitle: string = child.attr_title || child.title || ""; // attr_title is preferable to title because it is not language-specific
+                    const iconSymbol =
+                        childTitle === "LinkedIn"
+                            ? "linked-in"
+                            : childTitle.toLocaleLowerCase();
+                    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
+                };
+
+                const itemTitle: string = item.attr_title || item.title || ""; // attr_title is preferable to title because it is not language-specific
+                if (itemTitle === "Cookie Preferences") {
+                    link.href = "#";
+                    link.onclick = this.handleCookiePreferencesClick;
+                } else if (itemTitle === "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/globalHeader/globalHeader.html

@@ -0,0 +1,5 @@
+<template lwc:render-mode="light">
+    <div lwc:ref="globalNavContainer" part="container">
+        <dx-skip-nav-link></dx-skip-nav-link>
+    </div>
+</template>

package/src/modules/dx/globalHeader/globalHeader.ts

@@ -0,0 +1,84 @@
+import kebabCase from "lodash.kebabcase";
+import { LightningElement, api } from "lwc";
+
+const defaultDomain = "https://developer.salesforce.com";
+const defaultLocale = "en-us";
+const defaultHeaderSettingsBasePath = "/c/public/header-settings";
+const headerSettingsJsonKeys = [
+    "regionSelectorOverride",
+    "contactLinksOverride"
+];
+
+export default class DevExNavigation extends LightningElement {
+    static renderMode = "light";
+
+    @api locale: string = defaultLocale;
+    @api path: string = defaultHeaderSettingsBasePath;
+    @api domain: string = defaultDomain;
+
+    async connectedCallback(): Promise<void> {
+        try {
+            const headerSettingsResponse = await fetch(
+                `${this.domain}${this.path}/${this.locale}.json`,
+                {
+                    headers: {
+                        "Content-Type": "application/json"
+                    }
+                }
+            );
+            if (headerSettingsResponse.ok) {
+                this.createFullNav(await headerSettingsResponse.json());
+            } else {
+                this.createBarebonesNav();
+            }
+        } catch (ex) {
+            console.error(`Navigation error: ${ex}`);
+            this.createBarebonesNav();
+        }
+    }
+
+    private createGlobalNav(globalNavSettings: any): HTMLElement {
+        const hgfNav = document.createElement("hgf-c360nav");
+
+        Object.entries(globalNavSettings).forEach(([key, value]) => {
+            if (headerSettingsJsonKeys.includes(key)) {
+                value = JSON.stringify(value);
+            }
+            hgfNav.setAttribute(kebabCase(key), value as string);
+        });
+
+        return hgfNav;
+    }
+
+    private createContextNav(contextNavData: any): HTMLElement {
+        const hgfNavContext = document.createElement("hgf-c360contextnav");
+        hgfNavContext.setAttribute("data", JSON.stringify(contextNavData));
+        return hgfNavContext;
+    }
+
+    private createFullNav(headerData: any): void {
+        const hgfNav = this.createGlobalNav(headerData.headerSettings);
+        const hgfNavContext = this.createContextNav(headerData.navItems);
+        const containerEl = this.refs.globalNavContainer as Element;
+        containerEl.appendChild(hgfNav);
+        containerEl.appendChild(hgfNavContext);
+    }
+
+    private createBarebonesNav(): void {
+        const hgfNav = this.createGlobalNav({
+            origin: "",
+            contextNavEnabled: "true"
+        });
+        const hgfNavContext = this.createContextNav({
+            variation: "static",
+            propertyTitle: {
+                label: "Developers",
+                url: "/"
+            },
+            menuGroup: {}
+        });
+        const containerEl = this.refs.globalNavContainer as Element;
+        containerEl.appendChild(hgfNav);
+        containerEl.appendChild(hgfNavContext);
+    }
+}

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/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;
+    }
+}

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
+});