@salesforcedevs/dx-components 0.56.1 → 0.56.2-example

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -17,8 +17,17 @@ export default class FeaturedContentHeader extends LightningElement {
     @api href?: string;
     @api target?: string | null = null;
     @api title!: string;
-    @api backgroundImg?: "trees" | "codey" | "blog" | "moon" | null = null;
+    @api backgroundImg?: string;
+    @api backgroundImgId?:
+        | "trees"
+        | "codey"
+        | "blog"
+        | "moon"
+        | "trial"
+        | "big-moon"
+        | null = null;
     @api noSwoop: boolean = false;
+    @api icon: string = "";
 
     private _authors?: Array<ImageAndLabel>;
     private isSlotEmpty: boolean = true;
@@ -50,7 +59,14 @@ export default class FeaturedContentHeader extends LightningElement {
             this.dark && "variant_dark",
             this.isLinkHovered && "link-hovered",
             !this.isSlotEmpty && "has-slotted",
-            this.backgroundImg && `custom-bg-${this.backgroundImg}`
+            this.backgroundImgId && `custom-bg-${this.backgroundImgId}`
+        );
+    }
+
+    private get style() {
+        return cx(
+            this.backgroundImg &&
+                `--background-image: url(${this.backgroundImg});`
         );
     }
 
@@ -63,13 +79,17 @@ export default class FeaturedContentHeader extends LightningElement {
     }
 
     private get hasBackgroundImage() {
-        return this.backgroundImg !== null;
+        return this.backgroundImgId !== null;
+    }
+
+    private get hasIcon(): boolean {
+        return this.icon !== "" && this.backgroundImgId === "big-moon";
     }
 
     private get backgroundImageClass() {
         return cx(
             "bg-image-container",
-            this.backgroundImg && `bg-${this.backgroundImg}`
+            this.backgroundImgId && `bg-${this.backgroundImgId}`
         );
     }
 
@@ -88,13 +108,13 @@ export default class FeaturedContentHeader extends LightningElement {
     renderedCallback(): void {
         // Setting the svgs with innerHTML prevents their IDs from being rewritten
         // which is necessary to preserve the svg masking and other effects
-        if (this.backgroundImg && svgs[this.backgroundImg]) {
+        if (this.backgroundImgId && svgs[this.backgroundImgId]) {
             const bgSvg = this.template.querySelector(".bg-image-container");
             if (bgSvg) {
                 // eslint-disable-next-line @lwc/lwc/no-inner-html
                 bgSvg.innerHTML = `
-                    ${svgs[this.backgroundImg].desktop}
-                    ${svgs[this.backgroundImg].mobile}
+                    ${svgs[this.backgroundImgId].desktop}
+                    ${svgs[this.backgroundImgId].mobile}
                 `;
             }
         }

package/src/modules/dx/featuresList/featuresList.css

@@ -20,5 +20,5 @@
 .icon {
     color: #3ba755;
     padding-right: var(--dx-g-spacing-md);
-    padding-top: var(--dx-g-spacing-2xs);
+    padding-top: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/filterMenu/filterMenu.css

@@ -39,6 +39,7 @@
 
 .title-group {
     display: flex;
+    justify-content: space-between;
 }
 
 .title-group-main {
@@ -59,7 +60,8 @@
     height: 100%;
     overflow-y: auto;
     margin-top: 12px;
-    padding: 0 var(--horizontal-padding);
+    padding: 0 9px 0 var(--horizontal-padding);
+    scrollbar-gutter: stable;
 }
 
 dx-checkbox:not(:first-of-type) {
@@ -83,13 +85,9 @@ label {
     margin-top: 5px;
 }
 
-svg {
-    background: transparent;
-    stroke: var(--dx-g-blue-vibrant-50);
-}
-
 svg,
 .filter-menu-title {
+    background: transparent;
     cursor: pointer;
     -webkit-user-select: none; /* Safari 3.1+ */
     -moz-user-select: none; /* Firefox 2+ */
@@ -97,8 +95,12 @@ svg,
     user-select: none;
 }
 
-.year-svg {
-    right: 50px;
+.header-caret {
+    stroke: var(--dx-g-blue-vibrant-50);
+}
+
+.year-caret {
+    stroke: var(--dx-g-gray-50);
 }
 
 .checkbox-month,
@@ -118,3 +120,19 @@ svg,
     font-size: 14px;
     font-family: var(--dx-g-font-sans);
 }
+
+@keyframes loading-dots {
+    50% {
+        content: "(..\00a0)";
+    }
+
+    100% {
+        content: "(...)";
+    }
+}
+
+.filters-dates-loading::after {
+    animation: loading-dots 1s linear infinite;
+    display: inline-block;
+    content: "(.\00a0\00a0)";
+}

package/src/modules/dx/filterMenu/filterMenu.html

@@ -4,14 +4,14 @@
             <p class="filter-menu-title">{title}</p>
             <svg
                 xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
+                width="28"
+                height="28"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                class="feather feather-chevron-down"
+                class="feather feather-chevron-down header-caret"
             >
                 <polyline points="6 9 12 15 18 9"></polyline>
             </svg>
@@ -43,8 +43,14 @@
                                         value={option}
                                         onchange={onChange}
                                     >
-                                        {option.name}
-                                        ({option.totalNumberOfPosts})
+                                        {option.name}&nbsp;
+                                        <span
+                                            if:true={filtersDatesLoading}
+                                            class="filters-dates-loading"
+                                        ></span>
+                                        <span if:false={filtersDatesLoading}>
+                                            ({option.totalNumberOfPosts})
+                                        </span>
                                     </dx-checkbox-native>
                                     <span onclick={dropdownToggle}>
                                         <svg
@@ -58,7 +64,7 @@
                                             stroke-linejoin="round"
                                             class="
                                                 feather feather-chevron-down
-                                                year-svg
+                                                year-caret
                                             "
                                         >
                                             <polyline
@@ -79,8 +85,18 @@
                                                 value={month}
                                                 onchange={onChange}
                                             >
-                                                {month.id}
-                                                ({month.numberOfPosts})
+                                                {month.id}&nbsp;
+                                                <span
+                                                    if:true={filtersDatesLoading}
+                                                    class="
+                                                        filters-dates-loading
+                                                    "
+                                                ></span>
+                                                <span
+                                                    if:false={filtersDatesLoading}
+                                                >
+                                                    ({month.numberOfPosts})
+                                                </span>
                                             </dx-checkbox-native>
                                         </li>
                                     </template>

package/src/modules/dx/filterMenu/filterMenu.ts

@@ -10,6 +10,7 @@ export default class FilterMenu extends LightningElement {
     @api name: string = "";
     @api title: string = "Filter Menu";
     @api variant: string = "base";
+    @api filtersDatesLoading?: boolean;
 
     @api
     get options(): Option[] {

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

@@ -273,7 +273,7 @@ footer.signup-variant-no-signup {
 @media screen and (min-width: 1400px) {
     .content-container_top_large {
         /* takes into account the background assets' h:w ratio */
-        height: 32vw;
+        height: 38vw;
     }
 }
 

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

@@ -30,10 +30,8 @@
                     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.
+                    Click "Subscribe" below to be directed to the Salesforce
+                    developer communication sign up page.
                 </p>
                 <p class="dx-text-body-3">
                     Salesforce values your privacy. To learn more, visit
@@ -103,17 +101,17 @@
                 </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}
+                                href={option.link.href}
                                 icon-symbol={option.iconSymbol}
-                                target={option.target}
+                                target={option.link.target}
                             ></dx-footer-option>
                         </template>
                     </div>
@@ -129,15 +127,22 @@
                 </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}>
+                                {term.label}
+                            </a>
+                        </template>
                     </template>
-                    <a
-                        href="#"
-                        rel="nofollow"
-                        onclick={openOneTrustInfoDisplay}
-                    >
-                        Cookie Preferences
-                    </a>
                 </div>
             </div>
         </div>

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

@@ -3,7 +3,7 @@ import cx from "classnames";
 import { FooterVariant, OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import {
-    generalLinks,
+    defaultGeneralLinks,
     termsLinks,
     socialLinks,
     privacyHref,
@@ -31,16 +31,26 @@ export default class Footer extends LightningElement {
         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 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";
+    private inputAriaLabel = "Email sign up for developer updates newsletter";
+    private inputPlaceholder = "Email";
+    private inputSubmitLabel = "Subscribe";
+    private intellectualHref = intellectualHref;
+    private privacyHref = privacyHref;
+    private socialLinks = socialLinks;
+    private termsLinks = termsLinks;
 
     @api
     set variant(value: FooterVariant) {
@@ -108,12 +118,6 @@ export default class Footer extends LightningElement {
         );
     }
 
-    private openOneTrustInfoDisplay = () => {
-        if (window.OneTrust && window.OneTrust.ToggleInfoDisplay) {
-            window.OneTrust.ToggleInfoDisplay();
-        }
-    };
-
     private isFooterVariant(value: string): value is FooterVariant {
         return [
             "no-signup",

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

@@ -1,83 +1,137 @@
-export const generalLinksRaw = [
+import { OptionWithRequiredNested } from "typings/custom";
+
+export const generalLinksRaw: OptionWithRequiredNested[] = [
     {
+        id: "Developer Centers",
         label: "Developer Centers",
         options: [
-            { href: "https://devcenter.heroku.com/", label: "Heroku" },
-            { href: "https://developer.mulesoft.com/", label: "MuleSoft" },
-            { href: "https://www.tableau.com/developer", label: "Tableau" },
             {
-                href: "https://developer.commercecloud.com/s/",
-                label: "Commerce Cloud"
+                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: "https://developer.commercecloud.com/s/" },
+                label: "Commerce Cloud",
+                id: "Commerce Cloud"
             },
             {
-                href: "https://www.lightningdesignsystem.com/",
-                label: "Lightning Design System"
+                link: { href: "https://www.lightningdesignsystem.com/" },
+                label: "Lightning Design System",
+                id: "Lightning Design System"
             },
             {
-                href: "https://metamind.readme.io/",
-                label: "Einstein"
+                link: { href: "https://metamind.readme.io/" },
+                label: "Einstein",
+                id: "Einstein"
             },
-            { href: "https://salesforce.quip.com/dev", label: "Quip" }
+            {
+                link: { href: "https://salesforce.quip.com/dev" },
+                label: "Quip",
+                id: "Quip"
+            }
         ]
     },
     {
+        id: "Popular Resources",
         label: "Popular Resources",
         options: [
-            { href: "/docs", label: "Documentation" },
             {
-                href: "/docs/component-library",
-                label: "Component Library"
+                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"
             },
-            { href: "/docs/apis", label: "APIs" },
-            { href: "https://trailhead.salesforce.com/", label: "Trailhead" },
             {
-                href: "/code-samples-and-sdks",
-                label: "Code Samples and SDKs"
+                link: { href: "/code-samples-and-sdks" },
+                label: "Code Samples and SDKs",
+                id: "Code Samples and SDKs"
             },
-            { href: "/podcast", label: "Podcasts" },
+            { link: { href: "/podcast" }, label: "Podcasts", id: "Podcasts" },
             {
-                href: "https://appexchange.salesforce.com/",
-                label: "AppExchange"
+                link: { href: "https://appexchange.salesforce.com/" },
+                label: "AppExchange",
+                id: "AppExchange"
             }
         ]
     },
     {
         label: "Community",
+        id: "Community",
         options: [
             {
-                href: "https://trailhead.salesforce.com/trailblazer-community/feed",
-                label: "Trailblazer Community"
+                link: {
+                    href: "https://trailhead.salesforce.com/trailblazer-community/feed"
+                },
+                label: "Trailblazer Community",
+                id: "Trailblazer Community"
             },
             {
-                href: "/forums#!/feedtype=RECENT&criteria=ALLQUESTIONS&",
-                label: "Forums"
+                link: {
+                    href: "/forums#!/feedtype=RECENT&criteria=ALLQUESTIONS&"
+                },
+                label: "Forums",
+                id: "Forums"
             },
-            { href: "/events", label: "Events and Calendar" },
             {
-                href: "https://go.appexchange.com/partnerprogram",
-                label: "Partner Community"
+                link: { href: "/events" },
+                label: "Events and Calendar",
+                id: "Events and Calendar"
             },
-            { href: "/blogs", label: "Blog" },
             {
-                href: "https://admin.salesforce.com/",
-                label: "Salesforce Admins"
+                link: { href: "https://go.appexchange.com/partnerprogram" },
+                label: "Partner Community",
+                id: "Partner Community"
             },
+            { link: { href: "/blogs" }, label: "Blog", id: "Blog" },
             {
-                href: "https://architect.salesforce.com/",
-                label: "Salesforce Architects"
+                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 generalLinks = generalLinksRaw.map((section) => ({
+export const defaultGeneralLinks = generalLinksRaw.map((section) => ({
     ...section,
     options: section.options.map((option) => {
-        const external = option.href.startsWith("http");
+        if (!option.link) {
+            return option;
+        }
+        const external = option.link.href.startsWith("http");
         return {
             ...option,
-            iconSymbol: external ? "new_window" : null,
-            target: external ? "_blank" : null
+            link: {
+                ...option.link,
+                iconSymbol: external ? "new_window" : null,
+                target: external ? "_blank" : null
+            }
         };
     })
 }));
@@ -87,17 +141,33 @@ export const privacyHref = "https://www.salesforce.com/company/privacy/";
 export const intellectualHref =
     "https://www.salesforce.com/company/legal/intellectual/";
 
+const openOneTrustInfoDisplay = () => {
+    if (window.OneTrust && window.OneTrust.ToggleInfoDisplay) {
+        window.OneTrust.ToggleInfoDisplay();
+    }
+};
+
 export const termsLinks = [
     { href: privacyHref, label: "Privacy Statement" },
     {
-        href: "https://trailblazer.me/resource/documents/documents/pdf/TermsOfUse_en_US.pdf",
+        href: "https://www.salesforce.com/company/program-agreement/",
         label: "Terms of Use"
     },
+    {
+        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: "https://trust.salesforce.com/en/", label: "Trust" },
+    {
+        href: "#",
+        rel: "nofollow",
+        label: "Cookie Preferences",
+        onclick: openOneTrustInfoDisplay
+    }
 ];
 
 export const socialLinks = [
@@ -136,5 +206,11 @@ export const socialLinks = [
         iconSymbol: "rss",
         iconSprite: "general",
         label: "RSS"
+    },
+    {
+        href: "https://www.instagram.com/salesforcedevs",
+        iconSymbol: "instagram",
+        iconSprite: "brand",
+        label: "Instagram"
     }
 ];

package/src/modules/dx/formattedDateTime/formattedDateTime.ts

@@ -11,6 +11,8 @@ import {
     formattedDateYear
 } from "typings/custom";
 
+import { DateTime } from "luxon";
+
 export default class FormattedDateTime extends LightningElement {
     @api weekday: formattedDateWeekday;
     @api year: formattedDateYear;
@@ -27,7 +29,11 @@ export default class FormattedDateTime extends LightningElement {
             return;
         }
 
-        this._unformattedDate = new Date(value);
+        this._unformattedDate = DateTime.fromISO(value)
+            .plus({
+                hour: 1
+            })
+            .toJSDate();
 
         if (this._unformattedDate.toString() === "Invalid Date") {
             // this is a fix for Safari since it doesn't support date strings with 'yyyy/mm/dd' patterns
@@ -62,7 +68,7 @@ export default class FormattedDateTime extends LightningElement {
     }
 
     getOptions() {
-        const options = {
+        return {
             weekday: this.weekday || undefined,
             year: this.year || undefined,
             month: this.month || undefined,
@@ -72,6 +78,5 @@ export default class FormattedDateTime extends LightningElement {
             second: this.second,
             timeZoneName: this.timeZoneName || undefined
         };
-        return options;
     }
 }

package/src/modules/dx/header/header.html

@@ -3,7 +3,7 @@
         <header class={className}>
             <dx-skip-nav-link></dx-skip-nav-link>
             <dx-banner
-                if:true={bannerMarkup}
+                if:true={showBanner}
                 banner-markup={bannerMarkup}
             ></dx-banner>
             <div class="header_l1">
@@ -19,14 +19,21 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
+                <div
+                    if:true={showTbidLogin}
+                    class="header-tbid-login"
+                    onclick={closeMobileNavMenu}
+                >
+                    <dw-tbid-login-menu></dw-tbid-login-menu>
+                </div>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
-                        aria-label="Sign Up For Salesforce Developer Edition"
+                        aria-label="Browse Trials"
                         size="small"
                         href={signupLink}
                         onclick={handleSignUpClick}
                     >
-                        Sign Up
+                        Browse Trials
                     </dx-button>
                 </div>
             </div>

package/src/modules/dx/header/header.ts

@@ -1,6 +1,10 @@
 import { HeaderBase } from "dxBaseElements/headerBase";
 
 export default class Header extends HeaderBase {
+    private get showTbidLogin(): boolean {
+        return this.showSignup;
+    }
+
     private get showSignup(): boolean {
         return this.signupLink
             ? (this.mobile && !this.isSearchOpen) || !this.mobile

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -41,6 +41,7 @@
 
 .nav-menu.state-closed {
     opacity: 0;
+    visibility: hidden;
     transform: translateY(-16px);
     pointer-events: none;
 }