@salesforcedevs/dx-components 1.3.46 → 1.3.47

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.46",
+    "version": "1.3.47",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "decc9a3791a30eb8d16fb7cffb3adf7092ab863b"
+    "gitHead": "37ecd8ca7dc38636ff3ec336077512ab52065c8d"
 }

package/src/modules/dx/cardBlogPost/cardBlogPost.html

@@ -1,8 +1,6 @@
 <template>
     <dx-card-content
-        author-href={authorHref}
-        author-img-src={authorImgSrc}
-        author-label={authorLabel}
+        authors={authors}
         body={body}
         featured={featured}
         href={href}

package/src/modules/dx/cardBlogPost/cardBlogPost.ts

@@ -1,9 +1,6 @@
 import { LightningElement, api } from "lwc";
 
 export default class CardBlogPost extends LightningElement {
-    @api authorHref?: string | null = null;
-    @api authorImgSrc!: string | null;
-    @api authorLabel!: string | null;
     @api body!: string;
     @api datetime!: string;
     @api dateTime?: string | null = null;
@@ -14,6 +11,7 @@ export default class CardBlogPost extends LightningElement {
     @api label?: string;
     @api target?: string | null = null;
     @api title!: string;
+    @api authors?: Array<any> | null = null;
 
     // LWC is being compiled so that datetime is being interpreted as date-time
     // ONLY from from the implementation in dx-card-blog-post-provider

package/src/modules/dx/cardContent/cardContent.css

@@ -7,6 +7,11 @@
     height: 100%;
 }
 
+.authors > *:not(:last-child) {
+    padding-bottom: 6px;
+    display: block;
+}
+
 .card-content {
     display: flex;
     justify-content: flex-start;

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

@@ -42,12 +42,16 @@
             >
                 {subtitle}
             </span>
-            <dx-image-and-label
-                if:true={hasAuthor}
-                href={authorHref}
-                img-src={authorImgSrc}
-                label={authorLabel}
-            ></dx-image-and-label>
+            <div class="authors" if:true={authors}>
+                <template for:each={authors} for:item="author">
+                    <dx-image-and-label
+                        key={author.key}
+                        img-src={author.imgSrc}
+                        label={author.name}
+                        href={author.href}
+                    ></dx-image-and-label>
+                </template>
+            </div>
             <span if:true={body} class="body dx-text-body-2" part="body">
                 {body}
             </span>

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

@@ -3,11 +3,10 @@ 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 { ImageAndLabel } from "../imageAndLabel";
 
 export default class CardContent extends LightningElement {
-    @api authorHref?: string | null = null;
-    @api authorImgSrc?: string | null = null;
-    @api authorLabel?: string | null = null;
     @api backgroundColor?: string | null = null;
     @api body?: string | null = null;
     @api featured?: boolean = false;
@@ -19,14 +18,30 @@ export default class CardContent extends LightningElement {
     @api subtitle?: string | null = null;
     @api target?: string | null = null;
     @api title!: string;
+    @api
+    get authors() {
+        if (this._authors && this._authors.length) {
+            return this._authors!.map((author, index) => ({
+                ...author,
+                imgSrc: author.avatar_urls?.["24"] || author.image_src,
+                key: index
+            }));
+        }
+        return undefined;
+    }
+
+    set authors(value: any) {
+        if (value !== "undefined") {
+            this._authors = (toJson(value) as Array<any>)?.filter(
+                (author) => author.name
+            );
+        }
+    }
+    private _authors?: Array<ImageAndLabel>;
 
     private isDatetimeEmpty: boolean = true;
     private isLinkHovered: boolean = false;
 
-    private get hasAuthor() {
-        return this.authorImgSrc && this.authorLabel;
-    }
-
     private get backgroundStyle(): string {
         return this.backgroundColor
             ? `background: ${toDxColor(this.backgroundColor)}`

package/src/modules/dx/cardExpanded/cardExpanded.css

@@ -12,6 +12,7 @@ dx-formatted-date-time,
 .podcast-length {
     /* Push down a little to align with dx-image-and-label */
     margin-top: 3px;
+    margin-right: var(--dx-g-spacing-sm);
 }
 
 .card-body {
@@ -19,8 +20,7 @@ dx-formatted-date-time,
 }
 
 .card-extra-info {
-    gap: var(--dx-g-spacing-sm);
-    align-items: center;
+    text-align: start;
 }
 
 .card-container {
@@ -28,11 +28,19 @@ dx-formatted-date-time,
     padding-bottom: var(--dx-g-spacing-xl);
     flex-direction: column;
     gap: var(--dx-g-spacing-smd);
+    display: flex;
 }
 
-.card-container,
-.card-extra-info {
-    display: flex;
+.card-extra-info .authors {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+.card-extra-info .authors > *:not(:last-child) {
+    padding-right: var(--dx-g-spacing-md);
+}
+
+.card-extra-info .authors > * {
+    display: inline-flex;
 }
 
 .card-dot-separator {
@@ -43,6 +51,8 @@ dx-formatted-date-time,
     background-color: var(--dx-g-text-label-color);
     border-radius: 100%;
     margin-bottom: 3px;
+    display: inline-block;
+    margin-right: var(--dx-g-spacing-sm);
 }
 
 .card-mobile .card-body {

package/src/modules/dx/cardExpanded/cardExpanded.html

@@ -8,11 +8,15 @@
             title={title}
         ></dx-card-title>
         <div class="card-extra-info dx-text-label-1-dark">
-            <dx-image-and-label
-                if:true={renderAuthor}
-                img-src={authorImage}
-                label={authorLabel}
-            ></dx-image-and-label>
+            <div class="authors" if:true={renderAuthor}>
+                <template for:each={authors} for:item="author">
+                    <dx-image-and-label
+                        key={author.key}
+                        label={author.name}
+                        img-src={author.imgSrc}
+                    ></dx-image-and-label>
+                </template>
+            </div>
             <span class="podcast-length" if:true={renderLength}>{length}</span>
             <span if:true={renderDot} class="card-dot-separator"></span>
             <dx-formatted-date-time

package/src/modules/dx/cardExpanded/cardExpanded.ts

@@ -1,21 +1,45 @@
 import { api } from "lwc";
 import { ArchiveCard } from "dxBaseElements/archiveCard";
 import cx from "classnames";
+import ImageAndLabel from "../imageAndLabel";
+import { toJson } from "dxUtils/normalizers";
 
 export default class ExpandedCard extends ArchiveCard {
     @api body!: string;
     @api date: string | null = null;
     @api topics: Array<string> = [];
-    @api authorLabel?: string | null = null;
-    @api authorImgSrc?: string | null = null;
     @api length?: string;
+    @api
+    get authors() {
+        if (this._authors && this._authors.length) {
+            return this._authors!.map((author, index) => ({
+                ...author,
+                imgSrc: !this.mobile
+                    ? author.avatar_urls?.["24"] ||
+                      author.image_src ||
+                      author.imgSrc
+                    : "",
+                key: index
+            }));
+        }
+        return undefined;
+    }
+
+    set authors(value: any) {
+        if (value !== "undefined") {
+            this._authors = (toJson(value) as Array<any>)?.filter(
+                (author) => author.name
+            );
+        }
+    }
+    private _authors?: Array<ImageAndLabel>;
 
     private get isBlog(): boolean {
         return this.contentType === "blog";
     }
 
     private get hasAuthor(): boolean {
-        return !!(this.authorImgSrc && this.authorLabel);
+        return this.authors?.length;
     }
 
     private get renderAuthor(): boolean {
@@ -27,17 +51,13 @@ export default class ExpandedCard extends ArchiveCard {
     }
 
     private get renderDot(): boolean {
-        return !!((this.renderAuthor || this.renderLength) && this.date);
+        return !!(this.renderLength && this.date);
     }
 
     private get hasTopics(): boolean {
         return !!this.topics?.length;
     }
 
-    private get authorImage(): string {
-        return !this.mobile && this.authorImgSrc ? this.authorImgSrc : "";
-    }
-
     private get containerClass(): string {
         return cx("card-container", this.mobile && "card-mobile");
     }

package/src/modules/dxUtils/normalizers/normalizers.ts

@@ -58,9 +58,7 @@ export const normalizePost = ({
     body: description,
     datetime: date,
     href: url,
-    authorHref: get(authors, "[0].link"),
-    authorImgSrc: get(authors, "[0].avatar_urls.48"),
-    authorName: get(authors, "[0].name"),
+    authors: authors,
     imgAlt: "Blogpost image",
     imgSrc: featuredImage,
     id,