@salesforcedevs/docs-components 1.3.252 → 1.3.262

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.252",
+    "version": "1.3.262",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -24,5 +24,5 @@
         "@types/lodash.orderby": "^4.6.7",
         "@types/lodash.uniqby": "^4.7.7"
     },
-    "gitHead": "8379eb747571af22dfdfc3c440e8c23c85d1fe8b"
+    "gitHead": "fa38a93ede50fc83e6bf65da359a8db469288e9b"
 }

package/src/modules/doc/amfReference/amfReference.css

@@ -1,6 +1,7 @@
 doc-phase {
     --doc-c-phase-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-xl)
     );
 }
 

package/src/modules/doc/header/header.css

@@ -4,11 +4,39 @@ dx-logo {
     min-width: fit-content;
 }
 
+.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; /* Adjust this value to your desired spacing */
+}
+
 .header_l2 {
     justify-content: space-between;
     height: var(--dx-g-doc-header-main-nav-height);
 }
 
+.has-brand .header_l2 {
+    height: var(--dx-g-spacing-3xl);
+}
+
 .nav_menu-button {
     --dx-c-button-primary-color: var(--dx-g-blue-vibrant-20);
     --dx-c-button-secondary-color-hover: var(
@@ -40,7 +68,7 @@ header:not(.has-brand) > .header_l2 {
 }
 
 .has-brand .header_l2_group-title {
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-xl)
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-xl)
         calc(var(--dx-g-spacing-smd) - 1px) 0;
     min-width: 320px;
 }

package/src/modules/doc/header/header.html

@@ -6,16 +6,24 @@
                     lwc:if={showBanner}
                     banner-markup={bannerMarkup}
                 ></dx-banner>
+                <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>
+                        <span class="subtitle dx-text-body-4">
+                            {devCenter.title}
+                        </span>
+                    </a>
+                </div>
                 <div class="header_l2">
                     <div class="header_l2_group header_l2_group-title">
                         <a href={headerHref} class="home-link">
-                            <dx-icon
-                                class="brand-icon"
-                                lwc:if={isValidBrand}
-                                sprite="salesforcebrand"
-                                symbol={brand}
-                                size="large"
-                            ></dx-icon>
                             <span class="subtitle dx-text-display-7">
                                 {subtitle}
                             </span>

package/src/modules/doc/header/header.ts

@@ -20,11 +20,21 @@ export default class Header extends HeaderBase {
         this._scopedNavItems = toJson(value);
     }
 
+    @api
+    get devCenter() {
+        return this._devCenter;
+    }
+
+    set devCenter(value) {
+        this._devCenter = toJson(value);
+    }
+
     private _scopedNavItems!: OptionWithNested[];
     private tablet = false;
     private tabletMatchMedia!: MediaQueryList;
     private shouldRender: boolean = false;
     private showDocDivider: boolean = false;
+    private _devCenter: any;
 
     protected mobileBreakpoint(): string {
         return MOBILE_MATCH;