@salesforcedevs/dx-components 1.3.66-alpha-032 → 1.3.66-modal-001

package/lwc.config.json

@@ -98,7 +98,6 @@
         "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.66-alpha-032",
+    "version": "1.3.66-modal-001",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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,5 +1,4 @@
 @import "dxHelpers/reset";
-@import "dxHelpers/typeBadge";
 @import "./coveo.css";
 
 /* stylelint-disable selector-class-pattern */
@@ -386,8 +385,3 @@ 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,8 +1,6 @@
 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,7 +38,6 @@ 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"
@@ -56,7 +53,6 @@ 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>
@@ -175,15 +171,6 @@ 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,2 +1,33 @@
 @import "dxHelpers/reset";
-@import "dxHelpers/typeBadge";
+
+.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);
+}

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

@@ -5,20 +5,65 @@ import {
     Color,
     ContentType,
     IconSprite,
-    IconData,
     IconSymbol,
     TypeBadgeSize
 } from "typings/custom";
 import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
-import {
-    isContentType,
-    getContentTypeColorScope,
-    getContentTypeColorVariables
-} from "dxUtils/contentTypes";
-import {
-    CONTENT_TYPE_LABELS,
-    CONTENT_TYPE_ICONS
-} from "dxConstants/contentTypes";
+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"
+    }
+};
 
 export default class TypeBadge extends LightningElement {
     @api size: TypeBadgeSize = "default";
@@ -66,29 +111,39 @@ export default class TypeBadge extends LightningElement {
     private _iconSymbol?: IconSymbol;
 
     private get variantIconData(): IconData | null {
-        if (this.variant && this.variant in CONTENT_TYPE_ICONS) {
-            return CONTENT_TYPE_ICONS[this.variant as ContentType];
+        if (this.variant && this.variant in contentTypeIcons) {
+            return contentTypeIcons[this.variant as ContentType];
         }
         return null;
     }
 
     private get variantLabel(): string | null {
         if (this.isContentType) {
-            return CONTENT_TYPE_LABELS[this.variant as ContentType];
+            return contentTypeLabels[this.variant as ContentType];
         }
         return null;
     }
 
     private get variantColorScope(): string | null {
-        return getContentTypeColorScope(this.variant);
+        if (this.isContentType) {
+            return "content-type";
+        }
+        if (this.isBrand) {
+            return "brand";
+        }
+        return null;
     }
 
     private get isContentType(): boolean {
-        return isContentType(this.variant);
+        return CONTENT_TYPES.includes(this.variant as ContentType);
+    }
+
+    private get isBrand(): boolean {
+        return BRANDS.includes(this.variant as ContentType);
     }
 
     private get className(): string {
-        return cx("dx-badge", `size-${this.size}`);
+        return cx("badge", `size-${this.size}`);
     }
 
     private get style(): string {
@@ -99,7 +154,10 @@ export default class TypeBadge extends LightningElement {
             });
         }
         if (this.variantColorScope) {
-            return getContentTypeColorVariables(this.variant);
+            return buildStyleColorVariables({
+                background: `--dx-g-${this.variantColorScope}-${this.variant}-color-background`,
+                color: `--dx-g-${this.variantColorScope}-${this.variant}-color`
+            });
         }
         if (this.color) {
             const variables = colorToDxColors(this.color as Color);

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

@@ -1,54 +1,3 @@
-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

@@ -1,31 +0,0 @@
-.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

@@ -1,30 +0,0 @@
-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`
-});
-}