@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/checkbox/CheckboxGroup.ts

@@ -1,91 +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 { RovingTabIndexMixin } from "@/mixins";
-import reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, LitElement, property, query } from "lit-element";
-import styles from "./scss/module.scss";
-
-export namespace CheckboxGroup {
-  @customElementWithCheck("md-checkboxgroup")
-  export class ELEMENT extends RovingTabIndexMixin(LitElement) {
-    @property({ type: String, attribute: "group-label" }) label = "group";
-    @property({ type: String, reflect: true }) alignment: "horizontal" | "vertical" = "vertical";
-
-    @query("slot[name='checkbox']") checkboxSlot?: HTMLSlotElement;
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.addEventListener("keydown", this.handleKeyDown);
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.removeEventListener("keydown", this.handleKeyDown);
-    }
-
-    private switchCheckboxOnArrowPress(startIndex: number, increment = 1) {
-      const newIndex = super.getAvailableSelectedIndex!(startIndex, increment);
-      if (newIndex !== -1) {
-        this.selected = newIndex;
-      }
-    }
-
-    handleKeyDown(event: KeyboardEvent) {
-      const { code } = event;
-      switch (code) {
-        case Key.ArrowUp:
-        case Key.ArrowLeft:
-          {
-            if (this.selected === 0) {
-              this.switchCheckboxOnArrowPress(this.slotted.length - 1, -1);
-            } else {
-              this.switchCheckboxOnArrowPress(this.selected - 1, -1);
-            }
-          }
-          break;
-        case Key.ArrowDown:
-        case Key.ArrowRight:
-          {
-            if (this.selected === this.slotted.length - 1) {
-              this.switchCheckboxOnArrowPress(0);
-            } else {
-              this.switchCheckboxOnArrowPress(this.selected + 1);
-            }
-          }
-          break;
-        default:
-          break;
-      }
-    }
-
-    get slotElement() {
-      return this.checkboxSlot;
-    }
-
-    render() {
-      return html`
-        <div role="group" aria-labelledby="id-group-label">
-          <slot name="checkbox"></slot>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-checkboxgroup": CheckboxGroup.ELEMENT;
-  }
-}

package/src/components/checkbox/scss/checkbox.scss

@@ -1,139 +0,0 @@
-
-:host(:focus) {
-  box-shadow: none;
-  outline: none;
-}
-
-:host(md-checkbox) {
-  border-radius: $checkbox__border-radius;
-  cursor: pointer;
-  display: inline-flex;
-
-  .checkbox-input {
-    height: calc(#{$checkbox__size} + #{$checkbox__main-indent});
-    position: absolute;
-    visibility: hidden;
-    width: 100%;
-  }
-
-  .checkbox-label {
-    cursor: pointer;
-    display: inline-block;
-    padding-left: $checkbox__label-size;
-    padding-right: calc(#{$checkbox__main-indent} / 2);
-    position: relative;
-    width: 100%;
-    z-index: 1;
-
-    &::before {
-      background: var(--checkbox-bg-color, $lm-checkbox-bg-color-light);
-      border: $checkbox__border;
-      border-radius: $checkbox__border-radius;
-      height: $checkbox__size;
-      width: $checkbox__size;
-    }
-
-    &::before,
-    &::after {
-      content: "";
-      left: calc(#{$checkbox__icon-size} * 1.25);
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-}
-
-:host([focus-visible]:not([disabled])) {
-  @include focus-boxshadow(rem-calc(2), var(--md-default-focus-outline-color, $md-blue-70));
-}
-
-:host(:hover:not([disabled])) {
-  .checkbox-label {
-    &::before {
-      background: $checkbox__hover-bg;
-      border: $checkbox__hover-border;
-    }
-  }
-}
-
-
-:host(:active:not([disabled])) {
-  .checkbox-label {
-    &::before {
-      background: $checkbox__pressed-bg;
-      border: $checkbox__pressed-border;
-    }
-  }
-}
-
-:host([disabled]) {
-  opacity: 0.4;
-
-  .checkbox-label {
-    cursor: not-allowed;
-
-    &::before {
-      background: $checkbox__hover-bg;
-      border: $checkbox__hover-border;
-    }
-  }
-
-
-}
-
-:host([aria-checked="true"]) {
-  .checkbox-label {
-    &::after {
-      border: solid $md-white-100;
-      border-width: 0 0.12em 0.12em 0;
-      display: block;
-      height: 0.6em;
-      transform: translateY(-65%) translateX(-50%) rotate(45deg);
-      width: 0.35em;
-    }
-
-    &::before {
-      background: $checkbox__selected-bg;
-      border: $checkbox__selected-border;
-    }
-  }
-}
-
-:host([indeterminate]) {
-  .checkbox-label {
-    &::after {
-      border: solid $md-white-100;
-      border-width: 0 0 0.12em;
-      display: block;
-      height: 0.2em;
-      transform: translateY(-85%) translateX(-50%) rotate(0);
-      width: 0.75em;
-    }
-
-    &::before {
-      background: $checkbox__selected-bg;
-      border: $checkbox__selected-border;
-    }
-  }
-}
-
-:host([aria-checked="true"]:hover:not([disabled])),
-:host([indeterminate]:hover:not([disabled])) {
-  .checkbox-label {
-    &::before {
-      background: var(--checkbox-selected-hover-bg-color, $lm-checkbox-selected-hover-bg-color-light);
-      border-color: var(--checkbox-selected-hover-border-color, $lm-checkbox-selected-hover-border-color-light);
-    }
-  }
-}
-
-:host([aria-checked="true"]:active:not([disabled])),
-:host([indeterminate]:active:not([disabled])) {
-  .checkbox-label {
-    &::before {
-      background: var(--checkbox-selected-pressed-bg-color, $lm-checkbox-selected-pressed-bg-color-light);
-      border-color: var(--checkbox-selected-pressed-border-color, $lm-checkbox-selected-pressed-border-color-light);
-    }
-  }
-}

package/src/components/checkbox/scss/checkboxgroup.scss

@@ -1,17 +0,0 @@
-:host([alignment="vertical"]) div {
-  display: inline-flex;
-  flex-direction: column;
-}
-
-:host([alignment="vertical"]) div ::slotted(md-checkbox:not(:last-child)) {
-  margin-bottom: calc(#{$checkbox__main-indent} * 6);
-}
-
-:host([alignment="horizontal"]) div {
-  display: flex;
-  flex-direction: row;
-}
-
-:host([alignment="horizontal"]) div ::slotted(md-checkbox:not(:last-child)) {
-  margin-right: calc(#{$checkbox__main-indent} * 10);
-}

package/src/components/checkbox/scss/module.scss

@@ -1,13 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/tools/mixins/focus";
-
-
-@import "./vars/lm-checkbox-settings";
-
-@import "./settings";
-@import "./mixins";
-@import "./checkbox";
-@import "./checkboxgroup";

package/src/components/checkbox/scss/settings.scss

@@ -1,15 +0,0 @@
-
-$checkbox__border: rem-calc(1) solid var(--checkbox-border-color, $lm-checkbox-border-color-light);
-$checkbox__hover-border: rem-calc(1) solid var(--checkbox-hover-border-color, $lm-checkbox-hover-border-color-light);
-$checkbox__pressed-border: rem-calc(1) solid var(--checkbox-pressed-border-color, $lm-checkbox-pressed-border-color-light);
-$checkbox__selected-border: rem-calc(1) solid var(--checkbox-selected-border-color, $lm-checkbox-selected-border-color-light);
-$checkbox__hover-bg: var(--checkbox-hover-bg-color, $lm-checkbox-hover-bg-color-light);
-$checkbox__pressed-bg: var(--checkbox-pressed-bg-color, $lm-checkbox-pressed-bg-color-light);
-$checkbox__selected-bg: var(--checkbox-selected-bg-color, $lm-checkbox-selected-bg-color-light);
-$checkbox__horizontal-max-width: rem-calc(400);
-$checkbox__main-indent: rem-calc(4);
-$checkbox__size: rem-calc(20);
-$checkbox__icon-size: rem-calc(12);
-$checkbox__label-size: rem-calc(36);
-$checkbox__border-radius: rem-calc(4);
-

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

@@ -1,78 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const checkbox = {
-  prefix: "lm",
-  component: "checkbox",
-  "bg-color": {
-    light: colors.white[100].name,
-    dark: colors.gray[100].name
-  },
-  "text-color": {
-    light: colors.gray[100].name,
-    dark: colors.gray["05"].name
-  },
-  "border-color": {
-    light: colors.gray[20].name,
-    dark: colors.gray[70].name
-  },
-  hover: {
-    "bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[90].name
-    },
-    "border-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    }
-  },
-  pressed: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    },
-    "border-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[70].name
-    }
-  },
-  selected: {
-    "bg-color": {
-      light: colors.blue[50].name,
-      dark: colors.blue[40].name
-    },
-    "border-color": {
-      light: colors.blue[50].name,
-      dark: colors.blue[40].name
-    },
-    "hover-bg-color": {
-      light: colors.blue[60].name,
-      dark: colors.blue[50].name
-    },
-    "hover-border-color": {
-      light: colors.blue[60].name,
-      dark: colors.blue[50].name
-    },
-    "pressed-bg-color": {
-      light: colors.blue[70].name,
-      dark: colors.blue[60].name
-    },
-    "pressed-border-color": {
-      light: colors.blue[70].name,
-      dark: colors.blue[60].name
-    }
-  },
-  focus: {
-    "border-color": {
-      light: colors.theme[70].name,
-      dark: colors.theme[70].name
-    },
-    "shadow-color": {
-      light: "0 0 4px 2px transparent",
-      dark: "0 0 4px 2px transparent"
-    }
-  }
-};
-
-module.exports = checkbox;

package/src/components/checkbox/tokens/md-checkbox-tokens.js

@@ -1,79 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const checkbox = {
-  prefix: "md",
-  component: "checkbox",
-
-  "bg-color": {
-    light: colors.white[60].name,
-    dark: colors.gray[95].name
-  },
-  "text-color": {
-    light: colors.gray[90].name,
-    dark: colors.gray[10].name
-  },
-  "border-color": {
-    light: colors.gray[20].name,
-    dark: colors.gray[80].name
-  },
-  hover: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[90].name
-    },
-    "border-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[80].name
-    }
-  },
-  pressed: {
-    "bg-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[80].name
-    },
-    "border-color": {
-      light: colors.gray[40].name,
-      dark: colors.gray[70].name
-    }
-  },
-  selected: {
-    "bg-color": {
-      light: colors.theme[50].name,
-      dark: colors.theme[50].name
-    },
-    "border-color": {
-      light: colors.theme[50].name,
-      dark: colors.theme[50].name
-    },
-    "hover-bg-color": {
-      light: colors.theme[60].name,
-      dark: colors.theme[60].name
-    },
-    "hover-border-color": {
-      light: colors.theme[60].name,
-      dark: colors.theme[60].name
-    },
-    "pressed-bg-color": {
-      light: colors.theme[70].name,
-      dark: colors.theme[70].name
-    },
-    "pressed-border-color": {
-      light: colors.theme[70].name,
-      dark: colors.theme[70].name
-    }
-  },
-  focus: {
-    "border-color": {
-      light: "transparent",
-      dark: "transparent"
-    },
-    "shadow-color": {
-      light: "0 0 4px 2px $md-blue-50",
-      dark: "0 0 4px 2px $md-blue-50"
-    }
-  }
-};
-
-module.exports = checkbox;

package/src/components/chip/Chip.stories.ts

@@ -1,82 +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 { withA11y } from "@storybook/addon-a11y";
-import { boolean, number, select, text, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-html";
-import { badgeColor, BarType, iconSamples, iconColorSample } from "@/utils/enums";
-import "@/components/icon/Icon";
-import "@/components/chip/Chip";
-import "@/components/theme/Theme";
-
-export default {
-  title: "Components/Chip",
-  component: "md-chip",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    a11y: {
-      element: "md-chip"
-    }
-  }
-};
-
-
-export const Chip = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const color = select("Color", badgeColor, "blue");
-  const bgColor = text("BG Color Overrides", "blue");
-  const textColor = text("Text Color Override", "white");
-  const height = text("Height Override", "");
-  const valueText = text("value text", "replace this with long string");
-  const small = boolean("Small", false);
-  const disabled = boolean("Disabled", false);
-  const readonly = boolean("readonly", false);
-  const isLoad = boolean("If Loading", false);
-  const slot = boolean("Slotted Content", false);
-  const iconSet = boolean("Add Icon", false);
-
-  if (isLoad) {
-    const options = {range: true, min: 0, max: 100, step: 1};
-    const type = select("load type", BarType, "indeterminate");
-    const value = number("loading", 75, options);
-
-    return type === "indeterminate"
-      ? html`
-        <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-          <md-chip value="example-chip@cisco.com" indeterminateProgress> </md-chip>
-        </md-theme>`
-      : html`
-        <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-          <md-chip value="example-chip@cisco.com" determinateProgress="${value}"> </md-chip>
-        </md-theme>`;
-  } else if (slot) {
-    return html`
-    <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-chip value="example-chip@cisco.com">
-        <md-icon name="icon-alert_16" slot="custom-left-content"></md-icon>
-        <md-icon name="icon-alarm_16" slot="custom-right-content"></md-icon>
-      </md-chip>
-    <md-theme>
-    `;
-  } else if (iconSet) {
-    const icon = select("icon", iconSamples, "");
-    const colorIcon = select("icon color", iconColorSample, "");
-
-    return html`
-    <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-chip value="example-chip@cisco.com" icon="${icon}" iconColor="${colorIcon}"> </md-chip>
-    </md-theme>`;
-  } else {
-    return html`
-      <md-theme class="theme-toggle" id="chip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-        <md-chip .color=${color} .bgColor=${bgColor} .textColor=${textColor} .small=${small} .height=${height} .value="${valueText}" .disabled=${disabled} ?readonly=${readonly}></md-chip>
-      </md-theme>
-    `;
-  }
-};

package/src/components/chip/Chip.test.ts

@@ -1,129 +0,0 @@
-import "@/components/icon/Icon";
-import { Key } from "@/constants";
-import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./Chip";
-import { Chip } from "./Chip";
-
-const fixtureFactory = async (): Promise<Chip.ELEMENT> => {
-  return await fixture(html`
-    <md-chip value="chip text content"></md-chip>
-  `);
-};
-
-describe("Chip component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-
-  // color
-  test("should set chip color", async () => {
-    const component: Chip.ELEMENT = await fixture(
-      html`
-        <md-chip color="blue"></md-chip>
-      `
-    );
-    expect(component.color).not.toBeNull();
-  });
-
-  // small
-  test("should set chip to small size", async () => {
-    const component: Chip.ELEMENT = await fixture(
-      html`
-        <md-chip small></md-chip>
-      `
-    );
-    expect(component.small).toBeTruthy();
-  });
-
-  // custom bgColor chip
-  test("should set user bgColor chip", async () => {
-    const component: Chip.ELEMENT = await fixture(
-      html`
-        <md-chip bgColor="#000"></md-chip>
-      `
-    );
-    expect(component.bgColor).toEqual("#000");
-  });
-  // custom size chip
-  test("should set user width", async () => {
-    const component: Chip.ELEMENT = await fixture(
-      html`
-        <md-chip height="100px"></md-chip>
-      `
-    );
-    expect(component.height).toEqual("100px");
-  });
-  // custom textColor chip
-  test("should set user textColor", async () => {
-    const component: Chip.ELEMENT = await fixture(
-      html`
-        <md-chip textColor="#000"></md-chip>
-      `
-    );
-    expect(component.textColor).toEqual("#000");
-  });
-
-  test("should truncate long text from value attribute", async () => {
-    const component: Chip.ELEMENT = await fixture(html`
-      <md-chip value="chip text content that is way tooooooo long"></md-chip>
-    `);
-    expect(component.truncStringPortion).toHaveBeenCalled;
-  });
-  test("should render determinate progress bar", async () => {
-    const component: Chip.ELEMENT = await fixture(html`
-      <md-chip value="chip text content" determinateProgress="50"></md-chip>
-    `);
-    expect(component.shadowRoot?.querySelector("md-progress-bar")).not.toBeNull;
-  });
-  test("should render indeterminate progress bar", async () => {
-    const component: Chip.ELEMENT = await fixture(html`
-      <md-chip value="chip text content" indeterminateProgress></md-chip>
-    `);
-    expect(component.shadowRoot?.querySelector("md-progress-bar")).not.toBeNull;
-  });
-  test("should render an icon when icon attribute is used", async () => {
-    const component: Chip.ELEMENT = await fixture(html`
-      <md-chip value="chip text content" icon="icon-alert_16"></md-chip>
-    `);
-    expect(component.shadowRoot?.querySelector("md-icon")).not.toBeNull;
-  });
-
-  test("should set disabled state", async () => {
-    const component: Chip.ELEMENT = await fixture(html`
-      <md-chip value="chip text content" disabled icon="icon-alert_16"></md-chip>
-    `);
-    expect(component.disabled).toBeTruthy();
-  });
-
-  test("should handleClear", async () => {
-    const component = await fixtureFactory();
-    const spyKeyDown = jest.spyOn(component, "handleClear");
-
-    component.handleClear("chipID");
-
-    expect(spyKeyDown).toHaveBeenCalledTimes(1);
-  });
-  test("should handleClick when interaction comes from main Chip", async () => {
-    const component = await fixtureFactory();
-    const spyKeyDown = jest.spyOn(component, "handleClick");
-    const chip = component.shadowRoot?.querySelector(".md-chip");
-    chip!.dispatchEvent(new MouseEvent("click"));
-    chip!.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        code: Key.Enter
-      })
-    );
-
-    expect(spyKeyDown).toHaveBeenCalledTimes(2);
-  });
-  test("should be selectable", async () => {
-    const component = await fixtureFactory();
-
-    component.handleSelect();
-    await elementUpdated(component);
-    expect(component.selected).toBeTruthy;
-    component.handleDeSelect();
-    await elementUpdated(component);
-    expect(component.selected).toBeFalsy;
-  });
-});