@salesforcedevs/docs-components 1.30.1-docs-alpha1 → 1.30.1-locale-picker-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.30.1-docs-alpha1",
+  "version": "1.30.1-locale-picker-1",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",
@@ -25,5 +25,6 @@
     "@types/lodash.orderby": "4.6.9",
     "@types/lodash.uniqby": "4.7.9"
   },
-  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
+  "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad",
+  "stableVersion": "1.30.1"
 }

package/src/modules/doc/redocReference/redocReference.css

@@ -1,6 +1,7 @@
 :host {
     --dx-footer-margin-top: 142px;
     --doc-c-redoc-sidebar-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/redocReference/redocReference.ts

@@ -3,9 +3,12 @@ import { createElement, LightningElement, api } from "lwc";
 import DocPhase from "doc/phase";
 import DxFooter from "dx/footer";
 import DxIcon from "dx/icon";
+import SidebarFooterNav from "dx/sidebarFooterNav";
 import SprigSurvey from "doc/sprigSurvey";
 import { throttle } from "throttle-debounce";
 import { pollUntil } from "dxUtils/async";
+import { toJson } from "dxUtils/normalizers";
+import type { OptionWithLink } from "typings/custom";
 
 declare global {
     interface Window {
@@ -47,6 +50,7 @@ export default class RedocReference extends LightningElement {
     private docHeaderElement: Element | null = null;
     private docPhaseWrapperElement: Element | null = null;
     private lastSidebarTop = 0;
+    private _languages: OptionWithLink[] = [];
 
     /**
      * History length captured at mount (pre-Redoc), used by `onBackClick` to
@@ -118,6 +122,16 @@ export default class RedocReference extends LightningElement {
     }
     private _contentType: string = "";
 
+    @api
+    get languages(): OptionWithLink[] {
+        return this._languages;
+    }
+    set languages(value: string | OptionWithLink[]) {
+        this._languages = toJson(value) || [];
+    }
+
+    @api language: string | null = null;
+
     get specTitle(): string | null {
         return this.getSelectedReference()?.title ?? null;
     }
@@ -135,6 +149,13 @@ export default class RedocReference extends LightningElement {
         return refCount > 1;
     }
 
+    /**
+     * when more than one localized spec is available
+     */
+    get hasLocalePicker(): boolean {
+        return this.languages.length > 1;
+    }
+
     /**
      * Whether to show the project header. Shown for multi-spec reference
      * sets, and for any docs-content spec topic so it always has a back
@@ -175,12 +196,28 @@ export default class RedocReference extends LightningElement {
             if (referrerUrl.origin !== window.location.origin) {
                 return null;
             }
+            if (this.isLocaleHref(referrerUrl.pathname)) {
+                return null;
+            }
             return referrerUrl.href;
         } catch {
             return null;
         }
     }
 
+    /**
+     * switching locale on this same page.
+     */
+    private isLocaleHref(pathname: string): boolean {
+        return this.languages.some((locale) => {
+            const href = locale?.link?.href;
+            return (
+                !!href &&
+                new URL(href, window.location.origin).pathname === pathname
+            );
+        });
+    }
+
     /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
     get effectiveFooterOrigin(): string {
         return (
@@ -419,7 +456,7 @@ export default class RedocReference extends LightningElement {
             this.appendFooterItems(apiContentDiv);
 
             // Inject the multi-spec project header into Redoc's left menu only.
-            this.insertProjectHeaderInMenu(redocContainer);
+            this.insertSidebarNav(redocContainer);
 
             // Wait for footer to be rendered before updating styles
             requestAnimationFrame(() => {
@@ -436,7 +473,7 @@ export default class RedocReference extends LightningElement {
     /**
      * Inserts the project header into Redoc for multi-spec reference sets.
      */
-    private insertProjectHeaderInMenu(redocContainer: HTMLElement): void {
+    private insertSidebarNav(redocContainer: HTMLElement): void {
         if (!this.showRedocHeader) {
             return;
         }
@@ -450,6 +487,32 @@ export default class RedocReference extends LightningElement {
                     target.firstChild
                 );
             });
+
+        // Locale picker
+        if (this.hasLocalePicker) {
+            const menuContent = redocContainer.querySelector(".menu-content");
+            menuContent?.appendChild(this.buildLocalePickerDom());
+        }
+    }
+
+    /**
+     * Builds the locale picker DOM by reusing `dx-sidebar-footer-nav`
+     */
+    private buildLocalePickerDom(): HTMLElement {
+        const wrapper = document.createElement("div");
+        wrapper.className = "redoc-footer-nav";
+
+        const picker = createElement("dx-sidebar-footer-nav", {
+            is: SidebarFooterNav
+        });
+
+        Object.assign(picker, {
+            languages: this.languages,
+            language: this.language
+        });
+        wrapper.appendChild(picker);
+
+        return wrapper;
     }
 
     /**

package/src/modules/doc/unifiedContentLayout/unifiedContentLayout.html

@@ -15,8 +15,6 @@
         language={language}
         show-footer={enableFooter}
         origin={origin}
-        dev-center={devCenter}
-        brand={brand}
     >
         <doc-phase
             slot="doc-phase"

package/src/modules/doc/unifiedContentLayout/unifiedContentLayout.ts

@@ -44,8 +44,6 @@ export default class UnifiedContentLayout extends LightningElement {
     @api tocAriaLevel?: string;
     @api languages?: OptionWithLink[];
     @api language?: string;
-    @api devCenter: any = null;
-    @api brand: any = null;
 
     /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). */
     @api origin: string | null = null;