chore: update dependencies, fix eslint issues, update favorite

web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.13.10",
+  "version": "2.13.11",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
@@ -60,8 +60,8 @@
     "@interactjs/interact": "1.10.3",
     "@interactjs/modifiers": "1.10.3",
     "@interactjs/utils": "1.10.3",
-    "@momentum-design/icons": "0.0.154",
-    "@momentum-design/tokens": "0.0.73",
+    "@momentum-design/icons": "0.0.155",
+    "@momentum-design/tokens": "0.0.77",
     "@popperjs/core": "^2.4.4",
     "country-codes-list": "1.6.8",
     "country-flags-svg": "1.1.4",

web-components/src/[sandbox]/examples/card.ts

@@ -14,8 +14,8 @@ export class CardTemplateSandbox extends LitElement {
     this.addEventListener("card-menu-click", this.handleClickMenu as EventListener);
   }
 
-  private handleClickCard(e: MouseEvent) {
-    const { id } = e.detail as any;
+  private handleClickCard(e: CustomEvent) {
+    const { id } = e.detail;
 
     this.value = "Card " + id + ": is clickable";
   }
@@ -26,8 +26,8 @@ export class CardTemplateSandbox extends LitElement {
     this.value = "Card " + id + ": is key event";
   }
 
-  private handleClickMenu(e: MouseEvent) {
-    const { id, type } = e.detail as any;
+  private handleClickMenu(e: CustomEvent) {
+    const { id, type } = e.detail;
 
     this.value = "Card " + id + ": in " + type + " mode";
   }

web-components/src/[sandbox]/examples/favorite.ts

@@ -23,8 +23,8 @@ export class FavoriteTemplateSandbox extends LitElement {
     }
   }
 
-  private handleKeydownFavorite(e: KeyboardEvent) {
-    const { active, value } = e.detail as any;
+  private handleKeydownFavorite(e: CustomEvent) {
+    const { active, value } = e.detail;
 
     this.selected = active;
     if (active === true) {

web-components/src/[sandbox]/examples/menu-overlay.ts

@@ -331,7 +331,7 @@ export const menuOverlayTemplate = html`
 
 
   <h3 class="sandbox-header" style="margin: .5rem 1rem">with list (focus)</h3>
-  <md-menu-overlay class="queueDropdown" size="large" @menu-overlay-open=${(e: any) => {
+  <md-menu-overlay class="queueDropdown" size="large" @menu-overlay-open=${() => {
     console.log("Opening modal--");
     document.dispatchEvent(new CustomEvent("on-widget-update"));
   }}>

web-components/src/[sandbox]/examples/tabs.ts

@@ -22,7 +22,7 @@ import { unsafeHTML } from "lit-html/directives/unsafe-html";
 import { nanoid } from "nanoid";
 
 const tabsOverlayHtmlList = ["All templates", "Only Fb Template", ...Array(20)].map(
-  (value, index, array) => html`
+  (value, index) => html`
     <md-tab slot="tab">
       <md-icon name="recents_16"></md-icon>
       <span>${value || "Tab " + index}</span>
@@ -58,7 +58,7 @@ export class TabsOrderPrefsExample extends LitElement {
     ];
   }
 
-  handleResetTabs(e: any) {
+  handleResetTabs() {
     this.shadowRoot!.querySelector("md-tabs")!.dispatchEvent(
       new CustomEvent("clear-tab-order-prefs", {
         detail: {
@@ -78,8 +78,8 @@ export class TabsOrderPrefsExample extends LitElement {
       <div style="padding: 16px">
         <div>
           <md-button
-            @click=${(e: MouseEvent) => {
-              this.handleResetTabs(e);
+            @click=${() => {
+              this.handleResetTabs();
             }}
             variant="primary"
           >
@@ -471,7 +471,7 @@ export class TabsTemplateSandbox extends LitElement {
         <md-tabs selected="0" persist-selection tabs-id="tabOrder"  draggable justified>
           ${repeat(
             this.currentTabsOrder,
-            (tabElement) => nanoid(10),
+            () => nanoid(10),
             (tabElement) => html` ${unsafeHTML(this.tabs[tabElement])} `
           )}
           ${

web-components/src/components/button/tokens/mdv2-button-tokens.js

@@ -409,6 +409,9 @@ const button = {
       "icon-color": {
         common: "$mds-color-theme-text-warning-active"
       }
+    },
+    "border-radius": {
+      common: "100%"
     }
   },
   "focus-ring": {

web-components/src/components/card/Card.ts

@@ -11,6 +11,8 @@ import "@/components/favorite/Favorite";
 import "@/components/icon/Icon";
 import "@/components/list/List";
 import "@/components/list/ListItem";
+import "@/components/menu-overlay/MenuOverlay";
+import "@/components/tooltip/Tooltip";
 import { customElementWithCheck } from "@/mixins/CustomElementCheck";
 import reset from "@/wc_scss/reset.scss";
 import { html, LitElement, property } from "lit-element";
@@ -34,7 +36,7 @@ export namespace Card {
       return [reset, styles];
     }
 
-    handleCardClick(event: MouseEvent) {
+    handleCardClick() {
       this.dispatchEvent(
         new CustomEvent<{ id: string }>("card-click", {
           detail: {
@@ -97,7 +99,7 @@ export namespace Card {
           id="${this.id}"
           part="card"
           tabindex="0"
-          @click=${(ev: MouseEvent) => this.handleCardClick(ev)}
+          @click=${() => this.handleCardClick()}
           @keydown=${(ev: KeyboardEvent) => this.handleCardKeyDown(ev)}
         >
           <div class="md-card-header">

web-components/src/components/favorite/Favorite.test.ts

@@ -19,7 +19,7 @@ describe("Favorite component", () => {
     expect(component).toBeDefined();
 
     const icon = component.shadowRoot?.querySelector("md-icon");
-    expect(icon?.getAttribute("name")).toEqual("favorite_16");
+    expect(icon?.getAttribute("name")).toEqual("favorite-bold");
   });
 
   test("should set disabled Favorite", async () => {
@@ -36,14 +36,14 @@ describe("Favorite component", () => {
     expect(element.checked).toBeTruthy;
 
     const icon = element.shadowRoot?.querySelector("md-icon");
-    expect(icon?.getAttribute("name")).toEqual("favorite-active_16");
+    expect(icon?.getAttribute("name")).toEqual("favorite-filled");
   });
 
   test("should dispatch Action", async () => {
     const component = await fixtureFactory();
 
     const mockClick = jest.spyOn(component, "handleFavorite");
-    component.handleFavorite(new CustomEvent("click"));
+    component.handleFavorite();
     await elementUpdated(component);
 
     expect(mockClick).toHaveBeenCalled();

web-components/src/components/favorite/Favorite.ts

@@ -6,16 +6,15 @@
  *
  */
 
-import reset from "@/wc_scss/reset.scss";
-import { html, internalProperty, LitElement, property } from "lit-element";
-import { FocusMixin } from "@/mixins";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
 import "@/components/icon/Icon";
-import styles from "./scss/module.scss";
 import { Key } from "@/constants";
-import { nothing } from "lit-html";
+import { FocusMixin } from "@/mixins";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, internalProperty, LitElement, property } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
+import styles from "./scss/module.scss";
 
 export namespace Favorite {
   @customElementWithCheck("md-favorite")
@@ -38,7 +37,7 @@ export namespace Favorite {
       return [reset, styles];
     }
 
-    handleFavorite(event: CustomEvent) {
+    handleFavorite() {
       if (this.disabled) {
         return;
       } else {
@@ -103,8 +102,9 @@ export namespace Favorite {
             name="favorite-checkbox"
           />
           <md-icon
-            name="${this.checked ? "favorite-active_16" : "favorite_16"}"
-            color="${this.checked ? "yellow" : nothing}"
+            name="${this.checked ? "favorite-filled" : "favorite-bold"}"
+            iconSet="momentumDesign"
+            size="16"
           ></md-icon>
         </label>
       `;

web-components/src/components/favorite/scss/favorite.scss

@@ -6,8 +6,6 @@
   @include flex($display: inline-flex);
   border-radius: $favorite-border;
   height: $favorite-size;
-  padding: calc(#{$favorite-indent} * 1.5);
-  padding-top: calc(#{$favorite-indent} * 2.5);
   position: relative;
   width: $favorite-size;
 

web-components/src/components/favorite/scss/settings.scss

@@ -1,3 +1,3 @@
-$favorite-size: rem-calc(20);
-$favorite-border: rem-calc(4);
+$favorite-size: rem-calc(24);
+$favorite-border: var(--button-favorite-border-radius, rem-calc(4));
 $favorite-indent: rem-calc(2);

web-components/src/components/floating-modal/FloatingModal.test.ts

@@ -1,8 +1,7 @@
+import { Button } from "@/components/button/Button";
+import { elementUpdated, fixture, fixtureCleanup, html, nextFrame, oneEvent } from "@open-wc/testing-helpers";
 import "./FloatingModal";
 import { FloatingModal } from "./FloatingModal";
-import { elementUpdated, fixture, fixtureCleanup, html, nextFrame, oneEvent } from "@open-wc/testing-helpers";
-import { Button } from "@/components/button/Button";
-import interact from "@interactjs/interact/index";
 
 Object.defineProperties(Element.prototype, {
   getBoundingClientRect: {

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

@@ -130,7 +130,6 @@ export namespace MeetingAlert {
         title,
         closeAriaLabel,
         show,
-        onKeyDown,
         snoozeAriaLabel: remindAriaLabel
       } = this;
 

web-components/src/components/menu-overlay/MenuOverlay.ts

@@ -339,7 +339,7 @@ export namespace MenuOverlay {
       }
     }
 
-    private handleTriggerClick = (event: MouseEvent) => {
+    private handleTriggerClick = () => {
       this.toggleOverlay();
     };
 

web-components/src/components/slider/tokens/mdv2-slider-token.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
 
 const slider = {
   prefix: "mdv2",