@salesforcedevs/dx-components 1.3.54-alpha.0 → 1.3.56-alpha.1

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.54-alpha.0",
+    "version": "1.3.56-alpha.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -23,7 +23,6 @@
         "lodash.kebabcase": "^4.1.1",
         "microtip": "0.2.2",
         "salesforce-oauth2": "^0.2.0",
-        "user": "0.0.0",
         "uuid": "^9.0.0"
     },
     "devDependencies": {
@@ -33,8 +32,10 @@
         "@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"
     }
 }

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/footer/links.ts

@@ -206,5 +206,11 @@ export const socialLinks = [
         iconSymbol: "rss",
         iconSprite: "general",
         label: "RSS"
+    },
+    {
+        href: "https://www.instagram.com/salesforcedevs",
+        iconSymbol: "instagram",
+        iconSprite: "brand",
+        label: "Instagram"
     }
 ];

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">
@@ -35,7 +39,7 @@
             </div>
             <div class="header_l2">
                 <div class="header_l2_group header_l2_group-title">
-                    <a href="/" class="home-link">
+                    <a href="/" class="home-link" if:true={isValidSubtitle}>
                         <dx-icon
                             class="brand-icon"
                             if:true={isValidBrand}

package/src/modules/dx/header/header.ts

@@ -14,4 +14,8 @@ export default class Header extends HeaderBase {
     protected mobileBreakpoint(): string {
         return "768px";
     }
+
+    get isValidSubtitle() {
+        return this.isValidBrand || this.subtitle;
+    }
 }

package/src/modules/dx/hr/hr.css

@@ -49,7 +49,6 @@ dx-button::before {
     content: "";
     border-bottom: 2px solid var(--dx-g-gray-95);
     flex: 1 1;
-    transform: translateY(-2px); /* offset for display font ghost padding */
     margin: auto;
     margin-right: var(--dx-g-spacing-md);
 }

package/src/modules/dx/searchResults/searchResults.css

@@ -197,8 +197,8 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 
 .CoveoSort.coveo-selected,
 .CoveoSort.coveo-selected:hover {
-    color: var(--dx-g-blue-vibrant-50);
-    border-bottom-color: var(--dx-g-blue-vibrant-50);
+    color: var(--dx-g-blue-vibrant-40);
+    border-bottom-color: var(--dx-g-blue-vibrant-40);
 }
 
 .CoveoBreadcrumb {

package/src/modules/dx/sidebar/sidebar.html

@@ -88,7 +88,6 @@
                 tree-root={tree.tree}
                 onselect={onSelect}
                 value={value}
-                onfocus={onItemsFocused}
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>

package/src/modules/dx/sidebar/sidebar.ts

@@ -169,6 +169,8 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
+
+        this.dispatchEvent(new CustomEvent("sidebarclick"));
     }
 
     private onToggleClick(event: Event) {
@@ -255,10 +257,4 @@ export default class Sidebar extends SidebarBase {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
-
-    private onItemsFocused(): void {
-        this.template
-            .querySelector("dx-sidebar-search")
-            ?.requestOpenDropdown(false);
-    }
 }

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -95,6 +95,8 @@ export default class Sidebar extends SidebarBase {
 
     private onSelect(event: CustomEvent) {
         this._value = event.detail.name;
+
+        this.dispatchEvent(new CustomEvent("sidebarclick"));
     }
 
     private onToggleClick(event: Event) {

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -78,11 +78,6 @@ export default class SidebarSearch extends LightningElement {
         }
     }
 
-    @api
-    requestOpenDropdown(value: boolean) {
-        this.dropdownRequestedOpen = value;
-    }
-
     private _coveoAdvancedQueryConfig!: { [key: string]: any };
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.css

@@ -1,10 +1,10 @@
 @import "dxHelpers/reset";
 
 :host {
-    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-40);
     --dx-c-button-custom-background: transparent;
     --dx-c-button-custom-border: 1px solid transparent;
-    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-40);
     --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
     --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
     --dx-c-slot-empty-width: max-content;

package/src/modules/dx/toc/toc.ts

@@ -2,6 +2,7 @@ import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import { ContentElement } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
+import { track as sendGtm } from "dxUtils/analytics";
 
 export default class Toc extends LightningElement {
     @api title!: string;
@@ -65,10 +66,22 @@ export default class Toc extends LightningElement {
     private onClick(e: Event) {
         const target = e.currentTarget as HTMLElement;
         const id = target.getAttribute("contentid");
+        const text = target.getAttribute("data-text");
+        const href = target.getAttribute("href");
+
         this.dispatchEvent(
             new CustomEvent("selectedcontent", { detail: { name: id } })
         );
+
         this._value = id!;
+
+        sendGtm(e.currentTarget!, "custEv_tableOfContentsClick", {
+            clickText: text,
+            clickUrl: href,
+            elementType: "link",
+            locationOnPage: "table of contents",
+            itemTitle: this.title
+        });
     }
 
     private toggleShowContent() {

package/src/modules/dx/treeItem/treeItem.html

@@ -24,6 +24,7 @@
                 key={child.key}
                 tree-node={child}
                 selected-key={selectedKey}
+                parent-name={treeNode.label}
             ></dx-tree-item>
         </template>
     </template>

package/src/modules/dx/treeItem/treeItem.ts

@@ -1,7 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
 import { track } from "dxUtils/analytics";
-import { SidebarGtmAction } from "typings/custom";
 import { isInViewport } from "dxUtils/browser";
 
 const DEFAULT_TARGET = "_self";
@@ -9,6 +8,7 @@ const DEFAULT_TARGET = "_self";
 export default class TreeItem extends LightningElement {
     @api selectedKey?: string;
     @api isRoot: boolean = false;
+    @api parentName?: string = "";
 
     @api
     public get treeNode() {
@@ -94,7 +94,7 @@ export default class TreeItem extends LightningElement {
     private onIconClick(event: CustomEvent): void {
         const isSelectAction = false;
         this.doExpand(isSelectAction);
-        this.sendGtm(event, this.isExpanded ? "expand" : "collapse");
+        this.sendGtm(event);
     }
 
     private onLinkClick(event: Event): void {
@@ -107,7 +107,7 @@ export default class TreeItem extends LightningElement {
             this.doExpand(isSelectAction);
         }
 
-        this.sendGtm(event, "click");
+        this.sendGtm(event);
         this.fireEvent("tileselected", { name: this._treeNode.name });
     }
 
@@ -137,10 +137,12 @@ export default class TreeItem extends LightningElement {
         this.isExpanded = value;
     }
 
-    private sendGtm(event: Event, sideNavAction: SidebarGtmAction) {
-        track(event.currentTarget!, "custEv_leftNavLinkClick", {
+    private sendGtm(event: Event) {
+        track(event.currentTarget!, "custEv_leftNavClick", {
+            navType: "left nav bar",
             clickText: this._treeNode.label,
-            sideNavAction
+            clickUrl: this.href,
+            navItem: this.parentName
         });
     }
 }

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;