@momentum-ui/web-components 2.16.3 → 2.16.5

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();
-  });
-});

package/src/components/card/Card.ts

@@ -1,179 +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/favorite/Favorite";
-import "@/components/icon/Icon";
-import "@/components/list/List";
-import "@/components/list/ListItem";
-import "@/components/menu-overlay/MenuOverlay";
-import "@/components/tooltip/Tooltip";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import reset from "@/wc_scss/reset.scss";
-import { html, LitElement, property } from "lit-element";
-import { nothing } from "lit-html";
-import { repeat } from "lit-html/directives/repeat";
-import { Key } from "../../constants"; // Keep type import as a relative path
-import styles from "./scss/module.scss";
-
-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() {
-      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; keyCode: string }>("card-menu-keydown", {
-          detail: {
-            id: this.id,
-            type: label.toLowerCase(),
-            keyCode: event.code
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-
-    render() {
-      return html`
-        <div
-          class="md-card"
-          id="${this.id}"
-          part="card"
-          tabindex="0"
-          @click=${() => this.handleCardClick()}
-          @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-circle-bold" size="16" iconSet="momentumDesign"></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-bold" size="16" iconSet="momentumDesign"></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,131 +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;
-    }
-  }
-
-  @media (forced-colors:active) {
-    .md-card {
-      // High contrast mode specific styles
-      box-shadow: none; // Clears any box shadow
-      outline: 1px solid CanvasText; // High visibility outline in high contrast mode
-      &:focus{
-        outline: 2px solid Highlight;
-      }
-
-      &-header {
-        md-favorite { // favorite icon
-          color: windowText;
-        }
-      }
-    }
-  }
-}

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);

package/src/components/card-ai/CardAi.stories.ts

@@ -1,58 +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/badge/Badge";
-import { CardAiVariant } from "@/components/card-ai/CardAi";
-import { action } from "@storybook/addon-actions";
-import { Args } from "@storybook/web-components";
-import { html } from "lit-html";
-
-export default {
-  title: "Components/Card Ai",
-  component: "md-card-ai",
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: Object.values(CardAiVariant),
-      defaultValue: CardAiVariant.RESPONSE
-    },
-    id: { control: "text", defaultValue: "12345678" },
-    title: { control: "text", defaultValue: "Title" },
-    cardText: { control: "text", defaultValue: "Card Text" },
-    timestamp: { control: "text", defaultValue: "12:35 PM" },
-    summariseMoreVisible: { control: "boolean", defaultValue: false }
-  },
-  parameters: {
-    a11y: {
-      element: "md-card-ai"
-    }
-  }
-};
-
-export const CardAi = (args: Args) => {
-  return html`
-    <md-card-ai
-      id=${args.id}
-      title=${args.title}
-      cardText=${args.cardText}
-      timestamp=${args.timestamp}
-      variant=${args.variant}
-      .summariseMoreVisible=${args.summariseMoreVisible}
-      @thumbs-up-toggled=${(e: CustomEvent<{ id: string }>) => {
-        action("thumbs-up-toggled")(e.detail);
-      }}
-      @thumbs-down-toggled=${(e: CustomEvent<{ id: string }>) => {
-        action("thumbs-down-toggled")(e.detail);
-      }}
-      @summarise-more-toggled=${(e: CustomEvent<{ id: string }>) => {
-        action("summarise-more-toggled")(e.detail);
-      }}
-    >
-    </md-card-ai>
-  `;
-};

package/src/components/card-ai/CardAi.test.ts

@@ -1,203 +0,0 @@
-import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import { CardAi, CardAiVariant } from "./CardAi";
-
-const fixtureFactory = async (
-  id: string,
-  title: string,
-  cardText: string,
-  timestamp: string,
-  variant: CardAiVariant,
-  summariseMoreVisible: boolean
-): Promise<CardAi.ELEMENT> => {
-  return await fixture(html`
-    <md-card-ai
-      id=${id}
-      title=${title}
-      cardText=${cardText}
-      timestamp=${timestamp}
-      variant=${variant}
-      .summariseMoreVisible=${summariseMoreVisible}
-    >
-    </md-card-ai>
-  `);
-};
-
-const getHeader = (element: CardAi.ELEMENT) => element.shadowRoot?.querySelector(".md-card-ai-header");
-const getCardTextForResponse = (element: CardAi.ELEMENT) =>
-  element.shadowRoot?.querySelector(".md-card-ai-card-body-response-with-bottom-border-radius");
-const getCardTextForUserQuery = (element: CardAi.ELEMENT) =>
-  element.shadowRoot?.querySelector(".md-card-ai-card-body-user-query");
-const getThumbsUpButton = (element: CardAi.ELEMENT) =>
-  element.shadowRoot?.querySelector(".md-card-ai-thumbs-up md-button");
-const getCopyButton = (element: CardAi.ELEMENT) =>
-  element.shadowRoot?.querySelector(".md-card-ai-copy-button-container md-button");
-const getResponseCard = (element: CardAi.ELEMENT) => element.shadowRoot?.querySelector(".md-card-ai-time-wrapper");
-const getFooter = (element: CardAi.ELEMENT) => element.shadowRoot?.querySelector(".md-card-ai-footer");
-const getSummariseMoreButton = (element: CardAi.ELEMENT) =>
-  element.shadowRoot?.querySelector(".md-card-ai-footer  md-button");
-
-describe("CardAi component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-
-  test("should render header when title is not empty", async () => {
-    const element = await fixtureFactory("123", "Test Title", "", "", CardAiVariant.RESPONSE, false);
-    const header = getHeader(element);
-    expect(header).not.toBeNull();
-  });
-
-  test("should render card text for response when cardText is not empty", async () => {
-    const element = await fixtureFactory("123", "", "Test Card Text", "2023-01-01", CardAiVariant.RESPONSE, false);
-    const cardText = getCardTextForResponse(element);
-    expect(cardText).not.toBeNull();
-  });
-
-  test("should not render card text when cardText is empty", async () => {
-    const element = await fixtureFactory("123", "", "", "", CardAiVariant.RESPONSE, false);
-    const cardText = getCardTextForResponse(element);
-    expect(cardText).toBeNull();
-  });
-
-  test("should render thumbs up button when timestamp is present", async () => {
-    const element = await fixtureFactory("123", "", "Test Card Text", "2023-01-01", CardAiVariant.RESPONSE, false);
-    const thumbsUpButton = getThumbsUpButton(element);
-    expect(thumbsUpButton).not.toBeNull();
-  });
-
-  test("should not render thumbs up button without timestamp", async () => {
-    const element = await fixtureFactory("123", "", "Test Card Text", "", CardAiVariant.RESPONSE, false);
-    const thumbsUpButton = getThumbsUpButton(element);
-    expect(thumbsUpButton).toBeNull();
-  });
-
-  test("should render copy button when timestamp present", async () => {
-    const element = await fixtureFactory("123", "", "Test Card Text", "2023-01-01", CardAiVariant.RESPONSE, false);
-    const copyButton = getCopyButton(element);
-    expect(copyButton).not.toBeNull();
-  });
-
-  test("should not render copy button when timestamp is not present", async () => {
-    const element = await fixtureFactory("123", "", "Test Card Text", "", CardAiVariant.RESPONSE, false);
-    const copyButton = getCopyButton(element);
-    expect(copyButton).toBeNull();
-  });
-
-  test("should render footer when summariseMoreVisible is true", async () => {
-    const element = await fixtureFactory("123", "", "", "", CardAiVariant.RESPONSE, true);
-    const footer = getFooter(element);
-    expect(footer).not.toBeNull();
-  });
-
-  test("should not render footer when summariseMoreVisible is false", async () => {
-    const element = await fixtureFactory("123", "", "", "", CardAiVariant.RESPONSE, false);
-    const footer = getFooter(element);
-    expect(footer).toBeNull();
-  });
-
-  test("should render response card and timestamp is not empty", async () => {
-    const element = await fixtureFactory("123", "", "Test Card Text", "2023-01-01", CardAiVariant.RESPONSE, false);
-    const responseCard = getResponseCard(element);
-    expect(responseCard).not.toBeNull();
-  });
-
-  test("should not render response card when timestamp is empty", async () => {
-    const element = await fixtureFactory("123", "", "Test Card Text", "", CardAiVariant.RESPONSE, false);
-    const responseCard = getResponseCard(element);
-    expect(responseCard).toBeNull();
-  });
-
-  test("check UI elements when variant is USER_QUERY", async () => {
-    const element = await fixtureFactory("123", "Test Title", "Test Card Text", "", CardAiVariant.USER_QUERY, false);
-    const header = getHeader(element);
-    expect(header).toBeNull();
-    const responseCard = getResponseCard(element);
-    expect(responseCard).toBeNull();
-    const cardText = getCardTextForUserQuery(element);
-    expect(cardText).not.toBeNull();
-  });
-
-  test("Actioning copy button should restore itself after 2 seconds", async () => {
-    const element = await fixtureFactory(
-      "123",
-      "Test Title",
-      "Test Card Text",
-      "2023-01-01",
-      CardAiVariant.RESPONSE,
-      false
-    );
-
-    jest.useFakeTimers();
-
-    const writeTextMock = jest.fn();
-    Object.assign(navigator, {
-      clipboard: {
-        writeText: writeTextMock
-      }
-    });
-
-    const copyButton = getCopyButton(element) as HTMLButtonElement;
-    expect(copyButton).not.toBeNull();
-
-    const originalText = copyButton.textContent;
-
-    copyButton?.click();
-    await elementUpdated(element);
-
-    jest.advanceTimersByTime(1000);
-    await elementUpdated(element);
-
-    expect(copyButton.textContent).not.toBe(originalText);
-
-    jest.advanceTimersByTime(1100);
-    await elementUpdated(element);
-
-    expect(copyButton.textContent).toBe(originalText);
-
-    jest.useRealTimers();
-  });
-
-  test("Actioning thumbs up should dispatch its event", async () => {
-    const element = await fixtureFactory(
-      "123",
-      "Test Title",
-      "Test Card Text",
-      "2023-01-01",
-      CardAiVariant.RESPONSE,
-      false
-    );
-
-    const thumbsUpButton = getThumbsUpButton(element) as HTMLButtonElement;
-    expect(thumbsUpButton).not.toBeNull();
-
-    const eventSpy = jest.fn();
-    element.addEventListener("thumbs-up-toggled", eventSpy);
-
-    thumbsUpButton?.click();
-    await elementUpdated(element);
-
-    expect(eventSpy).toHaveBeenCalled();
-  });
-
-  test("Actioning summarise more should dispatch its event", async () => {
-    const element = await fixtureFactory(
-      "123",
-      "Test Title",
-      "Test Card Text",
-      "2023-01-01",
-      CardAiVariant.RESPONSE,
-      true
-    );
-
-    const summariseMoreButton = getSummariseMoreButton(element) as HTMLButtonElement;
-    expect(summariseMoreButton).not.toBeNull();
-
-    const eventSpy = jest.fn();
-    element.addEventListener("summarise-more-toggled", eventSpy);
-
-    summariseMoreButton?.click();
-    await elementUpdated(element);
-
-    expect(eventSpy).toHaveBeenCalled();
-  });
-});