@salesforcedevs/dx-components 0.29.0 → 0.30.0

package/lwc.config.json

@@ -43,6 +43,7 @@
         "dx/helmet",
         "dx/hr",
         "dx/icon",
+        "dx/iconBadge",
         "dx/imageAndLabel",
         "dx/input",
         "dx/instrumentation",
@@ -82,6 +83,8 @@
         "helpers/table",
         "helpers/text",
         "base-elements/headerBase",
+        "base-elements/matchMediaElement",
+        "utils/constants",
         "utils/normalizers",
         "utils/highlight"
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.29.0",
+    "version": "0.30.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -25,5 +25,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "2ae96c272181de5d9f1199bb077aad6fe621cb54"
+    "gitHead": "2892ffcc573566253f854054c4186226dd182ef0"
 }

package/src/modules/base-elements/matchMediaElement/matchMediaElement.ts

@@ -0,0 +1,59 @@
+import { LightningElement } from "lwc";
+import {
+    BREAKPOINT_MOBILE,
+    BREAKPOINT_TABLET,
+    DEVICE_DESKTOP,
+    DEVICE_TABLET,
+    DEVICE_MOBILE
+} from "utils/constants";
+
+const boilerplate = "screen and ";
+const BREAKPOINT_QUERY_MOBILE = `${boilerplate}(max-width: ${BREAKPOINT_MOBILE})`;
+const BREAKPOINT_QUERY_TABLET = `${boilerplate}(min-width: ${BREAKPOINT_MOBILE}) and (max-width: ${BREAKPOINT_TABLET})`;
+const BREAKPOINT_QUERY_DESKTOP = `${boilerplate}(min-width: ${BREAKPOINT_TABLET})`;
+
+const breakpointConfigs = [
+    { name: DEVICE_MOBILE, query: BREAKPOINT_QUERY_MOBILE },
+    { name: DEVICE_TABLET, query: BREAKPOINT_QUERY_TABLET },
+    { name: DEVICE_DESKTOP, query: BREAKPOINT_QUERY_DESKTOP }
+];
+
+export abstract class MatchMediaElement extends LightningElement {
+    private deviceType: DEVICE_MOBILE | DEVICE_TABLET | DEVICE_DESKTOP =
+        DEVICE_DESKTOP;
+    private matches: {
+        match: MediaQueryList;
+        callback: (e: MediaQueryListEvent | MediaQueryList) => void;
+    }[] = [];
+
+    private get isMobile(): boolean {
+        return this.deviceType === DEVICE_MOBILE;
+    }
+    private get isTablet(): boolean {
+        return this.deviceType === DEVICE_TABLET;
+    }
+    private get isDesktop(): boolean {
+        return this.deviceType === DEVICE_DESKTOP;
+    }
+
+    connectedCallback() {
+        this.matches = breakpointConfigs.map(
+            ({ name, query }: { name: string; query: string }) => {
+                const match = window.matchMedia(query);
+                const callback = (e: MediaQueryListEvent | MediaQueryList) => {
+                    if (e.matches) {
+                        this.deviceType = name;
+                    }
+                };
+                match.addEventListener("change", callback);
+                return { match, callback };
+            }
+        );
+    }
+
+    disconnectedCallback() {
+        this.matches.forEach(({ match, callback }) =>
+            match.removeEventListener("change", callback)
+        );
+    }
+}

package/src/modules/dx/headerNav/headerNav.ts

@@ -3,7 +3,7 @@ import { TabVariant, Option } from "typings/custom";
 export default class HeaderNav extends LightningElement {
     @api pathname: string | null = null;
     @api variant: TabVariant = "default";
-    @api ariaLabel: string = "Navigation Bar";
+    @api ariaLabel: string = "Primary Navigation";
 
     @api
     set navItems(_navItems: Option[]) {

package/src/modules/utils/constants/breakpoints.ts

@@ -0,0 +1,9 @@
+// these breakpoints are written in terms of "max-width"
+export const BREAKPOINT_MOBILE_SMALL = "640px";
+export const BREAKPOINT_MOBILE = "768px";
+export const BREAKPOINT_TABLET = "1024px";
+export const BREAKPOINT_DESKTOP = "1280px";
+
+export const DEVICE_DESKTOP = "desktop";
+export const DEVICE_TABLET = "tablet";
+export const DEVICE_MOBILE = "mobile";

package/src/modules/utils/constants/constants.ts

@@ -0,0 +1 @@
+export * from "./breakpoints";