@salesforcedevs/dx-components 0.56.2 → 0.58.1-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.56.2",
+    "version": "0.58.1-alpha.0+ba23c283",
     "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": "ba23c2834f6fdb8d222e308013b3f0cd92440f77"
 }

package/src/assets/svg/subscribe-background-left.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="45px" height="34px" viewBox="0 0 45 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>blog-cta-graphic-left</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Blog---v1" transform="translate(-424.000000, -2216.000000)" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
+                <g id="blog-cta-graphic-left" transform="translate(373.000000, 47.500000)">
+                    <circle id="Oval-Copy-12" stroke="#90D1FF" cx="39.5" cy="4.5" r="3.5"></circle>
+                    <path d="M7.42619649,16.2472709 L5.80463043,20.6293714 C5.68941141,20.9429183 5.44197383,21.1894114 5.12842699,21.3046304 L0.747270909,22.9271409 C-0.249090303,23.295464 -0.249090303,24.704536 0.747270909,25.0738035 L5.12842699,26.6953696 C5.44197383,26.8105886 5.68941141,27.0570817 5.80463043,27.3706286 L7.42619649,31.7527291 C7.79546401,32.7490903 9.20453599,32.7490903 9.57285909,31.7527291 L11.1944252,27.3706286 C11.3096442,27.0570817 11.5570817,26.8105886 11.8706286,26.6953696 L16.2527291,25.0738035 C17.2481459,24.704536 17.2481459,23.295464 16.2527291,22.9271409 L11.8706286,21.3046304 C11.5570817,21.1894114 11.3096442,20.9429183 11.1944252,20.6293714 L9.57285909,16.2472709 C9.20453599,15.2509097 7.79546401,15.2509097 7.42619649,16.2472709 Z" id="Stroke-7-Copy-2" stroke="#8FD0FE" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/subscribe-background-right.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="22px" viewBox="0 0 23 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>blog-cta-graphic-right</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Blog---v1" transform="translate(-936.000000, -2378.000000)" stroke="#8FD0FE" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
+                <path d="M894.236764,210.879142 L892.329039,216.034555 C892.193488,216.403433 891.902385,216.693425 891.533506,216.828977 L886.379205,218.737813 C885.207015,219.171134 885.207015,220.828866 886.379205,221.263298 L891.533506,223.171023 C891.902385,223.306575 892.193488,223.596567 892.329039,223.965445 L894.236764,229.120858 C894.671197,230.293047 896.328928,230.293047 896.76225,229.120858 L898.669974,223.965445 C898.805526,223.596567 899.096629,223.306575 899.465508,223.171023 L904.62092,221.263298 C905.791999,220.828866 905.791999,219.171134 904.62092,218.737813 L899.465508,216.828977 C899.096629,216.693425 898.805526,216.403433 898.669974,216.034555 L896.76225,210.879142 C896.328928,209.706953 894.671197,209.706953 894.236764,210.879142 Z" id="blog-cta-graphic-right"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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/dx/iconBadge/iconBadge.css

@@ -38,3 +38,15 @@ dx-icon {
 .shape-square {
     border-radius: var(--dx-g-spacing-sm);
 }
+
+.background-small {
+    --dx-c-icon-badge-size: 24px;
+}
+
+.background-medium {
+    --dx-c-icon-badge-size: 32px;
+}
+
+.background-large {
+    --dx-c-icon-badge-size: 48px;
+}

package/src/modules/dx/iconBadge/iconBadge.html

@@ -4,7 +4,7 @@
             color={color}
             symbol={symbol}
             sprite={sprite}
-            size="override"
+            size={iconSize}
         ></dx-icon>
     </div>
 </template>

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -10,6 +10,8 @@ export default class IconBadge extends LightningElement {
     @api symbol!: IconSymbol;
     @api color?: string | null = null;
     @api backgroundColor?: string;
+    @api backgroundSize?: string;
+    @api iconSize?: string = "override";
 
     _shape: IconBadgeShape = "circle";
     @api
@@ -30,7 +32,11 @@ export default class IconBadge extends LightningElement {
     }
 
     get className() {
-        return cx("icon-badge", `shape-${this.shape}`);
+        return cx(
+            "icon-badge",
+            `shape-${this.shape}`,
+            this.backgroundSize && `background-${this.backgroundSize}`
+        );
     }
 
     get style() {

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);
 }