@momentum-ui/web-components 2.14.11 → 2.14.13

package/src/components/alert-banner/AlertBanner.ts

@@ -0,0 +1,89 @@
+/**
+ * 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/button/Button";
+import "@/components/icon/Icon";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { isActionKey } from "@/utils/keyboard";
+import reset from "@/wc_scss/reset.scss";
+import { CSSResultArray, html, LitElement, property } from "lit-element";
+import { classMap } from "lit-html/directives/class-map.js";
+import styles from "./scss/module.scss";
+
+export namespace AlertBanner {
+  @customElementWithCheck("md-alert-banner")
+  export class ELEMENT extends LitElement {
+    @property({ type: String }) type = "";
+    @property({ type: String }) message = "";
+    @property({ type: Boolean }) closable = false;
+    @property({ type: Boolean }) show = false;
+    @property({ type: String, attribute: "close-aria-label" }) closeAriaLabel = "Close Banner";
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.requestUpdate("show");
+    }
+
+    onHide() {
+      this.show = !this.show;
+      this.dispatchEvent(new CustomEvent("alertBanner-hide"));
+      this.requestUpdate("show");
+    }
+
+    handleKeyDown(event: KeyboardEvent) {
+      const { code } = event;
+      if (isActionKey(code)) {
+        this.onHide();
+      }
+    }
+
+    static get styles(): CSSResultArray {
+      return [reset, styles];
+    }
+
+    render() {
+      const classes = {
+        "md-alert-banner": true,
+        [`md-alert-banner--${this.type}`]: this.type
+      };
+
+      const closeBtn = this.closable
+        ? html`
+            <md-button
+              class="md-alert-banner__close"
+              hasRemoveStyle
+              ariaLabel=${this.closeAriaLabel}
+              @click="${this.onHide}"
+              @keydown="${this.handleKeyDown}"
+            >
+              <md-icon name="cancel-bold" size="16" iconSet="momentumDesign"></md-icon>
+            </md-button>
+          `
+        : null;
+
+      return html`
+        ${this.show
+          ? html`
+              <div class="${classMap(classes)}" role="alert">
+                <div class="md-alert-banner__text">
+                  <slot><span>${this.message}</span></slot>
+                </div>
+                ${closeBtn}
+              </div>
+            `
+          : null}
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-alert-banner": AlertBanner.ELEMENT;
+  }
+}

package/src/components/alert-banner/scss/alert-banner.scss

@@ -0,0 +1,68 @@
+/** @component alert-banner */
+
+@include exports("md-alert-banner") {
+  .md-alert-banner {
+    padding: $alert-banner__padding;
+    position: relative;
+    text-align: center;
+    border-radius: var(--alert-banner-border-radius);
+    font-family: $brand-font-regular;
+    font-weight: var(--brand-font-weight-regular);
+
+    &.md-alert-banner {
+      &--default {
+        @include alert-banner-color(
+          var(--alert-banner-default-bg-color, $alert-banner-info__background),
+          var(--alert-banner-default-text-color, $alert-banner-info__color)
+        );
+      }
+
+      &--warning {
+        @include alert-banner-color(
+          var(--alert-banner-warning-bg-color, $alert-banner-warning__background),
+          var(--alert-banner-warning-text-color, $alert-banner-warning__color)
+        );
+      }
+
+      &--error {
+        @include alert-banner-color(
+          var(--alert-banner-error-bg-color, $alert-banner-error__background),
+          var(--alert-banner-error-text-color, $alert-banner-error__color)
+        );
+      }
+
+      &--success {
+        @include alert-banner-color(
+          var(--alert-banner-success-bg-color, $alert-banner-info__background),
+          var(--alert-banner-success-text-color, $alert-banner-info__color)
+        );
+      }
+    }
+
+    &__text {
+      font-size: $alert-banner__font-size;
+      padding: $alert-banner-text__padding;
+      text-align: center;
+
+      a {
+        color: inherit;
+        text-decoration: underline;
+      }
+    }
+
+    &__close {
+      cursor: pointer;
+      height: $alert-banner-close__size;
+      position: absolute;
+      right: $alert-banner-close__size;
+      top: $alert-banner-close__top-space;
+      width: $alert-banner-close__size;
+    }
+  }
+  @media (forced-colors: active) {
+    .md-alert-banner {
+      box-shadow: none;
+      outline: 2px solid CanvasText;
+    }
+  }
+}

package/src/components/alert-banner/scss/mixins.scss

@@ -0,0 +1,8 @@
+@mixin alert-banner-color($background-color, $text-color) {
+  background-color: $background-color;
+  color: $text-color;
+
+  md-icon {
+    color: $text-color;
+  }
+}

package/src/components/alert-banner/scss/module.scss

@@ -0,0 +1,10 @@
+@import "@/wc_scss/tools/functions/core";
+
+// Settings
+@import "@/wc_scss/colors/settings-base.scss";
+@import "@/wc_scss/typography/settings";
+
+// Alert-banner Specific
+@import "settings";
+@import "mixins";
+@import "alert-banner";

package/src/components/alert-banner/scss/settings.scss

@@ -0,0 +1,15 @@
+$alert-banner__font-size: var(--body-primary-font-size ,rem-calc(14));
+$alert-banner__padding: rem-calc(12);
+$alert-banner-text__padding: 0 rem-calc(28);
+$alert-banner-close__size: rem-calc(16);
+$alert-banner-close__top-space: rem-calc(12);
+$alert-banner-column__border: 1px solid transparent;
+
+$alert-banner-info__color: $md-theme-70;
+$alert-banner-info__background: $md-theme-10;
+
+$alert-banner-warning__color: $md-yellow-70;
+$alert-banner-warning__background: $md-yellow-10;
+
+$alert-banner-error__color: $md-red-70;
+$alert-banner-error__background: $md-red-10;

package/src/components/alert-banner/tokens/lm-alertbanner-tokens.js

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const alertBanner = {
+  prefix: "lm",
+  component: "alert-banner",
+  default: {
+    "bg-color": {
+      light: colors.blue[10].name,
+      dark: colors.blue[70].name
+    },
+    "text-color": {
+      light: colors.blue[70].name,
+      dark: colors.blue[10].name
+    }
+  },
+  error: {
+    "bg-color": {
+      light: colors.red[10].name,
+      dark: colors.red[70].name
+    },
+    "text-color": {
+      light: colors.red[70].name,
+      dark: colors.red[10].name
+    }
+  },
+  warning: {
+    "bg-color": {
+      light: colors.yellow[10].name,
+      dark: colors.yellow[70].name
+    },
+    "text-color": {
+      light: colors.yellow[70].name,
+      dark: colors.yellow[10].name
+    }
+  },
+  success: {
+    "bg-color": {
+      light: colors.green[10].name,
+      dark: colors.green[70].name
+    },
+    "text-color": {
+      light: colors.green[70].name,
+      dark: colors.green[10].name
+    }
+  }
+};
+
+module.exports = alertBanner;

package/src/components/alert-banner/tokens/md-alertbanner-tokens.js

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const alertBanner = {
+  prefix: "md",
+  component: "alert-banner",
+  default: {
+    "bg-color": {
+      light: colors.blue[10].name,
+      dark: colors.blue[70].name
+    },
+    "text-color": {
+      light: colors.blue[70].name,
+      dark: colors.blue[10].name
+    }
+  },
+  error: {
+    "bg-color": {
+      light: colors.red[10].name,
+      dark: colors.red[70].name
+    },
+    "text-color": {
+      light: colors.red[70].name,
+      dark: colors.red[10].name
+    }
+  },
+  warning: {
+    "bg-color": {
+      light: colors.yellow[10].name,
+      dark: colors.yellow[70].name
+    },
+    "text-color": {
+      light: colors.yellow[70].name,
+      dark: colors.yellow[10].name
+    }
+  },
+  success: {
+    "bg-color": {
+      light: colors.green[10].name,
+      dark: colors.green[70].name
+    },
+    "text-color": {
+      light: colors.green[70].name,
+      dark: colors.green[10].name
+    }
+  }
+};
+
+module.exports = alertBanner;

package/src/components/alert-banner/tokens/mdv2-alertbanner-tokens.js

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+
+const alertBanner = {
+  prefix: "mdv2",
+  component: "alert-banner",
+  default: {
+    "bg-color": {
+      common: "$mds-color-theme-background-alert-theme-normal"
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-accent-normal"
+    }
+  },
+  error: {
+    "bg-color": {
+      common: "$mds-color-theme-background-alert-error-normal"
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-error-normal"
+    }
+  },
+  warning: {
+    "bg-color": {
+      common: "$mds-color-theme-background-alert-warning-normal"
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-warning-normal"
+    }
+  },
+  success: {
+    "bg-color": {
+      common: "$mds-color-theme-background-alert-success-normal"
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-success-normal"
+    }
+  },
+  "border-radius": {
+    common: "0.5rem"
+  }
+};
+
+module.exports = alertBanner;

package/src/components/audio-player/AudioPlayer.stories.ts

@@ -0,0 +1,42 @@
+/**
+ * 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/audio-player/AudioPlayer";
+import { ThemeNameValues } from "@/components/theme/Theme";
+import type { Args, Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit-element";
+
+const render = (args: Args) => html`
+  <md-theme class="theme-toggle" id="audio" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+    <md-audio-player src="https://www2.cs.uic.edu/~i101/SoundFiles/ImperialMarch60.wav"></md-audio-player>
+  </md-theme>
+`;
+
+export const AudioPlayer: StoryObj = {
+  args: {
+    theme: "lumos",
+    darkTheme: false
+  },
+  render: render
+};
+
+const meta: Meta = {
+  title: "Components/Audio Player",
+  component: "md-audio-player",
+  argTypes: {
+    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
+    darkTheme: { control: "boolean" }
+  },
+  parameters: {
+    a11y: {
+      element: "md-audio-player"
+    }
+  }
+};
+
+export default meta;

package/src/components/audio-player/AudioPlayer.test.ts

@@ -0,0 +1,208 @@
+import { Key } from "@/constants";
+import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
+import "./AudioPlayer";
+import { AudioPlayer } from "./AudioPlayer";
+import clearAllMocks = jest.clearAllMocks;
+
+const fixtureFactory = async (): Promise<AudioPlayer.ELEMENT> => {
+  return await fixture(html` <md-audio-player src="somesrc"></md-audio-player> `);
+};
+
+describe("AudioPlayer", () => {
+  beforeEach(() => {
+    const mocks = {
+      Audio: {
+        pause: jest.fn(),
+        play: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        duration: 600,
+        volume: 75
+      }
+    };
+
+    global.Audio = jest.fn().mockImplementation(() => ({
+      pause: mocks.Audio.pause,
+      play: mocks.Audio.play,
+      addEventListener: mocks.Audio.addEventListener,
+      removeEventListener: mocks.Audio.removeEventListener,
+      duration: mocks.Audio.duration,
+      volume: mocks.Audio.volume
+    }));
+  });
+  afterEach(() => {
+    clearAllMocks();
+    fixtureCleanup;
+  });
+
+  test("should set source property", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    expect(element.src).toEqual("somesrc");
+  });
+
+  test("should render Audio Player Component", async () => {
+    const element = await fixture(`<md-audio-player></md-audio-player>`);
+    expect(element).not.toBeNull();
+  });
+
+  test("should toggle play/pause", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.togglePlay();
+    expect(element.isPlaying).toBe(true);
+
+    element.togglePlay();
+    expect(element.isPlaying).toBe(false);
+  });
+
+  test("should control volume", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.setVolumeElement = jest.fn();
+    element.getVolumeFromSlider = jest.fn().mockReturnValue(0.2);
+
+    const mockMouseEvent = new MouseEvent("mousedown");
+    element.handleVolumeChange(mockMouseEvent);
+
+    expect(element.audio.volume).toBe(0.2);
+  });
+
+  test("should mute when toggleSoundMute is called", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+
+    element.toggleSoundMute();
+    expect(element.isMuted).toBe(true);
+  });
+
+  test("should render the playback speed menu when showSpeedPopup is true", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+
+    element.toggleSpeedPopup();
+    expect(element.showSpeedPopup).toBe(true);
+  });
+
+  test("should set the playback speed when setPlaybackSpeed is called", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+
+    element.setPlaybackSpeed(0.25);
+    expect(element.playbackSpeed).toBe(0.25);
+    expect(element.selectedPlaybackSpeed).toBe(element.playbackSpeed);
+  });
+
+  test("should adjust playback speed using up arrow key in combination with enter key", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.toggleSpeedPopup();
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.ArrowUp }));
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.Enter }));
+    expect(element.playbackSpeed).toBe(0.75);
+  });
+
+  test("should adjust playback speed using down arrow key in combination with enter key", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.toggleSpeedPopup();
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.ArrowDown }));
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.Enter }));
+    expect(element.playbackSpeed).toBe(1.25);
+  });
+
+  test("should convert audio duration into friendly string", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+
+    expect(element.toTimecode(100)).toBe("1:40");
+  });
+
+  test("should set the Audios current time", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    jest.spyOn(element, "getBarPercentage").mockReturnValue(2);
+    element.duration = 15;
+    element.setTime(new MouseEvent("click"));
+    expect(element.audio.currentTime).toBe(30);
+  });
+
+  test("should set showSpeedPopop to false on an outside click", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    const clickEvent = new MouseEvent("click");
+    const mockElement = document.createElement("div");
+    mockElement.setAttribute("id", "not-speed-btn");
+    jest.spyOn(clickEvent, "composedPath").mockReturnValue([mockElement]);
+    element.onOutsideClick(clickEvent);
+    expect(element.showSpeedPopup).toBe(false);
+  });
+
+  test("should adjust volume when arrow keys are pressed", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.volumeExpanded = true;
+    element.volume = 0.5;
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.ArrowLeft }));
+    expect(element.volume).toBe(0.49);
+  });
+
+  test("should set volume expanded when toggleVolumeExpanded is called", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.volumeExpanded = true;
+    element.toggleVolumeExpand(false);
+    expect(element.volumeExpanded).toBe(false);
+  });
+
+  test("should mute volume at min when arrow keys are pressed", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.volumeExpanded = true;
+    element.volume = 0;
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.ArrowLeft }));
+    expect(element.isMuted).toBe(true);
+  });
+
+  test("should unmute volume when arrow keys are pressed", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.volumeExpanded = true;
+    element.isMuted = true;
+    element.volume = 0;
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.ArrowRight }));
+    expect(element.isMuted).toBe(false);
+  });
+
+  test("should not adjust volume out of range max when arrow keys are pressed", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.volumeExpanded = true;
+    element.volume = 1;
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.ArrowRight }));
+    expect(element.volume).toBe(1);
+  });
+
+  test("should adjust time within range when arrow keys are pressed", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.duration = 60;
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.ArrowRight }));
+    expect(element.currentTime).toBe(1);
+  });
+
+  test("should not adjust time out of min range when arrow keys are pressed", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.duration = 60;
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.ArrowLeft }));
+    expect(element.currentTime).toBe(0);
+  });
+
+  test("should not adjust time out of max range when arrow keys are pressed", async () => {
+    const element: AudioPlayer.ELEMENT = await fixtureFactory();
+    await elementUpdated(element);
+    element.duration = 60;
+    element.currentTime = 60;
+    element.handleKeyDown(new KeyboardEvent("keydown", { code: Key.ArrowRight }));
+    expect(element.currentTime).toBe(60);
+  });
+});