@momentum-ui/web-components 2.5.7 → 2.5.8

package/src/components/button/tokens/lm-button-tokens.js

@@ -1,292 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const button = {
-  prefix: "lm",
-  component: "button",
-  primary: {
-    "bg-color": {
-      light: colors.blue[60].name,
-      dark: colors.blue[60].name
-    },
-    "text-color": {
-      light: colors.gray["05"].name,
-      dark: colors.gray["05"].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.blue[70].name,
-        dark: colors.blue[70].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.blue[80].name,
-        dark: colors.blue[80].name
-      }
-    },
-    outline: {
-      color: {
-        light: colors.blue[70].name,
-        dark: colors.blue[40].name
-      },
-      "text-color": {
-        light: colors.blue[70].name,
-        dark: colors.blue[40].name
-      }
-    }
-  },
-  secondary: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[30].name,
-        dark: colors.gray[90].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[40].name,
-        dark: colors.gray[100].name
-      }
-    },
-    outline: {
-      color: {
-        light: colors.gray[70].name,
-        dark: colors.gray[40].name
-      },
-      "text-color": {
-        light: colors.gray[70].name,
-        dark: colors.gray[40].name
-      }
-    }
-  },
-  green: {
-    "bg-color": {
-      light: colors.green[60].name,
-      dark: colors.green[60].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.green[70].name,
-        dark: colors.green[70].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.green[80].name,
-        dark: colors.green[80].name
-      }
-    },
-    outline: {
-      color: {
-        light: colors.green[70].name,
-        dark: colors.green[40].name
-      },
-      "text-color": {
-        light: colors.green[70].name,
-        dark: colors.green[40].name
-      }
-    }
-  },
-  white: {
-    "bg-color": {
-      light: colors.white.default.name,
-      dark: colors.white.default.name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[90].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[95].name
-      }
-    },
-    outline: {
-      color: {
-        light: colors.gray[30].name,
-        dark: colors.gray[40].name
-      },
-      "text-color": {
-        light: colors.gray[70].name,
-        dark: colors.gray[40].name
-      }
-    }
-  },
-  "inverted-white": {
-    "bg-color": {
-      light: colors.gray[80].name,
-      dark: colors.white.default.name
-    },
-    "text-color": {
-      light: colors.white.default.name,
-      dark: colors.gray[100].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[90].name,
-        dark: colors.gray[10].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[95].name,
-        dark: colors.gray[20].name
-      }
-    },
-    outline: {
-      color: {
-        light: colors.gray[40].name,
-        dark: colors.gray[30].name
-      },
-      "text-color": {
-        light: colors.gray[40].name,
-        dark: colors.gray[70].name
-      }
-    }
-  },
-  gray: {
-    "bg-color": {
-      light: colors.gray[60].name,
-      dark: colors.gray[80].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[70].name,
-        dark: colors.gray[70].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[80].name,
-        dark: colors.gray[60].name
-      }
-    }
-  },
-  red: {
-    "bg-color": {
-      light: colors.red[60].name,
-      dark: colors.red[60].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.red[70].name,
-        dark: colors.red[70].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.red[80].name,
-        dark: colors.red[80].name
-      }
-    },
-    outline: {
-      color: {
-        light: colors.red[70].name,
-        dark: colors.red[40].name
-      },
-      "text-color": {
-        light: colors.red[70].name,
-        dark: colors.red[40].name
-      }
-    }
-  },
-  available: {
-    "bg-color": {
-      light: colors.green["05"].name,
-      dark: colors.green[90].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.green[10].name,
-        dark: colors.green[80].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.green[10].name,
-        dark: colors.green[80].name
-      }
-    }
-  },
-  unavailable: {
-    "bg-color": {
-      light: colors.red["05"].name,
-      dark: colors.red[90].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.red[10].name,
-        dark: colors.red[80].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.red[10].name,
-        dark: colors.red[80].name
-      }
-    }
-  },
-  idle: {
-    "bg-color": {
-      light: colors.gray["05"].name,
-      dark: colors.gray[90].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[80].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[80].name
-      }
-    }
-  },
-  disabled: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[90].name
-    },
-    "text-color": {
-      light: colors.gray[40].name,
-      dark: colors.gray[70].name
-    }
-  },
-  favorite: {
-    hover: {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[90].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[80].name
-      }
-    }
-  },
-  "focus-ring": {
-    color: {
-      light: colors.blue[60].name,
-      dark: colors.blue[40].name
-    }
-  }
-};
-
-module.exports = button;

package/src/components/button-group/ButtonGroup.stories.ts

@@ -1,41 +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/button-group/ButtonGroup";
-import "@/components/theme/Theme";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-
-export default {
-  title: "Components/Button Group",
-  component: "md-button-group",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    a11y: {
-      element: "md-button-group"
-    }
-  }
-};
-
-export const ButtonGroup = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const disabled = boolean("Disabled", false);
-
-  return html`
-    <md-theme class="theme-toggle" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-button-group ?disabled=${disabled}>
-        <button slot="button" type="button"><md-icon name="icon-text-table_16"></md-icon></button>
-        <button slot="button" type="button"><md-icon name="icon-analysis_16"></md-icon></button>
-        <button slot="button" type="button">Option A</button>
-        <button slot="button" type="button">Option B</button>
-      </md-button-group>
-    </md-theme>
-  `;
-};

package/src/components/button-group/ButtonGroup.test.ts

@@ -1,148 +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 { Key } from "@/constants";
-import { defineCE, elementUpdated, fixture, fixtureCleanup, fixtureSync, oneEvent } from "@open-wc/testing-helpers";
-import { html, LitElement, PropertyValues } from "lit-element";
-import "./ButtonGroup";
-import { ButtonGroup } from "./ButtonGroup";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnyConstructor<A = LitElement> = new (...args: any[]) => A;
-
-describe("ButtonGroup", () => {
-  let element: ButtonGroup.ELEMENT;
-
-  let buttons: HTMLButtonElement[];
-
-  const keyEvent = (code: string) =>
-    new KeyboardEvent("keydown", {
-      code
-    });
-
-  beforeEach(async () => {
-    element = await fixture<ButtonGroup.ELEMENT>(
-      html`
-        <md-button-group>
-          <button slot="button" type="button"><md-icon name="icon-text-table_16"></md-icon></button>
-          <button slot="button" type="button"><md-icon name="icon-analysis_16"></md-icon></button>
-          <button slot="button" type="button">Option A</button>
-          <button slot="button" type="button">Option B</button>
-        </md-button-group>
-      `
-    );
-
-    buttons = element.slotted as HTMLButtonElement[];
-  });
-  afterEach(fixtureCleanup);
-
-  test("should add correct aria attribute", async () => {
-    element.disabled = true;
-    await elementUpdated(element);
-
-    expect(element.disabled).toBeTruthy();
-    expect(element.getAttribute("aria-disabled")).toEqual("true");
-    expect(element.getAttribute("role")).toEqual("group");
-  });
-
-  test("should change tabindex when disabled attribute is set", async () => {
-    element.disabled = true;
-    await elementUpdated(element);
-
-    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 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(ButtonGroup.ELEMENT) {});
-    const firstElement = fixtureSync<ButtonGroup.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 ButtonGroup.ELEMENT;
-    setTimeout(() => secondElement.connectedCallback());
-    const secondEvent = await oneEvent(secondElement, "connected-callback");
-    expect(secondEvent).toBeDefined();
-  });
-
-  test("should handle click event", async () => {
-    buttons[0].click();
-    await elementUpdated(element);
-
-    expect(buttons[0].hasAttribute("selected")).toBeTruthy();
-
-    buttons[1].click();
-    await elementUpdated(element);
-
-    expect(buttons[1].hasAttribute("selected")).toBeTruthy();
-
-    buttons[2].disabled = true;
-    await elementUpdated(element);
-
-    buttons[2].click();
-    await elementUpdated(element);
-
-    expect(buttons[2].hasAttribute("selected")).toBeFalsy();
-  });
-
-  test("should handle keydown event", async () => {
-    buttons[0].click();
-    await elementUpdated(element);
-
-    element.dispatchEvent(keyEvent("KeyA"));
-    await elementUpdated(element);
-    expect(buttons[0].hasAttribute("selected")).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.ArrowRight));
-    await elementUpdated(element);
-    expect(buttons[1].hasAttribute("selected")).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.ArrowRight));
-    await elementUpdated(element);
-    expect(buttons[2].hasAttribute("selected")).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.ArrowRight));
-    await elementUpdated(element);
-    expect(buttons[3].hasAttribute("selected")).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.ArrowLeft));
-    await elementUpdated(element);
-    expect(buttons[2].hasAttribute("selected")).toBeTruthy();
-  });
-});

package/src/components/button-group/ButtonGroup.ts

@@ -1,219 +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 { Key } from "@/constants";
-import { customElementWithCheck, FocusMixin, SlottedMixin } from "@/mixins";
-import reset from "@/wc_scss/reset.scss";
-import { html, LitElement, property, PropertyValues, query } from "lit-element";
-import styles from "./scss/module.scss";
-
-type CustomHTMLButtonElement = HTMLButtonElement & { selected: boolean };
-
-export namespace ButtonGroup {
-  @customElementWithCheck("md-button-group")
-  export class ELEMENT extends SlottedMixin(FocusMixin(LitElement)) {
-    @property({ type: Number, reflect: true }) active = 0;
-    @property({ type: Number, reflect: true }) tabIndex = 0;
-    @query("slot[name='button']") buttonSlot?: HTMLSlotElement;
-
-    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);
-    }
-
-    get slotElement() {
-      return this.buttonSlot;
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    protected firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-
-      this.setAttribute("role", "group");
-    }
-
-    private setButtonTabIndex() {
-      this.slotted.forEach(button => ((button as CustomHTMLButtonElement).tabIndex = -1));
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (changedProperties.has("slotted")) {
-        this.setButtonTabIndex();
-        this.setFirstActive();
-      }
-    }
-
-    get selectedBtnValue() {
-      return (this.slotted[this.active] as CustomHTMLButtonElement).value;
-    }
-
-    private notifySelectedChange() {
-      this.dispatchEvent(
-        new CustomEvent("button-group-change", {
-          detail: {
-            selected: this.selectedBtnValue
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-      this.dispatchEvent(
-        new CustomEvent("focus-visible", {
-          composed: true,
-          bubbles: true
-        })
-      );
-    }
-
-    private setSelected(newIndex: number) {
-      const oldIndex = this.findSelectedBtnIndex();
-      if (oldIndex !== -1 && oldIndex !== newIndex) {
-        (this.slotted[oldIndex] as CustomHTMLButtonElement).toggleAttribute("selected", false);
-      }
-
-      (this.slotted[newIndex] as CustomHTMLButtonElement).toggleAttribute("selected", true);
-    }
-
-    private setFirstActive() {
-      const oldIndex = this.findSelectedBtnIndex();
-      if (oldIndex === -1) {
-        this.setSelected(this.active);
-      }
-    }
-
-    private findBtnIndex(event: MouseEvent | KeyboardEvent) {
-      const eventPath = event.composedPath();
-      return this.slotted.findIndex(slotElement => eventPath.includes(slotElement));
-    }
-
-    private findSelectedBtnIndex() {
-      return this.slotted.findIndex(slotElement => (slotElement as CustomHTMLButtonElement).hasAttribute("selected"));
-    }
-
-    private isBtnDisabled(index: number) {
-      return (this.slotted[index] as CustomHTMLButtonElement).disabled;
-    }
-
-    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 switchBtnOnArrowPress(startIndex: number, increment = 1) {
-      const newIndex = this.getAvailableSelectedIndex!(startIndex, increment);
-      if (newIndex !== -1) {
-        this.active = newIndex;
-        this.setSelected(newIndex);
-        this.notifySelectedChange();
-      }
-    }
-
-    private getAvailableSelectedIndex(index: number, increment = 1) {
-      const slottedLength = this.slotted.length;
-
-      for (let i = 0, j = index; i < slottedLength; i += 1, j += increment) {
-        if (j < 0) {
-          j = slottedLength - 1;
-        } else if (j >= slottedLength) {
-          j = 0;
-        }
-        const slotted = this.slotted[j];
-        if (this.isFocusable(slotted)) {
-          return j;
-        }
-      }
-      return -1;
-    }
-
-    private isFocusable(slottedItem: Element) {
-      return !slottedItem.hasAttribute("disabled") && !slottedItem.hasAttribute("hidden");
-    }
-
-    handleClick(event: MouseEvent) {
-      const newIndex = this.findBtnIndex(event);
-      if (newIndex !== -1) {
-        if (!this.isBtnDisabled(newIndex)) {
-          this.active = newIndex;
-          this.setSelected(newIndex);
-          this.notifySelectedChange();
-        }
-      }
-    }
-
-    handleKeyDown(event: KeyboardEvent) {
-      const { code } = event;
-      switch (code) {
-        case Key.Enter:
-        case Key.Space:
-          {
-            if (!this.isBtnDisabled(this.active)) {
-              this.setSelected(this.active);
-              this.notifySelectedChange();
-            }
-          }
-          break;
-        case Key.ArrowLeft:
-          {
-            if (this.active === 0) {
-              this.switchBtnOnArrowPress(this.slotted.length - 1, -1);
-            } else {
-              this.switchBtnOnArrowPress(this.active - 1, -1);
-            }
-          }
-          break;
-        case Key.ArrowRight:
-          {
-            if (this.active === this.slotted.length - 1) {
-              this.switchBtnOnArrowPress(0);
-            } else {
-              this.switchBtnOnArrowPress(this.active + 1);
-            }
-          }
-          break;
-        default:
-          break;
-      }
-    }
-
-    render() {
-      return html`
-        <div role="group" class="md-button-group" part="button-group">
-          <slot name="button"></slot>
-        </div>
-      `;
-    }
-  }
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-button-group": ButtonGroup.ELEMENT;
-  }
-}