@salesforcedevs/dx-components 1.3.228 → 1.3.229-docheader2-alpha

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html

@@ -1,14 +1,20 @@
 <template>
     <a class={className} href={href} onclick={onClick}>
-        <span class="title search-text">
-            <template for:each={titleChunks} for:item="chunk">
-                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
-            </template>
-        </span>
-        <span class="description dx-text-body-3 sidebar-item-truncate-text">
-            <template for:each={descriptionChunks} for:item="chunk">
-                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
-            </template>
-        </span>
+        <div class="search-result">
+            <span class="title search-text">
+                <template for:each={titleChunks} for:item="chunk">
+                    <span class={chunk.class} key={chunk.id}>
+                        {chunk.value}
+                    </span>
+                </template>
+            </span>
+            <span class="description dx-text-body-3 sidebar-item-truncate-text">
+                <template for:each={descriptionChunks} for:item="chunk">
+                    <span class={chunk.class} key={chunk.id}>
+                        {chunk.value}
+                    </span>
+                </template>
+            </span>
+        </div>
     </a>
 </template>

package/src/modules/dx/tab/tab.css

@@ -11,22 +11,31 @@ a {
     );
 
     position: relative;
+    height: var(--dx-g-spacing-3xl);
+    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
+}
+
+.nav-list-item_default {
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    justify-content: center;
     display: flex;
-    align-items: center;
-    height: var(--dx-g-spacing-xl);
-    font-family: var(--dx-g-font-display);
-    white-space: nowrap;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    line-height: var(--dx-g-spacing-lg);
+    font-weight: var(--dx-g-font-normal);
+}
+
+.nav-list-item_default:hover {
+    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
+    background: var(--dx-g-cloud-blue-vibrant-95);
     color: var(--dx-g-blue-vibrant-20);
-    transition: var(--dx-g-transition-hue-1x);
-    cursor: pointer;
-    outline-offset: -1px;
 }
 
-.nav-list-item_default {
-    border: 0;
-    border-radius: var(--dx-g-spacing-md);
-    font-size: var(--dx-g-text-sm);
-    padding: 0 var(--horizontal-spacing);
+.nav-list-item_default:focus-visible {
+    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    color: var(--dx-g-blue-vibrant-20);
+    outline: 2px solid var(--dx-g-blue-vibrant-60);
 }
 
 .nav-list-item_small {
@@ -46,8 +55,6 @@ button.nav-list-item_small > dx-icon {
     margin-left: var(--dx-g-spacing-xs);
 }
 
-.nav-list-item_default:hover,
-.nav-list-item_default:active,
 :host([aria-expanded="true"]) button.nav-list-item_default {
     background: var(
         --dx-g-brand-current-button-color-background-inactive,
@@ -76,11 +83,26 @@ button.nav-list-item:active > dx-icon,
 }
 
 .nav-list-item_default.state-active {
-    background: var(
-        --dx-g-brand-current-button-color-background-active,
-        var(--dx-g-brand-default-button-color-background-active)
-    );
-    color: var(--dx-g-brand-current-color, var(--dx-g-brand-default-color));
+    color: var(--dx-g-blue-vibrant-50);
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
+        var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
+    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
+}
+
+.nav-list-item_default.state-active:hover {
+    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+.nav-list-item_default.state-active:focus-visible {
+    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
+    outline: 2px solid var(--dx-g-blue-vibrant-60);
+    color: var(--dx-g-blue-vibrant-20);
 }
 
 @media (max-width: 1160px) {
@@ -100,3 +122,10 @@ button.nav-list-item:active > dx-icon,
         );
     }
 }
+
+@media (max-width: 768px) {
+    .nav-list-item {
+        height: var(--dx-g-spacing-3xl);
+        display: flex;
+    }
+}

package/src/modules/dx/trafficLabeler/trafficLabeler.html

@@ -1,6 +1 @@
-<template>
-    <dx-coveo-labeler
-        coveo-organization-id={coveoOrganizationId}
-        coveo-analytics-token={coveoAnalyticsToken}
-    ></dx-coveo-labeler>
-</template>
+<template></template>

package/src/modules/dx/trafficLabeler/trafficLabeler.ts

@@ -1,3 +1,4 @@
+import { logCoveoPageView } from "docUtils/utils";
 import { LightningElement, api } from "lwc";
 
 const REDUNDANT_INSTANCE_ERROR_MESSAGE =
@@ -25,6 +26,8 @@ export default class TrafficLabeler extends LightningElement {
         } else {
             console.error(REDUNDANT_INSTANCE_ERROR_MESSAGE);
         }
+
+        logCoveoPageView(this.coveoOrganizationId, this.coveoAnalyticsToken);
     }
 
     async loadClearBitData() {

package/src/modules/dx/treeItem/treeItem.css

@@ -14,8 +14,8 @@ button:focus {
 }
 
 .tree-children-loading {
-    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-md) var(--dx-g-spacing-md)
-        var(--dx-g-spacing-md);
+    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-2xl);
 }
 
 @media (max-width: 768px) {

package/src/modules/dx/treeTile/treeTile.css

@@ -23,21 +23,23 @@
     --tile-height: 20px;
 
     font-family: var(--dx-g-font-sans);
-    font-size: 13px;
+    font-size: 14px;
     line-height: var(--tile-height);
+    font-weight: var(--dx-g-font-normal);
 }
 
 .tile-root {
-    font-family: var(--dx-g-font-display);
+    font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
-    font-weight: var(--dx-g-font-demi);
-    color: var(--dx-g-blue-vibrant-30);
+    font-weight: var(--dx-g-font-bold);
+    color: var(--dx-g-blue-vibrant-20);
     display: block;
 }
 
 .tile-icon {
     align-items: center;
     height: var(--tile-height);
+    padding-right: calc(var(--dx-g-spacing-xs) + 2px);
 }
 
 .tile-label {
@@ -54,95 +56,102 @@
 
 .tile-with-children .tile-expand-icon {
     order: 1;
-    padding-right: var(--dx-g-spacing-xs);
 }
 
 .indentation {
-    padding-left: var(--indentation);
+    padding-left: calc(var(--indentation) + var(--dx-g-spacing-2xs));
 }
 
 .tile-with-children .indentation {
     padding-left: calc(var(--indentation) - var(--base-indentation));
 }
 
+.tile-root-with-child .indentation {
+    padding-left: 0;
+}
+
+[aria-level="2"] {
+    --indentation: var(--dx-g-spacing-md);
+}
+
 [aria-level="3"] {
-    --indentation: var(--base-indentation);
+    --indentation: calc(2 * var(--base-indentation));
 }
 
 [aria-level="4"] {
-    --indentation: calc(2 * var(--base-indentation));
+    --indentation: calc(3 * var(--base-indentation));
 }
 
 [aria-level="5"] {
-    --indentation: calc(3 * var(--base-indentation));
+    --indentation: calc(4 * var(--base-indentation));
 }
 
 [aria-level="6"] {
-    --indentation: calc(4 * var(--base-indentation));
+    --indentation: calc(5 * var(--base-indentation));
 }
 
 [aria-level="7"] {
-    --indentation: calc(5 * var(--base-indentation));
+    --indentation: calc(6 * var(--base-indentation));
 }
 
 [aria-level="8"] {
-    --indentation: calc(6 * var(--base-indentation));
+    --indentation: calc(7 * var(--base-indentation));
 }
 
 [aria-level="9"] {
-    --indentation: calc(7 * var(--base-indentation));
+    --indentation: calc(8 * var(--base-indentation));
 }
 
 [aria-level="10"] {
-    --indentation: calc(8 * var(--base-indentation));
+    --indentation: calc(9 * var(--base-indentation));
 }
 
 [aria-level="11"] {
-    --indentation: calc(9 * var(--base-indentation));
+    --indentation: calc(10 * var(--base-indentation));
 }
 
 [aria-level="12"] {
-    --indentation: calc(10 * var(--base-indentation));
+    --indentation: calc(11 * var(--base-indentation));
 }
 
 [aria-level="13"] {
-    --indentation: calc(11 * var(--base-indentation));
+    --indentation: calc(12 * var(--base-indentation));
 }
 
 [aria-level="14"] {
-    --indentation: calc(12 * var(--base-indentation));
+    --indentation: calc(13 * var(--base-indentation));
 }
 
 [aria-level="15"] {
-    --indentation: calc(13 * var(--base-indentation));
+    --indentation: calc(14 * var(--base-indentation));
 }
 
 [aria-level="16"] {
-    --indentation: calc(14 * var(--base-indentation));
+    --indentation: calc(15 * var(--base-indentation));
 }
 
 [aria-level="17"] {
-    --indentation: calc(15 * var(--base-indentation));
+    --indentation: calc(16 * var(--base-indentation));
 }
 
 [aria-level="18"] {
-    --indentation: calc(16 * var(--base-indentation));
+    --indentation: calc(17 * var(--base-indentation));
 }
 
 [aria-level="19"] {
-    --indentation: calc(17 * var(--base-indentation));
+    --indentation: calc(18 * var(--base-indentation));
 }
 
 [aria-level="20"] {
-    --indentation: calc(18 * var(--base-indentation));
+    --indentation: calc(19 * var(--base-indentation));
 }
 
 [aria-level="21"] {
-    --indentation: calc(19 * var(--base-indentation));
+    --indentation: calc(20 * var(--base-indentation));
 }
 
 [aria-level="22"] {
-    --indentation: calc(20 * var(--base-indentation));
+    --indentation: calc(21 * var(--base-indentation));
 }
 
 dx-metadata-badge {
@@ -181,10 +190,10 @@ a {
 
 a:link,
 a:visited {
-    color: var(--dx-g-gray-10);
+    color: var(--dx-g-blue-vibrant-20);
 }
 
 a:visited.tile-root,
 a:link.tile-root {
-    color: var(--dx-g-blue-vibrant-30);
+    color: var(--dx-g-blue-vibrant-20);
 }

package/src/modules/dx/treeTile/treeTile.html

@@ -1,12 +1,6 @@
 <template>
     <a href={href} class={tileClass} target={target}>
         <div class="flex indentation" role="heading" aria-level={tileAriaLevel}>
-            <span
-                class="tile-label sidebar-item-truncate-text"
-                title={treeNode.label}
-            >
-                {treeNode.label}
-            </span>
             <div class="flex tile-expand-icon tile-icon" if:true={showArrow}>
                 <dx-icon
                     aria-expanded={isExpanded}
@@ -16,6 +10,12 @@
                     onclick={onClickIcon}
                 ></dx-icon>
             </div>
+            <span
+                class="tile-label sidebar-item-truncate-text"
+                title={treeNode.label}
+            >
+                {treeNode.label}
+            </span>
             <dx-metadata-badge
                 if:true={showMethod}
                 class="flex tile-icon"

package/src/modules/dx/treeTile/treeTile.ts

@@ -37,7 +37,7 @@ export default class TreeTile extends LightningElement {
     }
 
     private get iconSize() {
-        return this.isRoot ? "small" : "xsmall";
+        return "xsmall";
     }
 
     private get metadataBadgeColor(): string | undefined {
@@ -62,6 +62,7 @@ export default class TreeTile extends LightningElement {
         return cx("tile", "sidebar-item", {
             "tile-root": this.isRoot,
             "tile-with-children": !this.isRoot && this.hasChildren,
+            "tile-root-with-child": this.isRoot && this.showArrow,
             "sidebar-item-selected": this.isSelected
         });
     }

package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts

@@ -1,4 +1,6 @@
-import { LightningElement } from "lwc";
+import { LightningElement, api } from "lwc";
+import type { OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
 
 export const HEIGHT_OF_SIDEBAR_ITEM = 32;
 export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
@@ -8,6 +10,35 @@ export class SidebarBase extends LightningElement {
 
     selectedElement: HTMLElement | null = null;
     timerId: ReturnType<typeof setTimeout> | null = null;
+    _languages!: OptionWithLink[];
+    mobile: boolean = true;
+    expanded: boolean = true;
+    _value?: string = undefined;
+    showBoxShadow: boolean = false;
+    private scrolling: boolean = false;
+
+    @api langValuePath: string = "id";
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
+
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    set languages(value) {
+        this._languages = toJson(value);
+    }
+
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+    }
 
     get sidebarContent() {
         if (!this._sidebarContent) {
@@ -18,6 +49,29 @@ export class SidebarBase extends LightningElement {
         return this._sidebarContent;
     }
 
+    /**
+     * This method is to handle the scroll event for LNB and show box shadow
+     * @param scrollEvent
+     */
+    handleScroll(scrollEvent: any) {
+        const lnb = scrollEvent.target;
+
+        if (!this.scrolling) {
+            this.scrolling = true;
+            // Set a timeout to handle scroll event after a delay
+            setTimeout(() => {
+                // Check if lnb is scrolled
+                if (lnb.scrollTop > 0 && lnb.scrollHeight > lnb.clientHeight) {
+                    this.showBoxShadow = true;
+                } else {
+                    this.showBoxShadow = false;
+                }
+                // Reset scrolling back to false after handling the scroll
+                this.scrolling = false;
+            }, 200);
+        }
+    }
+
     renderedCallback(): void {
         /**
          * Implementing debouncing kind of logic here to scroll to selected element once tree rendering is done
@@ -62,4 +116,45 @@ export class SidebarBase extends LightningElement {
             this.selectedElement = null;
         }
     }
+
+    onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+        this.expanded = !this.mobile;
+    };
+
+    onSelect(event: CustomEvent) {
+        this._value = event.detail.name;
+
+        if (this.mobile) {
+            this.onToggleClick();
+        }
+    }
+
+    onToggleClick() {
+        this.expanded = !this.expanded;
+        this.dispatchEvent(
+            new CustomEvent("togglesidebar", {
+                detail: {
+                    open: this.expanded,
+                    bubbles: true,
+                    composed: true
+                }
+            })
+        );
+    }
+
+    private get hasMobileSidebarFooter(): boolean {
+        return this.mobile && this.languages?.length > 1 && this.expanded;
+    }
+
+    private get hasSidebarFooter(): boolean {
+        return this.languages?.length > 1 || Boolean(this.bailHref);
+    }
+
+    private get sidebarContentClass(): string {
+        const sidebarConterCss = "sidebar-content sidebar-content-tree";
+        return this.hasSidebarFooter || this.hasMobileSidebarFooter
+            ? sidebarConterCss + " sidebar-content-hasfooter"
+            : sidebarConterCss;
+    }
 }

package/src/modules/dxHelpers/commonHeader/commonHeader.css

@@ -3,6 +3,8 @@
 
 :host {
     z-index: var(--dx-g-z-index-500);
+
+    --dx-g-doc-header-main-nav-height: 51px;
 }
 
 .header_l2_group-nav_overflow {
@@ -58,8 +60,9 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 /* Second row */
 
 .header_l2 {
-    background: var(--dx-g-brand-current-color-background);
-    padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
+    background: white;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
+        var(--dx-g-spacing-smd) var(--dx-g-spacing-2xl);
 }
 
 .header_l2_group {
@@ -70,6 +73,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 
 .header_l2_group-title {
     flex-shrink: 0;
+    padding: var(--dx-g-spacing-smd) 0 calc(var(--dx-g-spacing-smd) - 1px) 0;
 }
 
 .header_l2_group-title

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-c-sidebar-width: 275px;
+    --dx-c-sidebar-width: 337px;
     --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-button-background: white;
     --dx-c-sidebar-button-border: white;
@@ -13,10 +13,6 @@
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 }
 
-dx-tree:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
 .header {
     box-sizing: content-box;
     display: flex;
@@ -31,8 +27,11 @@ dx-tree:not(:last-child) {
 }
 
 .padding-horizontal {
-    padding-left: var(--dx-g-spacing-md);
-    padding-right: var(--dx-g-spacing-md);
+    padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
+}
+
+.padding-horizontal[show-shadow="true"] {
+    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
 }
 
 .header-title {
@@ -53,7 +52,7 @@ dx-tree:not(:last-child) {
 }
 
 .container {
-    background-color: var(--dx-g-gray-95);
+    background-color: white;
     display: flex;
     flex-direction: column;
     height: var(--dx-c-sidebar-height);
@@ -66,10 +65,10 @@ dx-tree:not(:last-child) {
         var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
     );
 
+    border-right: 1px solid var(--dx-g-gray-90);
     box-shadow: 2px 0 0 0 var(--border-color);
     min-height: var(--dx-c-sidebar-min-height);
-    padding: var(--dx-c-sidebar-vertical-padding) 0
-        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
+    padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
     position: relative;
 }
 
@@ -114,7 +113,7 @@ dx-tree:not(:last-child) {
 }
 
 .search {
-    padding-bottom: var(--dx-g-spacing-md);
+    padding-bottom: var(--dx-g-spacing-smd);
 }
 
 .search-box {
@@ -127,9 +126,33 @@ dx-tree:not(:last-child) {
     white-space: nowrap;
 }
 
-@media screen and (max-width: 768px) {
+.footer-nav {
+    display: flex;
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm)
+        var(--dx-g-spacing-xs) var(--dx-g-spacing-xl);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: inherit;
+    background: white;
+    border-top: 1px solid var(--dx-g-gray-90);
+    border-right: 1px solid var(--dx-g-gray-90);
+    height: var(--dx-g-spacing-2xl);
+    align-items: center;
+}
+
+.sidebar-content-hasfooter {
+    margin-bottom: var(--dx-g-spacing-2xl);
+}
+
+@media screen and (max-width: 1279px) {
+    .padding-horizontal {
+        padding-left: var(--dx-g-spacing-xl);
+    }
+}
+
+@media screen and (max-width: 767px) {
     .padding-horizontal {
         padding-left: var(--dx-g-spacing-lg);
-        padding-right: var(--dx-g-spacing-md);
     }
 }

package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css

@@ -8,14 +8,57 @@
 
 .sidebar-item-selected {
     background: var(--dx-g-cloud-blue-vibrant-95);
-    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-60);
+    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40);
     border-radius: 0;
+    color: var(--dx-g-blue-vibrant-40) !important;
 }
 
 .sidebar-item {
-    padding: 6px var(--dx-g-spacing-md);
+    padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-2xl);
+}
+
+.sidebar-item:not(.sidebar-item-selected):focus-visible {
+    padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
+    margin: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
+    outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
+    border-radius: var(--dx-g-spacing-2xs);
+}
+
+.sidebar-item-selected:focus-visible {
+    padding-top: 0;
+    padding-bottom: 0;
+    outline: none;
+
+    .indentation {
+        outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
+        border-radius: var(--dx-g-spacing-2xs);
+        padding-top: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
+        padding-bottom: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
+    }
 }
 
 .sidebar-item:not(.sidebar-item-selected):hover {
-    background-color: var(--dx-g-gray-90);
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+@media (max-width: 1279px) {
+    .sidebar-item {
+        padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-xl);
+    }
+
+    .sidebar-item:not(.sidebar-item-selected):focus-visible {
+        padding-left: 0;
+        margin-left: var(--dx-g-spacing-xl);
+    }
+}
+
+@media (max-width: 767px) {
+    .sidebar-item {
+        padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-lg);
+    }
+
+    .sidebar-item:not(.sidebar-item-selected):focus-visible {
+        padding-left: 0;
+        margin-left: var(--dx-g-spacing-lg);
+    }
 }