@momentum-ui/web-components 2.14.13 → 2.14.14

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

@@ -1,68 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const tabs = {
-  prefix: "md",
-  component: "tabs",
-  default: {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name
-    },
-    "text-color": {
-      light: colors.gray[80].name,
-      dark: colors.gray[30].name
-    },
-    "border-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    },
-    "active-border": {
-      light: colors.blue[70].name,
-      dark: colors.blue[40].name
-    },
-    "focus-bg": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name
-    },
-    "focus-border": {
-      light: colors.blue[70].name,
-      dark: colors.blue[40].name
-    },
-    "hover-border": {
-      light: colors.gray[20].name,
-      dark: colors.gray[30].name
-    },
-    hover: {
-      light: colors.gray[10].name,
-      dark: colors.gray[80].name
-    },
-    pressed: {
-      light: colors.gray[20].name,
-      dark: colors.gray[90].name
-    },
-    disabled: {
-      light: colors.gray[50].name,
-      dark: colors.gray[60].name
-    },
-    active: {
-      light: colors.blue[70].name,
-      dark: colors.blue[40].name
-    }
-  },
-  "left-arrow": {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name
-    }
-  },
-  "right-arrow": {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name
-    }
-  }
-};
-
-module.exports = tabs;

package/src/components/tabs/tokens/mdv2-tabs-tokens.js

@@ -1,52 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const tabs = {
-  prefix: "mdv2",
-  component: "tabs",
-  default: {
-    "bg-color": {
-      common: "$mds-color-theme-button-secondary-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-secondary-normal"
-    },
-    "border-color": {
-      common: "transparent"
-    },
-    "active-bottom-border": {
-      common: "inset 0 -2px 0 0 $mds-color-theme-outline-input-active"
-    },
-    "active-vertical-border": {
-      common: "inset 2px 0 0 0 $mds-color-theme-outline-input-active"
-    },
-    "focus-bg": {
-      light: colors.white[60].name,
-      dark: colors.gray[90].name
-    },
-    "focus-border": {
-      common: "$mds-color-theme-outline-theme-normal"
-    },
-    "focus-shadow": {
-      common: "0 0 4px 0px $mds-color-theme-outline-theme-normal"
-    },
-    "hover-border": {
-      common: "transparent"
-    },
-    hover: {
-      common: "$mds-color-theme-button-secondary-hover"
-    },
-    pressed: {
-      common: "$mds-color-theme-button-secondary-pressed"
-    },
-    disabled: {
-      common: "$mds-color-theme-text-primary-disabled"
-    },
-    active: {
-      common: "$mds-color-theme-text-primary-normal"
-    }
-  }
-};
-
-module.exports = tabs;

package/src/components/taskitem/TaskItem.stories.ts

@@ -1,63 +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/badge/Badge";
-import "@/components/taskitem/TaskItem";
-import { ThemeNameValues } from "@/components/theme/Theme";
-import { action } from "@storybook/addon-actions";
-import { Args } from "@storybook/web-components";
-import { html } from "lit-element";
-
-export default {
-  title: "Components/Task Item",
-  component: "md-task-item",
-  argTypes: {
-    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
-    darkTheme: { control: "boolean" },
-    title: { control: "text", defaultValue: "Mihael Varificantare" },
-    quantity: { control: "number", defaultValue: 12 },
-    mediaType: { control: "text", defaultValue: "voice" },
-    status: { control: "text", defaultValue: "conference" },
-    queue: { control: "text", defaultValue: "IRV_quelle_11" },
-    message: { control: "text", defaultValue: "" },
-    time: { control: "text", defaultValue: "00:00" },
-    selected: { table: { disable: true } },
-    renderTaskType: { table: { disable: true } },
-    renderStatus: { table: { disable: true } },
-    onCornerMove: { table: { disable: true } },
-    resizeStyleMap: { table: { disable: true } },
-    fullScreen: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-task-item"
-    }
-  }
-};
-
-export const TaskItem = (args: Args) => {
-  return html`
-    <md-theme class="theme-toggle" id="taskitem" ?darkTheme=${args.darkTheme} theme=${args.theme}>
-      <md-task-item
-        mediaType="${args.mediaType}"
-        status="${args.status}"
-        title="${args.title}"
-        queue="${args.queue}"
-        quantity="${args.quantity}"
-        lastmessage="${args.message}"
-        @taskitem-click=${action("click")}
-        @taskitem-keydown=${action("keydown")}
-      >
-        <md-badge slot="task-type" color="darkmint" circle>
-          <md-icon name="social-sms" size="20" iconSet="momentumDesign" color="white-100"></md-icon>
-        </md-badge>
-        <div>${args.time}</div>
-      </md-task-item>
-    </md-theme>
-  `;
-};

package/src/components/taskitem/TaskItem.test.ts

@@ -1,417 +0,0 @@
-import { Key } from "@/constants";
-import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./TaskItem";
-import { TaskItem } from "./TaskItem";
-
-const fixtureFactory = async (
-  mediaType: string,
-  popovertitle: string,
-  title: string,
-  queue: string,
-  status: string,
-  quantity: number,
-  lastmessage: string,
-  selected: boolean,
-  customAriaLabel = "",
-  iconSrc = ""
-): Promise<TaskItem.ELEMENT> => {
-  return await fixture(html`
-    <md-task-item
-      mediaType="${mediaType}"
-      title="${title}"
-      popovertitle="${popovertitle}"
-      status="${status}"
-      quantity="${quantity}"
-      lastmessage="${lastmessage}"
-      .selected="${selected}"
-      customAriaLabel="${customAriaLabel}"
-      iconSrc="${iconSrc}"
-    >
-      <span slot="queue">
-        <span className="queue-name">Test Queue Name 00:00</span>
-      </span>
-      <div slot="task-addition">00:08</div>
-    </md-task-item>
-  `);
-};
-
-describe("TaskItem", () => {
-  afterEach(fixtureCleanup);
-
-  test("should render TaskItem Component", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "telephony",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "consulting",
-      0,
-      "",
-      false
-    );
-    expect(element).not.toBeNull();
-    const type = element.shadowRoot?.querySelector("md-icon");
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(type?.getAttribute("name")).toEqual("handset-filled");
-    expect(status?.getAttribute("name")).toEqual("headset-bold");
-  });
-
-  test("should render TaskItem Component", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "facebook",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "consulting",
-      0,
-      "",
-      false
-    );
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("social-fbmessenger");
-  });
-
-  test("should render TaskItem Component", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "whatsapp",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "consulting",
-      0,
-      "",
-      false
-    );
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("social-whatsapp");
-  });
-
-  test("should render TaskItem Component for Apple Chat Messenger", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "applemessages",
-      "Mihael Varificantare",
-      "Mihael Varificantare",
-      "quelle_1",
-      "play",
-      0,
-      "",
-      false,
-      "",
-      "/images/illustrations/apple-messages-light.svg"
-    );
-    const type = element.shadowRoot?.querySelector("img");
-    expect(type?.getAttribute("src")).toEqual("/images/illustrations/apple-messages-light.svg");
-  });
-
-  test("should render TaskItem Component with progressive_campaign", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "progressive_campaign",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "consulting",
-      0,
-      "",
-      false
-    );
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("icon-icon-campaign_18");
-  });
-
-  test("should render correct type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "chat",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "play",
-      0,
-      "",
-      false
-    );
-
-    const type = element.shadowRoot?.querySelector("md-icon");
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(type?.getAttribute("name")).toEqual("chat-filled");
-    expect(status?.getAttribute("name")).toEqual("play-bold");
-  });
-
-  test("should render correct outbound type ", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "outbound telephony",
-      "Mihael Varificantare",
-      "Mihael Varificantare",
-      "quelle_1",
-      "play",
-      0,
-      "",
-      false
-    );
-
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("outgoing-call-legacy-filled");
-  });
-
-  test("should render midcall type", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "midcall telephony",
-      "Mihael Varificantare",
-      "Mihael Varificantare",
-      "quelle_1",
-      "play",
-      0,
-      "",
-      false,
-      "",
-      "/images/illustrations/Monitoring-regular-light.svg"
-    );
-
-    const type = element.shadowRoot?.querySelector("img");
-    expect(type?.getAttribute("src")).toEqual("/images/illustrations/Monitoring-regular-light.svg");
-  });
-
-  test("should render caalback type ", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "callback",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "play",
-      0,
-      "",
-      false
-    );
-
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("icon-icon-callback_18");
-  });
-
-  test("should render correct inbound type ", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "inbound telephony",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "play",
-      0,
-      "",
-      false
-    );
-
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("incoming-call-legacy-filled");
-  });
-
-  test("should update type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "email",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "hold",
-      0,
-      "",
-      true
-    );
-
-    expect(element.selected).toBeTruthy;
-    const type = element.shadowRoot?.querySelector("md-icon");
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(type?.getAttribute("name")).toEqual("email-filled");
-    expect(status?.getAttribute("name")).toEqual("pause-bold");
-  });
-
-  test("should update type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "sms",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "conference",
-      0,
-      "",
-      false
-    );
-    expect(element).not.toBeNull();
-    const type = element.shadowRoot?.querySelector("md-icon");
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(type?.getAttribute("name")).toEqual("social-sms");
-    expect(status?.getAttribute("name")).toEqual("meet-bold");
-  });
-
-  test("should update type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "transfered",
-      0,
-      "",
-      false
-    );
-    expect(element).not.toBeNull();
-    const type = element.shadowRoot?.querySelector(".md-taskitem__mediatype slot");
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(type?.getAttribute("name")).toEqual("task-type");
-    expect(status?.getAttribute("name")).toEqual("assign-privilege-bold");
-  });
-
-  test("should update campaign status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "campaign",
-      0,
-      "",
-      false
-    );
-    expect(element).not.toBeNull();
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(status?.getAttribute("name")).toEqual("announcement-bold");
-  });
-
-  test("should update courtesy_callback status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "courtesy_callback",
-      0,
-      "",
-      false
-    );
-    expect(element).not.toBeNull();
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(status?.getAttribute("name")).toEqual("callrate-bold");
-  });
-
-  test("should upadte type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "call",
-      10,
-      "Test message",
-      false
-    );
-    expect(element).not.toBeNull();
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status slot");
-    const quantity = element.shadowRoot?.querySelector(".new-chat-quantity");
-    expect(element.lastmessage).toEqual("Test message");
-    const chat = element.shadowRoot?.querySelector(".md-taskitem__content_chat");
-    expect(status?.getAttribute("name")).toEqual("task-status");
-    expect(quantity).toBeUndefined;
-    expect(chat).toBeUndefined;
-  });
-
-  test("should upadte type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "call",
-      101,
-      "Test message",
-      false
-    );
-    expect(element).not.toBeNull();
-    const quantity = element.shadowRoot?.querySelector(".new-chat-quantity span");
-    expect(quantity).toBeUndefined;
-  });
-
-  test("should render slot quele", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "",
-      "call",
-      0,
-      "Test message",
-      false
-    );
-    expect(element).not.toBeNull();
-    const quelle = element.shadowRoot?.querySelector(".md-taskitem__content_queue slot[name='queue']");
-    expect(quelle).toBeUndefined;
-  });
-
-  test("should upadte type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "transfered",
-      0,
-      "",
-      false
-    );
-    const mockClick = jest.spyOn(element, "handleClick");
-    element.handleClick(new MouseEvent("click"));
-    await elementUpdated(element);
-
-    expect(mockClick).toHaveBeenCalled();
-
-    mockClick.mockRestore();
-  });
-
-  test("should upadte type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "transfered",
-      0,
-      "",
-      false
-    );
-    const mockKeydown = jest.spyOn(element, "handleKeyDown");
-    element.handleKeyDown(new KeyboardEvent(Key.Enter));
-    await elementUpdated(element);
-
-    expect(mockKeydown).toHaveBeenCalled();
-
-    mockKeydown.mockRestore();
-  });
-
-  test("should have custom aria label", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "transfered",
-      0,
-      "",
-      false,
-      "Custom area label"
-    );
-    await elementUpdated(element);
-    const ariaLabel = element.shadowRoot?.querySelector(".md-taskitem")?.getAttribute("aria-label");
-    expect(ariaLabel).toEqual("Custom area label");
-  });
-
-  test("should have custom aria label", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "transfered",
-      0,
-      "",
-      false
-    );
-    await elementUpdated(element);
-    const ariaLabel = element.shadowRoot?.querySelector(".md-taskitem")?.getAttribute("aria-label");
-    expect(ariaLabel).toEqual("twitter transfered  Test Queue Name 0 minutes 0 seconds  ");
-  });
-});