@salesforcedevs/dx-components 0.20.2 → 0.23.0

package/src/modules/utils/archiveCard/archiveCard.ts

@@ -0,0 +1,35 @@
+import { LightningElement, api } from "lwc";
+import { LinkTarget, Color } from "typings/custom";
+
+const MOBILE_QUERY = "(max-width: 640px)";
+
+export abstract class ArchiveCard extends LightningElement {
+    @api contentType: "Blog" | "Podcast" = "Blog";
+    @api href!: string;
+    @api title!: string;
+    @api target: LinkTarget = "_self";
+
+    private matchMedia!: MediaQueryList;
+    protected mobile = false;
+
+    protected get badgeColor(): Color {
+        return this.contentType === "Blog" ? "teal" : "blue";
+    }
+
+    connectedCallback(): void {
+        this.matchMedia = window.matchMedia(MOBILE_QUERY);
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback(): void {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (e: MediaQueryListEvent | MediaQueryList) =>
+        (this.mobile = e.matches);
+
+    protected get badgeSize(): string {
+        return (this.mobile && "small") || "default";
+    }
+}

package/src/modules/utils/normalizers/normalizers.ts

@@ -6,7 +6,7 @@ export const toJson = (value: string | object | null) =>
 export const normalizeToArray = (
     value: string[] | string | null,
     splitKey: string = ","
-) => {
+): Array<string> => {
     if (!value) {
         return [];
     }
@@ -19,7 +19,7 @@ export const normalizeToArray = (
         }
     }
 
-    return Array.isArray(value) ? value : [value];
+    return (Array.isArray(value) ? value : [value]) as Array<string>;
 };
 
 type WordpressPodcastEpisode = {