@salesforcedevs/docs-components 1.30.1-docs-alpha → 1.30.1-locale-picker

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.30.1-docs-alpha",
+  "version": "1.30.1-locale-picker",
   "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.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,8 @@ export default class RedocReference extends LightningElement {
     private docHeaderElement: Element | null = null;
     private docPhaseWrapperElement: Element | null = null;
     private lastSidebarTop = 0;
+    private _languages: OptionWithLink[] = [];
+    private langValuePath: string = "id";
 
     /**
      * History length captured at mount (pre-Redoc), used by `onBackClick` to
@@ -118,6 +123,17 @@ 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) || [];
+    }
+
+    /** Currently selected locale, matched against `langValuePath`. */
+    @api language: string | null = null;
+
     get specTitle(): string | null {
         return this.getSelectedReference()?.title ?? null;
     }
@@ -135,6 +151,14 @@ export default class RedocReference extends LightningElement {
         return refCount > 1;
     }
 
+    /**
+     * Only for the docs content type and when more than one localized
+     * spec is available
+     */
+    get hasLocalePicker(): boolean {
+        return this.isDocContentType && 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
@@ -450,6 +474,33 @@ 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,
+            langValuePath: this.langValuePath
+        });
+        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;