@salesforcedevs/dx-components 0.26.3 → 0.28.1

package/lwc.config.json

@@ -49,6 +49,7 @@
         "dx/interactiveImage",
         "dx/lazy",
         "dx/logo",
+        "dx/modalDrawer",
         "dx/pagination",
         "dx/podcastHost",
         "dx/podcastPlayer",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.26.3",
+    "version": "0.28.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -25,5 +25,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "9c94c66a063751c3ada92ae0dbbded0b999feb98"
+    "gitHead": "01dbc1fb1d21c1b83ec997821bb33e8343732ec8"
 }

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/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/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/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);
 }