@salesforcedevs/dx-components 1.15.4-ldh-alpha → 1.15.4-ldh-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.15.4-ldh-alpha",
+    "version": "1.15.4-ldh-alpha2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -24,22 +24,24 @@
         </div>
         <div class="sidebar-header" show-shadow={showBoxShadow}>
             <div class="header padding-horizontal" lwc:if={isDesktop}>
-                <div lwc:if={devCenter} class="dev-center-link">
-                    <a href={devCenter.link} class="dev-center-content">
-                        <dx-icon symbol="back"></dx-icon>
-                        <dx-icon
-                            class="brand-icon"
-                            lwc:if={devCenter.icon}
-                            sprite="salesforcebrand"
-                            symbol={brand}
-                            size="large"
-                        ></dx-icon>
-                        <h2 class="dx-text-display-6 header-title">
-                            {devCenter.title}
-                        </h2>
-                    </a>
+                <div class="header-wrapper">
+                    <div lwc:if={devCenter} class="dev-center-link link-row">
+                        <a href={devCenter.link} class="dev-center-content">
+                            <dx-icon symbol="back"></dx-icon>
+                            <dx-icon
+                                class="brand-icon"
+                                lwc:if={devCenter.icon}
+                                sprite="salesforcebrand"
+                                symbol={brand}
+                                size="large"
+                            ></dx-icon>
+                            <span class="subtitle dx-text-body-4">
+                                {devCenter.title}
+                            </span>
+                        </a>
+                    </div>
+                    <h2 class="dx-text-display-6 header-title">{header}</h2>
                 </div>
-                <h2 class="dx-text-display-6 header-title">{header}</h2>
             </div>
             <div class="search padding-horizontal">
                 <dx-sidebar-search

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

@@ -5,7 +5,6 @@ import { getSidebarSearchParams } from "dxUtils/coveo";
 import { toJson } from "dxUtils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
-import { Brand } from "typings/custom";
 
 const MOBILE_SIZE_MATCH = "768px";
 
@@ -15,16 +14,6 @@ export default class Sidebar extends SidebarBase {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
-    @api brand: Brand | null = null;
-
-    @api
-    get devCenter() {
-        return this._devCenter;
-    }
-
-    set devCenter(value) {
-        this._devCenter = toJson(value);
-    }
 
     @api
     get trees() {
@@ -64,7 +53,6 @@ export default class Sidebar extends SidebarBase {
     private scrollToSelectedSearchResult: boolean = false;
     private selectedSearchResultIndex: number = -1;
     private requestedFetchMoreResults: boolean = false;
-    private _devCenter: any;
 
     private get areResultsEmpty(): boolean {
         return (

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -26,7 +26,27 @@
         <template lwc:if={expanded}>
             <div class="sidebar-header" show-shadow={showBoxShadow}>
                 <div class="header padding-horizontal" lwc:if={isDesktop}>
-                    <h2 class="dx-text-display-6 header-title">{header}</h2>
+                    <div class="header-wrapper">
+                        <div
+                            lwc:if={devCenter}
+                            class="dev-center-link link-row"
+                        >
+                            <a href={devCenter.link} class="dev-center-content">
+                                <dx-icon symbol="back"></dx-icon>
+                                <dx-icon
+                                    class="brand-icon"
+                                    lwc:if={devCenter.icon}
+                                    sprite="salesforcebrand"
+                                    symbol={brand}
+                                    size="large"
+                                ></dx-icon>
+                                <span class="subtitle dx-text-body-4">
+                                    {devCenter.title}
+                                </span>
+                            </a>
+                        </div>
+                        <h2 class="dx-text-display-6 header-title">{header}</h2>
+                    </div>
                 </div>
                 <div class="search padding-horizontal">
                     <dx-input

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

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import type { OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
+import { Brand } from "typings/custom";
 
 export const HEIGHT_OF_SIDEBAR_ITEM = 32;
 export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
@@ -16,11 +17,22 @@ export class SidebarBase extends LightningElement {
     _value?: string = undefined;
     showBoxShadow: boolean = false;
     private scrolling: boolean = false;
+    _devCenter: any;
 
     @api langValuePath: string = "id";
     @api language!: string;
     @api bailHref!: string;
     @api bailLabel!: string;
+    @api brand: Brand | null = null;
+
+    @api
+    get devCenter() {
+        return this._devCenter;
+    }
+
+    set devCenter(value) {
+        this._devCenter = toJson(value);
+    }
 
     @api
     get languages() {

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

@@ -55,6 +55,42 @@
     padding-left: var(--dx-g-global-header-padding-horizontal);
 }
 
+.header-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.link-row a {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.dev-center-link {
+    display: inline-block;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg) 0
+        var(--dx-g-global-header-padding-horizontal);
+    height: var(--dx-g-spacing-xl);
+}
+
+.dev-center-content {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+    font-weight: var(--dx-g-font-bold);
+}
+
+dx-icon {
+    --dx-c-icon-size: var(--dx-g-icon-size-xs);
+    --dx-c-icon-color: var(--dx-g-blue-vibrant-20);
+}
+
+.dev-center-content > * + * {
+    margin-left: 8px;
+}
+
 .container {
     background-color: white;
     display: flex;