@salesforcedevs/dx-components 1.29.0 → 1.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.29.0",
+    "version": "1.30.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "6b290fbf6e3032a9708592af2932b43d5e970bfc"
+    "gitHead": "4027270163b2eb9610b911a09bfa31f536061fe4"
 }

package/src/modules/dx/footer/footer.css

@@ -275,3 +275,175 @@ footer.signup-variant-no-signup {
         width: 100%;
     }
 }
+
+/*
+================================
+BEGIN OLD FOOTER STYLES -- CAN BE DELETED ONCE FOOTER MFE IS RE-DEPLOYED
+================================
+*/
+.term-icon {
+    width: 35px;
+    margin: 0 var(--dx-g-spacing-xs);
+}
+
+.content-container_middle {
+    display: grid;
+    grid-gap: var(--dx-g-spacing-xl);
+    grid-template:
+        "logo general" auto
+        "socials general" max-content
+        "locales general" max-content / auto max-content;
+    background: var(--dx-footer-themed-background-color);
+    padding-top: var(--dx-g-spacing-4xl);
+    padding-bottom: var(--dx-g-spacing-3xl);
+}
+
+.logo {
+    grid-area: logo;
+    width: max-content;
+    height: var(--dx-g-spacing-4xl);
+}
+
+.logo > img {
+    height: 100%;
+    user-select: none;
+    -webkit-user-drag: none;
+}
+
+.general {
+    grid-area: general;
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-gap: var(--dx-g-spacing-4xl);
+}
+
+.locales {
+    grid-area: locales;
+}
+
+.socials {
+    grid-area: socials;
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-auto-rows: min-content;
+    grid-gap: var(--dx-g-spacing-sm);
+}
+
+.socials > a {
+    border-radius: 50%;
+    height: var(--dx-g-spacing-xl);
+    width: var(--dx-g-spacing-xl);
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.terms a {
+    color: var(--dx-g-blue-vibrant-70);
+    text-decoration: underline;
+}
+
+.terms > span,
+.terms_links > a {
+    margin: var(--dx-g-spacing-sm) 0;
+}
+
+.terms > span > a {
+    display: inline;
+}
+
+.terms a:hover {
+    color: var(--dx-g-blue-vibrant-80);
+}
+
+.socials > a:hover {
+    background: var(--dx-g-blue-vibrant-80);
+}
+
+.socials > a > svg {
+    fill: var(--dx-footer-themed-svg-icon-color);
+    height: 100%;
+}
+
+/* BOTTOM */
+.content-container_bottom {
+    display: flex;
+    background: var(--dx-footer-themed-terms-and-conditions-background-color);
+}
+
+.content-container_bottom a {
+    text-decoration: underline;
+}
+
+.terms {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    margin: var(--dx-g-spacing-md) 0;
+}
+
+.terms > span {
+    padding-right: var(--dx-g-spacing-lg);
+    color: white;
+}
+
+.terms > span > img {
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+.terms_links {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.terms_links > *:not(:last-child) {
+    margin-right: var(--dx-g-spacing-lg);
+}
+
+@media screen and (max-width: 1024px) {
+    .content-container_middle {
+        grid-gap: var(--dx-g-spacing-lg);
+        padding-top: var(--dx-g-spacing-2xl);
+        padding-bottom: var(--dx-g-spacing-2xl);
+    }
+
+    .logo {
+        height: var(--dx-g-spacing-2xl);
+    }
+
+    .socials > a {
+        height: var(--dx-g-spacing-lg);
+        width: var(--dx-g-spacing-lg);
+    }
+
+    .socials > a > dx-icon {
+        --dx-c-icon-size: var(--dx-g-icon-size-xs);
+    }
+
+    .socials > a.github > dx-icon {
+        --dx-c-icon-size: var(--dx-g-spacing-lg);
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .content-container_middle {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .term-icon {
+        margin-left: 0;
+    }
+}
+
+/*
+================================
+END OLD FOOTER STYLES -- CAN BE DELETED ONCE FOOTER MFE IS RE-DEPLOYED
+================================
+*/

package/src/modules/dx/footer/footer.html

@@ -1,7 +1,7 @@
 <template>
     <footer class={className}>
         <div
-            if:true={showSmallSignup}
+            lwc:if={showSmallSignup}
             class="content-container content-container_top"
         >
             <div class="graphic graphic-trees" alt=""></div>
@@ -14,7 +14,7 @@
             <div class="graphic graphic-trees-small" alt=""></div>
         </div>
         <div
-            if:true={showLargeSignup}
+            lwc:if={showLargeSignup}
             class="content-container content-container_top_large"
         >
             <div class="graphic graphic-large" alt=""></div>
@@ -34,7 +34,7 @@
                 </dx-button>
             </div>
         </div>
-        <div if:true={showLargeNoSignup} class={largeNoSignupClassName}>
+        <div lwc:if={showLargeNoSignup} class={largeNoSignupClassName}>
             <div class="graphic graphic-large" alt=""></div>
             <slot
                 class="large-signup-heading"
@@ -43,9 +43,90 @@
             ></slot>
         </div>
         <dx-footer-mfe
+            lwc:if={useMfe}
             legal-only={showLegalOnly}
             origin={mfeConfigOrigin}
             home-href={mfeHomeHref}
         ></dx-footer-mfe>
+        <!-- TODO: Probably just remove template below and always render the dx-footer-mfe above once footer MFE supports rendering in non-full-width contexts -->
+        <template lwc:else>
+            <div
+                lwc:if={showContainerMiddle}
+                class="content-container content-container_middle"
+            >
+                <a class="logo" href="/">
+                    <img
+                        src="https://a.sfdcstatic.com/developer-website/prod/images/salesforce-logo-corporate.svg"
+                        alt="Salesforce logo"
+                    />
+                </a>
+                <div class="socials">
+                    <template for:each={socialLinks} for:item="link">
+                        <a
+                            aria-label={link.label}
+                            href={link.href}
+                            key={link.iconSymbol}
+                            class={link.iconSymbol}
+                            target="_blank"
+                            rel="noopener"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                part="svg"
+                                aria-hidden="true"
+                            >
+                                <use xlink:href={link.iconURL}></use>
+                            </svg>
+                        </a>
+                    </template>
+                </div>
+                <div class="general">
+                    <template for:each={generalLinks} for:item="item">
+                        <div class="footer-group" key={item.id}>
+                            <h2 class="subheading">{item.label}</h2>
+                            <template for:each={item.options} for:item="option">
+                                <dx-footer-option
+                                    key={option.id}
+                                    general-label={item.label}
+                                    label={option.label}
+                                    href={option.link.href}
+                                    target={option.link.target}
+                                ></dx-footer-option>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <div class="content-container content-container_bottom">
+                <div class="terms">
+                    <span class="copyright-notice" lwc:dom="manual"></span>
+                    <div class="terms_links">
+                        <template for:each={termsLinks} for:item="term">
+                            <template lwc:if={term.onclick}>
+                                <a
+                                    href={term.href}
+                                    key={term.label}
+                                    rel={term.rel}
+                                    onclick={term.onclick}
+                                >
+                                    {term.label}
+                                </a>
+                            </template>
+                            <template lwc:else>
+                                <a href={term.href} key={term.label} rel={term.rel}>
+                                    <img
+                                        lwc:if={term.img}
+                                        class="term-icon"
+                                        src={term.img}
+                                        alt="Footer Term Icon"
+                                    />
+                                    {term.label}
+                                </a>
+                            </template>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </template>
     </footer>
 </template>

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

@@ -4,7 +4,7 @@ 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 =
@@ -16,6 +16,9 @@ export default class Footer extends LightningElement {
     @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)) {
@@ -96,3 +99,208 @@ 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>`);
+            this.template.querySelector(".copyright-notice")!.innerHTML = copyrightNoticeInnerHtml;
+
+            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.openOneTrustInfoDisplay;
+                } else if (item.title === "Your Privacy Choices") {
+                    link.img = "https://a.sfdcstatic.com/developer-website/prod/images/privacyoptions.svg";
+                }
+
+                return link;
+            });
+        }
+
+        private openOneTrustInfoDisplay() {
+            if ((window as any).OneTrust && (window as any).OneTrust.ToggleInfoDisplay) {
+                (window as any).OneTrust.ToggleInfoDisplay();
+            }
+        }
+    };
+}
+
+export default augmentWithNonMFEFooterFunctionality(Footer);

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

@@ -15,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");
         }