@salesforcedevs/dx-components 1.3.366 → 1.3.367

package/lwc.config.json

@@ -37,6 +37,7 @@
         "dx/checkboxNative",
         "dx/codeBlock",
         "dx/coveoRecommendations",
+        "dx/darkModeManager",
         "dx/dropdown",
         "dx/embeddedVideo",
         "dx/emptyState",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.366",
+    "version": "1.3.367",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -46,5 +46,5 @@
     "volta": {
         "node": "18.18.0"
     },
-    "gitHead": "879600edad044c730d365d3737f72f9f5eaec399"
+    "gitHead": "bed257f995a2a4bd7b377a7431a1b7c51b133602"
 }

package/src/modules/dx/button/button.css

@@ -11,7 +11,8 @@
     --dx-c-button-secondary-color-hover: var(
         --dx-g-button-secondary-color-hover
     );
-    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
+    --dx-c-button-inline-color: var(--dx-g-button-inline-color);
+    --dx-c-button-inline-color-hover: var(--dx-g-button-inline-color-hover);
     --dx-c-button-justify-content: center;
     --dx-c-button-opacity: 1;
     --dx-c-button-font-size: var(--dx-g-text-sm);
@@ -168,7 +169,7 @@
 .button.variant_tertiary,
 .button.variant_inline,
 .button.variant_inline-inherit {
-    color: var(--dx-c-button-primary-color);
+    color: var(--dx-c-button-inline-color);
     border: 1px solid transparent;
 }
 

package/src/modules/dx/codeBlock/codeBlock.html

@@ -49,7 +49,7 @@
                 <div class="toolbar-item">
                     <dx-tooltip label={updateThemeBtnText} placement="top-left">
                         <dx-button
-                            onclick={updateTheme}
+                            onclick={updateThemeClicked}
                             type="button"
                             icon-symbol="away"
                             variant="tertiary"

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -1,13 +1,16 @@
-import { LightningElement, api, wire, track } from "lwc";
+import { LightningElement, api } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
-import {
-    getLocalStorageData,
-    setLocalStorageData
-} from "@salesforcedevs/sfdocs-wires";
 import { track as gtmTrack } from "dxUtils/analytics";
 import prism from "dxUtils/prismjs";
 import { ampscript, sqlDocsTemplate } from "./customLanguages";
+import {
+    DARK_MODE_THEMES,
+    DARKMODE_TOGGLE_EVENT_NAME,
+    dispatchDarkModeToggleEvent,
+    getLocalStorageDarkModeSetting,
+    setLocalStorageDarkModeSetting
+} from "dx/darkModeManager";
 
 /*
     Here we create custom syntax highlighting rules for proprietary languages
@@ -41,8 +44,6 @@ const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;
 
 export const LIGHT = "light";
 export const DARK = "dark";
-const themes: CodeBlockTheme[] = [LIGHT, DARK];
-const LOCAL_STORAGE_KEY = "dx-codeblock-theme";
 
 export default class CodeBlock extends LightningElement {
     @api defaultTheme: CodeBlockTheme = LIGHT;
@@ -52,6 +53,8 @@ export default class CodeBlock extends LightningElement {
     // if it is true, it renders code as is coming instead of wrapping it into html/xml comments tags.
     @api isEncoded = false;
 
+    theme: CodeBlockTheme | null = null;
+
     private markupLangs = ["visualforce", "html", "xml"];
     private _codeBlockRendered: boolean = false;
     private componentLoaded: boolean = false;
@@ -95,10 +98,20 @@ export default class CodeBlock extends LightningElement {
         { label: "SQL Documentation", id: "sql_docs_template" }
     ];
 
+    private initializeDarkMode() {
+        window.addEventListener(DARKMODE_TOGGLE_EVENT_NAME, this.toggleTheme);
+        const darkModeSetting =
+            getLocalStorageDarkModeSetting() as CodeBlockTheme;
+        if (DARK_MODE_THEMES.includes(darkModeSetting)) {
+            this.theme = darkModeSetting;
+        }
+    }
+
     connectedCallback() {
         if (!this.theme) {
             this.theme = this.defaultTheme;
         }
+        this.initializeDarkMode();
     }
 
     _codeBlock: string = "";
@@ -117,20 +130,6 @@ export default class CodeBlock extends LightningElement {
         return this._codeBlock;
     }
 
-    @track private theme: CodeBlockTheme | null = null;
-
-    @wire(getLocalStorageData, { key: "dx-codeblock-theme" })
-    updateThemeForCodeblock(value: any) {
-        if (themes.includes(value)) {
-            this.theme = value;
-        } else {
-            setLocalStorageData(
-                LOCAL_STORAGE_KEY,
-                this.theme || this.defaultTheme
-            );
-        }
-    }
-
     get updateThemeBtnText(): string {
         return `Switch to ${this.theme === DARK ? "Light" : "Dark"} mode`;
     }
@@ -247,8 +246,8 @@ export default class CodeBlock extends LightningElement {
      * Note: There is a known issue in storybook@6.1.13 where some apis are not available if you access Storybook through IP address.
      * https://github.com/storybookjs/storybook/issues/13529
      */
-    async copySource(event: any) {
-        gtmTrack(event.target, "custEv_iconClick", {
+    async copySource(event: Event) {
+        gtmTrack(event.target!, "custEv_iconClick", {
             click_text: this.copyBtnText,
             element_type: "icon",
             element_title: this.copyBtnText,
@@ -272,18 +271,21 @@ export default class CodeBlock extends LightningElement {
         }
     }
 
-    updateTheme(event: any) {
-        this.theme = this.theme === DARK ? LIGHT : DARK;
-        setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
-
-        gtmTrack(event.target, "custEv_iconClick", {
+    updateThemeClicked(event: Event) {
+        gtmTrack(event.target!, "custEv_iconClick", {
             click_text: this.updateThemeBtnText,
             element_type: "icon",
             element_title: this.updateThemeBtnText,
             content_category: "code block"
         });
+        dispatchDarkModeToggleEvent();
     }
 
+    private toggleTheme = () => {
+        this.theme = this.theme === DARK ? LIGHT : DARK;
+        setLocalStorageDarkModeSetting(this.theme);
+    };
+
     renderedCallback() {
         if (this._codeBlockRendered) {
             return;
@@ -297,4 +299,11 @@ export default class CodeBlock extends LightningElement {
         this.formatCodeBlock();
         this._codeBlockRendered = true;
     }
+
+    disconnectedCallback(): void {
+        window.removeEventListener(
+            DARKMODE_TOGGLE_EVENT_NAME,
+            this.toggleTheme
+        );
+    }
 }

package/src/modules/dx/darkModeManager/darkModeManager.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/dx/darkModeManager/darkModeManager.ts

@@ -0,0 +1,77 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { LightningElement } from "lwc";
+
+export const LOCAL_STORAGE_KEY = "dx-dark-mode-theme";
+
+function setTheme(theme: string) {
+    const DWONavSelector = document.querySelector("hgf-c360contextnav");
+
+    document.body.setAttribute("class", theme);
+    DWONavSelector?.setAttribute("dark-mode", String(theme === "dark"));
+    localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+}
+
+function isDarkMode() {
+    return document.body.getAttribute("class") === "dark";
+}
+
+function onDarkModeToggle() {
+    if (isDarkMode()) {
+        setTheme("light");
+    } else {
+        setTheme("dark");
+    }
+}
+
+declare module globalThis {
+    let singletonDarkModeManagerRendered: boolean;
+}
+
+export const DARK_MODE_THEMES = ["dark", "light"];
+export const DARKMODE_TOGGLE_EVENT_NAME = "UPDATE_DARK_MODE";
+
+export const isDarkModeEnabled = () => {
+    return process.env.DARK_MODE;
+};
+
+export const dispatchDarkModeToggleEvent = () => {
+    window.dispatchEvent(new Event(DARKMODE_TOGGLE_EVENT_NAME));
+};
+
+export const getLocalStorageDarkModeSetting = () => {
+    return localStorage.getItem(LOCAL_STORAGE_KEY);
+};
+
+export const setLocalStorageDarkModeSetting = (theme: string) => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+};
+
+export default class DarkModeManager extends LightningElement {
+    renderedCallback(): void {
+        if (
+            isDarkModeEnabled() &&
+            !globalThis.singletonDarkModeManagerRendered
+        ) {
+            const theme = getLocalStorageDarkModeSetting();
+            if (theme) {
+                if (DARK_MODE_THEMES.includes(theme)) {
+                    setTheme(theme);
+                }
+            }
+            window.addEventListener(
+                DARKMODE_TOGGLE_EVENT_NAME,
+                onDarkModeToggle
+            );
+            globalThis.singletonDarkModeManagerRendered = true;
+        }
+    }
+
+    disconnectedCallback(): void {
+        if (isDarkModeEnabled()) {
+            window.removeEventListener(
+                DARKMODE_TOGGLE_EVENT_NAME,
+                onDarkModeToggle
+            );
+        }
+    }
+}

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -34,6 +34,43 @@
         var(--dx-c-featured-content-header-padding-horizontal);
 }
 
+.title-bar {
+    padding: 0 var(--dx-c-featured-content-header-padding-horizontal);
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 0 0 2px #0003;
+    color: var(--label-color);
+}
+
+.title-bar h1 {
+    color: var(--label-color);
+}
+
+.title-bar p {
+    color: var(--label-color);
+}
+
+.dark-mode-button {
+    width: 44px;
+    height: 44px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--dx-g-dark-mode-toggle-button-color);
+    border: var(--dx-g-dark-mode-toggle-button-border);
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.dark-mode-icon {
+    height: 20px;
+    width: 20px;
+    background-size: 20px 20px;
+    background-image: var(--dx-g-dark-mode-toggle-icon);
+}
+
 .container {
     --image-radius: var(--dx-g-spacing-smd);
 
@@ -161,46 +198,6 @@
     }
 }
 
-.custom-bg-blog::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url("https://a.sfdcstatic.com/developer-website/images/fch-blog-cloud-1.png"),
-        url("https://a.sfdcstatic.com/developer-website/images/fch-blog-cloud-2.png"),
-        url("https://a.sfdcstatic.com/developer-website/images/fch-blog-planet.png");
-    background-position: calc(100% + -60px) -80px, 67% calc(100% + -100px),
-        54% 70px;
-    background-repeat: no-repeat, no-repeat, no-repeat;
-}
-@media screen and (max-width: 1024px) {
-    .custom-bg-blog::after {
-        background-image: url("https://a.sfdcstatic.com/developer-website/images/fch-blog-cloud-1.png");
-        background-position: calc(100% + 78px) -60px;
-    }
-
-    .custom-bg-blog::before {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-image: url("https://a.sfdcstatic.com/developer-website/images/fch-blog-cloud-2.png");
-        background-repeat: no-repeat;
-        background-position: bottom left;
-        transform: rotate(180deg);
-        left: -96%;
-        bottom: -90%;
-    }
-}
-@media screen and (max-width: 600px) {
-    .custom-bg-blog::after {
-        background-size: 225px;
-        background-position: calc(100% + 58px) -60px;
-    }
-}
-
 .custom-bg-trial::after {
     content: "";
     background-image: url("https://a.sfdcstatic.com/developer-website/images/trial-left.svg"),
@@ -326,7 +323,6 @@ a.image-container > img {
 .label {
     grid-area: label;
     color: var(--label-color);
-    padding-bottom: var(--dx-g-spacing-lg);
 }
 
 .dx-text-display-2 {

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -1,18 +1,32 @@
 <template>
     <div class={classname} part="container" style={style}>
+        <div class="title-bar" lwc:if={label}>
+            <div>
+                <template lwc:if={labelAsPrimaryHeading}>
+                    <h1 class="label dx-text-display-6">{label}</h1>
+                </template>
+                <template lwc:else>
+                    <p class="label dx-text-display-6">{label}</p>
+                </template>
+            </div>
+            <div>
+                <template lwc:if={isDarkModeEnabled}>
+                    <div
+                        class="dark-mode-button"
+                        onclick={onDarkModeButtonClick}
+                    >
+                        <div class="dark-mode-icon"></div>
+                    </div>
+                </template>
+            </div>
+        </div>
         <div class="container-layout">
-            <template if:true={labelAsPrimaryHeading}>
-                <h1 if:true={label} class="label dx-text-display-6">{label}</h1>
-            </template>
-            <template if:false={labelAsPrimaryHeading}>
-                <p if:true={label} class="label dx-text-display-6">{label}</p>
-            </template>
             <div class="featured-content-main-content">
-                <template if:false={labelAsPrimaryHeading}>
-                    <h1 class="title dx-text-display-2">
+                <template lwc:if={labelAsPrimaryHeading}>
+                    <h2 class="title dx-text-display-2">
                         <a
                             class="title-link"
-                            if:true={href}
+                            lwc:if={href}
                             href={href}
                             target={target}
                             onmouseenter={setLinkHovered}
@@ -20,14 +34,14 @@
                         >
                             {header}
                         </a>
-                        <template if:false={href}>{header}</template>
-                    </h1>
+                        <template lwc:else>{header}</template>
+                    </h2>
                 </template>
-                <template if:true={labelAsPrimaryHeading}>
-                    <h2 class="title dx-text-display-2">
+                <template lwc:else>
+                    <h1 class="title dx-text-display-2">
                         <a
                             class="title-link"
-                            if:true={href}
+                            lwc:if={href}
                             href={href}
                             target={target}
                             onmouseenter={setLinkHovered}
@@ -35,10 +49,10 @@
                         >
                             {header}
                         </a>
-                        <template if:false={href}>{header}</template>
-                    </h2>
+                        <template lwc:else>{header}</template>
+                    </h1>
                 </template>
-                <div class="authors" if:true={authors}>
+                <div class="authors" lwc:if={authors}>
                     <template for:each={authors} for:item="author">
                         <dx-image-and-label
                             key={author.key}
@@ -50,9 +64,9 @@
                     </template>
                 </div>
                 <span class="body dx-text-body-1">{body}</span>
-                <div class="buttons" if:true={hasButtons}>
+                <div class="buttons" lwc:if={hasButtons}>
                     <dx-button
-                        if:true={ctaPrimaryLabel}
+                        lwc:if={ctaPrimaryLabel}
                         href={ctaPrimaryHref}
                         icon-symbol={ctaPrimarySymbol}
                         target={ctaPrimaryTarget}
@@ -61,7 +75,7 @@
                         {ctaPrimaryLabel}
                     </dx-button>
                     <dx-button
-                        if:true={ctaSecondaryLabel}
+                        lwc:if={ctaSecondaryLabel}
                         href={ctaSecondaryHref}
                         variant="quaternary"
                         icon-symbol={ctaSecondarySymbol}
@@ -76,15 +90,15 @@
                 </div>
                 <div
                     class={backgroundImageClass}
-                    if:true={hasBackgroundImage}
+                    lwc:if={hasBackgroundImage}
                     lwc:dom="manual"
                 ></div>
             </div>
-            <div if:true={hasPlainImage} class="image-container">
+            <div lwc:if={hasPlainImage} class="image-container">
                 <img src={imgSrc} alt={imgAlt} />
             </div>
             <a
-                if:true={hasLinkedImage}
+                lwc:if={hasLinkedImage}
                 href={href}
                 target={target}
                 class="image-container"
@@ -94,7 +108,7 @@
                 <img src={imgSrc} alt={imgAlt} />
             </a>
         </div>
-        <div class="blue-circle" if:true={hasIcon}>
+        <div class="blue-circle" lwc:if={hasIcon}>
             <dx-icon
                 class="icon"
                 size="2xlarge"

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -5,6 +5,10 @@ import { toJson } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 import svgs from "./svgs";
 import ImageAndLabel from "dx/imageAndLabel";
+import {
+    dispatchDarkModeToggleEvent,
+    isDarkModeEnabled
+} from "dx/darkModeManager";
 
 export default class FeaturedContentHeader extends LightningElement {
     @api label?: string | null = null;
@@ -89,6 +93,10 @@ export default class FeaturedContentHeader extends LightningElement {
         );
     }
 
+    private get isDarkModeEnabled() {
+        return isDarkModeEnabled();
+    }
+
     private get hasPlainImage() {
         return this.imgSrc && !this.href;
     }
@@ -120,6 +128,10 @@ export default class FeaturedContentHeader extends LightningElement {
         this.isLinkHovered = false;
     }
 
+    private onDarkModeButtonClick() {
+        dispatchDarkModeToggleEvent();
+    }
+
     private onSlotChange(e: any): void {
         this.isSlotEmpty = isSlotEmpty(e);
         const slot = e.target;

package/src/modules/dx/footer/footer.css

@@ -378,6 +378,7 @@ footer.signup-variant-no-signup {
     .content-container_top > .subheading {
         text-align: center;
         margin-right: unset;
+        margin-bottom: var(--dx-g-spacing-lg);
     }
 
     .content-container_top > dx-input {