@momentum-ui/web-components 2.5.7 → 2.5.8

package/src/components/link/Link.test.ts

@@ -1,72 +0,0 @@
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./Link";
-import { Link } from "./Link";
-
-describe("Link component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-
-  //tag
-  test("should create correct tag", async () => {
-    expect.hasAssertions();
-    const component: Link.ELEMENT = await fixture(`<md-link tag="span"></md-link>`);
-    expect(component.tag).toMatch("span");
-  });
-
-  //tag div
-  test("should create correct tag", async () => {
-    expect.hasAssertions();
-    const component: Link.ELEMENT = await fixture(`<md-link tag="div"></md-link>`);
-    expect(component.tag).toMatch("div");
-  });
-
-  // href
-  test("should provide link href", async () => {
-    expect.hasAssertions();
-    const component: Link.ELEMENT = await fixture(` <md-link href="#"></md-link> `);
-    expect(component.href).not.toBeNull();
-  });
-
-  // color
-  test("should set link color", async () => {
-    expect.hasAssertions();
-    const component: Link.ELEMENT = await fixture(` <md-link class="md-link--yellow"></md-link> `);
-    expect(component.className).toContain("md-link--yellow");
-  });
-
-  test("should set link tab-index", async () => {
-    expect.hasAssertions();
-    const component: Link.ELEMENT = await fixture(` <md-link tab-index="1"></md-link> `);
-    expect(component.getAttribute("tab-index")).toEqual("1");
-
-    const linkShadow = component!.shadowRoot!.querySelector(".md-link");
-    expect(linkShadow!.getAttribute("tabindex")).toContain("1");
-  });
-
-  test("should set link tab-index correctly when disabled", async () => {
-    expect.hasAssertions();
-    const component: Link.ELEMENT = await fixture<Link.ELEMENT>(` <md-link tab-index="1" disabled></md-link> `);
-    expect(component.disabled).toBeTruthy();
-
-    const linkShadow = component!.shadowRoot!.querySelector(".md-link");
-    expect(linkShadow!.getAttribute("tabindex")).toContain("-1");
-  });
-
-  // disabled
-  test("should check if link disabled", async () => {
-    expect.hasAssertions();
-    const component: Link.ELEMENT = await fixture(
-      html`
-        <md-link disabled></md-link>
-      `
-    );
-    expect(component.disabled).toBeTruthy();
-  });
-
-  // inline
-  test("should make link inline", async () => {
-    const component: Link.ELEMENT = await fixture(`<md-link class="md-link--inline"></md-link>`);
-    expect(component.className).toContain("md-link--inline");
-  });
-});

package/src/components/link/Link.ts

@@ -1,96 +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 { classMap } from "lit-html/directives/class-map";
-import styles from "./scss/module.scss";
-
-export const linkTag = ["a", "div", "span"] as const;
-export const linkColor = ["", "blue", "red", "green", "yellow", "orange"] as const;
-
-export namespace Link {
-  export type Tag = typeof linkTag[number];
-  export type Color = typeof linkColor[number];
-
-  @customElementWithCheck("md-link")
-  export class ELEMENT extends LitElement {
-    @property({ type: String, attribute: false }) color: Color = "";
-    @property({ type: Boolean }) disabled = false;
-    @property({ type: Boolean }) inline = false;
-    @property({ type: String }) href = "";
-    @property({ type: String }) tag: Tag = "a";
-    @property({ type: String }) target = "_self";
-    private _tabIndex = 0;
-    @property({ type: Number, attribute: "tab-index", reflect: true })
-    get tabIndex() {
-      if (this.disabled) {
-        return -1;
-      }
-      return this._tabIndex;
-    }
-    set tabIndex(newValue: number) {
-      const oldValue = this._tabIndex;
-      this._tabIndex = newValue;
-      this.requestUpdate("tabIndex", oldValue);
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      const linkClassNamesInfo = {
-        [`md-link--${this.color}`]: this.color,
-        [`md-link--inline`]: this.inline,
-        disabled: this.disabled
-      };
-
-      const linkElement = () => {
-        switch (this.tag) {
-          case "div":
-            return html`
-              <div class="md-link ${classMap(linkClassNamesInfo)}" tabindex=${this.tabIndex} role="link" part="link">
-                <slot></slot>
-              </div>
-            `;
-          case "span":
-            return html`
-              <span class="md-link ${classMap(linkClassNamesInfo)}" tabindex=${this.tabIndex} role="link" part="link">
-                <slot></slot>
-              </span>
-            `;
-
-          default:
-            return html`
-              <a
-                class="md-link ${classMap(linkClassNamesInfo)}"
-                .target="${this.target}"
-                href=${this.href}
-                tabindex=${this.tabIndex}
-                role="link"
-                part="link"
-              >
-                <slot></slot>
-              </a>
-            `;
-        }
-      };
-      return html`
-        ${linkElement()}
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-link": Link.ELEMENT;
-  }
-}

package/src/components/link/scss/link.scss

@@ -1,27 +0,0 @@
-/** @component link */
-
-@include exports("md-link") {
-  .md-link {
-    @include link-color();
-    border-radius: rem-calc(4);
-    cursor: pointer;
-    display: inline-flex;
-    font-size: $link__font-size;
-    line-height: $link__line-height;
-    width: fit-content;
-    
-    &:focus {
-      outline: none;
-    }
-
-    &.disabled {
-      pointer-events: none;
-    }
-
-    &--inline {
-      font-size: $link-inline__font-size;
-      line-height: $link-inline__line-height;
-      text-decoration: underline;
-    }
-  }
-}

package/src/components/link/scss/mixins.scss

@@ -1,124 +0,0 @@
-@mixin link-color(
-  $color: var(--link-default, $lm-link-default-light),
-  $color-hover: var(--link-hover, $lm-link-hover-light),
-  $color-pressed: var(--link-pressed, $lm-link-pressed-light),
-  $color-focus: var(--link-focus, $lm-link-focus-light),
-  $focus-outline: var( --link-focus-outline, $lm-link-focus-outline-light),
-  $color-disabled: var(--link-disabled, $lm-link-disabled-light),
-  $color-inline: var(--link-inline, $lm-link-inline-light),
-  $color-inline-hover: var(--link-inline-hover, $lm-link-inline-hover-light),
-  $color-inline-pressed: var(--link-inline-pressed, $lm-link-inline-pressed-light),
-  $color-inline-focus: var(--link-inline-focus, $lm-link-inline-focus-light),
-  $color-blue: var(--link-blue, $md-link-blue-light),
-  $color-blue-hover: var(--link-blue-hover,$md-link-blue-hover-light),
-  $color-blue-active: var(--link-blue-active,$md-link-blue-active-light),
-  $color-red: var(--link-red, $md-link-red-light),
-  $color-red-hover: var(--link-red-hover, $md-link-red-hover-light),
-  $color-red-active: var(--link-red-active, $md-link-red-active-light),
-  $color-green: var(--link-green, $md-link-green-light),
-  $color-green-hover: var(--link-green-hover, $md-link-green-hover-light),
-  $color-green-active: var(--link-green-active, $md-link-green-active-light),
-  $color-yellow: var(--link-yellow, $md-link-yellow-light),
-  $color-yellow-hover: var(--link-yellow-hover, $md-link-yellow-hover-light),
-  $color-yellow-active: var(--link-yellow-active, $md-link-yellow-active-light),
-  $color-orange: var(--link-orange, $md-link-orange-light),
-  $color-orange-hover: var(--link-orange-hover, $md-link-orange-hover-light),
-  $color-orange-active: var(--link-orange-active, $md-link-orange-active-light)
-) {
-  color: $color;
-
-  &:hover {
-    color: $color-hover;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 2px $focus-outline;
-    color: $color-focus;
-  }
-
-  &.active {
-    color: $color-pressed;
-  }
-
-  &.disabled,
-  &.md-link--inline.disabled {
-    color: $color-disabled;
-  }
-
-  &.md-link--inline {
-    color: $color-inline;
-
-    &:hover {
-      color: $color-inline-hover;
-    }
-
-    &:focus {
-      color: $color-inline-focus;
-    }
-
-    &.active {
-      color: $color-inline-pressed;
-    }
-  }
-
-  .md-link--blue {
-    color: $color-blue;
-
-    &:hover {
-      color: $color-blue-hover;
-    }
-
-    &.active {
-      color: $color-blue-active;
-    }
-  }
-
-  .md-link--red {
-    color: $color-red;
-
-    &:hover {
-      color: $color-red-hover;
-    }
-
-    &.active {
-      color: $color-red-active;
-    }
-  }
-
-  .md-link--green {
-    color: $color-green;
-
-    &:hover {
-      color: $color-green-hover;
-    }
-
-    &.active {
-      color: $color-green-active;
-    }
-  }
-
-  .md-link--yellow {
-    color: $color-yellow;
-
-    &:hover {
-      color: $color-yellow-hover;
-    }
-
-    &.active {
-      color: $color-yellow-active;
-    }
-  }
-
-  .md-link--orange {
-    color: $color-orange;
-
-    &:hover {
-      color: $color-orange-hover;
-    }
-
-    &.active {
-      color: $color-orange-active;
-    }
-  }
-}
-

package/src/components/link/scss/module.scss

@@ -1,14 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-
-// Settings
-@import "@/wc_scss/colors/settings-base.scss";
-@import "@/wc_scss/settings/core.scss";
-@import "@/wc_scss/typography/settings";
-
-@import "./vars/lm-link-settings";
-@import "./vars/md-link-settings";
-
-// Component Specific
-@import "./mixins";
-@import "./settings";
-@import "./link";

package/src/components/link/scss/settings.scss

@@ -1,5 +0,0 @@
-$link__font-family: $brand-font-regular !default;
-$link__font-size: var(--link-inline-font-size, $lm-link-inline-font-size-light);
-$link__line-height: 170% !default;
-$link-inline__font-size: var(--link-inline-font-size, $lm-link-inline-font-size-light);
-$link-inline__line-height: 100% !default;

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

@@ -1,61 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const link = {
-  prefix: "lm",
-  component: "link",
-  default: {
-    light: colors.blue[70].name,
-    dark: colors.blue[40].name
-  },
-  hover: {
-    light: colors.blue[70].name,
-    dark: colors.blue[20].name
-  },
-  pressed: {
-    light: colors.blue[80].name,
-    dark: colors.blue[10].name
-  },
-  focus: {
-    light: colors.blue[70].name,
-    dark: colors.blue[40].name,
-
-    outline: {
-      light: colors.blue[60].name,
-      dark: colors.blue[60].name
-    }
-  },
-  disabled: {
-    light: colors.gray[40].name,
-    dark: colors.gray[70].name
-  },
-  inline: {
-    light: colors.red[70].name,
-    dark: colors.red[50].name,
-
-    hover: {
-      light: colors.red[80].name,
-      dark: colors.red[40].name
-    },
-    pressed: {
-      light: colors.red[90].name,
-      dark: colors.red[30].name
-    },
-    focus: {
-      light: colors.red[70].name,
-      dark: colors.red[50].name
-    },
-    "font-size": {
-      light: "14px",
-      dark: "14px"
-    },
-    "font-size__inline": {
-      light: "12px",
-      dark: "12px"
-    }
-  }
-};
-
-module.exports = link;

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

@@ -1,127 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const link = {
-  prefix: "md",
-  component: "link",
-  default: {
-    light: colors.blue["70"].name,
-    dark: colors.blue["40"].name
-  },
-  hover: {
-    light: colors.blue["70"].name,
-    dark: colors.blue["20"].name
-  },
-  pressed: {
-    light: colors.blue["80"].name,
-    dark: colors.blue["10"].name
-  },
-  focus: {
-    light: colors.blue["70"].name,
-    dark: colors.blue["40"].name,
-
-    outline: {
-      light: colors.blue["60"].name,
-      dark: colors.blue["60"].name
-    }
-  },
-  disabled: {
-    light: colors.gray["40"].name,
-    dark: colors.gray["70"].name
-  },
-  inline: {
-    light: colors.red["70"].name,
-    dark: colors.red["50"].name,
-
-    hover: {
-      light: colors.red["80"].name,
-      dark: colors.red["40"].name
-    },
-    pressed: {
-      light: colors.red["90"].name,
-      dark: colors.red["30"].name
-    },
-    focus: {
-      light: colors.red["70"].name,
-      dark: colors.red["50"].name
-    }
-  },
-  "font-size": {
-    light: "16px",
-    dark: "16px"
-  },
-  blue: {
-    light: colors.blue[50].name,
-    dark: colors.blue[50].name,
-
-    hover: {
-      light: colors.blue[60].name,
-      dark: colors.blue[60].name,
-    },
-
-    active: {
-      light: colors.blue[70].name,
-      dark: colors.blue[70].name,
-    },
-  },
-  red: {
-    light: colors.red[50].name,
-    dark: colors.red[50].name,
-
-    hover: {
-      light: colors.red[60].name,
-      dark: colors.red[60].name,
-    },
-
-    active: {
-      light: colors.red[70].name,
-      dark: colors.red[70].name,
-    },
-  },
-  green: {
-    light: colors.green[50].name,
-    dark: colors.green[50].name,
-
-    hover: {
-      light: colors.green[60].name,
-      dark: colors.green[60].name,
-    },
-
-    active: {
-      light: colors.green[70].name,
-      dark: colors.green[70].name,
-    },
-  },
-  yellow: {
-    light: colors.yellow[50].name,
-    dark: colors.yellow[50].name,
-
-    hover: {
-      light: colors.yellow[60].name,
-      dark: colors.yellow[60].name,
-    },
-
-    active: {
-      light: colors.yellow[70].name,
-      dark: colors.yellow[70].name,
-    },
-  },
-  orange: {
-    light: colors.orange[50].name,
-    dark: colors.orange[50].name,
-
-    hover: {
-      light: colors.orange[60].name,
-      dark: colors.orange[60].name,
-    },
-
-    active: {
-      light: colors.orange[70].name,
-      dark: colors.orange[70].name,
-    },
-  }
-};
-
-module.exports = link;

package/src/components/list/List.stories.ts

@@ -1,57 +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/list/List";
-import "@/components/list/ListItem";
-import "@/components/theme/Theme";
-import { withA11y } from "@storybook/addon-a11y";
-import { select, boolean, text, withKnobs, number } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: "Components/List",
-  component: "md-list",
-  decorators: [withKnobs, withA11y],
-  argTypes: {
-    slotElement: { table: { disable: true } },
-    listItemSlot: { table: { disable: true } },
-    activated: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-list"
-    }
-  }
-};
-
-const options = {
-  Vertical: "vertical",
-  Horizontal: "horizontal"
-};
-
-export const List = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const disabled = boolean("Disabled", false);
-  const selected = number("Preselected", 2);
-  const alignment = select("Orientation", options, "vertical");
-
-  return html`
-    <md-theme class="theme-toggle" id="list" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-list @list-item-change=${action('change')} label="Transuranium elements" .activated="${selected}" .alignment=${alignment as any}>
-        <md-list-item slot="list-item">Neptunium</md-list-item>
-        <md-list-item slot="list-item" ?disabled=${disabled}>Plutonium</md-list-item>
-        <md-list-item slot="list-item">Americium</md-list-item>
-        <md-list-item slot="list-item" ?disabled=${disabled}>Curium</md-list-item>
-        <md-list-item slot="list-item">Berkelium</md-list-item>
-        <md-list-item slot="list-item">Californium</md-list-item>
-      </md-list>
-    </md-theme>
-  `;
-};