@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/radio/scss/radio.scss

@@ -1,101 +0,0 @@
-:host(md-radio) {
-  .md-radio {
-    &-wrapper {
-      max-height: $radio-input-max-height;
-      display: inline-flex;
-    }
-
-    &-input {
-      height: $radio-input-max-height;
-      position: absolute;
-      visibility: hidden;
-      width: 100%;
-    }
-
-    &-label {
-      color: var(--md-primary-text-color, $md-gray-100);
-      cursor: pointer;
-      font-size: $font-size-base;
-      line-height: $radio-input-max-height;
-      padding-left: calc(#{$radio-input-size} * 1.8);
-      padding-right: calc(#{$radio-main-indent} / 2);
-      pointer-events: none;
-      position: relative;
-      @include text-dots;
-
-      &::before {
-        content: "";
-        position: absolute;
-        border: $radio-input-border;
-        @include border-radius(50%);
-        box-shadow: inset 0 0 0 $radio-input-selected-size $radio-input-bg, inset 0 0 0 $radio-input-size $radio-input-bg;
-        box-sizing: border-box;
-        height: $radio-input-size;
-        left: rem-calc(2);
-        top: rem-calc(1);
-        width: $radio-input-size;
-      }
-    }
-  }
-}
-
-:host(:focus) {
-  box-shadow: none;
-  outline: none;
-}
-
-:host([focus-visible]:not([disabled])) {
-  @include focus-boxshadow(rem-calc(2), var(--md-default-focus-outline-color, $md-blue-70));
-}
-
-:host(:hover:not([disabled])) {
-  .md-radio-label:before {
-    border: $radio-input-hover-border;
-    box-shadow: inset 0 0 0 $radio-input-selected-size $radio-input-hover-bg,
-    inset 0 0 0 $radio-input-size $radio-input-hover-bg;
-  }
-}
-
-:host(:active:not([disabled])) {
-  .md-radio-label:before {
-    border: $radio-input-pressed-border;
-    box-shadow: inset 0 0 0 $radio-input-selected-size $radio-input-pressed-bg,
-    inset 0 0 0 $radio-input-size $radio-input-pressed-bg;
-  }
-}
-
-:host([disabled]) {
-  cursor: not-allowed;
-  opacity: 0.4;
-  .md-radio-label:before {
-    border: $radio-input-hover-border;
-    box-shadow: inset 0 0 0 $radio-input-selected-size $radio-input-hover-bg,
-    inset 0 0 0 $radio-input-size $radio-input-hover-bg;
-  }
-}
-
-:host([aria-checked="true"]) {
-  .md-radio-label:before {
-    border-color: var(--radio-input-selected-border-color, $lm-radio-input-selected-border-color-light);
-    box-shadow: inset 0 0 0 $radio-input-selected-size $radio-input-selected-bg,
-    inset 0 0 0 $radio-input-size $md-white-100;
-  }
-}
-
-:host([aria-checked="true"]:hover:not([disabled])) {
-  .md-radio-label:before {
-    border-color: var(--radio-input-selected-hover-border-color, $lm-radio-input-selected-hover-border-color-light);
-    box-shadow: inset 0 0 0 $radio-input-selected-size
-      var(--radio-input-selected-hover-bg-color, $lm-radio-input-selected-hover-bg-color-light),
-      inset 0 0 0 $radio-input-size $md-white-100;
-  }
-}
-
-:host([aria-checked="true"]:active:not([disabled])) {
-  .md-radio-label:before {
-    border-color: var(--radio-input-selected-pressed-border-color, $lm-radio-input-selected-pressed-border-color-light);
-    box-shadow: inset 0 0 0 $radio-input-selected-size
-      var(--radio-input-selected-pressed-bg-color, $lm-radio-input-selected-pressed-bg-color-light),
-      inset 0 0 0 $radio-input-size $md-white-100;
-  }
-}

package/src/components/radio/scss/radiogroup.scss

@@ -1,25 +0,0 @@
-:host(md-radiogroup) {
-  display: flex;
-}
-:host(md-radio) {
-  border-radius: $radio-input-border-radius;
-  display: inline !important;
-}
-
-:host([alignment="vertical"]) div {
-  display: inline-flex;
-  flex-direction: column;
-}
-
-:host([alignment="vertical"]) div ::slotted(md-radio) {
-  margin-bottom: calc(#{$radio-main-indent} * 3);
-}
-
-:host([alignment="horizontal"]) div {
-  display: inline-flex;
-  flex-direction: row;
-}
-
-:host([alignment="horizontal"]) div ::slotted(md-radio) {
-  margin-right: calc(#{$radio-main-indent} * 8);
-}

package/src/components/radio/scss/settings.scss

@@ -1,17 +0,0 @@
-:host {
-  --radio-label-text-color: var(--radio-input-text-color, $lm-radio-input-text-color-light);
-}
-
-$radio-input-bg: var(--radio-input-bg-color, $lm-radio-input-bg-color-light);
-$radio-input-border: rem-calc(1) solid var(--radio-input-border-color, $lm-radio-input-border-color-light);
-$radio-input-hover-border: rem-calc(1) solid var(--radio-input-hover-border-color, $lm-radio-input-hover-border-color-light);
-$radio-input-pressed-border: rem-calc(1) solid var(--radio-input-pressed-border-color, $lm-radio-input-pressed-border-color-light);
-$radio-input-hover-bg: var(--radio-input-hover-bg-color, $lm-radio-input-border-color-light);
-$radio-input-pressed-bg: var(--radio-input-pressed-bg-color, $lm-radio-input-pressed-bg-color-light);
-$radio-input-selected-bg: var(--radio-input-selected-bg-color, $lm-radio-input-selected-bg-color-light);
-$radio-main-indent: rem-calc(4);
-$radio-input-size: rem-calc(20);
-$radio-input-max-height: rem-calc(23);
-$radio-input-selected-size: 0.36rem;
-$radio-input-border-radius: rem-calc(4);
-

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

@@ -1,80 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const radio = {
-  prefix: "lm",
-  component: "radio",
-  input: {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[100].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    "border-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[70].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[90].name
-      },
-      "border-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[80].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[80].name
-      },
-      "border-color": {
-        light: colors.gray[30].name,
-        dark: colors.gray[70].name
-      }
-    },
-    selected: {
-      "bg-color": {
-        light: colors.blue[50].name,
-        dark: colors.blue[40].name
-      },
-      "border-color": {
-        light: colors.blue[50].name,
-        dark: colors.blue[40].name
-      },
-      "hover-bg-color": {
-        light: colors.blue[60].name,
-        dark: colors.blue[50].name
-      },
-      "hover-border-color": {
-        light: colors.blue[60].name,
-        dark: colors.blue[50].name
-      },
-      "pressed-bg-color": {
-        light: colors.blue[70].name,
-        dark: colors.blue[60].name
-      },
-      "pressed-border-color": {
-        light: colors.blue[70].name,
-        dark: colors.blue[60].name
-      }
-    },
-    focus: {
-      "border-color": {
-        light: colors.theme[70].name,
-        dark: colors.theme[70].name
-      },
-      "shadow-color": {
-        light: "0 0 4px 2px transparent",
-        dark: "0 0 4px 2px transparent"
-      }
-    }
-  }
-};
-
-module.exports = radio;

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

@@ -1,80 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const radio = {
-  prefix: "md",
-  component: "radio",
-  input: {
-    "bg-color": {
-      light: colors.white[60].name,
-      dark: colors.gray[95].name
-    },
-    "text-color": {
-      light: colors.gray[90].name,
-      dark: colors.gray[10].name
-    },
-    "border-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[90].name
-      },
-      "border-color": {
-        light: colors.gray[30].name,
-        dark: colors.gray[80].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[30].name,
-        dark: colors.gray[80].name
-      },
-      "border-color": {
-        light: colors.gray[40].name,
-        dark: colors.gray[70].name
-      }
-    },
-    selected: {
-      "bg-color": {
-        light: colors.theme[50].name,
-        dark: colors.theme[50].name
-      },
-      "border-color": {
-        light: colors.theme[50].name,
-        dark: colors.theme[50].name
-      },
-      "hover-bg-color": {
-        light: colors.theme[60].name,
-        dark: colors.theme[60].name
-      },
-      "hover-border-color": {
-        light: colors.theme[60].name,
-        dark: colors.theme[60].name
-      },
-      "pressed-bg-color": {
-        light: colors.theme[70].name,
-        dark: colors.theme[70].name
-      },
-      "pressed-border-color": {
-        light: colors.theme[70].name,
-        dark: colors.theme[70].name
-      }
-    },
-    focus: {
-      "border-color": {
-        light: colors.theme[70].name,
-        dark: colors.theme[70].name
-      },
-      "shadow-color": {
-        light: "0 0 4px 2px transparent",
-        dark: "0 0 4px 2px transparent"
-      }
-    }
-  }
-};
-
-module.exports = radio;

package/src/components/sass-stats/README.md

@@ -1,25 +0,0 @@
-# SASS STATS - Compiler and Component
-
-For added visibility into ongoing style efficiency improvements, the Dev build of this repository also compiles JSON data about several CSS metrics, including total file size, number of selectors, etc.
-
-## TO USE
-
-Simply wrap the component you are working on in the `<sass-stats>` component in the sandbox environment, like so:
-
-````html
-<div class="container" aria-label="md-avatar">
-  <sass-stats component="avatar">
-    ${avatarTemplate}
-  </sass-stats>
-</div>
-```
-````
-
-There are no additional steps or scripts needed, Webpack compiles fresh statistics at build time.
-
-
-## COLOR CONTRAST RATIOS [EXPERIMENTAL]
-
-The `<sass-stats>` component also calculates some QA about the colors used, and provides a pass/fail Accessibility score on the contrast ratio. This feature is experimental, and may be inaccurate on complex, multi-part components, or following Theme color toggles. 
-
-To see the score, inspect the element and view the attributes added for `data-contrastScore`, `data-bgcolor`, and `data-textcolor`.

package/src/components/sass-stats/SassStats.test.ts

@@ -1,17 +0,0 @@
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./SassStats";
-import { SassStats } from "./SassStats";
-
-describe("SassStats component", () => {
-  afterEach(fixtureCleanup);
-
-  test("should render", async () => {
-    expect.hasAssertions();
-    const component: SassStats = await fixture(
-      html`
-        <sass-stats component="badge"></sass-stats>
-      `
-    );
-    expect(component.component).toEqual("badge");
-  });
-});

package/src/components/sass-stats/SassStats.ts

@@ -1,110 +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, PropertyValues } from "lit-element";
-import { score } from "wcag-color";
-
-@customElementWithCheck("sass-stats")
-export class SassStats extends LitElement {
-  @property({ type: String }) component = "";
-  @property({ type: String }) size = "";
-  @property({ type: String }) gzipSize = "";
-  @property({ type: String }) selectors = "";
-  @property({ type: String }) declarations = "";
-  @property({ type: Array }) repeatedSelectors = [];
-
-  static get styles() {
-    return [reset];
-  }
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    this.loopInstances(this.querySelectorAll("*"));
-  }
-
-  private loopInstances(instances: NodeListOf<Element>) {
-    for (let index = 0; index < instances.length; index++) {
-      const element = instances[index];
-      if (element !== undefined) {
-        this.getContrast(element).catch(err => err);
-      }
-    }
-  }
-
-  private getContrast(element: Element) {
-    return new Promise<void>((resolve, reject) => {
-      if (element.shadowRoot) {
-        const shadowContent = element.shadowRoot.querySelector("*:not(style)")!;
-        const style = getComputedStyle(shadowContent);
-        const backgroundColor = style.backgroundColor;
-        const foreground = style.color;
-        const ratioScore = score(backgroundColor, foreground);
-        shadowContent.setAttribute("data-contrastScore", `Contrast Score: ${ratioScore}`);
-        shadowContent.setAttribute("data-bgcolor", `bg color: ${backgroundColor}`);
-        shadowContent.setAttribute("data-textcolor", `text color: ${foreground}`);
-        resolve();
-      } else reject("Invalid Instance");
-    });
-  }
-
-  private formatNumber(number: string) {
-    const fixedNumber = parseFloat(number).toFixed(2);
-    return Number(fixedNumber).toLocaleString("en");
-  }
-
-  private async fetchComponentStats() {
-    const response = await fetch(`/stats/${this.component}.json`);
-
-    if (!response.ok) {
-      throw new Error(`${response.status}`);
-    }
-
-    const data = await response.json();
-    return data;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.fetchComponentStats()
-      .then(data => {
-        const { humanizedSize, humanizedGzipSize, selectors, declarations } = data;
-        this.size = humanizedSize;
-        this.gzipSize = humanizedGzipSize;
-        this.selectors = this.formatNumber(selectors.total);
-        this.declarations = this.formatNumber(declarations.total);
-        this.repeatedSelectors = selectors.repeated.length;
-      })
-      .catch(error => error);
-  }
-
-  render() {
-    return html`
-      <style>
-        .stat-output {
-          font-weight: bold;
-        }
-      </style>
-      <h4 class="stat-output">Sass Stats</h4>
-      <p>Compiled CSS Size: <span class="stat-output">${this.size}</span></p>
-      <p>Compiled CSS Gzip Size: <span class="stat-output">${this.gzipSize}</span></p>
-      <p>Total # of Selectors: <span class="stat-output">${this.selectors}</span></p>
-      <p>Total # of Declarations: <span class="stat-output">${this.declarations}</span></p>
-      <p>Repeated Selectors: <span class="stat-output">${this.repeatedSelectors}</span></p>
-      <p>Inspect custom elements for contrast ratio score <i>(experimental)</i></p>
-      <slot title="Component Sandbox"></slot>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "sass-stats": SassStats;
-  }
-}

package/src/components/slider/Slider.stories.ts

@@ -1,47 +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/slider/Slider";
-import "@/components/theme/Theme";
-import { withA11y } from "@storybook/addon-a11y";
-import { action } from '@storybook/addon-actions';
-import { html } from "lit-element";
-import { number, boolean, withKnobs } from "@storybook/addon-knobs";
-
-export default {
-  title: "Components/Slider",
-  component: "md-slider",
-  decorators: [withKnobs, withA11y],
-  argTypes: {
-    sliderSelectionStyleMap: { table: { disable: true } },
-    sliderPointerStyleMap: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-slider"
-    }
-  }
-};
-
-export const Slider = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const disabled = boolean("Disabled", false);
-  const step = number("step", 1);
-  const min = number("min", 0);
-  const max = number("max", 10);
-  const now = number("now", 4);
-  const nopointer = boolean("No Pointer", false);
-  const hideValue = boolean("Hide Value", false);
-
-  return html`
-    <md-theme class="theme-toggle" id="slider" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-slider @slider-change=${(action('change'))} .disabled=${disabled} .min=${min} .max=${max} .step=${step} .now=${now} ?no-pointer=${nopointer} ?hide-value=${hideValue}></md-slider>
-    </md-theme>
-  `;
-};

package/src/components/slider/Slider.test.ts

@@ -1,132 +0,0 @@
-import "./Slider";
-import { Slider } from "./Slider";
-import { Key } from "@/constants";
-import { elementUpdated, fixture, fixtureCleanup, nextFrame, oneEvent } from "@open-wc/testing-helpers";
-import { html } from "lit-element";
-
-describe("Slider Component", () => {
-  let element: Slider.ELEMENT;
-
-  afterEach(fixtureCleanup);
-
-  beforeEach(async () => {
-    element = await fixture<Slider.ELEMENT>(
-      html`
-        <md-slider></md-slider>
-      `
-    );
-  });
-
-  test("should handle click event", async () => {
-    element.dispatchEvent(new KeyboardEvent("mousedown"));
-
-    await elementUpdated(element);
-    expect(element["dragging"]).toBeTruthy();
-    expect(document.activeElement).toEqual(element);
-
-    document.dispatchEvent(new MouseEvent("mouseup"));
-
-    await nextFrame();
-    expect(element["dragging"]).toBeFalsy();
-
-    setTimeout(() => element["notifyChanges"]());
-
-    const { detail } = await oneEvent(element, "slider-change");
-    expect(detail).toBeDefined();
-
-    element.disabled = true;
-    await elementUpdated(element);
-
-    element.dispatchEvent(new KeyboardEvent("mousedown"));
-    await elementUpdated(element);
-
-    await nextFrame();
-    expect(element["dragging"]).toBeFalsy();
-  });
-
-  test("should handle keyboard event", async () => {
-    const createEvent = (code: string) =>
-      new KeyboardEvent("keydown", {
-        code
-      });
-
-    element.dispatchEvent(createEvent(Key.ArrowLeft));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(0);
-
-    element.dispatchEvent(createEvent(Key.ArrowLeft));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(0);
-
-    element.dispatchEvent(createEvent(Key.ArrowRight));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(1);
-
-    element.dispatchEvent(createEvent(Key.ArrowUp));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(2);
-
-    element.now = 100;
-
-    await elementUpdated(element);
-
-    element.dispatchEvent(createEvent(Key.ArrowUp));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(100);
-
-    element.dispatchEvent(createEvent(Key.Home));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(0);
-
-    element.dispatchEvent(createEvent(Key.End));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(100);
-
-    element.dispatchEvent(createEvent("KeyA"));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(100);
-
-    document.dispatchEvent(new KeyboardEvent("keyup"));
-
-    setTimeout(() => element["notifyChanges"]());
-
-    const { detail } = await oneEvent(element, "slider-change");
-    expect(detail).toBeDefined();
-  });
-
-  test("should set disabled", async () => {
-    expect(element.tabIndex).toEqual(0);
-
-    element.disabled = true;
-    await elementUpdated(element);
-
-    expect(element.tabIndex).toEqual(-1);
-    expect(element.getAttribute("aria-disabled")).toEqual("true");
-
-    element.disabled = false;
-    await elementUpdated(element);
-
-    expect(element.tabIndex).toEqual(0);
-    expect(element.getAttribute("aria-disabled")).toEqual("false");
-  });
-
-  test("should render steps", async () => {
-    element.step = 20;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelectorAll(".tick").length).toEqual(6);
-
-    element.step = 15;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelectorAll(".tick").length).toEqual(7);
-  });
-});