@salesforcedevs/dx-components 1.5.0-alpha2 → 1.8.0-node-20-alpha

package/lwc.config.json

@@ -42,6 +42,7 @@
         "dx/dropdownOption",
         "dx/embeddedVideo",
         "dx/emptyState",
+        "dx/eyebrow",
         "dx/faq",
         "dx/feature",
         "dx/featureFlag",

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.5.0-alpha2",
+    "version": "1.8.0-node-20-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
-        "node": "18.x"
+        "node": "20.x"
     },
     "publishConfig": {
         "access": "public"
@@ -44,6 +44,6 @@
         "luxon": "3.4.4"
     },
     "volta": {
-        "node": "18.18.0"
+        "node": "20.19.0"
     }
 }

package/src/modules/dx/cardDocs/cardDocs.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} class={className} target={target}>
+    <a href={href} class={className} target={target} part="base">
         <img
             if:true={imgSrc}
             alt={imgAlt}
@@ -8,22 +8,32 @@
         />
         <div
             class="dx-card-base_section-vertical dx-card-base_column card_section-text"
+            part="content"
         >
-            <span class="dx-text-label-3" part="label">{label}</span>
+            <span class="dx-text-label-3" lwc:if={label} part="label">
+                {label}
+            </span>
             <dx-card-title
+                lwc:if={header}
                 header={header}
                 target={target}
                 onclick={handleLinkClick}
+                exportparts="title"
             ></dx-card-title>
             <span
                 lwc:if={body}
                 class="dx-text-body-2"
                 onclick={handleTextClick}
+                part="body"
             >
                 {body}
             </span>
+            <span lwc:if={subText} class="dx-text-body-3">{subText}</span>
         </div>
-        <div class="dx-card-base_section-vertical dx-card-base_ctas">
+        <div
+            class="dx-card-base_section-vertical dx-card-base_ctas"
+            part="action"
+        >
             <slot onslotchange={onSlotChange}></slot>
         </div>
     </a>

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -6,6 +6,7 @@ import { track } from "dxUtils/analytics";
 
 export default class CardDocs extends LightningElement {
     @api body!: string;
+    @api subText?: string | null = null;
     @api href!: string;
     @api imgAlt?: string = "";
     @api imgSrc?: string | null = null;

package/src/modules/dx/cardTitle/cardTitle.html

@@ -1,5 +1,5 @@
 <template>
-    <h3 class="dx-text-display-6">
+    <h3 class="dx-text-display-6" part="title">
         <a if:true={href} href={href} target={target}>
             {titleToWrap}
             <template if:true={needsSpace}>&#32;</template>

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

@@ -1,5 +1,4 @@
 /* eslint-disable @lwc/lwc/no-document-query */
-import { OPTIMIZELY_INSTANCE, USER_ID } from "dx/featureFlag";
 import { LightningElement } from "lwc";
 
 export const LOCAL_STORAGE_KEY = "dx-dark-mode-theme";
@@ -30,7 +29,10 @@ declare module globalThis {
 
 export const DARK_MODE_THEMES = ["dark", "light"];
 export const DARKMODE_TOGGLE_EVENT_NAME = "UPDATE_DARK_MODE";
-const DARK_MODE_FEATURE_FLAG = "dark_mode";
+
+export const isDarkModeEnabled = () => {
+    return process.env.DARK_MODE;
+};
 
 export const dispatchDarkModeToggleEvent = () => {
     window.dispatchEvent(new Event(DARKMODE_TOGGLE_EVENT_NAME));
@@ -53,40 +55,32 @@ export const setLocalStorageDarkModeSetting = (theme: string) => {
 
 export default class DarkModeManager extends LightningElement {
     renderedCallback(): void {
-        OPTIMIZELY_INSTANCE!.onReady().then(({ success }) => {
-            if (
-                success &&
-                OPTIMIZELY_INSTANCE!.isFeatureEnabled(
-                    DARK_MODE_FEATURE_FLAG,
-                    USER_ID
-                )
-            ) {
-                if (!globalThis.singletonDarkModeManagerRendered) {
-                    const theme = getLocalStorageDarkModeSetting();
-                    if (theme) {
-                        if (DARK_MODE_THEMES.includes(theme)) {
-                            setTheme(theme);
-                        }
-                    } else if (isBrowserDarkModeEnabled()) {
-                        setTheme("dark");
-                    }
-                    window.addEventListener(
-                        DARKMODE_TOGGLE_EVENT_NAME,
-                        onDarkModeToggle
-                    );
-                    globalThis.singletonDarkModeManagerRendered = true;
+        if (
+            isDarkModeEnabled() &&
+            !globalThis.singletonDarkModeManagerRendered
+        ) {
+            const theme = getLocalStorageDarkModeSetting();
+            if (theme) {
+                if (DARK_MODE_THEMES.includes(theme)) {
+                    setTheme(theme);
                 }
+            } else if (isBrowserDarkModeEnabled()) {
+                setTheme("dark");
             }
-        });
+            window.addEventListener(
+                DARKMODE_TOGGLE_EVENT_NAME,
+                onDarkModeToggle
+            );
+            globalThis.singletonDarkModeManagerRendered = true;
+        }
     }
 
     disconnectedCallback(): void {
-        if (globalThis.singletonDarkModeManagerRendered) {
+        if (isDarkModeEnabled()) {
             window.removeEventListener(
                 DARKMODE_TOGGLE_EVENT_NAME,
                 onDarkModeToggle
             );
-            globalThis.singletonDarkModeManagerRendered = false;
         }
     }
 }

package/src/modules/dx/eyebrow/eyebrow.css

@@ -0,0 +1,44 @@
+@import "dxHelpers/text";
+
+.eyebrow {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--dx-g-blue-vibrant-10);
+    color: white;
+    padding: 6px 40px;
+    gap: 4px;
+    box-sizing: border-box;
+}
+
+.eyebrow.fixed {
+    position: fixed;
+    top: var(--dx-g-global-header-height, 0);
+    width: 100%;
+    z-index: var(--dx-g-z-index-max, 999);
+}
+
+.eyebrow > dx-icon {
+    padding-right: 5px;
+}
+
+.eyebrow > span {
+    text-align: center;
+}
+
+.eyebrow > span > a {
+    color: white;
+    text-decoration: underline;
+}
+
+@media (min-width: 768px) and (max-width: 1279px) {
+    .eyebrow {
+        padding: 6px 32px;
+    }
+}
+
+@media (max-width: 767px) {
+    .eyebrow {
+        padding: 6px 24px;
+    }
+}

package/src/modules/dx/eyebrow/eyebrow.html

@@ -0,0 +1,16 @@
+<template>
+    <div class={className}>
+        <dx-icon
+            sprite={iconSprite}
+            symbol={iconSymbol}
+            size={iconSize}
+        ></dx-icon>
+        <span>
+            {body}
+            <template lwc:if={hasCta}>
+                &nbsp;
+                <a target={ctaTarget} href={ctaHref}>{ctaLabel}</a>
+            </template>
+        </span>
+    </div>
+</template>

package/src/modules/dx/eyebrow/eyebrow.ts

@@ -0,0 +1,32 @@
+import cx from "classnames";
+import { normalizeBoolean } from "dxUtils/normalizers";
+import { api, LightningElement } from "lwc";
+import { IconSize, IconSprite, IconSymbol } from "typings/custom";
+
+export default class Eyebrow extends LightningElement {
+    @api body = "";
+    @api ctaHref = "";
+    @api ctaLabel = "";
+    @api ctaTarget = "_blank";
+    @api iconSize: IconSize = "large";
+    @api iconSprite: IconSprite = "action";
+    @api iconSymbol: IconSymbol = "info";
+
+    @api
+    get fixed() {
+        return this._fixed;
+    }
+    set fixed(value: string | boolean) {
+        this._fixed = normalizeBoolean(value);
+    }
+
+    private _fixed: boolean = false;
+
+    get hasCta() {
+        return Boolean(this.ctaHref && this.ctaLabel);
+    }
+
+    get className() {
+        return cx("eyebrow", "dx-text-body-3", this.fixed && "fixed");
+    }
+}

package/src/modules/dx/feature/feature.css

@@ -9,6 +9,9 @@
     --dx-c-feature-img-container-padding: 4rem;
     --dx-c-feature-image-max-width: 100%;
     --dx-c-feature-description-font-size: var(--dx-g-text-base);
+    --dx-c-feature-description-img-width: 45%;
+    --dx-c-feature-description-gap: 0;
+    --dx-c-feature-description-img-gap: 0;
 }
 
 .label {
@@ -31,11 +34,18 @@ h3 {
 section {
     display: flex;
     align-items: center;
+    gap: var(--dx-c-feature-description-img-gap);
+}
+
+.description {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dx-c-feature-description-gap);
 }
 
 .description,
 .image {
-    width: 45%;
+    width: var(--dx-c-feature-description-img-width);
 }
 
 .image {

package/src/modules/dx/feature/feature.html

@@ -2,8 +2,8 @@
     <section class={sectionClass}>
         <div class="description">
             <h2 if:true={hasLabel} class="dx-text-display-8 label">{label}</h2>
-            <h3 class="dx-text-display-4">{header}</h3>
-            <div class="body dx-text-body-2">
+            <h3 class="dx-text-display-4" part="header">{header}</h3>
+            <div class="body dx-text-body-2" part="body">
                 <slot></slot>
             </div>
             <dx-button
@@ -13,6 +13,7 @@
                 icon-symbol={iconSymbol}
                 href={buttonHref}
                 onclick={handleClick}
+                if:true={buttonHref}
             >
                 {buttonLabel}
             </dx-button>

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

@@ -3,42 +3,37 @@ 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.
-export const USER_ID = "sf-dwo";
-const LOCAL_ENVIRONMENT_SDK_KEY = "DzwQxncbVQsbMnXfjpasL";
-const SDK_KEY = process.env.OPTIMIZELY_SDK_KEY;
-const DATAFILE_ACCESS_TOKEN = process.env.OPTIMIZELY_DATAFILE_ACCESS_TOKEN;
-const DATAFILE_OPTIONS =
-    SDK_KEY && DATAFILE_ACCESS_TOKEN
-        ? {
-              urlTemplate: `https://config.optimizely.com/datafiles/auth/${SDK_KEY}.json`,
-              datafileAccessToken: DATAFILE_ACCESS_TOKEN
-          }
-        : undefined;
-export const OPTIMIZELY_INSTANCE = optimizelySdk.createInstance({
-    sdkKey: SDK_KEY || LOCAL_ENVIRONMENT_SDK_KEY,
-    datafileOptions: DATAFILE_OPTIONS
-});
+const userId = "user123";
 
 export default class FeatureFlag extends LightningElement {
     @api flag!: string;
 
+    private optimizelyInstance: any;
+
     private showElements(slot: any) {
         slot.classList.remove("hidden");
     }
 
-    /*
-        Note that this component only stops the element from being redered to the screen.
-        If you want to stop the execution of the code for the element, you will need to also check
-        the feature flag in that component.
-    */
+    connectedCallback(): void {
+        this.optimizelyInstance = optimizelySdk.createInstance({
+            sdkKey: process.env.OPTIMIZELY_SDK_KEY
+        });
+    }
+
     renderedCallback(): void {
         const slotEl = this.template.querySelector("slot") as any;
 
-        OPTIMIZELY_INSTANCE!.onReady().then(({ success }) => {
-            if (
-                success &&
-                OPTIMIZELY_INSTANCE!.isFeatureEnabled(this.flag, USER_ID)
-            ) {
+        this.optimizelyInstance?.onReady().then(({ success, reason }: any) => {
+            if (!success) {
+                console.log(
+                    `Optimizely client initialization unsuccessful, reason: ${reason}`
+                );
+                return;
+            }
+            const user = this.optimizelyInstance?.createUserContext(userId);
+            const decision = user?.decide(this.flag);
+
+            if (decision?.enabled) {
                 this.showElements(slotEl);
             }
         });

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

@@ -21,14 +21,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;
@@ -92,7 +95,7 @@ export default class FeaturedContentHeader extends LightningElement {
     }
 
     private get isDarkModeEnabled() {
-        return this.enableDarkModeToggle;
+        return this.enableDarkModeToggle && isDarkModeEnabled();
     }
 
     private get hasPlainImage() {

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

@@ -250,7 +250,7 @@ footer.signup-variant-no-signup {
 }
 
 .content-container_bottom a {
-    text-decoration: none;
+    text-decoration: underline;
 }
 
 .terms {