@salesforcedevs/dx-components 1.3.76 → 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.76",
+    "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": "14f72dacd30bd66b65033fbf972f24510568296e"
+    "gitHead": "e5b62beb3fc195ec6d6d947fe5d5c84a26d141da"
 }

package/src/modules/dx/cardTrial/cardTrial.html

@@ -2,7 +2,6 @@
     <dx-modal
         if:true={hasTwoButtons}
         open={_modalOpen}
-        ontogglemodal={toggleModal}
         onclosemodal={closeModal}
     >
         <dx-card-trial-expanded
@@ -24,6 +23,7 @@
             title={title}
             type-badge-value={modalTypeBadgeValue}
             type-badge-dark={modalTypeBadgeDark}
+            onclickclose={closeModal}
         ></dx-card-trial-expanded>
     </dx-modal>
     <div class="recommended-container" if:true={recommended}>
@@ -94,7 +94,7 @@
             <dx-button
                 class="button-two"
                 size="large"
-                onclick={toggleModal}
+                onclick={openModal}
                 variant="secondary"
                 font="sans"
                 icon-symbol={buttonTwoIcon}

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -96,8 +96,8 @@ export default class CardTrial extends LightningElement {
         return cx("details", this.hasButtons && "details_top-margin");
     }
 
-    private toggleModal() {
-        this._modalOpen = !this._modalOpen;
+    private openModal() {
+        this._modalOpen = true;
     }
 
     private closeModal() {

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.html

@@ -5,7 +5,7 @@
                 class="button-close"
                 variant="secondary"
                 icon-symbol="close"
-                onclick={handleModalClose}
+                onclick={onClickClose}
             >
                 Close
             </dx-button>

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.ts

@@ -40,13 +40,6 @@ export default class CardTrial extends LightningElement {
     private _colTwoDetails!: string[];
     private stickyCloseObserver!: IntersectionObserver;
 
-    connectedCallback(): void {
-        this.template.addEventListener(
-            "keydown",
-            this.handleKeyDown.bind(this)
-        );
-    }
-
     renderedCallback(): void {
         this.observeStickyClose();
     }
@@ -71,26 +64,8 @@ export default class CardTrial extends LightningElement {
         }
     }
 
-    private handleKeyDown(event: KeyboardEvent): void {
-        if (event.key === "Escape") {
-            this.handleModalClose();
-        }
-    }
-
-    private handleModalToggle() {
-        this.dispatchEvent(
-            new CustomEvent("togglemodal", {
-                bubbles: true
-            })
-        );
-    }
-
-    private handleModalClose() {
-        this.dispatchEvent(
-            new CustomEvent("closemodal", {
-                bubbles: true
-            })
-        );
+    private onClickClose() {
+        this.dispatchEvent(new CustomEvent("clickclose"));
     }
 
     private handleSignUpClick(e: PointerEvent) {

package/src/modules/dx/modal/modal.css

@@ -1,40 +1,7 @@
-:host {
-    --dx-c-modal-drawer-z-index: 5000;
+.dx-modal-drawer_container {
+    display: none !important;
 }
 
-.modal-drawer_container {
-    display: none;
-}
-
-.modal-drawer_container.modal-drawer_active {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: grid;
-    justify-content: center;
-    align-items: center;
-    z-index: var(--dx-c-modal-drawer-z-index);
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-}
-
-.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);
-}
-
-@media screen and (max-width: 768px) {
-    .modal-drawer_container.modal-drawer_active {
-        pointer-events: all;
-    }
+.dx-modal-drawer_overlay {
+    display: none !important;
 }

package/src/modules/dx/modal/modal.html

@@ -1,10 +1,13 @@
 <template>
-    <div class={containerClass} tabindex="0" role="dialog">
-        <slot></slot>
-    </div>
     <div
-        if:true={open}
-        class="modal-drawer_overlay"
-        onclick={handleCloseModal}
-    ></div>
+        class={containerClass}
+        onclick={onClickModal}
+        tabindex="0"
+        role="dialog"
+    >
+        <div style="pointer-events: all">
+            <slot onslotchange={onSlotChange}></slot>
+        </div>
+    </div>
+    <div class={overlayClass} onclick={onClickModal}></div>
 </template>

package/src/modules/dx/modal/modal.ts

@@ -1,55 +1,98 @@
-import cx from "classnames";
 import { LightningElement, api } from "lwc";
 import { normalizeBoolean } from "dxUtils/normalizers";
+import { LightningSlotElement } from "typings/custom";
+
+const CONTAINER_CLASS = "dx-modal-drawer_container";
+const OVERLAY_CLASS = "dx-modal-drawer_overlay";
+
+const modalStyle =
+    "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; justify-content: center; align-items: center; z-index: 5000; height: 100%; width: 100%; pointer-events: none;";
+const overlayStyle =
+    "background-color: #195594; bottom: 0; height: 100%; left: 0; opacity: 0.62; position: fixed; right: 0; top: 0; width: 100%; z-index: calc(5000 - 1);";
 
 export default class Modal extends LightningElement {
     private _open = false;
-
     @api get open() {
         return this._open;
     }
-
     set open(value) {
         this._open = normalizeBoolean(value);
+        if (this._open) {
+            this.openModal();
+        } else {
+            this.closeModal();
+        }
     }
 
+    private overlayClass = OVERLAY_CLASS;
+    private modal: HTMLElement | null = null;
+    private overlay: HTMLElement | null = null;
+    private root: HTMLElement | null = null;
+    private modalContent: HTMLElement | null = null;
+    private keydownListener: Event | null = null;
+
     get containerClass(): string {
-        return cx(
-            "modal-drawer_container",
-            this._open && "modal-drawer_active"
-        );
+        return CONTAINER_CLASS;
     }
 
-    renderedCallback(): void {
-        if (this._open) {
-            this.focusFirstElement();
+    private onSlotChange = (e: LightningSlotElement) => {
+        // @ts-ignore
+        this.modalContent = e.target.assignedElements()[0];
+        if (!this.modal && !this.overlay) {
+            this.appendModalToHTML();
         }
-    }
+    };
 
-    connectedCallback(): void {
-        this.template.addEventListener(
-            "keydown",
-            this.handleKeyDown.bind(this)
-        );
+    private connectedCallback(): void {
+        document.addEventListener("keydown", this.handleKeyDown.bind(this));
     }
 
-    focusFirstElement(): void {
-        this.template.querySelector("div")!.focus();
+    private disconnectedCallback(): void {
+        window.removeEventListener("keydown", this.handleKeyDown.bind(this));
+        this.modal?.remove();
+        this.overlay?.remove();
     }
 
-    handleKeyDown(event: KeyboardEvent): void {
+    private handleKeyDown(event: KeyboardEvent): void {
         if (event.key === "Escape") {
-            this.handleCloseModal();
+            this.closeModal();
         }
     }
 
-    handleToggleModal() {
-        this._open = !this._open;
-        this.dispatchEvent(new CustomEvent("togglemodal"));
+    private appendModalToHTML = () => {
+        // @ts-ignore
+        this.root = document.querySelector("html");
+        this.modal = this.template.querySelector(`.${CONTAINER_CLASS}`);
+        this.overlay = this.template.querySelector(`.${OVERLAY_CLASS}`);
+        if (this.overlay && this.modal && this.modalContent && this.root) {
+            this.modal.setAttribute("style", modalStyle);
+            this.overlay.setAttribute("style", overlayStyle);
+            this.modal.querySelector("div")?.appendChild(this.modalContent);
+            if (this.open) {
+                this.openModal();
+            }
+        }
+    };
+
+    private onClickModal(e) {
+        if (e?.target?.className === OVERLAY_CLASS) {
+            this.closeModal();
+        }
     }
 
-    handleCloseModal() {
-        this._open = false;
-        this.dispatchEvent(new CustomEvent("closemodal"));
+    private openModal() {
+        if (this.overlay && this.modal) {
+            this.root?.appendChild(this.modal);
+            this.root?.appendChild(this.overlay);
+            this.modal.querySelector("div")?.focus();
+        }
     }
+
+    private closeModal = () => {
+        if (this.modal && this.overlay) {
+            this.modal.remove();
+            this.overlay.remove();
+            this.dispatchEvent(new CustomEvent("closemodal"));
+        }
+    };
 }

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