@momentum-ui/web-components 2.16.3 → 2.16.4

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

@@ -1,15 +0,0 @@
-
-$checkbox__border: rem-calc(1) solid var(--checkbox-border-color);
-$checkbox__hover-border: rem-calc(1) solid var(--checkbox-hover-border-color);
-$checkbox__pressed-border: rem-calc(1) solid var(--checkbox-pressed-border-color);
-$checkbox__selected-border: rem-calc(1) solid var(--checkbox-selected-border-color);
-$checkbox__hover-bg: var(--checkbox-hover-bg-color);
-$checkbox__pressed-bg: var(--checkbox-pressed-bg-color);
-$checkbox__selected-bg: var(--checkbox-selected-bg-color);
-$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(34);
-$checkbox__border-radius: rem-calc(4);
-

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

@@ -1,82 +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[70].name,
-    dark: colors.gray[40].name
-  },
-  "icon-color": {
-    light: colors.white[100].name,
-    dark: colors.white[100].name
-  },
-  hover: {
-    "bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[90].name
-    },
-    "border-color": {
-      light: colors.gray[70].name,
-      dark: colors.gray[40].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,83 +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[70].name,
-    dark: colors.gray[40].name
-  },
-  "icon-color": {
-    light: colors.white[100].name,
-    dark: colors.white[100].name
-  },
-  hover: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[90].name
-    },
-    "border-color": {
-      light: colors.gray[70].name,
-      dark: colors.gray[40].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/checkbox/tokens/mdv2-checkbox-tokens.js

@@ -1,65 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const checkbox = {
-  prefix: "mdv2",
-  component: "checkbox",
-  "bg-color": {
-    common: "$mds-color-theme-button-secondary-normal"
-  },
-  "text-color": {
-    common: "$mds-color-theme-text-primary-normal"
-  },
-  "border-color": {
-    common: "$mds-color-theme-outline-input-normal"
-  },
-  "icon-color": {
-    common: "$mds-color-theme-inverted-text-primary-normal"
-  },
-  hover: {
-    "bg-color": {
-      common: "$mds-color-theme-inverted-button-secondary-hover"
-    },
-    "border-color": {
-      common: "$mds-color-theme-outline-input-normal"
-    }
-  },
-  pressed: {
-    "bg-color": {
-      common: "$mds-color-theme-inverted-button-secondary-pressed"
-    },
-    "border-color": {
-      common: "$mds-color-theme-outline-input-normal"
-    }
-  },
-  selected: {
-    "bg-color": {
-      common: "$mds-color-theme-control-active-normal"
-    },
-    "border-color": {
-      common: "$mds-color-theme-control-active-normal"
-    },
-    "hover-bg-color": {
-      common: "$mds-color-theme-control-active-hover"
-    },
-    "hover-border-color": {
-      common: "$mds-color-theme-control-active-hover"
-    },
-    "pressed-bg-color": {
-      common: "$mds-color-theme-control-active-hover"
-    },
-    "pressed-border-color": {
-      common: "$mds-color-theme-control-active-hover"
-    }
-  },
-  focus: {
-    "border-color": {
-      common: "$mds-color-theme-control-active-normal"
-    },
-    "shadow-color": {
-      common: "0 0 4px 2px transparent"
-    }
-  }
-};
-
-module.exports = checkbox;

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

@@ -1,80 +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/chip/Chip";
-import "@/components/icon/Icon";
-import { BarType, chipColor, iconColorSample, iconSamples } from "@/utils/enums";
-import { Args, StoryObj } from "@storybook/web-components";
-import { html } from "lit-html";
-
-export default {
-  title: "Components/Chip",
-  component: "md-chip",
-  argTypes: {
-    color: { control: { type: "select" }, options: chipColor },
-    bgColor: { control: "text", defaultValue: "blue" },
-    textColor: { control: "text", defaultValue: "white" },
-    height: { control: "text", defaultValue: "" },
-    valueText: { control: "text", defaultValue: "replace this with long string" },
-    small: { control: "boolean", defaultValue: false },
-    disabled: { control: "boolean", defaultValue: false },
-    readonly: { control: "boolean", defaultValue: false },
-    isLoad: { control: "boolean", defaultValue: false },
-    slot: { control: "boolean", defaultValue: false },
-    iconSet: { control: "boolean", defaultValue: false },
-    type: { control: { type: "select" }, options: BarType, defaultValue: "indeterminate" },
-    value: { control: { type: "number" } },
-    icon: { control: { type: "select" }, options: iconSamples },
-    iconColor: { control: { type: "select" }, options: iconColorSample }
-  },
-  parameters: {
-    a11y: {
-      element: "md-chip"
-    }
-  }
-};
-
-export const Chip: StoryObj = {
-  args: {
-    color: "blue",
-    textColor: "white",
-    valueText: "replace this with long string",
-    type: "indeterminate"
-  },
-  render: (args: Args) => {
-    if (args.isLoad) {
-      return args.type === "indeterminate"
-        ? html` <md-chip value="example-chip@cisco.com" indeterminateProgress> </md-chip> `
-        : html` <md-chip value="example-chip@cisco.com" determinateProgress="${args.value}"> </md-chip> `;
-    } else if (args.slot) {
-      return html`
-        <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>
-      `;
-    } else if (args.iconSet) {
-      return html`
-        <md-chip value="example-chip@cisco.com" icon="${args.icon}" iconColor="${args.colorIcon}"> </md-chip>
-      `;
-    } else {
-      return html`
-        <md-chip
-          .color=${args.color}
-          .bgColor=${args.bgColor}
-          .textColor=${args.textColor}
-          .small=${args.small}
-          .height=${args.height}
-          .value="${args.valueText}"
-          .disabled=${args.disabled}
-          ?readonly=${args.readonly}
-        ></md-chip>
-      `;
-    }
-  }
-};

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

@@ -1,137 +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
-      })
-    );
-
-    chip!.dispatchEvent(
-      new KeyboardEvent("keydown", {
-        code: Key.ArrowUp
-      })
-    );
-
-    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;
-  });
-
-  test("should return add tooltip text", async () => {
-    const component: Chip.ELEMENT = await fixture(html`
-      <md-chip value="Test Line1" tooltipText="More Info about the Chip"></md-chip>
-    `);
-    const expectedResult = "More Info about the Chip";
-    expect(component.shadowRoot?.querySelector("md-tooltip")?.getAttribute("message")).toEqual(expectedResult);
-  });
-
-  test("should truncate long text from value attribute and also add tooltip text", async () => {
-    const component: Chip.ELEMENT = await fixture(html`
-      <md-chip value="chip text content that is too long" tooltipText="More Info about the Chip"></md-chip>
-    `);
-    const expectedResult = "chip text content that is too long, More Info about the Chip";
-    expect(component.shadowRoot?.querySelector("md-tooltip")?.getAttribute("message")).toEqual(expectedResult);
-  });
-
-  test("should truncate long text and if the tooltip is the same string as the value attribute then use only one of them.", async () => {
-    const component: Chip.ELEMENT = await fixture(html`
-      <md-chip value="chip text content that is too long" tooltipText="chip text content that is too long"></md-chip>
-    `);
-    const expectedResult = "chip text content that is too long";
-    expect(component.shadowRoot?.querySelector("md-tooltip")?.getAttribute("message")).toEqual(expectedResult);
-  });
-});