@salesforcedevs/dx-components 0.26.1-alpha0.5 → 0.26.3

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

@@ -0,0 +1,405 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.content-container {
+    padding: 0 var(--dx-g-page-padding-horizontal);
+}
+
+a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+footer {
+    padding-top: var(--dx-g-spacing-5xl);
+}
+
+footer.signup-variant-large-signup {
+    padding-top: 160px;
+}
+
+footer.signup-variant-terms-only,
+footer.signup-variant-no-signup {
+    padding-top: 0;
+}
+
+/* COMMON UI PIECES */
+
+.footer-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.footer-group > *:not(:last-child) {
+    margin-bottom: 4px;
+}
+
+.subheading {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+/* TOP */
+
+.content-container_top {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    height: 78px;
+    border-bottom: 2px solid var(--dx-g-indigo-vibrant-40);
+}
+
+.content-container_top > .subheading {
+    margin-right: var(--dx-g-spacing-lg);
+    text-align: right;
+    transform: translateY(2px);
+}
+
+.content-container_top_large {
+    position: relative;
+    height: 504px;
+}
+
+.subscription {
+    position: relative;
+    z-index: 1;
+    grid-area: subscription;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.subscription > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.subscription p {
+    max-width: 536px;
+}
+
+.graphic {
+    user-select: none;
+    -webkit-user-drag: none;
+    background-repeat: no-repeat;
+    background-position: right 0 bottom 0;
+    background-size: 100%;
+}
+
+.content-container_top > .graphic {
+    align-self: flex-end;
+    transform: translateY(2px);
+    flex-shrink: 0;
+}
+
+.graphic-trees {
+    height: 112px;
+    width: 110px;
+    margin-right: var(--dx-g-spacing-lg);
+    background-image: url("/assets/svg/footer-graphic-trees.svg");
+}
+
+.graphic-mountains {
+    height: 96px;
+    width: 220px;
+    margin-right: var(--dx-g-spacing-lg);
+    background-image: url("/assets/svg/footer-graphic-mountains.svg");
+}
+
+.graphic-mountains-mobile {
+    display: none;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 56px;
+    width: 100px;
+    background-image: url("/assets/svg/footer-graphic-mountains-small.svg");
+}
+
+.graphic-trees-small {
+    height: 66px;
+    width: 52px;
+    margin-left: var(--dx-g-spacing-lg);
+    background-image: url("/assets/svg/footer-graphic-trees-small.svg");
+}
+
+.graphic-large {
+    z-index: 0;
+    position: absolute;
+    left: 0;
+    bottom: -2px;
+    width: 100%;
+    height: 100%;
+    background-image: url("/assets/svg/footer-graphic-large.svg");
+    background-size: 101%;
+}
+
+/* MIDDLE */
+
+.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);
+    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%;
+    background: var(--dx-g-gray-30);
+    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);
+}
+
+.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.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.github > dx-icon {
+    --dx-c-icon-size: var(--dx-g-spacing-xl);
+}
+
+/* BOTTOM */
+
+.content-container_bottom {
+    display: flex;
+    background: var(--dx-g-blue-vibrant-20);
+}
+
+.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 {
+        /* takes into account the background assets' h:w ratio */
+        height: 32vw;
+    }
+}
+
+@media screen and (max-width: 1160px) {
+    .graphic-trees {
+        display: none;
+    }
+}
+
+/* TABLET */
+@media screen and (max-width: 1024px) {
+    /* TOP */
+    .graphic-trees-small {
+        display: none;
+    }
+
+    .graphic-large {
+        background-size: 122.92%;
+    }
+
+    .content-container_top_large {
+        height: 464px;
+        padding-top: var(--dx-g-spacing-2xl);
+    }
+
+    .subscription h3 {
+        font-size: 24px;
+        line-height: 28px;
+    }
+
+    .subscription p {
+        max-width: 456px;
+    }
+
+    dx-input {
+        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);
+    }
+}
+
+/* MOBILE - LARGE */
+@media screen and (max-width: 768px) {
+    footer.signup-variant-large {
+        padding-top: var(--dx-g-spacing-5xl);
+    }
+
+    /* TOP */
+    .content-container_top {
+        flex-direction: column;
+        padding: var(--dx-g-spacing-lg) var(--dx-g-spacing-md)
+            var(--dx-g-spacing-2xl) var(--dx-g-spacing-md);
+        height: unset;
+    }
+
+    .content-container_top > .subheading {
+        text-align: center;
+        margin-right: unset;
+    }
+
+    .content-container_top > dx-input {
+        margin-top: var(--dx-g-spacing-md);
+    }
+
+    .content-container_top > .graphic-mountains-mobile {
+        display: unset;
+    }
+
+    .content-container_top_large {
+        height: 400px;
+    }
+
+    .graphic-mountains {
+        display: none;
+    }
+
+    .graphic-large {
+        background-size: 160%;
+        background-position: right 50% bottom 0;
+    }
+
+    .subscription h3 {
+        width: 240px;
+        max-width: 100%;
+    }
+
+    .subscription p {
+        width: 100%;
+    }
+
+    /* MIDDLE */
+    .content-container_middle {
+        display: none;
+    }
+}
+
+/* MOBILE - SMALL */
+@media screen and (max-width: 640px) {
+    /* TOP */
+    .subscription dx-input {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,145 @@
+<template>
+    <footer class={className}>
+        <div
+            if:true={showSmallSignup}
+            class="content-container content-container_top"
+        >
+            <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>
+            <div class="graphic graphic-trees-small" alt=""></div>
+        </div>
+        <div
+            if:true={showLargeSignup}
+            class="content-container content-container_top_large"
+        >
+            <div class="graphic graphic-large" alt=""></div>
+            <div class="subscription">
+                <h2 class="dx-text-heading-3">
+                    Get the latest
+                    <br />
+                    developer updates.
+                </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>
+            </div>
+        </div>
+        <div
+            if:true={showContainerMiddle}
+            class="content-container content-container_middle"
+        >
+            <a class="logo" href="/">
+                <img
+                    src="/assets/svg/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"
+                    >
+                        <dx-icon
+                            sprite={link.iconSprite}
+                            symbol={link.iconSymbol}
+                            size="override"
+                        ></dx-icon>
+                    </a>
+                </template>
+            </div>
+            <dx-dropdown
+                if:true={hasLocales}
+                class="locales"
+                options={locales}
+                value={locale}
+                onchange={onLocaleChange}
+                small
+            >
+                <dx-button
+                    class="locales-selector"
+                    variant="secondary"
+                    icon-symbol="chevrondown"
+                    aria-label="Select Locale"
+                >
+                    {localeLabel}
+                </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">
+                            <dx-footer-option
+                                key={option.label}
+                                general-label={general.label}
+                                label={option.label}
+                                href={option.href}
+                                icon-symbol={option.iconSymbol}
+                                target={option.target}
+                            ></dx-footer-option>
+                        </template>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <div class="content-container content-container_bottom">
+            <div class="terms">
+                <span>
+                    &copy; Copyright {currentYear} Salesforce.com, inc.&nbsp;
+                    <a href={intellectualHref}>All rights reserved.</a>
+                    &nbsp;Various trademarks held by their respective owners.
+                </span>
+                <div class="terms_links">
+                    <template for:each={termsLinks} for:item="term">
+                        <a href={term.href} key={term.label}>{term.label}</a>
+                    </template>
+                    <a
+                        href="#"
+                        rel="nofollow"
+                        onclick={openOneTrustInfoDisplay}
+                    >
+                        Cookie Preferences
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+</template>

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

@@ -0,0 +1,124 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toJson } from "utils/normalizers";
+import { FooterVariant, Option } from "typings/custom";
+import {
+    generalLinks,
+    termsLinks,
+    socialLinks,
+    privacyHref,
+    intellectualHref
+} from "./links";
+import { track } from "dx/instrumentation";
+
+const createNewsletterSignupHref = (email: string): string =>
+    `/newsletter?subscriberEmail=${email}`;
+
+const ANALYTICS_INFO = {
+    itemTitle: "Newsletter Sign Up Footer",
+    elementType: "button",
+    destinationType: "internal",
+    ctaClick: true
+};
+export default class Footer extends LightningElement {
+    @api locale: string | null = null;
+    @api
+    get locales() {
+        return this._locales;
+    }
+    set locales(value) {
+        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";
+    private _variant: FooterVariant = "small-signup";
+
+    @api
+    set variant(value: FooterVariant) {
+        if (!this.isFooterVariant(value)) {
+            console.error(
+                "Value provided for variant is invalid and should be of type FooterVariant"
+            );
+            return;
+        }
+        this._variant = value;
+    }
+    get variant() {
+        return this._variant;
+    }
+
+    get showContainerMiddle() {
+        return this.variant !== "terms-only";
+    }
+
+    get showLargeSignup() {
+        return this.variant !== "no-signup" && this.variant === "large-signup";
+    }
+
+    get showSmallSignup() {
+        return this.variant !== "no-signup" && this.variant === "small-signup";
+    }
+
+    get hasLocales() {
+        return this.locale && this.locales;
+    }
+
+    get localeLabel(): string | null {
+        let label = null;
+        if (this.locale && this.locales) {
+            const locale = this.locales.find((l) => l.id === this.locale);
+            label = locale ? locale.label : null;
+        }
+        return label;
+    }
+
+    get currentYear(): number {
+        const date = new Date();
+        return date.getFullYear();
+    }
+
+    get className() {
+        return cx(`signup-variant-${this.variant}`);
+    }
+
+    private onSubmitEmail = async (e: CustomEvent) => {
+        const href = createNewsletterSignupHref(e.detail);
+
+        track(e.currentTarget, "custEv_ctaButtonClick", {
+            ...ANALYTICS_INFO,
+            clickText: e.detail,
+            clickUrl: href,
+        });
+
+        window.location.assign(href);
+    };
+
+    private onLocaleChange(e: CustomEvent) {
+        this.dispatchEvent(
+            new CustomEvent("localechange", { detail: e.detail })
+        );
+    }
+
+    private openOneTrustInfoDisplay = () => {
+        if (window.OneTrust && window.OneTrust.ToggleInfoDisplay) {
+            window.OneTrust.ToggleInfoDisplay();
+        }
+    };
+
+    private isFooterVariant(value: string): value is FooterVariant {
+        return [
+            "no-signup",
+            "small-signup",
+            "large-signup",
+            "terms-only"
+        ].includes(value);
+    }
+}