@momentum-ui/web-components 2.5.6 → 2.5.7

package/src/components/alert-banner/AlertBanner.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-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

@@ -0,0 +1,84 @@
+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();
+  });
+});

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

@@ -0,0 +1,89 @@
+/**
+ * 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

@@ -0,0 +1,52 @@
+/** @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

@@ -0,0 +1,8 @@
+@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

@@ -0,0 +1,9 @@
+@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

@@ -0,0 +1,15 @@
+$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

@@ -0,0 +1,40 @@
+/* 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

@@ -0,0 +1,40 @@
+/* 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

@@ -0,0 +1,82 @@
+/**
+ * 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

@@ -0,0 +1,119 @@
+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();
+  });
+});