@momentum-ui/web-components 2.16.3 → 2.16.4

package/src/components/badge/tokens/mdv2-badge-tokens.js

@@ -1,392 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const badge = {
-  prefix: "mdv2",
-  component: "badge",
-  default: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-default-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-default-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-default-active"
-      }
-    }
-  },
-  blue: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-theme-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-accent-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-theme-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-theme-active"
-      }
-    }
-  },
-  gray: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-default-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-default-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-default-active"
-      }
-    }
-  },
-  green: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-success-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-success-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-success-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-success-active"
-      }
-    }
-  },
-  lime: {
-    "bg-color": {
-      light: colors.lime[20].name,
-      dark: colors.lime[70].name
-    },
-    "text-color": {
-      light: colors.lime[70].name,
-      dark: colors.lime[20].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.lime[30].name,
-        dark: colors.lime[60].name
-      }
-    },
-    active: {
-      "bg-color": {
-        light: colors.lime[40].name,
-        dark: colors.lime[50].name
-      }
-    }
-  },
-  pink: {
-    "bg-color": {
-      light: colors.pink[20].name,
-      dark: colors.pink[70].name
-    },
-    "text-color": {
-      light: colors.pink[70].name,
-      dark: colors.pink[20].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.pink[30].name,
-        dark: colors.pink[60].name
-      }
-    },
-    active: {
-      "bg-color": {
-        light: colors.pink[40].name,
-        dark: colors.pink[50].name
-      }
-    }
-  },
-  purple: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-purple-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-alert-purple-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-purple-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-purple-active"
-      }
-    }
-  },
-  violet: {
-    "bg-color": {
-      light: colors.violet[20].name,
-      dark: colors.violet[70].name
-    },
-    "text-color": {
-      light: colors.violet[70].name,
-      dark: colors.violet[20].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.violet[30].name,
-        dark: colors.violet[60].name
-      }
-    },
-    active: {
-      "bg-color": {
-        light: colors.violet[40].name,
-        dark: colors.violet[50].name
-      }
-    }
-  },
-  mint: {
-    "bg-color": {
-      light: colors.mint[20].name,
-      dark: colors.mint[70].name
-    },
-    "text-color": {
-      light: colors.mint[70].name,
-      dark: colors.mint[20].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.mint[30].name,
-        dark: colors.mint[60].name
-      }
-    },
-    active: {
-      "bg-color": {
-        light: colors.mint[40].name,
-        dark: colors.mint[50].name
-      }
-    }
-  },
-  darkmint: {
-    "bg-color": {
-      common: colors.mint[50].name
-    },
-    "text-color": {
-      common: colors.gray["05"].name
-    }
-  },
-  yellow: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-warning-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-warning-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-warning-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-warning-active"
-      }
-    }
-  },
-  gold: {
-    "bg-color": {
-      light: colors.gold[20].name,
-      dark: colors.gold[70].name
-    },
-    "text-color": {
-      light: colors.gold[70].name,
-      dark: colors.gold[20].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gold[30].name,
-        dark: colors.gold[60].name
-      }
-    },
-    active: {
-      "bg-color": {
-        light: colors.gold[40].name,
-        dark: colors.gold[50].name
-      }
-    }
-  },
-  red: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-error-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-error-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-error-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-error-active"
-      }
-    }
-  },
-  darkred: {
-    "bg-color": {
-      common: colors.red[60].name
-    },
-    "text-color": {
-      light: colors.red[90].name,
-      dark: colors.red[30].name
-    }
-  },
-  orange: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-orange-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-warning-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-orange-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-orange-active"
-      }
-    }
-  },
-  cyan: {
-    "bg-color": {
-      light: colors.cyan[20].name,
-      dark: colors.cyan[80].name
-    },
-    "text-color": {
-      light: colors.cyan[70].name,
-      dark: colors.cyan[20].name
-    }
-  },
-  unreadcount: {
-    "bg-color": {
-      common: "$mds-color-theme-background-accent-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-common-text-primary-normal"
-    }
-  },
-  hold: {
-    "bg-color": {
-      light: colors.yellow[10].name,
-      dark: colors.yellow[80].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    }
-  },
-  outline: {
-    color: {
-      light: colors.gray[40].name,
-      dark: colors.gray[20].name
-    },
-    "text-color": {
-      light: colors.gray[50].name,
-      dark: colors.gray["05"].name
-    }
-  },
-  disabled: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[90].name
-    },
-    "text-color": {
-      light: colors.gray[40].name,
-      dark: colors.gray[70].name
-    }
-  },
-  positive: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-success-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    },
-    "border-color": {
-      common: "$mds-color-theme-text-success-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-success-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-success-active"
-      }
-    }
-  },
-  negative: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-error-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    },
-    "border-color": {
-      common: "$mds-color-theme-text-error-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-error-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-error-active"
-      }
-    }
-  },
-  neutral: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-default-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    },
-    "border-color": {
-      common: "$mds-color-theme-outline-button-normal"
-    },
-    hover: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-default-hover"
-      }
-    },
-    active: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-default-active"
-      }
-    }
-  }
-};
-
-module.exports = badge;

package/src/components/breadcrumb/Breadcrumb.stories.ts

@@ -1,50 +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/breadcrumb/Breadcrumb";
-import { Args, Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit-html";
-
-const breadCrumb = [
-  {
-    link: "/one",
-    label: "One"
-  },
-  {
-    link: "/two",
-    label: "Two"
-  },
-  {
-    link: "/three",
-    label: "Three"
-  },
-  {
-    link: "/four",
-    label: "Four"
-  }
-];
-
-const render = (_args: Args) => html` <md-breadcrumb .navCrumbs="${breadCrumb}"></md-breadcrumb> `;
-
-export const Breadcrumb: StoryObj = {
-  args: {},
-  render: render
-};
-
-const meta: Meta = {
-  title: "Components/Breadcrumb",
-  component: "md-breadcrumb",
-  argTypes: {},
-  parameters: {
-    a11y: {
-      element: "md-breadcrumb"
-    }
-  }
-};
-
-export default meta;

package/src/components/breadcrumb/Breadcrumb.test.ts

@@ -1,38 +0,0 @@
-import "./Breadcrumb";
-import { Breadcrumb } from "./Breadcrumb";
-import { fixture, fixtureCleanup } from "@open-wc/testing-helpers";
-import { breadCrumb } from "@/[sandbox]/sandbox.mock";
-import { html } from "lit-element";
-
-describe("Breadcrumb component", () => {
-  afterEach(fixtureCleanup);
-
-  let element: Breadcrumb.ELEMENT;
-  let anchors: HTMLAnchorElement[];
-
-  beforeEach(async () => {
-    element = await fixture<Breadcrumb.ELEMENT>(html` <md-breadcrumb .navCrumbs="${breadCrumb}"></md-breadcrumb> `);
-    anchors = Array.from(element.shadowRoot!.querySelectorAll("a[href]"));
-  });
-
-  test("should render correctly breadcrumb", async () => {
-    expect(element).toBeDefined();
-  });
-
-  test("should render anchors", async () => {
-    expect(anchors.length).toEqual(4);
-  });
-
-  test("should render breadcrumb label", async () => {
-    expect(element.navCrumbs.length).not.toEqual(0);
-  });
-
-  test("should dispatch event when breadcrumb change", async () => {
-    const clickSpy = jest.spyOn(element, "handleClick");
-
-    anchors[0].click();
-
-    expect(clickSpy).toHaveBeenCalled();
-    clickSpy.mockRestore();
-  });
-});

package/src/components/breadcrumb/Breadcrumb.ts

@@ -1,79 +0,0 @@
-import reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, LitElement, property, PropertyValues, queryAll } from "lit-element";
-import styles from "./scss/module.scss";
-import { repeat } from "lit-html/directives/repeat";
-import { ifDefined } from "lit-html/directives/if-defined";
-
-export namespace Breadcrumb {
-  type NavCrumb = {
-    link: string;
-    label: string;
-  };
-
-  @customElementWithCheck("md-breadcrumb")
-  export class ELEMENT extends LitElement {
-    @property({ type: String, attribute: "aria-label" }) label = "Breadcrumb";
-    @property({ type: Array, attribute: "nav-crumbs", reflect: true }) navCrumbs: NavCrumb[] = [];
-
-    @queryAll("a[href]") anchors?: HTMLAnchorElement[];
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    private setLastAnchorCurrent() {
-      if (this.anchors && this.anchors.length) {
-        this.anchors[this.anchors.length - 1].setAttribute("aria-current", "page");
-      }
-    }
-
-    protected firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-      this.setLastAnchorCurrent();
-    }
-
-    protected update(changedProperties: PropertyValues) {
-      super.update(changedProperties);
-
-      if (changedProperties.has("navCrumbs")) {
-        this.setLastAnchorCurrent();
-      }
-    }
-
-    handleClick(event: MouseEvent) {
-      const navCrumb = event.target as HTMLAnchorElement;
-
-      if (this.anchors && this.anchors.length) {
-        const navCrumbIndex = Array.from(this.anchors).indexOf(navCrumb);
-        if (navCrumbIndex !== -1) {
-          this.navCrumbs = [...this.navCrumbs.splice(0, navCrumbIndex + 1)];
-        }
-      }
-    }
-
-    render() {
-      return html`
-        <nav aria-label="${ifDefined(this.label ? this.label : undefined)}" class="md-breadcrumb">
-          <ul @click=${(event: MouseEvent) => this.handleClick(event)}>
-            ${repeat(
-              this.navCrumbs,
-              (navCrumb: NavCrumb) => navCrumb.link,
-              (navCrumb) => html`
-                <li>
-                  <a href="${navCrumb.link}"> ${navCrumb.label} </a>
-                </li>
-              `
-            )}
-          </ul>
-        </nav>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-breadcrumb": Breadcrumb.ELEMENT;
-  }
-}

package/src/components/breadcrumb/scss/breadcrumb.scss

@@ -1,39 +0,0 @@
-:host(:focus) {
-  box-shadow: none;
-  outline: none !important;
-}
-
-:host(md-breadcrumb) {
-  .md-breadcrumb {
-    ul {
-      @include flex($jc: flex-start);
-      @include nav-list();
-    }
-
-    li {
-      display: flex;
-      text-transform: capitalize;
-      font-size: $breadcrumb-font-size;
-
-      &:not(:first-child) {
-
-        &::before {
-          display: flex;
-          margin: $breadcrumb-side-padding ;
-          color: $breadcrumb-slash-color;
-          content: "/";
-        }
-      }
-    }
-    a{
-      color: $breadcrumb-color;
-
-      &[aria-current="page"] {
-        pointer-events: none;
-        cursor: default;
-        color: $breadcrumb-color-current;
-      }
-    }
-  }
-
-}

package/src/components/breadcrumb/scss/mixins.scss

@@ -1,5 +0,0 @@
-@mixin nav-list() {
-  margin: 0;
-  padding: $breadcrumb-padding;
-  list-style: none;
-}

package/src/components/breadcrumb/scss/module.scss

@@ -1,15 +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/lm-breadcrumb-settings";
-
-@import "./settings";
-@import "./mixins";
-@import "./breadcrumb";

package/src/components/breadcrumb/scss/settings.scss

@@ -1,6 +0,0 @@
-$breadcrumb-padding: rem-calc(9 14 9) !default;
-$breadcrumb-side-padding: rem-calc(0 12) !default;
-$breadcrumb-font-size: rem-calc(14) !default;
-$breadcrumb-color: var(--breadcrumb-color, $lm-breadcrumb-color-light) !default;
-$breadcrumb-color-current: var(--breadcrumb-color-current, $lm-breadcrumb-color-current-light) !default;
-$breadcrumb-slash-color: var(--breadcrumb-color-slash, $lm-breadcrumb-color-slash-light) !default;

package/src/components/breadcrumb/tokens/lm-breadcrumb-token.js

@@ -1,23 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const breadcrumb = {
-  prefix: "lm",
-  component: "breadcrumb",
-  color: {
-    light: colors.blue[50].name,
-    dark: colors.blue[40].name,
-    current: {
-      light: colors.gray[90].name,
-      dark: colors.gray[50].name
-    },
-    slash: {
-      light: colors.gray[50].name,
-      dark: colors.gray[40].name
-    }
-  }
-};
-
-module.exports = breadcrumb;

package/src/components/breadcrumb/tokens/md-breadcrumb-token.js

@@ -1,23 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const breadcrumb = {
-  prefix: "md",
-  component: "breadcrumb",
-  color: {
-    light: colors.blue[50].name,
-    dark: colors.blue[40].name,
-    current: {
-      light: colors.gray[90].name,
-      dark: colors.gray[50].name
-    },
-    slash: {
-      light: colors.gray[50].name,
-      dark: colors.gray[40].name
-    }
-  }
-};
-
-module.exports = breadcrumb;

package/src/components/breadcrumb/tokens/mdv2-breadcrumb-token.js

@@ -1,18 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const breadcrumb = {
-  prefix: "mdv2",
-  component: "breadcrumb",
-  color: {
-    common: "$mds-color-theme-text-accent-normal",
-    current: {
-      common: "$mds-color-theme-text-primary-normal"
-    },
-    slash: {
-      common: "$mds-color-theme-text-primary-disabled"
-    }
-  }
-};
-
-module.exports = breadcrumb;