@momentum-ui/web-components 2.5.7 → 2.6.0

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

@@ -1,5 +0,0 @@
-$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);

package/src/components/floating-modal/tokens/lm-floating-modal-tokens.js

@@ -1,46 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const floatingModal = {
-  prefix: "lm",
-  component: "floating-modal",
-  main: {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    "border-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    },
-    radius: {
-      light: "0.5rem",
-      dark: "0.5rem"
-    },
-    "box-shadow": {
-      light: "0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16)",
-      dark: "0 4px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.20)"
-    },
-    "bg-color-alternate": {
-      light: colors.gray[70].name,
-      dark: colors.gray[30].name
-    },
-    "text-color-alternate": {
-      light: colors.gray["05"].name,
-      dark: colors.gray[100].name
-    }
-  },
-  outer: {
-    "border-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[90].name
-    }
-  }
-};
-
-module.exports = floatingModal;

package/src/components/floating-modal/tokens/md-floating-modal-tokens.js

@@ -1,46 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const floatingModal = {
-  prefix: "md",
-  component: "floating-modal",
-  main: {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    "border-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[70].name
-    },
-    radius: {
-      light: "0.5rem",
-      dark: "0.5rem"
-    },
-    "box-shadow": {
-      light: "0 4px 8px rgba(0, 0, 0, 0.20), 0 0 1px rgba(0, 0, 0, 0.20)",
-      dark: "0 4px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.20)"
-    },
-    "bg-color-alternate": {
-      light: colors.gray[70].name,
-      dark: colors.gray[30].name
-    },
-    "text-color-alternate": {
-      light: colors.gray["05"].name,
-      dark: colors.gray[100].name
-    }
-  },
-  outer: {
-    "border-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    }
-  }
-};
-
-module.exports = floatingModal;

package/src/components/form/Form.stories.ts

@@ -1,64 +0,0 @@
-/**
- * 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/form/Form";
-import "@/components/theme/Theme";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
-import { action } from "@storybook/addon-actions";
-import { html } from "lit-element";
-
-export default {
-  title: "Components/Form",
-  component: "md-form",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    a11y: {
-      element: "md-form"
-    }
-  }
-};
-
-export const Form = () => {
-  const darkTheme = boolean("Dark Mode", false);
-  const lumos = boolean("Lumos Theme", false);
-
-  const noValidate = boolean("Allow form shouldn't be validated when submitted", false);
-  const allowRedirect = boolean("Allow redirect to the action URL", true);
-  const isValid = boolean("Is form valid", false);
-  const target = select("Choose browsing context", ["_self", "_blank", "_parent", "_top"], "_self");
-  const enctype = select(
-    "Choose MIME type of the form submission",
-    ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"],
-    "application/x-www-form-urlencoded"
-  );
-  const autoFillName = text(
-    "Enter value for `id` and `name` attributes for any submittable elements (in case if they aren't provided)",
-    "submittable-element"
-  );
-
-  return html`
-    <md-theme class="theme-toggle" id="icon" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-form
-        ?no-validate=${noValidate}
-        ?allow-redirect=${allowRedirect}
-        ?is-valid=${isValid}
-        @form-submitted=${action("Form Submitted")}
-        action="https://www.wikipedia.org/"
-        rel="search"
-        label="User Submit Form"
-        target=${target}
-        enctype=${enctype}
-        autofill-name=${autoFillName}
-      >
-        <md-input name="user-surname"></md-input>
-        <md-button type="submit">Submit</md-button>
-      </md-form>
-    </md-theme>
-  `;
-};

package/src/components/form/Form.test.ts

@@ -1,59 +0,0 @@
-import "./Form";
-import "@/components/input/Input";
-import "@/components/button/Button";
-import { Form } from "./Form";
-import { elementUpdated, fixture, fixtureCleanup, html, oneEvent } from "@open-wc/testing-helpers";
-import { querySelectorDeep } from "query-selector-shadow-dom";
-
-describe("Form Component", () => {
-  let element: Form.ELEMENT;
-
-  beforeEach(async () => {
-    element = await fixture<Form.ELEMENT>(
-      html`
-        <md-form name="form-name" action="https://someurl.com" method="POST">
-          <md-input required></md-input>
-          <md-input disabled></md-input>
-          <button type="submit">Click</button>
-        </md-form>
-      `
-    );
-  });
-  afterEach(fixtureCleanup);
-
-  test("should set correct attribute", async () => {
-    expect(element.getAttribute("name")).toEqual("form-name");
-    expect(element.getAttribute("action")).toEqual("https://someurl.com");
-    expect(element.getAttribute("method")).toEqual("POST");
-  });
-
-  test("should wrap native input in form", async () => {
-    const input = querySelectorDeep(".md-input[required]");
-    expect(input.parentElement).toBeInstanceOf(HTMLFormElement);
-  });
-
-  test("should validate form when is-valid attribute provided", async () => {
-    element.isvalid = true;
-    elementUpdated(element);
-
-    const mockSubmit = jest.fn();
-    HTMLFormElement.prototype.requestSubmit = mockSubmit;
-
-    const button = element["submitButton"];
-
-    button!.dispatchEvent(new MouseEvent("click"));
-    elementUpdated(element);
-
-    expect(mockSubmit).toHaveBeenCalled();
-  });
-
-  test("should dispatch event in case if form submitted", async () => {
-    element.isvalid = true;
-    elementUpdated(element);
-
-    setTimeout(() => element.handleFormSubmit(new Event("dispatch")));
-    const event = await oneEvent(element, "form-submitted");
-
-    expect(event).toBeDefined();
-  });
-});

package/src/components/form/Form.ts

@@ -1,229 +0,0 @@
-/**
- * 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 { html, LitElement, property, query } from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { SlottedMixin, customElementWithCheck } from "@/mixins";
-
-export namespace Form {
-  export type Method = "GET" | "POST" | "dialog";
-  export type Enctype = "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
-  export type Target = "_self" | "_blank" | "_parent" | "_top";
-  export type SubmittableElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-
-  @customElementWithCheck("md-form")
-  export class ELEMENT extends SlottedMixin(LitElement) {
-    @property({ type: String }) rel = "";
-    @property({ type: String }) name = "";
-    @property({ type: String }) action = "";
-    @property({ type: String }) label = "";
-    @property({ type: String }) method: Method = "GET";
-    @property({ type: String }) target: Target = "_self";
-    @property({ type: String }) enctype: Enctype = "application/x-www-form-urlencoded";
-    @property({ type: Boolean, reflect: true, attribute: "no-validate" }) novalidate = false;
-    @property({ type: String, reflect: true, attribute: "accept-charset" }) charset = "UTF-8";
-    @property({ type: Boolean, reflect: true, attribute: "is-valid" }) isvalid = false;
-    @property({ type: String, attribute: "autofill-token" }) token = "on";
-    @property({ type: Boolean, attribute: "allow-redirect" }) allowRedirect = false;
-    @property({ type: String, attribute: "autofill-name" }) autofillname = "input-name";
-
-    @query(".md-form") protected form!: HTMLFormElement;
-
-    private formElement: HTMLFormElement[] = [];
-
-    private isSubmittable(element: HTMLElement) {
-      if (
-        element instanceof HTMLInputElement ||
-        element instanceof HTMLSelectElement ||
-        element instanceof HTMLTextAreaElement
-      ) {
-        return true;
-      }
-      return false;
-    }
-
-    private isDisabled(element: HTMLElement) {
-      return element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
-    }
-
-    private findSubmittable(
-      parent: HTMLElement | ShadowRoot,
-      submittable: Set<SubmittableElement>
-    ): SubmittableElement[] {
-      const children = Array.from(parent.children) as HTMLElement[];
-
-      for (const child of children) {
-        if (this.isDisabled(child)) {
-          continue;
-        }
-
-        if (this.isSubmittable(child)) {
-          submittable.add(child as SubmittableElement);
-        }
-
-        if (child.shadowRoot) {
-          this.findSubmittable(child.shadowRoot, submittable);
-        } else if (child.tagName === "SLOT") {
-          const childElements = (child as HTMLSlotElement).assignedElements();
-          if (childElements.length) {
-            const { parentElement } = childElements[0];
-            if (parentElement) {
-              this.findSubmittable(parentElement, submittable);
-            }
-          }
-        } else {
-          this.findSubmittable(child, submittable);
-        }
-      }
-      return [...submittable];
-    }
-
-    private validated() {
-      if (this.novalidate) {
-        return true;
-      }
-      return this.isvalid;
-    }
-
-    handleSubmit = (event: Event) => {
-      event.preventDefault();
-
-      if (this.validated()) {
-        this.submitForm();
-      }
-    };
-
-    handleFormSubmit = (event: Event) => {
-      if (!this.allowRedirect) {
-        event.preventDefault();
-      }
-
-      this.dispatchEvent(
-        new CustomEvent("form-submitted", {
-          composed: true,
-          bubbles: true
-        })
-      );
-    };
-
-    private submitForm() {
-      const { form } = this;
-
-      if (form.requestSubmit) {
-        form.requestSubmit();
-      } else {
-        form.submit();
-      }
-    }
-
-    private get submitButton() {
-      return (
-        this.querySelector("button[type='submit']") ||
-        this.querySelector("input[type='submit']") ||
-        this.querySelector("md-button[type='submit']")
-      );
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.cleanupWrappedForms();
-      this.teardownEvents();
-    }
-
-    private deleteWrappedForm(element: HTMLFormElement) {
-      element.removeEventListener("submit", this.handleFormSubmit);
-    }
-
-    private cleanupWrappedForms() {
-      const { formElement } = this;
-      if (formElement.length) {
-        for (const element of formElement) {
-          this.deleteWrappedForm(element);
-        }
-      }
-      this.formElement = [];
-    }
-
-    private createWrappedForm(element: SubmittableElement) {
-      const form = document.createElement("form");
-
-      form.addEventListener("submit", this.handleFormSubmit);
-
-      const { parentNode: parent } = element;
-
-      element.autocomplete = this.token;
-
-      if (!element.id) {
-        element.id = this.autofillname;
-      }
-      if (!element.name) {
-        element.name = this.autofillname;
-      }
-      if (parent) {
-        this.formElement.push(form);
-
-        parent.insertBefore(form, element);
-        form.append(element);
-      }
-    }
-
-    private teardownEvents() {
-      if (this.submitButton) {
-        this.submitButton.removeEventListener("click", this.handleSubmit);
-      }
-    }
-
-    private setupEvents() {
-      if (this.submitButton) {
-        this.submitButton.addEventListener("click", this.handleSubmit);
-      }
-    }
-
-    private setupSubmittable() {
-      const elements = this.findSubmittable(this.form, new Set());
-
-      if (elements.length) {
-        for (const element of elements) {
-          this.createWrappedForm(element);
-        }
-      }
-    }
-
-    protected slottedChanged() {
-      this.setupSubmittable();
-      this.setupEvents();
-    }
-
-    render() {
-      return html`
-        <form
-          class="md-form"
-          role="form"
-          name=${ifDefined(this.name || undefined)}
-          rel=${ifDefined(this.rel || undefined)}
-          action=${ifDefined(this.action || undefined)}
-          accept-charset=${this.charset}
-          enctype=${this.enctype}
-          aria-label=${ifDefined(this.label || undefined)}
-          ?novalidate=${this.novalidate}
-          method=${this.method}
-          target=${this.target}
-          part="form"
-          @submit=${this.handleFormSubmit}
-        >
-          <slot></slot>
-        </form>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-form": Form.ELEMENT;
-  }
-}

package/src/components/help-text/HelpText.test.ts

@@ -1,39 +0,0 @@
-import { elementUpdated, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
-import { html } from "lit-element";
-import "./HelpText";
-import { HelpText } from "./HelpText";
-
-describe("TextHelper component", () => {
-  let element: HelpText.ELEMENT;
-  beforeEach(async () => {
-    element = await fixture<HelpText.ELEMENT>(
-      html`
-        <md-help-text></md-help-text>
-      `
-    );
-  });
-
-  afterEach(fixtureCleanup);
-
-  test("should render one help text", () => {
-    expect(element).not.toBeNull();
-  });
-
-  test("should create message help text", async () => {
-    element.message = "Test Message";
-    await elementUpdated(element);
-    expect(element.message).toMatch("Test Message");
-  });
-
-  test("should render correct icon type depend on message type", async () => {
-    element.messageType = "error";
-    await elementUpdated(element);
-    expect(element.shadowRoot!.querySelector("md-icon")!.getAttribute("name")).toEqual("error_12");
-    element.messageType = "success";
-    await elementUpdated(element);
-    expect(element.shadowRoot!.querySelector("md-icon")!.getAttribute("name")).toEqual("check_12");
-    element.messageType = "warning";
-    await elementUpdated(element);
-    expect(element.shadowRoot!.querySelector("md-icon")!.getAttribute("name")).toEqual("warning_12");
-  });
-});

package/src/components/help-text/HelpText.ts

@@ -1,60 +0,0 @@
-/**
- * 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 reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, LitElement, property } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { Input } from "../input/Input"; // Keep type import as a relative path
-import styles from "./scss/module.scss";
-
-export namespace HelpText {
-  @customElementWithCheck("md-help-text")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) message = "";
-    @property({ type: String }) messageType: Input.MessageType | undefined = undefined;
-
-    get inputMessageClassMap() {
-      return {
-        [`md-${this.messageType}`]: !!this.messageType
-      };
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    getIconName() {
-      switch (this.messageType) {
-        case "success":
-          return "check_12";
-        case "error":
-          return "error_12";
-        case "warning":
-          return "warning_12";
-        default:
-          return "";
-      }
-    }
-
-    render() {
-      return html`
-        <div class="md-input__message ${classMap(this.inputMessageClassMap)}" role="alert">
-          <md-icon name="${this.getIconName()}"></md-icon>
-          <slot>${this.message}</slot>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-help-text": HelpText.ELEMENT;
-  }
-}

package/src/components/help-text/scss/help-text.scss

@@ -1,34 +0,0 @@
-.md-input__message {
-  font-size: $help-text__font-size;
-
-  &.md-success {
-    @include message-format(var(--md-alert-success-text-color, $md-green-70));
-  }
-
-  &.md-error {
-    @include message-format(var(--md-alert-error-text-color, $md-red-70));
-  }
-
-  &.md-warning {
-    @include message-format(var(--md-alert-warning-text-color, $md-yellow-70));
-  }
-}
-
-:host(.help-text),
-:host(.help-text-checkbox),
-:host(.help-text-radio) {
-  align-items: flex-end;
-  color: var(--help-text-default-color, $lm-help-text-default-color-light);
-  display: flex;
-  font-family: $help-text__font-family;
-  font-size: $help-text__font-size;
-  line-height: $help-text__line-height;
-  margin-bottom: rem-calc(4);
-  padding-left: rem-calc(16);
-  padding-top: rem-calc(8);
-}
-
-:host(.help-text-checkbox),
-:host(.help-text-radio) {
-  padding-left: rem-calc(32);
-}

package/src/components/help-text/scss/mixins.scss

@@ -1,14 +0,0 @@
-@mixin message-format($color-message) {
-  color: $color-message;
-
-  display: flex;
-  line-height: $help-text__line-height;
-  
-  &::before {
-    color: $color-message;
-  }
-
-  md-icon {
-    margin-right: $help-text__spacing / 2;
-  }
-}

package/src/components/help-text/scss/module.scss

@@ -1,13 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/typography/settings";
-
-@import "./vars/lm-help-text-settings";
-@import "./vars/md-help-text-settings";
-
-// Component Specific
-@import "./settings";
-@import "./mixins";
-@import "./help-text";

package/src/components/help-text/scss/settings.scss

@@ -1,5 +0,0 @@
-$help-text__font-family: $brand-font-regular !default;
-$help-text__font-size: rem-calc(12) !default;
-$help-text__line-height: 1.25rem !default;
-$help-text__spacing: rem-calc(16) !default;
-

package/src/components/help-text/tokens/lm-help-text-tokens.js

@@ -1,16 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const helpText = {
-  prefix: "lm",
-  component: "help-text",
-  default: {
-    "color": {
-      light: colors.gray[70].name,
-      dark: colors.gray[30].name
-    }
-  }
-};
-
-module.exports = helpText;

package/src/components/help-text/tokens/md-help-text-tokens.js

@@ -1,16 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const helpText = {
-  prefix: "md",
-  component: "help-text",
-  default: {
-    "color": {
-      light: colors.gray[70].name,
-      dark: colors.gray[30].name
-    }
-  }
-};
-
-module.exports = helpText;