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

package/package.json

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

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

@@ -2,12 +2,17 @@
 @import "dxHelpers/text";
 
 :host {
+    display: block;
+
     --doc-banner-bg: var(--neutral-90, #e5e5e5);
     --doc-banner-height: 44px;
     --doc-banner-padding-x-left: 40px;
-    --doc-banner-padding-x-right: 24px;
-    --doc-banner-icon-size: 20px;
-    --doc-banner-close-icon-size: 14px;
+    --doc-banner-padding-x-right: var(--dx-g-spacing-lg);
+    --doc-banner-icon-size: 18.4615px;
+    --doc-banner-icon-frame-width: calc(
+        var(--doc-banner-padding-x-left) + var(--doc-banner-icon-size) +
+            var(--dx-g-spacing-sm)
+    );
     --doc-banner-close-color: #747474;
     --doc-banner-primary-bg: #0176d3;
     --doc-banner-primary-bg-hover: #0160b3;
@@ -15,29 +20,46 @@
 
 .doc-notification-bar {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
     width: 100%;
     max-width: 1280px;
-    height: var(--doc-banner-height);
-    padding-left: var(--doc-banner-padding-x-left);
-    padding-right: var(--doc-banner-padding-x-right);
+    margin: 0 auto;
+    min-height: var(--doc-banner-height);
+    padding: 0 var(--doc-banner-padding-x-right) 0
+        var(--doc-banner-padding-x-left);
     background: var(--doc-banner-bg);
     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 {
     display: flex;
     align-items: center;
+}
+
+.doc-notification-bar .icon-wrap,
+.doc-notification-bar .close-wrap {
     flex-shrink: 0;
 }
 
+.doc-notification-bar .main {
+    flex: 1 1 0;
+    min-width: 0;
+    align-self: flex-start;
+    padding: 6px 0;
+    gap: var(--dx-g-spacing-md);
+}
+
 .doc-notification-bar .icon-wrap {
-    width: 28px;
-    height: var(--doc-banner-height);
-    padding-right: var(--dx-g-spacing-sm);
+    width: calc(var(--doc-banner-icon-size) + var(--dx-g-spacing-sm));
+    min-height: 32px;
+    align-self: flex-start;
+    justify-content: flex-start;
+    align-items: flex-start;
 }
 
 .doc-notification-bar .icon-wrap dx-icon {
@@ -45,21 +67,25 @@
 
     width: var(--doc-banner-icon-size);
     height: var(--doc-banner-icon-size);
+    padding: 12px 8px 0 0;
+    box-sizing: content-box;
 }
 
 .doc-notification-bar .content {
-    flex: 1;
+    flex: 0 1 auto;
     min-width: 0;
-    max-width: 1136px;
-    height: var(--doc-banner-height);
-    padding: 6px 0;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
+    max-width: 100%;
+    min-height: 32px;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
 }
 
 .doc-notification-bar .message {
     margin: 0;
+    padding: 6px 0;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
     color: var(--dx-g-neutral-30, #444);
 }
 
@@ -73,9 +99,10 @@
 }
 
 .doc-notification-bar .actions {
-    width: 215px;
-    height: 32px;
-    gap: var(--dx-g-spacing-sm);
+    flex-shrink: 0;
+    min-height: 32px;
+    gap: var(--dx-g-spacing-smd);
+    flex-wrap: wrap;
 }
 
 .doc-notification-bar .primary-btn {
@@ -84,52 +111,102 @@
     --dx-c-button-vertical-spacing: 0;
     --dx-c-button-horizontal-spacing: var(--dx-g-spacing-md);
 
-    min-width: 144px;
+    min-width: min(144px, 100%);
     height: 32px;
-    border-radius: 4px;
+    border-radius: var(--dx-g-spacing-xs);
 }
 
 .doc-notification-bar .primary-btn::part(container) {
-    min-width: 144px;
+    min-width: min(144px, 100%);
     width: 100%;
     height: 32px;
     padding: 0 var(--dx-g-spacing-md);
-    border-radius: 4px;
-    box-sizing: border-box;
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+.doc-notification-bar .secondary-btn {
+    font-weight: var(--dx-g-font-normal);
 }
 
 .doc-notification-bar .close-wrap {
+    align-self: flex-start;
     justify-content: center;
+    align-items: center;
     width: 52px;
-    height: var(--doc-banner-height);
+    height: 44px;
+    padding: 12px 8px 18px;
+    margin-left: auto;
+    box-sizing: border-box;
 }
 
-.doc-notification-bar .close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.doc-notification-bar .close-wrap .close-btn {
     width: 100%;
     height: 100%;
-    padding: 2.9px;
-    margin: 0;
-    color: var(--doc-banner-close-color);
-    background: none;
-    border: none;
-    cursor: pointer;
-    border-radius: 0;
-    box-sizing: border-box;
-}
-
-.doc-notification-bar .close:hover {
-    background: rgb(0 0 0 / 5%);
-}
-
-.doc-notification-bar .close svg {
-    width: var(--doc-banner-close-icon-size);
-    height: var(--doc-banner-close-icon-size);
-    flex-shrink: 0;
-}
 
-.doc-notification-bar .close svg path {
-    stroke: currentcolor;
+    --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;
+}
+
+@media (max-width: 1279px) {
+    :host {
+        --doc-banner-padding-x-left: 32px;
+        --doc-banner-padding-x-right: var(--dx-g-spacing-md);
+    }
+
+    .doc-notification-bar {
+        position: relative;
+        max-width: 100%;
+        min-height: 78px;
+        flex-wrap: wrap;
+        align-content: space-between;
+        padding: 0 var(--doc-banner-padding-x-right) 0 0;
+    }
+
+    .doc-notification-bar .icon-wrap {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: var(--doc-banner-icon-frame-width);
+        min-height: 0;
+        padding: 0 0 0 var(--doc-banner-padding-x-left);
+        order: 0;
+    }
+
+    .doc-notification-bar .main {
+        order: 1;
+        flex-wrap: wrap;
+        margin-left: var(--doc-banner-icon-frame-width);
+        gap: var(--dx-g-spacing-2xs);
+    }
+
+    .doc-notification-bar .content {
+        order: 0;
+    }
+
+    .doc-notification-bar .close-wrap {
+        order: 2;
+        min-height: 44px;
+    }
+
+    .doc-notification-bar .actions {
+        order: 1;
+        flex: 0 0 100%;
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    :host {
+        --doc-banner-padding-x-left: 24px;
+        --doc-banner-padding-x-right: var(--dx-g-spacing-sm);
+    }
+
+    .doc-notification-bar {
+        min-height: 44px;
+    }
 }

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

@@ -1,69 +1,59 @@
 <template>
     <div class="doc-notification-bar" part="container">
         <div class="icon-wrap" part="icon-wrap">
-            <dx-icon symbol="info" part="icon" color="#9E9E9E"></dx-icon>
+            <dx-icon symbol="info" part="icon" color="#747474"></dx-icon>
         </div>
-        <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"
+        <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"
                     >
-                        {messageLinkText}
-                    </a>
+                        {buttonLabel}
+                    </dx-button>
                 </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
-                    variant="inline"
-                    onclick={handleSecondaryClick}
-                    part="secondary"
-                >
-                    {secondaryLabel}
-                </dx-button>
-            </template>
+                <template lwc:if={hasSecondaryAction}>
+                    <dx-button
+                        class="secondary-btn"
+                        variant="inline"
+                        onclick={handleSecondaryClick}
+                        part="secondary"
+                    >
+                        {secondaryLabel}
+                    </dx-button>
+                </template>
+            </div>
         </div>
         <template lwc:if={showCloseButton}>
             <div class="close-wrap" part="close-wrap">
-                <button
-                    type="button"
-                    class="close"
-                    part="close"
+                <dx-button
+                    class="close-btn"
+                    variant="icon-only"
+                    icon-symbol="close"
+                    icon-color="#747474"
                     aria-label="Close"
                     onclick={handleCloseClick}
-                >
-                    <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 14 14"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        aria-hidden="true"
-                    >
-                        <path
-                            d="M1 1L13 13M13 1L1 13"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                        />
-                    </svg>
-                </button>
+                    part="close"
+                ></dx-button>
             </div>
         </template>
     </div>

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

@@ -17,6 +17,9 @@
             <slot name="sidebar-header" slot="version-picker"></slot>
         </dx-sidebar-old>
         <div class="content-body-doc-phase-container">
+            <div class="locale-notification-wrapper">
+                <slot name="locale-banner"></slot>
+            </div>
             <div class="doc-phase-wrapper">
                 <slot name="doc-phase"></slot>
             </div>

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

@@ -268,6 +268,9 @@ export default class ContentLayout extends LightningElement {
             ".sticky-doc-header"
         ) as HTMLElement;
 
+        const localeBannerWrapper = this.template.querySelector(
+            ".locale-notification-wrapper"
+        ) as HTMLElement;
         const docPhaseWrapper = this.template.querySelector(
             ".doc-phase-wrapper"
         ) as HTMLElement;
@@ -275,6 +278,12 @@ export default class ContentLayout extends LightningElement {
             ".version-wrapper"
         ) as HTMLElement;
 
+        const localeBannerSlot = localeBannerWrapper?.querySelector(
+            "[name=locale-banner]"
+        ) as HTMLSlotElement | null;
+        const localeBannerEl = localeBannerSlot?.assignedElements?.()[0] as
+            | HTMLElement
+            | undefined;
         const docPhaseEl = (
             docPhaseWrapper.querySelector("[name=doc-phase]")! as any
         ).assignedElements()[0] as HTMLSlotElement;
@@ -297,6 +306,12 @@ export default class ContentLayout extends LightningElement {
             const docHeaderHeight = docHeaderEl.getBoundingClientRect().height;
             const totalHeaderHeight = globalNavHeight + docHeaderHeight;
 
+            const localeBannerHeight = localeBannerEl?.offsetHeight ?? 0;
+            const docPhaseElHeight =
+                (docPhaseEl?.getBoundingClientRect?.()?.height ?? 0) +
+                (verBannerEl?.getBoundingClientRect?.()?.height ?? 0);
+            const totalBannerHeight = localeBannerHeight + docPhaseElHeight;
+
             // Selecting the doc section heading and RNB here.
             const docHeadingEls = Array.from(
                 document.querySelectorAll("doc-heading")
@@ -313,15 +328,10 @@ export default class ContentLayout extends LightningElement {
                 `${globalNavHeight}px`
             );
 
-            const docPhaseElHeight =
-                docPhaseEl || verBannerEl
-                    ? (docPhaseEl || verBannerEl).getBoundingClientRect().height
-                    : 0;
-
             // Adjusting the doc section heading on scroll.
             docHeadingEls.forEach((docHeadingEl) => {
                 (docHeadingEl as any).style.scrollMarginTop = `${
-                    totalHeaderHeight + docPhaseElHeight + 40
+                    totalHeaderHeight + totalBannerHeight + 40
                 }px`;
             });
 
@@ -331,10 +341,10 @@ export default class ContentLayout extends LightningElement {
                 const viewportHeight = window.innerHeight;
                 const maxHeight =
                     viewportHeight -
-                    (docPhaseElHeight + totalHeaderHeight + 24); //added some margin of dx-toc
+                    (totalBannerHeight + totalHeaderHeight + 24); //added some margin of dx-toc
 
                 rightNavBarEl.style.top = `${
-                    totalHeaderHeight + docPhaseElHeight
+                    totalHeaderHeight + totalBannerHeight
                 }px`;
 
                 const toc = rightNavBarEl.querySelector("dx-toc");
@@ -512,13 +522,22 @@ export default class ContentLayout extends LightningElement {
                 globalNavEl?.offsetHeight +
                 contextNavEl?.offsetHeight;
 
+            const localeBannerWrapper = this.template.querySelector(
+                ".locale-notification-wrapper"
+            ) as HTMLElement;
+            const localeBannerSlot = localeBannerWrapper?.querySelector(
+                "[name=locale-banner]"
+            ) as HTMLSlotElement | null;
+            const localeBannerEl = localeBannerSlot?.assignedElements?.()[0] as
+                | HTMLElement
+                | undefined;
             const docPhaseEl = (
                 this.template.querySelector("[name=doc-phase]")! as any
             ).assignedElements()[0] as HTMLSlotElement;
 
-            const offset = docPhaseEl
-                ? headerHeight + docPhaseEl.offsetHeight
-                : headerHeight;
+            const localeBannerHeight = localeBannerEl?.offsetHeight ?? 0;
+            const docPhaseHeight = docPhaseEl?.offsetHeight ?? 0;
+            const offset = headerHeight + localeBannerHeight + docPhaseHeight;
 
             for (const headingElement of headingElements as any) {
                 if (headingElement.getAttribute("id") === hash) {

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

@@ -15,6 +15,18 @@
         reading-time={computedReadingTime}
         origin={origin}
     >
+        <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"
+            ondismiss={handleLocaleBannerDismiss}
+        ></doc-banner>
         <doc-phase
             slot="version-banner"
             lwc:if={showVersionBanner}

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

@@ -78,6 +78,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     private latestVersion = false;
     private previewVersion = false;
 
+    @track private localeBannerDismissed = false;
+
     private get enableFooter(): boolean {
         return !this.hideFooter;
     }
@@ -251,6 +253,35 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.pageReference.deliverable;
     }
 
+    private get showLocaleBanner(): boolean {
+        if (!this.pageReference?.deliverable || this.localeBannerDismissed) {
+            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
@@ -326,6 +357,16 @@ 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;
@@ -479,6 +520,11 @@ 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 {