@salesforcedevs/docs-components 1.27.22-banner2 → 1.27.22-banner4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.27.22-banner2",
+    "version": "1.27.22-banner4",
     "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": "3dd735922a8212d293900ef0f0ced8d617e77f1d"
+    "gitHead": "32fcf61be8c3868caa09ab6e8e9b353d1f54a287"
 }

package/src/modules/doc/amfReference/amfReference.html

@@ -25,6 +25,18 @@
             lwc:if={docPhaseInfo}
             doc-phase-info={docPhaseInfo}
         ></doc-phase>
+        <doc-banner
+            slot="locale-banner"
+            lwc:if={showLocaleBanner}
+            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/amfReference/amfReference.ts

@@ -51,6 +51,8 @@ export default class AmfReference extends LightningElement {
     @api language!: string;
     @api hideFooter = false;
 
+    @api deliverable = "";
+
     /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer-mfe. */
     @api origin: string | null = null;
     @track navigation = [] as NavigationItem[];
@@ -72,6 +74,18 @@ export default class AmfReference extends LightningElement {
         return this.isSpecBasedReference(this._currentReferenceId);
     }
 
+    get showLocaleBanner(): boolean {
+        if (!this.deliverable || this.language === "en-us") {
+            return false;
+        }
+        return this.languages?.some((l) => l.id === "en-us") ?? false;
+    }
+
+    get localeBannerEnUsHref(): string {
+        const enUs = this.languages?.find((l) => l.id === "en-us");
+        return enUs?.link?.href ?? "";
+    }
+
     @api
     get referenceSetConfig(): ReferenceSetConfig {
         return this._referenceSetConfig;

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

@@ -1,60 +1,62 @@
 <template>
-    <div class="doc-notification-bar" part="container">
-        <div class="icon-wrap" part="icon-wrap">
-            <dx-icon symbol="info" part="icon" color="#747474"></dx-icon>
-        </div>
-        <div class="main" part="main">
-            <div class="content" part="content">
-                <p class="message dx-text-body-4" part="message">
-                    <template lwc:if={messageText}>{messageText}</template>
-                    <template lwc:if={hasMessageLink}>
-                        <a
-                            href={messageLinkUrl}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            part="message-link"
+    <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>
+            </div>
+            <div class="main" part="main">
+                <div class="content" part="content">
+                    <p class="message dx-text-body-4" part="message">
+                        <template lwc:if={messageText}>{messageText}</template>
+                        <template lwc:if={hasMessageLink}>
+                            <a
+                                href={messageLinkUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                part="message-link"
+                            >
+                                {messageLinkText}
+                            </a>
+                        </template>
+                    </p>
+                </div>
+                <div class="actions" part="actions">
+                    <template lwc:if={hasPrimaryButton}>
+                        <dx-button
+                            class="primary-btn"
+                            href={buttonHref}
+                            variant="primary"
+                            size="small"
+                            part="button"
+                        >
+                            {buttonLabel}
+                        </dx-button>
+                    </template>
+                    <template lwc:if={hasSecondaryAction}>
+                        <dx-button
+                            class="secondary-btn"
+                            variant="inline"
+                            onclick={handleSecondaryClick}
+                            part="secondary"
                         >
-                            {messageLinkText}
-                        </a>
+                            {secondaryLabel}
+                        </dx-button>
                     </template>
-                </p>
+                </div>
             </div>
-            <div class="actions" part="actions">
-                <template lwc:if={hasPrimaryButton}>
+            <template lwc:if={showCloseButton}>
+                <div class="close-wrap" part="close-wrap">
                     <dx-button
-                        class="primary-btn"
-                        href={buttonHref}
-                        variant="primary"
-                        size="small"
-                        part="button"
-                    >
-                        {buttonLabel}
-                    </dx-button>
-                </template>
-                <template lwc:if={hasSecondaryAction}>
-                    <dx-button
-                        class="secondary-btn"
-                        variant="inline"
-                        onclick={handleSecondaryClick}
-                        part="secondary"
-                    >
-                        {secondaryLabel}
-                    </dx-button>
-                </template>
-            </div>
+                        class="close-btn"
+                        variant="icon-only"
+                        icon-symbol="close"
+                        icon-color="#747474"
+                        aria-label="Close"
+                        onclick={handleCloseClick}
+                        part="close"
+                    ></dx-button>
+                </div>
+            </template>
         </div>
-        <template lwc:if={showCloseButton}>
-            <div class="close-wrap" part="close-wrap">
-                <dx-button
-                    class="close-btn"
-                    variant="icon-only"
-                    icon-symbol="close"
-                    icon-color="#747474"
-                    aria-label="Close"
-                    onclick={handleCloseClick}
-                    part="close"
-                ></dx-button>
-            </div>
-        </template>
-    </div>
+    </template>
 </template>

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

@@ -1,6 +1,8 @@
-import { LightningElement, api } from "lwc";
+import { LightningElement, api, track } from "lwc";
 import { normalizeBoolean } from "dxUtils/normalizers";
 
+const LOCALE_BANNER_STORAGE_PREFIX = "dsc-doc-locale-banner-dismissed-";
+
 export default class Banner extends LightningElement {
     @api messageText = "";
 
@@ -14,6 +16,8 @@ export default class Banner extends LightningElement {
 
     @api secondaryLabel = "";
 
+    @api dismissStorageKey = "";
+
     _showCloseButton = false;
 
     @api
@@ -24,6 +28,28 @@ export default class Banner extends LightningElement {
         this._showCloseButton = normalizeBoolean(value);
     }
 
+    @track private _dismissed = false;
+
+    connectedCallback() {
+        if (
+            this.dismissStorageKey &&
+            typeof window !== "undefined" &&
+            window.localStorage
+        ) {
+            this._dismissed =
+                window.localStorage.getItem(
+                    `${LOCALE_BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`
+                ) === "true";
+        }
+    }
+
+    get showBanner(): boolean {
+        if (!this.dismissStorageKey) {
+            return true;
+        }
+        return !this._dismissed;
+    }
+
     get hasMessageLink(): boolean {
         return !!this.messageLinkUrl;
     }
@@ -36,13 +62,29 @@ export default class Banner extends LightningElement {
         return !!this.secondaryLabel;
     }
 
+    persistDismissAndHide() {
+        if (
+            this.dismissStorageKey &&
+            typeof window !== "undefined" &&
+            window.localStorage
+        ) {
+            window.localStorage.setItem(
+                `${LOCALE_BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`,
+                "true"
+            );
+        }
+        this._dismissed = true;
+    }
+
     handleSecondaryClick() {
+        this.persistDismissAndHide();
         this.dispatchEvent(
             new CustomEvent("dismiss", { bubbles: true, composed: true })
         );
     }
 
     handleCloseClick() {
+        this.persistDismissAndHide();
         this.dispatchEvent(
             new CustomEvent("dismiss", { bubbles: true, composed: true })
         );

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

@@ -25,7 +25,7 @@
             button-href={localeBannerEnUsHref}
             secondary-label="Not Now"
             show-close-button="true"
-            ondismiss={handleLocaleBannerDismiss}
+            dismiss-storage-key={deliverable}
         ></doc-banner>
         <doc-phase
             slot="version-banner"

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

@@ -17,6 +17,7 @@ import { LightningElementWithState } from "dxBaseElements/lightningElementWithSt
 import { oldVersionDocInfo } from "docUtils/utils";
 import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
 import { track as trackGTM } from "dxUtils/analytics";
+import { normalizeBoolean } from "dxUtils/normalizers";
 import DOMPurify from "dompurify";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
@@ -48,6 +49,11 @@ export default class DocXmlContent extends LightningElementWithState<{
     /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer-mfe. */
     @api origin: string | null = null;
 
+    /** Optional base URL for the canonical link (e.g. https://developer.salesforce.com). When set, used instead of window.location for the canonical href. */
+    @api baseUrl: string | null = null;
+
+    @api localeBannerEnabled = false;
+
     @api
     get allLanguages(): Array<Language> {
         return this._allLanguages;
@@ -78,8 +84,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     private latestVersion = false;
     private previewVersion = false;
 
-    @track private localeBannerDismissed = false;
-
     private get enableFooter(): boolean {
         return !this.hideFooter;
     }
@@ -254,7 +258,10 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private get showLocaleBanner(): boolean {
-        if (!this.pageReference?.deliverable || this.localeBannerDismissed) {
+        if (!normalizeBoolean(this.localeBannerEnabled)) {
+            return false;
+        }
+        if (!this.pageReference?.deliverable) {
             return false;
         }
         if (!this.language || this.language.id === "en-us") {
@@ -357,16 +364,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.showVersionBanner = false;
     }
 
-    handleLocaleBannerDismiss() {
-        if (this.pageReference?.deliverable) {
-            window.localStorage.setItem(
-                `dsc-doc-locale-banner-dismissed-${this.pageReference.deliverable}`,
-                "true"
-            );
-        }
-        this.localeBannerDismissed = true;
-    }
-
     handleSelect(event: CustomEvent<{ name: string }>): void {
         event.stopPropagation();
         const { name } = event.detail;
@@ -520,11 +517,6 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.updateUrl(HistoryState.REPLACE_STATE);
         }
 
-        this.localeBannerDismissed =
-            window.localStorage.getItem(
-                `dsc-doc-locale-banner-dismissed-${this.pageReference.deliverable}`
-            ) === "true";
-
         if (this.oldVersionInfo) {
             this.showVersionBanner = true;
         } else {
@@ -812,21 +804,19 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         if (this.pageReference) {
-            const metadescription = document.querySelector(
+            const canonicalLink = document.querySelector(
                 'link[rel="canonical"]'
             );
-            if (metadescription) {
+            if (canonicalLink) {
                 const copyPageReference = { ...this.pageReference };
                 copyPageReference.docId = copyPageReference.docId
                     ? this.dropVersionFromDocId(copyPageReference.docId)
                     : copyPageReference.docId;
-                metadescription.setAttribute(
-                    "href",
-                    window.location.protocol +
-                        "//" +
-                        window.location.host +
-                        this.pageReferenceToString(copyPageReference)
-                );
+                const path = this.pageReferenceToString(copyPageReference);
+                const origin = this.baseUrl
+                    ? this.baseUrl.replace(/\/$/, "")
+                    : `${window.location.protocol}//${window.location.host}`;
+                canonicalLink.setAttribute("href", `${origin}${path}`);
             }
         }
 

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

@@ -125,7 +125,7 @@ dx-toc {
     max-width: 1000px;
     flex: 1;
     width: 0;
-    word-break: break-word;
+    overflow-wrap: break-word;
 }
 
 .is-sticky {