@momentum-ui/web-components 2.16.8 → 2.16.9

package/src/components/audio-player/scss/audio-player.scss

@@ -1,236 +0,0 @@
-:host(md-audio-player) {
-  display: block;
-}
-
-.md-audio-player {
-  background: var(--audio-player-background-body, $lm-audio-player-background-body-light);
-  box-shadow: $audio-player__inset-box-shadow;
-  border-radius: $audio-player__border-radius;
-  height: rem-calc(60);
-  color: var(--audio-player-font-color, $lm-audio-player-font-color-light);
-  flex-direction: column;
-  justify-content: center;
-  display: flex;
-  padding: $audio-player__inner-padding;
-  font-size: $font-size-base;
-}
-
-.inner-container {
-  display: flex;
-  gap: $audio-player-inner__gap;
-  align-items: center;
-  justify-items: center;
-}
-
-.timeline-container {
-  flex: 1;
-  z-index: 0;
-
-
-  md-tooltip {
-    display: unset;
-  }
-}
-
-md-button::part(button) {
-  vertical-align: text-bottom;
-
-  &:focus::after {
-    outline: none;
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 $focus-ring-size var(--aido-player-focus-ring-color, $lm-audio-player-focus-ring-color-light);
-  }
-}
-
-.timeline {
-  background: var(--audio-player-background-timeline, $lm-audio-player-background-timeline-light);
-  cursor: pointer;
-  height: rem-calc(6);
-  width: 100%;
-  border-radius: $audio-player-timeline__border-radius;
-  position: relative;
-}
-
-.progress-bar {
-  background: var(--audio-player-background-progress-bar, $lm-audio-player-background-progress-bar-light);
-  height: 100%;
-  width: 0;
-  transition: 0.25s;
-  border-radius: $audio-player-timeline__border-radius;
-  position: absolute;
-  z-index: 2;
-}
-
-.buffer-bar {
-  background: var(--audio-player-background-buffer-bar, $lm-audio-player-background-buffer-bar-light);
-  height: 100%;
-  width: 0;
-  transition: 0.25s;
-  border-radius: $audio-player-timeline__border-radius;
-  position: absolute;
-  top: 0;
-  opacity: 0.6;
-}
-
-.text-container {
-  display: flex;
-  justify-content: space-between;
-}
-
-.play-btn {
-  cursor: pointer;
-
-  md-icon {
-    vertical-align: sub;
-  }
-}
-
-.volume-container {
-  height: rem-calc(28);
-  border-radius: $audio-player-volume-container__radius;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: 0.25s;
-
-  md-icon {
-    cursor: pointer;
-  }
-}
-
-.volume-container:hover {
-  background: var(--audio-player-background-body, $lm-audio-player-background-body-light);
-  box-shadow: $audio-player__inset-box-shadow;
-  padding: $audio-player-volume-container__padding;
-
-  .volume {
-    width: rem-calc(80);
-    margin-right: $audio-player-volume__margin-right;
-  }
-}
-
-.volume {
-  cursor: pointer;
-  height: rem-calc(6);
-  width: 0;
-  overflow: hidden;
-  border-radius: $audio-player-volume__border-radius;
-  transition: 0.25s;
-  background: var(--audio-player-background-timeline, $lm-audio-player-background-timeline-light);
-}
-
-.volume-slider {
-  background: var(--audio-player-background-progress-bar, $lm-audio-player-background-progress-bar-light);
-  height: 100%;
-  width: 24%;
-}
-
-.speed-icon-container {
-  position: relative;
-}
-
-#speed-btn {
-  cursor: pointer;
-}
-
-.speed-popup {
-  display: none;
-  position: absolute;
-  z-index: 1;
-  bottom: rem-calc(-6);
-  right: rem-calc(76);
-  height: 100%;
-  width: 100%;
-  justify-content: center;
-  align-items: flex-end;
-
-  &.popup-open {
-    display: flex;
-  }
-
-  ul {
-    list-style: none;
-    padding: $audio-player-speed-popup-ul__padding;
-    text-align: left;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    background: var(--audio-player-background-speed-popup, $lm-audio-player-background-speed-popup-light);
-    box-shadow: $audio-player-speed-popup-ul__box-shadow;
-    border-radius: $audio-player-speed-popup-ul__border-radius;
-
-    li {
-      padding: $audio-player-speed-popup-ul-li__padding;
-      color: var(--audio-player-font-color, $lm-audio-player-font-color-light);
-      width: rem-calc(160);
-      height: rem-calc(30);
-      cursor: pointer;
-      transition: background 0.1s ease;
-      display: inline-flex;
-      justify-content: space-between;
-      align-items: center;
-
-      &:hover {
-        background: var(
-          --audio-player-background-speed-popup-hover,
-          $lm-audio-player-background-speed-popup-hover-light
-        );
-      }
-    }
-  }
-}
-
-.speed-popup-selected-speed {
-  background: var(--audio-player-background-speed-popup-hover, $lm-audio-player-background-speed-popup-hover-light);
-}
-
-@media(forced-colors:active) {
-
-  .md-audio-player {
-    outline: 1px solid transparent !important;
-  }
-
-  .buffer-bar {
-    forced-color-adjust: none;
-    opacity: 0.3;
-    background-color: GrayText;
-  }
-
-  .progress-bar {
-    forced-color-adjust: none;
-    background-color: Highlight;
-  }
-
-  .volume {
-    forced-color-adjust: none;
-    background-color: HighlightText;
-    outline: 1px solid Highlight;
-    outline-offset: -1px;
-  }
-
-  .volume-slider {
-    forced-color-adjust: none;
-    background-color: Highlight;
-  }
-
-  .speed-popup {
-    ul {
-      outline: 1px solid Highlight;
-      li:hover{
-        forced-color-adjust: none;
-        color: Canvas;
-        background: Highlight;
-      }
-    }
-  }
-
-  #speed-popup-menu > .speed-popup-selected-speed {
-    forced-color-adjust: none;
-    color: Canvas;
-    background: Highlight;
-  }
-}

package/src/components/audio-player/scss/module.scss

@@ -1,16 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/settings/rem";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/typography/settings";
-
-@import "@/wc_scss/tools/mixins/core";
-@import "@/wc_scss/tools/mixins/focus";
-
-@import "./vars/lm-audio-player-settings";
-@import "./vars/md-audio-player-settings";
-
-@import "./settings";
-@import "./mixins";
-@import "./audio-player";

package/src/components/audio-player/scss/settings.scss

@@ -1,15 +0,0 @@
-$audio-player__border-radius: rem-calc(30);
-$audio-player__inner-padding: 0 rem-calc(20);
-$audio-player-inner__gap: rem-calc(10);
-$audio-player-timeline__border-radius: rem-calc(4);
-$audio-player__inset-box-shadow: inset 0 0 rem-calc(20) rgba(176, 176, 176, 0.25);
-$audio-player-volume-container__padding: 0 rem-calc(15);
-$audio-player-volume-container__radius: rem-calc(30);
-$audio-player-volume__border-radius: rem-calc(10);
-$audio-player-volume__margin-right: rem-calc(10);
-$audio-player-speed-popup-ul__padding: rem-calc(6) 0;
-$audio-player-speed-popup-ul__border-radius: rem-calc(8);
-$audio-player-speed-popup-ul-li__padding: rem-calc(2) rem-calc(12) rem-calc(2) rem-calc(12);
-$audio-player-speed-popup-ul__box-shadow: 0 rem-calc(4) rem-calc(8) rgba(0, 0, 0, 0.2), 0 0 rem-calc(1) rgba(0, 0, 0, 0.12);
-
-

package/src/components/audio-player/tokens/lm-audio-player-token.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 audioPlayer = {
-  prefix: "lm",
-  component: "audio-player",
-  background: {
-    body: {
-      light: colors.gray[10].name,
-      dark: colors.gray[80].name
-    },
-    "progress-bar": {
-      light: colors.gray[80].name,
-      dark: colors.gray["05"].name
-    },
-    "buffer-bar": {
-      light: colors.gray[40].name,
-      dark: colors.gray["30"].name
-    },
-    timeline: {
-      light: colors.gray[30].name,
-      dark: colors.gray[60].name
-    },
-    "speed-popup": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name,
-      hover: {
-        light: colors.gray["05"].name,
-        dark: colors.gray[70].name
-      }
-    }
-  },
-  "font-color": {
-    light: colors.gray[100].name,
-    dark: colors.gray["05"].name
-  },
-  "focus-ring": {
-    color: {
-      light: colors.blue[60].name,
-      dark: colors.blue[40].name
-    }
-  }
-};
-
-module.exports = audioPlayer;

package/src/components/audio-player/tokens/md-audio-player-token.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 audioPlayer = {
-  prefix: "md",
-  component: "audio-player",
-  background: {
-    body: {
-      light: colors.gray[10].name,
-      dark: colors.gray[80].name
-    },
-    "progress-bar": {
-      light: colors.gray[80].name,
-      dark: colors.gray["05"].name
-    },
-    "buffer-bar": {
-      light: colors.gray[50].name,
-      dark: colors.gray["30"].name
-    },
-    timeline: {
-      light: colors.gray[30].name,
-      dark: colors.gray[60].name
-    },
-    "speed-popup": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name,
-      hover: {
-        light: colors.gray["05"].name,
-        dark: colors.gray[70].name
-      }
-    }
-  },
-  "font-color": {
-    light: colors.gray[100].name,
-    dark: colors.gray["05"].name
-  },
-  "focus-ring": {
-    color: {
-      light: colors.blue[60].name,
-      dark: colors.blue[40].name
-    }
-  }
-};
-
-module.exports = audioPlayer;

package/src/components/audio-player/tokens/mdv2-audio-player-token.js

@@ -1,37 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const audioPlayer = {
-  prefix: "mdv2",
-  component: "audio-player",
-  background: {
-    body: {
-      common: "$mds-color-theme-background-solid-secondary-normal"
-    },
-    "progress-bar": {
-      common: "$mds-color-theme-control-active-normal"
-    },
-    "buffer-bar": {
-      common: "$mds-color-theme-control-indicator-inactive-normal"
-    },
-    timeline: {
-      common: "$mds-color-theme-control-indicator-inactive-normal"
-    },
-    "speed-popup": {
-      common: "$mds-color-theme-background-solid-secondary-normal",
-      hover: {
-        common: "$mds-color-theme-background-primary-hover"
-      }
-    }
-  },
-  "font-color": {
-    common: "$mds-color-theme-text-primary-normal"
-  },
-  "focus-ring": {
-    color: {
-      common: "$mds-color-theme-outline-theme-normal"
-    }
-  }
-};
-
-module.exports = audioPlayer;

package/src/components/avatar/Avatar.constants.ts

@@ -1,31 +0,0 @@
-import "@/components/icon/Icon";
-
-const AvatarType = [
-  "active",
-  "away",
-  "away-calling",
-  "busy",
-  "bot",
-  "call",
-  "dnd",
-  "group",
-  "inactive",
-  "meeting",
-  "ooo",
-  "on-mobile",
-  "on-device",
-  "on-hold",
-  "presenting",
-  "self",
-  "schedule",
-  "typing",
-  "engaged",
-  "idle",
-  "rona",
-  "quiet-hours",
-  ""
-] as const;
-
-const AvatarSize = [18, 24, 28, 32, 36, 40, 44, 48, 52, 56, 64, 72, 80, 84, 124];
-
-export { AvatarSize, AvatarType };

package/src/components/avatar/Avatar.mdx

@@ -1,153 +0,0 @@
-import { Meta, Story, Props } from "@storybook/addon-docs";
-import { Avatar } from "./Avatar.ts";
-
-# Avatar
-
-The `<md-avatar/>` component
-
-### Attributes
-
-- `alt` : String - if src is present, the image alt is provided via this attribute.
-- `src` : String - renders the src provided on the avatar.
-- `label` : String - accessibility text that labels the avatar.
-- `title` : String - renders the initials of the text provided via `title` attribute, on the avatar.
-- `color` : String - color for the avatar can be provided using this property.
-- `type` : String - depicts the status of the persona via different icons on the avatar. (typing, presenting, active, call etc...)
-- `size` : Number - represents the size of the avatar.
-- `icon-name` : String - name of the icon to be displayed inside the avatar. Must be a valid icon name.
-- `has-notification` : Boolean - if true, will show the notification symbol on the avatar.
-- `iconName` : String - name of the icon mapped to `icon-name` attribute.
-- `hasNotification` : Boolean - mapped to `has-notification` attribute. 
-
-### Styling
-
-The wrapping container of the avatar can be reached via CSS by using the `:part()` selector. For example, in your application's stylesheet you can say:
-
-```CSS
-md-avatar::part(avatar) {
-   background-color: red;
-}
-```
-
-### Simple Usage of Avatar
-
-#### Basic large avatar
-Renders a large-sized avatar based on the value passed to the `size` property.
-
-```html
-<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44"></md-avatar>
-<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="purple"></md-avatar>
-<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="mint"></md-avatar>
-<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="slate"></md-avatar>
-<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="gold"></md-avatar>
-<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="pink"></md-avatar>
-<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="lime"></md-avatar>
-```
-
-#### Basic medium avatar
-Renders a medium-sized avatar based on the value passed to the `size` property.
-
-```html
-<md-avatar
-  alt="avatar"
-  title="Kevin Hyde"
-  size="52"
-  src="https://static.skillshare.com/uploads/users/7330753/user-image-large.png"
-></md-avatar>
-```
-
-#### Small Avatar with Custom image
-
-Renders an avatar with custom image passed via `<img/>` tag enclosed in `<md-avatar></md-avatar>` tags.
-
-```html
-<md-avatar alt="avatar" title="Kevin Hyde" size="18">
-  <img
-    src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
-  />
-</md-avatar>
-```
-
-#### Medium Type with Custom SVG Image
-
-Renders an avatar with custom  SVG image passed via `<img src="${svg}/>` tag enclosed in `<md-avatar></md-avatar>` tags.
-
-```html
-<md-avatar alt="avatar" title="Kevin Hyde" size="40">
-  <img width="100" height="100" src="${svg}" />
-</md-avatar>
-```
-
-#### Icon Avatar with Color
-
-Renders an avatar with icon and colour passed via `icon-name` and `colour` atrribute respectively.
-
-```html
-<md-avatar alt="avatar" title="Warning Icon" size="80" color="mint" icon-name="warning_20"></md-avatar>
-```
-
-#### Icon Avatar Status
-
-iRenders an avatar with status `dnd` passed via `type` atrribute.
-
-```html
-<md-avatar title="Icon" size="36" type="dnd"></md-avatar>
-```
-
-#### Icon Avatar Group
-
-Renders an avatar with `group` type passed via `type` atrribute.
-
-```html
-<md-avatar title="Icon" type="group"></md-avatar>
-```
-
-#### Avatar Self
-
-Renders an avatar with `self` type passed via `type` atrribute.
-
-```html
-<md-avatar title="Self" type="self" size="24"></md-avatar>
-<md-avatar title="Self" type="self" size="28"></md-avatar>
-<md-avatar title="Self" type="self" size="36"></md-avatar>
-<md-avatar title="Self" type="self" size="40"></md-avatar>
-<md-avatar title="Self" type="self" size="44"></md-avatar>
-<md-avatar title="Self" type="self" size="56"></md-avatar>
-```
-
-#### Icon Avatar Bot
-
-Renders an avatar with `bot` type passed via `type` atrribute.
-
-```html
-<md-avatar type="bot" title="Tom Smith"></md-avatar>
-```
-
-#### Icon Avatar Notification
-
-Renders an avatar with `notification` symbol passed via `has-notification` atrribute.
-
-```html
-<md-avatar has-notification type="active" size="72" title="Tom Smith"></md-avatar>
-```
-
-#### Icon Avatar Typing
-
-Renders an avatar with `typing` status passed via `type` atrribute.
-
-```html
-<md-avatar type="typing" size="84" title="Tom Smith"></md-avatar>
-```
-
-#### Composite Avatar
-
-Renders a composite avatar by wrapping 2 or more `<md-avatar/>` tags inside `<md-composite-avatar></md-composite-avatar>` tags.
-
-```html
-<md-composite-avatar size="72">
-  <md-avatar type="typing" has-notification title="Tom Smith"></md-avatar>
-  <md-avatar type="dnd" title="Alyson Hoagland Pace"></md-avatar>
-</md-composite-avatar>
-```
-
-<Props of={"md-avatar"} />

package/src/components/avatar/Avatar.stories.ts

@@ -1,98 +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/avatar/Avatar";
-import "@/components/avatar/CompositeAvatar";
-import type { Args, Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit-html";
-import { AvatarSize, AvatarType } from "./Avatar.constants";
-import mdx from "./Avatar.mdx";
-
-const avatarColorOptions = [
-  "purple",
-  "mint",
-  "slate",
-  "gold",
-  "lime",
-  "darkmint",
-  "green",
-  "yellow",
-  "red",
-  "orange",
-  "violet",
-  "cyan",
-  "cobalt",
-  "pink"
-] as const;
-
-const compositeAvatarSize = [0, 18, 24, 28, 36, 40, 44, 52, 56, 72, 80, 84] as const;
-
-export const Avatar: StoryObj = {
-  args: {
-    size: 32,
-    title: "Rachell Harris",
-    label: "Avatar",
-    src: "https://4b4dc97add6b1dcc891a-54bf3b4e4579920861d23cc001530c2a.ssl.cf1.rackcdn.com/V1~b33cb17c-42e3-41ac-a045-497e4002646c~b18d4572b17a4e98a16708797343ee7a~1600",
-    customUrl: false,
-    iconName: "bot-bold",
-    customImage: false,
-    newMomentum: true
-  },
-  render: (args: Args) => {
-    if (args.composite) {
-      return html`
-        <md-composite-avatar .size=${args.compositeAvatarSizes}>
-          <md-avatar title="Anthony Russell" type="dnd" has-notification alt="Avatar"></md-avatar>
-          <md-avatar type="typing" title="Alyson Hoagland Pace" alt="Avatar"></md-avatar>
-        </md-composite-avatar>
-      `;
-    } else {
-      return html`
-        <md-avatar
-          title=${args.title}
-          alt=${args.title}
-          icon-name=${args.iconName}
-          label=${args.label}
-          type=${args.type}
-          src="${args.customUrl ? `${args.src}` : ""}"
-          color=${args.color}
-          size=${args.size}
-          ?has-notification=${args.hasNotification}
-          ?newMomentum=${args.newMomentum}
-        >
-          ${args.customImage ? html` <img width="100" height="100" src=${args.src} /> ` : ``}
-        </md-avatar>
-      `;
-    }
-  }
-};
-
-const meta: Meta = {
-  title: "Components/Avatar",
-  component: "md-avatar",
-  argTypes: {
-    renderIsTyping: { table: { disable: true } },
-    avatarContent: { table: { disable: true } },
-    type: { control: { type: "select" }, options: AvatarType },
-    color: { control: { type: "select" }, options: avatarColorOptions },
-    size: { control: { type: "select" }, options: AvatarSize, defaultValue: 40 },
-    compositeAvatarSizes: { control: { type: "select" }, options: compositeAvatarSize },
-    customUrl: { control: "boolean" },
-    customImage: { control: "boolean" }
-  },
-  parameters: {
-    a11y: {
-      element: "md-avatar"
-    },
-    docs: {
-      page: mdx
-    }
-  }
-};
-
-export default meta;