@salesforcedevs/dx-components 1.3.91-version-picker-alpha → 1.3.92-alpha-001-localstorage

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.91-version-picker-alpha",
+    "version": "1.3.92-alpha-001-localstorage",
     "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">{title}</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

@@ -13,6 +13,7 @@ import { track } from "dxUtils/analytics";
 
 export default class CardNews extends LightningElement {
     @api backgroundColor?: string = "indigo-vibrant-40";
+    @api title!: string;
     @api body!: string;
     @api buttonText?: string = "";
     @api buttonType!: CardNewsButtonType;
@@ -26,7 +27,6 @@ export default class CardNews extends LightningElement {
     @api imgPlacement?: CardNewsImagePlacement = "top";
     @api imgVerticalAlign?: CardNewsImageVerticalAlignment | null = null;
     @api target?: string | null = null;
-    @api title!: string;
     @api textContainerWidth?: CardNewsTextContainerSize = "small";
 
     private get style(): string {

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/scrollManager/scrollManager.ts

@@ -17,8 +17,10 @@ export const restoreScroll = () => {
     if (scrollUnlocked) {
         return;
     }
-    document.body.scrollTop = document.documentElement.scrollTop =
-        window.history.state?.scroll?.value;
+    const value = window.history.state?.scroll?.value;
+    if (value) {
+        document.body.scrollTop = document.documentElement.scrollTop = value;
+    }
 };
 
 export default class ScrollManager extends LightningElement {

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

@@ -76,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/sidebarSearch/sidebarSearch.ts

@@ -6,6 +6,7 @@ import {
     Unsubscribe,
     ResultsPerPage,
     SearchBox,
+    buildInteractiveResult,
     buildResultList,
     buildResultsPerPage,
     buildSearchBox,
@@ -23,6 +24,7 @@ import {
     SidebarSearchResult
 } from "typings/custom";
 
+const RESULT_CLICK_LOCAL_STORAGE_KEY = "dx-sidebar-search-result-click";
 export const SESSION_KEY = "dx-sidebar-search-state";
 
 const DEFAULT_RESULT_COUNT = 20;
@@ -86,7 +88,7 @@ export default class SidebarSearch extends LightningElement {
     private _coveoAdvancedQueryConfig!: { [key: string]: any };
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];
-    private unsubscribeFromResultList: Unsubscribe = () => {};
+    private unsubscribeFromResultList: Unsubscribe = () => { };
     private resultList: ResultList | null = null;
     private resultsPerPage: ResultsPerPage | null = null;
     private preloadedState?: SearchAppState;
@@ -137,6 +139,7 @@ export default class SidebarSearch extends LightningElement {
         if (this.hasCorrectCoveoConfig && !this.engine) {
             this.initializeUserSession();
             this.initializeCoveo();
+            this.syncAnalytics();
         } else if (!this.hasCorrectCoveoConfig) {
             console.error(
                 "Incorrect coveo search configuration provided. All coveo configuration attributes must be defined.",
@@ -242,16 +245,25 @@ export default class SidebarSearch extends LightningElement {
         }
     };
 
+    private syncAnalytics = () => {
+        const storedResult = window.localStorage.getItem(RESULT_CLICK_LOCAL_STORAGE_KEY);
+        if (storedResult) {
+            const interactiveResult = buildInteractiveResult(this.engine!, {
+                options: { result: JSON.parse(storedResult) }
+            });
+            interactiveResult.cancelPendingSelect();
+            interactiveResult.select();
+            window.localStorage.removeItem(RESULT_CLICK_LOCAL_STORAGE_KEY);
+        }
+    }
+
     private onResultListChange = () => {
         if (!this.resultList) {
             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 +301,17 @@ 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;
+
         // discussion about this normalization here: https://salesforce-internal.slack.com/archives/C020S6784JX/p1639506238376600
 
         let pathname, queryParam;
@@ -348,7 +362,8 @@ export default class SidebarSearch extends LightningElement {
             excerptHighlights,
             uniqueId,
             href,
-            selected: isSelected
+            selected: isSelected,
+            select: () => window.localStorage.setItem(RESULT_CLICK_LOCAL_STORAGE_KEY, result),
         };
     };
 
@@ -389,10 +404,10 @@ export default class SidebarSearch extends LightningElement {
     }
 
     private updateRecentSearches = () =>
-        (this.recentSearches = UserRecentSearches.get().map((item: string) => ({
-            id: item,
-            label: item
-        })));
+    (this.recentSearches = UserRecentSearches.get().map((item: string) => ({
+        id: item,
+        label: item
+    })));
 
     private dispatchSidebarSearchChange(searchTerm: string | undefined): void {
         this.dispatchEvent(

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

@@ -25,7 +25,6 @@ dx-tree:not(:last-child) {
 }
 
 .mobile-header {
-    box-sizing: content-box;
     display: flex;
     line-height: var(--dx-g-spacing-xl);
     margin-bottom: 12px;
@@ -114,8 +113,10 @@ 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: #F3F3F3;
+    background-color: var(--dx-g-gray-95);
 }
 
 .container.container-mobile .header-title {

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, "");
+}