@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/alert/Alert.test.ts

@@ -1,145 +0,0 @@
-import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./Alert";
-import { Alert } from "./Alert";
-
-describe("Alert", () => {
-  afterEach(fixtureCleanup);
-  test("Alert component is not null", async () => {
-    const alert = await fixture(`<md-alert></md-alert>`);
-    expect(alert).not.toBeNull();
-  });
-
-  test("should render an Alert component", async () => {
-    const el = await fixture(html`
-      <md-alert></md-alert>
-    `);
-    expect(el).not.toBeNull();
-  });
-
-  test("should create Alert element with all default props", async () => {
-    const element = await fixture<Alert.ELEMENT>(html`
-      <md-alert></md-alert>
-    `);
-
-    expect(element.closable).toBeFalsy();
-    expect(element.message).toEqual("");
-    expect(element.show).toBeFalsy();
-    expect(element.title).toEqual("");
-    expect(element.type).toEqual("default");
-  });
-
-  test("should render visible Alert component with set message & title props", async () => {
-    const myMessage = "This is my message";
-    const myTitle = "My Title";
-
-    const element = await fixture<Alert.ELEMENT>(html`
-      <md-alert .message=${myMessage} .title=${myTitle} show></md-alert>
-    `);
-
-    const titleContent = await element.shadowRoot!.querySelector(".md-alert__title");
-    const messageContent = await element.shadowRoot!.querySelector(".md-alert__message");
-
-    expect(titleContent?.textContent?.trim()).toEqual(myTitle);
-    expect(messageContent?.textContent?.trim()).toEqual(myMessage);
-  });
-
-  test("should render visible Alert component with default html class names", async () => {
-    const element = await fixture<Alert.ELEMENT>(html`
-      <md-alert show></md-alert>
-    `);
-
-    const alertElement = await element.shadowRoot!.querySelector(".md-alert");
-    expect(alertElement?.className).toEqual("md-alert md-alert--default");
-  });
-
-  test("should render Alert with icon reflecting default type", async () => {
-    const element = await fixture<Alert.ELEMENT>(html`
-      <md-alert show></md-alert>
-    `);
-
-    const alertElement = await element.shadowRoot!.querySelector(".md-alert");
-    expect(alertElement?.className).toEqual("md-alert md-alert--default");
-
-    const iconTypeElement = await element.shadowRoot!.querySelector(".md-alert__icon");
-    expect(iconTypeElement).not.toBeNull();
-  });
-
-  test("should render success Alert", async () => {
-    const element = await fixture<Alert.ELEMENT>(html`
-      <md-alert type="success" show></md-alert>
-    `);
-
-    const alertElement = await element.shadowRoot!.querySelector(".md-alert");
-    expect(alertElement?.className).toEqual("md-alert md-alert--success");
-
-    const type = element.shadowRoot?.querySelector(".md-alert__icon md-icon");
-    expect(type?.getAttribute("name")).toEqual("check-circle_36");
-    expect(type?.getAttribute("color")).toEqual("green");
-  });
-
-  test("should render info Alert", async () => {
-    const element = await fixture<Alert.ELEMENT>(html`
-      <md-alert type="info" show></md-alert>
-    `);
-
-    const alertElement = await element.shadowRoot!.querySelector(".md-alert");
-    expect(alertElement?.className).toEqual("md-alert md-alert--info");
-
-    const type = element.shadowRoot?.querySelector(".md-alert__icon md-icon");
-    expect(type?.getAttribute("name")).toEqual("info_32");
-    expect(type?.getAttribute("color")).toEqual("blue");
-  });
-
-  test("should render error Alert", async () => {
-    const element = await fixture<Alert.ELEMENT>(html`
-      <md-alert type="error" show></md-alert>
-    `);
-
-    const alertElement = await element.shadowRoot!.querySelector(".md-alert");
-    expect(alertElement?.className).toEqual("md-alert md-alert--error");
-
-    const type = element.shadowRoot?.querySelector(".md-alert__icon md-icon");
-    expect(type?.getAttribute("name")).toEqual("icon-warning_32");
-    expect(type?.getAttribute("color")).toEqual("red");
-  });
-
-  test("should render warning Alert", async () => {
-    const element = await fixture<Alert.ELEMENT>(html`
-      <md-alert type="warning" show></md-alert>
-    `);
-
-    const alertElement = await element.shadowRoot!.querySelector(".md-alert");
-    expect(alertElement?.className).toEqual("md-alert md-alert--warning");
-
-    const type = element.shadowRoot?.querySelector(".md-alert__icon md-icon");
-    expect(type?.getAttribute("name")).toEqual("icon-warning_32");
-    expect(type?.getAttribute("color")).toEqual("orange");
-  });
-
-  test("should render close button & icon when closable prop is true", async () => {
-    const element = await fixture<Alert.ELEMENT>(html`
-      <md-alert show closable></md-alert>
-    `);
-
-    const buttomElements = element.shadowRoot!.querySelectorAll(".md-alert__button md-button");
-    expect(buttomElements.length).toEqual(1);
-
-    const iconElement = await element.shadowRoot!.querySelector(".md-alert__button md-button md-icon");
-    expect(iconElement?.getAttribute("name")).toEqual("icon-cancel_16");
-  });
-
-  test("should handle Click event", async () => {
-    const element = await fixture<Alert.ELEMENT>(html`
-      <md-alert show closable></md-alert>
-    `);
-
-    const mockClick = jest.spyOn(element, "close");
-    element.close();
-    await elementUpdated(element);
-
-    expect(mockClick).toHaveBeenCalled();
-
-    mockClick.mockRestore();
-    expect(element.show).toBeFalsy();
-  });
-});

package/src/components/alert/Alert.ts

@@ -1,135 +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, TemplateResult } from "lit-element";
-import { nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map";
-import "@/components/button/Button";
-import "@/components/icon/Icon";
-import styles from "./scss/module.scss";
-
-export namespace Alert {
-  @customElementWithCheck("md-alert")
-  export class ELEMENT extends LitElement {
-    @property({ type: Boolean }) closable = false;
-    @property({ type: String }) message = "";
-    @property({ type: Boolean }) show = false;
-    @property({ type: Boolean }) internalClose = true;
-    @property({ type: String }) title = "";
-    @property({ type: String }) btnlabel = "Close";
-    @property({ type: String }) type = "default";
-    @property({ type: Boolean }) inline = false;
-
-    close() {
-      this.dispatchEvent(
-        new CustomEvent("alert-close", {
-          composed: true,
-          bubbles: true
-        })
-      );
-
-      // By default closing internally, othervise - controlling outer via .show
-      if (this.internalClose) {
-        this.show = false;
-      }
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    renderIconTemplate = () => {
-      switch (this.type) {
-        case "error":
-          return html`
-            <md-icon name="icon-warning_32" color="red"></md-icon>
-          `;
-          break;
-        case "info":
-          return html`
-            <md-icon name="info_32" color="blue"></md-icon>
-          `;
-          break;
-        case "success":
-          return html`
-            <md-icon name="check-circle_36" color="green"></md-icon>
-          `;
-          break;
-        case "warn":
-        case "warning":
-          return html`
-            <md-icon name="icon-warning_32" color="orange"></md-icon>
-          `;
-          break;
-        default:
-          return html`
-            <slot name="alert-icon"></slot>
-          `;
-          break;
-      }
-    };
-
-    get alertClassMap() {
-      return {
-        [`md-alert--${this.type}`]: !!this.type,
-        "md-alert__inline": this.inline
-      };
-    }
-
-    render(): TemplateResult {
-      return html`
-        ${this.show
-          ? html`
-              <div part="alert" class="md-alert ${classMap(this.alertClassMap)}">
-                <div class="md-alert__icon">
-                  ${this.renderIconTemplate()}
-                </div>
-                <div part="content" class="md-alert__content">
-                  <div aria-label=${this.title} class="md-alert__title" role="heading" aria-level="1">
-                    ${this.title}
-                  </div>
-                  <div aria-label=${this.message} class="md-alert__message" role="textbox">
-                    ${this.message}
-                    <slot name="alert-body"></slot>
-                  </div>
-                </div>
-                ${this.closable
-                  ? html`
-                      <div class="md-alert__button">
-                        <md-button
-                          arialabel="${this.btnlabel}"
-                          title="${this.btnlabel}"
-                          hasRemoveStyle
-                          color="color-none"
-                          circle
-                          @click="${() => this.close()}"
-                        >
-                          <md-icon slot="icon" name="icon-cancel_16"></md-icon>
-                        </md-button>
-                      </div>
-                    `
-                  : html`
-                      <div class="md-alert__footer">
-                        <slot name="alert-footer"></slot>
-                      </div>
-                    `}
-              </div>
-            `
-          : nothing}
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-alert": Alert.ELEMENT;
-  }
-}

package/src/components/alert/scss/alert.scss

@@ -1,85 +0,0 @@
-/** @component alert */
-
-:host(md-alert) {
-  display: flex;
-  flex: 1 1 100%;
-}
-
-.md-alert {
-  @include flex($jc: space-between, $ai: flex-start);
-  @include border-radius($alert__border-radius);
-  background-color: var(--alert-default-bg-color, $lm-alert-default-bg-color-light);
-  border: 1px solid $black-12;
-  box-shadow: 0 8px 16px 0 $black-08;
-  flex: 1 1 100%;
-  margin-bottom: rem-calc(8);
-  max-height: rem-calc(308);
-  max-width: $alert__width;
-  min-height: rem-calc(78);
-  padding: rem-calc(12);
-
-  &__icon {
-    align-self: center;
-    md-icon::part(icon) {
-      font-size: var(--alert-default-icon-size, $lm-alert-default-icon-size-light) !important;
-      line-height: var(--alert-default-icon-size, $lm-alert-default-icon-size-light) !important;
-    }
-  }
-
-  &__content {
-    display: flex;
-    flex-basis: 0;
-    flex-direction: column;
-    flex-grow: 2;
-    max-width: $alert__content_width;
-    padding-left: rem-calc(12);
-    padding-right: rem-calc(2);
-    align-self: center;
-  }
-
-  &__title {
-    @include text-dots;
-    color: var(--alert-title-text-color, $lm-alert-title-text-color-light);
-    font-size: var(--alert-title-font-size, $lm-alert-title-font-size-light);
-    line-height: rem-calc(24);
-    width: calc(100%);
-  }
-
-  &__message {
-    @include line-dots(2);
-    color: var(--alert-default-text-color, $lm-alert-default-text-color-light);
-    font-family: $brand-font-light;
-    font-size: $alert__font-size;
-    line-height: 1.35;
-    width: calc(100%);
-  }
-
-  &__title,
-  &__message {
-    word-wrap: break-word;
-  }
-
-  &__button {
-    margin-left: rem-calc(4);
-    align-self: center;
-    md-button::part(button) {
-      align-items: center;
-      background-color: var(--alert-close-bg-color, $lm-alert-close-bg-color-light);
-      border-radius: 50%;
-      display: inline-flex;
-      height: var(--alert-close-size, $lm-alert-close-size-light);
-      justify-content: center;
-      width: var(--alert-close-size, $lm-alert-close-size-light);
-    }
-
-    md-icon::part(icon) {
-      color: $alert__close-icon-color;
-    }
-  }
-
-  &.md-alert__inline {
-    border: 0;
-    box-shadow: none;
-    margin-bottom: 0;
-  }
-}

package/src/components/alert/scss/mixins.scss

@@ -1,27 +0,0 @@
-@mixin alert-variant($background, $border, $text-color) {
-  background-color: $background;
-  border-color: $border;
-  color: $text-color;
-
-  hr {
-    border-top-color: darken($border, 5%);
-  }
-
-  .alert-link {
-    color: darken($text-color, 10%);
-  }
-}
-
-@mixin text-dots {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@mixin line-dots($line) {
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  line-clamp: $line;
-  overflow: hidden;
-}

package/src/components/alert/scss/module.scss

@@ -1,21 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-
-// Settings
-@import "@/wc_scss/colors/settings-base";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/typography/settings";
-@import "@/wc_scss/icon/settings";
-
-// Tools
-@import "@/wc_scss/tools/mixins/border-radius";
-@import "@/wc_scss/tools/mixins/flex";
-
-//vars
-@import "./vars/lm-alert-settings";
-
-// Alert Specific
-@import "settings";
-@import "mixins";
-@import "alert";

package/src/components/alert/scss/settings.scss

@@ -1,37 +0,0 @@
-:host {
-  --alert-icon-size: var(--alert-default-icon-size, $lm-alert-default-icon-size-light);
-  --alert-close-btn: var(--alert-close-bg-color, $lm-alert-close-bg-color-light);
-}
-
-$alert__class: "md-alert";
-$alert__border-radius: rem-calc(5);
-
-$alert__font-size: rem-calc(14) !default;
-$alert__font-size--title: rem-calc(16) !default;
-$alert__icon-font-size: rem-calc(44) !default;
-$alert__close-icon-color: var(--alert-close-text-color, $lm-alert-close-text-color-light);
-
-$alert__background-color: $md-white-100 !default;
-$alert__background-color--info: $md-theme-50 !default;
-$alert__background-color--success: $md-green-50 !default;
-$alert__background-color--warning: $md-yellow-50 !default;
-$alert__background-color--error: $md-red-50 !default;
-
-$alert__font-color: $md-gray-90 !default;
-$alert__font-color--title: $md-black-100 !default;
-$alert__font-color--status: $md-green-70 !default;
-$alert__font-color--info: $md-theme-50 !default;
-$alert__font-color--success: $md-green-50 !default;
-$alert__font-color--warning: $md-yellow-50 !default;
-$alert__font-color--error: $md-red-50 !default;
-
-$alert__padding: rem-calc(8);
-$alert__padding-right: rem-calc(13);
-$alert__padding-left: rem-calc(17);
-
-$alert__padding--call: rem-calc(17);
-$alert__padding-top--call: rem-calc(12);
-$alert__padding-bottom--call: rem-calc(25);
-
-$alert__width: rem-calc(368);
-$alert__content_width: rem-calc(272);

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

@@ -1,52 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const alert = {
-  prefix: "lm",
-  component: "alert",
-  default: {
-    "bg-color": {
-      light: colors.white[60].name,
-      dark: colors.gray[90].name
-    },
-    "align-items": {
-      light: "flex-start",
-      dark: "flex-start"
-    },
-    "text-color": {
-      light: colors.gray[70].name,
-      dark: colors.gray[20].name
-    },
-    "icon-size": {
-      light: "24px",
-      dark: "24px"
-    }
-  },
-  title: {
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    "font-size": {
-      light: "1rem",
-      dark: "1rem"
-    }
-  },
-  close: {
-    "bg-color": {
-      light: colors.white[60].name,
-      dark: colors.gray[90].name
-    },
-    size: {
-      light: "1rem",
-      dark: "1rem"
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    }
-  }
-};
-
-module.exports = alert;

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

@@ -1,52 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const alert = {
-  prefix: "md",
-  component: "alert",
-  default: {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[80].name
-    },
-    "align-items": {
-      light: "center",
-      dark: "center"
-    },
-    "text-color": {
-      light: colors.gray[90].name,
-      dark: colors.gray[10].name
-    },
-    "icon-size": {
-      light: "40px",
-      dark: "40px"
-    }
-  },
-  title: {
-    "text-color": {
-      light: colors.theme[50].name,
-      dark: colors.theme[60].name
-    },
-    "font-size": {
-      light: "1rem",
-      dark: "1rem"
-    }
-  },
-  close: {
-    "bg-color": {
-      light: "#e6e8e8",
-      dark: colors.gray[90].name
-    },
-    size: {
-      light: "2.75rem",
-      dark: "2.75rem"
-    },
-    "text-color": {
-      light: colors.gray[90].name,
-      dark: colors.gray["05"].name
-    }
-  }
-};
-
-module.exports = alert;

package/src/components/alert-banner/AlertBanner.stories.ts

@@ -1,48 +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-html";
-import { action } from '@storybook/addon-actions';
-import "@/components/icon/Icon";
-import "@/components/alert-banner/AlertBanner";
-import "@/components/theme/Theme";
-
-export default {
-  title: "Components/Alert Banner",
-  component: "md-alert-banner",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    a11y: {
-      element: "md-alert-banner"
-    },
-    docs: { 
-      description: { 
-        component: 'A typical usage of Alert Banner, with text added within the element tags or message attribute' 
-      },
-    }
-  }
-};
-
-export const AlertBanner = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const type = select("type", ["default", "warning", "error"], "default");
-  const closable = boolean("closable", false);
-  const textContent = text("alert message", "Test Alert Message");
-
-  return html`
-    <md-theme class="theme-toggle" id="alert-banner" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-alert-banner @alertBanner-hide=${(action('dispatchEvent'))} show type="${type}" ?closable=${closable} message="${textContent}">
-        ${textContent ? `${textContent}` : `Text with slotted tag element`}
-      </md-alert-banner>
-    </md-theme>
-  `;
-};
-

package/src/components/alert-banner/AlertBanner.test.ts

@@ -1,84 +0,0 @@
-import { Key } from "@/constants";
-import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import { LitElement } from "lit-element";
-import "./AlertBanner";
-import { AlertBanner } from "./AlertBanner";
-
-const fixtureFactory = async (
-  type: string,
-  message: string,
-  closable: boolean,
-  show: boolean
-): Promise<AlertBanner.ELEMENT> => {
-  return await fixture<AlertBanner.ELEMENT>(html`
-    <md-alert-banner type=${type} message=${message} ?closable=${closable} ?show=${show}
-      ><p>Test Alert Message</p></md-alert-banner
-    >
-  `);
-};
-
-const find = <T extends LitElement>(component: T, selector: string): Element | null => {
-  return component.shadowRoot!.querySelector(selector);
-};
-
-describe("Alert Banner component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-  test("should render component", async () => {
-    expect.hasAssertions();
-    const component = await fixtureFactory("info", "my message", false, false);
-    expect(component).not.toBeNull();
-    expect(component.closable).toBeFalsy();
-    expect(component.show).toBeFalsy();
-  });
-
-  test("should show component when show property is true", async () => {
-    const component = await fixtureFactory("info", "my message", false, true);
-    await elementUpdated(component);
-    expect(component.show).toBeTruthy();
-  });
-
-  test("should show and hide component", async () => {
-    const component = await fixtureFactory("info", "my message", false, true);
-    await elementUpdated(component);
-    expect(component.show).toBeTruthy();
-    component.onHide();
-    await elementUpdated(component);
-    expect(component.show).toBeFalsy();
-  });
-
-  test("should render close button when closable property is true", async () => {
-    const component = await fixtureFactory("info", "my message", true, true);
-    await elementUpdated(component);
-
-    const closeBtn = component.shadowRoot?.querySelector("md-button");
-
-    expect(component.closable).toBeTruthy();
-    expect(closeBtn).not.toBeNull();
-
-    closeBtn!.dispatchEvent(new MouseEvent("click"));
-    await elementUpdated(component);
-    expect(component.show).toBeFalsy();
-  });
-
-  test("should hide when Enter keydown", async () => {
-    const component = await fixtureFactory("info", "my message", true, true);
-    await elementUpdated(component);
-    expect(component.closable).toBeTruthy();
-
-    const closeBtn = component.shadowRoot?.querySelector("md-button");
-    closeBtn!.dispatchEvent(new KeyboardEvent("keydown", { code: Key.Enter }));
-
-    await elementUpdated(component);
-    expect(component.show).toBeFalsy();
-  });
-
-  test("should hide when Space keydown", async () => {
-    const component = await fixtureFactory("info", "my message", true, true);
-    component.handleKeyDown(new KeyboardEvent("keydown", { code: Key.Space }));
-
-    await elementUpdated(component);
-    expect(component.show).toBeFalsy();
-  });
-});