@momentum-ui/web-components 2.14.11 → 2.14.13

package/src/components/progress-bar/ProgressBar.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 "@/components/progress-bar/ProgressBar";
+import { ThemeNameValues } from "@/components/theme/Theme";
+import { Args } from "@storybook/web-components";
+import { html } from "lit-element";
+
+export const ProgressBar = (args: Args) => {
+  return html`
+    <md-theme class="theme-toggle" id="progress-bar" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+      <md-progress-bar
+        .value=${args.value}
+        .type=${args.type}
+        label="${args.label}"
+        .color=${args.color}
+        ?dynamic=${args.dynamic}
+        .displayFormat=${args.format}
+      >
+      </md-progress-bar>
+    </md-theme>
+  `;
+};
+
+export default {
+  title: "Components/Progress Bar",
+  component: "md-progress-bar",
+  argTypes: {
+    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
+    darkTheme: { control: "boolean", defaultValue: false },
+    label: { control: "text", defaultValue: "Test Progress Bar" },
+    color: { control: "text", defaultValue: "blue" },
+    dynamic: { control: "boolean", defaultValue: false },
+    format: { control: "select", options: ["none", "percentage", "fraction"], defaultValue: "none" },
+    type: { control: "select", options: ["determinate", "indeterminate"], defaultValue: "determinate" },
+    value: { control: "number", defaultValue: 25 }
+  },
+  parameters: {
+    a11y: {
+      element: "md-modal"
+    }
+  }
+};

package/src/components/progress-bar/ProgressBar.test.ts

@@ -0,0 +1,120 @@
+import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
+import "./ProgressBar";
+import { ProgressBar } from "./ProgressBar";
+
+const fixtureFactory = async (): Promise<ProgressBar.ELEMENT> => {
+  return await fixture(html` <md-progress-bar label="test list" value="55"></md-progress-bar> `);
+};
+
+describe("ProgressBar", () => {
+  afterEach(fixtureCleanup);
+
+  test("should render Progress Bar Component", async () => {
+    const element = await fixture(`<md-progress-bar></md-progress-bar>`);
+    expect(element).not.toBeNull();
+  });
+
+  test("should display correct Progress Bar color", async () => {
+    const element: ProgressBar.ELEMENT = await fixtureFactory();
+    element.color = "red";
+    await elementUpdated(element);
+
+    const el = element?.shadowRoot?.querySelector("span.meter");
+    expect(el?.getAttribute("style")).toMatch("background: red");
+  });
+
+  test("shouldn't display any displayFormat", async () => {
+    const element: ProgressBar.ELEMENT = await fixtureFactory();
+    element.displayFormat = "none";
+    await elementUpdated(element);
+
+    const elLabel = element?.shadowRoot?.querySelector("span.progressbar-progress");
+    expect(elLabel?.innerHTML).toMatch("");
+  });
+
+  test("should display correct displayFormat as fraction", async () => {
+    const element: ProgressBar.ELEMENT = await fixture(html`
+      <md-progress-bar label="test list" value="55" type="determinate"></md-progress-bar>
+    `);
+    element.displayFormat = "fraction";
+    await elementUpdated(element);
+
+    const elLabel = element?.shadowRoot?.querySelector("span.progressbar-progress");
+    expect(elLabel?.innerHTML).toMatch("55 / 100");
+  });
+
+  test("should display correct displayFormat", async () => {
+    const element: ProgressBar.ELEMENT = await fixture(html`
+      <md-progress-bar label="test list" type="determinate"></md-progress-bar>
+    `);
+    element.value = 20;
+    element.dynamic = true;
+    await elementUpdated(element);
+
+    const el = element?.shadowRoot?.querySelector("span.meter");
+    expect(el?.getAttribute("style")).toMatch("background: success");
+
+    element.value = 45;
+    await elementUpdated(element);
+
+    expect(el?.getAttribute("style")).toMatch("width: 45%; background: info");
+
+    element.value = 70;
+    await elementUpdated(element);
+
+    expect(el?.getAttribute("style")).toMatch("width: 70%; background: warning");
+
+    element.value = 80;
+    await elementUpdated(element);
+
+    expect(el?.getAttribute("style")).toMatch("width: 80%; background: danger");
+  });
+
+  test("dynamic get color", async () => {
+    const element: ProgressBar.ELEMENT = await fixture(html` <md-progress-bar label="test list"></md-progress-bar> `);
+
+    element.dynamic = true;
+
+    element.valueFraction = 20;
+    await elementUpdated(element);
+    expect(element.getColor()).toMatch("success");
+
+    element.valueFraction = 45;
+    await elementUpdated(element);
+    expect(element.getColor()).toMatch("info");
+
+    element.valueFraction = 70;
+    await elementUpdated(element);
+    expect(element.getColor()).toMatch("warning");
+
+    element.valueFraction = 80;
+    await elementUpdated(element);
+    expect(element.getColor()).toMatch("danger");
+  });
+
+  test("adjusted value", async () => {
+    const element: ProgressBar.ELEMENT = await fixture(html`
+      <md-progress-bar label="test list" type="determinate"></md-progress-bar>
+    `);
+
+    element.min = 0;
+    element.max = 100;
+    element.value = 25;
+    await elementUpdated(element);
+
+    expect(element.adjustedValue).toEqual(25);
+    expect(element.valueFraction).toEqual(25);
+
+    element.value = 105;
+    await elementUpdated(element);
+    expect(element.adjustedValue).toEqual(100);
+    expect(element.valueFraction).toEqual(100);
+
+    element.value = 0;
+    element.max = 0;
+    const displayFormat = element.getDisplayFormat();
+    // This scenario explicitly tests the `|| 0` fallback
+    expect(element.valueFraction).toBe(0);
+    expect(displayFormat).toBe("0%");
+  });
+});

package/src/components/progress-bar/ProgressBar.ts

@@ -0,0 +1,112 @@
+/**
+ * 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 { classMap } from "lit-html/directives/class-map";
+import styles from "./scss/module.scss";
+
+export namespace ProgressBar {
+  export type BarFormat = "none" | "fraction" | "percentage";
+  export type BarType = "determinate" | "indeterminate";
+
+  @customElementWithCheck("md-progress-bar")
+  export class ELEMENT extends LitElement {
+    @property({ type: Boolean }) dynamic = false;
+
+    @property({ type: String }) color = "";
+    @property({ type: String }) label = "";
+    @property({ type: String }) displayFormat: ProgressBar.BarFormat = "percentage";
+    @property({ type: String }) type: ProgressBar.BarType = "indeterminate";
+
+    @property({ type: Number }) min = 0;
+    @property({ type: Number }) max = 100;
+    @property({ type: Number }) value = 25;
+    @property({ type: Number }) adjustedValue = 0;
+    @property({ type: Number }) valueFraction = 0;
+    @property({ type: String }) meterWidth = "100";
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.requestUpdate("value");
+    }
+
+    getDisplayFormat = () => {
+      if (this.type === "indeterminate") {
+        this.value = 100;
+        return null;
+      }
+      this.adjustedValue = this.max - this.value < 0 ? this.max : this.value;
+      this.valueFraction = (this.adjustedValue / this.max) * 100 || 0;
+      this.meterWidth = this.valueFraction.toFixed(0) + "%";
+
+      if (this.displayFormat === "none") {
+        return null;
+      } else if (this.displayFormat === "percentage") {
+        return this.meterWidth;
+      }
+
+      return `${this.adjustedValue} / ${this.max}`;
+    };
+
+    getColor = () => {
+      if (this.color) {
+        return this.color;
+      } else if (this.dynamic) {
+        if (this.valueFraction < 25) {
+          return "success";
+        } else if (this.valueFraction < 50) {
+          return "info";
+        } else if (this.valueFraction < 75) {
+          return "warning";
+        }
+
+        return "danger";
+      }
+    };
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    render() {
+      const classNamesInfo = {
+        [`progress--${this.type}`]: this.type,
+        [`progress--${this.color}`]: this.color
+      };
+      return html`
+        <span>
+          <div class="progressbar-info" data-key="${this.min}">
+            <span class="progressbar-label">${this.label}</span>
+            <span class="progressbar-progress">${this.getDisplayFormat()}</span>
+          </div>
+          <div class="progress ${classMap(classNamesInfo)}" data-key="${this.max}">
+            <span
+              class="meter"
+              role="progressbar"
+              aria-labelledby="progressbar"
+              aria-valuenow=${this.adjustedValue}
+              aria-valuemin=${this.min}
+              aria-valuemax=${this.max}
+              aria-valuetext=${this.meterWidth}
+              style="${`width: ` + this.meterWidth + `; background: ` + this.getColor()}"
+            >
+            </span>
+          </div>
+        </span>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-progress-bar": ProgressBar.ELEMENT;
+  }
+}

package/src/components/progress-bar/scss/mixins.scss

@@ -0,0 +1,49 @@
+@mixin progress-container {
+  background-color: $progress-bg;
+  height: $progress-bar-height;
+  margin-bottom: $progress-bar-margin-bottom;
+  overflow: hidden;
+  padding: $progress-bar-pad;
+  border-radius: $progress-bar-border-radius;
+}
+
+@mixin progress-meter($bg: $progress-meter-color) {
+  background: $bg;
+  display: block;
+  height: 100%;
+}
+
+/* Attachment Progress bar*/
+.progress-bar {
+  background-color: var(--border-color);
+  border-radius: var(--border-radius-small) var(--border-radius-small) 0;
+  box-sizing: border-box;
+  height: 4px;
+  margin-bottom: -4px;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.progress-bar-value {
+  animation: indeterminateAnimation 1s infinite linear;
+  background-color: var(--link-color);
+  border-radius: var(--border-radius-small) var(--border-radius-small) 0;
+  height: 100%;
+  transform-origin: 0% 50%;
+  width: 100%;
+}
+
+@keyframes indeterminateAnimation {
+  0% {
+    transform: translateX(0) scaleX(0);
+  }
+
+  40% {
+    transform: translateX(0) scaleX(0.4);
+  }
+
+  100% {
+    transform: translateX(100%) scaleX(0.5);
+  }
+}

package/src/components/progress-bar/scss/module.scss

@@ -0,0 +1,10 @@
+@import "@/wc_scss/tools/functions/core";
+
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/settings/rem";
+@import "@/wc_scss/settings/core";
+@import "@/wc_scss/typography/settings";
+
+@import "settings";
+@import "mixins";
+@import "progress";

package/src/components/progress-bar/scss/progress.scss

@@ -0,0 +1,77 @@
+/** @component progress */
+
+@include exports("md-progress-bar") {
+  .progressbar-label {
+    text-align: left;
+  }
+
+  .progressbar-progress {
+    float: right;
+  }
+
+  .progressbar-label,
+  .progressbar-progress {
+    color: var(--progress-bar-label-text-color, $md-black-100);
+    font-family: $brand-font-regular;
+    font-size: $progress-label-font-size;
+  }
+
+  .progress {
+    @include progress-container;
+
+    .meter {
+      @include progress-meter;
+    }
+
+    &--indeterminate .meter {
+      animation: indeterminateAnimation 1s infinite linear;
+      transform-origin: 0% 50%;
+      width: 100%;
+    }
+
+    @keyframes indeterminateAnimation {
+      0% {
+        transform: translateX(0) scaleX(0);
+      }
+
+      40% {
+        transform: translateX(0) scaleX(0.4);
+      }
+
+      100% {
+        transform: translateX(100%) scaleX(0.5);
+      }
+    }
+
+    &.secondary .meter {
+      @include progress-meter($bg: $progress-meter-secondary-color);
+    }
+
+    &.success .meter {
+      @include progress-meter($bg: $progress-meter-success-color);
+    }
+
+    &.danger .meter {
+      @include progress-meter($bg: $progress-meter-alert-color);
+    }
+
+    &.warning .meter {
+      @include progress-meter($bg: $progress-meter-warning-color);
+    }
+
+    &.info .meter {
+      @include progress-meter($bg: $progress-meter-info-color);
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .progress {
+    background-color: HighlightText;
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+    .meter {
+      background-color: Highlight;
+    }
+  }
+}

package/src/components/progress-bar/scss/settings.scss

@@ -0,0 +1,28 @@
+$progress-bar-height: rem-calc(4) !default;
+$progress-bar-color: $md-gray-10;
+
+$progress-bar-border-color: scale-color($md-white-100,
+$lightness: 20%) !default;
+$progress-bar-border-size: 1px !default;
+$progress-bar-border-style: solid !default;
+$progress-bar-border-radius: var(--progress-bar-border-radius, $global-radius) !default;
+
+$progress-label-font-size: rem-calc(11) !default;
+$progress-bar-pad: 0 !default;
+$progress-bar-margin-bottom: rem-calc(10) !default;
+
+$progress-meter-color: $md-theme-50 !default;
+$progress-meter-secondary-color: $md-gray-70 !default;
+$progress-meter-success-color: $md-green-50 !default;
+$progress-meter-alert-color: $md-red-50 !default;
+$progress-meter-warning-color: $md-yellow-50;
+$progress-meter-info-color: $md-mint-50;
+
+$progress-bg: var(--progress-bar-track-bg-color, $md-gray-20);
+$progress-bar-color: $md-white-100;
+$progress-border-radius: var(--progress-bar-border-radius, $border-radius-base);
+$progress-bar-bg: var(--progress-bar-indicator-in-progress, $md-theme-50);
+$progress-bar-success-bg: var(--progress-bar-indicator-complete ,$md-green-50);
+$progress-bar-warning-bg: var(--progress-bar-indicator-caution, $md-yellow-50);
+$progress-bar-danger-bg: var(--progress-bar-indicator-failed, $md-red-50);
+$progress-bar-info-bg: $md-mint-50;

package/src/components/progress-bar/tokens/lm-progress-bar-tokens.js

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const progressbar = {
+  prefix: "lm",
+  component: "progress-bar",
+  track: {
+    "bg-color": {
+      light: colors.gray[20].name,
+      dark: colors.gray[20].name
+    }
+  },
+  indicator: {
+    "in-progress": {
+      light: colors.theme[50].name,
+      dark: colors.theme[50].name
+    }
+  },
+  label: {
+    "text-color": {
+      light: colors.black[100].name,
+      dark: colors.white[100].name
+    }
+  }
+};
+
+module.exports = progressbar;

package/src/components/progress-bar/tokens/md-progress-bar-tokens.js

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const progressbar = {
+  prefix: "md",
+  component: "progress-bar",
+  track: {
+    "bg-color": {
+      light: colors.gray[20].name,
+      dark: colors.gray[20].name
+    }
+  },
+  indicator: {
+    "in-progress": {
+      light: colors.theme[50].name,
+      dark: colors.theme[50].name
+    }
+  },
+  label: {
+    "text-color": {
+      light: colors.black[100].name,
+      dark: colors.white[100].name
+    }
+  }
+};
+
+module.exports = progressbar;

package/src/components/progress-bar/tokens/mdv2-progress-bar-tokens.js

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+
+const progressbar = {
+  prefix: "mdv2",
+  component: "progress-bar",
+  track: {
+    "bg-color": {
+      common: "$mds-color-theme-control-indicator-inactive-normal"
+    }
+  },
+  indicator: {
+    "in-progress": {
+      common: "$mds-color-theme-control-active-normal"
+    },
+    failed: {
+      common: "$mds-color-theme-indicator-attention"
+    },
+    complete: {
+      common: "$mds-color-theme-indicator-stable"
+    },
+    caution: {
+      common: "$mds-color-theme-indicator-caution"
+    }
+  },
+  "border-radius": {
+    common: "12px"
+  },
+  label: {
+    "text-color": {
+      common: "$mds-color-theme-text-primary-normal"
+    }
+  }
+};
+
+module.exports = progressbar;

package/src/components/radio/Radio.test.ts

@@ -0,0 +1,66 @@
+import { defineCE, elementUpdated, fixture, fixtureCleanup, fixtureSync, oneEvent } from "@open-wc/testing-helpers";
+import { PropertyValues } from "lit-element";
+import { Radio } from "./Radio";
+
+describe("Radio", () => {
+  afterEach(fixtureCleanup);
+  test("should set label attribute", async () => {
+    const element = await fixture<Radio.ELEMENT>(`<md-radio value="linting">Linting</md-radio>`);
+    expect(element.value).toEqual("linting");
+  });
+  test("should set tabindex attribute", async () => {
+    const element = await fixture<Radio.ELEMENT>(`<md-radio>Linting</md-radio>`);
+    expect(element.getAttribute("tabindex")).toEqual("-1");
+  });
+  test("should add correct aria attribute", async () => {
+    const element = await fixture<Radio.ELEMENT>(`<md-radio disabled>Linting</md-radio>`);
+    expect(element.disabled).toBeTruthy();
+    expect(element.getAttribute("aria-disabled")).toEqual("true");
+    expect(element.getAttribute("role")).toEqual("radio");
+  });
+
+  test("should change tabindex when disabled attribute is set", async () => {
+    const element = await fixture<Radio.ELEMENT>(`<md-radio disabled>Linting</md-radio>`);
+
+    expect(element.tabIndex).toEqual(-1);
+    expect(element.getAttribute("tabindex")).toEqual("-1");
+
+    element.disabled = false;
+    await elementUpdated(element);
+
+    expect(element.tabIndex).toEqual(0);
+    expect(element.getAttribute("tabindex")).toEqual("0");
+  });
+
+  test("should handle checked attribute", async () => {
+    const element = await fixture<Radio.ELEMENT>(`<md-radio>Linting</md-radio>`);
+    element.checked = false;
+    await elementUpdated(element);
+    expect(element.getAttribute("aria-checked")).toEqual("false");
+    element.checked = true;
+    await elementUpdated(element);
+    expect(element.checked).toBeTruthy();
+    expect(element.getAttribute("aria-checked")).toEqual("true");
+  });
+
+  test("handle firstUpdated lifecycle hook", async () => {
+    const tag = defineCE(
+      class extends Radio.ELEMENT {
+        protected firstUpdated(changedProperties: PropertyValues) {
+          super.firstUpdated(changedProperties);
+          this.dispatchEvent(new CustomEvent("first-updated"));
+        }
+      }
+    );
+    const element = fixtureSync(`<${tag}></${tag}>`);
+    const event = await oneEvent(element, "first-updated");
+    expect(event).toBeDefined();
+  });
+
+  test("should set aria-label if label is set", async () => {
+    const labelValue = "Test Label";
+    const element = await fixture(`<md-radio label="${labelValue}"></md-radio>`);
+    await elementUpdated(element);
+    expect(element.getAttribute("aria-label")).toEqual(labelValue);
+  });
+});