@salesforcedevs/dx-components 1.3.91 → 1.3.92-dx-headings-wes1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.91",
+    "version": "1.3.92-dx-headings-wes1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/audio/audio.ts

@@ -24,14 +24,14 @@ export default class Audio extends LightningElement {
         );
     }
 
-    private trackClick(e: Event, clickType: string) {
+    private trackClick(e: Event, eventType: string, action: string) {
         const audioElement = this.template.querySelector(
             "audio"
         ) as HTMLMediaElement;
 
         const payload = {
-            event: "custEv_blogAudioPlay",
-            media_action: clickType,
+            event: eventType,
+            media_action: action,
             media_name: this.postName,
             media_percentage_played: (
                 (audioElement!.currentTime * 100) /
@@ -44,12 +44,12 @@ export default class Audio extends LightningElement {
     }
 
     private trackPlay(e: Event) {
-        this.trackClick(e, "play");
+        this.trackClick(e, "custEv_blogAudioPlay", "play");
     }
     private trackEnded(e: Event) {
-        this.trackClick(e, "complete");
+        this.trackClick(e, "custEv_blogAudioComplete", "complete");
     }
     private trackPause(e: Event) {
-        this.trackClick(e, "pause");
+        this.trackClick(e, "custEv_blogAudioPause", "pause");
     }
 }

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

@@ -8,7 +8,9 @@
         part="container"
     >
         <div class={textContainerClassName}>
-            <h3 class="dx-text-display-4" lwc:dom="manual"></h3>
+            <h3 class="dx-text-display-4">
+                <dx-formatted-rich-text value={title}></dx-formatted-rich-text>
+            </h3>
             <p>{body}</p>
             <div class="cta">
                 <dx-button if:true={hasLargeButton} size="large">

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

@@ -29,10 +29,6 @@ export default class CardNews extends LightningElement {
     @api target?: string | null = null;
     @api textContainerWidth?: CardNewsTextContainerSize = "small";
 
-    renderedCallback() {
-        this.template.querySelector("h3").innerHTML = this.title;
-    }
-
     private get style(): string {
         const background = `background-color: ${toDxColor(
             this.backgroundColor

package/src/modules/dx/formattedRichText/formattedRichText.html

@@ -0,0 +1,3 @@
+<template>
+    <div class="container" lwc:dom="manual"></div>
+</template>

package/src/modules/dx/formattedRichText/formattedRichText.ts

@@ -0,0 +1,17 @@
+import { LightningElement, api } from "lwc";
+import { sanitizeHtml } from "dxUtils/sanitizeHtml";
+
+export default class FormattedRichText extends LightningElement {
+    @api value!: string;
+
+    private get sanitizedValue(): string {
+        return sanitizeHtml(this.value);
+    }
+    renderedCallback() {
+        const containerEl = this.template.querySelector(".container");
+
+        if (containerEl) {
+            containerEl.innerHTML = this.sanitizedValue;
+        }
+    }
+}

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

@@ -1,7 +1,10 @@
 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 {
+    CONTENT_TYPE_LABELS,
+    CONTENT_TYPE_ICONS
+} from "dxConstants/contentTypes";
 import { getContentTypeColorVariables } from "dxUtils/contentTypes";
 
 interface CoveoSearch {
@@ -19,9 +22,7 @@ interface CoveoSearch {
 
 declare const Coveo: CoveoSearch;
 
-function getPaginationState(
-    event: CoveoSDK.IQuerySuccessEventArgs
-): {
+function getPaginationState(event: CoveoSDK.IQuerySuccessEventArgs): {
     numberOfPages: number;
     currentPage: number;
 } {
@@ -67,6 +68,25 @@ const resultsTemplatesInnerHtml = `
     </script>
 `;
 
+const buildTemplateHelperBadge = (value: string) => {
+    const style = getContentTypeColorVariables(value);
+    const label = CONTENT_TYPE_LABELS[value];
+    const { iconSprite, iconSymbol } = CONTENT_TYPE_ICONS[value];
+    return `
+            <div style="${style}" class="dx-badge">
+                <svg
+                    aria-hidden="true"
+                    style="display: inline; margin-bottom: 1px; fill: var(--color); height: var(--dx-g-icon-size-xs); width: var(--dx-g-icon-size-xs);"
+                    xmlns="http://www.w3.org/2000/svg"
+                    part="svg"
+                >
+                    <use xlink:href="/assets/icons/${iconSprite}-sprite/svg/symbols.svg#${iconSymbol}"></use>
+                </svg>
+                <span>${label}</span>
+            </div>
+        `;
+};
+
 export default class SearchResults extends LightningElement {
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;
@@ -179,11 +199,7 @@ export default class SearchResults extends LightningElement {
 
         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>`;
-            }
+            buildTemplateHelperBadge
         );
 
         Coveo.init(this.root);

package/src/modules/dx/sidebar/sidebar.html

@@ -32,6 +32,10 @@
                 <h2 class="dx-text-display-6 header-title">{header}</h2>
                 <slot name="header"></slot>
             </div>
+            <div class="mobile-header" if:true={mobile}>
+                <h2 class="dx-text-display-6">{header}</h2>
+                <slot name="header"></slot>
+            </div>
             <div class="search">
                 <dx-sidebar-search
                     onchange={onSearchChange}
@@ -72,6 +76,7 @@
                     selected={result.selected}
                     title-highlights={result.titleHighlights}
                     title={result.title}
+                    select={result.select}
                 ></dx-sidebar-search-result>
             </template>
             <dx-empty-state

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -34,6 +34,10 @@
                     <h2 class="dx-text-display-6 header-title">{header}</h2>
                     <slot name="header"></slot>
                 </div>
+                <div class="mobile-header" if:true={mobile}>
+                    <h2 class="dx-text-display-6">{header}</h2>
+                    <slot name="header"></slot>
+                </div>
                 <div class="search">
                     <dx-input
                         class="search-box"

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -6,6 +6,7 @@ import {
     Unsubscribe,
     ResultsPerPage,
     SearchBox,
+    buildInteractiveResult,
     buildResultList,
     buildResultsPerPage,
     buildSearchBox,
@@ -247,11 +248,8 @@ export default class SidebarSearch extends LightningElement {
             return;
         }
 
-        const {
-            isLoading,
-            firstSearchExecuted,
-            results
-        } = this.resultList.state;
+        const { isLoading, firstSearchExecuted, results } =
+            this.resultList.state;
 
         if ((!firstSearchExecuted && !isLoading) || !this.value) {
             // coveo search is firing off some unwanted payloads on startup
@@ -289,15 +287,22 @@ export default class SidebarSearch extends LightningElement {
         engine.dispatch(registerSearchQueryAction);
     }
 
-    private normalizeCoveoResult = ({
-        clickUri,
-        excerpt,
-        excerptHighlights,
-        raw: { sfhtml_url__c },
-        title,
-        titleHighlights,
-        uniqueId
-    }: Result): SidebarSearchResult => {
+    private normalizeCoveoResult = (result: Result): SidebarSearchResult => {
+        const {
+            clickUri,
+            excerpt,
+            excerptHighlights,
+            raw: { sfhtml_url__c },
+            title,
+            titleHighlights,
+            uniqueId
+        } = result;
+
+        const interactiveResult = buildInteractiveResult(this.engine!, {
+            options: { result }
+        });
+        interactiveResult.cancelPendingSelect();
+
         // discussion about this normalization here: https://salesforce-internal.slack.com/archives/C020S6784JX/p1639506238376600
 
         let pathname, queryParam;
@@ -348,7 +353,8 @@ export default class SidebarSearch extends LightningElement {
             excerptHighlights,
             uniqueId,
             href,
-            selected: isSelected
+            selected: isSelected,
+            select: interactiveResult.select
         };
     };
 

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html

@@ -1,5 +1,5 @@
 <template>
-    <a class={className} href={href}>
+    <a class={className} href={href} onclick={select}>
         <span class="title search-text">
             <template for:each={titleChunks} for:item="chunk">
                 <span class={chunk.class} key={chunk.id}>{chunk.value}</span>

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts

@@ -55,6 +55,7 @@ export default class SidebarSearchResult extends LightningElement {
     @api selected!: boolean;
     @api title!: string;
     @api titleHighlights!: CoveoHighlights;
+    @api select!: Function;
 
     private get titleChunks() {
         return toChunks(this.title, this.titleHighlights);

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -24,6 +24,12 @@ dx-tree:not(:last-child) {
     margin-bottom: 12px;
 }
 
+.mobile-header {
+    display: flex;
+    line-height: var(--dx-g-spacing-xl);
+    margin-bottom: 12px;
+}
+
 .padding-horizontal {
     padding-left: var(--dx-g-spacing-md);
     padding-right: var(--dx-g-spacing-md);
@@ -107,6 +113,12 @@ dx-tree:not(:last-child) {
     background-color: #dddbda;
 }
 
+/* This class checks if an element with container class has an elemnt with container-mobile class and 
+must not contain any collapsed class and finally must have a mobile-header class (to which this css will be applied) */
+.container.container-mobile:not(.collapsed) .mobile-header {
+    background-color: var(--dx-g-gray-95);
+}
+
 .container.container-mobile .header-title {
     color: var(--dx-g-gray-10);
     font-family: var(--dx-g-font-sans);

package/src/modules/dxHelpers/text/text.css

@@ -3,7 +3,7 @@
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-6xl);
-    letter-spacing: -1.4px;
+    letter-spacing: -1.8px;
     line-height: 88px;
 }
 
@@ -21,7 +21,7 @@
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-5xl);
-    letter-spacing: -0.6px;
+    letter-spacing: -1.2px;
     line-height: 64px;
 }
 
@@ -30,7 +30,7 @@
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-4xl);
-    letter-spacing: -0.5px;
+    letter-spacing: -1px;
     line-height: 56px;
 }
 
@@ -39,7 +39,7 @@
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-3xl);
-    letter-spacing: -0.3px;
+    letter-spacing: -0.8px;
     line-height: 48px;
 }
 
@@ -48,7 +48,7 @@
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-2xl);
-    letter-spacing: -0.1px;
+    letter-spacing: -0.4px;
     line-height: 40px;
 }
 
@@ -57,7 +57,7 @@
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-xl);
-    letter-spacing: -0.1px;
+    letter-spacing: -0.4px;
     line-height: 32px;
 }
 
@@ -66,7 +66,7 @@
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-lg);
-    letter-spacing: -0.1px;
+    letter-spacing: -0.4px;
     line-height: 28px;
 }
 
@@ -75,7 +75,7 @@
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-base);
-    letter-spacing: -0.1px;
+    letter-spacing: -0.5px;
     line-height: 24px;
 }
 

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

@@ -26,6 +26,7 @@
     --height: var(--dx-g-spacing-mlg);
 }
 
+svg,
 dx-icon {
     margin-right: var(--dx-g-spacing-sm);
 }

package/src/modules/dxUtils/sanitizeHtml/sanitizeHtml.ts

@@ -0,0 +1,8 @@
+export function sanitizeHtml(str: string) {
+    const allowedTags = ["a", "b", "em", "br", "strong"];
+    const pattern = new RegExp(
+        `<(/?(?!${allowedTags.join("|")})\\b[^>]*?)>`,
+        "gi"
+    );
+    return str.replace(pattern, "");
+}