@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -1,4 +1,25 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
+
+.indented-shape {
+    --background: rgb(170 203 255);
+    --wide: 2px;
+
+    background-color: var(--background);
+    height: var(--wide);
+    margin-bottom: var(--dx-g-spacing-xs);
+    margin-right: var(--dx-g-spacing-sm);
+    position: relative;
+    width: var(--shape-width);
+}
+
+.indented-shape::after {
+    background-color: var(--background);
+    bottom: 0;
+    content: "";
+    height: 15px;
+    position: absolute;
+    width: var(--wide);
+}
 
 .option {
     display: flex;
@@ -17,7 +38,7 @@
 }
 
 .option:active {
-    background: var(--dx-g-blue-vibrant-95) !important;
+    background: var(--dx-g-cloud-blue-vibrant-95) !important;
 }
 
 .option:not(.option-active):hover {
@@ -25,7 +46,9 @@
 }
 
 .option-active {
-    background: var(--dx-g-blue-vibrant-95);
+    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
+
+    background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
 .option_details {
@@ -37,14 +60,27 @@
     text-align: left;
 }
 
+.option-indented .option_details {
+    align-items: center;
+    flex-direction: row;
+}
+
 .option_label {
-    color: var(--dx-g-blue-vibrant-50);
+    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
     display: flex;
     align-items: center;
-    font-weight: var(--dx-g-font-bold);
+    font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
 }
 
+.option-indented .option_label {
+    display: box;
+    max-width: 300px;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+}
+
 .option_label > *:last-child {
     margin-left: var(--dx-g-spacing-sm);
 }
@@ -59,3 +95,87 @@
     margin-right: var(--dx-g-spacing-md);
     flex-shrink: 0;
 }
+
+.option-indented {
+    padding-top: var(--dx-g-spacing-xs);
+    padding-bottom: var(--dx-g-spacing-xs);
+}
+
+.option-indented:not([data-index="0"]) {
+    --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
+    --shape-width: 8px;
+
+    padding-left: calc(var(--indentation, 0px) + var(--dx-g-spacing-md));
+}
+
+[data-index="2"] {
+    --indentation: var(--base-indentation);
+}
+
+[data-index="3"] {
+    --indentation: calc(2 * var(--base-indentation));
+}
+
+[data-index="4"] {
+    --indentation: calc(3 * var(--base-indentation));
+}
+
+[data-index="5"] {
+    --indentation: calc(4 * var(--base-indentation));
+}
+
+[data-index="6"] {
+    --indentation: calc(5 * var(--base-indentation));
+}
+
+[data-index="7"] {
+    --indentation: calc(6 * var(--base-indentation));
+}
+
+[data-index="8"] {
+    --indentation: calc(7 * var(--base-indentation));
+}
+
+[data-index="9"] {
+    --indentation: calc(8 * var(--base-indentation));
+}
+
+[data-index="10"] {
+    --indentation: calc(9 * var(--base-indentation));
+}
+
+[data-index="11"] {
+    --indentation: calc(10 * var(--base-indentation));
+}
+
+[data-index="12"] {
+    --indentation: calc(11 * var(--base-indentation));
+}
+
+[data-index="13"] {
+    --indentation: calc(12 * var(--base-indentation));
+}
+
+[data-index="14"] {
+    --indentation: calc(13 * var(--base-indentation));
+}
+
+[data-index="15"] {
+    --indentation: calc(14 * var(--base-indentation));
+}
+
+[data-index="16"] {
+    --indentation: calc(15 * var(--base-indentation));
+}
+
+[data-index="17"] {
+    --indentation: calc(16 * var(--base-indentation));
+}
+
+[data-index="18"] {
+    --indentation: calc(17 * var(--base-indentation));
+}
+
+[data-index="19"] {
+    --indentation: calc(18 * var(--base-indentation));
+}

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

@@ -6,7 +6,8 @@
         target={option.link.target}
         key={option.id}
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
+        data-index={indexPosition}
         onclick={onClick}
     >
         <dx-icon
@@ -17,6 +18,7 @@
             size="large"
         ></dx-icon>
         <div class="option_details">
+            <div if:true={renderIndentedShape} class="indented-shape"></div>
             <div class="option_label">
                 {option.label}
                 <dx-icon
@@ -33,17 +35,20 @@
         if:false={option.link}
         class={className}
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
+        data-index={indexPosition}
         onclick={onClick}
     >
         <dx-icon
             class="option_icon"
             symbol={option.iconSymbol}
             sprite={option.iconSprite}
+            color={option.iconColor}
             if:true={option.iconSymbol}
             size="large"
         ></dx-icon>
         <div class="option_details">
+            <div if:true={renderIndentedShape} class="indented-shape"></div>
             <div class="option_label">{option.label}</div>
             <div if:true={option.description} class="option_description">
                 {option.description}

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -1,14 +1,21 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
-import { track } from "dx/instrumentation";
+import {
+    OptionWithNested,
+    AnalyticsPayload,
+    DropdownVariant
+} from "typings/custom";
+import { track } from "dxUtils/analytics";
 
 export default class DropdownOption extends LightningElement {
-    @api option!: Option;
+    @api option!: OptionWithNested;
     @api keyValue!: string;
     @api active: boolean = false;
     @api navItemLabel: String | null = null;
     @api analyticsEvent: string | null = null;
+    @api analyticsPayload?: AnalyticsPayload | undefined;
+    @api indexPosition: number = 0;
+    @api variant: DropdownVariant = "base";
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -19,7 +26,15 @@ export default class DropdownOption extends LightningElement {
     }
 
     private get className(): string {
-        return cx("option", this.active && "option-active");
+        return cx(
+            "option",
+            this.active && "option-active",
+            this.variant && `option-${this.variant}`
+        );
+    }
+
+    private get renderIndentedShape() {
+        return this.variant === "indented" && this.indexPosition >= 1;
     }
 
     private onClick(e: PointerEvent) {
@@ -27,12 +42,15 @@ export default class DropdownOption extends LightningElement {
             new CustomEvent("select", { detail: this.keyValue })
         );
 
-        if (this.analyticsEvent && e.currentTarget) {
+        if (this.analyticsEvent && this.analyticsPayload && e.currentTarget) {
             track(e.currentTarget, this.analyticsEvent, {
-                navHeading: this.navItemLabel || undefined,
-                navSubHeading: this.option.label || undefined,
-                clickText: this.keyValue || undefined,
-                pageLocation: window.location.pathname || undefined
+                ...this.analyticsPayload,
+                click_text: this.option.label,
+                click_url: this.option.link?.href,
+                element_type: this.analyticsPayload?.element_type || "dropdown",
+                ...(this.analyticsPayload?.nav_type
+                    ? { nav_item: `${this.navItemLabel}:${this.option.label}` }
+                    : {})
             });
         }
     }

package/src/modules/dx/embeddedVideo/embeddedVideo.css

@@ -0,0 +1,35 @@
+@import "dxHelpers/text";
+@import "dxHelpers/reset";
+
+iframe {
+    border-radius: 16px;
+}
+
+h2 {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.profile-image {
+    height: 48px;
+    width: 48px;
+    border-radius: 48px;
+}
+
+.profile-container {
+    display: grid;
+    grid-template-columns: 48px 1fr 100px;
+    align-items: center;
+}
+
+.profile-text {
+    margin-left: 10px;
+}
+
+.profile-text p {
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+dx-icon {
+    display: inline;
+    margin: 0 6px;
+}

package/src/modules/dx/embeddedVideo/embeddedVideo.html

@@ -0,0 +1,56 @@
+<template>
+    <div class="container">
+        <template lwc:if={isTwitter}>
+            <iframe
+                scrolling="no"
+                frameborder="0"
+                allowfullscreen="true"
+                title="X Post"
+                src={twitterSrc}
+                height="215"
+                width="382"
+            ></iframe>
+        </template>
+        <template lwc:if={isLinkedin}>
+            <iframe
+                scrolling="no"
+                src={linkedinSrc}
+                height="215"
+                width="382"
+                frameborder="0"
+                allowfullscreen=""
+                title="Embedded post"
+            ></iframe>
+        </template>
+        <h2 class="dx-text-display-6">{header}</h2>
+        <p class="dx-text-body-2">{body}</p>
+        <div lwc:if={hasSocial}>
+            <dx-hr no-padding="true" spacing="smd"></dx-hr>
+            <div class="profile-container">
+                <img
+                    class="profile-image"
+                    src={socialProfileImgSrc}
+                    alt={socialProfileImgAlt}
+                />
+                <div class="profile-text">
+                    <p class="dx-text-display-8">{socialName}</p>
+                    <p class="dx-text-body-3">{socialJobTitle}</p>
+                </div>
+                <dx-button
+                    variant="inline"
+                    icon-symbol="new_window"
+                    target="_blank"
+                    href={href}
+                >
+                    View on
+                    <dx-icon
+                        sprite="brand"
+                        symbol={type}
+                        color={socialIconColor}
+                        size="large"
+                    ></dx-icon>
+                </dx-button>
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/embeddedVideo/embeddedVideo.ts

@@ -0,0 +1,40 @@
+import { LightningElement, api } from "lwc";
+
+export default class EmbeddedVideo extends LightningElement {
+    @api type: "twitter" | "linkedin" = "twitter";
+    @api videoId!: string;
+    @api compact = false;
+
+    @api header = "";
+    @api body = "";
+
+    @api hasSocial? = false;
+    @api socialName?: string;
+    @api socialJobTitle?: string;
+    @api socialProfileImgSrc?: string;
+    @api href?: string;
+
+    get isTwitter() {
+        return this.type === "twitter";
+    }
+
+    get twitterSrc() {
+        return `https://platform.twitter.com/embed/Tweet.html?dnt=false&features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&frame=false&hideCard=false&hideThread=false&id=${this.videoId}&lang=en&maxWidth=318px&origin=https%3A%2F%2Fpublish.twitter.com%2F%23&sessionId=89704af49f57022abd058f0b4cff7b8ed0d9e820&theme=light&widgetsVersion=2615f7e52b7e0%3A1702314776716&width=318px`;
+    }
+
+    get isLinkedin() {
+        return this.type === "linkedin";
+    }
+
+    get linkedinSrc() {
+        return `https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:${this.videoId}?compact=1`;
+    }
+
+    get socialProfileImgAlt() {
+        return `headshot of ${this.socialName}`;
+    }
+
+    get socialIconColor() {
+        return this.type === "twitter" ? "black" : "blue-vibrant-50";
+    }
+}

package/src/modules/dx/emptyState/emptyState.css

@@ -1,9 +1,17 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-empty-state-background: var(--dx-g-gray-95);
+    --dx-c-empty-state-background-alt: var(--dx-g-indigo-vibrant-90);
     --dx-c-empty-state-image-width: 600px;
+    --dx-c-container-alt-padding: var(--dx-g-spacing-4xl)
+        var(--dx-g-spacing-3xl);
+    --dx-c-font-title-alt-size: var(--dx-g-text-2xl);
+    --dx-c-font-title-alt-margin-top: 42px;
+    --dx-c-font-body-alt-size: var(--dx-g-text-sm);
+    --dx-c-font-body-alt-margin-top: var(--dx-g-spacing-lg);
+    --dx-c-font-suggestion-alt-size: var(--dx-g-text-xs);
 
     width: 100%;
 }
@@ -19,12 +27,40 @@
     overflow: hidden;
 }
 
-img {
+.container-alt {
+    background: var(--dx-c-empty-state-background-alt);
+    padding: var(--dx-c-container-alt-padding);
+    border-radius: var(--dx-g-spacing-md);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.image {
     width: var(--dx-c-empty-state-image-width);
     min-width: var(--dx-c-empty-state-image-width);
 }
 
-.size-small img {
+.image-alt {
+    display: block;
+}
+
+.image-alt-small {
+    display: none;
+}
+
+@media screen and (max-width: 375px) {
+    .image-alt {
+        display: none;
+    }
+
+    .image-alt-small {
+        display: block;
+    }
+}
+
+.size-small .image {
     max-width: 250px;
     min-width: unset;
     width: calc(100% - 40px);
@@ -44,14 +80,50 @@ img {
     padding: 0 var(--dx-g-spacing-xl);
 }
 
+.text-alt {
+    text-align: center;
+}
+
 .size-small .text {
     top: 40%;
 }
 
+.dx-text-display-4 {
+    line-height: var(--dx-g-spacing-2xl);
+}
+
 .title {
     font-size: var(--dx-g-text-2xl);
 }
 
+.title-alt {
+    font-size: var(--dx-c-font-title-alt-size);
+    margin-top: var(--dx-c-font-title-alt-margin-top);
+}
+
+.body {
+    font-size: var(--dx-c-font-body-alt-size);
+    margin-top: var(--dx-c-font-body-alt-margin-top);
+}
+
+ul {
+    list-style-type: disc;
+    list-style-position: inside;
+    text-align: left;
+    width: fit-content;
+    margin: 0 auto;
+}
+
+.suggestion {
+    font-size: var(--dx-c-font-suggestion-alt-size);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+.suggestion:not(:first-of-type) {
+    margin-top: var(--dx-g-spacing-xs);
+}
+
 .size-small .title {
     font-size: var(--dx-g-text-base);
     white-space: nowrap;

package/src/modules/dx/emptyState/emptyState.html

@@ -1,9 +1,21 @@
 <template>
     <div class={containerClassName} part="container">
-        <img src={imageAssetPath} alt="Mountains" />
-        <div class="text">
-            <h3 class="title dx-text-heading-3">{title}</h3>
-            <p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>
+        <img class={imageClassName} src={imageAssetPath} alt={imageAlt} />
+        <img
+            class="image-alt-small"
+            src="https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle-small.svg"
+            alt="Cloud with binary code floating above"
+            lwc:if={altVariant}
+        />
+        <div class={textClassName}>
+            <h3 class={titleClassName}>{header}</h3>
+            <p class={subtitleClassName} if:true={subtitle}>{subtitle}</p>
+            <p class="body dx-text-display-8" if:true={body}>{body}</p>
+            <ul if:true={suggestions}>
+                <template for:each={suggestions} for:item="suggestion">
+                    <li class="suggestion" key={suggestion}>{suggestion}</li>
+                </template>
+            </ul>
         </div>
     </div>
 </template>

package/src/modules/dx/emptyState/emptyState.ts

@@ -2,19 +2,69 @@ import { LightningElement, api } from "lwc";
 import { EmptyStateSize } from "typings/custom";
 
 export default class EmptyState extends LightningElement {
-    @api title: string = "";
+    @api header: string = "";
     @api subtitle?: string | null = null;
+    @api body?: string | null = null;
     @api size?: EmptyStateSize = "large";
+    @api variant?: "base" | "alt" = "base";
+
+    @api
+    get suggestions(): string[] {
+        return this._suggestions;
+    }
+    set suggestions(value: string) {
+        this._suggestions = JSON.parse(value);
+    }
+
+    private _suggestions = [];
+
+    get altVariant() {
+        return this.variant === "alt";
+    }
 
     get containerClassName() {
-        return `container ${
-            !this.size || this.size === "large" ? "size-large" : "size-small"
-        }`;
+        return this.variant === "base"
+            ? `container ${
+                  !this.size || this.size === "large"
+                      ? "size-large"
+                      : "size-small"
+              }`
+            : `container-alt`;
+    }
+
+    get textClassName() {
+        return this.variant === "base" ? "text" : "text-alt";
+    }
+
+    get titleClassName() {
+        return this.variant === "base"
+            ? "title dx-text-display-4"
+            : "title-alt dx-text-display-4";
+    }
+
+    get subtitleClassName() {
+        return this.variant === "base"
+            ? "subtitle dx-text-body-2"
+            : "subtitle-alt dx-text-display-8";
+    }
+
+    get imageClassName() {
+        return this.variant === "base" ? "image" : "image-alt";
+    }
+
+    get imageAlt() {
+        return this.variant === "base"
+            ? "Mountains"
+            : "Clouds with binary code floating above";
     }
 
     get imageAssetPath() {
-        return `/assets/svg/docs-empty-state${
-            this.size === "small" ? "-small" : ""
-        }.svg`;
+        return this.variant === "base"
+            ? `https://a.sfdcstatic.com/developer-website/images/docs-empty-state${
+                  this.size === "small" ? "-small" : ""
+              }.svg`
+            : `https://a.sfdcstatic.com/developer-website/images/binary-cloud-circle${
+                  this.size === "small" ? "-small" : ""
+              }.svg`;
     }
 }

package/src/modules/dx/errorFallback/errorFallback.css

@@ -0,0 +1,27 @@
+@import "dxHelpers/text";
+
+.error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 44px;
+    margin-bottom: var(--dx-g-spacing-2xl);
+}
+
+.error-image {
+    width: 375px;
+    height: 218px;
+}
+
+.dx-text-display-4 {
+    font-weight: var(--dx-g-font-demi);
+    letter-spacing: -0.32px;
+    text-align: center;
+}
+
+.dx-text-body-1 {
+    letter-spacing: 0.024px;
+    font-weight: var(--dx-g-font-normal);
+    text-align: center;
+    max-width: 528px;
+}

package/src/modules/dx/errorFallback/errorFallback.html

@@ -0,0 +1,11 @@
+<template>
+    <div class="error-container">
+        <img
+            src="https://a.sfdcstatic.com/developer-website/images/error-fallback.svg"
+            alt="error fallback image"
+            class="error-image"
+        />
+        <div class="dx-text-display-4">{title}</div>
+        <div class="dx-text-body-1">{description}</div>
+    </div>
+</template>

package/src/modules/dx/errorFallback/errorFallback.ts

@@ -0,0 +1,7 @@
+import { api, LightningElement } from "lwc";
+
+export default class ErrorFallback extends LightningElement {
+    @api title: string = "Temporary Loading Glitch";
+    @api description: string =
+        "Looks like this content has briefly vanished into the horizon! Refresh the page and try again.";
+}