@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/components/modal/Modal.test.ts

@@ -0,0 +1,169 @@
+import "./Modal";
+import { Modal } from "./Modal";
+import { Key } from "@/constants";
+import { elementUpdated, fixture, fixtureCleanup, html, nextFrame, oneEvent } from "@open-wc/testing-helpers";
+
+Object.defineProperties(Element.prototype, {
+  getBoundingClientRect: {
+    value: jest.fn().mockReturnValue({
+      width: 10,
+      height: 10,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    })
+  },
+  getClientRects: {
+    value: jest.fn().mockReturnValue(["1", "2"])
+  }
+});
+
+Object.defineProperties(HTMLElement.prototype, {
+  offsetWidth: {
+    value: jest.fn().mockReturnValue(10)
+  },
+  offsetHeight: {
+    value: jest.fn().mockReturnValue(10)
+  }
+});
+
+describe("Modal Component", () => {
+  let element: Modal.ELEMENT;
+
+  beforeEach(async () => {
+    element = await fixture<Modal.ELEMENT>(
+      html`
+        <md-modal>
+          <input type="text" placeholder="Type Text" />
+          <button slot="footer" type="reset">Reset</button>
+          <button slot="footer" type="submit">Submit</button>
+        </md-modal>
+      `
+    );
+  });
+  afterEach(fixtureCleanup);
+
+  test("should dispatch event when modal closed", async () => {
+    jest.useRealTimers();
+    element.show = true;
+    element.backdropClickExit = true;
+    await elementUpdated(element);
+
+    setTimeout(() => element["handleCloseBackdrop"]());
+    const enterEvent = await oneEvent(element, "close-modal");
+    expect(enterEvent).toBeDefined();
+  });
+
+  test("should render slot footer", async () => {
+    element.hideFooter = true;
+    element.show = true;
+    await elementUpdated(element);
+
+    expect(element.hideFooter).toBeTruthy();
+    expect(element.shadowRoot!.querySelector(".md-modal__footer slot[name='footer']")).not.toBeNull();
+  });
+
+  test("should render slot header", async () => {
+    element.hideHeader = true;
+    element.show = true;
+    await elementUpdated(element);
+
+    expect(element.hideHeader).toBeTruthy();
+    expect(element.shadowRoot!.querySelector(".md-modal__header slot[name='header']")).not.toBeNull();
+  });
+
+  test("should render header message", async () => {
+    element.headerMessage = "Header Message";
+    element.show = true;
+    await elementUpdated(element);
+
+    expect(element.headerMessage).toEqual("Header Message");
+    expect(element.shadowRoot!.querySelector(".md-modal__header .md-modal__message")).not.toBeNull();
+  });
+
+  test("should render exit button", async () => {
+    element.backdropClickExit = true;
+    element.show = true;
+    await elementUpdated(element);
+
+    expect(element.backdropClickExit).toBeTruthy();
+    expect(element.shadowRoot!.querySelector(".md-modal_overlay")).not.toBeNull();
+  });
+
+  test("should render close button", async () => {
+    element.showCloseButton = true;
+    element.show = true;
+    await elementUpdated(element);
+
+    expect(element.showCloseButton).toBeTruthy();
+    expect(element.shadowRoot!.querySelector(".md-close.md-modal__close")).not.toBeNull();
+  });
+
+  test("should close modal if noExitOnEsc is set to true and escape key is pressed", async () => {
+    jest.useFakeTimers();
+    element.show = true;
+    element.noExitOnEsc = false;
+    element.backdropClickExit = true;
+    await elementUpdated(element);
+    const escapePressEvent = new KeyboardEvent("keydown", { code: Key.Escape });
+    element.handleCloseOutside(escapePressEvent);
+    expect(element.show).toBeFalsy();
+    jest.clearAllTimers();
+  });
+
+  test("should not close modal if noExitOnEsc is set to false and escape key is pressed", async () => {
+    jest.useFakeTimers();
+    element.show = true;
+    element.noExitOnEsc = true;
+    element.backdropClickExit = true;
+    await elementUpdated(element);
+    const escapePressEvent = new KeyboardEvent("keydown", { code: Key.Escape });
+    element.handleCloseOutside(escapePressEvent);
+    expect(element.show).toBeTruthy();
+  });
+
+  test("should close modal when enter key is pressed", async () => {
+    jest.useFakeTimers();
+
+    await elementUpdated(element);
+
+    const mockEnterClick = jest.spyOn(element, "handleKeyDown");
+    element.handleKeyDown(new KeyboardEvent("Enter"));
+    await elementUpdated(element);
+
+    expect(mockEnterClick).toHaveBeenCalled();
+
+    mockEnterClick.mockRestore();
+  });
+
+  test("should close modal if backdrop button clicked", async () => {
+    jest.useFakeTimers();
+    element.show = true;
+    element.backdropClickExit = true;
+    element.noExitOnEsc = false;
+    await elementUpdated(element);
+    element.handleCloseBackdrop();
+    await nextFrame();
+    jest.runAllTimers();
+    expect(element.show).toBeFalsy();
+    jest.clearAllTimers();
+  });
+
+  test("should close modal if clicked on modal footer button", async () => {
+    jest.useFakeTimers();
+    element.show = true;
+    element.showCloseButton = true;
+    await elementUpdated(element);
+
+    const click = new MouseEvent("click");
+    const closeButton = element.shadowRoot!.querySelector(".md-modal__footer md-button");
+
+    closeButton!.dispatchEvent(click);
+
+    await elementUpdated(element);
+
+    jest.runAllTimers();
+    expect(element.show).toBeFalsy();
+  });
+});

package/src/components/modal/Modal.ts

@@ -0,0 +1,300 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import "@/components/button/Button";
+import "@/components/icon/Icon";
+import { Key } from "@/constants";
+import { FocusTrapMixin } from "@/mixins";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, internalProperty, LitElement, property, PropertyValues, query } from "lit-element";
+import { nothing } from "lit-html";
+import { classMap } from "lit-html/directives/class-map";
+import styles from "./scss/module.scss";
+
+export const modalType = ["default", "full", "large", "small", "dialog"] as const;
+
+const fadeDuration = 150;
+const minisculeLatency = 13;
+/**
+ * Increasing latency above 13 ms has an increasingly negative impact
+ * on human performance for a given task. While imperceptible at first,
+ * added latency continues to degrade a human’s processing ability until
+ * approaching 75 to 100 ms.
+ * MIT: http://news.mit.edu/2014/in-the-blink-of-an-eye-0116
+ */
+
+export namespace Modal {
+  export type Type = typeof modalType[number];
+
+  @customElementWithCheck("md-modal")
+  export class ELEMENT extends FocusTrapMixin(LitElement) {
+    @property({ type: Boolean }) show = false;
+    @property({ type: String }) headerLabel = "";
+    @property({ type: String }) headerMessage = "";
+    @property({ type: String }) htmlId = "";
+    @property({ type: String, attribute: "aria-label" }) ariaLabel = "modal";
+    @property({ type: String, attribute: "aria-labelled-by" }) ariaLabelledBy = "";
+    @property({ type: String }) ariaLabelClose = "Close Modal";
+    @property({ type: String }) ariaLabelCancel = "Cancel Modal";
+    @property({ type: String }) ariaLabelSubmit = "Submit Modal";
+    @property({ type: String }) ariaDescription = "";
+    @property({ type: Boolean }) showCloseButton = false;
+    @property({ type: Boolean }) backdropClickExit = false;
+    @property({ type: Boolean }) noExitOnEsc = false;
+    @property({ type: String }) size: Type = "default";
+    @property({ type: String }) closeBtnName = "";
+    @property({ type: Boolean }) hideFooter = false;
+    @property({ type: Boolean }) hideHeader = false;
+
+    @internalProperty() private animating = false;
+
+    @query(".md-modal__backdrop") backDrop!: HTMLElement;
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      document.addEventListener("keydown", this.handleCloseOutside);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      document.removeEventListener("keydown", this.handleCloseOutside);
+    }
+
+    protected update(changedProperties: PropertyValues) {
+      super.update(changedProperties);
+      if (changedProperties.has("show")) {
+        if (this.show) {
+          this.modalFadeIn();
+        } else if (changedProperties.get("show") === true) {
+          this.modalFadeOut();
+        }
+      }
+    }
+
+    private notifyModalClose() {
+      this.dispatchEvent(
+        new CustomEvent("close-modal", {
+          composed: true,
+          bubbles: true
+        })
+      );
+    }
+
+    private focusInsideModal() {
+      if (this.focusableElements && this.focusableElements.length) {
+        this.setInitialFocus!();
+      }
+    }
+
+    handleCloseOutside = (event: KeyboardEvent) => {
+      if (event.code === Key.Escape) {
+        event.preventDefault();
+        if (this.show && !this.noExitOnEsc) {
+          this.show = false;
+          this.notifyModalClose();
+        }
+      }
+    };
+
+    handleKeyDown(event: KeyboardEvent) {
+      if (event.code === Key.Enter || event.code === Key.Space) {
+        if (this.show) {
+          this.show = true;
+        }
+      }
+    }
+
+    private transitionPromise(element: HTMLElement) {
+      return new Promise<void>(resolve => {
+        const onModalTransitionEnd = () => {
+          element.removeEventListener("transitionend", onModalTransitionEnd);
+
+          this.activateFocusTrap!();
+          this.setFocusableElements!();
+
+          requestAnimationFrame(() => {
+            resolve();
+          });
+        };
+
+        const onModalTransitionCancel = () => {
+          element.removeEventListener("transitioncancel", onModalTransitionCancel);
+
+          this.deactivateFocusTrap!();
+          this.modalFadeOut();
+
+          resolve();
+        };
+
+        element.addEventListener("transitionend", onModalTransitionEnd);
+        element.addEventListener("transitioncancel", onModalTransitionCancel);
+
+        setTimeout(() => {
+          this.animating = true;
+        }, minisculeLatency);
+      });
+    }
+
+    private async modalFadeIn() {
+      if (this.backDrop) {
+        await this.transitionPromise(this.backDrop);
+        this.focusInsideModal();
+      }
+    }
+
+    private modalFadeOut() {
+      this.animating = false;
+
+      this.deactivateFocusTrap!();
+
+      setTimeout(() => {
+        this.notifyModalClose();
+      }, fadeDuration);
+    }
+
+    handleCloseBackdrop() {
+      if (this.backdropClickExit) {
+        this.show = false;
+        this.notifyModalClose();
+      }
+    }
+
+    private topCloseBtnTemplate() {
+      return html`
+        ${this.showCloseButton
+          ? html`
+              <md-button
+                hasRemoveStyle
+                class="md-close md-modal__close"
+                @click="${this.modalFadeOut}"
+                @keydown="${this.handleKeyDown}"
+                aria-label=${this.ariaLabelClose}
+              >
+                <md-icon name="cancel_14"></md-icon>
+              </md-button>
+            `
+          : nothing}
+      `;
+    }
+
+    private handleFooterClick() {
+      this.show = false;
+      this.notifyModalClose();
+    }
+
+    private headerTemplate() {
+      return this.hideHeader
+        ? html`
+            <div part="modal-header" class="md-modal__header">
+              <slot name="header"></slot>
+              ${this.topCloseBtnTemplate()}
+            </div>
+          `
+        : html`
+            <div part="modal-header" class="md-modal__header">
+              <span class="md-modal__title">${this.headerLabel}</span>
+              ${this.headerMessage
+                ? html`
+                    <span class="md-modal__message">${this.headerMessage}</span>
+                  `
+                : nothing}
+              ${this.topCloseBtnTemplate()}
+            </div>
+          `;
+    }
+
+    footerTemplate() {
+      return this.hideFooter
+        ? html`
+            <div part="modal-footer" class="md-modal__footer">
+              <slot name="footer"></slot>
+            </div>
+          `
+        : html`
+            <div part="modal-footer" class="md-modal__footer">
+              <md-button
+                aria-label=${this.ariaLabelCancel}
+                @click="${this.handleFooterClick}"
+                @keydown="${this.handleKeyDown}"
+              >
+                <span>Cancel</span>
+              </md-button>
+              <md-button
+                type="submit"
+                variant="primary"
+                aria-label=${this.ariaLabelSubmit}
+                @click="${this.handleFooterClick}"
+                @keydown="${this.handleKeyDown}"
+              >
+                <span>${this.closeBtnName}</span>
+              </md-button>
+            </div>
+          `;
+    }
+
+    get modalBackDropClassMap() {
+      return {
+        in: this.show && this.animating
+      };
+    }
+
+    get modalContainerClassMap() {
+      return {
+        in: this.show,
+        [`md-modal--${this.size}`]: !!this.size
+      };
+    }
+
+    render() {
+      return html`
+        ${this.show
+          ? html`
+              <div part="modal-backdrop" class="md-modal__backdrop fade ${classMap(this.modalBackDropClassMap)}">
+                ${this.backdropClickExit
+                  ? html`
+                      <div class="md-modal_overlay" @click="${this.handleCloseBackdrop}"></div>
+                    `
+                  : nothing}
+
+                <div
+                  part="modal-container"
+                  role="dialog"
+                  id="${this.htmlId}"
+                  class="md-modal ${classMap(this.modalContainerClassMap)}"
+                  aria-label="${this.ariaLabel}"
+                  aria-labelledby="${this.ariaLabelledBy}"
+                  aria-describedby="${this.ariaDescription}"
+                >
+                  <div part="modal-content" class="md-modal__content">
+                    <div class="md-modal__flex-container">
+                      ${this.headerTemplate()}
+                      <div part="modal-body" class="md-modal__body">
+                        <slot></slot>
+                      </div>
+                      ${this.footerTemplate()}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            `
+          : nothing}
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-modal": Modal.ELEMENT;
+  }
+}

package/src/components/modal/scss/mixins.scss

@@ -0,0 +1,107 @@
+@mixin modal-base($height: $modal__height--full-screen, $width: $modal__width--full-screen) {
+  color: var(--md-primary-text-color, $md-gray-100);
+  display: block;
+  height: $height;
+  left: 0;
+  margin: 0 auto;
+  position: fixed;
+  right: 0;
+  visibility: visible;
+  width: $width;
+
+  .md-modal__title {
+    color: var(--md-primary-text-color, $md-gray-60);
+  }
+}
+
+@mixin modal-size(
+  $border-width: false,
+  $height: auto,
+  $max-height: none,
+  $min-height: 0,
+  $radius: false,
+  $top-offset: false,
+  $width: $modal__width--full-screen
+) {
+  width: $width;
+
+  @if $top-offset {
+    max-height: calc(100vh - (#{$top-offset} * 2));
+    top: $top-offset;
+  } @else {
+    max-height: $max-height;
+    top: auto;
+  }
+
+  .md-modal__content {
+    @if $min-height !=0 {
+      min-height: $min-height;
+    } @else {
+      height: $height;
+      min-height: $min-height;
+    }
+
+    @if $radius==true {
+      @include radius($modal__radius);
+    } @else if $radius {
+      @include radius($radius);
+    }
+
+    @if $top-offset {
+      max-height: calc(100vh - (#{$top-offset} * 2));
+    } @else {
+      max-height: $max-height;
+    }
+
+    @if $border-width !=false {
+      border-style: solid;
+      border-width: $border-width;
+    }
+  }
+}
+
+@mixin modal-header-size(
+  $line-height: $modal-header__line-height,
+  $font-size: $modal-header__font-size,
+  $font-family: $brand-font-bold
+) {
+  @include flex($fd: column);
+  font-family: $font-family;
+  font-size: $font-size;
+  line-height: $line-height;
+
+  width: 100%;
+
+  @content;
+}
+
+@mixin modal-close-button($size: auto, $top-offset: auto, $right-offset: auto, $font-size: inherit) {
+  height: $size;
+  right: $right-offset;
+  top: $top-offset;
+  width: $size;
+
+  &::before {
+    font-size: $font-size;
+  }
+}
+
+@mixin modal-color($bg: false, $box-shadow: false) {
+  @if $bg {
+    background-color: $bg;
+  }
+
+  @if $box-shadow {
+    box-shadow: $box-shadow;
+  }
+}
+
+@mixin modal-flex-container() {
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  max-height: inherit;
+  min-height: inherit;
+  padding: $modal__padding;
+  width: 100%;
+}