@salesforcedevs/dx-components 1.3.384-alpha2 → 1.3.384-alpha5

package/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.384-alpha",
+    "version": "1.3.384-alpha2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@salesforcedevs/dx-components",
-            "version": "1.3.384-alpha",
+            "version": "1.3.384-alpha2",
             "license": "MIT",
             "dependencies": {
                 "@coveo/headless": "2.32.0",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.384-alpha2",
+    "version": "1.3.384-alpha5",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/audio/audio.css

@@ -6,6 +6,11 @@
     --dx-c-track-thumb-size: 10px;
     --dx-c-threedot-menu-item-padding: 14px;
     --dx-c-audio-player-padding: 6px 13px 13px;
+    --dx-c-audio-background-color: var(--dx-g-audio-background-color, #e0e5f8);
+    --dx-c-audio-inner-div-background-color: var(
+        --dx-g-audio-inner-div-background-color,
+        #e0e5f8
+    );
 }
 
 dx-icon {
@@ -14,7 +19,7 @@ dx-icon {
 
 /* Outermost container/border */
 .custom-audio-player {
-    background-color: var(--dx-g-audio-background-color, #e0e5f8);
+    background-color: var(--dx-c-audio-background-color);
     border-radius: 12px;
     padding: var(--dx-c-audio-player-padding);
 }
@@ -45,7 +50,7 @@ dx-icon {
     --dx-c-popover-padding: 0;
 
     align-items: center;
-    background-color: var(--dx-g-audio-inner-div-background-color, #fff);
+    background-color: var(--dx-c-audio-inner-div-background-color, #fff);
     border-radius: 5px;
     display: flex;
     margin-top: 8px;

package/src/modules/dx/codeBlock/codeBlock.css

@@ -31,6 +31,11 @@ pre {
     background-color: var(--dx-g-gray-90);
 }
 
+div.dx-theme-dark {
+    border: var(--dx-g-dark-mode-toggle-button-border);
+    border-radius: var(--dx-code-block-toolbar-border-radius, 0.3em);
+}
+
 .dx-theme-dark .toolbar {
     background-color: var(--dx-g-blue-natural-20);
 }
@@ -65,7 +70,8 @@ pre {
 }
 
 .toolbar-item {
-    display: inline-block;
+    display: flex;
+    align-items: center;
 }
 
 .toolbar-item:first-child {
@@ -127,3 +133,7 @@ pre[class*="language-"].line-numbers {
         display: none;
     }
 }
+
+dx-button {
+    --dx-g-button-icon-color: var(--dx-g-cloud-blue-vibrant-50);
+}

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

@@ -4,13 +4,6 @@ import cx from "classnames";
 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
@@ -44,6 +37,8 @@ const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;
 
 export const LIGHT = "light";
 export const DARK = "dark";
+export const EVENT_NAME = "dx-codeblock-theme";
+const THEMES = [LIGHT, DARK];
 
 export default class CodeBlock extends LightningElement {
     @api defaultTheme: CodeBlockTheme = LIGHT;
@@ -99,18 +94,18 @@ export default class CodeBlock extends LightningElement {
     ];
 
     private initializeDarkMode() {
-        window.addEventListener(DARKMODE_TOGGLE_EVENT_NAME, this.toggleTheme);
-        const darkModeSetting =
-            getLocalStorageDarkModeSetting() as CodeBlockTheme;
-        if (DARK_MODE_THEMES.includes(darkModeSetting)) {
+        window.addEventListener(EVENT_NAME, this.toggleTheme);
+        const darkModeSetting = localStorage.getItem(
+            EVENT_NAME
+        ) as CodeBlockTheme;
+        if (THEMES.includes(darkModeSetting)) {
             this.theme = darkModeSetting;
+        } else {
+            this.theme = this.defaultTheme;
         }
     }
 
     connectedCallback() {
-        if (!this.theme) {
-            this.theme = this.defaultTheme;
-        }
         this.initializeDarkMode();
     }
 
@@ -278,12 +273,12 @@ export default class CodeBlock extends LightningElement {
             element_title: this.updateThemeBtnText,
             content_category: "code block"
         });
-        dispatchDarkModeToggleEvent();
+        window.dispatchEvent(new Event(EVENT_NAME));
     }
 
     private toggleTheme = () => {
         this.theme = this.theme === DARK ? LIGHT : DARK;
-        setLocalStorageDarkModeSetting(this.theme);
+        localStorage.setItem(EVENT_NAME, this.theme);
     };
 
     renderedCallback() {
@@ -301,9 +296,6 @@ export default class CodeBlock extends LightningElement {
     }
 
     disconnectedCallback(): void {
-        window.removeEventListener(
-            DARKMODE_TOGGLE_EVENT_NAME,
-            this.toggleTheme
-        );
+        window.removeEventListener(EVENT_NAME, this.toggleTheme);
     }
 }

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

@@ -30,6 +30,10 @@ declare module globalThis {
 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));
 };
@@ -44,7 +48,10 @@ export const setLocalStorageDarkModeSetting = (theme: string) => {
 
 export default class DarkModeManager extends LightningElement {
     renderedCallback(): void {
-        if (!globalThis.singletonDarkModeManagerRendered) {
+        if (
+            isDarkModeEnabled() &&
+            !globalThis.singletonDarkModeManagerRendered
+        ) {
             const theme = getLocalStorageDarkModeSetting();
             if (theme) {
                 if (DARK_MODE_THEMES.includes(theme)) {
@@ -60,9 +67,11 @@ export default class DarkModeManager extends LightningElement {
     }
 
     disconnectedCallback(): void {
-        window.removeEventListener(
-            DARKMODE_TOGGLE_EVENT_NAME,
-            onDarkModeToggle
-        );
+        if (isDarkModeEnabled()) {
+            window.removeEventListener(
+                DARKMODE_TOGGLE_EVENT_NAME,
+                onDarkModeToggle
+            );
+        }
     }
 }

package/src/modules/dx/featureFlag/featureFlag.ts

@@ -3,8 +3,7 @@ import optimizelySdk from "@optimizely/optimizely-sdk";
 
 // This is needed to specify user context (such as logged in, admin, ...etc).
 // leave this as hard-coded for now until we create audiences in Optimizely.
-const userId = "salesforce-sf";
-const LOCAL_ENVIRONMENT_SDK_KEY = "Nnshyv1nTg7DWexu5rEeT";
+const userId = "user123";
 
 export default class FeatureFlag extends LightningElement {
     @api flag!: string;
@@ -16,19 +15,8 @@ export default class FeatureFlag extends LightningElement {
     }
 
     connectedCallback(): void {
-        const sdkKey = process.env.OPTIMIZELY_SDK_KEY;
-        const datafileAccessToken =
-            process.env.OPTIMIZELY_DATAFILE_ACCESS_TOKEN;
-        const datafileOptions =
-            sdkKey && datafileAccessToken
-                ? {
-                      urlTemplate: `https://config.optimizely.com/datafiles/auth/${sdkKey}.json`,
-                      datafileAccessToken: datafileAccessToken
-                  }
-                : undefined;
         this.optimizelyInstance = optimizelySdk.createInstance({
-            sdkKey: sdkKey || LOCAL_ENVIRONMENT_SDK_KEY,
-            datafileOptions
+            sdkKey: process.env.OPTIMIZELY_SDK_KEY
         });
     }
 

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

@@ -46,7 +46,7 @@
 
 @media screen and (max-width: 500px) {
     .title-bar {
-        padding: 0 40px;
+        padding: 0 30px;
         height: 125px;
         display: block;
         align-items: center;

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

@@ -13,14 +13,14 @@
                 <div>
                     <slot name="language-selector"></slot>
                 </div>
-                <dx-feature-flag flag="dark-mode">
+                <template lwc:if={isDarkModeEnabled}>
                     <div
                         class="dark-mode-button"
                         onclick={onDarkModeButtonClick}
                     >
                         <div class="dark-mode-icon"></div>
                     </div>
-                </dx-feature-flag>
+                </template>
             </div>
         </div>
         <div class="container-layout">

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

@@ -5,7 +5,10 @@ import { toJson } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 import svgs from "./svgs";
 import ImageAndLabel from "dx/imageAndLabel";
-import { dispatchDarkModeToggleEvent } from "dx/darkModeManager";
+import {
+    dispatchDarkModeToggleEvent,
+    isDarkModeEnabled
+} from "dx/darkModeManager";
 
 export default class FeaturedContentHeader extends LightningElement {
     @api label?: string | null = null;
@@ -90,6 +93,10 @@ export default class FeaturedContentHeader extends LightningElement {
         );
     }
 
+    private get isDarkModeEnabled() {
+        return isDarkModeEnabled();
+    }
+
     private get hasPlainImage() {
         return this.imgSrc && !this.href;
     }

package/src/modules/dx/podcastHost/podcastHost.css

@@ -13,7 +13,7 @@ dx-icon {
 }
 
 .container {
-    background: white;
+    background: var(--dx-g-body-background-color);
     box-shadow: var(--dx-g-box-shadow-sm);
     border-radius: 16px;
     padding: 36px;
@@ -37,10 +37,11 @@ dx-icon {
 
 .host-bio > p {
     margin: 16px 0;
+    color: var(--dx-g-blog-post-hr-color);
 }
 
 .dx-text-label-2 {
-    color: var(--dx-g-gray-30);
+    color: var(--dx-g-text-label-color);
 }
 
 @media (min-width: 640px) {