@momentum-ui/web-components 2.5.7 → 2.6.0

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

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

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

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-@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";
-