@momentum-ui/web-components 2.16.2 → 2.16.3

package/src/components/accordion/AccordionItem.ts

@@ -0,0 +1,180 @@
+/**
+ * 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/icon/Icon";
+import { FocusMixin } from "@/mixins";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, LitElement, property, PropertyValues, query } from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { nanoid } from "nanoid";
+import styles from "./scss/module.scss";
+
+export namespace AccordionItem {
+  export type AccordionEvent = {
+    srcEvent: MouseEvent | KeyboardEvent;
+  };
+
+  @customElementWithCheck("md-accordion-item")
+  export class ELEMENT extends FocusMixin(LitElement) {
+    private _expanded = false;
+    private _level = 3;
+
+    private uniqueId = nanoid();
+
+    @property({ type: String }) label = "";
+    @property({ type: Boolean, reflect: true }) disabled = false;
+    @property({ type: Boolean, reflect: true })
+    get expanded() {
+      return this._expanded;
+    }
+    set expanded(value: boolean) {
+      const oldValue = this._expanded;
+      this._expanded = value;
+      if (value) {
+        this.notifyAccordionFocus();
+        this.notifyExpandedHeader();
+      } else {
+        this.notifyCollapsedHeader();
+      }
+      this.requestUpdate("expanded", oldValue);
+    }
+    @property({ type: Number, reflect: true })
+    get level() {
+      return this._level;
+    }
+    set level(value: number) {
+      const oldValue = this.level;
+      if (value < 1 || value > 6) {
+        console.warn("Please set appropriate section heading level");
+        this._level = 3;
+      } else {
+        this._level = value;
+      }
+      this.requestUpdate("level", oldValue);
+    }
+
+    @query(".md-accordion-expander") header!: HTMLButtonElement;
+
+    private notifyExpandedHeader() {
+      this.dispatchEvent(
+        new CustomEvent("accordion-item-expanded", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            id: this.uniqueId
+          }
+        })
+      );
+    }
+
+    private notifyCollapsedHeader() {
+      this.dispatchEvent(
+        new CustomEvent("accordion-item-collapsed", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            id: this.uniqueId
+          }
+        })
+      );
+    }
+
+    private notifyAccordionFocus() {
+      this.dispatchEvent(
+        new CustomEvent("focus-visible", {
+          composed: true,
+          bubbles: true
+        })
+      );
+    }
+
+    protected firstUpdated(changedProperties: PropertyValues) {
+      super.firstUpdated(changedProperties);
+      this.setAttribute("id", this.uniqueId);
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    handleMouseDown(event: MouseEvent) {
+      if (!this.disabled) {
+        this.dispatchEvent(
+          new CustomEvent<AccordionEvent>("accordion-item-click", {
+            detail: {
+              srcEvent: event
+            },
+            composed: true,
+            bubbles: true
+          })
+        );
+      }
+    }
+
+    handleKeyDown(event: KeyboardEvent) {
+      if (!this.disabled) {
+        this.dispatchEvent(
+          new CustomEvent<AccordionEvent>("accordion-item-keydown", {
+            detail: {
+              srcEvent: event
+            },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    }
+
+    render() {
+      return html`
+        <div class="md-accordion-item">
+          <div role="heading" aria-level=${this.level} class="md-accordion-header" part="accordion-header">
+            <button
+              type="button"
+              aria-expanded=${this.expanded}
+              class="md-accordion-expander"
+              aria-label=${ifDefined(this.label || undefined)}
+              aria-controls="panel-${this.uniqueId}"
+              aria-disabled=${this.disabled}
+              ?disabled=${this.disabled}
+              id="header-${this.uniqueId}"
+              part="accordion-button"
+              tabindex=${ifDefined(this.disabled ? -1 : undefined)}
+              @mousedown=${this.handleMouseDown}
+              @keydown=${this.handleKeyDown}
+            >
+              <slot name="header-content">
+                <span class="md-accordion-expander-label">${this.label}</span>
+              </slot>
+              <md-icon
+                iconSet=${"momentumDesign"}
+                size="14"
+                name=${this.expanded ? "arrow-up-bold" : "arrow-down-bold"}
+              ></md-icon>
+            </button>
+          </div>
+          <div
+            role="region"
+            id="panel-${this.uniqueId}"
+            aria-labelledby="header-${this.uniqueId}"
+            class="md-accordion-panel"
+            part="accordion-panel"
+          >
+            <slot></slot>
+          </div>
+        </div>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-accordion-item": AccordionItem.ELEMENT;
+  }
+}

package/src/components/accordion/scss/accordion-item.scss

@@ -0,0 +1,92 @@
+@use "@/wc_scss/tools/functions/core";
+@use "@/wc_scss/tools/mixins/flex" as *;
+@use "./settings.scss" as *;
+@use "./mixins" as *;
+
+:host(md-accordion-item) {
+  display: block;
+
+  .md-accordion {
+    &-header {
+      @include flex($jc: space-between, $ai: stretch);
+    }
+
+    &-expander {
+      @include button-reset;
+      @include flex($jc: flex-start, $ai: stretch);
+      border-radius: $accordion-btn-border-radius;
+      flex: 0 1 100%;
+      padding: $accordion-base-indent;
+
+      md-icon {
+        display: flex;
+        margin: 0 0 0 auto;
+      }
+
+      &-label {
+        @include text-dots;
+        color: var(--md-secondary-text-color);
+        display: flex;
+        flex: 0 1 auto;
+      }
+    }
+
+    &-panel {
+      display: none;
+      padding: $accordion-base-indent;
+    }
+  }
+}
+
+:host(md-accordion-item[expanded]) {
+  .md-accordion-panel {
+    display: block;
+  }
+}
+
+:host(md-accordion-item[focus-visible]) {
+  .md-accordion-expander {
+    box-shadow: 0 0 0 core.rem-calc(2) $accordion-border_focus;
+    color: $accordion-active;
+  }
+}
+
+:host(md-accordion-item) {
+  .md-accordion-item:hover {
+    .md-accordion-header {
+      background: $accordion_hover;
+      border-radius: $accordion-btn-border-radius;
+    }
+  }
+}
+
+:host(md-accordion-item[disabled]) {
+  .md-accordion-expander {
+    color: $accordion-disabled;
+    cursor: not-allowed;
+  }
+}
+
+
+@media(forced-colors: active) {
+  :host(md-accordion-item[focus-visible]) {
+    .md-accordion-expander {
+      outline: core.rem-calc(2) solid Highlight;
+    }
+  }
+
+  :host(md-accordion-item) {
+    .md-accordion-item:hover {
+      .md-accordion-header {
+        outline: core.rem-calc(2) solid Highlight;
+      }
+    }
+  }
+
+  :host(md-accordion-item[disabled]) {
+    .md-accordion-expander {
+      opacity: 0.5;
+    }
+  }
+}
+

package/src/components/accordion/scss/accordion.scss

@@ -0,0 +1,32 @@
+@use "./settings.scss" as *;
+
+:host(:focus) {
+  box-shadow: none;
+  outline: none !important;
+}
+
+:host(md-accordion) {
+  font-size: $accordion-font-size;
+
+  .md-accordion {
+    width: 100%;
+    border-radius: $accordion-border-radius;
+  }
+}
+
+:host(md-accordion[focusable]) {
+  .md-accordion {
+    box-shadow: 0 0 0 $accordion-border_focus-width $accordion-border_focus;
+
+    &-header {
+      background: $accordion-bg_focus;
+    }
+  }
+}
+@media(forced-colors:active) {
+  :host(md-accordion[focusable]) {
+    .md-accordion {
+      outline: 1px solid Highlight;
+    }
+  }
+}

package/src/components/accordion/scss/mixins.scss

@@ -0,0 +1,16 @@
+@mixin text-dots {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: calc(100%);
+}
+
+@mixin button-reset {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+  padding: 0;
+}

package/src/components/accordion/scss/module.scss

@@ -0,0 +1,2 @@
+@use "./accordion" as *;
+@use "./accordion-item" as *;

package/src/components/accordion/scss/settings.scss

@@ -0,0 +1,14 @@
+@use "@/wc_scss/tools/functions/core";
+@use "@/wc_scss/typography/settings";
+
+$accordion-font-size: var(--body-primary-font-size, settings.$font-size-base);
+$accordion-base-indent: core.rem-calc(8);
+$accordion-border-radius: core.rem-calc(4);
+$accordion-btn-border-radius: core.rem-calc(3);
+
+$accordion-border_focus-width: core.rem-calc(2);
+$accordion-border_focus: var(--md-default-focus-outline-color);
+$accordion-bg_focus: var(--accordion-bg-focus);
+$accordion_hover: var(--accordion-hover);
+$accordion-disabled: var(--md-disabled-text-color);
+$accordion-active: var(--accordion-active);

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

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const accordion = {
+  prefix: "lm",
+  component: "accordion",
+  "color-border": {
+    light: colors.gray[10].name,
+    dark: colors.gray[90].name
+  },
+  "bg-focus": {
+    light: colors.white[60].name,
+    dark: colors.gray[90].name
+  },
+  hover: {
+    light: colors.gray[10].name,
+    dark: colors.gray[80].name
+  },
+  active: {
+    light: colors.blue[60].name,
+    dark: colors.blue[50].name
+  }
+};
+
+module.exports = accordion;

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

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const accordion = {
+  prefix: "md",
+  component: "accordion",
+  "color-border": {
+    light: colors.gray[20].name,
+    dark: colors.gray[80].name
+  },
+  "bg-focus": {
+    light: colors.white[100].name,
+    dark: colors.gray[90].name
+  },
+  hover: {
+    light: colors.blue[10].name,
+    dark: colors.blue[80].name
+  },
+  active: {
+    light: colors.blue[50].name,
+    dark: colors.blue[40].name
+  }
+};
+
+module.exports = accordion;

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

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+
+const accordion = {
+  prefix: "mdv2",
+  component: "accordion",
+  "color-border": {
+    common: "$mds-color-theme-background-primary-active"
+  },
+  "bg-focus": {
+    common: "$mds-color-theme-background-primary-active"
+  },
+  hover: {
+    common: "$mds-color-theme-background-primary-hover"
+  },
+  active: {
+    common: "$mds-color-theme-outline-theme-normal"
+  }
+};
+
+module.exports = accordion;

package/src/components/activity-button/ActivityButton.test.ts

@@ -0,0 +1,52 @@
+import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
+import "./ActivityButton";
+import { ActivityButton } from "./ActivityButton";
+
+describe("ActivityButton", () => {
+  afterEach(fixtureCleanup);
+
+  test("should render one ActivityButton button", async () => {
+    const element = await fixture(`<md-activity-button type="meetings"></md-activity-button>`);
+    expect(element.shadowRoot!.querySelectorAll("md-button").length).toEqual(1);
+  });
+
+  test("should render ActivityButton by passing size properties as number or string value type", async () => {
+    const numberSize = 68;
+    const stringSize = "68";
+    const elementNumber = await fixture(html`
+      <md-activity-button .type=${"chat"} .size=${numberSize}></md-activity-button>
+    `);
+    const buttonNumber = elementNumber.shadowRoot!.querySelector("md-button");
+    const elementString = await fixture(html`
+      <md-activity-button .type=${"camera"} .size=${stringSize}></md-activity-button>
+    `);
+    const buttonString = elementString.shadowRoot!.querySelector("md-button");
+    expect(buttonNumber!.size).toEqual(numberSize);
+    expect(buttonString!.size).toEqual(stringSize);
+  });
+
+  test("should render meetings type", async () => {
+    const element = await fixture(`<md-activity-button type="meetings" ariaLabel="test"></md-activity-button>`);
+    const buttonElement = element.shadowRoot!.querySelector("md-button");
+    expect(buttonElement!.shadowRoot!.querySelector("button")!.classList).toContain("md-activity__meetings");
+  });
+
+  test("should render large meetings type", async () => {
+    const element = await fixture<ActivityButton.ELEMENT>(
+      `<md-activity-button type="meetings" size="84" label="Chat" disabled></md-activity-button>`
+    );
+    expect(element.size).toEqual("84");
+
+    const buttonElement = element.shadowRoot!.querySelector("md-button");
+    const button = buttonElement!.shadowRoot!.querySelector("button");
+    expect(button!.getAttribute("class")).toContain("md-button--84");
+    expect(element.formatClass["md-activity"]).toBe(true);
+  });
+
+  test("should set default type if attribute value not correct", async () => {
+    const element = await fixture<ActivityButton.ELEMENT>(
+      `<md-activity-button type="meeting" label="Chat"></md-activity-button>`
+    );
+    expect(element.type).toEqual("chat");
+  });
+});

package/src/components/activity-button/ActivityButton.ts

@@ -0,0 +1,92 @@
+/**
+ * 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 reset from "@/wc_scss/reset.scss";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { CSSResultArray, html, LitElement, property } from "lit-element";
+import "@/components/button/Button";
+import "@/components/icon/Icon";
+import styles from "./scss/module.scss";
+
+export const activityButtonSize = ["56", "68", "84", 56, 68, 84] as const;
+export const activityButtonType = [
+  "chat",
+  "camera",
+  "contact-card",
+  "meetings",
+  "whiteboard",
+  "files",
+  "share-screen",
+  "tasks"
+] as const;
+
+export namespace ActivityButton {
+  export type Size = (typeof activityButtonSize)[number];
+  export type Type = (typeof activityButtonType)[number];
+
+  @customElementWithCheck("md-activity-button")
+  export class ELEMENT extends LitElement {
+    @property({ type: String }) ariaLabel = "";
+    @property({ type: Boolean }) disabled = false;
+    @property({ type: String }) label = "";
+    @property({ type: String }) size: ActivityButton.Size = "68";
+
+    _type: ActivityButton.Type = "chat";
+    @property({ type: String })
+    get type() {
+      return this._type;
+    }
+    set type(value) {
+      const oldValue = this.type;
+      if (activityButtonType.includes(value)) {
+        this._type = value;
+      } else {
+        this._type = "chat";
+      }
+      this.requestUpdate("type", oldValue);
+    }
+
+    get buttonToIconSizeMapping() {
+      return {
+        "56": "24",
+        "68": "28",
+        "84": "36"
+      };
+    }
+
+    get formatClass() {
+      return { "md-activity": true, [`md-activity__${this.type}`]: this.type };
+    }
+
+    static get styles(): CSSResultArray {
+      return [reset, styles];
+    }
+
+    render() {
+      return html`
+        <md-button
+          aria-label=${this.ariaLabel}
+          circle
+          .activityType=${this.type}
+          ?containerLarge=${this.size === "84"}
+          ?disabled=${this.disabled}
+          .size=${this.size}
+          .label=${this.label}
+        >
+          <md-icon name=${`icon-${this.type}_${this.buttonToIconSizeMapping[this.size]}`}></md-icon>
+        </md-button>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-activity-button": ActivityButton.ELEMENT;
+  }
+}