@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/components/activity-button/scss/module.scss

@@ -0,0 +1,63 @@
+@import "@/wc_scss/tools/functions/core.scss";
+
+// Settings
+@import "@/wc_scss/colors/settings-base.scss";
+@import "@/wc_scss/colors/settings-transparencies.scss";
+@import "@/wc_scss/settings/rem.scss";
+@import "@/wc_scss/settings/core.scss";
+@import "@/wc_scss/typography/settings.scss";
+
+// Tools
+@import "@/wc_scss/tools/mixins/core";
+@import "@/wc_scss/tools/mixins/flex";
+@import "@/wc_scss/tools/mixins/focus";
+@import "@/wc_scss/settings/button-settings.scss";
+@import "@/wc_scss/tools/mixins/button";
+
+@include exports("md-button") {
+  [class|="md-button__container"] {
+    @include flex($display: inline-flex, $fd: column);
+
+    width: $button-container__width;
+
+    &[class$="--small"] {
+      width: $button-container--small__width;
+    }
+  }
+
+  // Default styles applied outside of media query
+  .md-button {
+    @include button-base;
+    @include button-size($height: rem-calc(36), $padding: $button__padding--36, $radius: $button__radius--36);
+    @include button-color($focus: true);
+    @include single-transition(background-color, $button__transition-speed, ease);
+
+    &.md-button {
+      &--circle {
+        @include radius($button__radius--round);
+
+        @include button-circle-size($size: $button__size--36, $font-size: $button__font-size--36);
+
+        padding: 0;
+
+        &[class*="--36"] {
+          @include button-circle-size($size: $button__size--36, $font-size: $button__font-size--36);
+        }
+
+        &[class*="--56"] {
+          @include button-circle-size($size: $button__size--56, $font-size: $button__font-size--56);
+        }
+
+        &[class*="--68"] {
+          @include button-circle-size($size: $button__size--68, $font-size: $button__font-size--68);
+        }
+
+        &[class*="--84"] {
+          @include button-circle-size($size: $button__size--84, $font-size: $button__font-size--84);
+        }
+      }
+    }
+  }
+}
+
+@import "activity-button";

package/src/components/alert/Alert.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 { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
+import { withA11y } from "@storybook/addon-a11y";
+import { html } from "lit-html";
+import { alertTypes } from "@/utils/enums";
+import { action } from '@storybook/addon-actions';
+import "@/components/alert/Alert";
+import "@/components/theme/Theme";
+
+export default {
+  title: "Components/Alert",
+  component: "md-alert",
+  decorators: [withKnobs, withA11y],
+  argTypes: {
+    renderIconTemplate: { table: { disable: true } },
+    alertClassMap: { table: { disable: true } },
+    internalClose: {description: 'By default closing internally, othervise - controlling outer via .show',}
+  },
+  parameters: {
+    a11y: {
+      element: "md-alert"
+    }
+  }
+};
+
+export const Alert = () => {
+  const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos theme", false);
+  const show = boolean("Show", true);
+  const title = text("Title", "Alert");
+  const message = text("Message", "Who is awesome? You are!");
+  const type = select("Size", alertTypes, "default");
+  const closable = boolean("clossable", true);
+  const inline = boolean("Inline", false);
+
+  return html`
+    <md-theme class="theme-toggle" id="alert" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+      <md-alert @alert-close=${(action('dispatchEvent'))} title=${title} message=${message} type=${type} ?closable=${closable} ?show=${show} .inline=${inline}></md-alert>
+    </md-theme>
+  `;
+};

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

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

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

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

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

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

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

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

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