@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

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

@@ -1,8 +1,8 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 .content-container {
-    padding: 0 var(--dx-g-page-padding-horizontal);
+    padding: 0 var(--dx-g-global-header-padding-horizontal);
 }
 
 a {
@@ -13,7 +13,7 @@ a {
 }
 
 footer {
-    padding-top: var(--dx-g-spacing-5xl);
+    padding-top: var(--dx-c-footer-padding-top, var(--dx-g-spacing-5xl));
 }
 
 footer.signup-variant-large-signup {
@@ -41,7 +41,16 @@ footer.signup-variant-no-signup {
     font-size: var(--dx-g-text-sm);
     letter-spacing: 1px;
     text-transform: uppercase;
-    color: var(--dx-g-blue-vibrant-20);
+    color: var(--dx-footer-themed-header-color);
+}
+
+.large-signup-heading {
+    color: var(--dx-footer-themed-header-color);
+}
+
+.term-icon {
+    width: 35px;
+    margin: 0 var(--dx-g-spacing-xs);
 }
 
 /* TOP */
@@ -52,9 +61,9 @@ footer.signup-variant-no-signup {
     justify-content: center;
     align-items: center;
     position: relative;
-    background: var(--dx-g-cloud-blue-vibrant-95);
+    background: var(--dx-footer-themed-top-background-color);
     height: 78px;
-    border-bottom: 2px solid var(--dx-g-indigo-vibrant-40);
+    border-bottom: 2px solid var(--dx-footer-themed-top-border-color);
 }
 
 .content-container_top > .subheading {
@@ -65,7 +74,13 @@ footer.signup-variant-no-signup {
 
 .content-container_top_large {
     position: relative;
+    padding: 0 var(--dx-g-page-padding-horizontal);
     height: 504px;
+    background: var(--dx-footer-themed-top-large-background-color);
+}
+
+.content-container_top_large_no_signup {
+    height: 33vw;
 }
 
 .subscription {
@@ -103,14 +118,16 @@ footer.signup-variant-no-signup {
     height: 112px;
     width: 110px;
     margin-right: var(--dx-g-spacing-lg);
-    background-image: url("/assets/svg/footer-graphic-trees.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-trees.svg");
+    filter: var(--dx-g-svg-filter);
 }
 
 .graphic-mountains {
     height: 96px;
     width: 220px;
     margin-right: var(--dx-g-spacing-lg);
-    background-image: url("/assets/svg/footer-graphic-mountains.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-2.svg");
+    filter: var(--dx-g-svg-filter);
 }
 
 .graphic-mountains-mobile {
@@ -120,14 +137,16 @@ footer.signup-variant-no-signup {
     bottom: 0;
     height: 56px;
     width: 100px;
-    background-image: url("/assets/svg/footer-graphic-mountains-small.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-mountains-small-2.svg");
+    filter: var(--dx-g-svg-filter);
 }
 
 .graphic-trees-small {
     height: 66px;
     width: 52px;
     margin-left: var(--dx-g-spacing-lg);
-    background-image: url("/assets/svg/footer-graphic-trees-small.svg");
+    background-image: url("https://a.sfdcstatic.com/developer-website/images/footer-graphic-trees-small.svg");
+    filter: var(--dx-g-svg-filter);
 }
 
 .graphic-large {
@@ -137,7 +156,7 @@ footer.signup-variant-no-signup {
     bottom: -2px;
     width: 100%;
     height: 100%;
-    background-image: url("/assets/svg/footer-graphic-large.svg");
+    background-image: var(--dx-footer-themed-large-graphic);
     background-size: 101%;
 }
 
@@ -146,10 +165,11 @@ footer.signup-variant-no-signup {
 .content-container_middle {
     display: grid;
     grid-gap: var(--dx-g-spacing-xl);
-    grid-template-columns: auto max-content;
-    grid-template-rows: max-content;
-    grid-template-areas: "logo general" "socials general" "locales general";
-    background: var(--dx-g-cloud-blue-vibrant-95);
+    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);
 }
@@ -187,7 +207,6 @@ footer.signup-variant-no-signup {
 
 .socials > a {
     border-radius: 50%;
-    background: var(--dx-g-gray-30);
     height: var(--dx-g-spacing-xl);
     width: var(--dx-g-spacing-xl);
     flex-shrink: 0;
@@ -199,6 +218,7 @@ footer.signup-variant-no-signup {
 
 .terms a {
     color: var(--dx-g-blue-vibrant-70);
+    text-decoration: underline;
 }
 
 .terms > span,
@@ -214,32 +234,23 @@ footer.signup-variant-no-signup {
     color: var(--dx-g-blue-vibrant-80);
 }
 
-.socials > a.github {
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    color: var(--dx-g-gray-30);
-}
-
-.socials > a:not(.github):hover {
-    background: var(--dx-g-gray-50);
-}
-
-.socials > a.github:hover {
-    color: var(--dx-g-gray-50);
-}
-
-.socials > a > dx-icon {
-    --dx-c-icon-size: var(--dx-g-icon-size-sm);
+.socials > a:hover {
+    background: var(--dx-g-blue-vibrant-80);
 }
 
-.socials > a.github > dx-icon {
-    --dx-c-icon-size: var(--dx-g-spacing-xl);
+.socials > a > svg {
+    fill: var(--dx-footer-themed-svg-icon-color);
+    height: 100%;
 }
 
 /* BOTTOM */
-
 .content-container_bottom {
     display: flex;
-    background: var(--dx-g-blue-vibrant-20);
+    background: var(--dx-footer-themed-terms-and-conditions-background-color);
+}
+
+.content-container_bottom a {
+    text-decoration: underline;
 }
 
 .terms {
@@ -271,9 +282,9 @@ footer.signup-variant-no-signup {
 }
 
 @media screen and (min-width: 1400px) {
-    .content-container_top_large {
+    .content-container_top_large:not(.content-container_top_large_no_signup) {
         /* takes into account the background assets' h:w ratio */
-        height: 32vw;
+        height: 38vw;
     }
 }
 
@@ -294,11 +305,20 @@ footer.signup-variant-no-signup {
         background-size: 122.92%;
     }
 
+    .content-container_top_large_no_signup .graphic-large {
+        background-size: 101%;
+    }
+
     .content-container_top_large {
         height: 464px;
         padding-top: var(--dx-g-spacing-2xl);
     }
 
+    .content-container_top_large_no_signup {
+        height: 38vw;
+        padding-top: 0;
+    }
+
     .subscription h3 {
         font-size: 24px;
         line-height: 28px;
@@ -343,8 +363,8 @@ footer.signup-variant-no-signup {
 
 /* MOBILE - LARGE */
 @media screen and (max-width: 768px) {
-    footer.signup-variant-large {
-        padding-top: var(--dx-g-spacing-5xl);
+    footer.signup-variant-large-signup {
+        padding-top: var(--dx-g-spacing-4xl);
     }
 
     /* TOP */
@@ -358,6 +378,7 @@ footer.signup-variant-no-signup {
     .content-container_top > .subheading {
         text-align: center;
         margin-right: unset;
+        margin-bottom: var(--dx-g-spacing-lg);
     }
 
     .content-container_top > dx-input {
@@ -369,13 +390,19 @@ footer.signup-variant-no-signup {
     }
 
     .content-container_top_large {
-        height: 400px;
+        height: unset;
+        padding-bottom: 140px;
+    }
+
+    .content-container_top_large_no_signup {
+        height: 44vw;
     }
 
     .graphic-mountains {
         display: none;
     }
 
+    .content-container_top_large_no_signup .graphic-large,
     .graphic-large {
         background-size: 160%;
         background-position: right 50% bottom 0;
@@ -402,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

@@ -7,15 +7,10 @@
             <div class="graphic graphic-trees" alt=""></div>
             <div class="graphic graphic-mountains" alt=""></div>
             <div class="graphic graphic-mountains-mobile" alt=""></div>
-            <span class="subheading">Get Developer Updates</span>
-            <dx-input
-                aria-label={inputAriaLabel}
-                autocomplete="email"
-                placeholder={inputPlaceholder}
-                submit-label={inputSubmitLabel}
-                onsubmit={onSubmitEmail}
-                type="email"
-            ></dx-input>
+            <span class="subheading">{signupLabel}</span>
+            <dx-button onclick={handleSignup} href={signupUrl} target="_blank">
+                SIGN UP
+            </dx-button>
             <div class="graphic graphic-trees-small" alt=""></div>
         </div>
         <div
@@ -24,46 +19,36 @@
         >
             <div class="graphic graphic-large" alt=""></div>
             <div class="subscription">
-                <h2 class="dx-text-heading-3">
-                    Get the latest
-                    <br />
-                    developer updates.
+                <h2 class="dx-text-display-4 large-signup-heading">
+                    <dx-formatted-rich-text
+                        value={signupLabel}
+                    ></dx-formatted-rich-text>
                 </h2>
-                <p class="dx-text-body-3">
-                    Yes, I would like to receive Salesforce Developers' updates
-                    as well as marketing communications regarding Salesforce
-                    products, services, and events. I can unsubscribe at any
-                    time.
-                </p>
-                <p class="dx-text-body-3">
-                    Salesforce values your privacy. To learn more, visit
-                    our&nbsp;
-                    <dx-button
-                        href={privacyHref}
-                        variant="inline-inherit"
-                        font="sans"
-                    >
-                        Privacy Statement
-                    </dx-button>
-                    .
-                </p>
-                <dx-input
-                    aria-label={inputAriaLabel}
-                    autocomplete="email"
-                    placeholder={inputPlaceholder}
-                    submit-label={inputSubmitLabel}
-                    onsubmit={onSubmitEmail}
-                    type="email"
-                ></dx-input>
+                <dx-button
+                    onclick={handleSignup}
+                    href={signupUrl}
+                    target="_blank"
+                    size="large"
+                >
+                    Sign up now
+                </dx-button>
             </div>
         </div>
+        <div if:true={showLargeNoSignup} class={largeNoSignupClassName}>
+            <div class="graphic graphic-large" alt=""></div>
+            <slot
+                class="large-signup-heading"
+                name="custom-content"
+                onslotchange={onSlotChange}
+            ></slot>
+        </div>
         <div
             if:true={showContainerMiddle}
             class="content-container content-container_middle"
         >
             <a class="logo" href="/">
                 <img
-                    src="/assets/svg/salesforce-logo-corporate.svg"
+                    src="https://a.sfdcstatic.com/developer-website/images/salesforce-logo-corporate.svg"
                     alt="Salesforce logo"
                 />
             </a>
@@ -77,11 +62,13 @@
                         target="_blank"
                         rel="noopener"
                     >
-                        <dx-icon
-                            sprite={link.iconSprite}
-                            symbol={link.iconSymbol}
-                            size="override"
-                        ></dx-icon>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            part="svg"
+                            aria-hidden="true"
+                        >
+                            <use xlink:href={link.iconURL}></use>
+                        </svg>
                     </a>
                 </template>
             </div>
@@ -95,7 +82,6 @@
             >
                 <dx-button
                     class="locales-selector"
-                    variant="secondary"
                     icon-symbol="chevrondown"
                     aria-label="Select Locale"
                 >
@@ -103,17 +89,16 @@
                 </dx-button>
             </dx-dropdown>
             <div class="general">
-                <template for:each={generalLinks} for:item="general">
-                    <div class="footer-group" key={general.label}>
-                        <h2 class="subheading">{general.label}</h2>
-                        <template for:each={general.options} for:item="option">
+                <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.label}
-                                general-label={general.label}
+                                key={option.id}
+                                general-label={item.label}
                                 label={option.label}
-                                href={option.href}
-                                icon-symbol={option.iconSymbol}
-                                target={option.target}
+                                href={option.link.href}
+                                target={option.link.target}
                             ></dx-footer-option>
                         </template>
                     </div>
@@ -123,21 +108,36 @@
         <div class="content-container content-container_bottom">
             <div class="terms">
                 <span>
-                    &copy; Copyright {currentYear} Salesforce.com, inc.&nbsp;
+                    &copy; Copyright {currentYear} Salesforce, Inc.&nbsp;
                     <a href={intellectualHref}>All rights reserved.</a>
-                    &nbsp;Various trademarks held by their respective owners.
+                    &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">
-                        <a href={term.href} key={term.label}>{term.label}</a>
+                        <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>
-                    <a
-                        href="#"
-                        rel="nofollow"
-                        onclick={openOneTrustInfoDisplay}
-                    >
-                        Cookie Preferences
-                    </a>
                 </div>
             </div>
         </div>

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

@@ -1,18 +1,19 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toJson } from "utils/normalizers";
-import { FooterVariant, Option } from "typings/custom";
 import {
-    generalLinks,
+    FooterVariant,
+    LightningSlotElement,
+    OptionWithLink
+} from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import {
+    defaultGeneralLinks,
     termsLinks,
     socialLinks,
-    privacyHref,
     intellectualHref
 } from "./links";
-import { track } from "dx/instrumentation";
-
-const createNewsletterSignupHref = (email: string): string =>
-    `/newsletter?subscriberEmail=${email}`;
+import { track } from "dxUtils/analytics";
+import { isSlotEmpty } from "dxUtils/slot";
 
 export default class Footer extends LightningElement {
     @api locale: string | null = null;
@@ -20,20 +21,28 @@ export default class Footer extends LightningElement {
     get locales() {
         return this._locales;
     }
-    set locales(value) {
+    set locales(value: OptionWithLink[] | string | null) {
         this._locales = toJson(value);
     }
 
-    private _locales?: Option[] | null = null;
-    private termsLinks = termsLinks;
-    private generalLinks = generalLinks;
-    private socialLinks = socialLinks;
-    private privacyHref = privacyHref;
-    private intellectualHref = intellectualHref;
-    private inputSubmitLabel = "Subscribe";
-    private inputPlaceholder = "Email";
-    private inputAriaLabel = "Email sign up for developer updates newsletter";
+    @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";
 
     @api
     set variant(value: FooterVariant) {
@@ -54,11 +63,15 @@ export default class Footer extends LightningElement {
     }
 
     get showLargeSignup() {
-        return this.variant !== "no-signup" && this.variant === "large-signup";
+        return this.variant === "large-signup";
     }
 
     get showSmallSignup() {
-        return this.variant !== "no-signup" && this.variant === "small-signup";
+        return this.variant === "small-signup";
+    }
+
+    get showLargeNoSignup() {
+        return this.variant === "large-no-signup";
     }
 
     get hasLocales() {
@@ -68,7 +81,9 @@ export default class Footer extends LightningElement {
     get localeLabel(): string | null {
         let label = null;
         if (this.locale && this.locales) {
-            const locale = this.locales.find((l) => l.id === this.locale);
+            const locale = (this.locales as OptionWithLink[]).find(
+                (l) => l.id === this.locale
+            );
             label = locale ? locale.label : null;
         }
         return label;
@@ -79,15 +94,24 @@ export default class Footer extends LightningElement {
         return date.getFullYear();
     }
 
+    get signupLabel(): string {
+        return this.showLargeSignup
+            ? "Get timely developer updates<br />delivered to your inbox."
+            : "Sign up for developer updates";
+    }
+
     get className() {
         return cx(`signup-variant-${this.variant}`);
     }
 
-    private onSubmitEmail = async (e: CustomEvent) => {
-        const href = createNewsletterSignupHref(e.detail);
-        track(e.currentTarget, "custEv_newsletterSubscriptionStart");
-        window.location.assign(href);
-    };
+    get largeNoSignupClassName() {
+        return cx(
+            "content-container",
+            "content-container_top_large",
+            "content-container_top_large_no_signup",
+            !this.isSlotEmpty && "custom-content"
+        );
+    }
 
     private onLocaleChange(e: CustomEvent) {
         this.dispatchEvent(
@@ -95,18 +119,29 @@ export default class Footer extends LightningElement {
         );
     }
 
-    private openOneTrustInfoDisplay = () => {
-        if (window.OneTrust && window.OneTrust.ToggleInfoDisplay) {
-            window.OneTrust.ToggleInfoDisplay();
-        }
-    };
+    private onSlotChange(e: LightningSlotElement): void {
+        this.isSlotEmpty = isSlotEmpty(e);
+    }
 
     private isFooterVariant(value: string): value is FooterVariant {
         return [
             "no-signup",
             "small-signup",
             "large-signup",
+            "large-no-signup",
             "terms-only"
         ].includes(value);
     }
+
+    private handleSignup(e: any) {
+        track(e.currentTarget, "custEv_ctaButtonClick", {
+            click_text: this.signupLabel,
+            click_url: this.signupUrl,
+            element_type: "button",
+            element_title: this.showSmallSignup
+                ? "Get Developer Updates"
+                : "get the latest developer updates.",
+            content_category: "cta"
+        });
+    }
 }