@momentum-ui/web-components 2.14.13 → 2.14.14

package/src/components/accordion/AccordionItem.ts

@@ -1,180 +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/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

@@ -1,87 +0,0 @@
-: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 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: rem-calc(2) solid Highlight;
-    }
-  }
-
-  :host(md-accordion-item) {
-    .md-accordion-item:hover {
-      .md-accordion-header {
-        outline: rem-calc(2) solid Highlight;
-      }
-    }
-  }
-
-  :host(md-accordion-item[disabled]) {
-    .md-accordion-expander {
-      opacity: 0.5;
-    }
-  }
-}
-

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

@@ -1,30 +0,0 @@
-: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 rem-calc(2) $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

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

@@ -1,17 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-
-@import "@/wc_scss/settings/rem";
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/settings/core";
-
-@import "@/wc_scss/typography/settings";
-
-@import "@/wc_scss/tools/mixins/flex";
-
-@import "./vars/md-accordion-settings";
-
-@import "./mixins";
-@import "./settings";
-@import "./accordion";
-@import "./accordion-item";

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

@@ -1,10 +0,0 @@
-$accordion-font-size: var(--body-primary-font-size, $font-size-base);
-$accordion-base-indent: rem-calc(8);
-$accordion-border-radius: rem-calc(4);
-$accordion-btn-border-radius: rem-calc(3);
-
-$accordion-border_focus: var(--md-default-focus-outline-color);
-$accordion-bg_focus: var(--accordion-bg-focus, $md-accordion-bg-focus-light);
-$accordion_hover: var(--accordion-hover, $md-accordion-hover-light);
-$accordion-disabled: var(--md-disabled-text-color);
-$accordion-active: var(--accordion-active, $md-accordion-active-light);

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

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

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

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

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

@@ -1,92 +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 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;
-  }
-}