@momentum-ui/web-components 2.5.4 → 2.5.7

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

@@ -0,0 +1,349 @@
+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 = ""
+): Promise<TaskItem.ELEMENT> => {
+  return await fixture(
+    html`
+      <md-task-item
+        mediaType="${mediaType}"
+        title="${title}"
+        popovertitle="${popovertitle}"
+        queue="${queue}"
+        status="${status}"
+        quantity="${quantity}"
+        lastmessage="${lastmessage}"
+        .selected="${selected}"
+        customAriaLabel="${customAriaLabel}"
+      >
+        <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-active_16");
+    expect(status?.getAttribute("name")).toEqual("headset_12");
+  });
+
+  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("messenger_16");
+  });
+
+  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("whatsApp_16");
+  });
+
+  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-active_16");
+    expect(status?.getAttribute("name")).toEqual("play_12");
+  });
+
+  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-active_16");
+  });
+
+  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-active_16");
+  });
+
+  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-active_16");
+    expect(status?.getAttribute("name")).toEqual("pause_12");
+  });
+
+  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("sms_16");
+    expect(status?.getAttribute("name")).toEqual("meet_12");
+  });
+
+  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_12");
+  });
+
+  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_12");
+  });
+
+  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("call-log_12");
+  });
+
+  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");
+  });
+});

package/src/components/taskitem/TaskItem.ts

@@ -0,0 +1,249 @@
+/**
+ * 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/icon/Icon";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, LitElement, property } from "lit-element";
+import { nothing } from "lit-html";
+import { classMap } from "lit-html/directives/class-map";
+import styles from "./scss/module.scss";
+
+export namespace TaskItem {
+  @customElementWithCheck("md-task-item")
+  export class ELEMENT extends LitElement {
+    @property({ type: String }) mediaType = "call";
+    @property({ type: String }) status = "";
+    @property({ type: String }) popovertitle = "";
+    @property({ type: String }) title = "";
+    @property({ type: String }) queue = "";
+    @property({ type: Boolean }) accepted = false;
+    @property({ type: Number }) quantity = 0;
+    @property({ type: String }) lastmessage = "";
+    @property({ type: Boolean }) selected = false;
+    @property({ type: String }) customAriaLabel = "";
+
+    renderTaskType = () => {
+      switch (this.mediaType.toLowerCase()) {
+        case "telephony":
+          return html`
+            <md-badge color="green" circle>
+              <md-icon name="handset-active_16"></md-icon>
+            </md-badge>
+          `;
+        case "outbound telephony":
+          return html`
+            <md-badge color="green" circle>
+              <md-icon name="outgoing-call-active_16"></md-icon>
+            </md-badge>
+          `;
+        case "inbound telephony":
+          return html`
+            <md-badge color="green" circle>
+              <md-icon name="incoming-call-active_16"></md-icon>
+            </md-badge>
+          `;
+        case "callback":
+          return html`
+            <md-badge color="lime" circle>
+              <md-icon name="icon-icon-callback_18"></md-icon>
+            </md-badge>
+          `;
+        case "chat":
+          return html`
+            <md-badge color="blue" circle>
+              <md-icon name="chat-active_16"></md-icon>
+            </md-badge>
+          `;
+        case "email":
+          return html`
+            <md-badge color="violet" circle>
+              <md-icon name="email-active_16"></md-icon>
+            </md-badge>
+          `;
+        case "sms":
+          return html`
+            <md-badge color="darkmint" circle>
+              <md-icon name="sms_16" color="white"></md-icon>
+            </md-badge>
+          `;
+        case "facebook":
+          return html`
+            <md-badge bgColor="#0078FF" circle>
+              <md-icon name="messenger_16" color="white"></md-icon>
+            </md-badge>
+          `;
+        case "whatsapp":
+          return html`
+            <md-badge bgColor="#25D366" circle>
+              <md-icon name="whatsApp_16" color="white"></md-icon>
+            </md-badge>
+          `;
+        default:
+          return html`
+            <slot name="task-type"></slot>
+          `;
+      }
+    };
+
+    renderStatus = () => {
+      switch (this.status) {
+        case "consulting":
+          return html`
+            <md-icon name="headset_12"></md-icon>
+          `;
+        case "play":
+          return html`
+            <md-icon name="play_12"></md-icon>
+          `;
+        case "hold":
+          return html`
+            <md-icon name="pause_12"></md-icon>
+          `;
+        case "conference":
+          return html`
+            <md-icon name="meet_12"></md-icon>
+          `;
+        case "transfered":
+          return html`
+            <md-icon name="assign-privilege_12"></md-icon>
+          `;
+        case "courtesy_callback":
+          return html`
+            <md-icon name="call-log_12"></md-icon>
+          `;
+        case "campaign":
+          return html`
+            <md-icon name="announcement_12"></md-icon>
+          `;
+        default:
+          return html`
+            <slot name="task-status"></slot>
+          `;
+      }
+    };
+
+    handleClick(event: MouseEvent) {
+      this.dispatchEvent(
+        new CustomEvent("taskitem-click", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            srcEvent: event
+          }
+        })
+      );
+      this.blur();
+    }
+
+    handleKeyDown(event: KeyboardEvent) {
+      event.preventDefault();
+
+      this.dispatchEvent(
+        new CustomEvent("taskitem-keydown", {
+          detail: {
+            key: event.code
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+
+    renderChatCount() {
+      return this.quantity > 0
+        ? this.quantity > 99
+          ? html`
+              <span class="new-chat-quantity">99+</span>
+            `
+          : html`
+              <span class="new-chat-quantity">${this.quantity}</span>
+            `
+        : nothing;
+    }
+
+    getAriaLabel() {
+      if (this.customAriaLabel) {
+        return this.customAriaLabel;
+      }
+      return `${this.mediaType} ${this.status} ${this.title} ${this.queue} ${this.quantity ? this.quantity : ""} ${
+        this.lastmessage
+      }`;
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    render() {
+      return html`
+        <div
+          part="task-item-container"
+          class="md-taskitem ${classMap({ selected: this.selected })}"
+          tabindex="0"
+          aria-selected="${this.selected}"
+          @click=${(e: MouseEvent) => this.handleClick(e)}
+          @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}
+          aria-label=${this.getAriaLabel()}
+        >
+          <div class="md-taskitem__mediatype">
+            ${this.renderTaskType()}
+            ${this.status
+              ? html`
+                  <span class=${`md-taskitem__status ` + `${this.status}`}>
+                    ${this.renderStatus()}
+                  </span>
+                `
+              : nothing}
+          </div>
+          <div class="md-taskitem__content" part="task-item-content">
+            ${this.popovertitle
+              ? html`
+                  <span class="md-taskitem__content_popover_title">${this.popovertitle}</span>
+                `
+              : nothing}
+            ${this.title
+              ? html`
+                  <span class="md-taskitem__content_title ${classMap({ mainTitle: !this.popovertitle })}"
+                    >${this.title}</span
+                  >
+                `
+              : nothing}
+            <div class="md-taskitem__content_inner">
+              <span class="md-taskitem__content_queue">
+                ${this.queue.length > 0
+                  ? this.queue
+                  : html`
+                      <slot name="queue"></slot>
+                    `}
+              </span>
+            </div>
+            ${this.lastmessage
+              ? html`
+                  <span class="md-taskitem__content_chat">
+                    <span class="new-chat_massages">${this.lastmessage}</span>
+                  </span>
+                `
+              : nothing}
+          </div>
+          <div class="md-taskitem__addition">
+            <slot></slot>
+            ${this.renderChatCount()}
+          </div>
+        </div>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-task-item": TaskItem.ELEMENT;
+  }
+}

package/src/components/taskitem/scss/mixins.scss

@@ -0,0 +1,42 @@
+
+@mixin text-dots {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@mixin task-flex-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: stretch;
+}
+@mixin task-after-focus {
+  bottom: 0;
+  content: "";
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+}
+@mixin taskitem-status {
+  align-items: center;
+  display: inline-flex;
+  justify-content: space-around;
+  position: absolute;
+}
+@mixin taskitem-content {
+  align-content: stretch;
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  justify-content: center;
+}
+@mixin taskitem-focus-boxshadow {
+  box-shadow: $taskitem-focus-boxshadow;
+}

package/src/components/taskitem/scss/module.scss

@@ -0,0 +1,15 @@
+@import "@/wc_scss/tools/functions/core";
+@import "@/wc_scss/tools/mixins/core";
+
+@import "@/wc_scss/settings/rem";
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/colors/settings-transparencies";
+@import "@/wc_scss/settings/core";
+
+@import "@/wc_scss/typography/settings";
+
+@import "./vars/lm-taskitem-settings";
+
+@import "./settings";
+@import "./mixins";
+@import "./task-item";

package/src/components/taskitem/scss/settings.scss

@@ -0,0 +1,43 @@
+$taskitem-border-radius: rem-calc(8);
+$taskitem-border-circle: 50%;
+$taskitem-main-indent: rem-calc(2);
+$taskitem-base-unit: $base-unit; // 4px = 0.25rem
+$taskitem-main-size: rem-calc(20);
+$taskitem-main-curcor: $cursor-pointer-value;
+$taskitem-base-height: rem-calc(14);
+$taskitem-status-height: rem-calc(12);
+$taskitem-mediatype-width: rem-calc(42);
+
+$taskitem-max-width: rem-calc(500);
+$taskitem-min-width: rem-calc(270);
+$taskitem-min-height: rem-calc(80);
+$taskitem-main-padding: rem-calc(12);
+$taskitem-main-margin: rem-calc(8);
+$taskitem-focus-margin: -$taskitem-main-indent;
+$taskitem-focus-boxshadow: 0 0 0 rem-calc(2) var(--taskitem-focus-border-color, $lm-taskitem-focus-border-color-light);
+
+$taskitem-mediatype-margin: rem-calc(8);
+$taskitem-content-min-width: rem-cacl(120);
+
+$taskitem-title-height: rem-calc(19);
+$taskitem-title-font: $brand-font-bold;
+$taskitem-title-font-size: $font-size-large;
+$taskitem-popover-title-font-size: $font-size-base;
+$taskitem-popover-title-height: rem-calc(15);
+
+$taskitem-queue-font: $brand-font-regular;
+$taskitem-queue-font-size: $font-size-small;
+$taskitem-selected-shadow: rem-calc(0 2 4) $black-16;
+$taskitem-selected-bg: var(--taskitem-pressed-bg-color, $lm-taskitem-pressed-bg-color-light);
+
+$taskitem-additional-width: rem-calc(100);
+$taskitem-chat-padding: rem-calc(40);
+$taskitem-newchat-font-size: ceil($font-size-base * 0.71);
+$taskitem-newchat-right: -20%;
+$taskitem-newchat-margin: rem-calc(20);
+$taskitem-newchat-padding: rem-calc(2 4); 
+
+
+
+
+