@momentum-ui/web-components 2.14.13 → 2.14.14

package/src/components/button-group/ButtonGroup.ts

@@ -1,219 +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 { Key } from "@/constants";
-import { customElementWithCheck, FocusMixin, SlottedMixin } from "@/mixins";
-import reset from "@/wc_scss/reset.scss";
-import { html, LitElement, property, PropertyValues, query } from "lit-element";
-import styles from "./scss/module.scss";
-
-type CustomHTMLButtonElement = HTMLButtonElement & { selected: boolean };
-
-export namespace ButtonGroup {
-  @customElementWithCheck("md-button-group")
-  export class ELEMENT extends SlottedMixin(FocusMixin(LitElement)) {
-    @property({ type: Number, reflect: true }) active = 0;
-    @property({ type: Number, reflect: true }) tabIndex = 0;
-    @query("slot[name='button']") buttonSlot?: HTMLSlotElement;
-
-    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);
-    }
-
-    get slotElement() {
-      return this.buttonSlot;
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    protected firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-
-      this.setAttribute("role", "group");
-    }
-
-    private setButtonTabIndex() {
-      this.slotted.forEach((button) => ((button as CustomHTMLButtonElement).tabIndex = -1));
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (changedProperties.has("slotted")) {
-        this.setButtonTabIndex();
-        this.setFirstActive();
-      }
-    }
-
-    get selectedBtnValue() {
-      return (this.slotted[this.active] as CustomHTMLButtonElement).value;
-    }
-
-    private notifySelectedChange() {
-      this.dispatchEvent(
-        new CustomEvent("button-group-change", {
-          detail: {
-            selected: this.selectedBtnValue
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-      this.dispatchEvent(
-        new CustomEvent("focus-visible", {
-          composed: true,
-          bubbles: true
-        })
-      );
-    }
-
-    private setSelected(newIndex: number) {
-      const oldIndex = this.findSelectedBtnIndex();
-      if (oldIndex !== -1 && oldIndex !== newIndex) {
-        (this.slotted[oldIndex] as CustomHTMLButtonElement)?.toggleAttribute("selected", false);
-      }
-
-      (this.slotted[newIndex] as CustomHTMLButtonElement)?.toggleAttribute("selected", true);
-    }
-
-    private setFirstActive() {
-      const oldIndex = this.findSelectedBtnIndex();
-      if (oldIndex === -1) {
-        this.setSelected(this.active);
-      }
-    }
-
-    private findBtnIndex(event: MouseEvent | KeyboardEvent) {
-      const eventPath = event.composedPath();
-      return this.slotted.findIndex((slotElement) => eventPath.includes(slotElement));
-    }
-
-    private findSelectedBtnIndex() {
-      return this.slotted.findIndex((slotElement) => (slotElement as CustomHTMLButtonElement).hasAttribute("selected"));
-    }
-
-    private isBtnDisabled(index: number) {
-      return (this.slotted[index] as CustomHTMLButtonElement).disabled;
-    }
-
-    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);
-    }
-
-    private switchBtnOnArrowPress(startIndex: number, increment = 1) {
-      const newIndex = this.getAvailableSelectedIndex!(startIndex, increment);
-      if (newIndex !== -1) {
-        this.active = newIndex;
-        this.setSelected(newIndex);
-        this.notifySelectedChange();
-      }
-    }
-
-    private getAvailableSelectedIndex(index: number, increment = 1) {
-      const slottedLength = this.slotted.length;
-
-      for (let i = 0, j = index; i < slottedLength; i += 1, j += increment) {
-        if (j < 0) {
-          j = slottedLength - 1;
-        } else if (j >= slottedLength) {
-          j = 0;
-        }
-        const slotted = this.slotted[j];
-        if (this.isFocusable(slotted)) {
-          return j;
-        }
-      }
-      return -1;
-    }
-
-    private isFocusable(slottedItem: Element) {
-      return !slottedItem.hasAttribute("disabled") && !slottedItem.hasAttribute("hidden");
-    }
-
-    handleClick(event: MouseEvent) {
-      const newIndex = this.findBtnIndex(event);
-      if (newIndex !== -1) {
-        if (!this.isBtnDisabled(newIndex)) {
-          this.active = newIndex;
-          this.setSelected(newIndex);
-          this.notifySelectedChange();
-        }
-      }
-    }
-
-    handleKeyDown(event: KeyboardEvent) {
-      const { code } = event;
-      switch (code) {
-        case Key.Enter:
-        case Key.Space:
-          {
-            if (!this.isBtnDisabled(this.active)) {
-              this.setSelected(this.active);
-              this.notifySelectedChange();
-            }
-          }
-          break;
-        case Key.ArrowLeft:
-          {
-            if (this.active === 0) {
-              this.switchBtnOnArrowPress(this.slotted.length - 1, -1);
-            } else {
-              this.switchBtnOnArrowPress(this.active - 1, -1);
-            }
-          }
-          break;
-        case Key.ArrowRight:
-          {
-            if (this.active === this.slotted.length - 1) {
-              this.switchBtnOnArrowPress(0);
-            } else {
-              this.switchBtnOnArrowPress(this.active + 1);
-            }
-          }
-          break;
-        default:
-          break;
-      }
-    }
-
-    render() {
-      return html`
-        <div role="group" class="md-button-group" part="button-group">
-          <slot name="button"></slot>
-        </div>
-      `;
-    }
-  }
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-button-group": ButtonGroup.ELEMENT;
-  }
-}

package/src/components/button-group/scss/button-group.scss

@@ -1,95 +0,0 @@
-:host(:focus) {
-  box-shadow: none;
-  outline: none !important;
-}
-
-:host(md-button-group) {
-  display: flex;
-
-  .md-button-group {
-    @include flex($display: inline-flex, $ac:flex-start, $jc:flex-start);
-    background: var(--button-group-bg-color, $lm-button-group-bg-color-light);
-    border-radius: $button-group-border-radius;
-    font-size: $font-size-small;
-    padding: $button-group-indent;
-    transition: background 0.2s ease;
-
-    border: 1px solid var(--button-group-outline-border);
-
-    &:hover {
-      background: var(--button-group-bg-color-hover, $lm-button-group-bg-color-hover-light);
-    }
-
-    &:active {
-      background: var(--button-group-bg-color-pressed, $lm-button-group-bg-color-pressed-light);
-    }
-
-    ::slotted(button) {
-      @include flex;
-      background: none;
-      border: 0;
-      border-radius: $button-group-border-radius;
-      color: var(--button-group-color, $lm-button-group-color-light);
-      cursor: pointer;
-      height: $button-group-btn-height;
-      margin: 0 $button-group-indent;
-      outline: none;
-      padding: $button-group-btn-padding;
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    ::slotted(:hover) {
-      background: var(--button-group-color-hover, none);
-      color: var(--button-group-color-active, $lm-button-group-color-active-light);
-    }
-    
-    ::slotted([selected]) {
-      background: var(--button-group-bg-color-active, $lm-button-group-bg-color-active-light);
-      box-shadow: $button-group-btn-shadow;
-      color: var(--button-group-color-active, $lm-button-group-color-active-light);
-    }
-  }
-}
-
-:host([focus-visible]:not([disabled])) {
-  .md-button-group {
-    @include focus-boxshadow(rem-calc(2), var(--md-default-focus-outline-color, $md-blue-70));
-  }
-}
-
-:host([disabled]) {
-  .md-button-group {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
-
-@media (forced-colors:active) {
-    :host(md-button-group) {
-      .md-button-group {
-        outline: 1px solid CanvasText; 
-        background: Canvas;
-  
-        ::slotted([selected]) {
-          forced-color-adjust: none;
-          outline: 1px solid Highlight;
-          background: Highlight;
-          color:HighlightText;
-        }
-      }
-    }
-    :host([focus-visible]:not([disabled])) {
-      .md-button-group {
-        outline: 2px solid Highlight; 
-      }
-    }
-
-}

package/src/components/button-group/scss/module.scss

@@ -1,16 +0,0 @@
-@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 "@/wc_scss/tools/mixins/focus";
-
-@import "./vars/lm-button-group-settings";
-
-@import "./settings";
-@import "./button-group";

package/src/components/button-group/scss/settings.scss

@@ -1,5 +0,0 @@
-$button-group-indent: var(--button-group-indent, rem-calc(2));
-$button-group-border-radius: var(--button-group-border-radius, rem-calc(4));
-$button-group-btn-padding: rem-calc(4 12);
-$button-group-btn-height: rem-calc(30);
-$button-group-btn-shadow: 0 2px 4px rgba($md-black-100, 0.1), 0 0 1px rgba($md-black-100, 0.18);

package/src/components/button-group/tokens/lm-button-group-tokens.js

@@ -1,38 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const buttonGroup = {
-  prefix: "lm",
-  component: "button-group",
-  color: {
-    light: colors.gray[70].name,
-    dark: colors.gray[40].name,
-    active: {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    }
-  },
-  "bg-color": {
-    light: colors.gray[20].name,
-    dark: colors.gray[95].name,
-    hover: {
-      light: colors.gray[30].name,
-      dark: colors.gray[90].name
-    },
-    pressed: {
-      light: colors.gray[40].name,
-      dark: colors.gray[80].name
-    },
-    focus: {
-      light: colors.gray[30].name,
-      dark: colors.gray[90].name
-    },
-    active: {
-      light: colors.white[100].name,
-      dark: colors.gray[60].name
-    }
-  }
-};
-
-module.exports = buttonGroup;

package/src/components/button-group/tokens/md-button-group-tokens.js

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

package/src/components/button-group/tokens/mdv2-button-group-tokens.js

@@ -1,40 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const buttonGroup = {
-  prefix: "mdv2",
-  component: "button-group",
-  indent: { light: "0.0625rem", dark: "0.0625rem" },
-  border: {
-    radius: { light: "1.875rem", dark: "1.875rem" }
-  },
-  color: {
-    common: "$mds-color-theme-text-secondary-normal",
-    active: {
-      common: "$mds-color-theme-text-primary-normal"
-    },
-    hover: {
-      common: "$mds-color-theme-button-secondary-active-normal"
-    }
-  },
-  "bg-color": {
-    common: "$mds-color-theme-button-secondary-normal",
-    hover: {
-      common: "$mds-color-theme-button-secondary-normal"
-    },
-    pressed: {
-      common: "$mds-color-theme-button-secondary-normal"
-    },
-    focus: {
-      common: "$mds-color-theme-button-secondary-active-normal"
-    },
-    active: {
-      common: "$mds-color-theme-button-secondary-active-normal"
-    }
-  },
-  "outline-border": {
-    common: "$mds-color-theme-outline-input-normal"
-  }
-};
-
-module.exports = buttonGroup;

package/src/components/card/Card.stories.ts

@@ -1,89 +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/avatar/Avatar";
-import "@/components/badge/Badge";
-import "@/components/card/Card";
-import { ThemeNameValues } from "@/components/theme/Theme";
-import { action } from "@storybook/addon-actions";
-import { Args } from "@storybook/web-components";
-import { html } from "lit-element";
-import { nothing } from "lit-html";
-
-export const Card = (args: Args) => {
-  return html`
-    <md-theme class="theme-toggle" ?darkTheme=${args.darkTheme} theme=${args.theme}>
-      <md-card
-        .menuOptions=${args.menu}
-        id=${args.id}
-        title=${args.title}
-        subtitle=${args.subtitle}
-        @card-menu-click=${(e: MouseEvent) => {
-          action("card-click")(e.detail);
-        }}
-        @card-menu-keydown=${(e: KeyboardEvent) => {
-          action("card-keydown")(e.detail, e);
-        }}
-        info=${args.info}
-      >
-        ${
-          args.avatar
-            ? html`
-                <md-avatar slot="card-header-aside" alt="avatar" title="Alyson Hoagland Pace" size="44"></md-avatar>
-              `
-            : nothing
-        }
-        ${args.slotTitle ? html` <div slot="card-header-title"><h2>Test slot Title</h2></div> ` : nothing}
-        <div slot="content">
-          <img src=https://freepngimg.com/download/business/66729-google-business-big-analysis-analytics-data.png"
-          alt="" />
-        </div>
-
-        <md-badge slot="footer" color="violet" small>Active</md-badge>
-        <md-badge slot="footer" color="mint" small>Stock Report</md-badge>
-        <md-badge slot="footer" color="gold" small>Team Report</md-badge>
-        <md-badge slot="footer" color="lime" small>Team A</md-badge>
-        <md-badge slot="footer" color="blue" small>TA</md-badge>
-        <md-badge slot="footer" color="orange" small>Team B</md-badge>
-        <md-badge slot="footer" color="blue" small>Some long long label</md-badge>
-        <md-badge slot="footer" color="pink" small>Confidential</md-badge>
-      </md-card>
-    </md-theme>
-  `;
-};
-
-const cardMenu = ["Edit", "View", "Duplicate", "Delete"];
-
-export default {
-  title: "Components/Card",
-  component: "md-card",
-  argTypes: {
-    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
-    darkTheme: { control: "boolean" },
-    menu: { control: { type: "array" }, description: "Menu Items", defaultValue: cardMenu },
-    id: { defaultValue: "12345678" },
-    title: { defaultValue: "Team A Report - Q1" },
-    subtitle: { defaultValue: "Updated 2 hours ago" },
-    avatar: {
-      control: "boolean",
-      defaultValue: false,
-      description: "Change Favorite Icon in header on slot - 'card-header-icon'"
-    },
-    slotTitle: {
-      control: "boolean",
-      defaultValue: false,
-      description: "Add custom Title in slot - 'card-header-title'"
-    },
-    info: { defaultValue: "Lorem Ipsum is simply sample text of the printing and typesetting industry." }
-  },
-  parameters: {
-    a11y: {
-      element: "md-card"
-    }
-  }
-};

package/src/components/card/Card.test.ts

@@ -1,83 +0,0 @@
-import { cardMenuItems } from "@/[sandbox]/sandbox.mock";
-import "@/components/badge/Badge";
-import { Key } from "@/constants";
-import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./Card";
-import { Card } from "./Card";
-
-const fixtureFactory = async (id: string, title: string, subtitle: string, info: string): Promise<Card.ELEMENT> => {
-  return await fixture(html`
-    <md-card .menuOption=${cardMenuItems} id=${id} title=${title} subtitle=${subtitle} info=${info}>
-      <div slot="content">
-        <img
-          src="https://freepngimg.com/download/business/66729-google-business-big-analysis-analytics-data.png"
-          alt=""
-        />
-      </div>
-      <md-badge slot="footer" color="violet" small>Active</md-badge>
-      <md-badge slot="footer" color="mint" small>Stock Report</md-badge>
-    </md-card>
-  `);
-};
-
-describe("Card component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-
-  test("should render correctly", async () => {
-    const element: Card.ELEMENT = await fixtureFactory("1234567", "Test title", "Test subtitle", "Test Info");
-    expect(element).not.toBeNull();
-  });
-
-  test("should render card without menu", async () => {
-    const element: Card.ELEMENT = await fixtureFactory("1234567", "Test title", "Test subtitle", "Test Info");
-    const menuIcon = element.shadowRoot?.querySelector(".md-card-menu");
-    element.menuOptions = [];
-    await elementUpdated(element);
-
-    expect(menuIcon).not.toBeDefined;
-
-    element.menuOptions = ["Edit", "Test"];
-    await elementUpdated(element);
-
-    expect(menuIcon).toBeDefined;
-  });
-
-  test("should dispatch events on card click", async () => {
-    const element: Card.ELEMENT = await fixtureFactory("1234567", "Test title", "Test subtitle", "Test Info");
-
-    const card = element.shadowRoot?.querySelector(".md-card");
-    expect(card).not.toBeDefined;
-    const clickEvent = new MouseEvent("click");
-    const spyClick = jest.spyOn(element, "handleCardClick");
-    card?.dispatchEvent(clickEvent);
-    expect(spyClick).toHaveBeenCalled();
-    spyClick.mockRestore();
-
-    const spyKeyDown = jest.spyOn(element, "handleCardKeyDown");
-    const keyEvent = new KeyboardEvent("keydown", { code: Key.Enter });
-    card?.dispatchEvent(keyEvent);
-    expect(spyKeyDown).toHaveBeenCalled();
-    spyKeyDown.mockRestore();
-  });
-
-  test("should dispatch events on menu item click", async () => {
-    const element: Card.ELEMENT = await fixtureFactory("1234567", "Test title", "Test subtitle", "Test Info");
-
-    const spyMenuClick = jest.spyOn(element, "handleCardMenuEvent");
-    element.handleCardMenuEvent(new MouseEvent("click"), "1234");
-    await elementUpdated(element);
-
-    expect(spyMenuClick).toHaveBeenCalled();
-    spyMenuClick.mockRestore();
-
-    const spyMenuKeyDown = jest.spyOn(element, "handleCardMenuKeyDown");
-    const keyEvent = new KeyboardEvent("keydown", { code: Key.Enter });
-    element.handleCardMenuKeyDown(keyEvent, "1234");
-    await elementUpdated(element);
-
-    expect(spyMenuKeyDown).toHaveBeenCalled();
-    spyMenuKeyDown.mockRestore();
-  });
-});