@salesforcedevs/dx-components 1.3.252 → 1.3.253

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.252",
+    "version": "1.3.253",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -45,5 +45,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "8379eb747571af22dfdfc3c440e8c23c85d1fe8b"
+    "gitHead": "20e30001e8423cd101d5ac0e94fff7d669cf9ef1"
 }

package/src/modules/dx/searchResults/searchResults.css

@@ -284,6 +284,7 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
 }
 
 .dx-result-excerpt {
+    display: inline;
     color: var(--dx-g-gray-10);
     font-size: 14px;
     line-height: 20px;
@@ -465,6 +466,10 @@ li.coveo-dynamic-facet-breadcrumb-value-list-item {
     --dx-c-stroke-width: 1px;
 }
 
+.post-info-container {
+    margin-top: var(--dx-g-spacing-smd);
+}
+
 @media screen and (max-width: 768px) {
     .no-results > img {
         display: none;

package/src/modules/dx/searchResults/searchResults.ts

@@ -1,5 +1,6 @@
 import { LightningElement, api, track } from "lwc";
 import type * as CoveoSDK from "coveo-search-ui";
+import { DateTime } from "luxon";
 import { track as trackGTM } from "dxUtils/analytics";
 import {
     CONTENT_TYPE_LABELS,
@@ -72,7 +73,17 @@ const resultsTemplatesInnerHtml = `
                         <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
                 <% } %>
             </a>
+            <span class="CoveoFieldValue" data-field="@sflastmodifieddate" data-helper="postedDate" data-html-value="true"></span>
             <p class="dx-result-excerpt CoveoExcerpt"></p>
+            <% if (raw.sfcommentcount || raw.sflikecount) { %>
+            <div class="post-info-container">
+                <span class="CoveoFieldValue" data-field="@sfcommentcount" data-helper="replies" data-html-value="true"></span>
+                <% if (raw.sfcommentcount && raw.sflikecount) { %>
+                    <span>&bull;</span>
+                <% } %>
+                <span class="CoveoFieldValue" data-field="@sflikecount" data-helper="likes" data-html-value="true"></span>
+            </div>
+            <% } %>
         </div>
     </script>
     <script
@@ -109,7 +120,17 @@ const resultsTemplatesInnerHtml = `
                             <svg xmlns="http://www.w3.org/2000/svg" style="display: inline; vertical-align: baseline;" fill="var(--dx-g-blue-vibrant-20)" width="20" height="20" part="svg" aria-hidden="true"><use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#new_window"></use></svg>
                     <% } %>
                 </a>
+                <span class="CoveoFieldValue" data-field="@sflastmodifieddate" data-helper="postedDate" data-html-value="true"></span>
                 <p class="dx-result-excerpt CoveoExcerpt"></p>
+                <% if (raw.sfcommentcount || raw.sflikecount) { %>
+                <div class="post-info-container">
+                    <span class="CoveoFieldValue" data-field="@sfcommentcount" data-helper="replies" data-html-value="true"></span>
+                    <% if (raw.sfcommentcount && raw.sflikecount) { %>
+                        <span>&bull;</span>
+                    <% } %>
+                    <span class="CoveoFieldValue" data-field="@sflikecount" data-helper="likes" data-html-value="true"></span>
+                </div>
+                <% } %>
             </div>
     </script>
 `;
@@ -122,7 +143,15 @@ const isTrailheadDomain = (domain: string) =>
     domain === "trailhead.salesforce.com" ||
     domain === "dev.trailhead.salesforce.com";
 
-const buildTemplateHelperBadge = (value: keyof typeof CONTENT_TYPE_LABELS) => {
+const buildTemplateHelperBadge = (
+    rawValue: keyof typeof CONTENT_TYPE_LABELS | "community posts"
+) => {
+    let value = rawValue;
+
+    if (value === "community posts") {
+        value = "community";
+    }
+
     const style = getContentTypeColorVariables(value);
     const label = CONTENT_TYPE_LABELS[value];
     const { iconSprite, iconSymbol } = CONTENT_TYPE_ICONS[value];
@@ -242,6 +271,26 @@ const buildTemplateHelperMetaBreadcrumbs = (value: string) => {
         `;
 };
 
+const buildTemplateHelperPostedDate = (value: string) => {
+    const time = DateTime.fromMillis(Number(value)).toLocaleString(
+        DateTime.DATE_MED
+    );
+
+    return `Posted on: ${time} - `;
+};
+
+const buildTemplateHelperReplies = (value: string) => {
+    const number = Number(value);
+
+    return `<strong>${value} ${number > 1 ? "Replies" : "Reply"}</strong>`;
+};
+
+const buildTemplateHelperLikes = (value: string) => {
+    const number = Number(value);
+
+    return `<strong>${value} ${number > 1 ? "Likes" : "Like"}</strong>`;
+};
+
 // @ts-ignore Dark Magic (TM) we are overriding the 'title' field with a custom getter. We should really stop doing this.
 export default class SearchResults extends LightningElement {
     @api coveoOrganizationId!: string;
@@ -521,6 +570,21 @@ export default class SearchResults extends LightningElement {
             buildTemplateHelperUriBreadcrumbs
         );
 
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "postedDate",
+            buildTemplateHelperPostedDate
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "replies",
+            buildTemplateHelperReplies
+        );
+
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "likes",
+            buildTemplateHelperLikes
+        );
+
         Coveo.init(this.root);
     }
 

package/src/modules/dxConstants/contentTypes/contentTypes.ts

@@ -8,7 +8,8 @@ export const CONTENT_TYPE_LABELS = {
     api: "API",
     event: "Event",
     website: "Website",
-    podcast: "Podcast"
+    podcast: "Podcast",
+    community: "Community"
 };
 
 export const CONTENT_TYPE_ICONS: {
@@ -45,6 +46,10 @@ export const CONTENT_TYPE_ICONS: {
     podcast: {
         iconSprite: "utility",
         iconSymbol: "unmuted"
+    },
+    community: {
+        iconSprite: "general",
+        iconSymbol: "users"
     }
 };
 
@@ -56,5 +61,6 @@ export const CONTENT_TYPES = [
     "api",
     "event",
     "website",
-    "podcast"
+    "podcast",
+    "community"
 ] as ContentType[];