@momentum-ui/web-components 2.5.4 → 2.5.7

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,66 @@
+/** @component progress */
+
+@include exports("md-progress-bar") {
+  .progressbar-label {
+    text-align: left;
+  }
+
+  .progressbar-progress {
+    float: right;
+  }
+
+  .progressbar-label,
+  .progressbar-progress {
+    color: $md-black-100;
+    font-family: $font-family-sans-serif;
+    font-size: rem-calc(11);
+  }
+
+  .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);
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+$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: $global-radius !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: $md-gray-20;
+$progress-bar-color: $md-white-100;
+$progress-border-radius: $border-radius-base;
+$progress-bar-bg: $md-theme-50;
+$progress-bar-success-bg: $md-green-50;
+$progress-bar-warning-bg: $md-yellow-50;
+$progress-bar-danger-bg: $md-red-50;
+$progress-bar-info-bg: $md-mint-50;

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

@@ -0,0 +1,60 @@
+import "./Radio";
+import { Radio } from "./Radio";
+import { defineCE, elementUpdated, fixture, fixtureCleanup, fixtureSync, oneEvent } from "@open-wc/testing-helpers";
+import { PropertyValues } from "lit-element";
+
+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();
+  });
+});

package/src/components/radio/Radio.ts

@@ -0,0 +1,93 @@
+/**
+ * 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 { FocusMixin } from "@/mixins";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, LitElement, property, PropertyValues } from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+import styles from "./scss/module.scss";
+
+export namespace Radio {
+  @customElementWithCheck("md-radio")
+  export class ELEMENT extends FocusMixin(LitElement) {
+    @property({ type: Number, reflect: true }) tabIndex = -1;
+    @property({ type: String }) label = "";
+    @property({ type: String }) value = "";
+    @property({ type: String }) ariaLabel = "";
+    @property({ type: Boolean, reflect: true }) autofocus = false;
+
+    private _disabled = false;
+    @property({ type: Boolean, reflect: true })
+    get disabled() {
+      return this._disabled;
+    }
+    set disabled(value: boolean) {
+      const oldValue = this._disabled;
+      this._disabled = value;
+      this.setAttribute("aria-disabled", `${value}`);
+      if (value) {
+        this.tabIndex = -1;
+      } else {
+        this.tabIndex = 0;
+      }
+      this.requestUpdate("disabled", oldValue);
+    }
+
+    private _checked = false;
+    @property({ type: Boolean, attribute: false })
+    get checked() {
+      return this._checked;
+    }
+    set checked(value: boolean) {
+      const oldValue = this._checked;
+      this._checked = value;
+      this.setAttribute("aria-checked", `${value}`);
+      this.requestUpdate("checked", oldValue);
+    }
+
+    protected firstUpdated(changedProperties: PropertyValues) {
+      super.firstUpdated(changedProperties);
+
+      this.setAttribute("role", "radio");
+
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      }
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    render() {
+      return html`
+        <div class="md-radio-wrapper">
+          <input
+            class="md-radio-input"
+            type="radio"
+            aria-label=${ifDefined(this.ariaLabel.length ? this.ariaLabel : undefined)}
+            .value=${this.value}
+            ?checked=${this.checked}
+            ?autofocus=${this.autofocus}
+            ?disabled=${this.disabled}
+            aria-hidden="true"
+            id="radio-label"
+          />
+          <label for="radio-label" class="md-radio-label" part="radio-label"><slot></slot></label>
+        </div>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-radio": Radio.ELEMENT;
+  }
+}

package/src/components/radio/RadioGroup.stories.ts

@@ -0,0 +1,45 @@
+/**
+ * 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/radio/Radio";
+import "@/components/radio/RadioGroup";
+import "@/components/theme/Theme";
+import { withA11y } from "@storybook/addon-a11y";
+import { select, boolean, text, withKnobs, number } from "@storybook/addon-knobs";
+import { html } from "lit-element";
+
+export default {
+  title: "Components/Radio",
+  component: "md-radio",
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    a11y: {
+      element: "md-radiogroup"
+    }
+  }
+};
+
+export const Radio = () => {
+  const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
+  const options = { Vertical: "vertical", Horizontal: "horizontal"};
+  const alignment = select("Orientation", options, "horizontal");
+  const check = number("Precheck", 1);
+  const disabled = boolean("Disabled", false);
+
+  return html`
+    <md-theme class="theme-toggle" id="radio" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+      <md-radiogroup group-label="group_process" .alignment=${alignment as any} .checked="${check}">
+        <md-radio slot="radio" value="developing">Developing</md-radio>
+        <md-radio slot="radio" value="linting" .disabled=${disabled}>Linting</md-radio>
+        <md-radio slot="radio" value="testing">Testing</md-radio>
+        <md-radio slot="radio" value="building" .disabled=${disabled}>Building</md-radio>
+      </md-radiogroup>
+    </md-theme>
+  `;
+};

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

@@ -0,0 +1,187 @@
+import "./Radio";
+import { Radio } from "./Radio";
+import "./RadioGroup";
+import { RadioGroup } from "./RadioGroup";
+import { Key } from "@/constants";
+import { defineCE, elementUpdated, fixture, fixtureCleanup, fixtureSync, oneEvent } from "@open-wc/testing-helpers";
+import { html, LitElement, PropertyValues } from "lit-element";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyConstructor<A = LitElement> = new (...args: any[]) => A;
+
+describe("RadioGroup", () => {
+  let element: RadioGroup.ELEMENT;
+  let radioButtons: Radio.ELEMENT[];
+  const keyEvent = (code: string) =>
+    new KeyboardEvent("keydown", {
+      code
+    });
+
+  beforeEach(async () => {
+    element = await fixture<RadioGroup.ELEMENT>(
+      html`
+        <md-radiogroup group-label="recommendations">
+          <md-radio slot="radio" value="developing">Developing</md-radio>
+          <md-radio slot="radio" value="linting">Linting</md-radio>
+          <md-radio slot="radio" value="testing">Testing</md-radio>
+          <md-radio slot="radio" value="building">Building</md-radio>
+        </md-radiogroup>
+      `
+    );
+    radioButtons = element.slotted as Radio.ELEMENT[];
+  });
+  afterEach(fixtureCleanup);
+  test("should set correct attribute", async () => {
+    expect(element.getAttribute("group-label")).toEqual("recommendations");
+    expect(element.getAttribute("role")).toEqual("radiogroup");
+    expect(element.getAttribute("aria-label")).toEqual("recommendations");
+    expect(element.getAttribute("alignment")).toEqual("vertical");
+
+    element.alignment = "horizontal";
+    await elementUpdated(element);
+
+    expect(element.getAttribute("alignment")).toEqual("horizontal");
+  });
+
+  test("should correct handle lifecycle callbacks", async () => {
+    const mixin = (superclass: AnyConstructor) =>
+      class extends superclass {
+        protected firstUpdated(changedProperties: PropertyValues) {
+          super.firstUpdated(changedProperties);
+          this.dispatchEvent(new CustomEvent("first-updated"));
+        }
+
+        connectedCallback() {
+          super.connectedCallback();
+          this.dispatchEvent(new CustomEvent("connected-callback"));
+        }
+
+        disconnectedCallback() {
+          super.disconnectedCallback();
+          this.dispatchEvent(new CustomEvent("disconnected-callback"));
+        }
+      };
+
+    const tag = defineCE(class extends mixin(RadioGroup.ELEMENT) {});
+    const firstElement = fixtureSync<RadioGroup.ELEMENT>(`<${tag}></${tag}>`);
+    const firstEvent = await oneEvent(firstElement, "first-updated");
+    expect(firstEvent).toBeDefined();
+
+    firstElement.parentElement!.removeChild(firstElement);
+    setTimeout(() => firstElement.disconnectedCallback());
+    const thirdEvent = await oneEvent(firstElement, "disconnected-callback");
+    expect(thirdEvent).toBeDefined();
+
+    fixtureCleanup();
+
+    const secondElement = document.createElement(`${tag}`) as RadioGroup.ELEMENT;
+    setTimeout(() => secondElement.connectedCallback());
+    const secondEvent = await oneEvent(secondElement, "connected-callback");
+    expect(secondEvent).toBeDefined();
+  });
+
+  test("should handle click event", async () => {
+    radioButtons[0].click();
+    await elementUpdated(element);
+
+    expect(element.selected).toEqual(0);
+
+    radioButtons[0].click();
+    await elementUpdated(element);
+
+    expect(element.selected).toEqual(0);
+
+    radioButtons[2].disabled = true;
+    await elementUpdated(element);
+
+    radioButtons[2].click();
+    await elementUpdated(element);
+
+    expect(element.selected).toEqual(0);
+  });
+
+  test("should set focus on first radio if checked is not provided", async () => {
+    expect(element.checked).toEqual(-1);
+
+    element.dispatchEvent(keyEvent(Key.Tab));
+    expect(document.activeElement).toEqual(radioButtons[0]);
+
+    element.dispatchEvent(keyEvent(Key.Space));
+    await elementUpdated(element);
+    expect(element.selected).toEqual(0);
+    expect(radioButtons[0].checked).toBeTruthy();
+  });
+
+  test("should handle keydown event", async () => {
+    radioButtons[0].click();
+    await elementUpdated(element);
+
+    element.dispatchEvent(keyEvent("KeyA"));
+    await elementUpdated(element);
+    expect(element.selected).toEqual(0);
+    expect(radioButtons[0].checked).toBeTruthy();
+
+    element.dispatchEvent(keyEvent(Key.ArrowDown));
+    await elementUpdated(element);
+    expect(element.selected).toEqual(1);
+    expect(radioButtons[0].checked).toBeFalsy();
+    expect(radioButtons[1].checked).toBeTruthy();
+
+    element.dispatchEvent(keyEvent(Key.ArrowRight));
+    await elementUpdated(element);
+    expect(element.selected).toEqual(2);
+    expect(radioButtons[1].checked).toBeFalsy();
+    expect(radioButtons[2].checked).toBeTruthy();
+
+    element.dispatchEvent(keyEvent(Key.ArrowRight));
+    await elementUpdated(element);
+    expect(element.selected).toEqual(3);
+    expect(radioButtons[2].checked).toBeFalsy();
+    expect(radioButtons[3].checked).toBeTruthy();
+
+    element.dispatchEvent(keyEvent(Key.ArrowRight));
+    await elementUpdated(element);
+    expect(element.selected).toEqual(0);
+    expect(radioButtons[3].checked).toBeFalsy();
+    expect(radioButtons[0].checked).toBeTruthy();
+
+    element.dispatchEvent(keyEvent(Key.ArrowUp));
+    await elementUpdated(element);
+    expect(element.selected).toEqual(3);
+    expect(radioButtons[0].checked).toBeFalsy();
+    expect(radioButtons[3].checked).toBeTruthy();
+
+    element.dispatchEvent(keyEvent(Key.ArrowLeft));
+    await elementUpdated(element);
+    expect(element.selected).toEqual(2);
+    expect(radioButtons[3].checked).toBeFalsy();
+    expect(radioButtons[2].checked).toBeTruthy();
+  });
+
+  test("set first checked radio if checked property index provided", async () => {
+    const el = await fixture<RadioGroup.ELEMENT>(
+      html`
+        <md-radiogroup group-label="recommendations" checked="2">
+          <md-radio slot="radio" value="developing">Developing</md-radio>
+          <md-radio slot="radio" value="linting">Linting</md-radio>
+          <md-radio slot="radio" value="testing">Testing</md-radio>
+          <md-radio slot="radio" value="building">Building</md-radio>
+        </md-radiogroup>
+      `
+    );
+    expect(el.selected).toEqual(2);
+  });
+  test("should dispatch event when radio change", async () => {
+    const clickEvent = new MouseEvent("click");
+
+    setTimeout(() => {
+      radioButtons[0].click();
+      element.handleClick(clickEvent);
+    });
+    const { detail } = await oneEvent(element, "radio-change");
+
+    await elementUpdated(element);
+
+    expect(detail).toBeDefined();
+  });
+});

package/src/components/radio/RadioGroup.ts

@@ -0,0 +1,175 @@
+/**
+ * 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 { Radio } from "./Radio";
+import { Key } from "@/constants";
+import { RovingTabIndexMixin } from "@/mixins";
+import reset from "@/wc_scss/reset.scss";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { html, LitElement, property, PropertyValues, query } from "lit-element";
+import styles from "./scss/module.scss";
+
+export namespace RadioGroup {
+  @customElementWithCheck("md-radiogroup")
+  export class ELEMENT extends RovingTabIndexMixin(LitElement) {
+    @property({ type: String, attribute: "group-label" }) label = "group";
+    @property({ type: Number, reflect: true }) checked = -1;
+    @property({ type: String, reflect: true }) alignment: "horizontal" | "vertical" = "vertical";
+
+    @query("slot[name='radio']") radioSlot?: HTMLSlotElement;
+
+    protected firstUpdated(changedProperties: PropertyValues) {
+      super.firstUpdated(changedProperties);
+
+      this.setAttribute("role", "radiogroup");
+      this.setAttribute("aria-label", this.label);
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("slotted")) {
+        this.setFirstChecked();
+      }
+    }
+
+    get selectedRadioValue() {
+      return (this.slotted[this.selected] as Radio.ELEMENT).value;
+    }
+
+    private notifySelectedChange() {
+      this.dispatchEvent(
+        new CustomEvent("radio-change", {
+          detail: {
+            selected: this.selectedRadioValue
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("keydown", this.handleKeyDown);
+      this.addEventListener("click", this.handleClick);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener("keydown", this.handleKeyDown);
+      this.removeEventListener("click", this.handleClick);
+    }
+
+    private setFirstChecked() {
+      if (this.checked !== -1) {
+        this.selected = this.checked;
+        this.setChecked(this.checked);
+      }
+    }
+
+    private findRadioIndex(event: MouseEvent | KeyboardEvent) {
+      const eventPath = event.composedPath();
+      return this.slotted.findIndex(radio => eventPath.includes(radio));
+    }
+
+    private findCheckedRadioIndex() {
+      return this.slotted.findIndex(radio => (radio as Radio.ELEMENT).checked);
+    }
+
+    private setChecked(newIndex: number) {
+      const oldIndex = this.findCheckedRadioIndex();
+      if (oldIndex !== -1 && oldIndex !== newIndex) {
+        (this.slotted[oldIndex] as Radio.ELEMENT).checked = false;
+      }
+      (this.slotted[newIndex] as Radio.ELEMENT).checked = true;
+    }
+
+    private switchRadioOnArrowPress(startIndex: number, increment = 1) {
+      const newIndex = super.getAvailableSelectedIndex!(startIndex, increment);
+      if (newIndex !== -1) {
+        this.selected = newIndex;
+        this.setChecked(newIndex);
+        this.notifySelectedChange();
+      }
+    }
+
+    private isRadioDisabled(index: number) {
+      return (this.slotted[index] as Radio.ELEMENT).disabled;
+    }
+
+    handleClick(event: MouseEvent) {
+      const newIndex = this.findRadioIndex(event);
+      if (newIndex !== -1) {
+        if (!this.isRadioDisabled(newIndex)) {
+          this.selected = newIndex;
+          this.setChecked(newIndex);
+          this.notifySelectedChange();
+        }
+      }
+    }
+
+    handleKeyDown(event: KeyboardEvent) {
+      const { code } = event;
+      switch (code) {
+        case Key.Enter:
+        case Key.Space:
+          {
+            if (!this.isRadioDisabled(this.selected)) {
+              this.setChecked(this.selected);
+              this.notifySelectedChange();
+            }
+          }
+          break;
+        case Key.ArrowUp:
+        case Key.ArrowLeft:
+          {
+            if (this.selected === 0) {
+              this.switchRadioOnArrowPress(this.slotted.length - 1, -1);
+            } else {
+              this.switchRadioOnArrowPress(this.selected - 1, -1);
+            }
+          }
+          break;
+        case Key.ArrowDown:
+        case Key.ArrowRight:
+          {
+            if (this.selected === this.slotted.length - 1) {
+              this.switchRadioOnArrowPress(0);
+            } else {
+              this.switchRadioOnArrowPress(this.selected + 1);
+            }
+          }
+          break;
+        default:
+          break;
+      }
+    }
+
+    get slotElement() {
+      return this.radioSlot;
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    render() {
+      return html`
+        <div>
+          <slot name="radio"></slot>
+        </div>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-radiogroup": RadioGroup.ELEMENT;
+  }
+}

package/src/components/radio/scss/mixins.scss

@@ -0,0 +1,7 @@
+@mixin text-dots {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  width: calc(100%);
+}

package/src/components/radio/scss/module.scss

@@ -0,0 +1,17 @@
+@import "@/wc_scss/path.scss";
+@import "@/wc_scss/tools/functions/core";
+
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/settings/core";
+@import "@/wc_scss/typography/settings";
+
+@import "@/wc_scss/tools/mixins/border-radius";
+@import "@/wc_scss/tools/mixins/focus";
+
+@import "./vars/lm-radio-settings";
+
+@import "./settings";
+@import "./mixins";
+@import "./radio";
+@import "./radiogroup";
+