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

package/package.json

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

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

@@ -2,134 +2,232 @@
 @import "dxHelpers/text";
 
 :host {
-    --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-close-color: #747474;
-    --doc-banner-primary-bg: #0176d3;
-    --doc-banner-primary-bg-hover: #0160b3;
-}
-
-.doc-notification-bar {
+    display: block;
+
+    --doc-banner-padding-x-left: var(--dx-g-spacing-2xl);
+    --doc-banner-padding-x-right: var(--dx-g-spacing-lg);
+    --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-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
+    );
+}
+
+:host > div {
     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);
-    background: var(--doc-banner-bg);
+    margin: 0;
+    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(--dx-g-gray-90);
     box-sizing: border-box;
 }
 
-.doc-notification-bar .icon-wrap,
-.doc-notification-bar .actions,
-.doc-notification-bar .close-wrap {
+.icon-wrap,
+.main,
+.content,
+.actions,
+.close-wrap {
     display: flex;
     align-items: center;
+}
+
+.icon-wrap,
+.close-wrap {
     flex-shrink: 0;
 }
 
-.doc-notification-bar .icon-wrap {
-    width: 28px;
-    height: var(--doc-banner-height);
-    padding-right: var(--dx-g-spacing-sm);
+.main {
+    flex: 1 1 0;
+    min-width: 0;
+    align-self: flex-start;
+    padding: var(--doc-banner-text-vertical-padding) 0;
+    gap: var(--dx-g-spacing-md);
+    flex-wrap: wrap;
+}
+
+.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);
+    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 {
-    flex: 1;
+.content {
+    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: var(--dx-g-spacing-xl);
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
 }
 
-.doc-notification-bar .message {
+.message {
     margin: 0;
-    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 {
-    width: 215px;
-    height: 32px;
-    gap: var(--dx-g-spacing-sm);
+.actions {
+    flex-shrink: 0;
+    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: 144px;
-    height: 32px;
-    border-radius: 4px;
+    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: 144px;
+.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: 4px;
-    box-sizing: border-box;
+    border-radius: var(--dx-g-spacing-xs);
 }
 
-.doc-notification-bar .close-wrap {
+.close-wrap {
+    align-self: flex-start;
     justify-content: center;
-    width: 52px;
-    height: var(--doc-banner-height);
+    align-items: center;
+    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 {
+.close-wrap .close-btn {
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100%;
-    height: 100%;
-    padding: 2.9px;
-    margin: 0;
-    color: var(--doc-banner-close-color);
-    background: none;
-    border: none;
-    cursor: pointer;
-    border-radius: 0;
+    pointer-events: none;
     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;
+    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: 1px solid transparent;
+    --dx-c-button-custom-border-hover: 1px solid transparent;
+}
+
+@media (max-width: 1279px) {
+    :host {
+        --doc-banner-padding-x-left: var(--dx-g-spacing-xl);
+        --doc-banner-padding-x-right: var(--dx-g-spacing-md);
+    }
+
+    :host > div {
+        position: relative;
+        max-width: 100%;
+        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;
+    }
+
+    .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;
+    }
+
+    .main {
+        order: 1;
+        flex-wrap: wrap;
+        margin-left: var(--doc-banner-icon-frame-width);
+        gap: var(--dx-g-spacing-2xs);
+    }
+
+    .content {
+        order: 0;
+    }
+
+    .close-wrap {
+        order: 2;
+        min-height: var(--doc-banner-bar-min-height);
+    }
+
+    .actions {
+        order: 1;
+        flex: 0 0 100%;
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    :host {
+        --doc-banner-padding-x-left: var(--dx-g-spacing-lg);
+        --doc-banner-padding-x-right: var(--dx-g-spacing-sm);
+    }
+
+    :host > div {
+        min-height: var(--doc-banner-bar-min-height);
+    }
 }

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

@@ -1,70 +1,76 @@
 <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>
-        </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"
-                    >
-                        {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
-                    variant="inline"
-                    onclick={handleSecondaryClick}
-                    part="secondary"
-                >
-                    {secondaryLabel}
-                </dx-button>
-            </template>
-        </div>
-        <template lwc:if={showCloseButton}>
-            <div class="close-wrap" part="close-wrap">
-                <button
-                    type="button"
-                    class="close"
-                    part="close"
+    <template lwc:if={showBanner}>
+        <div class="doc-notification-bar" part="container">
+            <div class="icon-wrap" part="icon-wrap">
+                <dx-icon
+                    symbol="info"
+                    size="override"
+                    part="icon"
+                    color={iconColor}
+                ></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"
+                        >
+                            {secondaryLabel}
+                        </dx-button>
+                    </template>
+                </div>
+            </div>
+            <template lwc:if={showCloseButton}>
+                <div
+                    class="close-wrap"
+                    part="close-wrap"
+                    role="button"
+                    tabindex="0"
                     aria-label="Close"
                     onclick={handleCloseClick}
+                    onkeydown={handleCloseKeydown}
                 >
-                    <svg
-                        width="14"
-                        height="14"
-                        viewBox="0 0 14 14"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
+                    <dx-button
+                        class="close-btn"
+                        variant="icon-only"
+                        icon-symbol="close"
+                        icon-size="override"
+                        icon-color={iconColor}
                         aria-hidden="true"
-                    >
-                        <path
-                            d="M1 1L13 13M13 1L1 13"
-                            stroke-width="2"
-                            stroke-linecap="round"
-                        />
-                    </svg>
-                </button>
-            </div>
-        </template>
-    </div>
+                        tabindex="-1"
+                        part="close"
+                    ></dx-button>
+                </div>
+            </template>
+        </div>
+    </template>
 </template>

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

@@ -1,20 +1,27 @@
-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-";
+
+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 = "";
 
     @api secondaryLabel = "";
 
-    _showCloseButton = false;
+    @api dismissStorageKey = "";
+
+    _showCloseButton = true;
 
     @api
     get showCloseButton(): boolean {
@@ -24,6 +31,25 @@ export default class Banner extends LightningElement {
         this._showCloseButton = normalizeBoolean(value);
     }
 
+    @track private _dismissed = false;
+
+    connectedCallback() {
+        if (
+            this.dismissStorageKey &&
+            typeof window !== "undefined" &&
+            window.sessionStorage
+        ) {
+            this._dismissed =
+                window.sessionStorage.getItem(
+                    `${LOCALE_BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`
+                ) === "true";
+        }
+    }
+
+    get showBanner(): boolean {
+        return !this._dismissed;
+    }
+
     get hasMessageLink(): boolean {
         return !!this.messageLinkUrl;
     }
@@ -36,15 +62,48 @@ export default class Banner extends LightningElement {
         return !!this.secondaryLabel;
     }
 
+    get iconColor(): string {
+        return "gray-50";
+    }
+
+    persistDismissAndHide() {
+        if (
+            this.dismissStorageKey &&
+            typeof window !== "undefined" &&
+            window.sessionStorage
+        ) {
+            window.sessionStorage.setItem(
+                `${LOCALE_BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`,
+                "true"
+            );
+        }
+        this._dismissed = true;
+    }
+
     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/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.ts

@@ -48,6 +48,9 @@ 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
     get allLanguages(): Array<Language> {
         return this._allLanguages;
@@ -766,21 +769,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 {