@salesforcedevs/dx-components 1.25.7-canary.0 → 1.27.2

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

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

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

@@ -48,6 +48,11 @@ 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 {
@@ -155,6 +160,127 @@ 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 */
@@ -206,6 +332,30 @@ 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);
     }
@@ -266,6 +416,11 @@ footer.signup-variant-no-signup {
     .subscription p {
         width: 100%;
     }
+
+    /* MIDDLE */
+    .content-container_middle {
+        display: none;
+    }
 }
 
 /* MOBILE - SMALL */
@@ -274,4 +429,8 @@ footer.signup-variant-no-signup {
     .subscription dx-input {
         width: 100%;
     }
+
+    .term-icon {
+        margin-left: 0;
+    }
 }

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

@@ -42,6 +42,104 @@
                 onslotchange={onSlotChange}
             ></slot>
         </div>
-        <dx-footer-mfe legal-only={showLegalOnly}></dx-footer-mfe>
+        <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>
     </footer>
 </template>

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

@@ -1,14 +1,48 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { FooterVariant, LightningSlotElement } from "typings/custom";
+import {
+    FooterVariant,
+    LightningSlotElement,
+    OptionWithLink
+} from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import {
+    defaultGeneralLinks,
+    termsLinks,
+    socialLinks,
+    intellectualHref
+} from "./links";
 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 signupUrl =
-        "https://www.salesforce.com/form/other/role-based-newsletter/?Developer=true";
+    private socialLinks = socialLinks;
+    private termsLinks = termsLinks;
+    private signupUrl = "https://www.salesforce.com/form/other/role-based-newsletter/?Developer=true";
 
     @api
     set variant(value: FooterVariant) {
@@ -24,8 +58,8 @@ export default class Footer extends LightningElement {
         return this._variant;
     }
 
-    get showLegalOnly() {
-        return this.variant === "terms-only";
+    get showContainerMiddle() {
+        return this.variant !== "terms-only";
     }
 
     get showLargeSignup() {
@@ -40,6 +74,21 @@ 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();
@@ -64,6 +113,12 @@ 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/footer/links.ts

@@ -0,0 +1,228 @@
+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"
+    }
+];

package/src/modules/dx/searchResults/searchResults.ts

@@ -306,7 +306,6 @@ export default class SearchResults extends LightningElement {
                     return cv.state === "selected";
                 });
             });
-
             // Note that this logic means that if someone clicks a search result before
             // onetrust has loaded, and thus navigates away from the page, we will lose the tracking
             if (document.readyState === "complete") {

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

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

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

@@ -1,24 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class FooterMfe extends LightningElement {
-    @api legalOnly = false;
-    private footerElement: HTMLElement | null = null;
-
-    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", window.location.origin); // will call the route handler for `/c360/experience/v1/navigation`
-        this.footerElement.setAttribute("hide-language-selector", "true");
-        this.footerElement.setAttribute(
-            "home-href",
-            `/${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 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
-        if (this.legalOnly) {
-            this.footerElement.setAttribute("legal-only", "true");
-        }
-        this.template.querySelector("div")!.appendChild(this.footerElement);
-    }
-}