@salesforcedevs/dx-components 0.56.2 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.56.2",
+    "version": "0.57.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -25,5 +25,5 @@
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "47b838f7aa4fb0c55349f98074753103b693851f"
+    "gitHead": "ec519d645639c13fab52eb62663930901f66b2fe"
 }

package/src/modules/dx/dropdown/dropdown.html

@@ -19,18 +19,21 @@
             role={role}
             slot="content"
         >
-            <template for:each={options} for:item="option">
+            <template for:each={options} for:item="option" for:index="index">
                 <dx-dropdown-option
                     suppress-gtm-nav-headings={suppressGtmNavHeadings}
                     analytics-event={analyticsEvent}
+                    analytics-base-payload={analyticsBasePayload}
                     active={option.active}
                     key-value={option.keyValue}
                     if:false={option.options}
                     key={option.id}
+                    index-position={index}
                     onfocus={onOptionFocus}
                     onselect={onOptionClick}
                     option={option}
                     nav-item-label={navItemLabel}
+                    variant={variant}
                 ></dx-dropdown-option>
                 <div
                     key={option.id}
@@ -43,6 +46,7 @@
                         <dx-dropdown-option
                             suppress-gtm-nav-headings={suppressGTMNavHeadings}
                             analytics-event={analyticsEvent}
+                            analytics-base-payload={analyticsBasePayload}
                             active={suboption.active}
                             key={suboption.id}
                             key-value={suboption.keyValue}

package/src/modules/dx/dropdown/dropdown.ts

@@ -1,4 +1,9 @@
-import { OptionWithNested, PopperPlacement } from "typings/custom";
+import {
+    AnalyticsPayload,
+    OptionWithNested,
+    PopperPlacement,
+    DropdownVariant
+} from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import get from "lodash.get";
@@ -18,8 +23,6 @@ export default class Dropdown extends LightningElement {
     @api value: string | null = null; // "active option" id
     @api valuePath: string = "id"; // path to match for the active value (useful for url matching)
     @api stayOpenAfterChange?: boolean = false;
-    @api suppressGtmNavHeadings?: boolean = false;
-
     // props forwarded to popover:
     @api ariaLabel: string | null = null;
     @api tempId: string | null = null;
@@ -32,9 +35,16 @@ export default class Dropdown extends LightningElement {
     @api width?: string | null = null;
     @api fullWidth?: boolean | null;
     @api navItemLabel: string | null = null;
+    @api variant: DropdownVariant = "base";
 
     // props forwarded to dropdown option
     @api analyticsEvent: string | null = null;
+    @api analyticsBasePayload: AnalyticsPayload = {
+        elementType: "dropdown",
+        destinationType: "internal",
+        ctaClick: true
+    };
+    @api suppressGtmNavHeadings?: boolean = false;
 
     @api
     get options() {

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,11 @@ 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
+            pageLocation: window.location.pathname,
+            clickUrl: this.option.link?.href || undefined
         };
 
         const navHeading = this.navItemLabel || this.option.label || undefined;

package/src/modules/dxUtils/queryCoordinator/queryCoordinator.ts

@@ -1,17 +1,20 @@
-export class QueryCoordinator {
-    static getUrlParamValue(key: string) {
-        return JSON.parse(
-            new URL(window.location.href).searchParams.get(key) || "null"
-        );
-    }
+import qs from "query-string";
+
+export function getUrlParamValue(key: string) {
+    const urlParams = qs.parse(window.location.search);
 
-    static setUrlParamValue(key: string, value: any) {
-        const newUrl = new URL(window.location.href);
-        if (value) {
-            newUrl.searchParams.set(key, JSON.stringify(value));
-        } else {
-            newUrl.searchParams.delete(key);
-        }
-        window.history.replaceState(null, "", newUrl.href);
+    return urlParams[key] ? urlParams[key]?.split(",") : [];
+}
+
+export function setUrlParamValue(key: string, value: any) {
+    const newUrl = new URL(window.location.href);
+    if (value) {
+        newUrl.search = qs.stringify(
+            { [key]: value },
+            { arrayFormat: "comma" }
+        );
+    } else {
+        newUrl.searchParams.delete(key);
     }
+    window.history.replaceState(null, "", newUrl.href);
 }