@salesforcedevs/dx-components 1.27.2 → 1.27.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.27.2",
+    "version": "1.27.3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -41,11 +41,12 @@
         "@types/uuid": "8.3.4",
         "@types/vimeo__player": "2.18.3",
         "eventsourcemock": "2.0.0",
-        "luxon": "3.4.4"
+        "luxon": "3.4.4",
+        "msw": "^2.12.4"
     },
     "volta": {
         "node": "20.19.0",
         "yarn": "1.22.19"
     },
-    "gitHead": "4b8dda74b7cfa376e2c79b502c63209918778c8a"
+    "gitHead": "3eff5eb290ade403b407e4163c34fbf48900d662"
 }

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

@@ -48,11 +48,6 @@ footer.signup-variant-no-signup {
     color: var(--dx-footer-themed-header-color);
 }
 
-.term-icon {
-    width: 35px;
-    margin: 0 var(--dx-g-spacing-xs);
-}
-
 /* TOP */
 
 .content-container_top {
@@ -160,127 +155,6 @@ footer.signup-variant-no-signup {
     background-size: 101%;
 }
 
-/* MIDDLE */
-
-.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 (min-width: 1400px) {
     .content-container_top_large:not(.content-container_top_large_no_signup) {
         /* takes into account the background assets' h:w ratio */
@@ -332,30 +206,6 @@ footer.signup-variant-no-signup {
         width: 320px;
     }
 
-    /* MIDDLE */
-    .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);
-    }
-
     .general {
         grid-gap: var(--dx-g-spacing-xl);
     }
@@ -416,11 +266,6 @@ footer.signup-variant-no-signup {
     .subscription p {
         width: 100%;
     }
-
-    /* MIDDLE */
-    .content-container_middle {
-        display: none;
-    }
 }
 
 /* MOBILE - SMALL */
@@ -429,8 +274,4 @@ footer.signup-variant-no-signup {
     .subscription dx-input {
         width: 100%;
     }
-
-    .term-icon {
-        margin-left: 0;
-    }
 }

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

@@ -42,104 +42,9 @@
                 onslotchange={onSlotChange}
             ></slot>
         </div>
-        <div
-            if:true={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>
-            <dx-dropdown
-                if:true={hasLocales}
-                class="locales"
-                options={locales}
-                value={locale}
-                onchange={onLocaleChange}
-                small
-            >
-                <dx-button
-                    class="locales-selector"
-                    icon-symbol="chevrondown"
-                    aria-label="Select Locale"
-                >
-                    {localeLabel}
-                </dx-button>
-            </dx-dropdown>
-            <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>
-                    &copy; Copyright {currentYear} Salesforce, Inc.&nbsp;
-                    <a href={intellectualHref}>All rights reserved.</a>
-                    &nbsp;Various trademarks held by their respective
-                    owners.&nbsp; Salesforce, Inc. Salesforce Tower, 415 Mission
-                    Street, 3rd Floor, San Francisco, CA 94105, United States
-                </span>
-                <div class="terms_links">
-                    <template for:each={termsLinks} for:item="term">
-                        <template if:true={term.onclick}>
-                            <a
-                                href={term.href}
-                                key={term.label}
-                                rel={term.rel}
-                                onclick={term.onclick}
-                            >
-                                {term.label}
-                            </a>
-                        </template>
-                        <template if:false={term.onclick}>
-                            <a href={term.href} key={term.label} rel={term.rel}>
-                                <img
-                                    if:true={term.img}
-                                    class="term-icon"
-                                    src={term.img}
-                                    alt="Footer Term Icon"
-                                />
-                                {term.label}
-                            </a>
-                        </template>
-                    </template>
-                </div>
-            </div>
-        </div>
+        <dx-footer-mfe
+            legal-only={showLegalOnly}
+            origin={mfeConfigOrigin}
+        ></dx-footer-mfe>
     </footer>
 </template>

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

@@ -1,48 +1,17 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import {
-    FooterVariant,
-    LightningSlotElement,
-    OptionWithLink
-} from "typings/custom";
-import { toJson } from "dxUtils/normalizers";
-import {
-    defaultGeneralLinks,
-    termsLinks,
-    socialLinks,
-    intellectualHref
-} from "./links";
+import { FooterVariant, LightningSlotElement } from "typings/custom";
 import { track } from "dxUtils/analytics";
 import { isSlotEmpty } from "dxUtils/slot";
 
 export default class Footer extends LightningElement {
-    @api locale: string | null = null;
-    @api
-    get locales() {
-        return this._locales;
-    }
-    set locales(value: OptionWithLink[] | string | null) {
-        this._locales = toJson(value);
-    }
-
-    @api
-    get generalLinks() {
-        return this._generalLinks;
-    }
-    set generalLinks(value) {
-        if (value) {
-            this._generalLinks = toJson(value);
-        }
-    }
-
-    private _generalLinks = defaultGeneralLinks;
-    private _locales: OptionWithLink[] | null = null;
     private _variant: FooterVariant = "small-signup";
-    private intellectualHref = intellectualHref;
     private isSlotEmpty = true;
-    private socialLinks = socialLinks;
-    private termsLinks = termsLinks;
-    private signupUrl = "https://www.salesforce.com/form/other/role-based-newsletter/?Developer=true";
+    private signupUrl =
+        "https://www.salesforce.com/form/other/role-based-newsletter/?Developer=true";
+
+    @api
+    mfeConfigOrigin: string = `${window.location.origin}/developer/en-us/wp-json`;
 
     @api
     set variant(value: FooterVariant) {
@@ -58,8 +27,8 @@ export default class Footer extends LightningElement {
         return this._variant;
     }
 
-    get showContainerMiddle() {
-        return this.variant !== "terms-only";
+    get showLegalOnly() {
+        return this.variant === "terms-only";
     }
 
     get showLargeSignup() {
@@ -74,21 +43,6 @@ export default class Footer extends LightningElement {
         return this.variant === "large-no-signup";
     }
 
-    get hasLocales() {
-        return this.locale && this.locales;
-    }
-
-    get localeLabel(): string | null {
-        let label = null;
-        if (this.locale && this.locales) {
-            const locale = (this.locales as OptionWithLink[]).find(
-                (l) => l.id === this.locale
-            );
-            label = locale ? locale.label : null;
-        }
-        return label;
-    }
-
     get currentYear(): number {
         const date = new Date();
         return date.getFullYear();
@@ -113,12 +67,6 @@ export default class Footer extends LightningElement {
         );
     }
 
-    private onLocaleChange(e: CustomEvent) {
-        this.dispatchEvent(
-            new CustomEvent("localechange", { detail: e.detail })
-        );
-    }
-
     private onSlotChange(e: LightningSlotElement): void {
         this.isSlotEmpty = isSlotEmpty(e);
     }

package/src/modules/dx/footerMfe/footerMfe.html

@@ -0,0 +1,3 @@
+<template>
+    <div lwc:dom="manual"></div>
+</template>

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

@@ -0,0 +1,22 @@
+import { LightningElement, api } from "lwc";
+
+export default class FooterMfe extends LightningElement {
+    private footerElement: HTMLElement | null = null;
+
+    @api legalOnly = false;
+    @api origin: string = `${window.location.origin}/developer/en-us/wp-json`;
+
+    renderedCallback() {
+        // Since the footer is a third-party component, we need to create it dynamically (LWC won't recognize it as a valid component).
+        if (this.footerElement) {
+            return;
+        }
+        this.footerElement = document.createElement("hgf-footer");
+        this.footerElement.setAttribute("origin", this.origin);
+        this.footerElement.setAttribute("hide-language-selector", "true");
+        if (this.legalOnly) {
+            this.footerElement.setAttribute("legal-only", "true");
+        }
+        this.template.querySelector("div")!.appendChild(this.footerElement);
+    }
+}

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

@@ -1,228 +0,0 @@
-import { OptionWithRequiredNested } from "typings/custom";
-
-export const generalLinksRaw: OptionWithRequiredNested[] = [
-    {
-        id: "Developer Centers",
-        label: "Developer Centers",
-        options: [
-            {
-                link: { href: "https://devcenter.heroku.com/" },
-                label: "Heroku",
-                id: "Heroku"
-            },
-            {
-                link: { href: "https://developer.mulesoft.com/" },
-                label: "MuleSoft",
-                id: "MuleSoft"
-            },
-            {
-                link: { href: "https://www.tableau.com/developer" },
-                label: "Tableau",
-                id: "Tableau"
-            },
-            {
-                link: { href: "/developer-centers/commerce-cloud" },
-                label: "Commerce Cloud",
-                id: "Commerce Cloud"
-            },
-            {
-                link: { href: "https://www.lightningdesignsystem.com/" },
-                label: "Lightning Design System",
-                id: "Lightning Design System"
-            },
-            {
-                link: {
-                    href: "/developer-centers/einstein-1-studio"
-                },
-                label: "Einstein",
-                id: "Einstein"
-            },
-            {
-                link: { href: "https://salesforce.quip.com/dev" },
-                label: "Quip",
-                id: "Quip"
-            }
-        ]
-    },
-    {
-        id: "Popular Resources",
-        label: "Popular Resources",
-        options: [
-            {
-                link: { href: "/docs" },
-                label: "Documentation",
-                id: "Documentation"
-            },
-            {
-                link: { href: "/docs/component-library" },
-                label: "Component Library",
-                id: "Component Library"
-            },
-            { link: { href: "/docs/apis" }, label: "APIs", id: "APIs" },
-            {
-                link: { href: "https://trailhead.salesforce.com/" },
-                label: "Trailhead",
-                id: "Trailhead"
-            },
-            {
-                link: { href: "/sample-apps" },
-                label: "Sample Apps",
-                id: "Sample Apps"
-            },
-            { link: { href: "/podcast" }, label: "Podcasts", id: "Podcasts" },
-            {
-                link: { href: "https://appexchange.salesforce.com/" },
-                label: "AppExchange",
-                id: "AppExchange"
-            }
-        ]
-    },
-    {
-        label: "Community",
-        id: "Community",
-        options: [
-            {
-                link: {
-                    href: "https://trailhead.salesforce.com/trailblazer-community/feed"
-                },
-                label: "Trailblazer Community",
-                id: "Trailblazer Community"
-            },
-            {
-                link: { href: "/events" },
-                label: "Events and Calendar",
-                id: "Events and Calendar"
-            },
-            {
-                link: {
-                    href: "https://www.salesforce.com/partners/become-a-partner/"
-                },
-                label: "Partner Community",
-                id: "Partner Community"
-            },
-            { link: { href: "/blogs" }, label: "Blog", id: "Blog" },
-            {
-                link: { href: "https://admin.salesforce.com/" },
-                label: "Salesforce Admins",
-                id: "Salesforce Admins"
-            },
-            {
-                link: { href: "https://architect.salesforce.com/" },
-                label: "Salesforce Architects",
-                id: "Salesforce Architects"
-            }
-        ]
-    }
-];
-
-export const defaultGeneralLinks = generalLinksRaw.map((section) => ({
-    ...section,
-    options: section.options.map((option) => {
-        if (!option.link) {
-            return option;
-        }
-        const external = option.link.href.startsWith("http");
-        return {
-            ...option,
-            link: {
-                ...option.link,
-                target: external ? "_blank" : null
-            }
-        };
-    })
-}));
-
-export const privacyHref = "https://www.salesforce.com/company/privacy/";
-
-export const intellectualHref =
-    "https://www.salesforce.com/company/legal/intellectual/";
-
-const openOneTrustInfoDisplay = () => {
-    if (
-        (window as any).OneTrust &&
-        (window as any).OneTrust.ToggleInfoDisplay
-    ) {
-        (window as any).OneTrust.ToggleInfoDisplay();
-    }
-};
-
-export const termsLinks = [
-    { href: privacyHref, label: "Privacy Information" },
-    {
-        href: "https://www.salesforce.com/company/legal/program-agreement/",
-        label: "Terms of Service"
-    },
-    {
-        href: "https://www.salesforce.com/company/legal/",
-        label: "Legal"
-    },
-    {
-        href: "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
-        label: "Use of Cookies"
-    },
-    { href: "https://trust.salesforce.com/en/", label: "Trust" },
-    {
-        href: "#",
-        rel: "nofollow",
-        label: "Cookie Preferences",
-        onclick: openOneTrustInfoDisplay
-    },
-    {
-        href: "https://www.salesforce.com/form/other/privacy-request/",
-        label: "Your Privacy Choices",
-        img: "https://a.sfdcstatic.com/developer-website/prod/images/privacyoptions.svg"
-    },
-    {
-        href: "https://www.salesforce.com/company/disclosure/",
-        label: "Responsible Disclosure"
-    },
-    {
-        href: "https://www.salesforce.com/company/contact-us/?d=cta-glob-footer-11",
-        label: "Contact"
-    }
-];
-
-export const socialLinks = [
-    {
-        href: "https://developer.salesforce.com/blogs/feed",
-        iconSymbol: "rss",
-        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-rss",
-        iconSprite: "general",
-        label: "RSS"
-    },
-    {
-        href: "https://www.instagram.com/salesforcedevs",
-        iconSymbol: "instagram",
-        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-instagram",
-        iconSprite: "brand",
-        label: "Instagram"
-    },
-    {
-        href: "https://github.com/trailheadapps",
-        iconSymbol: "github",
-        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-github",
-        iconSprite: "brand",
-        label: "Github"
-    },
-    {
-        href: "https://twitter.com/salesforcedevs",
-        iconSymbol: "twitter-x",
-        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#twitter-x",
-        iconSprite: "brand",
-        label: "Twitter"
-    },
-    {
-        href: "https://www.linkedin.com/showcase/salesforce-developers",
-        iconSymbol: "linked-in",
-        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-linked-in",
-        iconSprite: "brand",
-        label: "LinkedIn"
-    },
-    {
-        href: "https://www.youtube.com/user/DeveloperForce",
-        iconSymbol: "youtube",
-        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-youtube",
-        iconSprite: "brand",
-        label: "Youtube"
-    }
-];