@salesforcedevs/docs-components 1.28.0 → 1.28.1-banner-0

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,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.28.0",
+    "version": "1.28.1-banner-0",
     "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": "4027270163b2eb9610b911a09bfa31f536061fe4"
+    "gitHead": "602f3fab502240f4098c97535ee601f1f7a522e5"
 }

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

@@ -0,0 +1,92 @@
+@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);
+    --doc-close-width: calc(var(--dx-g-spacing-3xl) + var(--dx-g-spacing-xs));
+    --doc-close-height: calc(var(--dx-g-spacing-2xl) + var(--dx-g-spacing-xs));
+    --doc-banner-spacing-16px: var(--dx-g-spacing-md);
+}
+
+.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;
+    width: var(--dx-g-icon-size-lg);
+    height: var(--dx-g-icon-size-lg);
+    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(--doc-banner-spacing-16px);
+    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: var(--doc-close-width);
+    height: var(--doc-close-height);
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@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,81 @@
+import { LightningElement, api, track } from "lwc";
+
+const BANNER_STORAGE_PREFIX = "doc-banner-";
+
+export default class Banner extends LightningElement {
+    @api message = "";
+
+    @api buttonLabel = "";
+
+    @api buttonHref = "";
+
+    @api secondaryLabel = "";
+
+    @api dismissStorageKey = "";
+
+    @track private _dismissed = false;
+
+    connectedCallback() {
+        if (
+            this.dismissStorageKey &&
+            typeof window !== "undefined" &&
+            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 &&
+            typeof window !== "undefined" &&
+            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/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,57 @@
+import { LightningElement, api } from "lwc";
+
+interface LocaleStrings {
+    messageText: string;
+    linkUrl: string;
+    linkText: string;
+    buttonLabel: string;
+    secondaryLabel: string;
+}
+
+const LOCALE_STRINGS: Record<string, LocaleStrings> = {
+    "en-us": {
+        messageText:
+            "This text was translated using Salesforce's machine translation system. More details can be found ",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?language=en&id=000396076&type=1",
+        linkText: "here",
+        buttonLabel: "Switch to English",
+        secondaryLabel: "Not Now"
+    },
+    "ja-jp": {
+        messageText:
+            "このテキストは Salesforce の機械翻訳システムを使用して翻訳されました。詳細は ",
+        linkUrl:
+            "https://help.salesforce.com/s/articleView?language=ja&id=000396076&type=1",
+        linkText: "こちら",
+        buttonLabel: "英語に切り替える",
+        secondaryLabel: "後で"
+    }
+};
+
+export default class LocaleBanner extends LightningElement {
+    @api locale = "en-us";
+    @api targetHref = "";
+    @api dismissStorageKey = "";
+
+    get localeData(): LocaleStrings {
+        return LOCALE_STRINGS[this.locale] || LOCALE_STRINGS["en-us"];
+    }
+
+    get bannerMessage(): string {
+        const data = this.localeData;
+        return `${data.messageText}<a href="${data.linkUrl}">${data.linkText}</a>`;
+    }
+
+    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

@@ -57,7 +57,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/xmlContent/xmlContent.ts

@@ -322,8 +322,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 +600,30 @@ export default class DocXmlContent extends LightningElementWithState<{
             "docs",
             this.pageReferenceToString(this.pageReference)
         );
+        this.handleLocaleReload();
+    }
+
+    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 {