@momentum-ui/web-components 2.5.7 → 2.6.0

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

@@ -1,66 +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;
-
-    &: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([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;
-  }
-}
-

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: rem-calc(2);
-$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/card/Card.stories.ts

@@ -1,84 +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/card/Card";
-import "@/components/theme/Theme";
-import { withA11y } from "@storybook/addon-a11y";
-import { array, boolean, text, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-import { nothing } from "lit-html";
-import { action } from "@storybook/addon-actions";
-
-export default {
-  title: "Components/Card",
-  component: "md-card",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    a11y: {
-      element: "md-card"
-    }
-  }
-};
-
-const cardMenu = ["Edit", "View", "Duplicate", "Delete"];
-
-export const Card = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const menu = array("Menu Items", cardMenu);
-  const id = text("ID", "12345678");
-  const title = text("Title", "Team A Report - Q1");
-  const subtitle = text("Subtitle", "Updated 2 hours ago");
-  const avatar = boolean("Change Favorite Icon in header on slot - 'card-header-icon'", false);
-  const slotTitle = boolean("Add custom Title in slot - 'card-header-title'", false);
-  const info = text("Info", "Lorem Ipsum is simply dummy text of the printing and typesetting industry.");
-
-  return html`
-    <md-theme class="theme-toggle" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-card
-        .menuOptions=${menu}
-        id=${id}
-        title=${title}
-        subtitle=${subtitle}
-        @card-menu-click=${(e: MouseEvent) => {
-          action("card-click")(e.detail);
-        }}
-        @card-menu-keydown=${(e: KeyboardEvent) => {
-          action("card-keydown")(e.detail, e);
-        }}
-        info=${info}
-      >
-        ${avatar
-          ? html`
-              <md-avatar slot="card-header-aside" alt="avatar" title="Alyson Hoagland Pace" size="44"></md-avatar>
-            `
-          : nothing}
-        ${slotTitle
-          ? html`
-              <div slot="card-header-title"><h2>Test slot Title</h2></div>
-            `
-          : nothing}
-        <div slot="content">
-          <img
-            src="https://media.istockphoto.com/vectors/dashboard-ui-modern-presentation-with-data-graphs-and-hud-diagrams-vector-id1159848977"
-            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>
-  `;
-};

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

@@ -1,86 +0,0 @@
-import "@/components/badge/Badge";
-import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./Card";
-import { Card } from "./Card";
-import { Button } from "@/components/button/Button";
-import { cardMenuItems } from "@/[sandbox]/sandbox.mock";
-import { Key } from "@/constants";
-
-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://media.istockphoto.com/vectors/dashboard-ui-modern-presentation-with-data-graphs-and-hud-diagrams-vector-id1159848977"
-            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();
-  });
-});

package/src/components/card/Card.ts

@@ -1,177 +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 } from "lit-element";
-import styles from "./scss/module.scss";
-import "@/components/icon/Icon";
-import "@/components/button/Button";
-import "@/components/list/List";
-import "@/components/list/ListItem";
-import "@/components/favorite/Favorite";
-import { Key } from "../../constants"; // Keep type import as a relative path
-import { repeat } from "lit-html/directives/repeat";
-import { nothing } from "lit-html";
-
-export namespace Card {
-  @customElementWithCheck("md-card")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) title = "title";
-    @property({ type: String }) subtitle = "";
-    @property({ type: String }) id = "";
-    @property({ type: String }) info = "";
-    @property({ type: String, attribute: "info-aria-label" }) infoAriaLabel = "Card Info";
-    @property({ type: String, attribute: "menu-aria-label" }) menuAriaLabel = "Card Menu";
-    @property({ type: Array }) menuOptions: (string | any)[] = [];
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    handleCardClick(event: MouseEvent) {
-      this.dispatchEvent(
-        new CustomEvent<{ id: string }>("card-click", {
-          detail: {
-            id: this.id
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-
-    handleCardKeyDown(e: KeyboardEvent) {
-      if (e.code === Key.Enter || e.code === Key.Space) {
-        this.dispatchEvent(
-          new CustomEvent<{ id: string }>("card-keydown", {
-            detail: {
-              id: this.id
-            },
-            bubbles: true,
-            composed: true
-          })
-        );
-      }
-    }
-
-    handleCardMenuEvent(event: MouseEvent, label: string) {
-      event.stopPropagation();
-      const ev = label.toLowerCase();
-      this.dispatchEvent(
-        new CustomEvent<{ id: string; type: string }>("card-menu-click", {
-          detail: {
-            id: this.id,
-            type: ev
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-
-    handleCardMenuKeyDown(event: KeyboardEvent, label: string) {
-      event.preventDefault();
-      this.dispatchEvent(
-        new CustomEvent<{ id: string; type: string }>("card-menu-keydown", {
-          detail: {
-            id: this.id,
-            type: label.toLowerCase()
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-
-    render() {
-      return html`
-        <div
-          class="md-card"
-          id="${this.id}"
-          part="card"
-          tabindex="0"
-          @click=${(ev: MouseEvent) => this.handleCardClick(ev)}
-          @keydown=${(ev: KeyboardEvent) => this.handleCardKeyDown(ev)}
-        >
-          <div class="md-card-header">
-            <slot name="card-header-aside">
-              <md-favorite value="${`card-` + this.id}"></md-favorite>
-            </slot>
-            <div class="md-card-header-title">
-              <slot name="card-header-title">
-                <h1>${this.title}</h1>
-                <h2>${this.subtitle}</h2>
-              </slot>
-            </div>
-            <div class="md-card-header-actions">
-              ${this.info
-                ? html`
-                    <md-tooltip message="${this.info}" placement="bottom">
-                      <md-button
-                        ariaLabel="${this.infoAriaLabel}"
-                        class="md-card-info-icon"
-                        color="color-none"
-                        size="size-none"
-                      >
-                        <md-icon slot="icon" name="info_16"></md-icon>
-                      </md-button>
-                    </md-tooltip>
-                  `
-                : nothing}
-              ${this.menuOptions.length
-                ? html`
-                    <md-menu-overlay class="md-card-menu" placement="bottom-start">
-                      <md-button
-                        ariaLabel="${this.menuAriaLabel}"
-                        class="md-card-menu-icon"
-                        color="color-none"
-                        size="size-none"
-                        slot="menu-trigger"
-                      >
-                        <md-icon slot="icon" name="more-adr_16"></md-icon>
-                      </md-button>
-                      <div class="md-card-menu-list-items" style="width: 100%;">
-                        <md-list>
-                          ${repeat(
-                            this.menuOptions,
-                            (item, idx) =>
-                              html`
-                                <md-list-item
-                                  class="${`menu-item-` + idx}"
-                                  slot="list-item"
-                                  @click=${(e: MouseEvent) => this.handleCardMenuEvent(e, item as string)}
-                                  @keydown=${(e: KeyboardEvent) => this.handleCardMenuKeyDown(e, item as string)}
-                                  >${item}</md-list-item
-                                >
-                              `
-                          )}
-                        </md-list>
-                      </div>
-                    </md-menu-overlay>
-                  `
-                : nothing}
-            </div>
-          </div>
-          <div class="md-card-content">
-            <slot name="content"></slot>
-          </div>
-          <div class="md-card-footer">
-            <slot name="footer"> </slot>
-          </div>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-card": Card.ELEMENT;
-  }
-}

package/src/components/card/scss/card.scss

@@ -1,114 +0,0 @@
-:host(md-card) {
-  display: inline-block;
-
-  .md-card {
-    @include flex($fd: column, $jc: flex-start, $ai: stretch);
-    background: $md-card-bg;
-    border: $md-card-border;
-    border-radius: $md-card-border-radius;
-    box-shadow: $md-card-box-shadow;
-    color: $md-card-color;
-    cursor: pointer;
-    max-width: $md-card-width;
-    padding: calc(#{$md-card-indent} * 2);
-    position: relative;
-    width: 100%;
-
-    &-header {
-      @include flex($jc: space-between, $ac: flex-start, $ai: flex-start);
-      flex: 1 0 100%;
-      margin-bottom: $md-card-indent;
-
-      md-favorite {
-        padding-top: calc(#{$md-card-indent} * 0.5);
-      }
-
-      &-title {
-        display: flex;
-        flex: 1 1 100%;
-        flex-direction: column;
-        margin: 0 $md-card-indent;
-
-        h1 {
-          color: $md-card-title-color;
-          font-family: $brand-font-medium;
-          font-size: $font-size-large;
-          line-height: calc(#{$md-card-indent} * 3);
-          margin: 0;
-        }
-
-        h2 {
-          color: $md-card-color;
-          font-size: $font-size-small;
-          line-height: calc(#{$md-card-indent} * 2.25);
-        }
-      }
-
-      &-actions {
-        align-self: stretch;
-        display: inline-flex;
-        position: relative;
-        z-index: 1;
-
-        .md-card-info-icon,
-        .md-card-max-icon {
-          padding-right: $md-card-indent;
-        }
-
-        md-menu-overlay::part(overlay-content) {
-          max-width: $md-card-menu-width;
-        }
-      }
-    }
-
-    .md-card-menu-icon {
-      border-radius: calc(#{$md-card-border-radius} / 2);
-      display: inline-flex;
-
-      &::part(button) {
-        padding: calc(#{$md-card-indent} * 0.25);
-      }
-
-      &:hover {
-        background-color: var(--md-tertiary-bg-color);
-      }
-
-      &:active {
-        background-color: var(--md-quaternary-bg-color);
-      }
-    }
-
-    .md-card-menu-list-items {
-      padding: calc(#{$md-card-indent} * 0.25);
-    }
-
-    &-content {
-      background: $md-card-content-bg;
-      border: $md-card-border;
-      border-radius: calc(#{$md-card-border-radius} / 2);
-      height: $md-card-content-min-height;
-      margin-bottom: calc(#{$md-card-indent} * 2);
-      overflow: hidden;
-    }
-
-    &.full-screen {
-      display: inline-block;
-      height: 100% !important;
-      left: 0;
-      max-width: 100%;
-      position: absolute;
-      top: 0;
-      width: 100%;
-
-      .md-card-content {
-        height: auto;
-      }
-    }
-
-    &-footer {
-      display: flex;
-      flex-wrap: wrap;
-      gap: $md-card-indent;
-    }
-  }
-}

package/src/components/card/scss/module.scss

@@ -1,13 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-@import "@/wc_scss/tools/mixins/flex";
-
-@import "@/wc_scss/settings/rem";
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-
-@import "@/wc_scss/typography/settings";
-
-@import "./settings";
-@import "./card";

package/src/components/card/scss/settings.scss

@@ -1,11 +0,0 @@
-$md-card-width: rem-calc(424);
-$md-card-menu-width: rem-calc(144);
-$md-card-color: var(--md-secondary-text-color);
-$md-card-title-color: var(--md-primary-text-color);
-$md-card-content-bg: var(--md-secondary-bg-color);
-$md-card-content-min-height: rem-calc(224);
-$md-card-bg: var(--md-tertiary-white-bg-color);
-$md-card-border: var(--md-quaternary-bg-color);
-$md-card-border-radius: rem-calc(8);
-$md-card-box-shadow: rem-calc(0 2 4) $black-16, rem-calc(0 0 1) $black-16;
-$md-card-indent: rem-calc(8);