@salesforcedevs/dx-components 1.3.52-alpha → 1.3.52

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 export default class CardTrial extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-90";
@@ -71,6 +72,10 @@ export default class CardTrial extends LightningElement {
         return this.hasButtons ? "menu" : "link";
     }
 
+    get buttonOneTarget() {
+        return this.isExternalURL(this.buttonOneHref) ? "_blank" : null;
+    }
+
     private _details!: string[];
     private _modalDetails!: [{ title: string; subtitle: string }];
     private _modalOpen = false;
@@ -93,10 +98,36 @@ export default class CardTrial extends LightningElement {
         this._modalOpen = !this._modalOpen;
     }
 
-    private handleClick() {
+    private handleClick(e: PointerEvent) {
         // card is clickable only if it doesn't contain buttons (for accessibility reasons)
         if (!this.hasButtons) {
             window.location.assign(this.href);
+            if (this.href.includes("signup")) {
+                this.handleSignUpClick(e);
+            }
+        }
+    }
+
+    private handleSignUpClick(e: PointerEvent) {
+        track(e.currentTarget!, "custEv_signupStart", {
+            click_text: this.label,
+            element_title: this.title,
+            element_type: "card",
+            click_url: this.href,
+            content_category: "cta"
+        });
+    }
+
+    private isExternalURL(url: string | undefined): boolean {
+        if (!url) {
+            return false;
+        }
+
+        try {
+            const value = new URL(url);
+            return value.host !== window.location.host;
+        } catch (e) {
+            return false;
         }
     }
 }

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.html

@@ -31,6 +31,7 @@
                     class="button-cta"
                     size="large"
                     href={href}
+                    onclick={handleSignUpClick}
                     variant="primary"
                     font="sans"
                     icon-symbol={buttonIcon}

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.ts

@@ -1,5 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 export default class CardTrial extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-90";
@@ -64,4 +65,16 @@ export default class CardTrial extends LightningElement {
     private handleModalClose() {
         this.dispatchEvent(new CustomEvent("togglemodal"));
     }
+
+    private handleSignUpClick(e: PointerEvent) {
+        if (this.href.includes("signup")) {
+            track(e.currentTarget!, "custEv_signupStart", {
+                click_text: this.buttonCta,
+                element_title: this.title,
+                element_type: "card",
+                click_url: this.href,
+                content_category: "cta"
+            });
+        }
+    }
 }

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -48,8 +48,13 @@ export default class CodeBlock extends LightningElement {
         { label: "Kotlin", id: "kotlin" },
         { label: "Python", id: "python" },
         { label: "Bash", id: "bash" },
+        { label: "Shell", id: "shell" },
+        { label: "Shell", id: "sh" },
         { label: "SQL", id: "sql" },
-        { label: "YAML", id: "yaml" }
+        { label: "YAML", id: "yaml" },
+        { label: "Markdown", id: "markdown" },
+        { label: "Markdown", id: "md" },
+        { label: "JSX", id: "jsx" }
     ];
 
     connectedCallback() {

package/src/modules/dx/codeBlock/darkTheme.css

@@ -54,6 +54,14 @@
     color: var(--dx-g-purple-vibrant-70);
 }
 
+.dx-theme-dark .token.atrule {
+    color: var(--dx-g-purple-vibrant-70);
+}
+
+.dx-theme-dark .token.builtin {
+    color: var(--dx-g-purple-vibrant-70);
+}
+
 .dx-theme-dark .token.entity {
     color: #fff;
     background: var(--dx-g-blue-vibrant-10);
@@ -68,7 +76,6 @@
 .dx-theme-dark .token.deleted,
 .dx-theme-dark .token.constant,
 .dx-theme-dark .token.number,
-.dx-theme-dark .token.builtin,
 .dx-theme-dark .token.important .dx-theme-dark .token.boolean,
 .dx-theme-dark .token.symbol,
 .dx-theme-dark .token.inserted,

package/src/modules/dx/codeBlock/lightTheme.css

@@ -30,6 +30,14 @@
     color: var(--dx-g-teal-vibrant-40);
 }
 
+.dx-theme-light .token.atrule {
+    color: var(--dx-g-pink-vibrant-40);
+}
+
+.dx-theme-light .token.builtin {
+    color: var(--dx-g-pink-vibrant-40);
+}
+
 .dx-theme-light .token.tag {
     color: rgb(75, 36, 219);
 }
@@ -55,9 +63,7 @@
 .dx-theme-light .token.deleted,
 .dx-theme-light .token.string,
 .dx-theme-light .token.char,
-.dx-theme-light .token.builtin,
 .dx-theme-light .token.inserted,
-.dx-theme-light .token.atrule,
 .dx-theme-light .token.regex,
 .dx-theme-light .token.important {
     color: var(--dx-g-gray-10);

package/src/modules/dx/dropdownOption/dropdownOption.html

@@ -6,7 +6,7 @@
         target={option.link.target}
         key={option.id}
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
         data-index={indexPosition}
         onclick={onClick}
     >
@@ -35,7 +35,7 @@
         if:false={option.link}
         class={className}
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
         data-index={indexPosition}
         onclick={onClick}
     >

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -36,26 +36,34 @@
     --swoop-height: var(--dx-c-featured-content-header-swoop-height);
     --swoop-inset: calc(2.5 * var(--vertical-padding));
     --swoop-z-index: 11;
+    --label-color: var(--dx-g-indigo-vibrant-40);
 
     position: relative;
-    padding: var(--dx-c-featured-content-header-padding-vertical)
-        var(--dx-c-featured-content-header-padding-horizontal);
     background: var(
         --dx-c-featured-content-header-background-color,
         var(--dx-g-indigo-vibrant-90)
     );
 }
 
+.container-layout {
+    padding: var(--dx-c-featured-content-header-padding-vertical)
+        var(--dx-c-featured-content-header-padding-horizontal);
+    background-image: var(--background-image);
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: contain;
+}
+
 /* LAYOUTS */
 
-.img-placement_inline {
+.img-placement_inline .container-layout {
     display: grid;
     grid-template-areas: "label label" "main image";
     grid-template-columns: 50% auto;
     grid-gap: 0 80px;
 }
 
-.img-placement_below {
+.img-placement_below .container-layout {
     --swoop-inset: calc(80px + 38vw);
 
     margin-bottom: calc(var(--dx-c-bottom-image-height) / 2);
@@ -278,6 +286,7 @@
     left: unset;
     width: 126px;
     height: 126px;
+    z-index: 1;
 }
 
 @media screen and (max-width: 1230px) {
@@ -356,7 +365,7 @@ a.image-container > img {
 
 .label {
     grid-area: label;
-    color: var(--dx-g-indigo-vibrant-40);
+    color: var(--dx-c-featured-content-label-color, var(--label-color));
     padding-bottom: var(--dx-g-spacing-lg);
 }
 
@@ -380,7 +389,10 @@ dx-image-and-label {
 }
 
 /* DARK VARIANT */
+
 .variant_dark {
+    --label-color: rgb(190, 199, 246);
+
     background: var(
         --dx-c-featured-content-header-background-color,
         linear-gradient(-180deg, rgb(40, 23, 153) 0%, rgb(46, 43, 182) 100%)
@@ -391,10 +403,6 @@ dx-image-and-label {
     --dx-c-image-and-label-text-color: white;
 }
 
-.variant_dark .label {
-    color: rgb(190, 199, 246);
-}
-
 .variant_dark .title,
 .variant_dark .body {
     color: white;
@@ -457,7 +465,7 @@ dx-image-and-label {
         --swoop-inset: 64px;
     }
 
-    .img-placement_inline {
+    .img-placement_inline .container-layout {
         display: grid;
         grid-template-areas: "label" "image" "main";
         grid-template-columns: 100%;

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -1,117 +1,119 @@
 <template>
-    <div class={classname} part="container">
-        <template if:true={labelAsPrimaryHeading}>
-            <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
-        </template>
-        <template if:false={labelAsPrimaryHeading}>
-            <p if:true={label} class="label dx-text-heading-4">{label}</p>
-        </template>
-        <div class="featured-content-main-content">
-            <template if:false={labelAsPrimaryHeading}>
-                <h1 class="title dx-text-heading-2">
-                    <a
-                        class="title-link"
-                        if:true={href}
-                        href={href}
-                        target={target}
-                        onmouseenter={setLinkHovered}
-                        onmouseleave={setLinkInactive}
-                    >
-                        {title}
-                    </a>
-                    <template if:false={href}>{title}</template>
-                </h1>
-            </template>
+    <div class={classname} part="container" style={style}>
+        <div class="container-layout">
             <template if:true={labelAsPrimaryHeading}>
-                <h2 class="title dx-text-heading-2">
-                    <a
-                        class="title-link"
-                        if:true={href}
-                        href={href}
-                        target={target}
-                        onmouseenter={setLinkHovered}
-                        onmouseleave={setLinkInactive}
-                    >
-                        {title}
-                    </a>
-                    <template if:false={href}>{title}</template>
-                </h2>
+                <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
             </template>
-            <div class="authors" if:true={authors}>
-                <template for:each={authors} for:item="author">
-                    <dx-image-and-label
-                        key={author.key}
-                        img-src={author.imgSrc}
-                        img-size={author.imgSize}
-                        label={author.name}
-                        href={author.href}
-                    ></dx-image-and-label>
+            <template if:false={labelAsPrimaryHeading}>
+                <p if:true={label} class="label dx-text-heading-4">{label}</p>
+            </template>
+            <div class="featured-content-main-content">
+                <template if:false={labelAsPrimaryHeading}>
+                    <h1 class="title dx-text-heading-2">
+                        <a
+                            class="title-link"
+                            if:true={href}
+                            href={href}
+                            target={target}
+                            onmouseenter={setLinkHovered}
+                            onmouseleave={setLinkInactive}
+                        >
+                            {title}
+                        </a>
+                        <template if:false={href}>{title}</template>
+                    </h1>
+                </template>
+                <template if:true={labelAsPrimaryHeading}>
+                    <h2 class="title dx-text-heading-2">
+                        <a
+                            class="title-link"
+                            if:true={href}
+                            href={href}
+                            target={target}
+                            onmouseenter={setLinkHovered}
+                            onmouseleave={setLinkInactive}
+                        >
+                            {title}
+                        </a>
+                        <template if:false={href}>{title}</template>
+                    </h2>
                 </template>
+                <div class="authors" if:true={authors}>
+                    <template for:each={authors} for:item="author">
+                        <dx-image-and-label
+                            key={author.key}
+                            img-src={author.imgSrc}
+                            img-size={author.imgSize}
+                            label={author.name}
+                            href={author.href}
+                        ></dx-image-and-label>
+                    </template>
+                </div>
+                <span class="body dx-text-body-1">{body}</span>
+                <div class="slot-container">
+                    <slot onslotchange={onSlotChange}></slot>
+                </div>
+                <div
+                    class={backgroundImageClass}
+                    if:true={hasBackgroundImage}
+                    lwc:dom="manual"
+                ></div>
             </div>
-            <span class="body dx-text-body-1">{body}</span>
-            <div class="slot-container">
-                <slot onslotchange={onSlotChange}></slot>
+            <div if:true={hasPlainImage} class="image-container">
+                <img src={imgSrc} alt={imgAlt} />
             </div>
-            <div
-                class={backgroundImageClass}
-                if:true={hasBackgroundImage}
-                lwc:dom="manual"
-            ></div>
-        </div>
-        <div if:true={hasPlainImage} class="image-container">
-            <img src={imgSrc} alt={imgAlt} />
-        </div>
-        <a
-            if:true={hasLinkedImage}
-            href={href}
-            target={target}
-            class="image-container"
-            onmouseenter={setLinkHovered}
-            onmouseleave={setLinkInactive}
-        >
-            <img src={imgSrc} alt={imgAlt} />
-        </a>
-        <template if:false={noSwoop}>
-            <svg
-                class="swoop-silhouette"
-                width="1920px"
-                height="331px"
-                viewBox="0 0 1920 331"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                preserveAspectRatio="none"
+            <a
+                if:true={hasLinkedImage}
+                href={href}
+                target={target}
+                class="image-container"
+                onmouseenter={setLinkHovered}
+                onmouseleave={setLinkInactive}
             >
-                <defs>
-                    <path
-                        d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
-                        id="path-1"
-                    ></path>
-                </defs>
-                <g
-                    id="Documentation-landing-page"
-                    stroke="none"
-                    stroke-width="1"
-                    fill="none"
-                    fill-rule="evenodd"
+                <img src={imgSrc} alt={imgAlt} />
+            </a>
+            <template if:false={noSwoop}>
+                <svg
+                    class="swoop-silhouette"
+                    width="1920px"
+                    height="331px"
+                    viewBox="0 0 1920 331"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    preserveAspectRatio="none"
                 >
-                    <mask id="mask-2" fill="white">
-                        <use xlink:href="#path-1"></use>
-                    </mask>
-                    <use
-                        id="Combined-Shape"
-                        fill="#FFFFFF"
-                        xlink:href="#path-1"
-                    ></use>
-                </g>
-            </svg>
-        </template>
-    </div>
-    <div class="blue-circle" if:true={hasIcon}>
-        <dx-icon
-            class="icon"
-            size="2xlarge"
-            symbol={icon}
-            sprite="salesforcebrand"
-        ></dx-icon>
+                    <defs>
+                        <path
+                            d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
+                            id="path-1"
+                        ></path>
+                    </defs>
+                    <g
+                        id="Documentation-landing-page"
+                        stroke="none"
+                        stroke-width="1"
+                        fill="none"
+                        fill-rule="evenodd"
+                    >
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use
+                            id="Combined-Shape"
+                            fill="#FFFFFF"
+                            xlink:href="#path-1"
+                        ></use>
+                    </g>
+                </svg>
+            </template>
+        </div>
+        <div class="blue-circle" if:true={hasIcon}>
+            <dx-icon
+                class="icon"
+                size="2xlarge"
+                symbol={icon}
+                sprite="salesforcebrand"
+            ></dx-icon>
+        </div>
     </div>
 </template>

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

@@ -17,7 +17,8 @@ export default class FeaturedContentHeader extends LightningElement {
     @api href?: string;
     @api target?: string | null = null;
     @api title!: string;
-    @api backgroundImg?:
+    @api backgroundImg?: string;
+    @api backgroundImgId?:
         | "trees"
         | "codey"
         | "blog"
@@ -38,7 +39,7 @@ export default class FeaturedContentHeader extends LightningElement {
         if (this._authors && this._authors.length) {
             return this._authors!.map((author, index) => ({
                 ...author,
-                imgSrc: author.avatar_urls?.["24"] || author.imgSrc,
+                imgSrc: author.image_src,
                 key: index
             }));
         }
@@ -58,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});`
         );
     }
 
@@ -71,17 +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.backgroundImg === "big-moon";
+        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}`
         );
     }
 
@@ -100,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/footer/footer.css

@@ -44,6 +44,11 @@ footer.signup-variant-no-signup {
     color: var(--dx-g-blue-vibrant-20);
 }
 
+.term-icon {
+    width: 35px;
+    margin: 0 var(--dx-g-spacing-xs);
+}
+
 /* TOP */
 
 .content-container_top {
@@ -402,4 +407,8 @@ footer.signup-variant-no-signup {
     .subscription dx-input {
         width: 100%;
     }
+
+    .term-icon {
+        margin-left: 0;
+    }
 }

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

@@ -139,6 +139,12 @@
                         </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>

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

@@ -12,8 +12,11 @@ import {
 import { track } from "dxUtils/analytics";
 
 const PATH = "/newsletter";
-const createNewsletterSignupHref = (email: string): string =>
-    `${PATH}?subscriberEmail=${email}`;
+const LOCAL_STORAGE_KEY = "subscriberEmail";
+const createNewsletterSignupHref = (email: string): string => {
+    window.localStorage.setItem(LOCAL_STORAGE_KEY, email);
+    return PATH;
+};
 
 const ANALYTICS_INFO = {
     itemTitle: "Newsletter Sign Up Footer",

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

@@ -167,6 +167,11 @@ export const termsLinks = [
         rel: "nofollow",
         label: "Cookie Preferences",
         onclick: openOneTrustInfoDisplay
+    },
+    {
+        href: "https://www.salesforce.com/form/other/privacy-request/",
+        label: "Your Privacy Choices",
+        img: "/assets/svg/privacyicon.png"
     }
 ];
 
@@ -206,5 +211,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

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import { convertForDaylightSavings } from "dxUtils/dates";
 import {
     formattedDateDay,
     formattedDateHour,
@@ -27,7 +28,7 @@ export default class FormattedDateTime extends LightningElement {
             return;
         }
 
-        this._unformattedDate = new Date(value);
+        this._unformattedDate = convertForDaylightSavings(value).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 +63,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 +73,5 @@ export default class FormattedDateTime extends LightningElement {
             second: this.second,
             timeZoneName: this.timeZoneName || undefined
         };
-        return options;
     }
 }