@momentum-ui/web-components 2.16.3 → 2.16.4

package/src/components/list/tokens/lm-list-tokens.js

@@ -1,46 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const list = {
-  prefix: "lm",
-  component: "list",
-  "text-color": {
-    light: colors.gray[100].name,
-    dark: colors.gray["05"].name
-  },
-  hover: {
-    background: {
-      light: colors.blue[20].name,
-      dark: colors.blue[50].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray[100].name
-    }
-  },
-  disabled: {
-    "text-color": {
-      light: colors.gray[40].name,
-      dark: colors.gray[70].name
-    }
-  },
-  active: {
-    background: {
-      light: colors.blue[50].name,
-      dark: colors.blue[40].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray[100].name
-    }
-  },
-  focus: {
-    "border-color": {
-      light: colors.blue[70].name,
-      dark: colors.blue[40].name
-    }
-  }
-};
-
-module.exports = list;

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

@@ -1,46 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const list = {
-  prefix: "md",
-  component: "list",
-  "text-color": {
-    light: colors.gray[100].name,
-    dark: colors.gray["05"].name
-  },
-  hover: {
-    background: {
-      light: colors.blue[20].name,
-      dark: colors.blue[50].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray[100].name
-    }
-  },
-  disabled: {
-    "text-color": {
-      light: colors.gray[40].name,
-      dark: colors.gray[70].name
-    }
-  },
-  active: {
-    background: {
-      light: colors.blue[50].name,
-      dark: colors.blue[40].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray[100].name
-    }
-  },
-  focus: {
-    "border-color": {
-      light: colors.blue[70].name,
-      dark: colors.blue[40].name
-    }
-  }
-};
-
-module.exports = list;

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

@@ -1,46 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const list = {
-  prefix: "mdv2",
-  component: "list",
-  "text-color": {
-    common: "$mds-color-theme-text-primary-normal"
-  },
-  hover: {
-    background: {
-      common: "$mds-color-theme-background-primary-hover"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    }
-  },
-  disabled: {
-    "text-color": {
-      common: "$mds-color-theme-text-primary-disabled"
-    }
-  },
-  active: {
-    background: {
-      common: "$mds-color-theme-background-primary-active"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    }
-  },
-  focus: {
-    "border-color": {
-      common: "$mds-color-theme-outline-theme-normal"
-    }
-  },
-  "border-radius": {
-    pill: {
-      common: "9999px"
-    },
-    rounded: {
-      common: "0.5rem"
-    }
-  }
-};
-
-module.exports = list;

package/src/components/loading/Loading.stories.ts

@@ -1,39 +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/loading/Loading";
-import { Args, StoryObj } from "@storybook/web-components";
-import { html } from "lit-html";
-
-const options = {
-  Small: "small",
-  Middle: "middle",
-  Large: "large",
-  None: ""
-};
-
-export default {
-  title: "Components/Loading",
-  component: "md-loading",
-  argTypes: {
-    loadingClassMap: { table: { disable: true } },
-    size: { control: { type: "select", options }, defaultValue: "middle" }
-  },
-  parameters: {
-    a11y: {
-      element: "md-loading"
-    }
-  }
-};
-
-export const Loading: StoryObj = {
-  args: {},
-  render: (args: Args) => {
-    return html` <md-loading size=${args.size}></md-loading> `;
-  }
-};

package/src/components/loading/Loading.test.ts

@@ -1,29 +0,0 @@
-import "./Loading";
-import { Loading } from "./Loading";
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-
-describe("Loading", () => {
-  let element: Loading.ELEMENT;
-
-  afterEach(fixtureCleanup);
-
-  beforeEach(async () => {
-    element = await fixture<Loading.ELEMENT>(html` <md-loading></md-loading> `);
-  });
-
-  test("should render component", async () => {
-    expect(element).not.toBeNull();
-  });
-
-  test("should change size property accordingly", async () => {
-    expect(element.size).toEqual("");
-    element.size = "small";
-    expect(element.size).toEqual("small");
-    element.size = "large";
-    expect(element.size).toEqual("large");
-    element.size = "middle";
-    expect(element.size).toEqual("middle");
-    element.size = "";
-    expect(element.size).toEqual("");
-  });
-});

package/src/components/loading/Loading.ts

@@ -1,48 +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 { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import reset from "@/wc_scss/reset.scss";
-import { html, LitElement, property } from "lit-element";
-import { classMap } from "lit-html/directives/class-map.js";
-import styles from "./scss/module.scss";
-
-export namespace Loading {
-  export type LoadingSize = "small" | "middle" | "large" | "";
-
-  @customElementWithCheck("md-loading")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) size: LoadingSize = "";
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    get loadingClassMap() {
-      return {
-        [`md-loading--${this.size}`]: !!this.size
-      };
-    }
-
-    render() {
-      return html`
-        <div class="md-loading ${classMap(this.loadingClassMap)}">
-          <span class="md-loading__icon"></span>
-          <span class="md-loading__icon"></span>
-          <span class="md-loading__icon"></span>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-loading": Loading.ELEMENT;
-  }
-}

package/src/components/loading/scss/loading.scss

@@ -1,78 +0,0 @@
-@use "@/wc_scss/settings/core" as *;
-@use "~@momentum-ui/icons/scss/mixins" as *;
-@use "@/wc_scss/tools/mixins/flex";
-
-@include exports("md-loading") {
-  .md-loading {
-    @include flex.flex();
-
-    button &,
-    .md-button {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-    }
-
-    .md-loading__icon {
-      font-size: 50%;
-
-      &::before {
-        @include icon-unread-badge_16;
-        animation-duration: 1.4s;
-        animation-fill-mode: both;
-        animation-iteration-count: infinite;
-        animation-name: loading;
-
-        font-family: $icon-font-name;
-        vertical-align: middle;
-      }
-
-      &:nth-of-type(2)::before {
-        animation-delay: 0.2s;
-      }
-
-      &:nth-of-type(3)::before {
-        animation-delay: 0.4s;
-      }
-
-      &:not(:last-child) {
-        margin-right: 0.5em;
-      }
-    }
-
-    &.md-loading--small {
-      font-size: 1rem;
-
-      .icon {
-        font-size: 25%;
-      }
-    }
-
-    &.md-loading--middle {
-      font-size: 2rem;
-    }
-    
-    &.md-loading--large {
-      font-size: 3rem;
-    }
-  }
-
-  @keyframes loading {
-    0%,
-    100% {
-      opacity: 0.1;
-      transform: scale(0, 0);
-    }
-
-    20% {
-      opacity: 1;
-      transform: scale(1, 1);
-    }
-  }
-}
-
-@media (forced-colors: active) {
-  .md-loading__icon::before {
-    color: CanvasText; 
-  }
-}

package/src/components/loading/scss/module.scss

@@ -1 +0,0 @@
-@import "loading";

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

@@ -1,37 +0,0 @@
-import { html } from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-
-export const templateHTML = (attendees: Array<Record<string, any>>) => {
-  // TODO: JIRA CAX-327: Replace style overrides with dedicated CompositeAvatar component
-  const compositeAvatarWrapper = `position: relative; display: block;
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;`;
-  const compositeAvatar = `display: flex;width: 1.625rem;height: 1.625rem;font-size: .56875rem;line-height: .8125rem;`;
-  const compositeAvatarOne = `position: absolute;left: 0px;top: 0px;`;
-  const compositeAvatarTwo = `position: absolute;right: 0px;bottom: 0px;`;
-
-  return html`
-    <div class="md-composite-avatar md-composite-avatar--wc-override" style=${compositeAvatarWrapper}>
-      <md-avatar
-        slot="avatar"
-        class="md-avatar"
-        alt=${attendees[0].alt || attendees[0].title}
-        src=${ifDefined(attendees[0].src ? attendees[0].src : undefined)}
-        title=${attendees[0].title}
-        size="24"
-        style=${compositeAvatar + compositeAvatarOne}
-      ></md-avatar>
-      <md-avatar
-        slot="avatar"
-        class="md-avatar"
-        alt=${attendees[1].alt || attendees[1].title}
-        src=${ifDefined(attendees[1].src ? attendees[1].src : undefined)}
-        title=${attendees[1].title}
-        size="24"
-        style=${compositeAvatar + compositeAvatarTwo}
-      ></md-avatar>
-    </div>
-  `;
-};

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

@@ -1,187 +0,0 @@
-import { Meta, Props, Story } from "@storybook/addon-docs";
-import { MeetingAlert } from "./MeetingAlert.ts";
-
-# Meeting Alert
-
-The `<md-meeting-alert/>` component
-
-### Attributes
-
-- `closeAriaLabel` : String - accessibility text that labels the close button in the meeting alert when there is visible text on screen.
-- `snoozeAriaLabel` : String - accessibility text that labels the close button in the meeting alert when there is visible text on screen.
-
-- `attendees` : Array - attendees story is limited, the array() only accepts and array of strings wheras the property expects and array of objects.
-- `message` : String - renders text to be displayed as message in the `<md-meeting-alert></md-meeting-alert>`.
-- `role` : String - depicts the type of role to be passed to the div. Eg: `meeting-alert`, `alert`, `alertdialog`, `button` etc.
-
-- `show` : Boolean - value to show/hide the meeting-alert
-- `src` : String - depicts the url of the src to be shown in the `<md-meeting-alert></md-meeting-alert>`.
-- `status` : String - renders text to be displayed as title in the `<md-meeting-alert></md-meeting-alert>`.
-- `userStyles` : String - depicts the css to be applied to `<md-meeting-alert></md-meeting-alert>` in string format.
-
-- `title` : String - renders text to be displayed as title in the `<md-meeting-alert></md-meeting-alert>`.
-- `onKeyDown` : Function - function which receives an event on keyboard navigation and can be bound to `handleKeyDown`.
-- `onSnooze` : Function - function which receives an event on snooze and can be bound to `handleSnooze`.
-
-- `handleSnooze` : Function - sets the function for snooze of the `<md-meeting-alert></md-meeting-alert>`.
-- `handleClose` : Function - sets the function for snooze for `<md-meeting-alert></md-meeting-alert>` close.
-- `handleKeyDown` : Function - sets the function for keyboard navigation for `<md-meeting-alert></md-meeting-alert>`.
-
-### Styling
-
-The wrapping container of the meeting-alert can be reached via CSS by using the `userStyles` attribute in the `<md-meeting-alert></md-meeting-alert>` tags. For example, in your application's stylesheet you can say:
-
-```html
-<md-meeting-alert
-  .show="${show}"
-  .status="${status}"
-  .title="${title}"
-  userStyles=":host .md-alert { background: red; color: white }"
->
-  <span slot="custom-avatar">
-    <img width="40" src="${src}" />
-  </span>
-</md-meeting-alert>
-```
-
-### A simple usage of `<md-meeting-alert></md-meeting-alert>` with toggle using attribute.
-
-```js
-let isMeetingAlertOpenAttr = false;
-function toggleMeetingAlertAttr() {
-  const meetingAlert = querySelectorDeep("#triggered-meeting-alert");
-  isMeetingAlertOpenAttr = !isMeetingAlertOpenAttr;
-  isMeetingAlertOpenAttr && meetingAlert?.setAttribute("show", "");
-  !isMeetingAlertOpenAttr && meetingAlert?.removeAttribute("show");
-}
-```
-
-```html
-<md-button value="value" @click=${toggleMeetingAlertAttr}>toggle meeting alert using attribute</md-button>
-<md-meeting-alert
-    id="triggered-meeting-alert"
-    status="Queue_Demo7"
-    title="Attribute Trigger"
-    .onKeyDown=${() => console.log("passed onKeyDown Func")}
->
-</md-meeting-alert>
-```
-
-
-### A simple usage of `<md-meeting-alert></md-meeting-alert>` with toggle using property.
-
-```js
-let isMeetingAlertOpenProp = false;
-function toggleMeetingAlertProp() {
-  const meetingAlertProp = querySelectorDeep("#triggered-meeting-alert-prop");
-  isMeetingAlertOpenProp = !isMeetingAlertOpenProp;
-  meetingAlertProp.show = isMeetingAlertOpenProp;
-}
-```
-
-```html
-<md-button @click=${toggleMeetingAlertProp}>toggle meeting alert using property</md-button>
-<md-meeting-alert
-  id="triggered-meeting-alert"
-  status="Queue_Demo7"
-  title="Attribute Trigger"
-  .onKeyDown=${() => console.log("passed onKeyDown Func")}
-  .onSnooze=${() => console.log("passed onSnooze Func")}
-  .show=${isMeetingAlertOpenProp}
->
-</md-meeting-alert>
-```
-
-### `<md-meeting-alert></md-meeting-alert>` with attendees
-
-An array of objects to be passed to attendees property. If more than 2 attendees, composite avatar to be displayed on the `<md-meeting-alert/>`.
-
-```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-button ariaLabel="Action" circle size=${44} role="button">
-      <md-icon name="alarm-bold" size="16" iconSet="momentumDesign"></md-icon>
-    </md-button>
-  </md-meeting-alert>
-```
-
-### Meeting Alert Image Through Src
-
-Any src can be passed to the meeting alert using the 'src' attribute in the `<md-meeting-alert></md-meeting-alert>` tags.
-
-```html
-<md-meeting-alert
-  show
-  status="Queue_Demo7"
-  title="John Doe"
-  .onKeyDown=${() => console.log("passed onKeyDown Func")}
-  src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
->
-</md-meeting-alert>
-```
-
-### Unnamed Slots
-
-#### Meeting Alert Action through Slot
-
-Any action can be passed through `slot` in meeting alert by enclosing the element with the `slot` attribute in the `<md-meeting-alert></md-meeting-alert>` tags.
-
-```html
-<md-meeting-alert show status="Queue_Demo7" title="Jane Doe">
-    <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="alarm-bold" size="16" iconSet="momentumDesign"></md-icon>
-    </md-button>
-</md-meeting-alert>
-```
-
-#### Meeting Alert Image through Slot
-
-Any image can be passed through `slot` in meeting alert by enclosing the element with the `slot` attribute in the `<md-meeting-alert></md-meeting-alert>` tags.
-
-```html
-<md-meeting-alert
-  show
-  status="Queue_Demo7"
-  title="Jane Doe"
-  userStyles=":host .md-alert { background: red; color: white }"
->
-  <span slot="custom-avatar">
-    <img
-      width="40"
-      src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
-    />
-  </span>
-</md-meeting-alert>
-```
-
-#### Meeting Alert Svg through Slot
-
-Any svg can be passed through `slot` in meeting alert by enclosing the `<img/>` element with `src` attribute in the `<md-meeting-alert></md-meeting-alert>` tags.
-
-```html
-import svgWhatsapp from "@img/whatsapp.svg";
-<md-meeting-alert .show="${show}" .status="${status}" .title="${title}">
-  <span slot="custom-avatar">
-    <img width="40'" height="40'" src="${svgWhatsapp}" />
-  </span>
-</md-meeting-alert>
-```
-
-<Props of={"md-meeting-alert"} />