@momentum-ui/web-components 2.14.11 → 2.14.13

package/src/components/input/tokens/md-input-tokens.js

@@ -0,0 +1,132 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const input = {
+  prefix: "md",
+  component: "input",
+  default: {
+    "bg-color": {
+      light: colors.white[100].name,
+      dark: colors.gray[100].name
+    },
+    "text-color": {
+      light: colors.gray[70].name,
+      dark: colors.gray["05"].name
+    },
+    "border-color": {
+      light: colors.gray[30].name,
+      dark: colors.gray[80].name
+    },
+    "placeholder-color": {
+      light: colors.gray[70].name,
+      dark: colors.gray[40].name
+    },
+    hover: {
+      "bg-color": {
+        light: colors.gray[30].name,
+        dark: colors.gray[90].name
+      }
+    },
+    "read-only": {
+      "bg-color": {
+        light: colors.gray[10].name,
+        dark: colors.gray[90].name
+      }
+    },
+    focus: {
+      "border-color": {
+        light: colors.blue[60].name,
+        dark: colors.blue[40].name
+      }
+    },
+    pressed: {
+      "bg-color": {
+        light: colors.gray[30].name,
+        dark: colors.gray[70].name
+      },
+      "border-color": {
+        light: colors.gray[30].name,
+        dark: colors.gray[70].name
+      }
+    }
+  },
+  disabled: {
+    "bg-color": {
+      light: colors.gray[10].name,
+      dark: colors.gray[90].name
+    },
+    "text-color": {
+      light: colors.gray[40].name,
+      dark: colors.gray[70].name
+    }
+  },
+  error: {
+    "bg-color": {
+      light: colors.red[10].name,
+      dark: colors.red[90].name
+    },
+    "border-color": {
+      light: colors.red[50].name,
+      dark: colors.red[50].name
+    },
+    "text-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray["05"].name
+    },
+    "message-text-color": {
+      light: colors.red[50].name,
+      dark: colors.red[50].name
+    },
+    hover: {
+      "bg-color": {
+        light: colors.red[20].name,
+        dark: colors.red[80].name
+      }
+    },
+    pressed: {
+      "bg-color": {
+        light: colors.red[30].name,
+        dark: colors.red[70].name
+      }
+    }
+  },
+  success: {
+    "border-color": {
+      light: colors.green[50].name,
+      dark: colors.blue[40].name
+    }
+  },
+  warning: {
+    "border-color": {
+      light: colors.yellow[40].name,
+      dark: colors.yellow[40].name
+    }
+  },
+  filled: {
+    "bg-color": {
+      light: colors.gray[10].name,
+      dark: colors.gray[90].name
+    },
+    disabled: {
+      "bg-color": {
+        light: colors.gray[10].name,
+        dark: colors.gray[90].name
+      }
+    },
+    hover: {
+      "bg-color": {
+        light: colors.gray[20].name,
+        dark: colors.gray[70].name
+      }
+    }
+  },
+  "focus-ring": {
+    color: {
+      light: colors.blue[60].name,
+      dark: colors.blue[40].name
+    }
+  }
+};
+
+module.exports = input;

package/src/components/input/tokens/mdv2-input-tokens.js

@@ -0,0 +1,168 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+
+const input = {
+  prefix: "mdv2",
+  component: "input",
+  default: {
+    "bg-color": {
+      common: "$mds-color-theme-background-solid-primary-normal"
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-primary-normal"
+    },
+    "border-color": {
+      common: "$mds-color-theme-outline-primary-normal"
+    },
+    "placeholder-color": {
+      common: "$mds-color-theme-text-secondary-normal"
+    },
+    hover: {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-hover"
+      }
+    },
+    "read-only": {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-disabled"
+      },
+      "border-color": {
+        common: "$mds-color-theme-outline-primary-disabled"
+      }
+    },
+    focus: {
+      "border-color": {
+        common: "$mds-color-theme-outline-theme-normal"
+      },
+      "background-color": {
+        common: "$mds-color-theme-background-primary-active"
+      }
+    },
+    pressed: {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-active"
+      },
+      "border-color": {
+        common: "$mds-color-theme-outline-primary-normal"
+      }
+    },
+    outline: {
+      color: {
+        common: "$mds-color-theme-outline-theme-normal"
+      },
+      "text-color": {
+        common: "$mds-color-theme-text-accent-normal"
+      }
+    },
+    new: {
+      "border-color": {
+        common: "$mds-color-theme-outline-input-normal"
+      },
+      "focus-border-color": {
+        common: "$mds-color-theme-outline-input-active"
+      },
+      "disabled-color": {
+        common: "$mds-color-theme-button-primary-disabled"
+      }
+    }
+  },
+  disabled: {
+    "bg-color": {
+      common: "$mds-color-theme-background-primary-disabled"
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-primary-disabled"
+    }
+  },
+  error: {
+    "bg-color": {
+      common: "$mds-color-theme-background-solid-primary-normal"
+    },
+    "border-color": {
+      common: "$mds-color-theme-outline-cancel-normal"
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-primary-normal"
+    },
+    "message-text-color": {
+      common: "$mds-color-theme-text-error-normal"
+    },
+    hover: {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-hover"
+      }
+    },
+    pressed: {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-active"
+      }
+    }
+  },
+  success: {
+    "border-color": {
+      common: "$mds-color-theme-outline-join-normal"
+    },
+    "bg-color": {
+      common: "$mds-color-theme-background-solid-primary-normal"
+    },
+    hover: {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-hover"
+      }
+    },
+    pressed: {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-active"
+      }
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-primary-normal"
+    }
+  },
+  warning: {
+    "border-color": {
+      common: "$mds-color-theme-text-warning-normal"
+    },
+    "bg-color": {
+      common: "$mds-color-theme-background-solid-primary-normal"
+    },
+    hover: {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-hover"
+      }
+    },
+    pressed: {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-active"
+      }
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-primary-normal"
+    }
+  },
+  filled: {
+    "bg-color": {
+      common: "$mds-color-theme-background-solid-secondary-normal"
+    },
+    disabled: {
+      "bg-color": {
+        common: "$mds-color-theme-background-primary-disabled"
+      }
+    },
+    hover: {
+      "bg-color": {
+        common: "$mds-color-theme-background-secondary-hover"
+      }
+    }
+  },
+  "focus-ring": {
+    color: {
+      common: "$mds-color-theme-outline-theme-normal"
+    }
+  },
+  "border-radius": {
+    common: "8px"
+  }
+};
+
+module.exports = input;

package/src/components/input-file/InputFile.stories.ts

@@ -0,0 +1,27 @@
+import { ThemeNameValues } from "@/components/theme/Theme";
+import { Args } from "@storybook/web-components";
+import { html } from "lit-element";
+import "./InputFile";
+
+export default {
+  title: "Components/Input File",
+  component: "md-input-file",
+  argTypes: {
+    acceptLanguage: { control: "text", defaultValue: "JavaScript", description: "Enter Accept Language" },
+    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
+    darkTheme: { control: "boolean", defaultValue: false }
+  },
+  parameters: {
+    a11y: {
+      element: "md-input-file"
+    }
+  }
+};
+
+export const InputFile = (args: Args) => {
+  return html`
+    <md-theme class="theme-toggle" id="input-file" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+      <md-input-file accept-language=${args.language}></md-input-file>
+    </md-theme>
+  `;
+};

package/src/components/input-file/InputFile.test.ts

@@ -0,0 +1,39 @@
+import { Button } from "@/components/button/Button";
+import { elementUpdated, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
+import { html } from "lit-element";
+import "./InputFile";
+import { InputFile } from "./InputFile";
+
+describe("InputFile component", () => {
+  let element: InputFile.ELEMENT;
+
+  afterEach(fixtureCleanup);
+
+  beforeEach(async () => {
+    element = await fixture<InputFile.ELEMENT>(html` <md-input-file></md-input-file> `);
+  });
+
+  test("should render input file", async () => {
+    expect(element).toBeDefined();
+  });
+
+  test("should check acceptable lang", async () => {
+    element.acceptLanguage = "Jabascript";
+
+    const spyWarn = jest.spyOn(console, "warn");
+
+    await elementUpdated(element);
+
+    expect(spyWarn).toHaveBeenCalledWith("Please set correct language name");
+    spyWarn.mockRestore();
+  });
+
+  test("should trigger input click", async () => {
+    const mdButton = element.shadowRoot!.querySelector(".md-input-file-btn") as Button.ELEMENT;
+    const button = mdButton.shadowRoot!.querySelector("button");
+
+    button!.click();
+    element.input.dispatchEvent(new Event("change"));
+    await elementUpdated(element);
+  });
+});

package/src/components/input-file/InputFile.ts

@@ -0,0 +1,115 @@
+import "@/components/button/Button";
+import { customElementWithCheck } from "@/mixins";
+import reset from "@/wc_scss/reset.scss";
+import hljs from "highlight.js/lib/core";
+import { html, internalProperty, LitElement, property, PropertyValues, query } from "lit-element";
+import { nothing } from "lit-html";
+import { ifDefined } from "lit-html/directives/if-defined";
+import styles from "./scss/module.scss";
+
+export namespace InputFile {
+  @customElementWithCheck("md-input-file")
+  export class ELEMENT extends LitElement {
+    @property({ type: String, attribute: "accept-language" }) acceptLanguage = "javascript";
+    @property({ type: String }) getLocalization = "Input File";
+
+    @query("input[type='file']") input!: HTMLInputElement;
+
+    @internalProperty() private acceptTypes = "";
+    @internalProperty() private fileName = "";
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    triggerFileLoad(event: MouseEvent) {
+      event.preventDefault();
+      this.input.click();
+    }
+
+    async handleFile(event: Event) {
+      event.preventDefault();
+
+      const fileList = this.input.files;
+      if (fileList && fileList.length !== 0)
+        for (const file of fileList) {
+          this.fileName = file.name;
+
+          try {
+            (await this.readFile(file)) as string;
+          } catch (e) {
+            console.error("Error reading file", e);
+          }
+        }
+    }
+
+    private readFile(file: File) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+
+        reader.onload = (res) => {
+          resolve(res.target!.result);
+        };
+        reader.onerror = (err) => reject(err);
+        reader.readAsText(file);
+      });
+    }
+
+    private async importLanguage(language: string) {
+      try {
+        const { default: importLanguage } = await import(`highlight.js/lib/languages/${language}`);
+        hljs.registerLanguage(`${language}`, importLanguage);
+        this.setAcceptTypes();
+      } catch {
+        console.warn("Please set correct language name");
+      }
+    }
+
+    private getAllAcceptTypes() {
+      const listLanguages = hljs.listLanguages();
+      if (listLanguages.length) {
+        return listLanguages
+          .map((language: string) => hljs.getLanguage(`${language}`).aliases)
+          .map((aliases: string[]) => aliases.map((alias: string) => `.${alias}`))
+          .join(",");
+      }
+      return "";
+    }
+
+    private setAcceptTypes() {
+      this.acceptTypes = this.getAllAcceptTypes();
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("acceptLanguage")) {
+        this.importLanguage(this.acceptLanguage);
+      }
+    }
+
+    render() {
+      return html`
+        <div class="md-input-file">
+          <label for="file-input">
+            <md-button color="blue" class="md-input-file-btn" @click=${this.triggerFileLoad}>
+              ${this.getLocalization.trim()}
+            </md-button>
+            ${this.fileName.length ? this.fileName : nothing}
+          </label>
+          <input
+            type="file"
+            id="file-input"
+            name="file-input"
+            accept=${ifDefined(this.acceptTypes || undefined)}
+            @change=${(event: Event) => this.handleFile(event)}
+          />
+        </div>
+      `;
+    }
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-input-file": InputFile.ELEMENT;
+  }
+}

package/src/components/input-file/scss/input-file.scss

@@ -0,0 +1,8 @@
+:host(md-input-file) {
+  md-button {
+    margin: rem-calc(4);
+  }
+  input[type="file"] {
+    display: none;
+  }
+}

package/src/components/input-file/scss/module.scss

@@ -0,0 +1,6 @@
+@import "@/wc_scss/tools/functions/core";
+
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/settings/rem";
+
+@import "./input-file";

package/src/components/label/Label.stories.ts

@@ -0,0 +1,59 @@
+/**
+ * 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/input/Input";
+import "@/components/label/Label";
+import { ThemeNameValues } from "@/components/theme/Theme";
+import { action } from "@storybook/addon-actions";
+import { Args } from "@storybook/web-components";
+import { html } from "lit-element";
+
+export default {
+  title: "Components/Label",
+  component: "md-label",
+  argTypes: {
+    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
+    darkTheme: { control: "boolean", defaultValue: false },
+    radioLabel: { table: { disable: true } },
+    checkboxLabel: { table: { disable: true } },
+    toggleSwitchLabel: { table: { disable: true } },
+    active: { table: { disable: true } },
+    indeterminate: { table: { disable: true } },
+    labelClassMap: { table: { disable: true } },
+    label: { control: "text", defaultValue: "Label" },
+    withInput: { control: "boolean", defaultValue: false },
+    secondaryLabel: { control: "text", defaultValue: "" }
+  },
+  parameters: {
+    a11y: {
+      element: "md-label"
+    }
+  }
+};
+
+export const Label = (args: Args) => {
+  if (args.withInput) {
+    return html`
+      <md-theme class="theme-toggle" id="label" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+        <md-input
+          @label-click=${action("click")}
+          .label=${args.label}
+          placeholder="placeholder text"
+          .secondaryLabel=${args.secondaryLabel}
+        >
+        </md-input>
+      </md-theme>
+    `;
+  } else {
+    return html`
+      <md-theme class="theme-toggle" id="input" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+        <md-label htmlFor="#">${args.label}</md-label>
+      </md-theme>
+    `;
+  }
+};

package/src/components/label/Label.test.ts

@@ -0,0 +1,26 @@
+import { fixture, fixtureCleanup, oneEvent } from "@open-wc/testing-helpers";
+import "./Label";
+import { Label } from "./Label";
+
+describe("Label", () => {
+  afterEach(fixtureCleanup);
+  test("should render one Label", async () => {
+    const element = await fixture(`<md-label label="Test Label Text"></md-label>`);
+    expect(element).not.toBeNull();
+  });
+  test("should dispatch click", async () => {
+    const element = await fixture<Label.ELEMENT>(`<md-label label="Test Label Text" htmlFor="firstValue"></md-label>`);
+    setTimeout(() => element.handleClick());
+    const { detail } = await oneEvent(element, "label-click");
+    expect(detail).toBeDefined();
+    expect(detail.htmlFor).toBe("firstValue");
+  });
+  test("should render slot if label not initialize in markup", async () => {
+    const element = await fixture(`<md-label></md-label>`);
+    expect(element.shadowRoot!.querySelectorAll("slot").length).toBe(1);
+  });
+  test("should render secondary Label", async () => {
+    const element = await fixture(`<md-label label="Label" secondaryLabel="Secondary Label"></md-label>`);
+    expect(element.getAttribute("secondaryLabel")).not.toBeNull();
+  });
+});

package/src/components/label/Label.ts

@@ -0,0 +1,81 @@
+/**
+ * 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 { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, LitElement, property } from "lit-element";
+import { classMap } from "lit-html/directives/class-map.js";
+import styles from "./scss/module.scss";
+
+export namespace Label {
+  export type LabelEventDetail = { htmlFor: string };
+
+  @customElementWithCheck("md-label")
+  export class ELEMENT extends LitElement {
+    @property({ type: String }) label = "";
+    @property({ type: String }) theme = "";
+    @property({ type: Boolean }) radioLabel = false;
+    @property({ type: Boolean }) checkboxLabel = false;
+    @property({ type: Boolean }) toggleSwitchLabel = false;
+    @property({ type: String }) htmlFor = "";
+    @property({ type: Boolean }) active = false;
+    @property({ type: Boolean }) disabled = false;
+    @property({ type: Boolean }) indeterminate = false;
+    @property({ type: Boolean }) secondaryLabel = false;
+
+    static get styles() {
+      return [reset, styles];
+    }
+    setFocus() {
+      this.dispatchEvent(new CustomEvent("setFocus"));
+    }
+
+    get labelClassMap() {
+      return {
+        [`md-label--${this.theme}`]: !!this.theme,
+        "md-radio__label": this.radioLabel,
+        "md-checkbox__label": this.checkboxLabel,
+        "md-secondary-label": this.secondaryLabel,
+        active: this.active,
+        disabled: this.disabled,
+        indeterminate: this.indeterminate
+      };
+    }
+
+    handleClick() {
+      this.setFocus();
+      this.dispatchEvent(
+        new CustomEvent<LabelEventDetail>("label-click", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            htmlFor: this.htmlFor
+          }
+        })
+      );
+    }
+
+    render() {
+      return html`
+        <label
+          @click="${() => this.handleClick()}"
+          class="md-label ${classMap(this.labelClassMap)}"
+          for="${this.htmlFor}"
+        >
+          ${this.label ? html` <span>${this.label}</span> ` : html` <slot></slot> `}
+        </label>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-label": Label.ELEMENT;
+  }
+}