@momentum-ui/web-components 2.16.3 → 2.16.4

package/src/components/avatar/Presence.test.ts

@@ -1,225 +0,0 @@
-import { fixture, fixtureCleanup } from "@open-wc/testing-helpers";
-import { html } from "lit-element";
-import "./Presence";
-import { Presence } from "./Presence";
-import { getPresenceIconColor, getPresenceSize } from "./Presence.utils";
-
-describe("Presence", () => {
-  afterEach(fixtureCleanup);
-
-  test("should set size property", async () => {
-    const element = await fixture<Presence.ELEMENT>(
-      html`
-        <md-presence size="36" title="active"></md-presence>
-      `
-    );
-    expect(element.size).toEqual(36);
-    expect(element.title).toEqual("active");
-  });
-
-  test("should set color property", async () => {
-    const element = await fixture<Presence.ELEMENT>(html`
-      <md-presence color="var(--mds-color-theme-indicator-stable)" title="active"></md-presence>
-    `);
-    expect(element.color).toEqual("var(--mds-color-theme-indicator-stable)");
-    expect(element.title).toEqual("active");
-  });
-
-  // Present.utils tests
-  test("returns correct values for active presenceType", () => {
-    const result = getPresenceIconColor("active", false);
-    expect(result).toEqual({
-      presenceIcon: "active-presence-small-filled",
-      presenceColor: "var(--avatar-presence-active)"
-    });
-  });
-
-  test("returns correct values for meeting presenceType", () => {
-    const result = getPresenceIconColor("meeting", false);
-    expect(result).toEqual({
-      presenceIcon: "camera-presence_14",
-      presenceColor: "var(--avatar-presence-unstable)"
-    });
-  });
-
-  test("returns correct values for schedule presenceType", () => {
-    const result = getPresenceIconColor("schedule", false);
-    expect(result).toEqual({
-      presenceIcon: "meetings-presence_14",
-      presenceColor: "var(--avatar-presence-unstable)"
-    });
-  });
-
-  test("returns correct values for call presenceType", () => {
-    const result = getPresenceIconColor("call", false);
-    expect(result).toEqual({
-      presenceIcon: "handset-active_16",
-      presenceColor: "var(--avatar-presence-unstable)"
-    });
-  });
-
-  test("returns correct values for dnd presenceType", () => {
-    const result = getPresenceIconColor("dnd", false);
-    expect(result).toEqual({
-      presenceIcon: "dnd-presence_14",
-      presenceColor: "var(--avatar-presence-dnd)"
-    });
-  });
-
-  test("returns correct values for presenting presenceType", () => {
-    const result = getPresenceIconColor("presenting", false);
-    expect(result).toEqual({
-      presenceIcon: "content-share_14",
-      presenceColor: "var(--avatar-presence-dnd)"
-    });
-  });
-
-  test("returns correct values for quiet hours presenceType", () => {
-    const result = getPresenceIconColor("quiet-hours", false);
-    expect(result).toEqual({
-      presenceIcon: "quiet-hours-presence-filled",
-      presenceColor: "var(--avatar-presence-inactive)"
-    });
-  });
-
-  test("returns correct values for away presenceType", () => {
-    const result = getPresenceIconColor("away", false);
-    expect(result).toEqual({
-      presenceIcon: "recents-presence_14",
-      presenceColor: "var(--avatar-presence-inactive)"
-    });
-  });
-
-  test("returns correct values for idle presenceType", () => {
-    const result = getPresenceIconColor("idle", false);
-    expect(result).toEqual({
-      presenceIcon: "recents-presence_14",
-      presenceColor: "var(--avatar-presence-inactive)"
-    });
-  });
-
-  test("returns correct values for away calling presenceType", () => {
-    const result = getPresenceIconColor("away-calling", false);
-    expect(result).toEqual({
-      presenceIcon: "away-calling-presence-filled",
-      presenceColor: "var(--avatar-presence-inactive)"
-    });
-  });
-
-  test("returns correct values for pto presenceType", () => {
-    const result = getPresenceIconColor("ooo", false);
-    expect(result).toEqual({
-      presenceIcon: "pto-presence-filled",
-      presenceColor: "var(--avatar-presence-inactive)"
-    });
-  });
-
-  test("returns correct values for busy presenceType", () => {
-    const result = getPresenceIconColor("busy", false);
-    expect(result).toEqual({
-      presenceIcon: "busy-presence-bold",
-      presenceColor: "var(--avatar-presence-unstable)"
-    });
-  });
-
-  test("returns correct values for on mobile presenceType", () => {
-    const result = getPresenceIconColor("on-mobile", false);
-    expect(result).toEqual({
-      presenceIcon: "phone-filled",
-      presenceColor: "var(--avatar-presence-inactive)"
-    });
-  });
-
-  test("returns correct values for on device presenceType", () => {
-    const result = getPresenceIconColor("on-device", false);
-    expect(result).toEqual({
-      presenceIcon: "generic-device-video_16",
-      presenceColor: "var(--avatar-presence-inactive)"
-    });
-  });
-
-  test("returns correct values for meeting presenceType", () => {
-    const result = getPresenceIconColor("on-hold", false);
-    expect(result).toEqual({
-      presenceIcon: "pause-badge-filled",
-      presenceColor: "var(--avatar-presence-inactive)"
-    });
-  });
-
-  test("returns correct values for engaged presenceType", () => {
-    const result = getPresenceIconColor("engaged", false);
-    expect(result).toEqual({
-      presenceIcon: "busy-presence-bold",
-      presenceColor: "var(--avatar-presence-engaged)"
-    });
-  });
-
-  test("returns correct values for rona presenceType", () => {
-    const result = getPresenceIconColor("rona", false);
-    expect(result).toEqual({
-      presenceIcon: "dnd-presence-badge-filled",
-      presenceColor: "var(--avatar-presence-rona)"
-    });
-  });
-
-  test("returns correct values when failureBadge is true", () => {
-    const result = getPresenceIconColor("", true);
-    expect(result).toEqual({
-      presenceIcon: "warning-badge-filled",
-      presenceColor: "var(--mds-color-theme-indicator-attention)"
-    });
-  });
-
-  test("returns an empty object for invalid presenceType", () => {
-    const result = getPresenceIconColor("", false);
-    expect(result).toEqual({});
-  });
-});
-
-describe("getPresenceSize", () => {
-  it("should return 14 for sizes <= 24", () => {
-    expect(getPresenceSize(24)).toBe(14);
-    expect(getPresenceSize(20)).toBe(14);
-    expect(getPresenceSize(10)).toBe(14);
-  });
-
-  it("should return 14 for sizes <= 32", () => {
-    expect(getPresenceSize(32)).toBe(14);
-    expect(getPresenceSize(25)).toBe(14);
-  });
-
-  it("should return 16 for sizes <= 36", () => {
-    expect(getPresenceSize(36)).toBe(13.94);
-    expect(getPresenceSize(33)).toBe(13.94);
-  });
-
-  it("should return 16 for sizes <= 40", () => {
-    expect(getPresenceSize(40)).toBe(13.94);
-    expect(getPresenceSize(37)).toBe(13.94);
-  });
-
-  it("should return 16 for sizes <= 48", () => {
-    expect(getPresenceSize(48)).toBe(13.94);
-    expect(getPresenceSize(41)).toBe(13.94);
-  });
-
-  it("should return 18 for sizes <= 64", () => {
-    expect(getPresenceSize(64)).toBe(18.58);
-    expect(getPresenceSize(49)).toBe(18.58);
-  });
-
-  it("should return 20 for sizes <= 72", () => {
-    expect(getPresenceSize(72)).toBe(20.9);
-    expect(getPresenceSize(65)).toBe(20.9);
-  });
-
-  it("should return 28 for sizes <= 88", () => {
-    expect(getPresenceSize(88)).toBe(25.55);
-    expect(getPresenceSize(73)).toBe(25.55);
-  });
-
-  it("should return 36 for sizes > 88", () => {
-    expect(getPresenceSize(89)).toBe(36);
-    expect(getPresenceSize(100)).toBe(36);
-  });
-});

package/src/components/avatar/Presence.ts

@@ -1,46 +0,0 @@
-import "@/components/icon/Icon";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import reset from "@/wc_scss/reset.scss";
-import { html, LitElement, property } from "lit-element";
-import { AvatarSize } from "./Avatar.constants";
-import { getPresenceSize } from "./Presence.utils";
-import styles from "./scss/module.scss";
-
-export namespace Presence {
-  export type Size = typeof AvatarSize[number];
-
-  @customElementWithCheck("md-presence")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) name = "";
-    @property({ type: Number }) size: Size = 48;
-    @property({ type: String }) title = "";
-    @property({ type: String }) color = "";
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      const iconSize = getPresenceSize(this.size);
-
-      return html`
-        <div class="avatar-presence-wrapper" data-size=${this.size} data-icon-size=${iconSize}>
-          <md-icon
-            name="${this.name}"
-            color="${this.color}"
-            size=${iconSize}
-            title="${this.title}"
-            .iconSet=${"momentumDesign"}
-          >
-          </md-icon>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-presence": Presence.ELEMENT;
-  }
-}

package/src/components/avatar/Presence.utils.ts

@@ -1,114 +0,0 @@
-type ReturnType = {
-  presenceIcon: string | undefined;
-  presenceColor: string | undefined;
-};
-
-export const getPresenceIconColor = (
-  presenceType: string,
-  failureBadge: boolean,
-  isMomentumDesign = false
-): ReturnType => {
-  let presenceIcon = "";
-  let presenceColor = "";
-
-  if (failureBadge) {
-    presenceIcon = "warning-badge-filled";
-    presenceColor = "var(--mds-color-theme-indicator-attention)";
-  } else {
-    if (!presenceType || presenceType === "") {
-      return {
-        presenceIcon: undefined,
-        presenceColor: undefined
-      };
-    }
-
-    switch (presenceType) {
-      case "active":
-        presenceIcon = "active-presence-small-filled";
-        presenceColor = "var(--avatar-presence-active)";
-        break;
-      case "meeting":
-        presenceIcon = isMomentumDesign ? "camera-presence-filled" : "camera-presence_14";
-        presenceColor = "var(--avatar-presence-unstable)";
-        break;
-      case "schedule":
-        presenceIcon = isMomentumDesign ? "meetings-presence-badge-filled" : "meetings-presence_14";
-        presenceColor = "var(--avatar-presence-unstable)";
-        break;
-      case "call":
-        presenceIcon = isMomentumDesign ? "handset-filled" : "handset-active_16";
-        presenceColor = "var(--avatar-presence-unstable)";
-        break;
-      case "dnd":
-        presenceIcon = isMomentumDesign ? "dnd-presence-badge-filled" : "dnd-presence_14";
-        presenceColor = "var(--avatar-presence-dnd)";
-        break;
-      case "presenting":
-        presenceIcon = isMomentumDesign ? "share-screen-badge-filled" : "content-share_14";
-        presenceColor = "var(--avatar-presence-dnd)";
-        break;
-      case "quiet-hours":
-        presenceIcon = "quiet-hours-presence-filled"; // quiet-presence
-        presenceColor = "var(--avatar-presence-inactive)";
-        break;
-      case "away":
-      case "idle":
-      case "inactive":
-        presenceIcon = isMomentumDesign ? "recents-presence-badge-filled" : "recents-presence_14";
-        presenceColor = "var(--avatar-presence-inactive)";
-        break;
-      case "away-calling":
-        presenceIcon = "away-calling-presence-filled";
-        presenceColor = "var(--avatar-presence-inactive)";
-        break;
-      case "ooo":
-        presenceIcon = "pto-presence-filled";
-        presenceColor = "var(--avatar-presence-inactive)";
-        break;
-      case "busy":
-        presenceIcon = "busy-presence-bold";
-        presenceColor = "var(--avatar-presence-unstable)";
-        break;
-      case "on-mobile":
-        presenceIcon = "phone-filled";
-        presenceColor = "var(--avatar-presence-inactive)";
-        break;
-      case "on-device":
-        presenceIcon = isMomentumDesign ? "generic-device-video-filled" : "generic-device-video_16";
-        presenceColor = "var(--avatar-presence-inactive)";
-        break;
-      case "on-hold":
-        presenceIcon = "pause-badge-filled";
-        presenceColor = "var(--avatar-presence-inactive)";
-        break;
-      case "engaged":
-        presenceIcon = "busy-presence-bold";
-        presenceColor = "var(--avatar-presence-engaged)";
-        break;
-      case "rona":
-        presenceIcon = "dnd-presence-badge-filled";
-        presenceColor = "var(--avatar-presence-rona)";
-        break;
-      default:
-        break;
-    }
-  }
-
-  return { presenceColor, presenceIcon };
-};
-
-export function getPresenceSize(size: number): number {
-  if (size <= 32) {
-    return 14;
-  } else if (size <= 48) {
-    return 13.94;
-  } else if (size <= 64) {
-    return 18.58;
-  } else if (size <= 72) {
-    return 20.9;
-  } else if (size <= 88) {
-    return 25.55;
-  } else {
-    return 36;
-  }
-}

package/src/components/avatar/scss/avatar.scss

@@ -1,331 +0,0 @@
-.md-avatar {
-  @include avatar-size;
-  border-radius: 100%;
-  display: inline-flex;
-  font-family: var(--brand-font-medium, $brand-font-regular);
-  font-weight: 550;
-  position: relative;
-  text-transform: uppercase;
-  user-select: none;
-  cursor: var(--avatar-cursor, default);
-
-  > .md-avatar__failure-badge::after {
-    @include flex;
-    @include border-radius($global-rounded);
-    background-color: $avatar-failure-badge__background;
-    bottom: $avatar-badge__spacing;
-    color: $avatar-failure-badge__color;
-    content: $icon-priority_12;
-    font-family: $icon-font-name;
-    font-size: $avatar-failure-badge__size;
-    height: $avatar-failure-badge__size;
-    position: absolute;
-    right: $avatar-badge__spacing;
-    width: $avatar-failure-badge__size;
-    z-index: $zindex-close;
-  }
-
-  > .md-avatar__notification-badge::after {
-    @include border-radius($global-rounded);
-
-    @include flex;
-    background-color: $avatar-notification-badge__color;
-    content: "\00a0";
-    height: $avatar-notification-badge__size;
-    position: absolute;
-    right: $avatar-badge__spacing;
-    top: $avatar-badge__spacing;
-    width: $avatar-notification-badge__size;
-    z-index: $zindex-close;
-  }
-
-  &.md-avatar--dark {
-    &.md-avatar--active::after {
-      box-shadow: $avatar--active__shadow--dark;
-    }
-    &.md-avatar--engaged::after {
-      box-shadow: $avatar--engaged__shadow--dark;
-    }
-    &.md-avatar--idle::after {
-      box-shadow: $avatar--idle__shadow--dark;
-    }
-    &.md-avatar--rona::after {
-      box-shadow: $avatar--rona__shadow--dark;
-    }
-  }
-
-  &.md-avatar--typing {
-    > .md-loading {
-      @include avatar-overlay-style;
-    }
-  }
-
-  &.md-avatar--bot::after {
-    background-color: $avatar-bot__background;
-    border-radius: $avatar-bot__border-radius;
-    bottom: 0;
-    color: $avatar-bot__color;
-    content: "Bot";
-    font-size: $avatar-bot__font-size;
-    left: 0;
-    line-height: $avatar-bot__line-height;
-    padding: $avatar-bot__padding;
-    position: absolute;
-    text-transform: none;
-  }
-
-  .md-avatar__img {
-    @include avatar-contents-base;
-
-    background-color: $avatar-img__background;
-  }
-
-  .md-avatar__letter {
-    @include avatar-contents-base;
-    background-color: $avatar-letter__background;
-    color: $avatar-letter__color;
-
-    md-loading {
-      align-items: center;
-      background: $black-40;
-      border-radius: 100%;
-      bottom: 0;
-      color: $md-white-100;
-      display: flex;
-      justify-content: center;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
-
-  .md-avatar__self {
-    @include avatar-contents-base;
-
-    background-color: $avatar-self__background;
-    border: $avatar-self__border;
-    color: $avatar-self__color;
-  }
-
-  .md-avatar__icon {
-    @include avatar-contents-base;
-    background-color: var(--avatar-icon-bg-color, $avatar-icon__background);
-
-    color: $avatar-icon__color;
-    fill: currentColor;
-
-    &--overview {
-      @include border-radius($global-rounded);
-      background-color: transparent;
-      box-shadow: inset 0 0 0 1px $white-16;
-
-      color: $md-white-100;
-    }
-  }
-
-  .md-avatar__icon,
-  .md-avatar__letter {
-    &.md-avatar--blue {
-      background-color: var(--avatar-blue-bg-color);
-    }
-
-    &.md-avatar--mint {
-      background-color: var(--avatar-mint-bg-color);
-    }
-
-    &.md-avatar--darkmint {
-      background-color: var(--avatar-darkmint-bg-color);
-    }
-
-    &.md-avatar--green {
-      background-color: var(--avatar-green-bg-color);
-    }
-
-    &.md-avatar--yellow {
-      background-color: var(--avatar-yellow-bg-color);
-    }
-
-    &.md-avatar--red {
-      background-color: var(--avatar-red-bg-color);
-    }
-
-    &.md-avatar--orange {
-      background-color: var(--avatar-orange-bg-color);
-    }
-
-    &.md-avatar--purple {
-      background-color: var(--avatar-purple-bg-color);
-    }
-
-    &.md-avatar--violet {
-      background-color: var(--avatar-violet-bg-color);
-    }
-
-    &.md-avatar--cyan {
-      background-color: var(--avatar-cyan-bg-color);
-    }
-
-    &.md-avatar--cobalt {
-      background-color: var(--avatar-cobalt-bg-color);
-    }
-
-    &.md-avatar--pink {
-      background-color: var(--avatar-pink-bg-color);
-    }
-
-    &.md-avatar--slate {
-      background-color: var(--avatar-slate-bg-color);
-    }
-
-    &.md-avatar--gold {
-      background-color: var(--avatar-gold-bg-color);
-    }
-
-    &.md-avatar--lime {
-      background-color: var(--avatar-lime-bg-color);
-    }
-  }
-
-  .md-avatar__img--hidden {
-    display: none;
-  }
-
-  &.md-avatar--clickable::after {
-    @include avatar-contents-base;
-    content: "";
-
-    position: absolute;
-  }
-
-  &.md-avatar--clickable {
-    &:hover::after {
-      @include avatar-overlay-style($md-white-100, $black_08);
-    }
-
-    &:active::after {
-      @include avatar-overlay-style($md-white-100, $black_16);
-    }
-  }
-
-  &.md-avatar--active::after {
-    @include avatar-contents-base;
-    box-shadow: $avatar--active__shadow;
-    content: "";
-    left: 0;
-
-    position: absolute;
-  }
-
-  &.md-avatar--engaged::after {
-    @include avatar-contents-base;
-    box-shadow: $avatar--engaged__shadow;
-    content: "";
-    left: 0;
-    position: absolute;
-  }
-
-  &.md-avatar--idle::after {
-    @include avatar-contents-base;
-    box-shadow: $avatar--idle__shadow;
-    content: "";
-    left: 0;
-    position: absolute;
-  }
-
-  &.md-avatar--rona::after {
-    @include avatar-contents-base;
-    box-shadow: $avatar--rona__shadow;
-    content: "";
-    left: 0;
-    position: absolute;
-  }
-
-  &.md-avatar--inactive {
-    opacity: $avatar--inactive__opacity;
-  }
-
-  @each $size-class, $dnd-size, $pto-size, $call-size, $meet-size, $present-size, $dimension in $avatar-sizes {
-    $size: $size-class;
-
-    @if $dimension {
-      $size: $dimension;
-    }
-
-    &.md-avatar--#{$size-class} {
-      @include avatar-size(rem-calc($size));
-
-      &.md-avatar--ooo::after {
-        @include avatar-overlay-style;
-        content: $pto-size;
-
-        font-size: rem-calc($size * 0.5);
-      }
-
-      &.md-avatar--dnd::after {
-        @include avatar-overlay-style;
-        content: $dnd-size;
-
-        font-size: rem-calc($size * 0.5);
-      }
-
-      &.md-avatar--call::after {
-        @include avatar-overlay-style;
-        content: $call-size;
-
-        font-size: rem-calc($size * 0.5);
-      }
-
-      &.md-avatar--meeting::after {
-        @include avatar-overlay-style;
-        content: $meet-size;
-
-        font-size: rem-calc($size * 0.5);
-      }
-
-      &.md-avatar--presenting::after {
-        @include avatar-overlay-style;
-        content: $present-size;
-
-        font-size: rem-calc($size * 0.5);
-      }
-
-      &.md-avatar--self {
-        md-icon {
-          height: rem-calc($size);
-        }
-
-        md-icon::part(icon) {
-          line-height: rem-calc($size);
-        }
-      }
-    }
-  }
-}
-
-:host {
-  display: inline-block;
-  line-height: 0rem;
-  vertical-align: middle;
-}
-
-::slotted(*) {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  position: absolute;
-}
-
-::slotted(img) {
-  border-style: none;
-  display: inline-block;
-  height: auto;
-  -ms-interpolation-mode: bicubic;
-  max-width: 100%;
-  vertical-align: middle;
-}
-
-@media (forced-colors: active) {
-  .md-avatar {
-    outline: 1px solid CanvasText;
-  }
-}