@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/icon/Icon.stories.ts

@@ -1,66 +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 iconNames from "@momentum-ui/icons/data/momentumUiIconsNames.json";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-import "@/components/icon/Icon";
-import "@/components/theme/Theme";
-import { iconSize, iconType } from "./Icon"; // Keep type import as a relative path
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: "Components/Icon",
-  component: "md-icon",
-  decorators: [withKnobs, withA11y],
-  argTypes: {
-    iconClassMap: { table: { disable: true } },
-    iconStyleMap: { table: { disable: true } },
-    iconFontSize: { table: { disable: true } },
-    iconColor: { table: { disable: true } },
-    iconName: { table: { disable: true } },
-    consoleHandler: { table: { disable: true } },
-    buttonClassMap: { table: { disable: true } },
-    isComboBoxIcon: { table: { disable: true } },
-    isActive: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-icon"
-    }
-  }
-};
-
-export const Icon = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const name = select("Name", iconNames, "arrow-up_16");
-  const color = text("Color", "red");
-  const title = text("Title", "");
-  const type = select("Type", iconType, "");
-  const iconStyle = text("Icon Style", "");
-  const size = select("Size", iconSize, "16");
-  const sizeOverrided = boolean("Size Override", false);
-
-  return html`
-    <md-theme class="theme-toggle" id="icon" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-icon
-        .name=${`icon-${name}`}
-        .title=${title}
-        .color=${color}
-        .iconStyle=${iconStyle}
-        .type=${type}
-        .size=${size}
-        .sizeOverrided=${sizeOverrided}
-        @icon-click=${(action('dispatchEvent'))}>
-      </md-icon>
-    </md-theme>
-  `;
-}
-

package/src/components/icon/Icon.test.ts

@@ -1,75 +0,0 @@
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./Icon";
-
-jest.mock("@momentum-ui/utils/lib/getColorValue", () => jest.fn(() => "rgba(247, 100, 74, 1)"));
-
-describe("Momentun Icon Component", () => {
-  beforeEach(() => {
-    jest.resetModules();
-    console.warn = jest.fn();
-  });
-
-  afterEach(fixtureCleanup);
-  test("should render one Icon", async () => {
-    const element = await fixture(`<md-icon></md-icon>`);
-    expect(element).not.toBeNull();
-  });
-  test("should set font-size from size attribute if specified", async () => {
-    const element = await fixture(`<md-icon class="test-class" name="accessories_16" size="24" color="red"></md-icon>`);
-    expect(element.shadowRoot!.querySelector("i")!.style.fontSize).toEqual("24px");
-  });
-
-  test("should allow sizeOverride prop to change icon size", async () => {
-    const element = await fixture(
-      `<md-icon class="test-class" name="arrow-up_16" size="24" sizeOverrided color="red"></md-icon>`
-    );
-    expect(element.shadowRoot!.querySelector("i")!.className).toMatch("md-icon icon arrow-up_24");
-  });
-
-  test("should set font-size to default if not specified", async () => {
-    const element = await fixture(`<md-icon class="test-class" name="accessibility_16"></md-icon>`);
-    expect(element.shadowRoot!.querySelector("i")!.style.fontSize).toEqual("16px");
-  });
-
-  test("should set aria-label attribute from title prop", async () => {
-    const element = await fixture(`<md-icon title="Icon Component" name="accessibility_16"></md-icon>`);
-    expect(element.shadowRoot!.querySelector("i")!.getAttribute("aria-label")).toEqual("Icon Component");
-  });
-
-  test("should set title attribute from title prop", async () => {
-    const element = await fixture(`<md-icon title="Icon Component" name="accessibility_16"></md-icon>`);
-    expect(element.shadowRoot!.querySelector("i")!.getAttribute("title")).toEqual("Icon Component");
-  });
-
-  test("should set aria-label attribute from description prop", async () => {
-    const element = await fixture(`<md-icon description="Test Description" name="accessibility_16"></md-icon>`);
-    expect(element.shadowRoot!.querySelector("i")!.getAttribute("aria-label")).toEqual("Test Description");
-  });
-
-  test("should set aria-label attribute from title & description props", async () => {
-    const title = "Test Title";
-    const description = "Test Description";
-    const element = await fixture(
-      html`
-        <md-icon title="${title}" description="${description}" name="accessibility_16"></md-icon>
-      `
-    );
-    expect(element.shadowRoot!.querySelector("i")!.getAttribute("aria-label")).toEqual(`${title} ${description}`);
-  });
-
-  test("should set font-size from icon name", async () => {
-    const element = await fixture(`<md-icon name="accessories_24"></md-icon>`);
-    expect(element.shadowRoot!.querySelector("i")!.style.fontSize).toEqual("24px");
-  });
-
-  test("should set the color style to what the mocked getColorValue function returns", async () => {
-    const element = await fixture(`<md-icon class="test-class" name="accessories_16" color="#C9F4FF"></md-icon>`);
-    expect(element.shadowRoot!.querySelector("i")!.style.color).toEqual("rgb(201, 244, 255)");
-  });
-
-  test("should throw console.warn when color is defined by a hex color", async () => {
-    const element = await fixture(`<md-icon class="test-class" name="accessories_16" color="#C9F4FF"></md-icon>`);
-    expect(element.shadowRoot!.querySelector("i")!.style.fontSize).toEqual("16px");
-    expect(console.warn).toBeCalledTimes(1);
-  });
-});

package/src/components/icon/Icon.ts

@@ -1,168 +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 iconNames from "@momentum-ui/icons/data/momentumUiIconsNames.json";
-import getColorValue from "@momentum-ui/utils/lib/getColorValue";
-import { html, LitElement, property } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { styleMap } from "lit-html/directives/style-map";
-import "@/components/button/Button";
-import styles from "./scss/module.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-
-export const iconSize = ["16", "20", "36", "56", 16, 20, 36, 56] as const;
-export const iconType = ["", "white"] as const;
-
-export namespace Icon {
-  export type Size = typeof iconSize[number];
-  export type Type = typeof iconType[number];
-  export type ButtonProperty = {
-    [key: string]: string;
-  };
-
-  @customElementWithCheck("md-icon")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) color = "";
-    @property({ type: String }) description = "";
-    @property({ type: String }) name = "";
-    @property({ type: String }) id = "";
-    @property({ type: String }) size = "";
-    @property({ type: Boolean }) sizeOverrided = false;
-    @property({ type: String }) title = "";
-    @property({ type: String }) type = "";
-    @property({ type: Boolean }) isActive = false;
-    @property({ type: Boolean }) isComboBoxIcon = false;
-
-    _ariaLabel = "";
-    @property({ type: String })
-    get ariaLabel() {
-      if (this._ariaLabel) {
-        return this._ariaLabel;
-      }
-      if (this.title && this.description) {
-        return `${this.title} ${this.description}`;
-      }
-      if (this.title) {
-        return this.title;
-      }
-      if (this.description) {
-        return this.description;
-      }
-      return "";
-    }
-
-    set ariaLabel(value) {
-      const oldValue = this._ariaLabel;
-      this._ariaLabel = value;
-      this.requestUpdate("ariaLabel", oldValue);
-    }
-
-    get buttonClassMap() {
-      return {
-        [`md-button--icon-${this.type}`]: !!this.type
-      };
-    }
-
-    consoleHandler = (message: string, data: string) => {
-      /* eslint-disable no-console */
-      switch (message) {
-        case "color-warn":
-          console.warn(
-            `[@momentum-ui/web-component] Icon: ${data} may not exist in the design system,` +
-              ` please use a color name from https://momentum.design/styles/color/style`
-          );
-          break;
-        case "name-error":
-          console.warn(
-            `[@momentum-ui/web-component] Icon: Icon ${data} does not exist in the design system.` +
-              ` Visit https://momentum.design/icons for a list of available icons or to request a new icon.`
-          );
-          break;
-      }
-      /* eslint-enable no-console */
-    };
-
-    get iconFontSize() {
-      const defaultSize = 16;
-      const sizeFromName = this.name.split("_")[1];
-      return this.size || sizeFromName || defaultSize;
-    }
-
-    get iconColor() {
-      if (this.color.startsWith("#")) {
-        this.consoleHandler("color-warn", this.color);
-        return this.color;
-      } else if (this.color.startsWith("var(")) {
-        return this.color;
-      } else return getColorValue(this.color);
-    }
-
-    get iconClassMap() {
-      return {
-        "md-combobox-input__icon": this.isComboBoxIcon,
-        "md-combobox-input__icon--active": this.isComboBoxIcon && this.isActive,
-        [`${this.iconName}`]: !!this.iconName
-      };
-    }
-
-    get iconName() {
-      let iconName = this.name;
-      iconName = iconName.startsWith("icon-") ? iconName.substring(5) : iconName;
-
-      if (this.sizeOverrided) {
-        return `${iconName.split("_")[0]}_${this.iconFontSize}`;
-      }
-      return iconNames.includes(iconName) ? `icon-${iconName}` : this.consoleHandler("name-error", iconName);
-    }
-
-    get iconStyleMap() {
-      return {
-        ...(this.iconFontSize && { "font-size": `${this.iconFontSize}px` }),
-        ...(this.color && { color: this.iconColor })
-      };
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    handleIconClick(event: MouseEvent) {
-      this.dispatchEvent(
-        new CustomEvent("icon-click", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            srcEvent: event
-          }
-        })
-      );
-    }
-
-    render() {
-      return html`
-        <i
-          part="icon"
-          id=${this.id}
-          class="md-icon icon ${classMap(this.iconClassMap)}"
-          style=${styleMap(this.iconStyleMap)}
-          aria-label=${this.ariaLabel}
-          title=${this.title}
-          @click=${(event: MouseEvent) => this.handleIconClick(event)}
-        >
-        </i>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-icon": Icon.ELEMENT;
-  }
-}

package/src/components/icon/scss/icon.scss

@@ -1,15 +0,0 @@
-/** @component icon */
-
-@include exports("md-icon") {
-  .md-icon {
-    align-items: center;
-    display: inline-flex;
-    fill: inherit;
-    line-height: inherit;
-
-    .md--dark & {
-      fill: $md-white-100;
-    }
-  }
-
-}

package/src/components/icon/scss/module.scss

@@ -1,17 +0,0 @@
-@import "~@momentum-ui/icons/scss/variables";
-@import "~@momentum-ui/icons/scss/mixins";
-@import "~@momentum-ui/icons/scss/placeholders";
-@import "~@momentum-ui/icons/scss/functions";
-@import "~@momentum-ui/icons/scss/core";
-@import "~@momentum-ui/icons/scss/sizes";
-@import "~@momentum-ui/icons/scss/fixed-width";
-@import "~@momentum-ui/icons/scss/list";
-@import "~@momentum-ui/icons/scss/bordered-pulled";
-@import "~@momentum-ui/icons/scss/animated";
-@import "~@momentum-ui/icons/scss/rotated-flipped";
-@import "~@momentum-ui/icons/scss/stacked";
-@import "~@momentum-ui/icons/scss/icons";
-@import "@/wc_scss/colors/settings-base";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "./settings";
-@import "./icon";

package/src/components/icon/scss/settings.scss

@@ -1,10 +0,0 @@
-// White button colors
-$icon--white__fill: $md-white-100 !default;
-$icon--white__fill--hover: $white-92 !default;
-$icon--white__fill--active: $white-84 !default;
-$icon--white__fill--disabled: $white-20 !default;
-
-$icon--white__fill--contrast: $md-black-100 !default;
-$icon--white__fill--hover--contrast: $md-black-100 !default;
-$icon--white__fill--active--contrast: $md-black-100 !default;
-$icon--white__fill--disabled--contrast: $white-20 !default;

package/src/components/input/Input.stories.ts

@@ -1,136 +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 { withA11y } from "@storybook/addon-a11y";
-import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-import "@/components/icon/Icon";
-import "@/components/input/Input";
-import "@/components/theme/Theme";
-import { containerSize, iconNames, iconPosition, inputShape, inputType, nestedLevel } from "./Input"; // Keep type import as a relative path
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: "Components/Input",
-  component: "md-input",
-  decorators: [withKnobs, withA11y],
-  argTypes: {
-    clearAriaLabel: { table: { disable: true } },
-    isFilled: { table: { disable: true } },
-    isLoading: { table: { disable: true } },
-    input: { table: { disable: true } },
-    inputClassMap: { table: { disable: true } },
-    inputWrapperClassMap: { table: { disable: true } },
-    inputTemplateClassMap: { table: { disable: true } },
-    multi: { table: { disable: true } },
-    autofocus: { table: { disable: true } },
-    htmlId: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-input"
-    }
-  }
-};
-
-const messageArr = [
-    {
-      label: "",
-      message: "",
-      type: "default"
-    },
-    {
-      label: "Success",
-      message: "This is where the success message.",
-      type: "success"
-    },
-    {
-      label: "Warning",
-      message: "This is where the warning message.",
-      type: "warning"
-    },
-    {
-      label: "Error",
-      message: "This is where the error message.",
-      type: "error"
-    }
-  ];
-
-
-export const Input = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const placeholder = text("Enter Text", "Enter Text");
-  const label = text("Label", "Label");
-  const value = text("Value Text", "Value Text");
-  const size = select("Container Size", containerSize, "small-12");
-  const messageValue = select("Message Type", messageArr, messageArr[1] as any);
-  const disabled = boolean("Input Disabled", false);
-  const readOnly = boolean("Read Only", false);
-  const shape = select("Shape Pill", inputShape, "pill");
-  const multiline = boolean("Input Multiline", false);
-  const searchable = boolean("Searchable", false);
-  const clear = boolean("Input Clear", false);
-  const type = select("Input Type", inputType, "text");
-  const secondaryLabel = text("Secondary Label", "");
-  const hasNested = boolean("Has Nested Element", false);
-  const hasIcon = boolean("Has Icon", false);
-  const helpText = text("Help Text", "");
-
-  if (hasNested) {
-    const nested = select("Nested Level", nestedLevel, 1);
-
-    return html`
-    <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-input label="Default Input"></md-input>
-      <md-input label="Input Nested Level" containerSize="small-12" .nestedLevel=${nested}></md-input>
-    </md-theme>
-    `;
-  } else if (hasIcon) {
-    const position = select("Icon Position", iconPosition, "before");
-    const nameIcon = select("Icon Name", iconNames, "accessibility_16");
-
-    return html`
-      <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-        <md-input
-          label="Input Icon"
-          containerSize="small-12"
-          placeholder="Enter Text"
-          .auxiliaryContentPosition=${position}
-        >
-          <md-icon slot="input-section${position === "after" ? "-right" : ""}" name=${nameIcon}></md-icon>
-        </md-input>
-      </md-theme>
-    `;
-  } else {
-    return html`
-    <md-theme class="theme-toggle" id="input" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-input 
-        .label=${label} 
-        .placeholder=${placeholder} 
-        .messageArr=${[messageValue]}
-        .value=${value} 
-        .containerSize="${size}" 
-        .disabled=${disabled}
-        .shape=${shape}
-        ?readOnly=${readOnly}
-        ?multiline=${multiline}
-        .searchable=${searchable}
-        ?clear=${clear}
-        .secondaryLabel=${secondaryLabel}
-        .type=${type}
-        .helpText=${helpText}
-        @input-change=${(action('change'))}
-        @input-blur=${(action('focus out'))}
-        @input-focus=${(action('focus in'))}
-        >
-      </md-input>
-    </md-theme>
-    `;
-  }
-};