@momentum-ui/web-components 2.5.7 → 2.5.8

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

@@ -1,89 +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 { Key } from "@/constants";
-import reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { CSSResultArray, html, LitElement, property } from "lit-element";
-import { classMap } from "lit-html/directives/class-map.js";
-import "@/components/button/Button";
-import "@/components/icon/Icon";
-import styles from "./scss/module.scss";
-
-export namespace AlertBanner {
-  @customElementWithCheck("md-alert-banner")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) type = "";
-    @property({ type: String }) message = "";
-    @property({ type: Boolean }) closable = false;
-    @property({ type: Boolean }) show = false;
-    @property({ type: String, attribute: "close-aria-label" }) closeAriaLabel = "Close Banner";
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.requestUpdate("show");
-    }
-
-    onHide() {
-      this.show = !this.show;
-      this.dispatchEvent(new CustomEvent("alertBanner-hide"));
-      this.requestUpdate("show");
-    }
-
-    handleKeyDown(event: KeyboardEvent) {
-      const { code } = event;
-      if (code === Key.Enter || code === Key.Space) {
-        this.onHide();
-      }
-    }
-
-    static get styles(): CSSResultArray {
-      return [reset, styles];
-    }
-
-    render() {
-      const classes = {
-        "md-alert-banner": true,
-        [`md-alert-banner--${this.type}`]: this.type
-      };
-
-      const closeBtn = this.closable
-        ? html`
-            <md-button
-              class="md-alert-banner__close"
-              hasRemoveStyle
-              ariaLabel=${this.closeAriaLabel}
-              @click="${this.onHide}"
-              @keydown="${this.handleKeyDown}"
-            >
-              <md-icon name="icon-cancel_16"></md-icon>
-            </md-button>
-          `
-        : null;
-
-      return html`
-        ${this.show
-          ? html`
-              <div class="${classMap(classes)}">
-                <div class="md-alert-banner__text">
-                  <slot><span>${this.message}</span></slot>
-                </div>
-                ${closeBtn}
-              </div>
-            `
-          : null}
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-alert-banner": AlertBanner.ELEMENT;
-  }
-}

package/src/components/alert-banner/scss/alert-banner.scss

@@ -1,52 +0,0 @@
-/** @component alert-banner */
-
-@include exports("md-alert-banner") {
-  .md-alert-banner {
-    padding: $alert-banner__padding;
-    position: relative;
-    text-align: center;
-
-    &.md-alert-banner {
-      &--default {
-        @include alert-banner-color(
-          var(--alert-banner-default-bg-color, $alert-banner-info__background),
-          var(--alert-banner-default-text-color, $alert-banner-info__color)
-        );
-      }
-
-      &--warning {
-        @include alert-banner-color(
-          var(--alert-banner-warning-bg-color, $alert-banner-warning__background),
-          var(--alert-banner-warning-text-color, $alert-banner-warning__color)
-        );
-      }
-
-      &--error {
-        @include alert-banner-color(
-          var(--alert-banner-error-bg-color, $alert-banner-error__background),
-          var(--alert-banner-error-text-color, $alert-banner-error__color)
-        );
-      }
-    }
-
-    &__text {
-      font-size: $alert-banner__font-size;
-      padding: $alert-banner-text__padding;
-      text-align: center;
-
-      a {
-        color: inherit;
-        text-decoration: underline;
-      }
-    }
-
-    &__close {
-      cursor: pointer;
-      height: $alert-banner-close__size;
-      position: absolute;
-      right: $alert-banner-close__size;
-      top: $alert-banner-close__top-space;
-      width: $alert-banner-close__size;
-    }
-  }
-}

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

@@ -1,8 +0,0 @@
-@mixin alert-banner-color($background-color, $text-color) {
-  background-color: $background-color;
-  color: $text-color;
-
-  md-icon {
-    color: $text-color;
-  }
-}

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

@@ -1,9 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-
-// Settings
-@import "@/wc_scss/colors/settings-base.scss";
-
-// Alert-banner Specific
-@import "settings";
-@import "mixins";
-@import "alert-banner";

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

@@ -1,15 +0,0 @@
-$alert-banner__font-size: rem-calc(14);
-$alert-banner__padding: rem-calc(12);
-$alert-banner-text__padding: 0 rem-calc(28);
-$alert-banner-close__size: rem-calc(16);
-$alert-banner-close__top-space: rem-calc(12);
-$alert-banner-column__border: 1px solid transparent;
-
-$alert-banner-info__color: $md-theme-70;
-$alert-banner-info__background: $md-theme-10;
-
-$alert-banner-warning__color: $md-yellow-70;
-$alert-banner-warning__background: $md-yellow-10;
-
-$alert-banner-error__color: $md-red-70;
-$alert-banner-error__background: $md-red-10;

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

@@ -1,40 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const alertBanner = {
-  prefix: "lm",
-  component: "alert-banner",
-  default: {
-    "bg-color": {
-      light: colors.blue[10].name,
-      dark: colors.blue[70].name
-    },
-    "text-color": {
-      light: colors.blue[70].name,
-      dark: colors.blue[10].name
-    }
-  },
-  error: {
-    "bg-color": {
-      light: colors.red[10].name,
-      dark: colors.red[70].name
-    },
-    "text-color": {
-      light: colors.red[70].name,
-      dark: colors.red[10].name
-    }
-  },
-  warning: {
-    "bg-color": {
-      light: colors.yellow[10].name,
-      dark: colors.yellow[70].name
-    },
-    "text-color": {
-      light: colors.yellow[70].name,
-      dark: colors.yellow[10].name
-    }
-  }
-};
-
-module.exports = alertBanner;

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

@@ -1,40 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const alertBanner = {
-  prefix: "md",
-  component: "alert-banner",
-  default: {
-    "bg-color": {
-      light: colors.blue[10].name,
-      dark: colors.blue[70].name
-    },
-    "text-color": {
-      light: colors.blue[70].name,
-      dark: colors.blue[10].name
-    }
-  },
-  error: {
-    "bg-color": {
-      light: colors.red[10].name,
-      dark: colors.red[70].name
-    },
-    "text-color": {
-      light: colors.red[70].name,
-      dark: colors.red[10].name
-    }
-  },
-  warning: {
-    "bg-color": {
-      light: colors.yellow[10].name,
-      dark: colors.yellow[70].name
-    },
-    "text-color": {
-      light: colors.yellow[70].name,
-      dark: colors.yellow[10].name
-    }
-  }
-};
-
-module.exports = alertBanner;

package/src/components/avatar/Avatar.stories.ts

@@ -1,82 +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 { AvatarType, AvatarSize }  from "@/components/avatar/Avatar";
-import "@/components/avatar/Avatar";
-import "@/components/avatar/CompositeAvatar";
-import "@/components/theme/Theme";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-
-export default {
-  title: "Components/Avatar",
-  component: "md-avatar",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    a11y: {
-      element: "md-avatar"
-    }
-  }
-};
-
-const options = {
-  Purple: "purple",
-  Mint: "mint",
-  Slate: "slate",
-  Gold: "gold",
-  Lime: "lime",
-  Darkmint: "darkmint",
-  Green: "green",
-  Yellow: "yellow",
-  Red: "red",
-  Orange: "orange",
-  Violet: "violet",
-  Cyan: "cyan",
-  Cobalt: "cobalt",
-  Pink: "pink"
-};
-
-export const Avatar = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const type = select("Type", AvatarType, "");
-  const title = text("Title", "Rachell Harris");
-  const preDefinedColor = select("PreDefined Color", options, "mint");
-  const size = select("Size", AvatarSize, 44);
-  const customUrl = boolean("Custom Src", false);
-  const customImage = boolean("Custom Image", false);
-  const url = text("src", "https://4b4dc97add6b1dcc891a-54bf3b4e4579920861d23cc001530c2a.ssl.cf1.rackcdn.com/V1~b33cb17c-42e3-41ac-a045-497e4002646c~b18d4572b17a4e98a16708797343ee7a~1600");
-  const hasNotification = boolean("Has Notification", false);
-  const composite = boolean("Composite", false);
-  const compositeAvatarSize = [0, 18, 24, 28, 36, 40, 44, 52, 56, 72, 80, 84] as const;
-  const sizeComos = select("Composite Size", compositeAvatarSize, 56);
-
-  if (composite) {
-    return html`
-      <md-theme class="theme-toggle" id="avatar" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-        <md-composite-avatar .size=${sizeComos}>
-          <md-avatar title="Anthony Russell" type="dnd" has-notification alt="Avatar"></md-avatar>
-          <md-avatar type="typing" title="Alyson Hoagland Pace" alt="Avatar"></md-avatar>
-        </md-composite-avatar>
-      </md-theme>
-    `;
-  } else {
-    return html`
-      <md-theme class="theme-toggle" id="avatar" ?darkTheme=${darkTheme}>
-        <md-avatar .title=${title} alt="Avatar" label="Avatar" .type=${type} .src="${customUrl ? `${url}` : ""}" .color=${preDefinedColor} .size=${size} ?has-notification=${hasNotification}>
-          ${customImage ? html`<img
-          width="100"
-          height="100"
-          src=${url}
-        />` : ``}
-        </md-avatar>
-      </md-theme>
-    `;
-  }
-};

package/src/components/avatar/Avatar.test.ts

@@ -1,119 +0,0 @@
-import "./Avatar";
-import { Avatar } from "./Avatar";
-import { elementUpdated, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
-import { html } from "lit-element";
-
-describe("Avatar", () => {
-  afterEach(fixtureCleanup);
-
-  test("should set source property", async () => {
-    const element = await fixture<Avatar.ELEMENT>(
-      html`
-        <md-avatar alt="avatar" title="Alyson Born" src="https://example.com"></md-avatar>
-      `
-    );
-    expect(element.src).toEqual("https://example.com");
-  });
-
-  test("should set color property", async () => {
-    const element = await fixture<Avatar.ELEMENT>(
-      html`
-        <md-avatar alt="avatar" title="Alyson Born" color="mint"></md-avatar>
-      `
-    );
-    expect(element.color).toEqual("mint");
-  });
-
-  test("should set size property", async () => {
-    const element = await fixture<Avatar.ELEMENT>(
-      html`
-        <md-avatar alt="avatar" size="44"></md-avatar>
-      `
-    );
-    expect(element.size).toEqual(44);
-  });
-
-  test("should set correct pretify title", async () => {
-    const element = await fixture<Avatar.ELEMENT>(
-      html`
-        <md-avatar alt="avatar" title=" Alyson Born Hoaland "></md-avatar>
-      `
-    );
-    const letter = element.shadowRoot!.querySelector(".md-avatar__letter");
-
-    expect(letter!.textContent!.trim()).toEqual("AH");
-
-
-    const element2 = await fixture<Avatar.ELEMENT>(
-      html`
-        <md-avatar alt="avatar" title="Chandler"></md-avatar>
-      `
-    );
-    const letter2 = element2.shadowRoot!.querySelector(".md-avatar__letter");
-
-    expect(letter2!.textContent!.trim()).toEqual("C");
-
-    const element3 = await fixture<Avatar.ELEMENT>(
-      html`
-        <md-avatar alt="avatar" title="Joseph Francis Tribbiani Junior"></md-avatar>
-      `
-    );
-    const letter3 = element3.shadowRoot!.querySelector(".md-avatar__letter");
-
-    expect(letter3!.textContent!.trim()).toEqual("JJ");
-  });
-
-  test("should render icon even if title is provided", async () => {
-    const element = await fixture<Avatar.ELEMENT>(
-      html`
-        <md-avatar alt="avatar" title="Alyson Born Hoaland" color="mint" icon-name="warning_20"></md-avatar>
-      `
-    );
-
-    expect(element.shadowRoot!.querySelector(".md-avatar__img")).toBeNull();
-    expect(element.shadowRoot!.querySelector("md-icon")).not.toBeNull();
-    expect(element.shadowRoot!.querySelector(".md-avatar__letter")).toBeNull();
-  });
-
-  test("should render self avatar type if type property provided with self value", async () => {
-    const element = await fixture<Avatar.ELEMENT>(
-      html`
-        <md-avatar alt="avatar" size="36" title="Alyson Born Hoaland" type="self"></md-avatar>
-      `
-    );
-    expect(element.shadowRoot!.querySelector(".md-avatar__self")).not.toBeNull();
-    expect(element.shadowRoot!.querySelector("md-icon")).not.toBeNull();
-    expect(element.shadowRoot!.querySelector("md-icon")!.name).toEqual("chat-active_16");
-
-    element.size = 44;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelector("md-icon")!.name).toEqual("chat-active_18");
-
-    element.size = 28;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelector("md-icon")!.name).toEqual("chat-active_14");
-  });
-
-  test("should render notification bange", async () => {
-    const element = await fixture<Avatar.ELEMENT>(
-      html`
-        <md-avatar has-notification type="active" size="72" title="Tom Smith"></md-avatar>
-      `
-    );
-
-    expect(element.hasNotification).toBeTruthy();
-    expect(element.shadowRoot!.querySelector(".md-avatar__notification-badge")).not.toBeNull();
-  });
-
-  test("should provide loading status if type is typing", async () => {
-    const element = await fixture<Avatar.ELEMENT>(
-      html`
-        <md-avatar type="typing" title="Tom Smith"></md-avatar>
-      `
-    );
-
-    expect(element.shadowRoot!.querySelector("md-loading")).not.toBeNull();
-  });
-});

package/src/components/avatar/Avatar.ts

@@ -1,207 +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/icon/Icon";
-import "@/components/loading/Loading";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import reset from "@/wc_scss/reset.scss";
-import { html, internalProperty, LitElement, property } from "lit-element";
-import { nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { styleMap } from "lit-html/directives/style-map";
-import { until } from "lit-html/directives/until.js";
-import styles from "./scss/module.scss";
-
-export const AvatarType = [
-  "active",
-  "bot",
-  "call",
-  "dnd",
-  "group",
-  "inactive",
-  "meeting",
-  "ooo",
-  "presenting",
-  "self",
-  "typing",
-  ""
-] as const;
-export const AvatarSize = [18, 24, 28, 32, 36, 40, 44, 52, 56, 72, 80, 84];
-
-export namespace Avatar {
-  export type Type = typeof AvatarType[number];
-
-  export type Size = typeof AvatarSize[number];
-
-  @customElementWithCheck("md-avatar")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) alt = "";
-    @property({ type: String }) src = "";
-    @property({ type: String }) label = "";
-    @property({ type: String }) title = "";
-    @property({ type: String }) color = "";
-    @property({ type: Boolean }) decrypting = false;
-    @property({ type: String, attribute: "icon-name" }) iconName = "";
-    @property({ type: String }) type: Type = "";
-    @property({ type: Number }) size: Size = 40;
-    @property({ type: Boolean, attribute: "has-notification" }) hasNotification = false;
-
-    @internalProperty() private imageLoaded = false;
-    @internalProperty() private imageErrored = false;
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    private get avatarClassMap() {
-      return {
-        [`md-avatar--${this.type}`]: !!this.type,
-        [`md-avatar--${this.size}`]: !!this.size
-      };
-    }
-
-    private get avatarLetterClassMap() {
-      return {
-        "md-decrypting": this.decrypting,
-        [`md-avatar--${this.color}`]: this.color
-      };
-    }
-
-    private get avatarStyleMap() {
-      return {
-        [`md-avatar--${this.color}`]: this.color
-      };
-    }
-
-    private get pretifyTitle() {
-      if (this.title.length) {
-        const fullName = this.title.trim().split(" ");
-        if (fullName.length === 1) return fullName[0].charAt(0);
-        else {
-          return fullName[0].charAt(0) + fullName[fullName.length - 1].charAt(0);
-        }
-      }
-    }
-
-    private get chatIconName() {
-      return this.size >= 56
-        ? "chat-active_20"
-        : this.size >= 40 && this.size <= 56
-        ? "chat-active_18"
-        : this.size >= 36 && this.size <= 40
-        ? "chat-active_16"
-        : this.size >= 28 && this.size <= 36
-        ? "chat-active_14"
-        : "chat-active_12";
-    }
-
-    private get avatarLetter() {
-      return this.title
-        ? html`
-            <span class="md-avatar__letter ${classMap(this.avatarLetterClassMap)}"
-              >${this.pretifyTitle}<slot></slot>
-              ${this.type === "typing"
-                ? html`
-                    <md-loading></md-loading>
-                  `
-                : nothing}
-            </span>
-          `
-        : nothing;
-    }
-
-    private get avatarIcon() {
-      return html`
-        <span class="md-avatar__icon ${classMap(this.avatarStyleMap)}">
-          <md-icon .name=${this.iconName}></md-icon>
-        </span>
-      `;
-    }
-
-    private get avatarImage() {
-      return html`
-        ${until(
-          this.loadImage()
-            .then(image => {
-              this.handleImageLoad();
-              return html`
-                ${image}
-              `;
-            })
-            .catch(() => this.handleImageError()),
-          html`
-            ${this.iconName
-              ? this.avatarIcon
-              : this.title
-              ? html`
-                  ${this.avatarLetter}
-                `
-              : nothing}
-          `
-        )}
-      `;
-    }
-
-    private async loadImage() {
-      return new Promise((resolve, reject) => {
-        const img = document.createElement("img");
-        img.src = this.src;
-        img.alt = this.alt;
-        img.onload = () => resolve(img);
-        img.onerror = error => reject(error);
-        img.classList.add("md-avatar__img");
-        img.classList.toggle("md-avatar__img--hidden", !this.imageLoaded);
-      });
-    }
-
-    private handleImageLoad() {
-      this.imageLoaded = true;
-    }
-
-    private handleImageError() {
-      this.imageErrored = true;
-    }
-
-    render() {
-      return html`
-        <div
-          part="avatar"
-          class="md-avatar ${classMap(this.avatarClassMap)}"
-          role="img"
-          aria-label=${ifDefined(this.label)}
-        >
-          ${this.type === "self"
-            ? html`
-                <span class="md-avatar__self" style=${styleMap(this.avatarStyleMap)}>
-                  <md-icon .name=${this.chatIconName}></md-icon>
-                </span>
-              `
-            : this.src && !this.imageErrored
-            ? this.avatarImage
-            : this.iconName
-            ? this.avatarIcon
-            : this.title
-            ? this.avatarLetter
-            : nothing}
-          ${this.hasNotification
-            ? html`
-                <span class="md-avatar__notification-badge"></span>
-              `
-            : nothing}
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-avatar": Avatar.ELEMENT;
-  }
-}