@momentum-ui/web-components 2.5.6 → 2.5.7

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

@@ -0,0 +1,128 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const button = {
+  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
+    },
+    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
+      }
+    }
+  },
+  succes: {
+    "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 = button;

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

@@ -0,0 +1,27 @@
+import "./InputFile";
+import { withA11y } from "@storybook/addon-a11y";
+import { html } from "lit-element";
+import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: "Components/Input File",
+  component: "md-input-file",
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    a11y: {
+      element: "md-input-file"
+    }
+  }
+};
+
+export const InputFile = () => {
+  const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
+  const language = text("Enter Accept Language", "JavaScript");
+
+  return html`
+    <md-theme class="theme-toggle" id="input-file" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+      <md-input-file .accept-language=${language}></md-input-file>
+    </md-theme>
+  `;
+};

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

@@ -0,0 +1,43 @@
+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,116 @@
+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) {
+          let fileTextContent = "";
+          this.fileName = file.name;
+
+          try {
+            fileTextContent = (await this.readFile(file)) as string;
+          } catch (e) {
+            fileTextContent = "";
+          }
+        }
+    }
+
+    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,57 @@
+/**
+ * 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 { withA11y } from "@storybook/addon-a11y";
+import { text, boolean, withKnobs } from "@storybook/addon-knobs";
+import { html } from "lit-element";
+import "@/components/input/Input";
+import "@/components/label/Label";
+import "@/components/theme/Theme";
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: "Components/Label",
+  component: "md-label",
+  decorators: [withKnobs, withA11y],
+  argTypes: {
+    theme: { table: { disable: true } },
+    radioLabel: { table: { disable: true } },
+    checkboxLabel: { table: { disable: true } },
+    toggleSwitchLabel: { table: { disable: true } },
+    active: { table: { disable: true } },
+    indeterminate: { table: { disable: true } },
+    labelClassMap: { table: { disable: true } }
+  },
+  parameters: {
+    a11y: {
+      element: "md-label"
+    }
+  }
+};
+
+export const Label = () => {
+  const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
+  const label = text("Label", "Label");
+  const withInput = boolean("With Input", false);
+  const secondaryLabel = text("Secondary Label", "");
+
+  if (withInput) {
+    return html`
+    <md-theme class="theme-toggle" id="label" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+      <md-input @label-click=${action('click')} .label=${label} placeholder="placeholder text" .secondaryLabel=${secondaryLabel}> </md-input>
+    </md-theme>
+    `;
+  } else {
+    return html`
+    <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme}>
+      <md-label htmlFor="#">${label}</md-label>
+    </md-theme>
+    `;
+  }
+};

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

@@ -0,0 +1,27 @@
+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>`);
+    const event = new MouseEvent("click");
+    setTimeout(() => element.handleClick(event));
+    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,90 @@
+/**
+ * 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.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(event: MouseEvent) {
+      this.setFocus();
+      this.dispatchEvent(
+        new CustomEvent<LabelEventDetail>("label-click", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            htmlFor: this.htmlFor
+          }
+        })
+      );
+    }
+
+    render() {
+      return html`
+        <label
+          @click="${(event: MouseEvent) => this.handleClick(event)}"
+          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;
+  }
+}

package/src/components/label/scss/label.scss

@@ -0,0 +1,36 @@
+:host(md-label) {
+  .md-label {
+    @include form-label;
+    display: flex;
+
+    &.right {
+      @include form-label(right, false);
+    }
+
+    &.inline {
+      @include form-label(inline, false);
+    }
+
+    small {
+      text-transform: capitalize;
+    }
+
+    span {
+      font-size: inherit;
+    }
+  }
+  .md-secondary-label {
+    @include secondary-label;
+  }
+}
+
+
+:host(.md-input__label.disabled),
+:host(.md-input__secondary-label.disabled) {
+  label {
+    cursor: not-allowed;
+  }
+}
+
+
+

package/src/components/label/scss/mixins.scss

@@ -0,0 +1,25 @@
+@mixin form-label($alignment: false, $base-style: true) {
+  @if $base-style {
+    color: var(--label-color, $lm-label-color-light);
+    font-family: $label__font-family;
+    font-size: $label__font-size;
+    line-height: $label__line-height;
+  }
+
+  @if $alignment==right {
+    float: none !important;
+    text-align: right;
+  } @else if $alignment==inline {
+    margin: 0 0 $label__spacing 0;
+    padding: $label__spacing / 2 + rem-calc($input__border-width) 0;
+  }
+}
+
+@mixin secondary-label {
+  color: var(--label-secondary, $lm-label-secondary-light);
+  display: flex;
+  flex-grow: 1;
+  font-size: $secondary-label__font-size;
+  line-height: $secondary-label__line-height;
+  padding: $secondary-label__indent;
+}

package/src/components/label/scss/module.scss

@@ -0,0 +1,17 @@
+@import "@/wc_scss/tools/functions/core";
+
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/settings/core";
+@import "@/wc_scss/typography/settings";
+@import "@/wc_scss/settings/input";
+
+@import "./vars/lm-label-settings";
+@import "./vars/md-label-settings";
+
+// Component Specific
+@import "./settings";
+@import "./mixins";
+@import "@/components/checkbox/scss/module.scss";
+@import "@/components/radio/scss/module.scss";
+@import "./label";
+

package/src/components/label/scss/settings.scss

@@ -0,0 +1,8 @@
+$label__font-family: $brand-font-regular !default;
+$label__font-size: rem-calc(14) !default;
+$label__line-height: rem-calc(20) !default;
+$label__spacing: rem-calc(16) !default;
+
+$secondary-label__font-size: rem-calc(14) !default;
+$secondary-label__line-height: rem-calc(18) !default;
+$secondary-label__indent: rem-calc(4 16 0) !default;

package/src/components/label/tokens/lm-label-tokens.js

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

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

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

package/src/components/link/Link.stories.ts

@@ -0,0 +1,48 @@
+/**
+ * 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 { withA11y } from "@storybook/addon-a11y";
+import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
+import { html } from "lit-element";
+import "@/components/link/Link";
+import { linkTag, linkColor } from "./Link"; // Keep type import as a relative path
+import "@/components/theme/Theme";
+
+export default {
+  title: "Components/Link",
+  component: "md-link",
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    a11y: {
+      element: "md-link"
+    }
+  }
+};
+
+export const Link = () => {
+  const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
+  const href = text("href", "http://google.com");
+  const tag = select("HTML Tag", linkTag, "");
+  const disabled = boolean("Disabled", false);
+  const inline = boolean("Link Inline", false);
+  const target = text("Target", "_self");
+  const color = select("Link color", linkColor, "blue")
+
+  return html`
+    <md-theme class="theme-toggle" id="link" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+      <md-link 
+        .href=${href} 
+        .tag=${tag as any} 
+        .target="${target}"
+        .color="${color}"
+        ?disabled=${disabled} 
+        ?inline=${inline}>Default Link</md-link>
+    </md-theme>
+  `;
+};