@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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.stories.ts

@@ -0,0 +1,88 @@
+import { html } from "lit-html";
+import mockLocales from "./__tests__/mockLocales";
+
+export default {
+    title: "dx/dx-footer",
+    component: "dx-footer"
+};
+
+const mockState = () => {
+    window.addEventListener("DOMContentLoaded", () => {
+        const footer = document.documentElement.querySelector("dx-footer");
+
+        if (footer) {
+            // @ts-ignore
+            footer.addEventListener("localechange", (e: CustomEvent) => {
+                footer.setAttribute("locale", e.detail);
+            });
+        }
+    });
+};
+
+export const Base = (args: any) => {
+    mockState();
+    return html`
+        <style>
+            body {
+                padding: 0 !important;
+            }
+        </style>
+        <dx-footer locales="${args.locales}" locale="en"></dx-footer>
+    `;
+};
+
+Base.args = { locales: JSON.stringify(mockLocales) };
+
+export const LargeNewsletter = (args: any) => {
+    mockState();
+    return html`
+        <style>
+            body {
+                padding: 0 !important;
+            }
+        </style>
+        <dx-footer
+            variant="large-signup"
+            locales="${args.locales}"
+            locale="en"
+        ></dx-footer>
+    `;
+};
+
+LargeNewsletter.args = { locales: JSON.stringify(mockLocales) };
+
+export const NoNewsletter = (args: any) => {
+    mockState();
+    return html`
+        <style>
+            body {
+                padding: 0 !important;
+            }
+        </style>
+        <dx-footer
+            variant="no-signup"
+            locales="${args.locales}"
+            locale="en"
+        ></dx-footer>
+    `;
+};
+
+NoNewsletter.args = { locales: JSON.stringify(mockLocales) };
+
+export const TermsOnly = (args: any) => {
+    mockState();
+    return html`
+        <style>
+            body {
+                padding: 0 !important;
+            }
+        </style>
+        <dx-footer
+            variant="terms-only"
+            locales="${args.locales}"
+            locale="en"
+        ></dx-footer>
+    `;
+};
+
+TermsOnly.args = { locales: JSON.stringify(mockLocales) };