@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/toggle-switch/scss/mixins.scss

@@ -1,93 +0,0 @@
-@mixin toggle-switch-vars (
-  $background-color: var(--toggle-switch-bg-color, $lm-toggle-switch-bg-color-light),
-  $background-color--hover:  var(--toggle-switch-bg-color--hover, $lm-toggle-switch-bg-color--hover-light),
-  $background-color--checked: var( --toggle-switch-bg-color--checked, $lm-toggle-switch-bg-color--checked-light),
-  $background-color--checked-hover: var(--toggle-switch-bg-color--checked-hover, $lm-toggle-switch-bg-color--checked-hover-light),
-  $background-color--disabled: var(--toggle-switch-bg-color--disabled, $lm-toggle-switch-bg-color--disabled-light),
-  $background-color--disabled-checked: var(--toggle-switch-bg-color--disabled--checked, $lm-toggle-switch-bg-color--disabled--checked-light),
-  $background-color-slider: var(--toggle-switch-slider-color, $lm-toggle-switch-slider-color-light),
-  $background-color-slider-disabled:  var(--toggle-switch-slider-color-disabled, $lm-toggle-switch-slider-color-disabled-light),
-  $background-color-slider-disabled--checked:  var(  --toggle-switch-slider-color-disabled--checked, $lm-toggle-switch-slider-color-disabled--checked-light),
-  $border-focus: var( --toggle-switch-focus, $lm-toggle-switch-focus-light)
-) {
-  .md-toggle-switch__input {
-    + .md-toggle-switch__label {
-      .md-toggle-switch__label__container {
-        background-color: $background-color;
-        &::after {
-          background-color: $background-color-slider;
-        }
-      }
-
-      &:hover {
-        .md-toggle-switch__label__container {
-          background-color: $background-color--hover;
-        }
-      }
-    }
-
-    &:focus,
-    &.focus {
-      + .md-toggle-switch__label {
-        .md-toggle-switch__label__container {
-          outline: 2px solid var(--md-focus-border-color, $md-blue-70);
-        }
-      }
-    }
-
-    // Checked
-    &.checked,
-    &:checked {
-      + .md-toggle-switch__label {
-         .md-toggle-switch__label__container {
-          background-color: $background-color--checked;
-        }
-
-        &:hover {
-          .md-toggle-switch__label__container {
-            background-color: $background-color--checked-hover;
-          }
-        }
-      }
-    }
-
-    // Disabled Settings
-
-    &:disabled,
-    &.disabled {
-      + .md-toggle-switch__label {
-        .md-toggle-switch__label__container {
-          background-color: $background-color--disabled;
-          &::after {
-            background-color: $background-color-slider-disabled;
-          }
-        }
-        &:hover {
-          .md-toggle-switch__label__container {
-            background-color: $background-color--disabled;
-          }
-        }
-      }
-
-      //--> Disabled--Checked/Indeterminate
-
-      &.checked,
-      &:checked {
-        + .md-toggle-switch__label {
-            .md-toggle-switch__label__container {
-              background-color: $background-color--disabled-checked;
-              &::after {
-                background-color: $background-color-slider-disabled--checked;
-              }
-            }
-
-          &:hover {
-            .md-toggle-switch__label__container {
-              background-color: $background-color--disabled-checked;
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/toggle-switch/scss/module.scss

@@ -1,12 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/colors/settings-transparencies.scss";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/settings/forms";
-
-@import "./vars/lm-toggle-switch-settings";
-
-@import "./settings";
-@import "./mixins";
-@import "./toggle-switch";

package/src/components/toggle-switch/scss/settings.scss

@@ -1,14 +0,0 @@
-$toggle-switch__size: rem-calc(20); //20px;
-$toggle-switch__size--small: rem-calc(18); //18px;
-$toggle-switch__size--smaller: rem-calc(16); //16px;
-
-$toggle-switch__width: rem-calc(40); //40px;
-$toggle-switch__height: 24px !default;
-
-$toggle-switch__width--small: rem-calc(36); //36px;
-$toggle-switch__height--small: rem-calc(22); //22px;
-
-$toggle-switch__width--smaller: rem-calc(32); //32px;
-$toggle-switch__height--smaller: rem-calc(20); //20px;
-
-$slider-box-shadow-color: $black-16;

package/src/components/toggle-switch/scss/toggle-switch.scss

@@ -1,94 +0,0 @@
-@include exports("md-toggle-switch") {
-  .md-toggle-switch {
-    @include toggle-switch-vars;
-
-    &__input {
-      margin-left: -9999px;
-      opacity: 0;
-      position: absolute;
-
-      &:disabled,
-      &.disabled {
-        + .md-toggle-switch__label {
-          cursor: default;
-
-          .md-toggle-switch__label__container {
-            cursor: default;
-          }
-        }
-      }
-
-      &:checked {
-        + .md-toggle-switch__label {
-          .md-toggle-switch__label__container {
-            &::after {
-              left: calc(100% - 2px);
-              transform: translateX(-100%);
-            }
-          }
-        }
-      }
-    }
-
-    &__label {
-      cursor: pointer;
-      display: inline-flex;
-      line-height: rem-calc($toggle-switch__height);
-
-      &__container {
-        background-clip: padding-box;
-        border: none;
-        border-radius: $toggle-switch__height;
-        cursor: pointer;
-        display: block;
-        height: $toggle-switch__height;
-        margin-right: 0.75rem;
-        position: relative;
-        transition: background 350ms;
-        width: $toggle-switch__width;
-
-        @media screen and (-ms-high-contrast: active) {
-          filter: brightness(1) contrast(1) saturate(1.5);
-        }
-
-        &::after {
-          border-radius: 100%;
-          bottom: 2px;
-          box-shadow: 0 1px 2px 0 $black-32;
-          content: "";
-          height: $toggle-switch__size;
-          left: 2px;
-          position: absolute;
-          top: 2px;
-          transition: 350ms;
-          width: $toggle-switch__size;
-        }
-      }
-    }
-
-    &--small {
-      .md-toggle-switch__label__container {
-        height: $toggle-switch__height--small;
-        width: $toggle-switch__width--small;
-
-        &::after {
-          height: $toggle-switch__size--small;
-          width: $toggle-switch__size--small;
-        }
-      }
-
-    }
-
-    &--smaller {
-      .md-toggle-switch__label__container {
-        height: $toggle-switch__height--smaller;
-        width: $toggle-switch__width--smaller;
-
-        &::after {
-          height: $toggle-switch__size--smaller;
-          width: $toggle-switch__size--smaller;
-        }
-      }
-    }
-  }
-}

package/src/components/toggle-switch/tokens/lm-toggle-tokens.js

@@ -1,52 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const toggleSwitch = {
-  prefix: "lm",
-  component: "toggle-switch",
-  "bg-color": {
-    light: colors.gray[30].name,
-    dark: colors.gray[70].name
-  },
-  "bg-color--hover": {
-    light: colors.gray[40].name,
-    dark: colors.gray[40].name
-  },
-  "bg-color--checked": {
-    light: colors.blue[60].name,
-    dark: colors.blue[50].name
-  },
-  "bg-color--checked-hover": {
-    light: colors.blue[70].name,
-    dark: colors.blue[60].name
-  },
-  "bg-color--disabled": {
-    light: colors.gray[10].name,
-    dark: colors.gray[90].name
-  },
-  "bg-color--disabled--checked": {
-    light: colors.blue[10].name,
-    dark: colors.blue[90].name
-  },
-  slider: {
-    "color": {
-      light: colors.white[100].name,
-      dark: colors.white[100].name
-    },
-    "color-disabled": {
-      light: colors.gray["05"].name,
-      dark: colors.gray[70].name
-    },
-    "color-disabled--checked": {
-      light: colors.white[100].name,
-      dark: colors.gray[70].name
-    }
-  },
-  "focus": {
-    light: colors.blue[50].name,
-    dark: colors.blue[60].name
-  }
-};
-
-module.exports = toggleSwitch;

package/src/components/toggle-switch/tokens/md-toggle-tokens.js

@@ -1,52 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const toggleSwitch = {
-  prefix: "md",
-  component: "toggle-switch",
-  "bg-color": {
-    light: colors.gray["30"].name,
-    dark: colors.gray["70"].name
-  },
-  "bg-color--hover": {
-    light: colors.gray["40"].name,
-    dark: colors.gray["40"].name
-  },
-  "bg-color--checked": {
-    light: colors.blue["60"].name,
-    dark: colors.blue["50"].name
-  },
-  "bg-color--checked-hover": {
-    light: colors.blue["70"].name,
-    dark: colors.blue["60"].name
-  },
-  "bg-color--disabled": {
-    light: colors.gray["10"].name,
-    dark: colors.gray["90"].name
-  },
-  "bg-color--disabled--checked": {
-    light: colors.blue["10"].name,
-    dark: colors.blue["90"].name
-  },
-  slider: {
-    "color": {
-      light: colors.white["100"].name,
-      dark: colors.white["100"].name
-    },
-    "color-disabled": {
-      light: colors.gray["05"].name,
-      dark: colors.gray["70"].name
-    },
-    "color-disabled--checked": {
-      light: colors.white["100"].name,
-      dark: colors.gray["70"].name
-    }
-  },
-  "focus": {
-    light: colors.blue["60"].name,
-    dark: colors.blue["60"].name
-  }
-};
-
-module.exports = toggleSwitch;

package/src/components/tooltip/Tooltip.stories.ts

@@ -1,53 +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 { withA11y } from "@storybook/addon-a11y";
-import { select, text, boolean, withKnobs } from "@storybook/addon-knobs";
-import { action } from "@storybook/addon-actions";
-import { html } from "lit-element";
-import "@/components/button/Button";
-import "@/components/tooltip/Tooltip";
-import { tooltipPlacement } from "./Tooltip"; // Keep type import as a relative path
-import "@/components/theme/Theme";
-
-export default {
-  title: "Components/Tooltip",
-  component: "md-tooltip",
-  decorators: [withKnobs, withA11y],
-  argTypes: {
-    reference: { table: { disable: true } },
-    popper: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-tooltip"
-    }
-  }
-};
-
-export const Tooltip = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const message = text("message", "Test tooltip");
-  const placement = select("placement", tooltipPlacement, "right");
-  const opened = boolean("Opened", false);
-
-  return html`
-    <md-theme class="theme-toggle" id="tooltip" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-tooltip
-        message=${message}
-        placement=${placement}
-        @tooltip-create=${action("show")}
-        @tooltip-destroy=${action("hide")}
-        ?opened=${opened}
-      >
-        <md-button>Test Button</md-button>
-      </md-tooltip>
-    </md-theme>
-  `;
-};

package/src/components/tooltip/Tooltip.test.ts

@@ -1,84 +0,0 @@
-import { elementUpdated, fixture, fixtureCleanup, html, oneEvent } from "@open-wc/testing-helpers";
-import "@/components/icon/Icon";
-import "./Tooltip";
-import "@/components/icon/Icon";
-import "@/components/theme/Theme";
-import { Theme } from "@/components/theme/Theme";
-import { Tooltip } from "./Tooltip";
-
-describe("Tooltip", () => {
-  let theme: Theme.ELEMENT;
-  let tooltip: Tooltip.ELEMENT;
-
-  afterEach(fixtureCleanup);
-
-  beforeEach(async () => {
-    theme = await fixture<Theme.ELEMENT>(html`
-      <md-theme>
-        <md-tooltip message="Tooltip">
-          <md-button>Tooltip</md-button>
-        </md-tooltip>
-      </md-theme>
-    `);
-    tooltip = theme.querySelector("md-tooltip") as Tooltip.ELEMENT;
-  });
-
-  test("should notify md-theme in show/hide case", async () => {
-    const createNotifySpy = jest.spyOn(tooltip, "notifyTooltipCreate");
-    const destroyNotifySpy = jest.spyOn(tooltip, "notifyTooltipDestroy");
-
-    const mouseEnterEvent = new MouseEvent("mouseenter");
-    const mouseLeaveEvent = new MouseEvent("mouseleave");
-    tooltip.reference.dispatchEvent(mouseEnterEvent);
-
-    await elementUpdated(theme);
-    expect(createNotifySpy).toHaveBeenCalled();
-
-    tooltip.reference.dispatchEvent(mouseLeaveEvent);
-
-    await elementUpdated(theme);
-    expect(createNotifySpy).toHaveBeenCalled();
-
-    createNotifySpy.mockRestore();
-    destroyNotifySpy.mockRestore();
-  });
-
-  test("should dispach event after show/hide case", async () => {
-    setTimeout(() => tooltip.notifyTooltipCreate());
-
-    const { detail: tooltipCreate } = await oneEvent(tooltip, "tooltip-create");
-
-    expect(tooltipCreate).toBeDefined();
-    expect(tooltip.opened).toBeTruthy();
-    expect(tooltipCreate.reference).toEqual(tooltip.reference);
-
-    setTimeout(() => tooltip.notifyTooltipDestroy());
-
-    const { detail: tooltipDestroy } = await oneEvent(tooltip, "tooltip-destroy");
-
-    expect(tooltipDestroy).toBeDefined();
-    expect(tooltip.opened).toBeFalsy();
-    expect(tooltipDestroy.reference).toEqual(tooltip.reference);
-  });
-
-  test("should handle with slot content changes", async () => {
-    const div = document.createElement("div");
-    div.slot = "tooltip-content";
-    div.textContent = "Slot Content";
-
-    tooltip.message = "";
-    tooltip.append(div);
-
-    await elementUpdated(tooltip);
-
-    expect(tooltip["slotContent"]).toEqual([div]);
-  });
-
-  test("should handle disabled state", async () => {
-    tooltip.disabled = true;
-
-    await elementUpdated(tooltip);
-    expect(tooltip.disabled).toBeTruthy();
-    expect(tooltip.shadowRoot!.querySelector(".md-tooltip--disabled")).not.toBeNull();
-  });
-});

package/src/components/tooltip/Tooltip.ts

@@ -1,210 +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 { FocusMixin } from "@/mixins";
-import reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, LitElement, property, PropertyValues, query } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import styles from "./scss/module.scss";
-
-export const tooltipPlacement = [
-  "auto",
-  "auto-start",
-  "auto-end",
-  "left-start",
-  "left",
-  "left-end",
-  "right-start",
-  "right",
-  "right-end",
-  "top-start",
-  "top",
-  "top-end",
-  "bottom-start",
-  "bottom",
-  "bottom-end"
-] as const;
-
-export const tooltipStrategy = ["fixed", "absolute"] as const;
-export type TooltipEvent = {
-  placement: Tooltip.Placement;
-  reference: HTMLElement;
-  popper: HTMLElement;
-  slotContent?: Element[] | undefined | null;
-};
-
-export namespace Tooltip {
-  export type Placement = typeof tooltipPlacement[number];
-  export type Strategy = typeof tooltipStrategy[number];
-
-  @customElementWithCheck("md-tooltip")
-  export class ELEMENT extends FocusMixin(LitElement) {
-    @property({ type: String }) message = "";
-    @property({ type: String, reflect: true }) placement: Tooltip.Placement = "auto";
-    @property({ type: Boolean, reflect: true }) disabled = false;
-    @property({ type: Boolean, reflect: true }) opened = false;
-
-    @query(".md-tooltip__popper") popper!: HTMLDivElement;
-    @query(".md-tooltip__reference") reference!: HTMLDivElement;
-
-    private slotContent: Element[] | null = null;
-
-    protected handleFocusIn(event: Event) {
-      if (super.handleFocusIn) {
-        super.handleFocusIn(event);
-      }
-      this.notifyTooltipCreate();
-    }
-
-    protected handleFocusOut(event: Event) {
-      if (super.handleFocusOut) {
-        super.handleFocusOut(event);
-      }
-      this.notifyTooltipDestroy();
-    }
-
-    private openTooltip() {
-      this.dispatchEvent(
-        new CustomEvent<TooltipEvent>("tooltip-create", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            placement: this.placement,
-            reference: this.reference,
-            popper: this.popper,
-            ...(!this.message && { slotContent: this.slotContent })
-          }
-        })
-      );
-    }
-
-    private closeTooltip() {
-      this.dispatchEvent(
-        new CustomEvent<TooltipEvent>("tooltip-destroy", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            placement: this.placement,
-            reference: this.reference,
-            popper: this.popper
-          }
-        })
-      );
-    }
-
-    private changeMessage() {
-      this.dispatchEvent(
-        new CustomEvent<TooltipEvent>("tooltip-message", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            placement: this.placement,
-            reference: this.reference,
-            popper: this.popper
-          }
-        })
-      );
-    }
-
-    private changeSlotContent(slotContent: Element[]) {
-      this.dispatchEvent(
-        new CustomEvent<TooltipEvent>("tooltip-slot", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            placement: this.placement,
-            reference: this.reference,
-            popper: this.popper,
-            slotContent
-          }
-        })
-      );
-    }
-
-    notifyTooltipCreate() {
-      if (!this.disabled) {
-        this.opened = true;
-      }
-    }
-
-    notifyTooltipDestroy() {
-      if (!this.disabled) {
-        this.opened = false;
-      }
-    }
-
-    handleSlotContentChange(event: Event) {
-      const slot = event.target as HTMLSlotElement;
-      if (slot) {
-        const slotContent = slot.assignedElements({ flatten: true });
-        if (slotContent.length) {
-          if (this.slotContent) {
-            this.changeSlotContent(slotContent);
-          }
-          this.slotContent = slotContent;
-        }
-      }
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (changedProperties.has("opened")) {
-        if (this.opened) {
-          this.openTooltip();
-        } else {
-          this.closeTooltip();
-        }
-      }
-      if (changedProperties.has("message")) {
-        this.changeMessage();
-      }
-    }
-
-    private get tooltipClassMap() {
-      return {
-        "md-tooltip--disabled": this.disabled
-      };
-    }
-
-    render() {
-      return html`
-        <div class="md-tooltip ${classMap(this.tooltipClassMap)}">
-          <div class="md-tooltip__popper" role="tooltip">
-            <div class="md-tooltip__content">
-              ${this.message
-                ? this.message
-                : html`
-                    <slot name="tooltip-content" @slotchange=${this.handleSlotContentChange}></slot>
-                  `}
-            </div>
-            <div id="arrow" class="md-tooltip__arrow" data-popper-arrow></div>
-          </div>
-          <div
-            class="md-tooltip__reference"
-            @mouseenter=${() => this.notifyTooltipCreate()}
-            @mouseleave=${() => this.notifyTooltipDestroy()}
-            aria-describedby="tooltip"
-          >
-            <slot></slot>
-          </div>
-        </div>
-      `;
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-tooltip": Tooltip.ELEMENT;
-  }
-}

package/src/components/tooltip/scss/module.scss

@@ -1,12 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-
-@import "@/wc_scss/colors/settings-base";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-
-@import "./vars/lm-tooltip-settings";
-@import "./vars/md-tooltip-settings";
-
-@import "./settings";
-@import "./tooltip";
-

package/src/components/tooltip/scss/settings.scss

@@ -1,11 +0,0 @@
-$tooltip__max-width: 200px;
-$tooltip__min-width: 100px;
-$tooltip__padding: rem-calc(6) rem-calc(10);
-$tooltip__radius: rem-calc(4);
-$tooltip-arrow__size: rem-calc(16);
-$tooltip__font-size: rem-calc(14);
-$tooltip__line-height: rem-calc(21);
-
-$tooltip-box-shadow: 0 rem-calc(8) rem-calc(16) $black-16, 0 0 rem-calc(1) $black-16, 0 0 0 rem-calc(1) $md-gray-90;
-$tooltip-border-color: $md-gray-70;
-