@momentum-ui/web-components 2.16.5 → 2.16.8

package/src/components/floating-modal/FloatingModal.stories.ts

@@ -0,0 +1,67 @@
+/**
+ * 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/floating-modal/FloatingModal";
+import "@/components/radio/Radio";
+import "@/components/radio/RadioGroup";
+import { Args } from "@storybook/web-components";
+import { html } from "lit-html";
+import mdx from "./Floating.mdx";
+
+export default {
+  title: "Components/Floating Modal",
+  component: "md-floating-modal",
+  argTypes: {
+    fixfull: {
+      description: "fix modal position to the screen, not parent div"
+    },
+    onCornerClick: { table: { disable: true } },
+    draggingWindow: { table: { disable: true } },
+    draggingCorner: { table: { disable: true } },
+    onCornerMove: { table: { disable: true } },
+    resizeStyleMap: { table: { disable: true } },
+    fullScreen: { table: { disable: true } },
+    show: { control: "boolean", defaultValue: true },
+    full: { control: "boolean", defaultValue: false },
+    fixed: { control: "boolean", defaultValue: false },
+    ascpectRatio: { control: "boolean", defaultValue: false },
+    heading: { control: "text", defaultValue: "Test Heading" },
+    label: { control: "text", defaultValue: "Test label" }
+  },
+  parameters: {
+    a11y: {
+      element: "md-floating-modal"
+    },
+    docs: {
+      page: mdx,
+      description: {
+        component: "some component description"
+      }
+    }
+  }
+};
+
+export const FloatingModal = (args: Args) => {
+  return html`
+    <md-floating-modal
+      ?show=${args.show}
+      ?full-screen=${args.full}
+      ?fixed-strategy=${args.fixed}
+      ?aspect-ratio=${args.ascpectRatio}
+      heading=${args.heading}
+      label=${args.label}
+    >
+      <md-radiogroup group-label="group_process">
+        <md-radio slot="radio" value="Option 1">Option 1</md-radio>
+        <md-radio slot="radio" value="Option 2">Option 2</md-radio>
+        <md-radio slot="radio" value="Option 3">Option 3</md-radio>
+        <md-radio slot="radio" value="Option 4">Option 4</md-radio>
+      </md-radiogroup>
+    </md-floating-modal>
+  `;
+};

package/src/components/floating-modal/FloatingModal.test.ts

@@ -0,0 +1,114 @@
+import { Button } from "@/components/button/Button";
+import { elementUpdated, fixture, fixtureCleanup, html, nextFrame, oneEvent } from "@open-wc/testing-helpers";
+import "./FloatingModal";
+import { FloatingModal } from "./FloatingModal";
+
+Object.defineProperties(Element.prototype, {
+  getBoundingClientRect: {
+    value: jest.fn().mockReturnValue({
+      width: 10,
+      height: 10,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0
+    })
+  }
+});
+
+describe("Floating Modal Component", () => {
+  let element: FloatingModal.ELEMENT;
+
+  beforeEach(async () => {
+    element = await fixture<FloatingModal.ELEMENT>(html` <md-floating-modal></md-floating-modal> `);
+  });
+  afterEach(fixtureCleanup);
+
+  test("should show modal", async () => {
+    element.show = true;
+    await nextFrame();
+    await elementUpdated(element);
+
+    expect(element.show).toBeTruthy();
+  });
+
+  test("should set label is value provided", async () => {
+    element.show = true;
+    element.label = "Floating Modal";
+    await nextFrame();
+    await elementUpdated(element);
+
+    expect(element.container!.getAttribute("aria-label")).toEqual("Floating Modal");
+  });
+
+  test("should close modal with button click", async () => {
+    element.show = true;
+    await nextFrame();
+    await elementUpdated(element);
+
+    const mdButton = element.shadowRoot!.querySelector(".md-floating__close") as Button.ELEMENT;
+    const button = mdButton.shadowRoot!.querySelector("button");
+    button!.click();
+
+    await elementUpdated(element);
+    expect(element.show).toBeFalsy();
+  });
+
+  test("should dispatch event when modal close", async () => {
+    element.show = true;
+    await nextFrame();
+    await elementUpdated(element);
+
+    const clickEvent = new MouseEvent("click");
+    setTimeout(() => element.handleClose(clickEvent));
+
+    const { detail } = await oneEvent(element, "floating-modal-close");
+
+    expect(detail).toBeDefined();
+    expect(detail.srcEvent).toEqual(clickEvent);
+  });
+
+  test("should resize modal when resize button click", async () => {
+    element.show = true;
+    await nextFrame();
+    await elementUpdated(element);
+
+    const mdButton = element.shadowRoot!.querySelector(".md-floating__resize") as Button.ELEMENT;
+    const button = mdButton.shadowRoot!.querySelector("button");
+    button!.click();
+
+    await elementUpdated(element);
+    expect(element.show).toBeTruthy();
+    expect(element.full).toBeTruthy();
+  });
+
+  test("should show minimize option", async () => {
+    element.show = true;
+    element.minimizable = true;
+    await nextFrame();
+    await elementUpdated(element);
+
+    const mdButton = element.shadowRoot!.querySelector(".md-floating__minimize") as Button.ELEMENT;
+    const button = mdButton.shadowRoot!.querySelector("button");
+    button!.click();
+
+    await elementUpdated(element);
+    expect(element.show).toBeTruthy();
+    expect(element.minimizable).toBeTruthy();
+  });
+
+  test("should resize", async () => {
+    element.show = true;
+    await nextFrame();
+    await elementUpdated(element);
+
+    // Change the viewport to 500px.
+    global.innerWidth = 500;
+
+    // Trigger the window resize event.
+    global.dispatchEvent(new Event("resize"));
+
+    await elementUpdated(element);
+    expect(element.show).toBeTruthy();
+  });
+});

package/src/components/floating-modal/FloatingModal.ts

@@ -0,0 +1,372 @@
+import "@/components/button/Button";
+import "@/components/icon/Icon";
+import { FocusMixin, SlottedMixin } from "@/mixins";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import "@interactjs/actions/drag";
+import "@interactjs/actions/resize";
+import "@interactjs/auto-start";
+import interact from "@interactjs/interact/index";
+import "@interactjs/modifiers";
+import * as Interact from "@interactjs/types";
+import { html, internalProperty, LitElement, property, PropertyValues, query } from "lit-element";
+import { nothing } from "lit-html";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "./FloatingMinimizedModal";
+import styles from "./scss/module.scss";
+
+export namespace FloatingModal {
+  @customElementWithCheck("md-floating-modal")
+  export class ELEMENT extends FocusMixin(SlottedMixin(LitElement)) {
+    @property({ type: String }) heading = "";
+    @property({ type: String }) label = "";
+    @property({ type: Boolean, reflect: true }) show = false;
+    @property({ type: Boolean, reflect: true, attribute: "aspect-ratio" }) aspectRatio = false;
+    @property({ type: Boolean, reflect: true, attribute: "fixed-strategy" }) fixed = false;
+    @property({ type: Boolean, reflect: true, attribute: "full-screen" }) full = false;
+    @property({ type: String, attribute: "close-aria-label" }) closeAriaLabel = "Close Modal";
+    @property({ type: String, attribute: "resize-aria-label" }) resizeAriaLabel = "Resize Modal";
+    @property({ type: String, attribute: "maximize-aria-label" }) maximizeScreenLabel = "Maximize Modal";
+    @property({ type: String, attribute: "minimize-aria-label" }) minimizeAriaLabel = "Minimize Modal";
+    @property({ type: Boolean, reflect: true }) private minimize = false;
+    @property({ type: Object }) position:
+      | {
+          x: number;
+          y: number;
+        }
+      | undefined;
+    @property({ type: Object }) minPosition:
+      | {
+          x: number;
+          y: number;
+        }
+      | undefined;
+    @property({ type: Boolean, reflect: true }) minimizable = false;
+    @property({ type: Object }) containerRect: DOMRect | null = null;
+
+    @internalProperty() private dragOccured: boolean | false = false;
+
+    @query(".md-floating") container?: HTMLDivElement;
+    @query(".md-floating__body") body!: HTMLDivElement;
+    @query(".md-floating__header") header!: HTMLDivElement;
+    @query(".md-floating-min-parent") minimizedHeader!: HTMLDivElement;
+    @query('slot[name="header"]') headerSlot!: HTMLSlotElement;
+
+    private containerTransform = "";
+
+    private applyInitialPosition = true;
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("show")) {
+        if (this.container && this.show) {
+          this.applyInitialPosition = true;
+          this.setContainerRect();
+          this.setInteractInstance();
+        } else {
+          this.cleanContainerStyles();
+          this.destroyInteractInstance();
+        }
+      }
+      if (this.container && changedProperties.has("position") && !changedProperties.has("show")) {
+        this.setInitialTargetPosition();
+      }
+    }
+
+    private isNewPositionNotSame() {
+      if (this.container) {
+        return (
+          Number(this.container?.getAttribute("data-x")) !== this.position?.x ||
+          Number(this.container?.getAttribute("data-y")) !== this.position?.y
+        );
+      }
+    }
+
+    private setInitialTargetPosition() {
+      if (this.container && this.isNewPositionNotSame()) {
+        this.setTargetPosition(this.container, Number(this.position?.x), Number(this.position?.y));
+      }
+    }
+
+    private cleanContainerStyles() {
+      this.containerTransform = "";
+    }
+
+    private getContainerTransform() {
+      const dataX = this.container!.getAttribute("data-x");
+      const dataY = this.container!.getAttribute("data-y");
+      if (dataX && dataY) {
+        this.dispatchEvent(
+          new CustomEvent("floating-modal-location", {
+            composed: true,
+            bubbles: true,
+            detail: {
+              transform: { x: dataX, y: dataY }
+            }
+          })
+        );
+        return `translate(${dataX}px, ${dataY}px)`;
+      }
+      return this.container!.style.transform;
+    }
+
+    private setContainerRect() {
+      requestAnimationFrame(async () => {
+        await this.updateComplete;
+
+        this.containerRect = this.container!.getBoundingClientRect();
+        this.dispatchEvent(
+          new CustomEvent("floating-modal-resize", {
+            composed: true,
+            bubbles: true,
+            detail: {
+              size: this.containerRect
+            }
+          })
+        );
+
+        this.containerTransform = this.getContainerTransform();
+      });
+    }
+
+    private setInteractInstance() {
+      requestAnimationFrame(() => {
+        if (this.container) {
+          interact(this.container)
+            .resizable({
+              edges: { left: true, right: true, bottom: true, top: true },
+              listeners: {
+                end: this.resizeEndListener,
+                move: this.resizeMoveListener
+              },
+              modifiers: this.aspectRatio
+                ? [
+                    interact.modifiers.aspectRatio({
+                      ratio: "preserve",
+                      equalDelta: true,
+                      modifiers: [interact.modifiers.restrictSize({ max: "parent" })]
+                    })
+                  ]
+                : undefined
+            })
+            .draggable({
+              autoScroll: true,
+              allowFrom: this.header,
+              ignoreFrom: this.body,
+              listeners: {
+                move: this.dragMoveListener,
+                end: this.dragEndListener
+              }
+            });
+        }
+      });
+    }
+
+    handleClose(event: MouseEvent) {
+      this.show = false;
+      this.full = false;
+
+      this.dispatchEvent(
+        new CustomEvent("floating-modal-close", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            srcEvent: event
+          }
+        })
+      );
+    }
+
+    handleMinimize() {
+      if (this.minimizable) {
+        if (!this.dragOccured) {
+          this.minimize = !this.minimize;
+          this.dispatchEvent(
+            new CustomEvent("floating-modal-minimize", {
+              composed: true,
+              bubbles: true,
+              detail: {
+                minimize: this.minimize
+              }
+            })
+          );
+        }
+        this.dragOccured = false;
+      }
+    }
+
+    handleToggleExpandCollapse() {
+      this.full = !this.full;
+    }
+
+    private resizeMoveListener = (event: Interact.ResizeEvent) => {
+      const { target } = event;
+      let x = parseFloat(target.getAttribute("data-x") as string) || 0;
+      let y = parseFloat(target.getAttribute("data-y") as string) || 0;
+      target.style.setProperty("width", `${event.rect.width}px`, "important");
+      target.style.setProperty("height", `${event.rect.height}px`, "important");
+      const { initialX, initialY } = this.getInitialPosition();
+      x += event.deltaRect!.left + initialX;
+      y += event.deltaRect!.top + initialY;
+
+      this.setTargetPosition(target, x, y);
+      this.applyInitialPosition = false;
+    };
+
+    private resizeEndListener = () => {
+      this.setContainerRect();
+    };
+
+    private getInitialPosition = () => {
+      if (this.applyInitialPosition && this.position) {
+        return { initialX: Number(this.position?.x), initialY: Number(this.position?.y) };
+      }
+      return { initialX: 0, initialY: 0 };
+    };
+
+    private getTransformValues(event: Interact.InteractEvent) {
+      const { target, dx, dy } = event;
+      const { initialX, initialY } = this.getInitialPosition();
+      const x = (parseFloat(target.getAttribute("data-x") as string) || 0) + dx + initialX;
+      const y = (parseFloat(target.getAttribute("data-y") as string) || 0) + dy + initialY;
+      return { x, y };
+    }
+
+    private dragMoveListener = (event: Interact.InteractEvent) => {
+      const { target } = event;
+      const { x, y } = this.getTransformValues(event);
+      this.setTargetPosition(target, x, y);
+      this.applyInitialPosition = false;
+    };
+
+    private dragEndListener = () => {
+      this.dragOccured = true;
+      this.setContainerRect();
+    };
+
+    private setTargetPosition(target: Interact.Element, x: number, y: number) {
+      target.style.transform = `translate(${x}px, ${y}px)`;
+      target.setAttribute("data-x", `${x}`);
+      target.setAttribute("data-y", `${y}`);
+    }
+
+    private destroyInteractInstance() {
+      if (this.container && interact.isSet(this.container)) {
+        interact(this.container).unset();
+      }
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.destroyInteractInstance();
+    }
+
+    renderedCallback() {
+      this.containerTransform = this.position ? `translate(${this.position.x}px, ${this.position.y}px)` : "";
+    }
+
+    render() {
+      return html`
+        ${this.show
+          ? html`
+              <div
+                class="md-floating ${this.fixed ? "fixed" : ""} ${this.minimize ? "hide" : ""}"
+                part="floating"
+                role="dialog"
+                aria-label=${ifDefined(this.label || undefined)}
+                aria-modal="true"
+                style=${ifDefined(
+                  this.containerRect
+                    ? `width: ${this.full ? "100% !important" : `${this.containerRect.width}px !important`};
+                  height: ${this.full ? "100% !important" : `${this.containerRect.height}px !important`};
+                  top: ${this.full ? "0 !important" : ""};
+                  left: ${this.full ? "0 !important" : ""};
+                  bottom: ${this.full ? "0 !important" : ""};
+                  right: ${this.full ? "0 !important" : ""};
+                  ${this.full ? "transform: none !important" : ""};
+                  ${!this.full ? `transform: ${this.position ? `translate(${this.position.x}px, ${this.position.y}px)` : this.containerTransform} !important` : ""};`
+                    : undefined
+                )}
+              >
+                <div class="md-floating__header">
+                  <div class="md-floating__header-text">
+                    ${this.heading
+                      ? html` ${this.heading} `
+                      : html`
+                          ${!this.minimize && this.headerSlot}
+                          <slot name="header"></slot>
+                        `}
+                  </div>
+                  ${this.minimizable
+                    ? html` <md-button
+                        color="color-none"
+                        class="md-floating__minimize"
+                        ariaLabel="${this.minimizeAriaLabel}"
+                        circle
+                        @click=${this.handleMinimize}
+                      >
+                        <md-icon name="minus-bold" size="16" iconSet="momentumDesign"></md-icon>
+                      </md-button>`
+                    : nothing}
+                  ${!this.minimize
+                    ? html` <md-button
+                        color="color-none"
+                        class="md-floating__resize"
+                        ariaLabel="${this.full ? this.resizeAriaLabel : this.maximizeScreenLabel}"
+                        circle
+                        @click=${this.handleToggleExpandCollapse}
+                      >
+                        <md-icon
+                          name=${this.full ? "minimize-bold" : "maximize-bold"}
+                          size="16"
+                          iconSet="momentumDesign"
+                        ></md-icon>
+                      </md-button>`
+                    : ""}
+
+                  <md-button
+                    color="color-none"
+                    class="md-floating__close"
+                    ariaLabel="${this.closeAriaLabel}"
+                    circle
+                    @click=${this.handleClose}
+                  >
+                    <md-icon name="cancel-bold" size="16" iconSet="momentumDesign"></md-icon>
+                  </md-button>
+                </div>
+                <div class="md-floating__body" part="floating-body">
+                  <slot></slot>
+                </div>
+              </div>
+              ${this.minimizable
+                ? html` <div class="md-floating-min-parent" part="minimize-floating" tabindex="-1">
+                    <md-floating-modal-minimized
+                      class="float-modal-min"
+                      part="floating-minimized"
+                      heading=${this.heading}
+                      .minimize=${this.minimize}
+                      .minPosition=${this.minPosition}
+                      @floating-min-modal-minimize=${() => this.handleMinimize()}
+                      @floating-modal-close=${this.handleClose}
+                      ?show=${this.show}
+                    >
+                      ${this.minimize && this.headerSlot}
+                    </md-floating-modal-minimized>
+                  </div>`
+                : nothing}
+            `
+          : nothing}
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-floating-modal": FloatingModal.ELEMENT;
+  }
+}

package/src/components/floating-modal/README.md

@@ -0,0 +1,36 @@
+# Floating Modal
+
+Floating Modal provides a movable and scalable modal for more dynamic UI.
+
+### Attributes
+- `heading` : String - Text content for the modal header
+- `label` : String - text content for the `aria-label` attribute for A11y
+- `aspect-ratio` : Boolean - Preserves width/height ratio of modal on resize
+- `fixed-strategy` : Boolean - Allows user to enable `fixed` position style for the modal element.
+- `full-screen` : Boolean - Toggles full screen modal mode
+
+### Styling
+The wrapping container of the modal can be reached via CSS by using the `::part()` selector. For example, in your application's stylesheet you can say:
+```CSS
+md-floating-modal::part(floating) {
+  min-height: 400px;
+  min-width: 600px;
+} 
+```
+
+### Slots
+#### Unnamed Slots
+The Unnamed `<slot>` will render any content you pass between the `<md-floating-modal></md-floating-modal>` tags.
+```html
+<md-floating-modal> 
+    <div>My modal's content!</div> 
+</md-floating-modal>
+```
+
+#### Named Slots
+Floating Modal exposes a 'header' slot for composable header content.
+```html
+<md-floating-modal>
+    <h3 slot=“header”>My Header</h3>
+</md-floating-modal>
+```

package/src/components/floating-modal/scss/floating.scss

@@ -0,0 +1,85 @@
+.md-floating {
+  background-color: var(--floating-modal-main-bg-color, $lm-floating-modal-main-bg-color-light);
+  border: $floating-main-border;
+  border-radius: 8px;
+  box-shadow: var(--floating-modal-main-box-shadow, $lm-floating-modal-main-box-shadow-light);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  touch-action: none;
+  user-select: none;
+  z-index: 1040;
+
+  &.fixed {
+    position: fixed;
+  }
+
+  &.hide {
+    display: block;
+    height: 0;
+    visibility: hidden;
+    width: 0;
+  }
+
+  &.md-floating-minimize {
+    background: var(--floating-modal-main-bg-color-alternate, $lm-floating-modal-main-bg-color-alternate-light);
+    border-radius: 8px;
+    width: 100%;
+  }
+
+  &.md-floating-minimize:focus {
+    box-shadow: 0 0 0 $focus-ring-size $md-blue-70;
+    outline: none;
+  }
+
+  .md-floating__header {
+    align-items: center;
+    border-bottom: $floating-header-border;
+    color: var(--floating-modal-main-text-color, $lm-floating-modal-main-text-color-light);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    max-height: $floating-header-max-height;
+    padding: $floating-header-padding;
+    width: 100%;
+
+    &-text {
+      flex: 2 1 auto;
+      font-family: $body-font-family;
+      font-size: $font-size-large;
+      line-height: $font-size-large;
+      text-align: left;
+    }
+  }
+
+  .md-floating__body {
+    height: calc(100% - 3rem);
+    overflow: auto;
+    padding: $floating-body-padding;
+  }
+
+  .md-floating-body-minimize {
+    display: block;
+    height: 0;
+    visibility: hidden;
+  }
+
+  .md-floating__header-minimize {
+    border-bottom: 0;
+    color: var(--floating-modal-main-text-color-alternate, $lm-floating-modal-main-text-color-alternate-light);
+    font-size: 16px;
+    line-height: 24px;
+    width: 100%;
+  }
+}
+
+.md-floating-min-parent {
+  bottom: 0;
+  height: 3rem !important;
+  position: absolute;
+  right: 0;
+  width: 223px !important;
+}

package/src/components/floating-modal/scss/module.scss

@@ -0,0 +1,19 @@
+@import "@/wc_scss/tools/functions/core";
+@import "@/wc_scss/tools/mixins/core";
+@import "@/wc_scss/tools/mixins/flex";
+@import "@/wc_scss/tools/mixins/easing";
+
+@import "@/wc_scss/settings/rem";
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/colors/settings-transparencies";
+@import "@/wc_scss/settings/core";
+@import "@/wc_scss/settings/media";
+
+@import "@/wc_scss/tools/mixins/focus";
+
+@import "@/wc_scss/typography/settings";
+
+@import "./vars/lm-floating-modal-settings";
+
+@import "./settings";
+@import "./floating";

package/src/components/floating-modal/scss/settings.scss

@@ -0,0 +1,5 @@
+$floating-header-border: 1px solid var(--floating-modal-main-border-color, $lm-floating-modal-main-border-color-light);
+$floating-main-border: 1px solid var(--floating-modal-outer-border-color, $lm-floating-modal-outer-border-color-light);
+$floating-header-padding: rem-calc(8) rem-calc(8) rem-calc(8) rem-calc(12);
+$floating-body-padding: rem-calc(12) rem-calc(20);
+$floating-header-max-height: rem-calc(48);