@salesforcedevs/docs-components 1.27.22-banner-2 → 1.27.22-banner-6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.27.22-banner-2",
+    "version": "1.27.22-banner-6",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "c959551dac6b9344903bfe83fc5d38d17bf5989f"
+    "gitHead": "7c2d0518bbabd8ad478bcbca57641b8e7982363a"
 }

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

@@ -4,168 +4,190 @@
 :host {
     display: block;
 
-    --doc-banner-bg: var(--neutral-90, #e5e5e5);
-    --doc-banner-height: 44px;
-    --doc-banner-padding-x-left: 40px;
+    --doc-banner-padding-x-left: var(--dx-g-spacing-2xl);
     --doc-banner-padding-x-right: var(--dx-g-spacing-lg);
-    --doc-banner-icon-size: 18.4615px;
+    --doc-banner-info-icon-outer-size: var(--dx-g-icon-size-lg-b);
+    --doc-banner-info-icon-size: var(--dx-g-icon-size-lg);
+    --doc-banner-bar-min-height: calc(
+        var(--dx-g-spacing-3xl) - var(--dx-g-spacing-xs)
+    );
+    --doc-banner-close-wrap-width: calc(
+        var(--doc-banner-bar-min-height) + var(--dx-g-spacing-xs)
+    );
     --doc-banner-icon-frame-width: calc(
-        var(--doc-banner-padding-x-left) + var(--doc-banner-icon-size) +
-            var(--dx-g-spacing-sm)
+        var(--doc-banner-padding-x-left) +
+            var(--doc-banner-info-icon-outer-size) + var(--dx-g-spacing-sm)
+    );
+    --doc-banner-close-color: var(--dx-g-gray-50);
+    --doc-banner-text-vertical-padding: calc(
+        (var(--dx-g-spacing-xs) + var(--dx-g-spacing-sm)) / 2
     );
-    --doc-banner-close-color: #747474;
-    --doc-banner-primary-bg: #0176d3;
-    --doc-banner-primary-bg-hover: #0160b3;
 }
 
-.doc-notification-bar {
+:host > div {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     width: 100%;
     margin: 0;
-    min-height: var(--doc-banner-height);
+    min-height: var(--doc-banner-bar-min-height);
     padding: 0 var(--doc-banner-padding-x-right) 0
         var(--doc-banner-padding-x-left);
-    background: var(--doc-banner-bg);
+    background: var(--dx-g-gray-90);
     box-sizing: border-box;
 }
 
-.doc-notification-bar .icon-wrap,
-.doc-notification-bar .main,
-.doc-notification-bar .content,
-.doc-notification-bar .actions,
-.doc-notification-bar .close-wrap {
+.icon-wrap,
+.main,
+.content,
+.actions,
+.close-wrap {
     display: flex;
     align-items: center;
 }
 
-.doc-notification-bar .icon-wrap,
-.doc-notification-bar .close-wrap {
+.icon-wrap,
+.close-wrap {
     flex-shrink: 0;
 }
 
-.doc-notification-bar .main {
+.main {
     flex: 1 1 0;
     min-width: 0;
     align-self: flex-start;
-    padding: 6px 0;
+    padding: var(--doc-banner-text-vertical-padding) 0;
     gap: var(--dx-g-spacing-md);
+    flex-wrap: wrap;
 }
 
-.doc-notification-bar .icon-wrap {
-    width: calc(var(--doc-banner-icon-size) + var(--dx-g-spacing-sm));
-    min-height: 32px;
+.icon-wrap {
+    width: calc(
+        var(--doc-banner-info-icon-outer-size) + var(--dx-g-spacing-sm)
+    );
+    min-height: var(--dx-g-spacing-xl);
     align-self: flex-start;
     justify-content: flex-start;
     align-items: flex-start;
 }
 
-.doc-notification-bar .icon-wrap dx-icon {
-    --dx-c-icon-size: var(--doc-banner-icon-size);
+.icon-wrap dx-icon {
+    --dx-c-icon-size: var(--doc-banner-info-icon-size);
 
-    width: var(--doc-banner-icon-size);
-    height: var(--doc-banner-icon-size);
-    padding: 12px 8px 0 0;
-    box-sizing: content-box;
+    width: var(--doc-banner-info-icon-size);
+    height: var(--doc-banner-info-icon-size);
+    margin: calc(var(--dx-g-spacing-sm) + var(--dx-g-spacing-xs))
+        var(--dx-g-spacing-sm) 0 0;
 }
 
-.doc-notification-bar .content {
+.content {
     flex: 0 1 auto;
     min-width: 0;
     max-width: 100%;
-    min-height: 32px;
+    min-height: var(--dx-g-spacing-xl);
     align-items: flex-start;
     gap: var(--dx-g-spacing-sm);
 }
 
-.doc-notification-bar .message {
+.message {
     margin: 0;
-    padding: 6px 0;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    color: var(--dx-g-neutral-30, #444);
+    padding: var(--doc-banner-text-vertical-padding) 0;
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-normal);
+    line-height: var(--doc-banner-info-icon-size);
+    color: var(--dx-g-gray-30);
 }
 
-.doc-notification-bar .message a {
+.message a {
     color: var(--dx-g-cloud-blue-vibrant-50);
     text-decoration: underline;
 }
 
-.doc-notification-bar .message a:hover {
+.message a:hover {
     opacity: 0.9;
 }
 
-.doc-notification-bar .actions {
+.actions {
     flex-shrink: 0;
-    min-height: 32px;
+    min-height: var(--dx-g-spacing-xl);
     gap: var(--dx-g-spacing-smd);
     flex-wrap: wrap;
 }
 
-.doc-notification-bar .primary-btn {
-    --dx-c-button-primary-color: var(--doc-banner-primary-bg);
-    --dx-c-button-primary-color-hover: var(--doc-banner-primary-bg-hover);
+.primary-btn {
+    --dx-c-button-primary-color: var(--dx-g-cloud-blue-vibrant-50);
+    --dx-c-button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-40);
     --dx-c-button-vertical-spacing: 0;
     --dx-c-button-horizontal-spacing: var(--dx-g-spacing-md);
 
-    min-width: min(144px, 100%);
-    height: 32px;
+    min-width: min(
+        calc(var(--dx-g-spacing-5xl) + var(--dx-g-spacing-3xl)),
+        100%
+    );
+    height: var(--dx-g-spacing-xl);
     border-radius: var(--dx-g-spacing-xs);
 }
 
-.doc-notification-bar .primary-btn::part(container) {
-    min-width: min(144px, 100%);
+.primary-btn::part(container) {
+    min-width: min(
+        calc(var(--dx-g-spacing-5xl) + var(--dx-g-spacing-3xl)),
+        100%
+    );
     width: 100%;
-    height: 32px;
+    height: var(--dx-g-spacing-xl);
     padding: 0 var(--dx-g-spacing-md);
     border-radius: var(--dx-g-spacing-xs);
 }
 
-.doc-notification-bar .secondary-btn {
-    font-weight: var(--dx-g-font-normal);
-}
-
-.doc-notification-bar .close-wrap {
+.close-wrap {
     align-self: flex-start;
     justify-content: center;
     align-items: center;
-    width: 52px;
-    height: 44px;
-    padding: 12px 8px 18px;
+    width: var(--doc-banner-close-wrap-width);
+    height: var(--doc-banner-bar-min-height);
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-sm)
+        var(--dx-g-spacing-md);
     margin-left: auto;
     box-sizing: border-box;
+    cursor: pointer;
 }
 
-.doc-notification-bar .close-wrap .close-btn {
+.close-wrap .close-btn {
     width: 100%;
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    box-sizing: border-box;
+    padding: 2.9038px 0 0 2.9038px;
 
+    --dx-c-icon-size: var(--dx-g-icon-size-sm);
     --dx-c-button-custom-color: var(--doc-banner-close-color);
     --dx-c-button-custom-color-hover: var(--doc-banner-close-color);
     --dx-c-button-custom-background: transparent;
     --dx-c-button-custom-background-hover: rgb(0 0 0 / 5%);
-    --dx-c-button-custom-border: none;
-    --dx-c-button-custom-border-hover: none;
+    --dx-c-button-custom-border: 1px solid transparent;
+    --dx-c-button-custom-border-hover: 1px solid transparent;
 }
 
 @media (max-width: 1279px) {
     :host {
-        --doc-banner-padding-x-left: 32px;
+        --doc-banner-padding-x-left: var(--dx-g-spacing-xl);
         --doc-banner-padding-x-right: var(--dx-g-spacing-md);
     }
 
-    .doc-notification-bar {
+    :host > div {
         position: relative;
         max-width: 100%;
-        min-height: 78px;
+        min-height: calc(
+            var(--doc-banner-bar-min-height) + var(--dx-g-spacing-xl)
+        );
         flex-wrap: wrap;
         align-content: space-between;
         padding: 0 var(--doc-banner-padding-x-right) 0 0;
     }
 
-    .doc-notification-bar .icon-wrap {
+    .icon-wrap {
         position: absolute;
         left: 0;
         top: 0;
@@ -176,23 +198,23 @@
         order: 0;
     }
 
-    .doc-notification-bar .main {
+    .main {
         order: 1;
         flex-wrap: wrap;
         margin-left: var(--doc-banner-icon-frame-width);
         gap: var(--dx-g-spacing-2xs);
     }
 
-    .doc-notification-bar .content {
+    .content {
         order: 0;
     }
 
-    .doc-notification-bar .close-wrap {
+    .close-wrap {
         order: 2;
-        min-height: 44px;
+        min-height: var(--doc-banner-bar-min-height);
     }
 
-    .doc-notification-bar .actions {
+    .actions {
         order: 1;
         flex: 0 0 100%;
         width: 100%;
@@ -201,11 +223,11 @@
 
 @media (max-width: 768px) {
     :host {
-        --doc-banner-padding-x-left: 24px;
+        --doc-banner-padding-x-left: var(--dx-g-spacing-lg);
         --doc-banner-padding-x-right: var(--dx-g-spacing-sm);
     }
 
-    .doc-notification-bar {
-        min-height: 44px;
+    :host > div {
+        min-height: var(--doc-banner-bar-min-height);
     }
 }

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

@@ -2,7 +2,12 @@
     <template lwc:if={showBanner}>
         <div class="doc-notification-bar" part="container">
             <div class="icon-wrap" part="icon-wrap">
-                <dx-icon symbol="info" part="icon" color="#747474"></dx-icon>
+                <dx-icon
+                    symbol="info"
+                    size="override"
+                    part="icon"
+                    color={iconColor}
+                ></dx-icon>
             </div>
             <div class="main" part="main">
                 <div class="content" part="content">
@@ -45,14 +50,23 @@
                 </div>
             </div>
             <template lwc:if={showCloseButton}>
-                <div class="close-wrap" part="close-wrap">
+                <div
+                    class="close-wrap"
+                    part="close-wrap"
+                    role="button"
+                    tabindex="0"
+                    aria-label="Close"
+                    onclick={handleCloseClick}
+                    onkeydown={handleCloseKeydown}
+                >
                     <dx-button
                         class="close-btn"
                         variant="icon-only"
                         icon-symbol="close"
-                        icon-color="#747474"
-                        aria-label="Close"
-                        onclick={handleCloseClick}
+                        icon-size="override"
+                        icon-color={iconColor}
+                        aria-hidden="true"
+                        tabindex="-1"
                         part="close"
                     ></dx-button>
                 </div>

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

@@ -3,14 +3,17 @@ import { normalizeBoolean } from "dxUtils/normalizers";
 
 const LOCALE_BANNER_STORAGE_PREFIX = "dsc-doc-locale-banner-dismissed-";
 
+const DEFAULT_MESSAGE_TEXT = "This page was machine-translated ";
+const DEFAULT_BUTTON_LABEL = "Switch to English";
+
 export default class Banner extends LightningElement {
-    @api messageText = "";
+    @api messageText = DEFAULT_MESSAGE_TEXT;
 
     @api messageLinkUrl = "";
 
     @api messageLinkText = "here";
 
-    @api buttonLabel = "";
+    @api buttonLabel = DEFAULT_BUTTON_LABEL;
 
     @api buttonHref = "";
 
@@ -18,7 +21,7 @@ export default class Banner extends LightningElement {
 
     @api dismissStorageKey = "";
 
-    _showCloseButton = false;
+    _showCloseButton = true;
 
     @api
     get showCloseButton(): boolean {
@@ -34,19 +37,16 @@ export default class Banner extends LightningElement {
         if (
             this.dismissStorageKey &&
             typeof window !== "undefined" &&
-            window.localStorage
+            window.sessionStorage
         ) {
             this._dismissed =
-                window.localStorage.getItem(
+                window.sessionStorage.getItem(
                     `${LOCALE_BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`
                 ) === "true";
         }
     }
 
     get showBanner(): boolean {
-        if (!this.dismissStorageKey) {
-            return true;
-        }
         return !this._dismissed;
     }
 
@@ -62,13 +62,17 @@ export default class Banner extends LightningElement {
         return !!this.secondaryLabel;
     }
 
+    get iconColor(): string {
+        return "gray-50";
+    }
+
     persistDismissAndHide() {
         if (
             this.dismissStorageKey &&
             typeof window !== "undefined" &&
-            window.localStorage
+            window.sessionStorage
         ) {
-            window.localStorage.setItem(
+            window.sessionStorage.setItem(
                 `${LOCALE_BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`,
                 "true"
             );
@@ -79,14 +83,27 @@ export default class Banner extends LightningElement {
     handleSecondaryClick() {
         this.persistDismissAndHide();
         this.dispatchEvent(
-            new CustomEvent("dismiss", { bubbles: true, composed: true })
+            new CustomEvent("dismissLocaleBanner", {
+                bubbles: true,
+                composed: true
+            })
         );
     }
 
     handleCloseClick() {
         this.persistDismissAndHide();
         this.dispatchEvent(
-            new CustomEvent("dismiss", { bubbles: true, composed: true })
+            new CustomEvent("dismissLocaleBanner", {
+                bubbles: true,
+                composed: true
+            })
         );
     }
+
+    handleCloseKeydown(event: KeyboardEvent) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.handleCloseClick();
+        }
+    }
 }

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

@@ -1,88 +1,76 @@
 <template>
-    <div class={contentClass}>
-        <template lwc:if={showLocaleBannerAbove}>
-            <div class="locale-notification-wrapper">
-                <slot name="locale-banner"></slot>
+    <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>
+        <div class="content-body-doc-phase-container">
+            <div class="doc-phase-wrapper">
+                <slot name="doc-phase"></slot>
             </div>
-        </template>
-        <div class="content-columns">
-            <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>
-            <div class="content-body-doc-phase-container">
-                <template lwc:if={showLocaleBannerInColumn}>
-                    <div class="locale-notification-wrapper">
-                        <slot name="locale-banner"></slot>
+            <div class="version-wrapper">
+                <slot name="version-banner"></slot>
+            </div>
+            <div class="content-body-container">
+                <div class="content-body">
+                    <div class="breadcrumb-row" lwc:if={showBreadcrumbs}>
+                        <doc-breadcrumbs
+                            breadcrumbs={breadcrumbs}
+                        ></doc-breadcrumbs>
                     </div>
-                </template>
-                <div class="doc-phase-wrapper">
-                    <slot name="doc-phase"></slot>
-                </div>
-                <div class="version-wrapper">
-                    <slot name="version-banner"></slot>
-                </div>
-                <div class="content-body-container">
-                    <div class="content-body">
-                        <div class="breadcrumb-row" lwc:if={showBreadcrumbs}>
-                            <doc-breadcrumbs
-                                breadcrumbs={breadcrumbs}
-                            ></doc-breadcrumbs>
-                        </div>
-                        <div class="read" lwc:if={showReadingTime}>
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="18"
-                                height="18"
-                                viewBox="0 0 52 52"
-                            >
-                                <g fill="#3e3e3c">
-                                    <path
-                                        d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
-                                    ></path>
-                                </g>
-                            </svg>
-                            {readingTime} minute read
-                        </div>
-                        <div class="share-below-read" lwc:if={showSocialShare}>
-                            <doc-social-share
-                                title={shareTitle}
-                                url={shareUrl}
-                                twitter-via={shareTwitterVia}
-                            ></doc-social-share>
-                        </div>
-                        <slot onslotchange={onSlotChange}></slot>
-                        <doc-sprig-survey
-                            lwc:if={shouldDisplayFeedback}
-                        ></doc-sprig-survey>
+                    <div class="read" lwc:if={showReadingTime}>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="18"
+                            height="18"
+                            viewBox="0 0 52 52"
+                        >
+                            <g fill="#3e3e3c">
+                                <path
+                                    d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
+                                ></path>
+                            </g>
+                        </svg>
+                        {readingTime} minute read
                     </div>
-                    <div lwc:if={showToc} class="right-nav-bar is-sticky">
-                        <dx-toc
-                            header={tocTitle}
-                            options={tocOptions}
-                            value={tocValue}
-                        ></dx-toc>
+                    <div class="share-below-read" lwc:if={showSocialShare}>
+                        <doc-social-share
+                            title={shareTitle}
+                            url={shareUrl}
+                            twitter-via={shareTwitterVia}
+                        ></doc-social-share>
                     </div>
+                    <slot onslotchange={onSlotChange}></slot>
+                    <doc-sprig-survey
+                        lwc:if={shouldDisplayFeedback}
+                    ></doc-sprig-survey>
                 </div>
-                <div lwc:if={showFooter} class="footer-container">
-                    <dx-footer
-                        variant="no-signup"
-                        mfe-config-origin={effectiveFooterOrigin}
-                    ></dx-footer>
+                <div lwc:if={showToc} class="right-nav-bar is-sticky">
+                    <dx-toc
+                        header={tocTitle}
+                        options={tocOptions}
+                        value={tocValue}
+                    ></dx-toc>
                 </div>
             </div>
+            <div lwc:if={showFooter} class="footer-container">
+                <dx-footer
+                    variant="no-signup"
+                    mfe-config-origin={effectiveFooterOrigin}
+                ></dx-footer>
+            </div>
         </div>
     </div>
 </template>

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

@@ -42,8 +42,6 @@ export default class ContentLayout extends LightningElement {
     @api brand: any;
     @api emptyStateMessage?: string;
 
-    @api showLocaleBannerAbove = false;
-
     // This is needed for now to prevent failing snapshot tests due to links in the footer
     @api
     get showFooter() {
@@ -126,16 +124,6 @@ export default class ContentLayout extends LightningElement {
     protected contentLoaded: boolean = false;
     protected sidebarOpen: boolean = false;
 
-    get contentClass() {
-        return this.showLocaleBannerAbove
-            ? "content content-banner-above"
-            : "content";
-    }
-
-    get showLocaleBannerInColumn() {
-        return !this.showLocaleBannerAbove;
-    }
-
     get shouldDisplayFeedback() {
         return this.contentLoaded && typeof Sprig !== "undefined";
     }

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

@@ -57,7 +57,10 @@
                 </div>
             </div>
             <div lwc:if={showFooter} class="footer-container">
-                <dx-footer variant="no-signup"></dx-footer>
+                <dx-footer
+                    variant="no-signup"
+                    mfe-config-origin={effectiveFooterOrigin}
+                ></dx-footer>
             </div>
         </div>
     </div>

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -1,3 +1,4 @@
+import { api } from "lwc";
 import ContentLayout from "doc/contentLayout";
 import cx from "classnames";
 
@@ -15,6 +16,16 @@ export default class LwcContentLayout extends ContentLayout {
     private allTabsCache: any[] | null = null;
     private mainSlotCache: any = null;
 
+    /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
+    @api origin: string | null = null;
+
+    /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
+    get effectiveFooterOrigin(): string {
+        return (
+            this.origin ?? `${window.location.origin}/developer/en-us/wp-json`
+        );
+    }
+
     private setRNBByTab() {
         const tabPanelListItem = this.getTabPanelList();
         this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;

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

@@ -68,6 +68,16 @@ export default class RedocReference extends LightningElement {
         this._parentDocPhaseInfo = value;
     }
 
+    /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
+    @api origin: string | null = null;
+
+    /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
+    get effectiveFooterOrigin(): string {
+        return (
+            this.origin ?? `${window.location.origin}/developer/en-us/wp-json`
+        );
+    }
+
     connectedCallback(): void {
         window.addEventListener("scroll", this.handleScrollAndResize);
         window.addEventListener("resize", this.handleScrollAndResize);
@@ -338,7 +348,7 @@ 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" });
+        Object.assign(footerElement, { variant: "no-signup", mfeConfigOrigin: this.effectiveFooterOrigin });
         container.appendChild(footerElement);
     }
 

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

@@ -14,20 +14,7 @@
         show-footer={enableFooter}
         reading-time={computedReadingTime}
         origin={origin}
-        show-locale-banner-above={showLocaleBannerInSlot}
     >
-        <doc-banner
-            slot="locale-banner"
-            lwc:if={showLocaleBannerInSlot}
-            message-text="This text was translated using Salesforce's machine translation system. More details can be found "
-            message-link-url="https://help.salesforce.com/s/articleView?id=sf.machine_translation.htm"
-            message-link-text="here"
-            button-label="Switch to English"
-            button-href={localeBannerEnUsHref}
-            secondary-label="Not Now"
-            show-close-button="true"
-            dismiss-storage-key={deliverable}
-        ></doc-banner>
         <doc-phase
             slot="version-banner"
             lwc:if={showVersionBanner}

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

@@ -254,39 +254,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.pageReference.deliverable;
     }
 
-    private get showLocaleBannerInSlot(): boolean {
-        return this.shouldShowLocaleBanner;
-    }
-
-    private get shouldShowLocaleBanner(): boolean {
-        if (!this.pageReference?.deliverable) {
-            return false;
-        }
-        if (!this.language || this.language.id === "en-us") {
-            return false;
-        }
-        const hasEnUs = this.availableLanguages?.some(
-            (lang: DocLanguage) => lang.id === "en-us"
-        );
-        return !!hasEnUs;
-    }
-
-    private get localeBannerEnUsHref(): string {
-        if (!this.pageReference) {
-            return "";
-        }
-        const enUsLanguage = this.availableLanguages?.find(
-            (lang: DocLanguage) => lang.id === "en-us"
-        );
-        if (!enUsLanguage) {
-            return "";
-        }
-        return this.pageReferenceToString({
-            ...this.pageReference,
-            docId: enUsLanguage.url
-        });
-    }
-
     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

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -86,21 +86,6 @@ dx-toc {
     position: relative;
 }
 
-.content-banner-above {
-    flex-direction: column;
-}
-
-.locale-notification-wrapper {
-    flex-shrink: 0;
-    width: 100%;
-}
-
-.content-columns {
-    display: flex;
-    flex: 1;
-    min-width: 0;
-}
-
 .content-body-doc-phase-container {
     flex: 1;
     border-left: 1px solid var(--dx-g-gray-90);