@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/components/chat-message/ChatMessage.stories.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 { withA11y } from "@storybook/addon-a11y";
+import { withKnobs, text, boolean } from "@storybook/addon-knobs";
+import { html } from "lit-element";
+import "@/components/chat-message/ChatMessage";
+import "@/components/theme/Theme";
+
+export default {
+  title: "Components/Chat Message",
+  component: "md-chat-message",
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    a11y: {
+      element: "md-chat-message"
+    }
+  }
+};
+
+export const ChatMessage = () => {
+  const darkTheme = boolean("Dark Theme", false);
+  const lumos = boolean("Lumos Theme", false);
+  const title = text("title", "John Doe");
+  const message = text("message", "I have issue with my silencer");
+  const selfMode = boolean("Self", false);
+
+  return html`
+  <md-theme class="theme-toggle" id="chat" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+    <md-chat-message .self=${selfMode} title=${title} time="11:27AM">
+      <p slot="message">${message}</p>
+    </md-chat-message>
+  </md-theme>
+  `;
+};

package/src/components/chat-message/ChatMessage.test.ts

@@ -0,0 +1,55 @@
+import "./ChatMessage";
+import { ChatMessage } from "./ChatMessage";
+import { elementUpdated, fixture, fixtureCleanup} from "@open-wc/testing-helpers";
+import { html } from "lit-element";
+import { Avatar } from "../avatar/Avatar"; // Keep type import as a relative path
+
+describe("Chat Message Component", () => {
+  let element: ChatMessage.ELEMENT;
+
+  afterEach(fixtureCleanup);
+
+  beforeEach(async () => {
+    element = await fixture<ChatMessage.ELEMENT>(
+      html`
+        <md-chat-message
+          title="John Doe"
+          time="11:27AM"
+          src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+        ></md-chat-message>
+      `
+    );
+  });
+
+  test("should render correctly if property self is provided", async () => {
+    element.self = true;
+
+    await elementUpdated(element);
+    expect(element.self).toBeTruthy();
+
+    const avatar = element.shadowRoot!.querySelector<Avatar.ELEMENT>("md-avatar");
+    expect(avatar!.title).toEqual("self");
+
+    element.self = false;
+
+    await elementUpdated(element);
+    expect(element.self).toBeFalsy();
+    expect(avatar!.title).toEqual("John Doe");
+  });
+
+  test("should render correct src", async () => {
+    element.self = true;
+    await elementUpdated(element);
+    expect(element.self).toBeTruthy();
+
+    const avatar = element.shadowRoot!.querySelector<Avatar.ELEMENT>("md-avatar");
+    expect(avatar?.src).toBeNull();
+
+    element.self = false;
+    await elementUpdated(element);
+    expect(element.self).toBeFalsy();
+    expect(avatar!.src).toEqual(
+      "https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
+    );
+  });
+});

package/src/components/chat-message/ChatMessage.ts

@@ -0,0 +1,54 @@
+import reset from "@/wc_scss/reset.scss";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { html, LitElement, property } from "lit-element";
+import styles from "./scss/module.scss";
+import "@/components/avatar/Avatar";
+import { ifDefined } from "lit-html/directives/if-defined";
+
+export namespace ChatMessage {
+  @customElementWithCheck("md-chat-message")
+  export class ELEMENT extends LitElement {
+    @property({ type: String }) title = "";
+    @property({ type: String }) src = "";
+    @property({ type: String }) time = "";
+    @property({ type: String }) label = "Avatar";
+    @property({ type: Boolean }) self = false;
+    
+    static get styles() {
+      return [reset, styles];
+    }
+
+    render() {
+      return html`
+        <div class="md-chat-message">
+          <md-avatar
+            type=${ifDefined(this.self ? "self" : undefined)}
+            title=${this.self ? "self" : this.title}
+            label="${this.label}"
+            src=${ifDefined(this.self ? undefined : this.src)}
+          ></md-avatar>
+
+          <div class="md-chat-message_content">
+            <div class="md-chat-message_heading">
+              <div class="md-chat-message_title">
+                <span>${this.self ? "You" : this.title}</span>
+              </div>
+              <div class="md-chat-message_time">
+                ${this.time}
+              </div>
+            </div>
+            <div class="md-chat-message_text">
+              <slot name="message"></slot>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-chat-message": ChatMessage.ELEMENT;
+  }
+}

package/src/components/chat-message/scss/chat-message.scss

@@ -0,0 +1,43 @@
+:host(:focus) {
+  box-shadow: none;
+  outline: none !important;
+}
+
+:host(md-chat-message) {
+  .md-chat-message {
+    color: $chat-message-color;
+    display: flex;
+    font-size: $chat-message-font-size;
+    line-height: $chat-message-line-height;
+    margin: $chat-message-indent 0;
+
+    &_content {
+      display: flex;
+      flex-direction: column;
+      padding-left: $chat-message-indent;
+    }
+
+    &_heading {
+      color: $chat-message_heading-color;
+      display: flex;
+      flex: 0 1 auto;
+      font-size: $chat-message_heading-font-size;
+      line-height: $chat-message_heading-line-height;
+      margin-bottom: calc(#{$chat-message-indent} * 0.5);
+    }
+
+    &_title {
+      @include flex();
+      flex: 0 1 auto;
+      
+      span {
+        @include text-dots;
+        display: block;
+      }
+    }
+
+    &_time {
+      margin-left: calc(#{$chat-message-indent} * 1.5);
+    }
+  }
+}

package/src/components/chat-message/scss/mixins.scss

@@ -0,0 +1,6 @@
+@mixin text-dots() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: calc(100%);
+}

package/src/components/chat-message/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/flex";
+@import "@/wc_scss/tools/mixins/core";
+
+@import "./vars/md-chat-message-settings";
+
+@import "./mixins";
+@import "./settings";
+@import "./chat-message";

package/src/components/chat-message/scss/settings.scss

@@ -0,0 +1,7 @@
+$chat-message-indent: rem-calc(12) !default;
+$chat-message-font-size: rem-calc(14) !default;
+$chat-message-line-height: rem-calc(22) !default;
+$chat-message_heading-font-size: rem-calc(12) !default;
+$chat-message_heading-line-height: rem-calc(12) !default;
+$chat-message-color: var(--chat-message-color, $md-chat-message-color-light) !default;
+$chat-message_heading-color: var(--chat-message-color-heading, $md-chat-message-color-heading-light) !default;

package/src/components/chat-message/tokens/lm-chat-message-tokens.js

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const chatMessage = {
+  prefix: "lm",
+  component: "chat-message",
+  color: {
+    light: colors.gray[100].name,
+    dark: colors.gray[40].name
+  },
+  "color-heading": {
+    light: colors.gray[70].name,
+    dark: colors.gray[30].name
+  }
+};
+
+module.exports = chatMessage;

package/src/components/chat-message/tokens/md-chat-message-tokens.js

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const chatMessage = {
+  prefix: "md",
+  component: "chat-message",
+  color: {
+    light: colors.gray[95].name,
+    dark: colors.gray[30].name
+  },
+  "color-heading": {
+    light: colors.gray[80].name,
+    dark: colors.gray[20].name
+  }
+};
+
+module.exports = chatMessage;

package/src/components/checkbox/Checkbox.stories.ts

@@ -0,0 +1,53 @@
+/**
+ * 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/checkbox/Checkbox";
+import "@/components/checkbox/CheckboxGroup";
+import "@/components/theme/Theme";
+import { withA11y } from "@storybook/addon-a11y";
+import { boolean, text, withKnobs } from "@storybook/addon-knobs";
+import { html } from "lit-element";
+
+export default {
+  title: "Components/Checkbox",
+  component: "md-checkbox",
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    a11y: {
+      element: "md-checkbox"
+    }
+  }
+};
+
+export const Checkbox = () => {
+  const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
+  const check = boolean("Checked state", false);
+  const label = text("Label", "Developing")
+  const disable = boolean("Disabled State", false);
+  const indeter = boolean("Indeterminate State", false);
+  const group = boolean("Checkbox group", false);
+
+  return html`
+    ${group ?
+    html`
+      <md-theme class="theme-toggle" id="checkbox-group" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+        <md-checkboxgroup group-label="group_process">
+          <md-checkbox slot="checkbox" .checked=${check}>Developing</md-checkbox>
+          <md-checkbox slot="checkbox" .disabled=${disable}>Linting</md-checkbox>
+          <md-checkbox slot="checkbox">Testing</md-checkbox>
+          <md-checkbox slot="checkbox" .indeterminate=${indeter}>Building</md-checkbox>
+        </md-checkboxgroup>
+      </md-theme>` :
+    html`
+      <md-theme class="theme-toggle" id="checkbox" ?darkTheme=${darkTheme}>
+        <md-checkbox label="${label}" .checked=${check} .disabled=${disable} .indeterminate=${indeter}>Developing</md-checkbox>
+      </md-theme>
+    `}
+  `;
+};

package/src/components/checkbox/Checkbox.test.ts

@@ -0,0 +1,124 @@
+import "./Checkbox";
+import { Checkbox } from "./Checkbox";
+import { Key } from "@/constants";
+import { elementUpdated, fixture, fixtureCleanup, oneEvent } from "@open-wc/testing-helpers";
+
+describe("Checkbox component", () => {
+  let element: Checkbox.ELEMENT;
+  afterEach(fixtureCleanup);
+  beforeEach(async () => {
+    element = await fixture<Checkbox.ELEMENT>(`<md-checkbox></md-checkbox>`);
+  });
+  test("should render checkbox", async () => {
+    expect(element).not.toBeNull();
+  });
+
+  test("should set correct checked property", async () => {
+    element.checked = true;
+    await elementUpdated(element);
+
+    expect(element.checked).toBeTruthy();
+    expect(element.hasAttribute("checked")).toBeTruthy();
+    expect(element.getAttribute("aria-checked")).toEqual("true");
+
+    element.indeterminate = true;
+    await elementUpdated(element);
+
+    expect(element.checked).toBeFalsy();
+    expect(element.hasAttribute("checked")).toBeFalsy();
+    expect(element.indeterminate).toBeTruthy();
+    expect(element.hasAttribute("indeterminate")).toBeTruthy();
+    expect(element.getAttribute("aria-checked")).toEqual("mixed");
+  });
+
+  test("should set disabled property", async () => {
+    element.disabled = true;
+    await elementUpdated(element);
+
+    expect(element.disabled).toBeTruthy();
+    expect(element.getAttribute("aria-disabled")).toEqual("true");
+    expect(element.tabIndex).toEqual(-1);
+
+    element.disabled = false;
+    await elementUpdated(element);
+
+    expect(element.getAttribute("aria-disabled")).toEqual("false");
+    expect(element.tabIndex).toEqual(0);
+  });
+
+  test("should handle click event", async () => {
+    const event = new MouseEvent("click");
+    element.dispatchEvent(event);
+    await elementUpdated(element);
+
+    expect(element.checked).toBeTruthy();
+
+    element.disabled = true;
+    element.checked = false;
+    await elementUpdated(element);
+
+    element.dispatchEvent(event);
+    await elementUpdated(element);
+
+    expect(element.checked).toBeFalsy();
+
+    element.disabled = false;
+    element.checked = false;
+    element.indeterminate = true;
+    await elementUpdated(element);
+
+    element.dispatchEvent(event);
+    await elementUpdated(element);
+
+    expect(element.checked).toBeFalsy();
+    expect(element.input.indeterminate).toBeTruthy();
+  });
+
+  test("should handle key event", async () => {
+    const createEvent = (code: string) =>
+      new KeyboardEvent("keydown", {
+        code
+      });
+
+    element.dispatchEvent(createEvent("KeyA"));
+    await elementUpdated(element);
+
+    expect(element.checked).toBeFalsy();
+
+    element.dispatchEvent(createEvent(Key.Space));
+    await elementUpdated(element);
+
+    expect(element.checked).toBeTruthy();
+
+    element.disabled = true;
+    element.checked = false;
+    await elementUpdated(element);
+
+    element.dispatchEvent(createEvent(Key.Space));
+    await elementUpdated(element);
+
+    expect(element.checked).toBeFalsy();
+  });
+
+  test("should dispatch change event if change checked state using mouse click", async () => {
+    const event = new MouseEvent("click");
+    element.dispatchEvent(event);
+
+    setTimeout(() => element.handleChange(event));
+    const { detail } = await oneEvent(element, "checkbox-change");
+    expect(detail).toBeDefined();
+    expect(detail.sourceEvent).toEqual(event);
+  });
+
+  test("should dispatch change event if change checked state using keyboard", async () => {
+    const event = new KeyboardEvent("mousedown", {
+      code: Key.Space
+    });
+    element.dispatchEvent(event);
+
+    setTimeout(() => element.handleChange(event));
+    const { detail } = await oneEvent(element, "checkbox-change");
+    expect(detail).toBeDefined();
+    expect(detail.sourceEvent).toEqual(event);
+  });
+});

package/src/components/checkbox/Checkbox.ts

@@ -0,0 +1,172 @@
+/**
+ * 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 { Key } from "@/constants";
+import { FocusMixin } from "@/mixins";
+import reset from "@/wc_scss/reset.scss";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { html, LitElement, property, PropertyValues, query } from "lit-element";
+import styles from "./scss/module.scss";
+
+export namespace Checkbox {
+  @customElementWithCheck("md-checkbox")
+  export class ELEMENT extends FocusMixin(LitElement) {
+    @property({ type: Boolean, reflect: true }) autofocus = false;
+    private _checked = false;
+    @property({ type: Boolean, reflect: true })
+    get checked() {
+      return this._checked;
+    }
+    set checked(value: boolean) {
+      const oldValue = this._checked;
+      this._checked = value;
+      if (!this.indeterminate) {
+        this.setAttribute("aria-checked", `${value}`);
+      }
+      this.requestUpdate("checked", oldValue);
+    }
+
+    private _indeterminate = false;
+    @property({ type: Boolean, reflect: true })
+    get indeterminate() {
+      return this._indeterminate;
+    }
+    set indeterminate(value: boolean) {
+      const oldValue = this._indeterminate;
+      this._indeterminate = value;
+      this.setAttribute("aria-checked", "mixed");
+      this.requestUpdate("indeterminate", oldValue);
+    }
+
+    private _disabled = false;
+    @property({ type: Boolean, reflect: true })
+    get disabled() {
+      return this._disabled;
+    }
+    set disabled(value: boolean) {
+      const oldValue = this._disabled;
+      this._disabled = value;
+      this.setAttribute("aria-disabled", `${value}`);
+      if (value) {
+        this.tabIndex = -1;
+      } else {
+        this.tabIndex = 0;
+      }
+      this.requestUpdate("disabled", oldValue);
+    }
+
+    @property({ type: String }) label = "";
+    @property({ type: Number, reflect: true }) tabIndex = 0;
+
+    @query(".checkbox-input") input!: HTMLInputElement;
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    private toggleCheckbox() {
+      this.checked = !this.checked;
+    }
+
+    private isCheckboxActive() {
+      return this.disabled || this.indeterminate;
+    }
+
+    handleClick(event: MouseEvent) {
+      if (this.isCheckboxActive()) {
+        event.stopPropagation();
+      } else {
+        this.toggleCheckbox();
+        this.handleChange(event);
+      }
+    }
+
+    handleKeyDown(event: KeyboardEvent) {
+      const { code } = event;
+      if (code === Key.Space || code === Key.Enter) {
+        event.preventDefault();
+        if (this.isCheckboxActive()) {
+          event.stopPropagation();
+        } else {
+          this.toggleCheckbox();
+          this.handleChange(event);
+        }
+      }
+    }
+
+    handleChange(event: Event) {
+      this.dispatchEvent(
+        new CustomEvent<{ sourceEvent: Event }>("checkbox-change", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            sourceEvent: event
+          }
+        })
+      );
+    }
+
+    protected firstUpdated(changedProperties: PropertyValues) {
+      super.firstUpdated(changedProperties);
+
+      this.setAttribute("role", "checkbox");
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      }
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("keydown", this.handleKeyDown);
+      this.addEventListener("click", this.handleClick);
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.removeEventListener("keydown", this.handleKeyDown);
+      this.removeEventListener("click", this.handleClick);
+    }
+
+    protected update(changedProperties: PropertyValues) {
+      super.update(changedProperties);
+      if (changedProperties.has("indeterminate")) {
+        this.checked = false;
+      }
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("indeterminate")) {
+        this.input.indeterminate = this.indeterminate;
+      }
+    }
+
+    render() {
+      return html`
+        <input
+          class="checkbox-input"
+          type="checkbox"
+          part="checkbox-input"
+          ?checked=${this.checked}
+          ?disabled=${this.disabled}
+          ?autofocus=${this.autofocus}
+          aria-hidden="true"
+        />
+        <label part="checkbox-label" class="checkbox-label">
+          <slot></slot>
+        </label>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-checkbox": Checkbox.ELEMENT;
+  }
+}

package/src/components/checkbox/CheckboxGroup.test.ts

@@ -0,0 +1,43 @@
+import "./Checkbox";
+import "./CheckboxGroup";
+import { CheckboxGroup } from "./CheckboxGroup";
+import { Key } from "@/constants";
+import { fixture, fixtureCleanup } from "@open-wc/testing-helpers";
+import { html } from "lit-element";
+
+describe("Checkbox component", () => {
+  let element: CheckboxGroup.ELEMENT;
+
+  afterEach(fixtureCleanup);
+
+  beforeEach(async () => {
+    element = await fixture<CheckboxGroup.ELEMENT>(html`
+      <md-checkboxgroup group-label="group_process">
+        <md-checkbox slot="checkbox">Developing</md-checkbox>
+        <md-checkbox slot="checkbox">Linting</md-checkbox>
+        <md-checkbox slot="checkbox">Testing</md-checkbox>
+      </md-checkboxgroup>
+    `);
+  });
+
+  test("should switch radio using keyboard", async () => {
+    const createEvent = (code: string) =>
+      new KeyboardEvent("keydown", {
+        code
+      });
+
+    expect(element.selected).toEqual(0);
+    element.dispatchEvent(createEvent(Key.ArrowDown));
+    expect(element.selected).toEqual(1);
+    element.dispatchEvent(createEvent(Key.ArrowDown));
+    expect(element.selected).toEqual(2);
+    element.dispatchEvent(createEvent(Key.ArrowDown));
+    expect(element.selected).toEqual(0);
+    element.dispatchEvent(createEvent(Key.ArrowUp));
+    expect(element.selected).toEqual(2);
+    element.dispatchEvent(createEvent(Key.ArrowUp));
+    expect(element.selected).toEqual(1);
+    element.dispatchEvent(createEvent("KeyA"));
+    expect(element.selected).toEqual(1);
+  });
+});