@salesforcedevs/dx-components 0.28.2 → 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.28.2",
+    "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": "36a240addaeb78f30a4581776369631a2c27d49a"
+    "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/button/button.css

@@ -138,6 +138,10 @@
     border: 1px solid transparent;
 }
 
+.button.variant_inline.light-text {
+    color: white;
+}
+
 .button.variant_tertiary:hover {
     background: var(--dx-c-button-secondary-color-hover);
     border-color: var(--dx-c-button-secondary-color-hover);

package/src/modules/dx/button/button.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import {
+    ButtonTextColor,
     ButtonVariant,
     IconSprite,
     IconSize,
@@ -18,6 +19,7 @@ export default class Button extends LightningElement {
     @api loading: boolean = false;
     @api size: "large" | "small" = "small";
     @api variant: ButtonVariant = "primary";
+    @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";
 
     // button props
@@ -45,6 +47,7 @@ export default class Button extends LightningElement {
     private get className(): string {
         return cx(
             "button",
+            this.variant === "inline" && `${this.inlineTextColor}-text`,
             this.disabled && "state-disabled",
             `variant_${this.variant}`,
             this.loading && "state-loading",

package/src/modules/dx/cardNews/cardNews.html

@@ -17,6 +17,7 @@
                 <dx-button
                     if:false={hasLargeButton}
                     variant="inline"
+                    inline-text-color={buttonColor}
                     icon-symbol="forward"
                 >
                     {buttonText}

package/src/modules/dx/cardNews/cardNews.ts

@@ -2,6 +2,7 @@ import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { toDxColor } from "utils/css";
 import {
+    ButtonTextColor,
     CardNewsButtonType,
     CardNewsImagePlacement,
     CardNewsImageVerticalAlignment,
@@ -15,6 +16,7 @@ export default class CardNews extends LightningElement {
     @api buttonText?: string = "";
     @api buttonType!: CardNewsButtonType;
     @api color?: string = "white";
+    @api buttonColor?: ButtonTextColor = "dark";
     @api dark?: boolean = false;
     @api size?: CardNewsSize = "normal";
     @api href!: string;

package/src/modules/dx/cardTitle/cardTitle.css

@@ -9,12 +9,14 @@
     --dx-c-card-title-icon-size: 22px;
 }
 
-.dx-text-heading-4 {
+h3.dx-text-heading-4 {
     color: var(--dx-c-card-title-color);
     transition: var(--dx-g-transition-hue-1x);
     font-size: var(--dx-c-card-title-font-size);
     line-height: var(--dx-c-card-title-line-height);
     letter-spacing: var(--dx-c-card-title-letter-spacing);
+    word-break: break-word;
+    hyphens: auto;
 }
 
 .nowrap {

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";