@momentum-ui/web-components 2.16.5 → 2.16.8

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

@@ -0,0 +1,236 @@
+: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

@@ -0,0 +1,16 @@
+@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

@@ -0,0 +1,15 @@
+$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

@@ -0,0 +1,46 @@
+/* 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

@@ -0,0 +1,46 @@
+/* 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

@@ -0,0 +1,37 @@
+/* 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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,153 @@
+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

@@ -0,0 +1,98 @@
+/**
+ * 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;