@salesforcedevs/dx-components 1.3.266 → 1.3.269

package/lwc.config.json

@@ -42,6 +42,7 @@
         "dx/emptyState",
         "dx/faq",
         "dx/feature",
+        "dx/featureFlag",
         "dx/featureGrid",
         "dx/featuredContentHeader",
         "dx/featuresList",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.266",
+    "version": "1.3.269",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -12,6 +12,7 @@
     "dependencies": {
         "@coveo/headless": "2.16.5",
         "@floating-ui/dom": "1.5.1",
+        "@optimizely/optimizely-sdk": "^5.3.0",
         "@salesforcedevs/sfdocs-wires": "0.6.98",
         "@types/throttle-debounce": "^5.0.0",
         "@vimeo/player": "^2.16.4",
@@ -45,5 +46,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "c4e5e744777871657aca0f2977421b39a4ef5340"
+    "gitHead": "e1806b617e4c5f5c2c1fbb129c159fbd316a7793"
 }

package/src/modules/dx/featureFlag/featureFlag.css

@@ -0,0 +1,3 @@
+.hidden {
+    display: none;
+}

package/src/modules/dx/featureFlag/featureFlag.html

@@ -0,0 +1,3 @@
+<template>
+    <slot class="hidden"></slot>
+</template>

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

@@ -0,0 +1,41 @@
+import { api, LightningElement } from "lwc";
+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 = "user123";
+
+export default class FeatureFlag extends LightningElement {
+    @api flag!: string;
+
+    private optimizelyInstance: any;
+
+    private showElements(slot: any) {
+        slot.classList.remove("hidden");
+    }
+
+    connectedCallback(): void {
+        this.optimizelyInstance = optimizelySdk.createInstance({
+            sdkKey: process.env.OPTIMIZELY_SDK_KEY
+        });
+    }
+
+    renderedCallback(): void {
+        const slotEl = this.template.querySelector("slot") as any;
+
+        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.css

@@ -22,6 +22,8 @@
         translateY(14px);
     --dx-c-featured-content-header-swoop-display: block;
     --dx-c-featured-content-header-swoop-height: 30%;
+    --dx-c-featured-content-header-background-image-position: top right;
+    --dx-c-featured-content-header-background-image-size: contain;
 }
 
 .container {
@@ -50,8 +52,10 @@
         var(--dx-c-featured-content-header-padding-horizontal);
     background-image: var(--background-image);
     background-repeat: no-repeat;
-    background-position: top right;
-    background-size: contain;
+    background-position: var(
+        --dx-c-featured-content-header-background-image-position
+    );
+    background-size: var(--dx-c-featured-content-header-background-image-size);
 }
 
 /* LAYOUTS */

package/src/modules/dx/formattedDateTime/formattedDateTime.ts

@@ -11,6 +11,7 @@ import {
     formattedDateWeekday,
     formattedDateYear
 } from "typings/custom";
+import { DateTime } from "luxon";
 
 export default class FormattedDateTime extends LightningElement {
     @api weekday: formattedDateWeekday;
@@ -49,10 +50,11 @@ export default class FormattedDateTime extends LightningElement {
 
     formatDate(unformattedDate: Date, options: formattedDateOptions) {
         const locale = navigator.language;
-        let formattedDateTime = Intl.DateTimeFormat(
-            locale,
-            options as any
-        ).format(unformattedDate) as string;
+
+        let formattedDateTime = DateTime.fromISO(unformattedDate?.toISOString())
+            .setLocale(locale)
+            .toLocaleString(options as any);
+
         formattedDateTime = this.updateDayPeriodFormatting(formattedDateTime);
         return formattedDateTime;
     }