@salesforcedevs/dx-components 1.3.77 → 1.3.78

package/lwc.config.json

@@ -98,6 +98,7 @@
         "dxUtils/analytics",
         "dxUtils/async",
         "dxUtils/constants",
+        "dxUtils/contentTypes",
         "dxUtils/coveo",
         "dxUtils/dates",
         "dxUtils/highlight",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.77",
+    "version": "1.3.78",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "452c03b938b37b1ed273aa6ecac013336efe6896"
+    "gitHead": "e5b62beb3fc195ec6d6d947fe5d5c84a26d141da"
 }

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

@@ -1,4 +1,5 @@
 @import "dxHelpers/reset";
+@import "dxHelpers/typeBadge";
 @import "./coveo.css";
 
 /* stylelint-disable selector-class-pattern */
@@ -385,3 +386,8 @@ a.CoveoResultLink,
     margin: 0 auto;
     width: fit-content;
 }
+
+.dx-badge {
+    display: block;
+    margin-bottom: var(--dx-g-spacing-smd);
+}

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

@@ -1,6 +1,8 @@
 import { LightningElement, api, track } from "lwc";
 import type * as CoveoSDK from "coveo-search-ui";
 import { track as trackGTM } from "dxUtils/analytics";
+import { CONTENT_TYPE_LABELS } from "dxConstants/contentTypes";
+import { getContentTypeColorVariables } from "dxUtils/contentTypes";
 
 interface CoveoSearch {
     state: typeof CoveoSDK.state;
@@ -40,6 +42,7 @@ const resultsTemplatesInnerHtml = `
         data-field-publicurl=""
     >
         <div class="dx-result">
+            <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
             <p class="dx-result-title">
                 <a
                     class="CoveoResultLink"
@@ -55,6 +58,7 @@ const resultsTemplatesInnerHtml = `
         type="text/html"
     >
             <div class="dx-result">
+                <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
                 <p class="dx-result-title">
                     <a class="CoveoResultLink"></a>
                 </p>
@@ -173,6 +177,15 @@ export default class SearchResults extends LightningElement {
 
         this.attachListeners(this.root);
 
+        Coveo.TemplateHelpers.registerTemplateHelper(
+            "badge",
+            (value: string) => {
+                const style = getContentTypeColorVariables(value);
+                const label = CONTENT_TYPE_LABELS[value];
+                return `<div style="${style}" class="dx-badge"><span>${label}</span></div>`;
+            }
+        );
+
         Coveo.init(this.root);
     }
 

package/src/modules/dx/typeBadge/typeBadge.css

@@ -1,33 +1,2 @@
 @import "dxHelpers/reset";
-
-.badge {
-    --background: var(--sds-g-gray-3);
-    --border-radius: var(--dx-g-spacing-smd);
-    --color: var(--sds-g-gray-10);
-    --height: var(--dx-g-spacing-lg);
-    --horizontal-spacing: var(--dx-g-spacing-smd);
-    --vertical-spacing: var(--dx-g-spacing-xs);
-
-    color: var(--dx-c-type-badge-color, var(--color));
-    background: var(--dx-c-type-badge-background, var(--background));
-    border-radius: var(--border-radius);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--height);
-    width: min-content;
-    text-align: center;
-    white-space: nowrap;
-    font-family: var(--dx-g-font-sans);
-    font-size: 10px;
-    font-weight: var(--dx-g-font-bold);
-    padding: var(--vertical-spacing) var(--horizontal-spacing);
-}
-
-.badge.size-small {
-    --height: var(--dx-g-spacing-mlg);
-}
-
-dx-icon {
-    margin-right: var(--dx-g-spacing-sm);
-}
+@import "dxHelpers/typeBadge";

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -5,65 +5,20 @@ import {
     Color,
     ContentType,
     IconSprite,
+    IconData,
     IconSymbol,
     TypeBadgeSize
 } from "typings/custom";
 import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
-import { BRANDS } from "dxConstants/brands";
-import { CONTENT_TYPES } from "dxConstants/contentTypes";
-
-const contentTypeLabels = {
-    documentation: "Documentation",
-    trailhead: "Trailhead",
-    blog: "Blog",
-    forum: "Forum",
-    api: "API",
-    event: "Event",
-    website: "Website",
-    podcast: "Podcast"
-};
-
-type IconData = {
-    iconSymbol: IconSymbol;
-    iconSprite: IconSprite;
-};
-
-const contentTypeIcons: {
-    [K in ContentType]: IconData;
-} = {
-    documentation: {
-        iconSprite: "utility",
-        iconSymbol: "knowledge_base"
-    },
-    trailhead: {
-        iconSprite: "salesforcebrand",
-        iconSymbol: "learning"
-    },
-    blog: {
-        iconSprite: "utility",
-        iconSymbol: "comments"
-    },
-    forum: {
-        iconSprite: "general",
-        iconSymbol: "question-circle"
-    },
-    api: {
-        iconSprite: "utility",
-        iconSymbol: "settings"
-    },
-    event: {
-        iconSprite: "utility",
-        iconSymbol: "event"
-    },
-    website: {
-        iconSprite: "utility",
-        iconSymbol: "home"
-    },
-    podcast: {
-        iconSprite: "utility",
-        iconSymbol: "unmuted"
-    }
-};
+import {
+    isContentType,
+    getContentTypeColorScope,
+    getContentTypeColorVariables
+} from "dxUtils/contentTypes";
+import {
+    CONTENT_TYPE_LABELS,
+    CONTENT_TYPE_ICONS
+} from "dxConstants/contentTypes";
 
 export default class TypeBadge extends LightningElement {
     @api size: TypeBadgeSize = "default";
@@ -111,39 +66,29 @@ export default class TypeBadge extends LightningElement {
     private _iconSymbol?: IconSymbol;
 
     private get variantIconData(): IconData | null {
-        if (this.variant && this.variant in contentTypeIcons) {
-            return contentTypeIcons[this.variant as ContentType];
+        if (this.variant && this.variant in CONTENT_TYPE_ICONS) {
+            return CONTENT_TYPE_ICONS[this.variant as ContentType];
         }
         return null;
     }
 
     private get variantLabel(): string | null {
         if (this.isContentType) {
-            return contentTypeLabels[this.variant as ContentType];
+            return CONTENT_TYPE_LABELS[this.variant as ContentType];
         }
         return null;
     }
 
     private get variantColorScope(): string | null {
-        if (this.isContentType) {
-            return "content-type";
-        }
-        if (this.isBrand) {
-            return "brand";
-        }
-        return null;
+        return getContentTypeColorScope(this.variant);
     }
 
     private get isContentType(): boolean {
-        return CONTENT_TYPES.includes(this.variant as ContentType);
-    }
-
-    private get isBrand(): boolean {
-        return BRANDS.includes(this.variant as ContentType);
+        return isContentType(this.variant);
     }
 
     private get className(): string {
-        return cx("badge", `size-${this.size}`);
+        return cx("dx-badge", `size-${this.size}`);
     }
 
     private get style(): string {
@@ -154,10 +99,7 @@ export default class TypeBadge extends LightningElement {
             });
         }
         if (this.variantColorScope) {
-            return buildStyleColorVariables({
-                background: `--dx-g-${this.variantColorScope}-${this.variant}-color-background`,
-                color: `--dx-g-${this.variantColorScope}-${this.variant}-color`
-            });
+            return getContentTypeColorVariables(this.variant);
         }
         if (this.color) {
             const variables = colorToDxColors(this.color as Color);

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

@@ -1,3 +1,53 @@
+import { ContentType, IconData } from "typings/custom";
+
+export const CONTENT_TYPE_LABELS = {
+    documentation: "Documentation",
+    trailhead: "Trailhead",
+    blog: "Blog",
+    forum: "Forum",
+    api: "API",
+    event: "Event",
+    website: "Website",
+    podcast: "Podcast"
+};
+
+export const CONTENT_TYPE_ICONS: {
+    [K in ContentType]: IconData;
+} = {
+    documentation: {
+        iconSprite: "utility",
+        iconSymbol: "knowledge_base"
+    },
+    trailhead: {
+        iconSprite: "salesforcebrand",
+        iconSymbol: "learning"
+    },
+    blog: {
+        iconSprite: "utility",
+        iconSymbol: "comments"
+    },
+    forum: {
+        iconSprite: "general",
+        iconSymbol: "question-circle"
+    },
+    api: {
+        iconSprite: "utility",
+        iconSymbol: "settings"
+    },
+    event: {
+        iconSprite: "utility",
+        iconSymbol: "event"
+    },
+    website: {
+        iconSprite: "utility",
+        iconSymbol: "home"
+    },
+    podcast: {
+        iconSprite: "utility",
+        iconSymbol: "unmuted"
+    }
+};
+
 export const CONTENT_TYPES = [
     "documentation",
     "trailhead",

package/src/modules/dxHelpers/typeBadge/typeBadge.css

@@ -0,0 +1,31 @@
+.dx-badge {
+    --background: var(--sds-g-gray-3);
+    --border-radius: var(--dx-g-spacing-smd);
+    --color: var(--sds-g-gray-10);
+    --height: var(--dx-g-spacing-lg);
+    --horizontal-spacing: var(--dx-g-spacing-smd);
+    --vertical-spacing: var(--dx-g-spacing-xs);
+
+    color: var(--dx-c-type-badge-color, var(--color));
+    background: var(--dx-c-type-badge-background, var(--background));
+    border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--height);
+    width: min-content;
+    text-align: center;
+    white-space: nowrap;
+    font-family: var(--dx-g-font-sans);
+    font-size: 10px;
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--vertical-spacing) var(--horizontal-spacing);
+}
+
+.dx-badge.size-small {
+    --height: var(--dx-g-spacing-mlg);
+}
+
+dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
+}

package/src/modules/dxUtils/contentTypes/contentTypes.ts

@@ -0,0 +1,30 @@
+import { CONTENT_TYPES } from "dxConstants/contentTypes";
+import { BRANDS } from "dxConstants/brands";
+import { ContentType } from "typings/custom";
+import { buildStyleColorVariables } from "dxUtils/css";
+
+export const isBrand = (id: string): boolean => {
+    return BRANDS.includes(id as ContentType);
+};
+
+export const isContentType = (id: string): boolean => {
+    return CONTENT_TYPES.includes(id as ContentType);
+};
+
+export const getContentTypeColorScope = (id: string): string | null => {
+    if (isContentType(id)) {
+        return "content-type";
+    }
+    if (isBrand(id)) {
+        return "brand";
+    }
+    return null;
+};
+
+export const getContentTypeColorVariables = (id: string): string => {
+    const scope = getContentTypeColorScope(id);
+    return buildStyleColorVariables({
+        background: `--dx-g-${scope}-${id}-color-background`,
+        color: `--dx-g-${scope}-${id}-color`
+    });
+};