@salesforcedevs/dx-components 0.42.1-alpha.1 → 0.43.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.42.1-alpha.1",
+    "version": "0.43.0-alpha.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/pagination/pagination.ts

@@ -1,5 +1,19 @@
 import classNames from "classnames";
 import { LightningElement, api } from "lwc";
+import { track } from "dx/instrumentation";
+
+const ANALYTICS_INFO = {
+    clickUrl: window.location.href,
+    ctaClick: false,
+    elementType: "button",
+    destinationType: "internal"
+};
+
+enum PaginationClickType {
+    Number,
+    Next,
+    Previous
+}
 
 export default class Pagination extends LightningElement {
     @api currentPage: string = "1";
@@ -76,18 +90,43 @@ export default class Pagination extends LightningElement {
     }
 
     private onPageChange(e: Event) {
+        const page = this.calculatePage(e);
+        const clickType = this.getPaginationClickType(e);
+
+        track(e.currentTarget!, "custEv_pagination", {
+            ...ANALYTICS_INFO,
+            clickText:
+                clickType === PaginationClickType.Number
+                    ? page
+                    : (e.target as HTMLElement).dataset.partId
+        });
+
+        this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));
+    }
+
+    private getPaginationClickType(e: Event): PaginationClickType {
         const button = (e.target as HTMLElement).dataset.partId;
-        let page = this.returnPage(button);
-        if (page === 0) {
-            page = +(e.target as HTMLElement).dataset.pageId!;
+        if (button === "previous") {
+            return PaginationClickType.Previous;
+        } else if (button === "next") {
+            return PaginationClickType.Next;
         }
-        this.dispatchEvent(new CustomEvent("pagechange", { detail: page }));
+
+        return PaginationClickType.Number;
     }
 
-    private returnPage(button: string) {
-        if (!button) {
-            return 0;
+    private calculatePage(e: Event) {
+        const clickType = this.getPaginationClickType(e);
+
+        let page = 0;
+        if (clickType === PaginationClickType.Previous) {
+            page = this._currentPage - 1;
+        } else if (clickType === PaginationClickType.Next) {
+            page = this._currentPage + 1;
+        } else {
+            page = +(e.target as HTMLElement).dataset.pageId!;
         }
-        return this._currentPage + (button === "previous" ? -1 : 1);
+
+        return page;
     }
 }

package/src/modules/dx/section/section.css

@@ -69,7 +69,7 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.text > .label {
+.text > .label:not(:last-child) {
     margin-bottom: var(--dx-g-spacing-lg);
 }
 

package/src/modules/dx/section/section.ts

@@ -3,16 +3,16 @@ import cx from "classnames";
 import { toDxColor } from "utils/css";
 
 export default class Section extends LightningElement {
-    @api backgroundColor?: string | null = "transparent";
-    @api dark?: boolean = false;
+    @api backgroundColor: string = "transparent";
+    @api dark: boolean = false;
     @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
-    @api label?: string | null = null;
-    @api subtitle?: string | null = null;
-    @api textAlign?: "center" | "left" = "left";
-    @api title?: string | null = null;
-    @api topGraphic?: boolean = false;
-    @api graphicOverlap?: boolean = false;
-    @api bottomGraphic?: boolean = false;
+    @api label?: string;
+    @api subtitle?: string;
+    @api textAlign: "center" | "left" = "left";
+    @api title?: string;
+    @api topGraphic: boolean = false;
+    @api graphicOverlap: boolean = false;
+    @api bottomGraphic: boolean = false;
 
     private get style(): string {
         return `--dx-c-section-background-color: ${toDxColor(