@salesforcedevs/dx-components 0.26.2 → 0.26.3-alpha.1

package/lwc.config.json

@@ -49,6 +49,7 @@
         "dx/interactiveImage",
         "dx/lazy",
         "dx/logo",
+        "dx/modalDrawer",
         "dx/pagination",
         "dx/podcastHost",
         "dx/podcastPlayer",
@@ -80,7 +81,7 @@
         "helpers/reset",
         "helpers/table",
         "helpers/text",
-        "utils-internal/headerBase",
+        "base-elements/headerBase",
         "utils/normalizers",
         "utils/highlight"
     ]

package/package.json

@@ -1,15 +1,11 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.26.2",
+    "version": "0.26.3-alpha.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
         "node": ">= 14.x"
     },
-    "files": [
-        "src/",
-        "lwc.config.json"
-    ],
     "publishConfig": {
         "access": "public"
     },
@@ -28,6 +24,5 @@
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
-    },
-    "gitHead": "a51ec257e0bc853955267650e17c86e8a250ea16"
+    }
 }

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api, track } from "lwc";
-import { fetchWordpressPosts } from "utils-internal/wordpress";
+import { fetchWordpressPosts } from "utils/wordpress";
 import { normalizePost } from "utils/normalizers";
 
 type BlogPost = {

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils-internal/css";
+import { toDxColor } from "utils/css";
 import { track } from "dx/instrumentation";
 
 export default class CardCallout extends LightningElement {

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

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { isSlotEmpty } from "utils-internal/slot";
-import { toDxColor } from "utils-internal/css";
+import { isSlotEmpty } from "utils/slot";
+import { toDxColor } from "utils/css";
 
 export default class CardContent extends LightningElement {
     @api authorHref?: string | null = null;

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { stopPropagationOnSlotted } from "utils-internal/slot";
+import { stopPropagationOnSlotted } from "utils/slot";
 
 export default class CardDocs extends LightningElement {
     @api body!: string;

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

@@ -1,5 +1,5 @@
 import { api } from "lwc";
-import { ArchiveCard } from "utils-internal/archiveCard";
+import { ArchiveCard } from "base-elements/archiveCard";
 import cx from "classnames";
 
 export default class ExpandedCard extends ArchiveCard {

package/src/modules/dx/cardMinimal/cardMinimal.ts

@@ -1,3 +1,3 @@
-import { ArchiveCard } from "utils-internal/archiveCard";
+import { ArchiveCard } from "base-elements/archiveCard";
 
 export default class MinimalCard extends ArchiveCard {}

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

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils-internal/css";
+import { toDxColor } from "utils/css";
 import {
     CardNewsButtonType,
     CardNewsImagePlacement,

package/src/modules/dx/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api, track } from "lwc";
-import { fetchWordpressPosts } from "utils-internal/wordpress";
+import { fetchWordpressPosts } from "utils/wordpress";
 import { normalizeEpisode } from "utils/normalizers";
 
 type PodcastEpisode = {

package/src/modules/dx/cardSmall/cardSmall.ts

@@ -6,7 +6,7 @@ import {
     IconSymbol,
     IconBadgeShape
 } from "typings/custom";
-import { isSlotEmpty, stopPropagationOnSlotted } from "utils-internal/slot";
+import { isSlotEmpty, stopPropagationOnSlotted } from "utils/slot";
 
 export default class CardSmall extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-50";

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api, wire, track } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
-import Prism from "utils-internal/prismjs";
+import Prism from "utils/prismjs";
 import {
     getLocalStorageData,
     setLocalStorageData

package/src/modules/dx/dropdown/dropdown.ts

@@ -2,7 +2,7 @@ import { Option, PopperPlacement } from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import get from "lodash.get";
-import { deepmapOptions } from "utils-internal/options";
+import { deepmapOptions } from "utils/options";
 import { toJson } from "utils/normalizers";
 
 interface DropdownOption extends Option {

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { isSlotEmpty } from "utils-internal/slot";
+import { isSlotEmpty } from "utils/slot";
 import { toJson } from "utils/normalizers";
 import { ImageAndLabel } from "../imageAndLabel";
 import svgs from "./svgs";

package/src/modules/dx/groupText/groupText.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement, Link } from "typings/custom";
-import { isSlotEmpty } from "utils-internal/slot";
+import { isSlotEmpty } from "utils/slot";
 import { toJson } from "utils/normalizers";
 
 type OptionalLink = Link | null;

package/src/modules/dx/header/header.ts

@@ -1,5 +1,5 @@
 import { api } from "lwc";
-import { HeaderBase } from "utils-internal/headerBase";
+import { HeaderBase } from "base-elements/headerBase";
 import { toJson } from "utils/normalizers";
 import type { Option } from "typings/custom";
 

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Option } from "typings/custom";
-import { deepmapOptions } from "utils-internal/options";
+import { deepmapOptions } from "utils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
     @api open: boolean = false;

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { PopoverRequestCloseType, Option } from "typings/custom";
-import { buildSearchEngine } from "utils-internal/coveo";
+import { buildSearchEngine } from "utils/coveo";
 import {
     StandaloneSearchBox as StandaloneSearchBoxType,
     StandaloneSearchBoxState,

package/src/modules/dx/icon/icon.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { IconSprite, IconSize, IconSymbol } from "typings/custom";
-import { toDxColor } from "utils-internal/css";
+import { toDxColor } from "utils/css";
 
 const fetches = new Map<string, Promise<any>>();
 

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
-import { toDxColor } from "utils-internal/css";
+import { toDxColor } from "utils/css";
 
 const validShapes = ["square", "circle"];
 

package/src/modules/dx/input/input.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSize, IconSymbol } from "typings/custom";
-import { isMac } from "utils-internal/devices";
+import { isMac } from "utils/devices";
 import { isValidEmail } from "./validators";
 
 type ValidatorMap = {

package/src/modules/dx/modalDrawer/modalDrawer.css

@@ -0,0 +1,40 @@
+:host {
+    --dx-c-modal-drawer-z-index: 5000;
+    --dx-c-modal-padding-around: var(--dx-g-spacing-smd);
+    --dx-c-modal-height: calc(100vh - var(--dx-c-modal-padding-around) * 2);
+}
+
+dx-button {
+    display: block;
+    margin-left: auto;
+}
+
+.modal-drawer_container {
+    background-color: white;
+    height: var(--dx-c-modal-height);
+    left: 0;
+    padding: var(--dx-c-modal-padding-around);
+    position: fixed;
+    transform: translateX(-100%);
+    transition: transform 0.4s ease;
+    top: 0;
+    width: inherit;
+    z-index: var(--dx-c-modal-drawer-z-index);
+}
+
+.modal-drawer_container.modal-drawer_active {
+    transform: translateX(0);
+}
+
+.modal-drawer_overlay {
+    background-color: #195594;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    opacity: 0.62;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
+}

package/src/modules/dx/modalDrawer/modalDrawer.html

@@ -0,0 +1,11 @@
+<template>
+    <div class={containerClass}>
+        <slot></slot>
+        <dx-button onclick={handleCloseModal}>Done</dx-button>
+    </div>
+    <div
+        if:true={open}
+        class="modal-drawer_overlay"
+        onclick={handleCloseModal}
+    ></div>
+</template>

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -0,0 +1,27 @@
+import cx from "classnames";
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "utils/normalizers";
+
+export default class ModalDrawer extends LightningElement {
+    private _open = false;
+
+    @api get open() {
+        return this._open;
+    }
+
+    set open(value) {
+        this._open = normalizeBoolean(value);
+    }
+
+    get containerClass(): string {
+        return cx(
+            "modal-drawer_container",
+            this._open && "modal-drawer_active"
+        );
+    }
+
+    handleCloseModal() {
+        this._open = !this._open;
+        this.dispatchEvent(new CustomEvent("clickclose"));
+    }
+}

package/src/modules/dx/newsletterForm/newsletterForm.html

@@ -43,10 +43,10 @@
         <dx-select
             name="country"
             class="country-select"
-            label="Country"
+            label="Country/Region"
             onchange={handleChange}
-            placeholder="Select your Country"
-            message-when-value-missing="Select your country"
+            placeholder="Select your Country/Region"
+            message-when-value-missing="Select your country/region"
             json-options={countries}
             value={country}
             required="true"

package/src/modules/dx/popover/popover.ts

@@ -8,7 +8,7 @@ import {
 import { createPopper } from "@popperjs/core";
 import cx from "classnames";
 import debounce from "debounce";
-import { isPrerender } from "utils-internal/seo";
+import { isPrerender } from "utils/seo";
 
 const isEventOutsideElements = (
     e: Event,

package/src/modules/dx/section/section.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils-internal/css";
+import { toDxColor } from "utils/css";
 
 export default class Section extends LightningElement {
     @api backgroundColor?: string | null = "transparent";

package/src/modules/dx/sidebar/sidebar.ts

@@ -6,7 +6,7 @@ import {
     SidebarGtmAction,
     SidebarSearchResult
 } from "typings/custom";
-import { getSidebarSearchParams } from "utils-internal/coveo";
+import { getSidebarSearchParams } from "utils/coveo";
 import { toJson } from "utils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 

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

@@ -38,7 +38,7 @@
                     <dx-input
                         class="search-box"
                         type="search"
-                        placeholder="Search this list..."
+                        placeholder="Search"
                         role="search"
                         aria-label="Content Search"
                         icon-symbol="search"

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -78,10 +78,18 @@ export default class Sidebar extends LightningElement {
         this.expanded = !this.matchMedia.matches;
         this.onMediaChange(this.matchMedia);
         this.matchMedia.addEventListener("change", this.onMediaChange);
+        window.addEventListener(
+            "referencecontentloaded",
+            this.dispatchHighlightedTermChange
+        );
     }
 
     disconnectedCallback() {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
+        window.removeEventListener(
+            "referencecontentloaded",
+            this.dispatchHighlightedTermChange
+        );
     }
 
     private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) =>
@@ -120,16 +128,23 @@ export default class Sidebar extends LightningElement {
         window.clearTimeout(this._searchTimeout);
         this._searchTimeout = window.setTimeout(() => {
             this.assignFilteredTrees();
-            this.dispatchEvent(
-                new CustomEvent("highlightedtermchange", {
-                    detail: this.searchText,
-                    composed: true,
-                    bubbles: true
-                })
-            );
+            this.dispatchHighlightedTermChange();
         }, WAIT_TIME);
     }
 
+    private dispatchHighlightedTermChange = () => {
+        this.dispatchEvent(
+            new CustomEvent("highlightedtermchange", {
+                detail: {
+                    query: this.searchText,
+                    termsToHighlight: [this.searchText]
+                },
+                composed: true,
+                bubbles: true
+            })
+        );
+    };
+
     private assignFilteredTrees() {
         this.filteredTrees = this._trees
             .map((singleTree) => {

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

@@ -14,11 +14,8 @@ import {
     SearchAppState,
     loadQueryActions
 } from "@coveo/headless";
-import {
-    buildSearchEngine,
-    getSidebarSearchParams
-} from "utils-internal/coveo";
-import { RecentSearches } from "utils-internal/recentSearches";
+import { buildSearchEngine, getSidebarSearchParams } from "utils/coveo";
+import { RecentSearches } from "utils/recentSearches";
 import { toJson } from "utils/normalizers";
 import {
     Option,
@@ -94,6 +91,30 @@ export default class SidebarSearch extends LightningElement {
     private fetchingMoreResults: boolean = false;
     private didRender = false;
 
+    private get termsToHighlight(): string[] | null {
+        const { termsToHighlight, phrasesToHighlight } =
+            this.engine?.state?.search?.response;
+        if (!termsToHighlight || !phrasesToHighlight) {
+            return null;
+        }
+
+        const flattenTerms = (terms: Object): string[] =>
+            Object.entries(terms).reduce((acc, [key, value]) => {
+                if (Array.isArray(value)) {
+                    return [...acc, key, ...value];
+                }
+                const values = flattenTerms(value);
+                return [...acc, key, ...values];
+            }, []);
+
+        const terms = flattenTerms({
+            ...termsToHighlight,
+            ...phrasesToHighlight
+        });
+
+        return Array.from(new Set([this.value, ...terms].flat(2))) as string[];
+    }
+
     private get hasCorrectCoveoConfig(): boolean {
         const coveoConfigurations = [
             this.coveoOrganizationId,
@@ -147,12 +168,6 @@ export default class SidebarSearch extends LightningElement {
             );
         }
 
-        // If this is the first render and there is a search value, trigger
-        // term highlighting
-        if (!this.didRender && this.value) {
-            this.dispatchHighlightedTermChange();
-        }
-
         this.didRender = true;
     }
 
@@ -227,10 +242,6 @@ export default class SidebarSearch extends LightningElement {
             this.onResultListChange
         );
 
-        if (this.value) {
-            this.dispatchHighlightedTermChange();
-        }
-
         if (!this.preloadedState) {
             if (this.value) {
                 this.submitSearch();
@@ -333,6 +344,7 @@ export default class SidebarSearch extends LightningElement {
 
     private dispatchOnChangeEvent(results: Result[]) {
         this.updateSessionStorage();
+        this.dispatchHighlightedTermChange();
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {
@@ -347,15 +359,20 @@ export default class SidebarSearch extends LightningElement {
         this.dispatchEvent(new CustomEvent("loading", { detail: loading }));
     }
 
-    private dispatchHighlightedTermChange() {
-        this.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: this.value,
-                composed: true,
-                bubbles: true
-            })
-        );
-    }
+    private dispatchHighlightedTermChange = () => {
+        if (this.termsToHighlight) {
+            this.dispatchEvent(
+                new CustomEvent("highlightedtermchange", {
+                    detail: {
+                        query: this.value,
+                        termsToHighlight: this.termsToHighlight
+                    },
+                    composed: true,
+                    bubbles: true
+                })
+            );
+        }
+    };
 
     private updateRecentSearches = () =>
         (this.recentSearches = UserRecentSearches.get().map((item: string) => ({
@@ -410,7 +427,6 @@ export default class SidebarSearch extends LightningElement {
         this.value = e.detail;
 
         this.handleValueChange(false);
-        this.dispatchHighlightedTermChange();
     }
 
     private onInputFocus() {

package/src/modules/dx/slackCta/slackCta.css

@@ -26,7 +26,7 @@
 }
 
 .dx-text-heading-4 {
-    font-size: var(--dx-g-text-lg);
+    font-size: var(--dx-g-text-xl);
     max-width: 370px;
 }
 @media screen and (max-width: 1000px) {

package/src/modules/dx/tooltip/microtip.css

@@ -54,6 +54,7 @@
   font-weight: var(--microtip-font-weight, normal);
   text-transform: var(--microtip-text-transform, none);
   padding: .5em 1em;
+  height: min-content;
   white-space: nowrap;
   box-sizing: content-box;
 }

package/src/modules/dx/tooltip/tooltip.css

@@ -33,4 +33,5 @@
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-xs);
     color: white;
+    line-height: var(--dx-g-text-xs);
 }

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

@@ -7,7 +7,7 @@ import {
     BadgeType,
     Brand
 } from "typings/custom";
-import { colorToDxColors } from "utils-internal/css";
+import { colorToDxColors } from "utils/css";
 
 const DEFAULT_TYPE = "typebadge_metadata";
 const VALID_BRANDS: Array<Brand> = [

package/src/modules/utils/highlight/highlight.ts

@@ -1,14 +1,16 @@
-import { createSearchRegExp } from "utils-internal/regexps";
+import { createSearchRegExp } from "utils/regexps";
 
-const MARK_TAGS = /<\/?mark>/gi;
+const MARK_TAGS = /<\/?mark[^>]*>/gi;
+
+// mark tags dif color on ref page
 
 export const highlightTerms = (
     // eslint-disable-next-line no-undef
-    elements: NodeListOf<Element>,
-    searchTerm: string
+    elements: NodeListOf<HTMLElement>,
+    { query, termsToHighlight }: { query: string; termsToHighlight: string[] }
 ): void => {
-    searchTerm = searchTerm.trim();
-    const searchExp = createSearchRegExp(searchTerm);
+    const searchExp = createSearchRegExp(termsToHighlight);
+    let scrolled = false;
     elements.forEach((element) => {
         if (
             element?.innerHTML.includes("<dx-") ||
@@ -17,16 +19,27 @@ export const highlightTerms = (
             return;
         }
 
-        let innerHtml = element.innerHTML.replace(
-            // Remove previously added mark tags
-            MARK_TAGS,
-            ""
-        );
-
-        if (searchTerm) {
-            innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+        try {
+            if (element.innerHTML.match(MARK_TAGS)) {
+                // Remove previously added mark tags
+                element.innerHTML = element.innerHTML.replace(MARK_TAGS, "");
+            }
+            if (element.innerHTML.match(searchExp) && query) {
+                element.innerHTML = element.innerHTML.replace(
+                    searchExp,
+                    '<mark style="background-color:var(--dx-g-yellow-vibrant-90)">$&</mark>'
+                );
+            }
+        } catch (e) {
+            console.error(
+                `${element} could not be parsed by the highlight utility: ${e}`
+            );
         }
 
-        element.innerHTML = innerHtml;
+        const mark = element.querySelector("mark");
+        if (mark && !scrolled) {
+            scrolled = true;
+            mark.scrollIntoView({ block: "nearest" });
+        }
     });
 };