@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/components/badge/Badge.test.ts

@@ -0,0 +1,127 @@
+import "@/components/icon/Icon";
+import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
+import "./Badge";
+import { Badge } from "./Badge";
+
+describe("Badge component", () => {
+  afterEach(() => {
+    fixtureCleanup();
+  });
+
+  // color
+  test("should set badge color", async () => {
+    expect.hasAssertions();
+    const component: Badge.ELEMENT = await fixture(
+      html`
+        <md-badge color="blue"></md-badge>
+      `
+    );
+    expect(component.color).not.toBeNull();
+  });
+
+  // small
+  test("should set badge to small size", async () => {
+    expect.hasAssertions();
+    const component: Badge.ELEMENT = await fixture(
+      html`
+        <md-badge small></md-badge>
+      `
+    );
+    expect(component.small).toBeTruthy();
+  });
+
+  // outlined
+  test("should set badge style to outlined", async () => {
+    expect.hasAssertions();
+    const component: Badge.ELEMENT = await fixture(
+      html`
+        <md-badge outlined></md-badge>
+      `
+    );
+    expect(component.outlined).toBeTruthy();
+  });
+
+  // custom bgColor badge
+  test("should set user bgColor badge", async () => {
+    expect.hasAssertions();
+    const component: Badge.ELEMENT = await fixture(
+      html`
+        <md-badge bgColor="#000"></md-badge>
+      `
+    );
+    expect(component.bgColor).toEqual("#000");
+  });
+  // custom size badge
+  test("should set user bgColor badge", async () => {
+    expect.hasAssertions();
+    const component: Badge.ELEMENT = await fixture(
+      html`
+        <md-badge height="100px" width="100px"></md-badge>
+      `
+    );
+    expect(component.height).toEqual("100px");
+    expect(component.width).toEqual("100px");
+  });
+  // custom textColor badge
+  test("should set user textColor", async () => {
+    expect.hasAssertions();
+    const component: Badge.ELEMENT = await fixture(
+      html`
+        <md-badge textColor="#000"></md-badge>
+      `
+    );
+    expect(component.textColor).toEqual("#000");
+  });
+  // split badge
+  test("should set splitted badge", async () => {
+    expect.hasAssertions();
+    const component: Badge.ELEMENT = await fixture(
+      html`
+        <md-badge split></md-badge>
+      `
+    );
+    expect(component.split).toBeTruthy();
+  });
+  test("should set splitted badge", async () => {
+    expect.hasAssertions();
+    const component: Badge.ELEMENT = await fixture(
+      html`
+        <md-badge color="mint" split small>
+          <span slot="split-left">
+            <md-icon name="handset-active_12" style="margin-right:.75rem;height:1rem"></md-icon>
+            ${"00:01"}
+          </span>
+          <span slot="split-right">
+            <md-icon name="headset_12" style="margin-right:.75rem;height:1rem"></md-icon>
+            ${"00:01"}
+          </span>
+        </md-badge>
+      `
+    );
+    expect(component.split).toBeTruthy();
+    expect(component.shadowRoot!.querySelectorAll("slot[name]").length).toEqual(2);
+  });
+
+  // circle
+  test("should set circle badge", async () => {
+    expect.hasAssertions();
+    const component: Badge.ELEMENT = await fixture(
+      html`
+        <md-badge circle></md-badge>
+      `
+    );
+    expect(component.circle).toBeTruthy();
+  });
+
+  test("should set aria-label for badge", async () => {
+    expect.hasAssertions();
+    const ariaLabel = "my aria-label";
+    const component: Badge.ELEMENT = await fixture(
+      html`
+        <md-badge aria-label=${ariaLabel}></md-badge>
+      `
+    );
+    expect(component.ariaLabel).toEqual(ariaLabel);
+    expect(component.getAttribute("aria-label")).toEqual(ariaLabel);
+  });
+});

package/src/components/badge/Badge.ts

@@ -0,0 +1,98 @@
+/**
+ * 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 { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, LitElement, property } from "lit-element";
+import { nothing } from "lit-html";
+import { classMap } from "lit-html/directives/class-map";
+import styles from "./scss/module.scss";
+
+export namespace Badge {
+  @customElementWithCheck("md-badge")
+  export class ELEMENT extends LitElement {
+    @property({ type: String, attribute: "aria-label" }) ariaLabel = "";
+    @property({ type: String }) color = "";
+    @property({ type: String }) bgColor = "";
+    @property({ type: String }) textColor = "";
+    @property({ type: String }) height = "";
+    @property({ type: String }) width = "";
+    @property({ type: Boolean }) outlined = false;
+    @property({ type: Boolean }) compact = false;
+    @property({ type: Boolean }) circle = false;
+    @property({ type: Boolean }) small = false;
+    @property({ type: Boolean }) split = false;
+    @property({ type: Boolean }) disabled = false;
+
+    renderBgColor = () => {
+      return this.bgColor ? `background-color: ${this.bgColor};` : nothing;
+    };
+    renderTextColor = () => {
+      return this.textColor ? `color: ${this.textColor};` : nothing;
+    };
+    renderHeight = () => {
+      return this.height ? `height: ${this.height};` : nothing;
+    };
+    renderWidth = () => {
+      return this.width ? `width: ${this.width};` : nothing;
+    };
+
+    getStyles = () => {
+      if (this.bgColor || this.textColor || this.height || this.width) {
+        return html`
+          <style>
+            :host .md-badge {
+              ${this.renderBgColor()};
+              ${this.renderTextColor()};
+              ${this.renderHeight()};
+              ${this.renderWidth()};
+            }
+          </style>
+        `;
+      } else return nothing;
+    };
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    render() {
+      const classNamesInfo = {
+        "md-badge--circle": this.circle,
+        "md-badge--split": this.split,
+        "md-badge--compact": this.compact,
+        "md-badge--small": this.small,
+        "md-badge--outline": this.outlined,
+        "md-badge--disabled": this.disabled,
+        [`md-badge--${this.color}`]: !this.disabled && this.color
+      };
+
+      const splitContent = () => {
+        return html`
+          <slot name="split-left" class="split split-left"></slot>
+          <span class="split-separator"> | </span>
+          <slot name="split-right" class="split split-right"></slot>
+        `;
+      };
+
+      return html`
+        ${this.getStyles()}
+        <span part="badge" class="md-badge ${classMap(classNamesInfo)}" aria-label=${this.ariaLabel}>
+          ${this.split ? splitContent() : nothing}
+          <slot></slot>
+        </span>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-badge": Badge.ELEMENT;
+  }
+}

package/src/components/badge/scss/badge.scss

@@ -0,0 +1,215 @@
+/** @component badge */
+
+@include exports("md-badge") {
+  .md-badge {
+    @include badge-base;
+    @include badge-size;
+    @include badge-style($radius: $badge--round__radius);
+
+    &--small {
+      @include badge-size($padding: rem-calc(3 12));
+      height: rem-calc(24);
+      min-width: auto;
+    }
+
+    &--compact,
+    &--split {
+      @include badge-size($padding: rem-calc(4 16 4 4), $text-size: rem-calc(12));
+    }
+
+    &--circle {
+      @include badge-size($padding: rem-calc(12 12), $text-size: rem-calc(12));
+      height: rem-calc(40);
+      justify-content: center;
+      min-width: auto;
+      width: rem-calc(40);
+
+      ::slotted(md-icon) {
+        margin: 0 !important;
+      }
+    }
+
+    &--outline {
+      @include badge-outline-style(var(--badge-outline-color, $lm-badge-outline-color-light), false, transparent);
+      border: 1px solid;
+      min-width: auto;
+    }
+
+
+
+    &--gray {
+      @include badge-style(
+        var(--badge-gray-bg-color, $lm-badge-gray-bg-color-light),
+        false,
+        var(--badge-gray-text-color, $lm-badge-gray-text-color-light)
+      );
+    }
+
+    &--gold {
+      @include badge-style(
+        var(--badge-gold-bg-color, $lm-badge-gold-bg-color-light),
+        false,
+        var(--badge-gold-text-color, $lm-badge-gold-text-color-light)
+      );
+    }
+
+    &--lime {
+      @include badge-style(
+        var(--badge-lime-bg-color, $lm-badge-lime-bg-color-light),
+        false,
+        var(--badge-lime-text-color, $lm-badge-lime-text-color-light)
+      );
+    }
+
+    &--blue,
+    &--cobalt {
+      @include badge-style(
+        var(--badge-blue-bg-color, $lm-badge-blue-bg-color-light),
+        false,
+        var(--badge-blue-text-color, $lm-badge-blue-text-color-light)
+      );
+    }
+
+    &--mint {
+      @include badge-style(
+        var(--badge-mint-bg-color, $lm-badge-mint-bg-color-light),
+        false,
+        var(--badge-mint-text-color, $lm-badge-mint-text-color-light)
+      );
+    }
+
+    &--darkmint {
+      @include badge-style(
+        var(--badge-darkmint-bg-color, $lm-badge-darkmint-bg-color-light),
+        false,
+        var(--badge-darkmint-text-color, $lm-badge-darkmint-text-color-light)
+      );
+    }
+
+    &--green {
+      @include badge-style(
+        var(--badge-green-bg-color, $lm-badge-green-bg-color-light),
+        false,
+        var(--badge-green-text-color, $lm-badge-green-text-color-light)
+      );
+    }
+
+    &--yellow {
+      @include badge-style(
+        var(--badge-yellow-bg-color, $lm-badge-yellow-bg-color-light),
+        false,
+        var(--badge-yellow-text-color, $lm-badge-yellow-text-color-light)
+      );
+    }
+
+    &--red {
+      @include badge-style(
+        var(--badge-red-bg-color),
+        false,
+        var(--badge-red-text-color, $lm-badge-red-text-color-light)
+      );
+    }
+
+    &--darkred {
+      @include badge-style(
+        var(--badge-darkred-bg-color, $lm-badge-darkmint-bg-color-light),
+        false,
+        var(--badge-darkred-text-color, $lm-badge-darkred-text-color-light)
+      );
+    }
+
+    &--orange {
+      @include badge-style(
+        var(--badge-orange-bg-color, $lm-badge-orange-bg-color-light),
+        false,
+        var(--badge-orange-text-color, $lm-badge-orange-text-color-light)
+      );
+    }
+
+    &--purple {
+      @include badge-style(
+        var(--badge-purple-bg-color, $lm-badge-purple-bg-color-light),
+        false,
+        var(--badge-purple-text-color, $lm-badge-purple-text-color-light)
+      );
+    }
+
+    &--violet {
+      @include badge-style(
+        var(--badge-violet-bg-color, $lm-badge-violet-bg-color-light),
+        false,
+        var(--badge-violet-text-color, $lm-badge-violet-text-color-light)
+      );
+    }
+
+    &--cyan {
+      @include badge-style(
+        var(--badge-cyan-bg-color, $lm-badge-cyan-bg-color-light),
+        false,
+        var(--badge-cyan-text-color, $lm-badge-cyan-text-color-light)
+      );
+    }
+
+    &--pink {
+      @include badge-style(
+        var(--badge-pink-bg-color, $lm-badge-pink-bg-color-light),
+        false,
+        var(--badge-pink-text-color, $lm-badge-pink-text-color-light)
+      );
+    }
+
+    &--hold {
+      @include badge-style(
+        var(--badge-hold-bg-color, $lm-badge-hold-bg-color-light),
+        false,
+        var(--badge-hold-text-color, $lm-badge-hold-text-color-light)
+      );
+    }
+
+    &--disabled {
+      @include badge-style(
+        var(--md-quaternary-two-bg-color, $lm-badge-disabled-bg-color-light),
+        false,
+        var(--md-disabled-text-color, $lm-badge-disabled-text-color-light)
+      );
+
+      ::slotted(md-icon) {
+        color: var(--md-disabled-text-color, $lm-badge-disabled-text-color-light);
+      }
+    }
+  }
+}
+
+.md-badge--small.md-badge--circle {
+  height: rem-calc(24);
+  width: rem-calc(24);
+}
+
+.badge-counter {
+  font-weight: bold;
+  margin-left: rem-calc(8);
+}
+
+::slotted(md-icon) {
+  height: rem-calc(16);
+  margin-right: rem-calc(8);
+  width: rem-calc(16);
+}
+
+::slotted(md-badge) {
+  height: rem-calc(16);
+  margin-right: rem-calc(8);
+  width: rem-calc(16);
+}
+
+::slotted(span) {
+  align-items: center;
+  display: inline-flex;
+  height: rem-calc(16);
+  justify-content: center;
+}
+
+.split-separator {
+  margin: rem-calc(0 8);
+  opacity: 0.4;
+}

package/src/components/badge/scss/mixins.scss

@@ -0,0 +1,82 @@
+/** @component badge */
+
+@mixin badge-base() {
+  align-items: center;
+  display: inline-flex;
+  font-family: $badge__font-family;
+  font-weight: $badge__font-weight;
+  height: rem-calc(32);
+  justify-content: flex-start;
+  line-height: $badge__font-line-height;
+  margin-bottom: auto;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+}
+  
+@mixin badge-size($padding: $badge__padding, $text-size: $badge__font-size) {
+  @if $padding {
+    padding: $padding;
+  }
+  
+  @if $text-size {
+    font-size: $text-size;
+  }
+}
+  
+@mixin badge-style(
+  $bg: var(--badge-default-bg-color, $lm-badge-default-bg-color-light),
+  $radius: false,
+  $color: var(--badge-default-text-color, $lm-badge-default-text-color-light)
+) {
+  @if $bg {
+    background-color: $bg;
+  
+    @if $color {
+      color: $color;
+    }
+  }
+  
+  @if $radius==true {
+    @include radius($badge__radius);
+  } @else if $radius {
+    @include radius($radius);
+  }
+}
+  
+@mixin badge-outline-style(
+  $bc: $badge--blue__background-color,
+  $radius: false,
+  $bg: transparent
+) {
+  @if $bc {
+    color: $bc;
+    border: 2px solid $bc;
+  }
+  
+  background-color: $bg;
+}
+  
+@mixin badge(
+  $padding: $badge__padding,
+  $text-size: $badge__font-size,
+  $bg: $badge--blue__background-color,
+  $radius: false
+) {
+  @include badge-base;
+  @include badge-size($padding, $text-size);
+  @include badge-style($bg, $radius);
+}
+  
+@mixin badge-variant($color) {
+  background-color: $color;
+  
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken($color, 10%);
+    }
+  }
+}

package/src/components/badge/scss/module.scss

@@ -0,0 +1,14 @@
+@import "@/wc_scss/tools/functions/core";
+@import "@/wc_scss/tools/mixins/core";
+
+@import "@/wc_scss/settings/rem";
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/settings/core";
+
+@import "@/wc_scss/typography/settings";
+
+@import "./vars/lm-badge-settings";
+
+@import "./settings";
+@import "./mixins";
+@import "./badge"

package/src/components/badge/scss/settings.scss

@@ -0,0 +1,69 @@
+$badge__class: "#{$prefix}-badge";
+
+// Set the padding for badges
+$badge__padding: rem-calc(4 16) !default;
+$badge__outline-padding: rem-calc(4 6 4) !default;
+
+// Set the border radius for badges.
+$badge__radius: $global-radius !default;
+$badge--round__radius: rem-calc(100);
+
+// Set the badge text
+$badge__font-size: rem-calc(12) !default;
+$badge__font-color-alt: $md-white-100 !default;
+$badge__font-color: $md-white-100 !default;
+$badge__font-weight: $font-weight-normal !default;
+$badge__font-family: $brand-font-regular !default;
+$badge__font-line-height: rem-calc(16) !default;
+$badge__font-size__round: rem-calc(12) !default;
+
+// Blue badge colors
+$badge--blue__background-color: $md-theme-50 !default;
+
+// Mint badge colors
+$badge--mint__background-color: $md-mint-50 !default;
+
+// Green badge colors
+$badge--green__background-color: $md-green-50 !default;
+
+// Yellow badge colors
+$badge--yellow__background-color: $md-yellow-50 !default;
+
+// Red badge colors
+$badge--red__background-color: $md-red-50 !default;
+
+// Orange badge colors
+$badge--orange__background-color: $md-orange-50 !default;
+
+// Purple badge colors
+$badge--purple__background-color: $md-purple-50 !default;
+
+// Cyan badge colors
+$badge--cyan__background-color: $md-cyan-50 !default;
+
+// Grey badge colors
+$badge--gray__background-color: $md-gray-50 !default;
+
+// Blue pastel badge colors
+$badge--blue-pastel__background-color: $md-theme-10 !default;
+$badge--blue-pastel__font-color: $md-theme-50 !default;
+
+// Mint badge colors
+$badge--mint-pastel__background-color: $md-mint-10 !default;
+$badge--mint-pastel__font-color: $md-mint-50 !default;
+
+// Green pastel badge colors
+$badge--green-pastel__background-color: $md-green-10 !default;
+$badge--green-pastel__font-color: $md-green-50 !default;
+
+// Yellow pastel badge colors
+$badge--yellow-pastel__background-color: $md-yellow-10 !default;
+$badge--yellow-pastel__font-color: $md-yellow-50 !default;
+
+// Red pastel badge colors
+$badge--red-pastel__background-color: $md-red-10 !default;
+$badge--red-pastel__font-color: $md-red-60 !default;
+
+// Gray pastel badge colors
+$badge--gray-pastel__background-color: $md-gray-20 !default;
+$badge--gray-pastel__font-color: $md-gray-70 !default;