@salesforcedevs/docs-components 1.30.1-node22-2 → 1.32.0-alpha.10

package/lwc.config.json

@@ -6,6 +6,8 @@
     ],
     "expose": [
         "doc/amfReference",
+        "doc/banner",
+        "doc/localeBanner",
         "doc/breadcrumbs",
         "doc/componentPlayground",
         "doc/content",

package/package.json

@@ -1,15 +1,11 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.30.1-node22-2",
+    "version": "1.32.0-alpha.10",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
     "engines": {
-        "node": ">=22.0.0"
-    },
-    "volta": {
-        "node": "22.22.0",
-        "yarn": "1.22.22"
+        "node": "20.x"
     },
     "publishConfig": {
         "access": "public"
@@ -29,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "db460ac1fb9b1f752d0c129dfe19012c8a085867"
+    "gitHead": "f81270b339009dc62f6b32c40a3ac11911b22104"
 }

package/src/modules/doc/banner/banner.css

@@ -0,0 +1,88 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    display: block;
+
+    --doc-banner-padding-left: var(--dx-g-spacing-2xl);
+    --doc-banner-padding-right: var(--dx-g-spacing-lg);
+}
+
+.container {
+    display: flex;
+    align-items: flex-start;
+    background: var(--dx-g-gray-90);
+    padding: 0 var(--doc-banner-padding-right) 0 var(--doc-banner-padding-left);
+}
+
+.icon {
+    --dx-c-icon-size: var(--dx-g-icon-size-lg);
+
+    flex-shrink: 0;
+    margin-top: var(--dx-g-spacing-smd);
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    column-gap: var(--dx-g-spacing-md);
+    padding: calc((var(--dx-g-spacing-xs) + var(--dx-g-spacing-sm)) / 2) 0;
+}
+
+.message {
+    flex: 0 1 auto;
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-gray-10);
+    padding: calc((var(--dx-g-spacing-xs) + var(--dx-g-spacing-sm)) / 2) 0;
+}
+
+.message a {
+    color: var(--dx-g-cloud-blue-vibrant-50);
+    text-decoration: underline;
+}
+
+.actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-smd);
+}
+
+.actions dx-button {
+    --dx-c-button-font-size: var(--dx-g-text-sm);
+    --dx-c-button-font-weight: var(--dx-g-font-normal);
+
+    flex: 0 0 auto;
+}
+
+.close {
+    --dx-c-icon-size: var(--dx-g-icon-size-lg);
+
+    flex-shrink: 0;
+    align-self: flex-start;
+    width: calc(var(--dx-g-spacing-3xl) + var(--dx-g-spacing-xs));
+    height: calc(var(--dx-g-spacing-2xl) + var(--dx-g-spacing-xs));
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+@media (max-width: 1279px) {
+    :host {
+        --doc-banner-padding-left: var(--dx-g-spacing-xl);
+        --doc-banner-padding-right: var(--dx-g-spacing-md);
+    }
+}
+
+@media (max-width: 768px) {
+    :host {
+        --doc-banner-padding-left: var(--dx-g-spacing-lg);
+        --doc-banner-padding-right: var(--dx-g-spacing-sm);
+    }
+}

package/src/modules/doc/banner/banner.html

@@ -0,0 +1,47 @@
+<template>
+    <template lwc:if={showBanner}>
+        <div class="container" part="container">
+            <dx-icon
+                class="icon"
+                symbol="info"
+                size="override"
+                color="gray-50"
+                part="icon"
+            ></dx-icon>
+            <div class="main">
+                <div class="message" part="message" lwc:dom="manual"></div>
+                <div class="actions" part="actions">
+                    <template lwc:if={hasPrimaryButton}>
+                        <dx-button
+                            href={buttonHref}
+                            variant="primary"
+                            size="small"
+                            part="button"
+                        >
+                            {buttonLabel}
+                        </dx-button>
+                    </template>
+                    <template lwc:if={hasSecondaryAction}>
+                        <dx-button
+                            variant="inline"
+                            onclick={handleSecondaryClick}
+                            part="secondary"
+                        >
+                            {secondaryLabel}
+                        </dx-button>
+                    </template>
+                </div>
+            </div>
+            <dx-button
+                class="close"
+                variant="icon-only"
+                icon-symbol="close"
+                icon-size="override"
+                icon-color="gray-50"
+                aria-label="Close"
+                onclick={handleCloseClick}
+                part="close"
+            ></dx-button>
+        </div>
+    </template>
+</template>

package/src/modules/doc/banner/banner.ts

@@ -0,0 +1,73 @@
+import { LightningElement, api } from "lwc";
+
+const BANNER_STORAGE_PREFIX = "doc-banner-";
+
+export default class Banner extends LightningElement {
+    @api message = "";
+
+    @api buttonLabel = "";
+
+    @api buttonHref = "";
+
+    @api secondaryLabel = "";
+
+    @api dismissStorageKey = "";
+
+    private _dismissed = false;
+
+    connectedCallback() {
+        if (this.dismissStorageKey && window?.sessionStorage) {
+            this._dismissed =
+                window.sessionStorage.getItem(
+                    `${BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`
+                ) === "true";
+        }
+    }
+
+    renderedCallback() {
+        if (this.message) {
+            const messageElement = this.template.querySelector(".message");
+            if (messageElement) {
+                messageElement.innerHTML = this.message;
+            }
+        }
+    }
+
+    get showBanner(): boolean {
+        return !this._dismissed;
+    }
+
+    get hasPrimaryButton(): boolean {
+        return !!(this.buttonLabel && this.buttonHref);
+    }
+
+    get hasSecondaryAction(): boolean {
+        return !!this.secondaryLabel;
+    }
+
+    private dismissBanner() {
+        if (this.dismissStorageKey && window?.sessionStorage) {
+            window.sessionStorage.setItem(
+                `${BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`,
+                "true"
+            );
+        }
+        this._dismissed = true;
+        this.dispatchEvent(
+            new CustomEvent("dismissbanner", {
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    @api
+    handleSecondaryClick() {
+        this.dismissBanner();
+    }
+
+    @api
+    handleCloseClick() {
+        this.dismissBanner();
+    }
+}

package/src/modules/doc/contentLayout/contentLayout.css

@@ -1 +1,8 @@
 @import "docHelpers/contentLayoutStyle";
+
+/* Reserve sidebar space during load so layout doesn't shift when dx-sidebar or dx-sidebar-old renders. */
+.sidebar-placeholder {
+    flex-shrink: 0;
+    width: var(--dx-c-sidebar-width, 337px);
+    min-height: var(--dx-c-sidebar-height);
+}

package/src/modules/doc/contentLayout/contentLayout.html

@@ -1,21 +1,40 @@
 <template>
     <div class="content">
-        <dx-sidebar-old
-            class="is-sticky left-nav-bar"
-            trees={sidebarContent}
-            value={sidebarValue}
-            header={sidebarHeader}
-            ontogglesidebar={onToggleSidebar}
-            languages={languages}
-            language={language}
-            bail-href={bailHref}
-            bail-label={bailLabel}
-            dev-center={devCenter}
-            brand={brand}
-            empty-state-message={emptyStateMessage}
-        >
-            <slot name="sidebar-header" slot="version-picker"></slot>
-        </dx-sidebar-old>
+        <template lwc:if={showDataCloudSidebar}>
+            <dx-sidebar
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                ontogglesidebar={onToggleSidebar}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar>
+        </template>
+        <template lwc:if={showOldSidebar}>
+            <dx-sidebar-old
+                class="is-sticky left-nav-bar"
+                trees={sidebarContent}
+                value={sidebarValue}
+                header={sidebarHeader}
+                ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
+                dev-center={devCenter}
+                brand={brand}
+                empty-state-message={emptyStateMessage}
+            >
+                <slot name="sidebar-header" slot="version-picker"></slot>
+            </dx-sidebar-old>
+        </template>
+        <template lwc:if={showSidebarPlaceholder}>
+            <div
+                class="sidebar-placeholder is-sticky left-nav-bar"
+                aria-hidden="true"
+            ></div>
+        </template>
         <div class="content-body-doc-phase-container">
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @lwc/lwc/no-document-query */
 import { LightningElement, api, track } from "lwc";
 import { closest } from "kagekiri";
+import { fetchHasResults } from "dxUtils/data360Search";
 import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
@@ -42,6 +43,15 @@ export default class ContentLayout extends LightningElement {
     @api brand: any;
     @api emptyStateMessage?: string;
 
+    @api
+    get enableDataCloudSearch() {
+        return this._enableDataCloudSearch;
+    }
+    set enableDataCloudSearch(value) {
+        this._enableDataCloudSearch = normalizeBoolean(value);
+    }
+    private _enableDataCloudSearch = false;
+
     // This is needed for now to prevent failing snapshot tests due to links in the footer
     @api
     get showFooter() {
@@ -108,9 +118,35 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
+    /** Show Data 360 sidebar only when not using old sidebar and the page has searchable results. */
+    protected get showDataCloudSidebar(): boolean {
+        return (
+            this.enableDataCloudSearch &&
+            !this.useOldSidebar &&
+            this.hasDataCloudResults === true
+        );
+    }
+
+    /** Show legacy sidebar when explicitly requested or when Data 360 has no results. Don't show until we know (avoids flash). */
+    protected get showOldSidebar(): boolean {
+        return (
+            this.useOldSidebar === true ||
+            !this.enableDataCloudSearch ||
+            this.hasDataCloudResults === false
+        );
+    }
+
+    /** Show a space-holding placeholder while we're deciding which sidebar to show (avoids layout shift). */
+    protected get showSidebarPlaceholder(): boolean {
+        return !this.showDataCloudSidebar && !this.showOldSidebar;
+    }
+
     @track
     protected _sidebarContent: unknown;
 
+    @track
+    protected hasDataCloudResults: boolean | null = null;
+
     protected _breadcrumbs = null;
 
     @track
@@ -181,6 +217,11 @@ export default class ContentLayout extends LightningElement {
     }
 
     connectedCallback(): void {
+        if (this.enableDataCloudSearch && !this.useOldSidebar) {
+            fetchHasResults().then((hasResults: boolean) => {
+                this.hasDataCloudResults = hasResults;
+            });
+        }
         const hasParentHighlightListener = closest(
             "doc-xml-content",
             this.template.host
@@ -257,7 +298,9 @@ export default class ContentLayout extends LightningElement {
         We have to account for the global nav changing height due to animations.
     */
     adjustNavPosition = () => {
-        const sidebarEl = this.template.querySelector("dx-sidebar-old");
+        const sidebarEl =
+            this.template.querySelector("dx-sidebar") ||
+            this.template.querySelector("dx-sidebar-old");
         const globalNavEl = document.querySelector(
             "hgf-c360nav"
         ) as HTMLElement;

package/src/modules/doc/localeBanner/localeBanner.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/src/modules/doc/localeBanner/localeBanner.html

@@ -0,0 +1,9 @@
+<template>
+    <doc-banner
+        message={bannerMessage}
+        button-label={bannerButtonLabel}
+        button-href={bannerButtonHref}
+        secondary-label={bannerSecondaryLabel}
+        dismiss-storage-key={dismissStorageKey}
+    ></doc-banner>
+</template>

package/src/modules/doc/localeBanner/localeBanner.ts

@@ -0,0 +1,195 @@
+import { LightningElement, api } from "lwc";
+
+interface LocaleStrings {
+    messageText: string;
+    linkUrl: string;
+    linkText: string;
+    buttonLabel: string;
+    secondaryLabel: string;
+}
+
+const DEFAULT_LOCALE = "en-us";
+
+const LOCALE_STRINGS: Record<string, LocaleStrings> = {
+    "en-us": {
+        messageText:
+            "This text has been translated using Salesforce machine translation system. More details {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1",
+        linkText: "here",
+        buttonLabel: "Switch to English",
+        secondaryLabel: "Not Now"
+    },
+    "ja-jp": {
+        messageText:
+            "この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細は{link}をご参照ください。",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=ja",
+        linkText: "こちら",
+        buttonLabel: "英語に切り替える",
+        secondaryLabel: "今はしません"
+    },
+    "zh-cn": {
+        messageText:
+            "此文本已使用 Salesforce 机器翻译系统进行翻译。如需了解更多详情，请点击{link}。",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=zh_CN",
+        linkText: "此处",
+        buttonLabel: "切换为英语",
+        secondaryLabel: "而非现在"
+    },
+    "zh-tw": {
+        messageText:
+            "此文已使用 Salesforce 機器翻譯系統翻譯。更多詳細資料請參見{link}。",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=zh_TW",
+        linkText: "此處",
+        buttonLabel: "切換至英文",
+        secondaryLabel: "不要現在"
+    },
+    "fr-fr": {
+        messageText:
+            "Ce texte a été traduit à l’aide du système de traduction automatique de Salesforce. Plus de détails, consultez {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=fr",
+        linkText: "cette page",
+        buttonLabel: "Basculer vers la page en anglais",
+        secondaryLabel: "Pas maintenant"
+    },
+    "de-de": {
+        messageText:
+            "Dieser Text wurde mit dem maschinellen Übersetzungssystem von Salesforce übersetzt. Weitere Details finden Sie {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=de",
+        linkText: "hier",
+        buttonLabel: "Zu Englisch wechseln",
+        secondaryLabel: "Nicht jetzt"
+    },
+    "it-it": {
+        messageText:
+            "Questo testo è stato tradotto utilizzando il sistema di traduzione automatica di Salesforce. Ulteriori dettagli sono disponibili {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=it",
+        linkText: "qui",
+        buttonLabel: "Passa all'inglese",
+        secondaryLabel: "Non ora"
+    },
+    "ko-kr": {
+        messageText:
+            "본 텍스트는 Salesforce 기계 번역 시스템으로 번역되었습니다. 자세한 내용은 {link}를 참조하세요.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=ko",
+        linkText: "여기",
+        buttonLabel: "영어로 전환",
+        secondaryLabel: "지금 안 함"
+    },
+    "pt-br": {
+        messageText:
+            "Este texto foi traduzido pelo sistema de tradução automática da Salesforce. Mais detalhes {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=pt_BR",
+        linkText: "aqui",
+        buttonLabel: "Alternar para inglês",
+        secondaryLabel: "Agora não"
+    },
+    "es-mx": {
+        messageText:
+            "Este texto se tradujo con el sistema de traducción automática de Salesforce. Obtenga más detalles {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=es_MX",
+        linkText: "aquí",
+        buttonLabel: "Cambiar a inglés",
+        secondaryLabel: "Ahora no"
+    },
+    "es-es": {
+        messageText:
+            "Este texto se ha traducido utilizando un sistema de traducción automática de Salesforce. Más información {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=es",
+        linkText: "aquí",
+        buttonLabel: "Cambiar a inglés",
+        secondaryLabel: "Ahora no"
+    },
+    "ru-ru": {
+        messageText:
+            "Данный текст был переведен при помощи системы машинного перевода Salesforce. Дополнительные сведения см. {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=ru",
+        linkText: "здесь",
+        buttonLabel: "Переключить на английский",
+        secondaryLabel: "Не сейчас"
+    },
+    "fi-fi": {
+        messageText:
+            "Tämä teksti on käännetty Salesforcen konekäännösjärjestelmän avulla. Katso lisätietoja {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=fi",
+        linkText: "täältä",
+        buttonLabel: "Vaihda englantiin",
+        secondaryLabel: "Ei nyt"
+    },
+    "da-dk": {
+        messageText:
+            "Denne tekst er oversat ved hjælp af Salesforce-maskinoversættelsessystem. Du finder flere detaljer {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=da",
+        linkText: "her",
+        buttonLabel: "Skift til engelsk",
+        secondaryLabel: "Ikke nu"
+    },
+    "sv-se": {
+        messageText:
+            "Den här texten har översatts med Salesforces maskinöversättningssystem. Mer information {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=sv",
+        linkText: "här",
+        buttonLabel: "Byt till engelska",
+        secondaryLabel: "Inte nu"
+    },
+    "nl-nl": {
+        messageText:
+            "Deze tekst werd vertaald aan de hand van het systeem voor automatische vertaling van Salesforce. U vindt {link} meer details.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=nl_NL",
+        linkText: "hier",
+        buttonLabel: "Overschakelen op Engels",
+        secondaryLabel: "Niet nu"
+    },
+    "nb-no": {
+        messageText:
+            "Denne teksten er oversatt med Salesforce maskinoversettingssystem. Flere detaljer {link}.",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?id=000396076&type=1&language=no",
+        linkText: "her",
+        buttonLabel: "Bytt til engelsk",
+        secondaryLabel: "Ikke nå"
+    }
+};
+
+export default class LocaleBanner extends LightningElement {
+    @api locale = DEFAULT_LOCALE;
+    @api targetHref = "";
+    @api dismissStorageKey = "";
+
+    get localeData(): LocaleStrings {
+        return LOCALE_STRINGS[this.locale] || LOCALE_STRINGS[DEFAULT_LOCALE];
+    }
+
+    get bannerMessage(): string {
+        const data = this.localeData;
+        const link = `<a href="${data.linkUrl}">${data.linkText}</a>`;
+        return data.messageText.replace("{link}", link);
+    }
+
+    get bannerButtonLabel(): string {
+        return this.localeData.buttonLabel;
+    }
+
+    get bannerButtonHref(): string {
+        return this.targetHref;
+    }
+
+    get bannerSecondaryLabel(): string {
+        return this.localeData.secondaryLabel;
+    }
+}

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -1,6 +1,7 @@
 <template>
     <div class="content">
         <dx-sidebar-old
+            lwc:if={useOldSidebar}
             class="is-sticky left-nav-bar"
             trees={sidebarContent}
             value={sidebarValue}
@@ -15,6 +16,16 @@
         >
             <slot name="sidebar-header" slot="version-picker"></slot>
         </dx-sidebar-old>
+        <dx-sidebar
+            lwc:else
+            class="is-sticky left-nav-bar"
+            trees={sidebarContent}
+            value={sidebarValue}
+            header={sidebarHeader}
+            ontogglesidebar={onToggleSidebar}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar>
         <div class="content-body-doc-phase-container">
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>
@@ -57,7 +68,10 @@
                 </div>
             </div>
             <div lwc:if={showFooter} class="footer-container">
-                <dx-footer variant="no-signup" mfe-config-origin={effectiveFooterOrigin}></dx-footer>
+                <dx-footer
+                    variant="no-signup"
+                    mfe-config-origin={effectiveFooterOrigin}
+                ></dx-footer>
             </div>
         </div>
     </div>

package/src/modules/doc/redocReference/redocReference.ts

@@ -212,7 +212,8 @@ export default class RedocReference extends LightningElement {
             const currentUrl = window.location;
             const existingParams = currentUrl.search + currentUrl.hash;
 
-            window.history.pushState(
+            // Use replaceState to avoid creating a new history entry when the user visits /references without any reference ID
+            window.history.replaceState(
                 {},
                 "",
                 `${parentReferencePath}${existingParams}`
@@ -348,7 +349,10 @@ export default class RedocReference extends LightningElement {
     // Appends footer component to container
     private insertFooter(container: HTMLElement): void {
         const footerElement = createElement("dx-footer", { is: DxFooter });
-        Object.assign(footerElement, { variant: "no-signup", mfeConfigOrigin: this.effectiveFooterOrigin });
+        Object.assign(footerElement, {
+            variant: "no-signup",
+            mfeConfigOrigin: this.effectiveFooterOrigin
+        });
         container.appendChild(footerElement);
     }
 

package/src/modules/doc/xmlContent/xmlContent.html

@@ -2,6 +2,7 @@
     <doc-content-layout
         lwc:if={displayContent}
         lwc:ref="docContentLayout"
+        enable-data-cloud-search
         sidebar-header={docTitle}
         sidebar-content={sidebarContent}
         sidebar-value={sidebarValue}
@@ -53,7 +54,7 @@
     </doc-content-layout>
     <div lwc:if={display404}>
         <dx-error
-            image="https://developer.salesforce.com/ns-assets/images/404.svg"
+            image="https://developer.salesforce.com/ns-assets/404.svg"
             code="404"
             header="Beep boop. That did not compute."
             subtitle="The document you're looking for doesn't seem to exist."

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -254,17 +254,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.pageReference.deliverable;
     }
 
-    private get useOldSidebar(): boolean {
-        // Coveo is enabled and the version is greater than  51 (within the latest 3 versions)
-        // TODO: we need a better fix for version number check
-        return !(
-            !this.version?.releaseVersion ||
-            (this.version?.releaseVersion &&
-                parseInt(this.version.releaseVersion.replace("v", ""), 10) >=
-                    53)
-        );
-    }
-
     private get pageHeader(): Header {
         if (!this._pageHeader) {
             this._pageHeader = document.querySelector("doc-header")!;
@@ -322,8 +311,10 @@ export default class DocXmlContent extends LightningElementWithState<{
         };
     }
 
-    private handlePopState = (event: PopStateEvent): void =>
+    private handlePopState = (event: PopStateEvent): void => {
         this.updatePageReference(this.getReferenceFromUrl(), event);
+        this.handleLocaleReload();
+    };
 
     handleDismissVersionBanner() {
         this.showVersionBanner = false;
@@ -598,6 +589,31 @@ export default class DocXmlContent extends LightningElementWithState<{
             "docs",
             this.pageReferenceToString(this.pageReference)
         );
+        this.handleLocaleReload();
+    }
+
+    /* This method reloads the page as locale banner context is not available in developer-website. */
+    private handleLocaleReload(): void {
+        const targetLocale = this.language?.id;
+        if (!targetLocale) {
+            return;
+        }
+
+        const currentPath = window.location.pathname;
+        const localePattern = /atlas\.[a-z]{2}-[a-z]{2}\./;
+
+        if (localePattern.test(currentPath)) {
+            const newPath = currentPath.replace(
+                localePattern,
+                `atlas.${targetLocale}.`
+            );
+            const newUrl =
+                window.location.origin +
+                newPath +
+                window.location.search +
+                window.location.hash;
+            window.location.href = newUrl;
+        }
     }
 
     private updateHighlighting(searchParam: string): void {