@salesforcedevs/dx-components 1.3.29 → 1.3.32

package/lwc.config.json

@@ -52,6 +52,7 @@
         "dx/input",
         "dx/interactiveImage",
         "dx/logo",
+        "dx/mainContentHeader",
         "dx/modal",
         "dx/metadataBadge",
         "dx/modalDrawer",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.29",
+    "version": "1.3.32",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -38,5 +38,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "5d0d8e8ae99896c6f2da9afd8f826a5c37ae45a1"
+    "gitHead": "550125540ec042bed34b7643f50548ffcc774093"
 }

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

@@ -6,7 +6,7 @@
         target={option.link.target}
         key={option.id}
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
         data-index={indexPosition}
         onclick={onClick}
     >
@@ -35,7 +35,7 @@
         if:false={option.link}
         class={className}
         role="menuitem"
-        tabindex="-1"
+        tabindex="0"
         data-index={indexPosition}
         onclick={onClick}
     >

package/src/modules/dx/mainContentHeader/mainContentHeader.css

@@ -0,0 +1,90 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.container {
+    display: flex;
+    flex-direction: row;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    overflow: hidden;
+}
+
+.container > * {
+    width: 50%;
+}
+
+.text-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: var(--dx-g-spacing-lg) 0;
+    min-height: 460px;
+    text-align: left;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.image-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    overflow: visible;
+}
+
+img {
+    width: 100%;
+}
+
+img.desktop {
+    height: fit-content;
+    min-width: 876px;
+    margin-left: var(--dx-g-spacing-lg);
+}
+
+img.mobile {
+    display: none;
+    min-width: 1024px;
+}
+
+.text-container > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+dx-button {
+    margin-top: var(--dx-g-spacing-smd);
+}
+
+@media screen and (max-width: 1024px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .container > * {
+        width: 100%;
+    }
+
+    .text-container {
+        align-items: center;
+        text-align: center;
+        padding-top: var(--dx-g-spacing-4xl);
+        padding-bottom: 0;
+        min-height: unset;
+    }
+
+    .text-container > * {
+        max-width: 700px;
+    }
+
+    .image-container {
+        justify-content: center;
+    }
+
+    img.desktop {
+        display: none;
+    }
+
+    img.mobile {
+        display: block;
+    }
+}

package/src/modules/dx/mainContentHeader/mainContentHeader.html

@@ -0,0 +1,16 @@
+<template>
+    <div class="container">
+        <div class="text-container" style={style}>
+            <h1 class="heading dx-text-heading-2">{title}</h1>
+            <span class="body dx-text-body-1">{body}</span>
+            <span class="subtitle dx-text-heading-4b">{subtitle}</span>
+            <dx-button href={ctaHref} target={ctaTarget} size="hero">
+                {ctaLabel}
+            </dx-button>
+        </div>
+        <div class="image-container">
+            <img class="desktop" src={imgSrc} />
+            <img class="mobile" src={imgSrcMobile} />
+        </div>
+    </div>
+</template>

package/src/modules/dx/mainContentHeader/mainContentHeader.ts

@@ -0,0 +1,26 @@
+import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
+
+export default class MainContentHeader extends LightningElement {
+    @api title!: string;
+    @api subtitle!: string;
+    @api body!: string;
+    @api ctaLabel!: string;
+    @api ctaHref!: string;
+    @api imgSrc!: string;
+    @api imgSrcMobile!: string;
+    @api ctaTarget?: string | null = null;
+
+    private onCtaClick(e: Event) {
+        if (e.currentTarget) {
+            track(e.currentTarget, "custEv_ctaButtonClick", {
+                clickText: this.ctaLabel,
+                itemTitle: this.title,
+                clickUrl: this.ctaHref,
+                elementType: "button",
+                destinationType: "internal",
+                ctaClick: true
+            });
+        }
+    }
+}

package/src/modules/dx/sidebar/sidebar.css

@@ -12,6 +12,10 @@ dx-empty-state {
     padding-bottom: var(--dx-g-spacing-md);
 }
 
+.sidebar-content-tree {
+    padding: var(--dx-g-spacing-xs);
+}
+
 .loading-skeleton {
     margin-top: var(--dx-g-spacing-md);
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -88,6 +88,7 @@
                 tree-root={tree.tree}
                 onselect={onSelect}
                 value={value}
+                onfocus={onItemsFocused}
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>

package/src/modules/dx/sidebar/sidebar.ts

@@ -257,4 +257,10 @@ export default class Sidebar extends SidebarBase {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
+
+    private onItemsFocused(): void {
+        this.template
+            .querySelector("dx-sidebar-search")
+            ?.requestOpenDropdown(false);
+    }
 }

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -78,6 +78,11 @@ export default class SidebarSearch extends LightningElement {
         }
     }
 
+    @api
+    requestOpenDropdown(value: boolean) {
+        this.dropdownRequestedOpen = value;
+    }
+
     private _coveoAdvancedQueryConfig!: { [key: string]: any };
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];

package/src/modules/dx/treeItem/treeItem.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} target={target} onclick={onLinkClick}>
+    <a href={href} target={target} onclick={onLinkClick} tabindex="-1">
         <dx-tree-tile
             href={href}
             is-root={isRoot}
@@ -18,7 +18,7 @@
         src="/assets/svg/sidebar-item-loading.svg"
         alt="childrenLoading"
     />
-    <template if:true={showChildren}>
+    <template if:true={showChildren} tabindex="0">
         <template for:each={treeNode.children} for:item="child">
             <dx-tree-item
                 key={child.key}