@salesforcedevs/dx-components 1.3.14 → 1.3.16

package/lwc.config.json

@@ -4,6 +4,7 @@
         { "npm": "@salesforcedevs/dw-components" }
     ],
     "expose": [
+        "dx/banner",
         "dx/brandThemeProvider",
         "dx/breadcrumbs",
         "dx/button",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.14",
+    "version": "1.3.16",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -32,9 +32,11 @@
         "@types/lodash.defaults": "^4.2.7",
         "@types/lodash.get": "^4.4.6",
         "@types/lodash.kebabcase": "^4.1.7",
+        "@types/luxon": "^3.1.0",
         "@types/uuid": "^8.3.4",
         "@types/vimeo__player": "^2.16.2",
-        "eventsourcemock": "^2.0.0"
+        "eventsourcemock": "^2.0.0",
+        "luxon": "^3.1.0"
     },
-    "gitHead": "d7aebfb9f01ccf595453f8697e480ff452cdea38"
+    "gitHead": "9bc872aa74451b077e4c1d70a7b2378a01a2337a"
 }

package/src/modules/dx/banner/banner.css

@@ -0,0 +1,46 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.container {
+    --primary-color: var(--dx-g-cloud-blue-vibrant-50);
+    --secondary-color: var(--dx-g-cloud-blue-vibrant-40);
+
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    min-height: 24px;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+    background: repeating-linear-gradient(
+        45deg,
+        var(--primary-color),
+        var(--primary-color) 20px,
+        var(--secondary-color) 20px,
+        var(--secondary-color) 40px
+    );
+}
+
+.container_inner {
+    height: 100%;
+    display: flex;
+    background: var(--primary-color);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
+    color: white;
+    font-weight: bold;
+}
+
+.container a {
+    text-decoration: underline;
+    transition: var(--dx-g-transition-hue-1x);
+    margin-right: 4px;
+}
+
+.container a:hover {
+    opacity: 0.8;
+}
+
+.container dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
+    margin-top: var(--dx-g-spacing-2xs);
+}

package/src/modules/dx/banner/banner.html

@@ -0,0 +1,13 @@
+<template>
+    <div class="container">
+        <div class="container_inner dx-text-body-4">
+            <dx-icon symbol="announcement"></dx-icon>
+            <!--
+                NOTE: Here we are rendering mark up using lwc:dom & innerHTML
+                option instead of slots because the html markup will come as a
+                property to the component from a configuration
+            -->
+            <div lwc:dom="manual" class="info-container"></div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/banner/banner.ts

@@ -0,0 +1,12 @@
+import { LightningElement, api } from "lwc";
+import { setContainerInnerHtml } from "dxUtils/lwc";
+
+export default class Banner extends LightningElement {
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
+
+    renderedCallback() {
+        const container = this.template.querySelector(".info-container");
+        setContainerInnerHtml(container, this.bannerMarkup);
+    }
+}

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

@@ -11,6 +11,8 @@ import {
     formattedDateYear
 } from "typings/custom";
 
+import { DateTime } from "luxon";
+
 export default class FormattedDateTime extends LightningElement {
     @api weekday: formattedDateWeekday;
     @api year: formattedDateYear;
@@ -27,7 +29,11 @@ export default class FormattedDateTime extends LightningElement {
             return;
         }
 
-        this._unformattedDate = new Date(value);
+        this._unformattedDate = DateTime.fromISO(value)
+            .plus({
+                hour: 1
+            })
+            .toJSDate();
 
         if (this._unformattedDate.toString() === "Invalid Date") {
             // this is a fix for Safari since it doesn't support date strings with 'yyyy/mm/dd' patterns
@@ -62,7 +68,7 @@ export default class FormattedDateTime extends LightningElement {
     }
 
     getOptions() {
-        const options = {
+        return {
             weekday: this.weekday || undefined,
             year: this.year || undefined,
             month: this.month || undefined,
@@ -70,8 +76,8 @@ export default class FormattedDateTime extends LightningElement {
             hour: this.hour || undefined,
             minute: this.minute || undefined,
             second: this.second,
-            timeZoneName: this.timeZoneName || undefined
+            timeZoneName: this.timeZoneName || undefined,
+            timeZone: "America/Los_Angeles"
         };
-        return options;
     }
 }

package/src/modules/dx/header/header.html

@@ -2,6 +2,10 @@
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
             <dx-skip-nav-link></dx-skip-nav-link>
+            <dx-banner
+                if:true={showBanner}
+                banner-markup={bannerMarkup}
+            ></dx-banner>
             <div class="header_l1">
                 <dx-logo label={title}></dx-logo>
                 <div class="header-cta-container">

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Brand, OptionWithLink, OptionWithNested } from "typings/custom";
-import { toJson } from "dxUtils/normalizers";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 
 const VALID_BRANDS = [
@@ -41,6 +41,8 @@ export abstract class HeaderBase extends LightningElement {
     @api subtitle!: string;
     @api title: string = "Salesforce";
     @api version?: string | null = null;
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">Share your feedback</a>about our new site.</span>';
 
     @api
     get navItems() {
@@ -59,6 +61,15 @@ export abstract class HeaderBase extends LightningElement {
         this._versions = toJson(value);
     }
 
+    @api
+    get showBanner() {
+        return this._showBanner && this.bannerMarkup;
+    }
+
+    set showBanner(value) {
+        this._showBanner = normalizeBoolean(value);
+    }
+
     private _navItems!: OptionWithNested[];
     private _versions!: OptionWithLink[];
     private matchMedia!: MediaQueryList;
@@ -67,6 +78,7 @@ export abstract class HeaderBase extends LightningElement {
     private showMobileNavMenu: boolean = false;
     private showNavScrollShadow: boolean = false;
     protected isSearchOpen: boolean = false;
+    private _showBanner?: boolean = false;
 
     get url() {
         return this.href ? new URL(this.href!) : window.location;