@momentum-ui/web-components 2.16.1 → 2.16.3

package/src/components/meeting-alert/MeetingAlert.stories.ts

@@ -0,0 +1,182 @@
+/**
+ * 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/meeting-alert/MeetingAlert";
+import { action } from "@storybook/addon-actions";
+import { Args, StoryObj } from "@storybook/web-components";
+import { html } from "lit-html";
+import { MeetingAlertRole } from "./MeetingAlert"; // Keep type import as a relative path
+import mdx from "./MeetingAlert.mdx";
+
+const MEETING_ALERT_SRC = "https://api.adorable.io/avatars/285/abott@adorable.png";
+const defaultAttendee = [
+  `{title: 'J $', src:${MEETING_ALERT_SRC}, alt:'Alt Text'}`,
+  `{title: 'Jefe Guadelupe', src:${MEETING_ALERT_SRC}, alt:'Alt Text'}`
+];
+
+export default {
+  title: "Components/Meeting Alerts",
+  component: "md-meeting-alert",
+  argTypes: {
+    attendees: {
+      control: { type: "array" },
+      description:
+        "Attendees story is limited, the array() only accepts and array of strings where as the property expects an array of objects",
+      defaultValue: defaultAttendee
+    },
+    snoozeAriaLabel: { table: { disable: true } },
+    onKeyDown: { table: { disable: true } },
+    onSnooze: { table: { disable: true } },
+    handleSnooze: { table: { disable: true } },
+    handleClose: { table: { disable: true } },
+    handleKeyDown: { table: { disable: true } },
+    show: { control: "boolean", defaultValue: true },
+    closeAriaLabel: { control: "text", defaultValue: "Webex Teams aria label" },
+    remindAriaLabel: { control: "text", defaultValue: "Webex Teams Remind" },
+    message: { control: "text", defaultValue: "Webex Teams Message" },
+    status: { control: "text", defaultValue: "Webex Teams Status" },
+    title: { control: "text", defaultValue: "Webex Teams Title" },
+    role: { control: { type: "select", options: MeetingAlertRole }, defaultValue: "alert" },
+    userStyles: { control: "text", defaultValue: " " },
+    withAttendees: { control: "boolean", defaultValue: false }
+  },
+  parameters: {
+    a11y: {
+      element: "md-meeting-alert"
+    },
+    docs: {
+      page: mdx,
+      description: {
+        component: "A typical usage of Meeting Alert, with different variations as individual stories"
+      }
+    }
+  }
+};
+
+export const MeetingAlert: StoryObj = {
+  args: {
+    show: true,
+    status: "Webex Teams Status",
+    title: "Webex Teams Title",
+    src: "https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+  },
+  render: (args: Args) => {
+    if (args.withAttendees) {
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      return html`
+        <md-meeting-alert
+          show
+          .attendees=${args.attendees}
+          status="Queue_Demo7"
+          title="Jane Doe"
+          src=${MEETING_ALERT_SRC}
+          @close=${action("click")}
+        >
+        </md-meeting-alert>
+      `;
+    } else {
+      return html`
+        <md-meeting-alert
+          .show=${args.show}
+          .closeAriaLabel=${args.closeAriaLabel}
+          .snoozeAriaLabel=${args.remindAriaLabel}
+          .message=${args.message}
+          .status="${args.status}"
+          .role="${args.role}"
+          .title="${args.title}"
+          src=${args.src}
+          .userStyles=${args.userStyles}
+          @close=${action("click")}
+          @snooze=${action("snooze")}
+        ></md-meeting-alert>
+      `;
+    }
+  }
+};
+
+export const MeetingAlertActionThroughSlot: StoryObj = {
+  args: {
+    ...MeetingAlert.args
+  },
+  render: (args: Args) => {
+    return html`
+      <h3>md-meeting-alert action through slot</h3>
+      <md-meeting-alert .show=${args.show} .status="${args.status}" .title="${args.title}">
+        <md-button
+          slot="custom-action"
+          ariaLabel="Action"
+          circle
+          @click=${(e: Event) => {
+            console.log("Custom action passed via slot");
+            e.stopPropagation();
+          }}
+          size=${44}
+          role="button"
+        >
+          <md-icon name="icon-alarm_16"></md-icon>
+        </md-button>
+      </md-meeting-alert>
+    `;
+  }
+};
+
+export const MeetingAlertImageThroughSlot: StoryObj = {
+  args: {
+    ...MeetingAlert.args
+  },
+  render: (args: Args) => {
+    return html`
+      <h3>md-meeting-alert image through slot</h3>
+      <md-meeting-alert
+        .show=${args.show}
+        .status="${args.status}"
+        .title="${args.title}"
+        userStyles=":host .md-alert { background: red; color: white }"
+      >
+        <span slot="custom-avatar">
+          <img width="40" src=${args.src} />
+        </span>
+      </md-meeting-alert>
+    `;
+  }
+};
+
+export const MeetingAlertSrcThroughSlot: StoryObj = {
+  args: {
+    ...MeetingAlert.args
+  },
+  render: (args: Args) => {
+    return html`
+      <h3>md-meeting-alert src through slot</h3>
+      <md-meeting-alert .show=${args.show} .status="${args.status}" .title="${args.title}">
+        <span slot="custom-avatar">
+          <img width="40'" height="40'" src=${args.src} />
+        </span>
+      </md-meeting-alert>
+    `;
+  }
+};
+
+export const MeetingAlertThroughSrc: StoryObj = {
+  args: {
+    ...MeetingAlert.args
+  },
+  render: (args: Args) => {
+    return html`
+      <h3>md-meeting-alert image through src</h3>
+      <md-meeting-alert
+        .show=${args.show}
+        .status="${args.status}"
+        .title="${args.title}"
+        .onKeyDown=${() => console.log("passed onKeyDown Func")}
+        src=${args.src}
+      >
+      </md-meeting-alert>
+    `;
+  }
+};

package/src/components/meeting-alert/MeetingAlert.test.ts

@@ -0,0 +1,227 @@
+import { Key } from "@/constants";
+import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
+import "./MeetingAlert";
+import { MeetingAlert } from "./MeetingAlert";
+
+describe("MeetingAlert", () => {
+  afterEach(fixtureCleanup);
+
+  test("Meeting-Alert component is not null", async () => {
+    const ma = await fixture("<md-meeting-alert></md-meeting-alert>");
+    expect(ma).not.toBeNull;
+  });
+
+  test("should render one MeetingAlert", async () => {
+    const el = await fixture(html` <md-meeting-alert title="Test Name"></md-meeting-alert> `);
+    expect(el).not.toBeNull;
+  });
+
+  test("should handle default className prop", async () => {
+    const container = await fixture("<md-meeting-alert></md-meeting-alert>");
+    expect(container.className).toEqual("");
+  });
+
+  test("should handle role prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture(html` <md-meeting-alert role="button"></md-meeting-alert> `);
+    expect(el.getAttribute("role")).toEqual("button");
+  });
+
+  test("should handle default role prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    expect(el.getAttribute("role")).toBeNull();
+  });
+
+  test("should handle message prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture(html`
+      <md-meeting-alert message="Test message"></md-meeting-alert>
+    `);
+    expect(el.getAttribute("message")).toEqual("Test message");
+  });
+
+  test("should handle default message prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    expect(el.getAttribute("message")).toBeNull();
+  });
+
+  test("should handle status prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture(html` <md-meeting-alert status="Test status"></md-meeting-alert> `);
+    expect(el.getAttribute("status")).toEqual("Test status");
+  });
+
+  test("should handle title prop", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture(html` <md-meeting-alert title="Test title"></md-meeting-alert> `);
+    expect(el.getAttribute("title")).toEqual("Test title");
+  });
+
+  test("should dispatch 'snooze' event on _onSnooze call", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    const snoozeEventSpy = jest.fn();
+    el.addEventListener("snooze", snoozeEventSpy);
+    const event = new Event("test");
+    el._onSnooze(event);
+    expect(snoozeEventSpy).toHaveBeenCalled();
+    expect(snoozeEventSpy.mock.calls[0][0].detail.srcEvent).toBe(event);
+  });
+
+  test("handleKeyDown should call handleClose on Escape key press", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    const handleCloseSpy = jest.spyOn(el, "handleClose");
+    const keyboardEvent = new KeyboardEvent("keydown", { code: "Escape" });
+    el.handleKeyDown(keyboardEvent);
+    expect(handleCloseSpy).toHaveBeenCalledWith(keyboardEvent);
+  });
+
+  test("handleKeyDown should call handleClose when 'close' button is pressed with Enter key", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    const handleCloseSpy = jest.spyOn(el, "handleClose");
+    const button = document.createElement("button");
+    button.setAttribute("aria-label", "close");
+    const keyboardEvent = new KeyboardEvent("keydown", { code: "Enter" });
+    Object.defineProperty(keyboardEvent, "target", { value: button });
+    el.handleKeyDown(keyboardEvent);
+    expect(handleCloseSpy).toHaveBeenCalledWith(keyboardEvent);
+  });
+
+  test("handleKeyDown should call handleClose when 'close' button is pressed with Space key", async () => {
+    const el: MeetingAlert.ELEMENT = await fixture("<md-meeting-alert></md-meeting-alert>");
+    const handleCloseSpy = jest.spyOn(el, "handleClose");
+    const button = document.createElement("button");
+    button.setAttribute("aria-label", "close");
+    const keyboardEvent = new KeyboardEvent("keydown", { code: "Space" });
+    Object.defineProperty(keyboardEvent, "target", { value: button });
+    el.handleKeyDown(keyboardEvent);
+    expect(handleCloseSpy).toHaveBeenCalledWith(keyboardEvent);
+  });
+
+  describe("Should Handle Events", () => {
+    afterEach(() => {
+      fixtureCleanup();
+      jest.restoreAllMocks();
+    });
+
+    const mockEvent = jest.fn();
+    test("Should trigger a passed Snooze event", async () => {
+      const element: MeetingAlert.ELEMENT = await fixture(html`
+        <md-meeting-alert show .onSnooze=${mockEvent}> </md-meeting-alert>
+      `);
+      const spyClick = jest.spyOn(element, "handleSnooze");
+      const snoozeElement = await element.shadowRoot!.querySelector("md-button[aria-label='snooze']");
+      snoozeElement!.dispatchEvent(new MouseEvent("click"));
+      // TODO: Fix KeyDown event tests that fire on md-button elements, and test for expect(spyClick).toHaveBeenCalledTimes(2);
+      // snoozeElement?.dispatchEvent(
+      //   new KeyboardEvent("keydown", {
+      //     code: Key.Enter
+      //   })
+      // );
+      expect(spyClick).toHaveBeenCalledTimes(1);
+    });
+
+    describe("Should handle KeyDown events", () => {
+      test("Should trigger a passed Keydown event", async () => {
+        const element: MeetingAlert.ELEMENT = await fixture(html`
+          <md-meeting-alert show .onKeyDown=${mockEvent}> </md-meeting-alert>
+        `);
+        const spyKeyDown = jest.spyOn(element, "handleKeyDown");
+        const meetingAlert = element.shadowRoot!.querySelector("div");
+        meetingAlert!.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            code: Key.Enter
+          })
+        );
+        meetingAlert!.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            code: Key.Space
+          })
+        );
+        meetingAlert!.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            code: Key.Escape
+          })
+        );
+        expect(spyKeyDown).toHaveBeenCalledTimes(3);
+      });
+      test("Should handleClose when escape key is pressed", async () => {
+        const element: MeetingAlert.ELEMENT = await fixture(html`
+          <md-meeting-alert
+            show
+            status="Queue_Demo7"
+            title="John Doe"
+            src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+          >
+          </md-meeting-alert>
+        `);
+        const spyKeyDown = jest.spyOn(element, "handleKeyDown");
+        const spyClose = jest.spyOn(element, "handleClose");
+        const meetingAlert = await element.shadowRoot!.querySelector("div");
+        meetingAlert!.dispatchEvent(
+          new KeyboardEvent("keydown", {
+            code: Key.Escape
+          })
+        );
+        expect(spyKeyDown).toHaveBeenCalledTimes(1);
+        expect(spyClose).toHaveBeenCalledTimes(1);
+      });
+      // TODO: Fix KeyDown event tests that fire on md-button elements
+      // test("Should handleClose when close button is activated with keydown", async () => {
+      //   const element: MeetingAlert = await fixture(
+      //     html`
+      //       <md-meeting-alert
+      //         show
+      //         status="Queue_Demo7"
+      //         title="John Doe"
+      //         src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+      //       >
+      //       </md-meeting-alert>
+      //     `
+      //   );
+      //   const spyKeyDown = jest.spyOn(element, "handleKeyDown");
+      //   const spyClose = jest.spyOn(element, "handleClose");
+      //   const closeButton = await element.shadowRoot!.querySelector("md-button[ariaLabel='close']");
+      //   closeButton!.dispatchEvent(
+      //     new KeyboardEvent("keydown", {
+      //       code: Key.Enter
+      //     })
+      //   );
+      //   closeButton!.dispatchEvent(
+      //     new KeyboardEvent("keydown", {
+      //       code: Key.Space,
+      //     })
+      //   );
+      //   expect(spyKeyDown).toHaveBeenCalledTimes(2);
+      //   expect(spyClose).toHaveBeenCalledTimes(2);
+      // });
+      test("Should handle custom key event", async () => {
+        const el: MeetingAlert.ELEMENT = await fixture(html`
+          <md-meeting-alert title="Test title"></md-meeting-alert>
+        `);
+        expect(el.getAttribute("title")).toEqual("Test title");
+      });
+    });
+  });
+
+  describe("Should render correct Avatar", () => {
+    test("Should render a single Avatar", async () => {
+      const element: MeetingAlert.ELEMENT = await fixture(html`
+        <md-meeting-alert show status="Queue_Demo7" title="Jane Doe"> </md-meeting-alert>
+      `);
+
+      expect(element.shadowRoot!.querySelectorAll("md-avatar").length).toBe(1);
+    });
+    test("Should render a Composite Avatar when 2 or more attendees are provided", async () => {
+      const element: MeetingAlert.ELEMENT = await fixture(html`
+        <md-meeting-alert
+          .attendees=${[
+            { title: "J $", src: null, alt: "J $" },
+            { title: "Jefe Guadelupe", src: null, alt: "Jefe Guadelupe" }
+          ]}
+          show
+          status="Queue_Demo7"
+          title="Jane Doe"
+        >
+        </md-meeting-alert>
+      `);
+
+      expect(element.shadowRoot!.querySelectorAll(".md-composite-avatar").length).toBe(1);
+    });
+  });
+});

package/src/components/meeting-alert/MeetingAlert.ts

@@ -0,0 +1,203 @@
+/**
+ * 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/avatar/Avatar";
+import "@/components/button/Button";
+import "@/components/icon/Icon";
+import { Key } from "@/constants";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, LitElement, property, TemplateResult } from "lit-element";
+import { nothing } from "lit-html";
+import { templateHTML } from "./CompositeAvatar"; // Keep type import as a relative path
+import styles from "./scss/module.scss";
+
+export const MeetingAlertRole = [
+  "alert",
+  "alertdialog",
+  "button",
+  "checkbox",
+  "dialog",
+  "link",
+  "option",
+  "status"
+] as const;
+
+export namespace MeetingAlert {
+  export type Role = (typeof MeetingAlertRole)[number];
+
+  @customElementWithCheck("md-meeting-alert")
+  export class ELEMENT extends LitElement {
+    @property({ type: Array }) attendees = [{ title: "Attendee", src: null, alt: "Attendee" }];
+    @property({ type: String }) closeAriaLabel = "close";
+    @property({ attribute: false }) onKeyDown: MeetingAlert.ELEMENT["handleKeyDown"] | null = null;
+    @property({ attribute: false }) onSnooze: MeetingAlert.ELEMENT["handleSnooze"] | null = null;
+    @property({ type: String }) message = "";
+    @property({ type: String }) snoozeAriaLabel = "snooze";
+    @property({ type: String }) role: Role = "button";
+    @property({ type: Boolean }) show = false;
+    @property({ type: String }) src = "";
+    @property({ type: String }) status = "";
+    @property({ type: String }) userStyles = "";
+    @property({ type: String }) title = "";
+
+    _onSnooze = (e: Event) => {
+      this.dispatchEvent(
+        new CustomEvent("snooze", {
+          composed: true,
+          detail: {
+            srcEvent: e
+          }
+        })
+      );
+    };
+
+    _onClose = (e: Event) => {
+      this.dispatchEvent(
+        new CustomEvent("close", {
+          composed: true,
+          detail: {
+            srcEvent: e
+          }
+        })
+      );
+    };
+
+    handleSnooze = (e: Event) => {
+      this.onSnooze ? this.onSnooze(e) : this._onSnooze(e);
+      e.stopPropagation();
+    };
+
+    handleClose = (e: Event) => {
+      this._onClose(e);
+      e.stopPropagation();
+    };
+
+    handleKeyDown = (e: KeyboardEvent): void => {
+      if (e.code === Key.Escape) {
+        this.handleClose(e);
+      }
+      if (e.code === Key.Enter || e.code === Key.Space) {
+        const target = e.target as Element;
+        switch (target.attributes.getNamedItem("aria-label")!.value) {
+          case "close":
+            this.handleClose(e);
+            break;
+          case "snooze":
+            this.handleSnooze(e);
+            break;
+          default:
+            break;
+        }
+        e.preventDefault();
+      }
+      if (this.onKeyDown) this.onKeyDown(e);
+    };
+
+    getStyles() {
+      return html`
+        <style>
+          ::slotted(img) {
+            display: inline-block;
+            vertical-align: middle;
+            -ms-interpolation-mode: bicubic;
+            height: auto;
+            max-width: 100%;
+            border-style: none;
+          }
+          ${this.userStyles}
+        </style>
+      `;
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    render(): TemplateResult {
+      const {
+        attendees,
+        message,
+        onSnooze,
+        role,
+        src,
+        status,
+        title,
+        closeAriaLabel,
+        show,
+        snoozeAriaLabel: remindAriaLabel
+      } = this;
+
+      const renderAvatar = (): TemplateResult => {
+        if (attendees.length >= 2) {
+          return templateHTML(attendees);
+        } else {
+          return html` <md-avatar title=${title} label="avatar" src=${src} tabindex="-1"></md-avatar> `;
+        }
+      };
+
+      return html`
+        ${this.getStyles()}
+        ${show
+          ? html`
+              <div
+                aria-label="Meeting Alert"
+                class=${`md-alert md-alert--meeting`}
+                @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}
+                role=${role}
+              >
+                <slot name="custom-avatar"> ${renderAvatar()} </slot>
+                <div class=${`md-alert__content ${onSnooze ? "" : " md-alert__content--wide"}`}>
+                  <div class="md-alert__title" title=${title}>${title}</div>
+                  <div class="md-alert__status" title=${status}>${status}</div>
+                  <div class="md-alert__message" title=${message}>${message}</div>
+                </div>
+                ${onSnooze
+                  ? html`
+                      <div class="md-alert__button">
+                        <md-button
+                          variant="secondary"
+                          aria-label=${remindAriaLabel}
+                          circle
+                          @click=${(e: Event) => {
+                            this.handleSnooze(e);
+                          }}
+                          .size=${40}
+                        >
+                          <md-icon name="alarm-bold" size="16" iconSet="momentumDesign"></md-icon>
+                        </md-button>
+                      </div>
+                    `
+                  : nothing}
+                <slot name="custom-action">
+                  <md-button
+                    class="md-alert__button"
+                    variant="ghost"
+                    ariaLabel=${closeAriaLabel}
+                    circle
+                    @click=${(e: Event) => {
+                      this.handleClose(e);
+                    }}
+                    .size=${40}
+                  >
+                    <md-icon name="cancel-bold" size="16" iconSet="momentumDesign"></md-icon>
+                  </md-button>
+                </slot>
+              </div>
+            `
+          : nothing}
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-meeting-alert": MeetingAlert.ELEMENT;
+  }
+}