@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/menu/Menu.ts

@@ -1,213 +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 { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, LitElement, property, PropertyValues, query } from "lit-element";
-import { MenuItem } from "./MenuItem";
-import { Key } from "@/constants";
-import { nanoid } from "nanoid";
-import { SlottedMixin } from "@/mixins/SlottedMixin";
-import { RovingTabIndexMixin } from "@/mixins/RovingTabIndexMixin";
-import { classMap } from "lit-html/directives/class-map";
-import reset from "@/wc_scss/reset.scss";
-import styles from "./scss/module.scss";
-
-type ItemId = Element["id"];
-export const MORE_MENU_ITEM_COPY_ID_PREFIX = "more-menu-item-";
-
-export namespace Menu {
-  @customElementWithCheck("md-menu")
-  export class ELEMENT extends SlottedMixin(RovingTabIndexMixin(LitElement)) {
-    @property({ type: Boolean }) justified = false;
-    @property({ type: String }) direction = "horizontal"
-    
-    @query('slot') menuSlotElement?: HTMLSlotElement;
-    @query("md-menu-overlay") menuSubElement?: HTMLSlotElement;
-
-    private items: MenuItem.ELEMENT[] = [];
-    private itemsHash: Record<ItemId, MenuItem.ELEMENT> = {};
-    private itemsIdxHash: Record<ItemId, number> = {};
-
-    private getNormalizedItemId(id: ItemId) {
-      return id.replace(MORE_MENU_ITEM_COPY_ID_PREFIX, "");
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    get slotItem() {
-      return this.menuSlotElement;
-    }
-
-    private async linkMenuItems() {
-      const { items } = this;
-
-      items.forEach((item, index) => {
-        const id = nanoid();
-
-        item.setAttribute("id", id);
-        item.setAttribute("aria-controls", id);
-        item.selected = this.selected === index;
-      });
-
-      this.itemsHash = this.items.reduce((acc, item) => {
-        acc[item.id] = item;
-        return acc;
-      }, {} as Record<ItemId, MenuItem.ELEMENT>);
-
-      this.itemsIdxHash = this.items.reduce((acc, item, idx) => {
-        acc[item.id] = idx;
-        return acc;
-      }, {} as Record<ItemId, number>);
-    }
-
-    private setupMenuItems() {
-      if (this.menuSlotElement) {
-        const children = this.menuSlotElement.assignedElements({ flatten: true })
-        this.getChildrenFromTree({ children }, this.items);
-      }
-    }
-
-    private getChildrenFromTree(elem: {children: Element[]}, menuItems: MenuItem.ELEMENT[]) {
-      for (var i = 0; i < elem.children.length; i++) {
-        var child = elem.children[i];
-        if (child instanceof MenuItem.ELEMENT) {
-          menuItems.push(child);
-        }
-        this.getChildrenFromTree(child as any, menuItems); // RECURSION
-      }
-    }
-
-    private updateSelectedItem(newSelectedIndex: number) {
-
-      const oldSelectedIndex = this.slotted.findIndex(element => element.hasAttribute("selected"));
-
-      if (oldSelectedIndex === newSelectedIndex) {
-        return;
-      }
-
-      if (this.items) {
-        [oldSelectedIndex, newSelectedIndex].forEach(index => {
-          const item = this.items[index];
-          item && item.toggleAttribute("selected");
-        });
-      }
-
-      this.dispatchEvent(
-        new CustomEvent("selected-menu-item", {
-          detail: {
-            value: newSelectedIndex
-          },
-          composed: true,
-          bubbles: true
-        })
-      );
-
-      this.changeSelectedItemIdx(newSelectedIndex);
-    }
-
-    private changeSelectedItemIdx(newSelectedItemIdx: number) {
-      this.selected = newSelectedItemIdx;
-    }
-
-    handleItemClick(event: CustomEvent<MenuItem.MenuItemEvent>) {
-      const { id } = event.detail;
-    
-      const menuItem = this.itemsHash[this.getNormalizedItemId(id)];
-
-      if (menuItem && !menuItem.disabled) {
-        const newIndex = this.itemsIdxHash[menuItem.id];
-
-        if (newIndex !== -1) {
-          this.updateSelectedItem(newIndex);
-        }
-      }
-    }
-
-    handleItemKeydown(event: CustomEvent<MenuItem.MenuItemKeyDownEvent>) {
-      const { key, id } = event.detail;
-      switch (key) {
-        case Key.End:
-          this.changeSelectedItemIdx(this.items.length - 1);
-          break;
-        case Key.Home:
-          this.changeSelectedItemIdx(0);
-          break;
-        case Key.ArrowLeft:
-        case Key.ArrowUp:  
-          if (this.selected === 0) {
-            this.changeSelectedItemIdx(this.items.length - 1);
-          } else {
-            this.changeSelectedItemIdx(this.selected - 1);
-          }
-          break;
-        case Key.ArrowRight:
-        case Key.ArrowDown:
-          if (this.selected === this.items.length - 1) {
-            this.changeSelectedItemIdx(0);
-          } else {
-            this.changeSelectedItemIdx(this.selected + 1);
-          }
-          break;
-        case Key.Enter:
-        case Key.Space:
-          // eslint-disable-next-line no-case-declarations
-          const tabIndex = this.slotted.findIndex(element => element.id === id && !(element as MenuItem.ELEMENT).disabled);
-          if (tabIndex !== -1) {
-            this.updateSelectedItem(tabIndex);
-          }
-          break;
-      }
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.addEventListener("menu-item-click", this.handleItemClick as EventListener);
-      this.addEventListener("menu-item-keydown", this.handleItemKeydown as EventListener);
-    }
-
-    protected async updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (changedProperties.has("slotted")) {
-        this.setupMenuItems();
-        this.linkMenuItems();
-      }
-    }
-
-    disconnectedCallback() {
-      super.connectedCallback();
-      this.removeEventListener("menu-item-click", this.handleItemClick as EventListener);
-      this.removeEventListener("menu-item-keydown", this.handleItemKeydown as EventListener);
-    }
-
-    get menuClassMap() {
-      return {
-        [`md-menu--${this.direction}`]: this.direction,
-        justified: this.justified
-      };
-    }
-
-    render() {
-      
-      return html`
-        <nav class="md-menu ${classMap(this.menuClassMap)}">
-          <ul class="md-menu-list">
-            <slot></slot>
-          </ul>
-        </nav>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-menu": Menu.ELEMENT;
-  }
-}

package/src/components/menu/MenuItem.test.ts

@@ -1,54 +0,0 @@
-import { fixture, fixtureCleanup, html, oneEvent } from "@open-wc/testing-helpers";
-import { nanoid } from "nanoid";
-import { Key } from "@/constants";
-import "./MenuItem";
-import { MenuItem } from "./MenuItem";
-
-describe("MenuItem component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-
-  test("should create component", async () => {
-    const component: MenuItem.ELEMENT = await fixture(`<md-menu-item ><span>Test</span></md-menu-item>`);
-    expect(component).toBeDefined;
-  });
-
-  test("component should be disabled", async () => {
-    const component: MenuItem.ELEMENT = await fixture(`<md-menu-item disabled><span>Test</span></md-menu-item>`);
-    expect(component.disabled).toBeTruthy;
-    expect(component.getAttribute("tabindex")).toBe("-1");
-  });
-
-  test("component should has label", async () => {
-    const component: MenuItem.ELEMENT = await fixture(`<md-menu-item label="Test"><span>Test</span></md-menu-item>`);
-    expect(component.label).toEqual("Test");
-  });
-
-  test("should dispatch events to parent component", async () => {
-    const id = nanoid();
-    const component = await fixture<MenuItem.ELEMENT>(
-      html`
-        <md-menu-item id=${id}><span>Test</span></md-menu-item>
-      `
-    );
-
-    const clickEvent = new MouseEvent("mousedown");
-    setTimeout(() => component.handleClick(clickEvent));
-
-    const { detail: click } = await oneEvent(component, "menu-item-click");
-    expect(click).toBeDefined();
-    expect(click.id).toBe(id);
-
-    const keyboardEvent = new KeyboardEvent("keydown", {
-      code: Key.Enter
-    });
-    setTimeout(() => component.handleKeyDown(keyboardEvent));
-
-    const { detail: keydown } = await oneEvent(component, "menu-item-keydown");
-    expect(keydown).toBeDefined();
-    expect(keydown.id).toBe(id);
-    expect(keydown.key).toBe(Key.Enter);
-  });
-
-});

package/src/components/menu/MenuItem.ts

@@ -1,160 +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 { html, LitElement, property, PropertyValues } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
-import styles from "./scss/module.scss";
-
-export namespace MenuItem {
-  export type MenuItemEvent = { id: string };
-  export type MenuItemKeyDownEvent = {
-    id: string;
-    key: string;
-    srcEvent: KeyboardEvent;
-  };
-
-  @customElementWithCheck("md-menu-item")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) href = "";
-    @property({ type: String }) label = "";
-    @property({ type: Number, reflect: true }) tabIndex = -1;
-
-    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);
-    }
-
-    private _selected = false;
-    @property({ type: Boolean, reflect: true })
-    get selected() {
-      return this._selected;
-    }
-
-    set selected(value: boolean) {
-      const oldValue = this._selected;
-      this._selected = value;
-
-      if (value) {
-        this.notifySelectedItem();
-      }
-
-      this.setAttribute("aria-selected", `${value}`);
-      this.requestUpdate("selected", oldValue);
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    private setupEvents() {
-      this.addEventListener("mousedown", this.handleClick);
-      this.addEventListener("keydown", this.handleKeyDown);
-    }
-
-    protected firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-
-      if (this.label) {
-        this.setAttribute("aria-label", this.label);
-      }
-      this.setupEvents();
-    }
-
-    protected update(changedProperties: PropertyValues) {
-      super.update(changedProperties);
-      if (changedProperties.has("disabled")) {
-        this.selected = false;
-        this.setAttribute("aria-disabled", `${this.disabled}`);
-      }
-    }
-
-    handleClick(event: MouseEvent) {
-      event.preventDefault();
-      this.dispatchEvent(
-        new CustomEvent<MenuItemEvent>("menu-item-click", {
-          detail: {
-            id: this.id
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-
-    }
-
-    handleKeyDown(event: KeyboardEvent) {
-      this.dispatchEvent(
-        new CustomEvent<MenuItemKeyDownEvent>("menu-item-keydown", {
-          detail: {
-            id: this.id,
-            key: event.code,
-            srcEvent: event
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-
-    private notifySelectedItem() {
-      this.dispatchEvent(
-        new CustomEvent("focus-visible", {
-          composed: true,
-          bubbles: true
-        })
-      );
-    }
-
-    get menuItemClassMap() {
-      return {
-        [`md-menu-item--selected`]: this.selected,
-        disabled: this.disabled
-      };
-    }
-
-    render() {
-      
-      return html`
-        <li
-          role="menuitem"
-          part="menu-item"
-          class="md-menu-item ${classMap(this.menuItemClassMap)}" 
-          ?disabled=${this.disabled}
-          tabindex="-1" 
-          aria-hidden="true"
-          aria-selected="false"
-          aria-label=${ifDefined(this.label)}>
-          <a href="${ifDefined(this.href || undefined)}">
-            <slot></slot>
-          </a>
-        </li>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-menu-item": MenuItem.ELEMENT;
-  }
-}

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

@@ -1,34 +0,0 @@
-.md-menu-item {
-  list-style: none;
-  padding: rem-calc(2);
-
-  a {
-    color: var(--menu-default, $lm-menu-default-light);
-    display: flex;
-    padding: $menu-item-main-padding;
-  }
-
-  ::slotted(*) {
-    padding: 0 rem-calc(3);
-  }
-
-  &--selected {
-    background: var(--menu-pressed-bg, $lm-menu-pressed-bg-light);
-  }
-
-  &:hover {
-    background: var(--menu-hover-bg, $lm-menu-hover-bg-light);
-  }
-
-  &:active {
-    background: var(--menu-pressed-bg, $lm-menu-pressed-bg-light);
-  }
-
-  &.disabled {
-    pointer-events: none;
-    a {
-      background: transparent;
-      color: var(--md-disabled-text-color);
-    }
-  }
-}

package/src/components/menu/scss/menu.scss

@@ -1,31 +0,0 @@
-.md-menu {
-  margin: 0;
-  padding: 0;
-
-  &--horizontal {
-    .md-menu-list {
-      ::slotted(*) {
-        display: inline-flex;
-      }
-    }
-  }
-
-  &--vertical {
-    .md-menu-list {
-      ::slotted(*) {
-        display: flex;
-      }
-    }
-  }
-
-  &.justified {
-    .md-menu-list {
-      display: flex;
-      justify-content: space-between;
-    }
-  }
-
-  .md-menu-list {
-    margin: 0;
-  }
-}

package/src/components/menu/scss/module.scss

@@ -1,15 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-
-@import "@/wc_scss/settings/rem.scss";
-@import "@/wc_scss/colors/settings-base.scss";
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/tools/mixins/flex";
-
-@import "./vars/lm-menu-settings";
-@import "./vars/md-menu-settings";
-
-@import "./settings";
-@import "./menu";
-@import "./menu-item";

package/src/components/menu/scss/settings.scss

@@ -1 +0,0 @@
-$menu-item-main-padding: rem-calc(6) rem-calc(12);

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

@@ -1,27 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const menu = {
-  prefix: "lm",
-  component: "menu",
-  default: {
-    light: colors.gray[100].name,
-    dark: colors.gray[10].name
-  },
-  hover: {
-    "bg": {
-      light: colors.blue[10].name,
-      dark: colors.blue[80].name
-    }
-  },
-  pressed: {
-    "bg": {
-      light: colors.blue[20].name,
-      dark: colors.blue[70].name
-    }
-  }
-};
-
-module.exports = menu;

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

@@ -1,27 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const menu = {
-  prefix: "md",
-  component: "menu",
-  default: {
-    light: colors.gray[100].name,
-    dark: colors.gray[20].name
-  },
-  hover: {
-    "bg": {
-      light: colors.blue[20].name,
-      dark: colors.blue[80].name
-    }
-  },
-  pressed: {
-    "bg": {
-      light: colors.blue[30].name,
-      dark: colors.blue[70].name
-    }
-  }
-};
-
-module.exports = menu;

package/src/components/menu-overlay/MenuOverlay.stories.ts

@@ -1,85 +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/button/Button";
-import "@/components/checkbox/Checkbox";
-import "@/components/input/Input";
-import "@/components/theme/Theme";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
-import { action } from '@storybook/addon-actions';
-import { html } from "lit-element";
-import "@/components/menu-overlay/MenuOverlay";
-import { menuOverlayPlacement, menuOverlaySize } from "./MenuOverlay"; // Keep type import as a relative path
-
-export default {
-  title: "Components/Menu Overlay",
-  component: "md-menu-overlay",
-  decorators: [withKnobs, withA11y],
-  argTypes: {
-    handleOutsideOverlayClick: { table: { disable: true } },
-    handleTriggerKeyDown: { table: { disable: true } },
-    handleOutsideOverlayKeydown: { table: { disable: true } },
-    trigger: { table: { disable: true } },
-    arrow: { table: { disable: true } },
-    overlayContainer: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-menu-overlay"
-    }
-  }
-};
-
-export const MenuOverlay = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const isOpen = boolean("isOpen", false);
-  const disabled = boolean("Disabled", false)
-  const placement = select("placement", menuOverlayPlacement, "bottom");
-  const showArrow = boolean("Show Arrow", false)
-  const size = select("size", menuOverlaySize, "large");
-  const maxHeight = text("max height", "");
-  const customWidth = text("custom width", "");
-
-  return html`
-    <md-theme class="theme-toggle" id="menu-overlay" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-menu-overlay
-        style="margin: 10rem"
-        placement=${placement}
-        size=${size}
-        max-height=${maxHeight}
-        custom-width=${customWidth}
-        ?is-open=${isOpen}
-        ?show-arrow=${showArrow}
-        ?disabled=${disabled}
-        @menu-overlay-open=${(action('click open'))}
-        @menu-overlay-close=${(action('click close'))}
-      >
-        <md-button slot="menu-trigger" variant="primary">Open Menu Overlay</md-button>
-        <div style="padding:1.25rem ; width: 100%;">
-          <md-input
-            htmlId="inputSearchClearPill"
-            containerSize="small-12"
-            placeholder="Enter Text"
-            shape="pill"
-            clear
-          ></md-input>
-          <md-checkbox>Default Checkbox</md-checkbox>
-          <md-checkbox checked>Default Checked Checkbox</md-checkbox>
-          <md-checkbox indeterminate>Default Indeterminate Checkbox</md-checkbox>
-          <div style="text-align: center">
-            <p style="margin-bottom: .5rem">Please complete the entire form</p>
-            <md-button variant="primary">Submit</md-button>
-          </div>
-        </div>
-      </md-menu-overlay>
-    </md-theme>
-  `;
-};
-