@salesforcedevs/dx-components 0.56.1 → 0.56.2-example

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

@@ -1,5 +1,26 @@
 @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;
     font-family: var(--dx-g-font-sans);
@@ -37,14 +58,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-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
 }
 
+.option-indented .option_label {
+    display: -webkit-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 +93,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

@@ -7,6 +7,7 @@
         key={option.id}
         role="menuitem"
         tabindex="-1"
+        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
@@ -34,6 +36,7 @@
         class={className}
         role="menuitem"
         tabindex="-1"
+        data-index={indexPosition}
         onclick={onClick}
     >
         <dx-icon
@@ -44,6 +47,7 @@
             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,6 +1,10 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { OptionWithNested } from "typings/custom";
+import {
+    OptionWithNested,
+    AnalyticsPayload,
+    DropdownVariant
+} from "typings/custom";
 import { track } from "dxUtils/analytics";
 
 export default class DropdownOption extends LightningElement {
@@ -10,6 +14,9 @@ export default class DropdownOption extends LightningElement {
     @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");
@@ -20,7 +27,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) {
@@ -29,13 +44,10 @@ export default class DropdownOption extends LightningElement {
         );
 
         const payload: any = {
+            ...this.analyticsBasePayload,
             clickText: this.keyValue || undefined,
-            pageLocation: window.location.pathname || undefined,
-            elementType: "dropdown",
-            destinationType: "internal",
-            ctaClick: true,
             itemTitle: this.option.label || undefined,
-            clickUrl: e.target?.href || undefined
+            clickUrl: this.option.link?.href || undefined
         };
 
         const navHeading = this.navItemLabel || this.option.label || undefined;
@@ -45,6 +57,7 @@ export default class DropdownOption extends LightningElement {
         if (!this.suppressGtmNavHeadings) {
             payload.navHeading = navHeading;
             payload.navSubHeading = navSubHeading;
+            payload.pageLocation = window.location.pathname;
         }
 
         if (this.analyticsEvent && e.currentTarget) {

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

@@ -25,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

@@ -6,13 +6,12 @@
 :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
@@ -21,6 +20,8 @@
     --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-swoop-display: block;
+    --dx-c-featured-content-header-swoop-height: 30%;
 }
 
 .container {
@@ -32,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);
@@ -64,6 +76,7 @@
 /* SWOOP SILHOUETTE */
 
 .swoop-silhouette {
+    display: var(--dx-c-featured-content-header-swoop-display);
     position: absolute;
     bottom: -2px;
     left: -1px;
@@ -228,6 +241,61 @@
     }
 }
 
+.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,
@@ -297,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);
 }
 
@@ -321,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%)
     );
 }
 
@@ -333,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;
@@ -399,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,109 +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>
+                    <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>