@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,12 +1,22 @@
 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 suppressGtmNavHeadings: boolean = false;
+    @api keyValue!: string;
     @api active: boolean = false;
     @api navItemLabel: String | null = null;
+    @api analyticsEvent: string | null = null;
+    @api analyticsBasePayload!: AnalyticsPayload;
+    @api indexPosition: number = 0;
+    @api variant: DropdownVariant = "base";
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -17,18 +27,41 @@ 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) {
         this.dispatchEvent(
-            new CustomEvent("select", { detail: this.option.id })
+            new CustomEvent("select", { detail: this.keyValue })
         );
 
-        track(e.currentTarget, "custEv_topNavLinkClick", {
-            heading_text: this.navItemLabel || undefined,
-            sub_heading_text: this.option.label || undefined,
-            link_text: this.option.id || undefined
-        });
+        const payload: any = {
+            ...this.analyticsBasePayload,
+            clickText: this.keyValue || undefined,
+            itemTitle: this.option.label || undefined,
+            clickUrl: this.option.link?.href || undefined
+        };
+
+        const navHeading = this.navItemLabel || this.option.label || undefined;
+        const navSubHeading =
+            (this.navItemLabel ? this.option.label : undefined) || undefined;
+
+        if (!this.suppressGtmNavHeadings) {
+            payload.navHeading = navHeading;
+            payload.navSubHeading = navSubHeading;
+            payload.pageLocation = window.location.pathname;
+        }
+
+        if (this.analyticsEvent && e.currentTarget) {
+            track(e.currentTarget, this.analyticsEvent, payload);
+        }
     }
 }

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

@@ -1,31 +1,64 @@
-@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-image-width: 600px;
+
+    width: 100%;
+}
 
 .container {
-    text-align: center;
-    display: block;
+    position: relative;
+    background: var(--dx-c-empty-state-background);
+    border-radius: var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-2xl) 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
 }
 
 img {
-    margin: auto;
+    width: var(--dx-c-empty-state-image-width);
+    min-width: var(--dx-c-empty-state-image-width);
+}
+
+.size-small img {
+    max-width: 250px;
+    min-width: unset;
+    width: calc(100% - 40px);
+}
+
+.text {
+    position: absolute;
+    top: 35%;
+    min-height: 15%;
+    left: 0;
     width: 100%;
-    margin-bottom: var(--dx-g-spacing-xl);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    padding: 0 var(--dx-g-spacing-xl);
 }
 
-.subtitle {
-    font-size: var(--dx-g-text-xs);
+.size-small .text {
+    top: 40%;
 }
 
 .title {
-    font-size: var(--dx-g-text-lg);
-    padding-bottom: var(--dx-g-spacing-sm);
+    font-size: var(--dx-g-text-2xl);
 }
 
-.title.dx-text-heading-3 {
-    font-size: var(--dx-g-text-2xl);
+.size-small .title {
+    font-size: var(--dx-g-text-base);
+    white-space: nowrap;
 }
 
-.subtitle.dx-text-label-1 {
-    font-size: var(--dx-g-text-md);
-    text-transform: none;
+.subtitle {
+    padding-top: var(--dx-g-spacing-sm);
+    color: var(--dx-g-text-heading-color);
+    font-weight: bold;
 }

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

@@ -1,7 +1,9 @@
 <template>
-    <div class="container" part="container">
-        <img src={imgSrc} alt={imgAlt} />
-        <h3 class={titleClass} part="title">{title}</h3>
-        <p class={subtitleClass} part="subtitle">{subtitle}</p>
+    <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>
+        </div>
     </div>
 </template>

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

@@ -1,29 +1,20 @@
 import { LightningElement, api } from "lwc";
-import cx from "classnames";
+import { EmptyStateSize } from "typings/custom";
 
 export default class EmptyState extends LightningElement {
     @api title: string = "";
-    @api subtitle: string = "";
-    @api imgSrc: string = "";
-    @api imgAlt: string = "";
-    @api titleSize?: "large" | "small" = "small";
-    @api subtitleSize?: "large" | "small" = "small";
+    @api subtitle?: string | null = null;
+    @api size?: EmptyStateSize = "large";
 
-    private get titleClass() {
-        return cx(
-            "title",
-            this.titleSize === "small"
-                ? "dx-text-heading-alt-1"
-                : "dx-text-heading-3"
-        );
+    get containerClassName() {
+        return `container ${
+            !this.size || this.size === "large" ? "size-large" : "size-small"
+        }`;
     }
 
-    private get subtitleClass() {
-        return cx(
-            "subtitle",
-            this.subtitleSize === "small"
-                ? "dx-text-heading-alt-1"
-                : "dx-text-label-1"
-        );
+    get imageAssetPath() {
+        return `/assets/svg/docs-empty-state${
+            this.size === "small" ? "-small" : ""
+        }.svg`;
     }
 }

package/src/modules/dx/feature/feature.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgba(0, 20, 45, 0.4);
@@ -76,6 +76,35 @@ section {
     background-image: url(/assets/svg/feature-backdrop2.svg);
 }
 
+.image-display-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: -40px;
+}
+
+.image-display-container .image-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.image-display-container .image-container > img {
+    width: 71.75%;
+    margin-top: -7.2%;
+    margin-left: 6%;
+    height: 55%;
+    border-radius: 6px;
+}
+
+.image-display-container .image-display {
+    width: 100%;
+}
+
 /* Mobile responsiveness */
 
 @media screen and (max-width: 768px) {

package/src/modules/dx/feature/feature.html

@@ -1,16 +1,32 @@
 <template>
     <section class={sectionClass}>
         <div class="description">
-            <span if:true={hasLabel} class="dx-text-heading-7 label">{label}</span>
+            <h2 if:true={hasLabel} class="dx-text-heading-7 label">{label}</h2>
             <h3 class="dx-text-heading-3">{title}</h3>
             <div class="body dx-text-body-2">
                 <slot></slot>
             </div>
-            <dx-button class="cta-button" size="large" target={target} icon-symbol={iconSymbol} href={buttonHref}>
+            <dx-button
+                class="cta-button"
+                size="large"
+                target={target}
+                icon-symbol={iconSymbol}
+                href={buttonHref}
+            >
                 {buttonLabel}
             </dx-button>
         </div>
-        <div class="image">
+        <div if:true={isDisplay} class="image-display-container">
+            <img
+                class="image-display"
+                src="/assets/svg/featured-demo-art-blank.svg"
+                alt={title}
+            />
+            <div class="image-container">
+                <img src={imageSrc} alt={title} />
+            </div>
+        </div>
+        <div if:false={isDisplay} class="image">
             <img src={imageSrc} alt={title} />
         </div>
     </section>

package/src/modules/dx/feature/feature.ts

@@ -8,6 +8,11 @@ export default class Feature extends LightningElement {
     @api buttonLabel: string | null = null;
     @api descriptionPosition?: "right" | "left" = "left";
     @api isExternalLink: boolean = false;
+    @api variant?: "display";
+
+    private get isDisplay(): boolean {
+        return this.variant === "display";
+    }
 
     private get sectionClass(): string {
         return this.descriptionPosition === "left"
@@ -20,10 +25,10 @@ export default class Feature extends LightningElement {
     }
 
     get target(): string {
-        return this.isExternalLink ? '_blank' : '_self';
+        return this.isExternalLink ? "_blank" : "_self";
     }
 
     get iconSymbol(): string {
-        return this.isExternalLink ? 'new_window' : '';
+        return this.isExternalLink ? "new_window" : "";
     }
-}
+}

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

@@ -1,25 +1,27 @@
-@import "helpers/button";
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/button";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     width: 100%;
 
-    --dx-c-featured-content-header-background-color: var(
-        --dx-g-indigo-vibrant-90
-    );
+    /* --dx-c-featured-content-header-background-color */
     --dx-c-tree-graphic-color: var(--dx-g-indigo-vibrant-40);
     --dx-c-featured-content-header-padding-horizontal: var(
         --dx-g-page-padding-horizontal
     );
+    --dx-c-featured-content-header-padding-vertical: var(--dx-g-spacing-6xl);
     --dx-c-featured-content-main-content-max-width: 840px;
     --dx-c-bottom-image-width: calc(
         100vw - var(--dx-g-page-padding-horizontal-lg) * 2
     );
     --dx-c-bottom-image-height: calc(var(--dx-c-bottom-image-width) / 2);
     --dx-c-moon-graphic-color: var(--dx-g-indigo-vibrant-40);
-    --dx-c-featured-content-header-image-container-transform: scale(0.7) translateY(14px);
+    --dx-c-featured-content-header-image-container-transform: scale(0.7)
+        translateY(14px);
+    --dx-c-featured-content-header-swoop-display: block;
+    --dx-c-featured-content-header-swoop-height: 30%;
 }
 
 .container {
@@ -31,26 +33,37 @@
     /* actual spacing between bottom of graphic and rest of page content */
     --bottom-spacing: var(--dx-g-spacing-4xl);
     --item-spacing: var(--dx-g-spacing-xl);
-    --swoop-height: 30%;
+    --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(--vertical-padding)
+    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-color: var(--dx-c-featured-content-header-background-color);
+    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);
@@ -63,6 +76,7 @@
 /* SWOOP SILHOUETTE */
 
 .swoop-silhouette {
+    display: var(--dx-c-featured-content-header-swoop-display);
     position: absolute;
     bottom: -2px;
     left: -1px;
@@ -158,14 +172,13 @@
 }
 @media screen and (max-width: 1174px) {
     .custom-bg-codey::after {
-        background-image: url(/assets/svg/cloud-2.svg),
-            url(/assets/svg/trees.svg);
-        background-position: 108.5% -20%, 65% 90%;
+        background-image: url(/assets/svg/cloud-2.svg);
+        background-position: calc(100% + 30px) -20%;
     }
 }
 @media screen and (max-width: 1024px) {
     .custom-bg-codey::after {
-        background-position: calc(100% + 80px) -40%, 65% 90%;
+        background-position: calc(100% + 30px) -40%;
     }
 
     .bg-codey {
@@ -178,17 +191,13 @@
     }
 }
 @media screen and (max-width: 960px) {
-    .custom-bg-codey::after {
-        background-position: calc(100% + 80px) -40%, 97% 81%;
-    }
-
     .bg-codey {
         display: none;
     }
 }
 @media screen and (max-width: 768px) {
     .custom-bg-codey::after {
-        background-position: calc(100% + 80px) -100px, 200% 81%;
+        background-position: calc(100% + 80px) -100px;
     }
 }
 
@@ -232,10 +241,65 @@
     }
 }
 
+.custom-bg-trial::after {
+    content: "";
+    background-image: url(/assets/svg/trial-left.svg),
+        url(/assets/svg/trial-right.svg);
+    background-position: var(--dx-g-page-padding-horizontal) 50px,
+        right 15px top;
+    background-repeat: no-repeat;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+@media screen and (max-width: 1024px) {
+    .custom-bg-trial::after {
+        background-image: url(/assets/svg/trial-left.svg);
+        background-position: 48px 30px;
+        background-size: contain;
+    }
+}
+
+.custom-bg-big-moon::after {
+    content: "";
+    background-image: url(/assets/svg/big-moon.svg);
+    background-position: top right;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.blue-circle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    background-image: url(/assets/svg/blue-circle.svg);
+    top: 110px;
+    right: 230px;
+    left: unset;
+    width: 126px;
+    height: 126px;
+    z-index: 1;
+}
+
+@media screen and (max-width: 1230px) {
+    .custom-bg-big-moon::after,
+    .blue-circle {
+        display: none;
+    }
+}
+
 /* Z INDEX STUFF */
 
 .label,
-.main-content,
+.featured-content-main-content,
 .image-container {
     position: relative;
     z-index: var(--swoop-z-index);
@@ -273,12 +337,12 @@ a.image-container > img {
 
 /* MAIN CONTENT AREA */
 
-.main-content {
+.featured-content-main-content {
     grid-area: main;
     max-width: var(--dx-c-featured-content-main-content-max-width);
 }
 
-.main-content > * {
+.featured-content-main-content > * {
     z-index: 10;
 }
 
@@ -301,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);
 }
 
@@ -325,11 +389,13 @@ dx-image-and-label {
 }
 
 /* DARK VARIANT */
+
 .variant_dark {
-    background: linear-gradient(
-        -180deg,
-        rgb(40, 23, 153) 0%,
-        rgb(46, 43, 182) 100%
+    --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%)
     );
 }
 
@@ -337,12 +403,8 @@ dx-image-and-label {
     --dx-c-image-and-label-text-color: white;
 }
 
-.variant_dark h1 {
-    color: rgb(190, 199, 246);
-}
-
-.variant_dark a,
-.variant_dark span {
+.variant_dark .title,
+.variant_dark .body {
     color: white;
 }
 
@@ -376,6 +438,9 @@ dx-image-and-label {
             50% + var(--dx-c-featured-content-header-padding-horizontal) / 2
         );
         margin-top: var(--item-spacing);
+        margin-right: calc(
+            var(--dx-c-featured-content-header-padding-horizontal) * -1
+        );
     }
 
     .img-placement_below img {
@@ -391,7 +456,6 @@ dx-image-and-label {
 
 @media screen and (max-width: 1024px) {
     .container {
-        --swoop-height: 14vw;
         --vertical-padding: 80px;
         --bottom-spacing: var(--dx-g-spacing-2xl);
         --item-spacing: var(--dx-g-spacing-md);
@@ -401,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%;
@@ -413,7 +477,7 @@ dx-image-and-label {
     }
 
     .img-placement_below .image-container {
-        margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.85);
+        margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.72);
     }
 
     .dx-text-heading-4 {
@@ -459,12 +523,12 @@ dx-image-and-label {
 
 @media screen and (max-width: 600px) {
     .img-placement_below .image-container {
-        margin-bottom: calc(var(--dx-c-bottom-image-height) * -1.1);
+        margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.8);
     }
 }
 
 @media screen and (max-width: 420px) {
     .img-placement_below .image-container {
-        margin-bottom: calc(var(--dx-c-bottom-image-height) * -1.4);
+        margin-bottom: calc(var(--dx-c-bottom-image-height) * -1);
     }
 }