@salesforcedevs/dx-components 1.8.0-node-20-alpha → 1.8.1-canary.0

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.8.0-node-20-alpha",
+    "version": "1.8.1-canary.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
-        "node": "20.x"
+        "node": "18.x"
     },
     "publishConfig": {
         "access": "public"
@@ -44,6 +44,6 @@
         "luxon": "3.4.4"
     },
     "volta": {
-        "node": "20.19.0"
+        "node": "18.18.0"
     }
 }

package/src/modules/dx/cardContent/cardContent.html

@@ -1,23 +1,22 @@
 <template>
     <div class={className}>
         <a
-            if:true={hasImage}
+            lwc:if={hasImage}
             href={href}
             onclick={handleClick}
             onmouseenter={setLinkHovered}
             onmouseleave={setLinkInactive}
             target={target}
             part="image"
-            class="image-link dx-card-base_borderless-image_link"
+            class={imgAnchorClassName}
             aria-label={imgLinkAriaLabel}
             style={backgroundStyle}
         >
             <slot name="image-badge"></slot>
-
             <img
-                if:true={imgSrc}
+                lwc:if={imgSrc}
                 alt={imgAlt}
-                class="image dx-card-base_image dx-card-base_borderless-image"
+                class={imgClassName}
                 src={imgSrc}
                 loading="lazy"
             />
@@ -25,7 +24,7 @@
         <div
             class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
-            <span if:true={label} part="label" class="label dx-text-label-3">
+            <span lwc:if={label} part="label" class="label dx-text-label-3">
                 {label}
             </span>
             <dx-card-title
@@ -38,12 +37,12 @@
             ></dx-card-title>
             <span
                 class="subtitle dx-text-label-1-dark"
-                if:true={subtitle}
+                lwc:if={subtitle}
                 part="subtitle"
             >
                 {subtitle}
             </span>
-            <div class="authors" if:true={authors}>
+            <div class="authors" lwc:if={authors}>
                 <template for:each={authors} for:item="author">
                     <dx-image-and-label
                         key={author.key}
@@ -53,9 +52,12 @@
                     ></dx-image-and-label>
                 </template>
             </div>
-            <span if:true={body} class="body dx-text-body-2" part="body">
+            <span lwc:if={body} class="body dx-text-body-2" part="body">
                 {body}
             </span>
+            <span lwc:else class="body dx-text-body-2" part="body">
+                <slot name="body"></slot>
+            </span>
             <span class="datetime dx-text-body-3" part="datetime">
                 <slot
                     name="datetime"

package/src/modules/dx/cardContent/cardContent.ts

@@ -3,7 +3,7 @@ import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
 import { isSlotEmpty } from "dxUtils/slot";
 import { toDxColor } from "dxUtils/css";
-import { toJson } from "dxUtils/normalizers";
+import { normalizeBoolean, toJson } from "dxUtils/normalizers";
 import ImageAndLabel from "dx/imageAndLabel";
 
 export default class CardContent extends LightningElement {
@@ -36,7 +36,6 @@ export default class CardContent extends LightningElement {
         }
         return undefined;
     }
-
     set authors(value: any) {
         if (value !== "undefined") {
             this._authors = (toJson(value) as Array<any>)?.filter(
@@ -46,6 +45,15 @@ export default class CardContent extends LightningElement {
     }
     private _authors?: Array<ImageAndLabel>;
 
+    @api
+    get borderless() {
+        return this._borderless;
+    }
+    set borderless(value: string | boolean) {
+        this._borderless = normalizeBoolean(value);
+    }
+    private _borderless = true;
+
     private isDatetimeEmpty: boolean = true;
     private isLinkHovered: boolean = false;
 
@@ -55,16 +63,12 @@ export default class CardContent extends LightningElement {
             : "";
     }
 
-    private get imgLinkAriaLabel() {
-        return `Read More About ${this.header}`;
-    }
-
     private get className(): string {
         return cx(
             "card-content",
             "dx-card-base",
-            "dx-card-base_borderless",
             `dx-card-base_layout-${this.layout}`,
+            this.borderless && "dx-card-base_borderless",
             this.featured && "dx-card-base_featured",
             this.isDatetimeEmpty && "hide-datetime",
             this.isLinkHovered && "dx-card-base_link-hovered",
@@ -72,6 +76,25 @@ export default class CardContent extends LightningElement {
         );
     }
 
+    private get imgAnchorClassName(): string {
+        return cx(
+            "image-link",
+            this.borderless && "dx-card-base_borderless-image_link"
+        );
+    }
+
+    private get imgClassName(): string {
+        return cx(
+            "image",
+            "dx-card-base_image",
+            this.borderless && "dx-card-base_borderless-image"
+        );
+    }
+
+    private get imgLinkAriaLabel() {
+        return `Read More About ${this.header}`;
+    }
+
     private get hasImage() {
         return this.imgSrc || this.backgroundColor;
     }