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

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

@@ -1,405 +0,0 @@
-@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

@@ -1,145 +0,0 @@
-<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

@@ -1,88 +0,0 @@
-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) };