@momentum-ui/web-components 2.14.13 → 2.14.14

package/src/components/chip/scss/chip.scss

@@ -1,469 +0,0 @@
-:focus {
-  outline: none;
-}
-
-.md-chip {
-  @include badge-size;
-  @include chip-base();
-
-  & {
-    --left-content-right-margin: #{$chip-inner-content-margin};
-  }
-
-  &--small {
-    @include badge-size($padding: rem-calc(3 12));
-    height: rem-calc(24);
-    min-width: auto;
-  }
-
-  &:focus {
-    @include focus-boxshadow(rem-calc(1), var(--md-default-focus-outline-color, $md-blue-70));
-  }
-
-  &:hover {
-    background-color: var(--md-tertiary-bg-color, $md-gray-10);
-  }
-
-  &:active,
-  &[aria-selected="true"] {
-    background-color: var(--button-secondary-active-normal-bg-color, var(--md-quaternary-bg-color, $md-gray-20));
-  }
-
-  &--blue,
-  &--cobalt {
-    @include color-chip(
-      var(--badge-blue-bg-color),
-      false,
-      var(--badge-blue-text-color),
-      var(--badge-blue-bg-color),
-      var(--badge-blue-text-color)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-blue-hover-bg-color),
-        false,
-        var(--badge-blue-text-color),
-        var(--badge-blue-hover-bg-color),
-        var(--badge-blue-text-color)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-blue-active-bg-color),
-        false,
-        var(--badge-blue-text-color),
-        var(--badge-blue-active-bg-color),
-        var(--badge-blue-text-color)
-      );
-    }
-  }
-
-  &--gray {
-    @include color-chip(
-      var(--badge-gray-bg-color),
-      false,
-      var(--badge-gray-text-color),
-      var(--badge-gray-bg-color),
-      var(--badge-gray-text-color)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-gray-hover-bg-color),
-        false,
-        var(--badge-gray-text-color),
-        var(--badge-gray-hover-bg-color),
-        var(--badge-gray-text-color)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-gray-active-bg-color),
-        false,
-        var(--badge-gray-text-color),
-        var(--badge-gray-active-bg-color),
-        var(--badge-gray-text-color)
-      );
-    }
-  }
-
-  &--mint {
-    @include color-chip(
-      var(--badge-mint-bg-color),
-      false,
-      var(--badge-mint-text-color),
-      var(--badge-mint-bg-color),
-      var(--badge-mint-text-color)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-mint-hover-bg-color),
-        false,
-        var(--badge-mint-text-color),
-        var(--badge-mint-hover-bg-color),
-        var(--badge-mint-text-color)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-mint-active-bg-color),
-        false,
-        var(--badge-mint-text-color),
-        var(--badge-mint-active-bg-color),
-        var(--badge-mint-text-color)
-      );
-    }
-  }
-
-  &--darkmint {
-    @include color-chip(
-      var(--badge-darkmint-bg-color),
-      false,
-      var(--badge-darkmint-text-color),
-      var(--badge-darkmint-bg-color),
-      var(--badge-darkmint-text-color)
-    );
-  }
-
-  &--green {
-    @include color-chip(
-      var(--badge-green-bg-color),
-      false,
-      var(--badge-green-text-color),
-      var(--badge-green-bg-color),
-      var(--badge-green-text-color)
-    );
-  }
-
-  &--yellow {
-    @include color-chip(
-      var(--badge-yellow-bg-color),
-      false,
-      var(--badge-yellow-text-color),
-      var(--badge-yellow-bg-color),
-      var(--badge-yellow-text-color)
-    );
-  }
-
-  &--red {
-    @include color-chip(
-      var(--badge-red-bg-color),
-      false,
-      var(--badge-red-text-color),
-      var(--badge-red-bg-color),
-      var(--badge-red-text-color)
-    );
-  }
-
-  &--orange {
-    @include color-chip(
-      var(--badge-orange-bg-color),
-      false,
-      var(--badge-orange-text-color),
-      var(--badge-orange-bg-color),
-      var(--badge-orange-text-color)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-orange-hover-bg-color),
-        false,
-        var(--badge-orange-text-color),
-        var(--badge-orange-hover-bg-color),
-        var(--badge-orange-text-color)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-orange-active-bg-color),
-        false,
-        var(--badge-orange-text-color),
-        var(--badge-orange-active-bg-color),
-        var(--badge-orange-text-color)
-      );
-    }
-  }
-
-  &--gold {
-    @include color-chip(
-      var(--badge-gold-bg-color),
-      false,
-      var(--badge-gold-text-color),
-      var(--badge-gold-bg-color),
-      var(--badge-gold-text-color)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-gold-hover-bg-color),
-        false,
-        var(--badge-gold-text-color),
-        var(--badge-gold-hover-bg-color),
-        var(--badge-gold-text-color)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-gold-active-bg-color),
-        false,
-        var(--badge-gold-text-color),
-        var(--badge-gold-active-bg-color),
-        var(--badge-gold-text-color)
-      );
-    }
-  }
-
-  &--lime {
-    @include color-chip(
-      var(--badge-lime-bg-color),
-      false,
-      var(--badge-lime-text-color),
-      var(--badge-lime-bg-color),
-      var(--badge-lime-text-color)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-lime-hover-bg-color),
-        false,
-        var(--badge-lime-text-color),
-        var(--badge-lime-hover-bg-color),
-        var(--badge-lime-text-color)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-lime-active-bg-color),
-        false,
-        var(--badge-lime-text-color),
-        var(--badge-lime-active-bg-color),
-        var(--badge-lime-text-color)
-      );
-    }
-  }
-
-  &--pink {
-    @include color-chip(
-      var(--badge-pink-bg-color),
-      false,
-      var(--badge-pink-text-color),
-      var(--badge-pink-bg-color),
-      var(--badge-pink-text-color)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-pink-hover-bg-color),
-        false,
-        var(--badge-pink-text-color),
-        var(--badge-pink-hover-bg-color),
-        var(--badge-pink-text-color)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-pink-active-bg-color),
-        false,
-        var(--badge-pink-text-color),
-        var(--badge-pink-active-bg-color),
-        var(--badge-pink-text-color)
-      );
-    }
-  }
-
-  &--purple {
-    @include color-chip(
-      var(--badge-purple-bg-color),
-      false,
-      var(--badge-purple-text-color),
-      var(--badge-purple-bg-color),
-      var(--badge-purple-text-color)
-    );
-  }
-
-  &--violet {
-    @include color-chip(
-      var(--badge-violet-bg-color),
-      false,
-      var(--badge-violet-text-color),
-      var(--badge-violet-bg-color),
-      var(--badge-violet-text-color)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-violet-hover-bg-color),
-        false,
-        var(--badge-violet-text-color),
-        var(--badge-violet-hover-bg-color),
-        var(--badge-violet-text-color)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-violet-active-bg-color),
-        false,
-        var(--badge-violet-text-color),
-        var(--badge-violet-active-bg-color),
-        var(--badge-violet-text-color)
-      );
-    }
-  }
-
-  &--cyan {
-    @include color-chip(
-      var(--badge-cyan-bg-color),
-      false,
-      var(--badge-cyan-text-color),
-      var(--badge-cyan-bg-color),
-      var(--badge-cyan-text-color)
-    );
-  }
-
-  &--positive {
-    --left-content-right-margin: 4px;
-    padding: 0px 4px;
-    font-weight: 500;
-    font-family: var(--brand-font-regular);
-    background-color: var(--badge-positive-bg-color);
-    color: var(--badge-positive-text-color);
-    border: 1px solid var(--badge-positive-border-color);
-    border-radius: 4px;
-
-    &:hover {
-      background-color: var(--badge-positive-hover-bg-color);
-    }
-
-    &:active {
-      background-color: var(--badge-positive-active-bg-color);
-    }
-  }
-
-  &--negative {
-    --left-content-right-margin: 4px;
-    padding: 0px 4px;
-    font-weight: 500;
-    font-family: var(--brand-font-regular);
-    background-color: var(--badge-negative-bg-color);
-    color: var(--badge-negative-text-color);
-    border: 1px solid var(--badge-negative-border-color);
-    border-radius: 4px;
-
-    &:hover {
-      background-color: var(--badge-negative-hover-bg-color);
-    }
-
-    &:active {
-      background-color: var(--badge-negative-active-bg-color);
-    }
-  }
-
-  &--neutral {
-    --left-content-right-margin: 4px;
-    padding: 0px 4px;
-    font-weight: 500;
-    font-family: var(--brand-font-regular);
-    background-color: var(--badge-neutral-bg-color);
-    color: var(--badge-neutral-text-color);
-    border: 1px solid var(--badge-neutral-border-color);
-    border-radius: 4px;
-
-    &:hover {
-      background-color: var(--badge-neutral-hover-bg-color);
-    }
-
-    &:active {
-      background-color: var(--badge-neutral-active-bg-color);
-    }
-  }
-
-  .md-chip--clear {
-    display: flow-root;
-    margin-left: $chip-inner-content-margin;
-    margin-right: 0;
-
-    @include modal-close-button(
-      $size: rem-calc(14),
-      $font-size: rem-calc(14),
-      $top-offset: rem-calc(12),
-      $right-offset: rem-calc(12)
-    );
-  }
-
-  .md-chip--loading {
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: rem-calc(-2);
-    width: 100%;
-  }
-
-  .md-chip--textcontent {
-    max-width: $chip-text-max-width;
-  }
-
-  md-icon {
-    display: flex;
-    margin-right: var(--left-content-right-margin);
-  }
-
-  &.md-chip--disabled {
-    color: var(--md-disabled-text-color, $md-gray-40);
-    cursor: default;
-
-    // Declarations before nested rules
-    @include chip-base();
-
-    md-icon {
-      color: var(--md-disabled-text-color, $md-gray-40);
-    }
-  }
-}
-
-::slotted(*) {
-  line-height: normal;
-}
-
-::slotted([slot="custom-left-content"]) {
-  margin-right: var(--left-content-right-margin);
-}
-
-::slotted([slot="custom-right-content"]) {
-  margin-left: $chip-inner-content-margin;
-}
-
-@media (forced-colors: active) {
-  .md-chip {
-    outline: 1px solid CanvasText;
-
-    &:focus,
-    &:hover {
-      box-shadow: none;
-      outline: 2px solid Highlight;
-    }
-  }
-
-  .md-chip.md-chip--disabled {
-    color: GrayText;
-    outline: 1px solid GrayText;
-
-    &:focus,
-    &:hover {
-      outline: 2px solid Highlight;
-    }
-
-    md-icon {
-      color: GrayText;
-    }
-  }
-}

package/src/components/chip/scss/mixins.scss

@@ -1,54 +0,0 @@
-@mixin chip-base() {
-  // Declarations before nested rules
-  align-items: center;
-  background-color: var(--md-secondary-bg-color, $md-gray-05);
-  color: var(--md-primary-text-color, $md-gray-100);
-  cursor: pointer;
-  display: inline-flex;
-  font-family: $badge__font-family;
-  font-weight: $badge__font-weight;
-  height: $chip-height;
-  justify-content: space-between;
-  line-height: rem-calc(16);
-  margin-bottom: auto;
-  max-width: $chip-max-width;
-  overflow: auto;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-  width: auto;
-  @include radius($radius: $chip-radius);
-}
-
-@mixin color-chip(
-  $bg: var(--badge-default-bg-color, $lm-badge-default-bg-color-light),
-  $radius: false,
-  $color: var(--badge-default-text-color, $lm-badge-default-text-color-light),
-  $hover-bg-color: var(--badge-default-bg-color, $lm-badge-default-bg-color-light),
-  $hover-color: var(--badge-default-text-color, $lm-badge-default-text-color-light)
-) {
-  @if $bg {
-    background-color: $bg;
-
-    @if $color {
-      color: $color;
-    }
-  }
-
-  @if $radius==true {
-    @include radius($badge__radius);
-  } @else if $radius {
-    @include radius($radius);
-  }
-
-  &:hover {
-    background-color: $hover-bg-color;
-    color: $hover-color;
-  }
-
-  &:active {
-    background-color: $hover-bg-color;
-    color: $hover-color;
-  }
-}

package/src/components/chip/scss/module.scss

@@ -1,17 +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/tools/mixins/focus";
-
-@import "@/wc_scss/typography/settings";
-
-@import "@/components/badge/scss/settings";
-@import "@/components/badge/scss/mixins";
-@import "@/components/modal/scss/mixins";
-
-@import "./settings";
-@import "./mixins";
-@import "./chip"

package/src/components/chip/scss/settings.scss

@@ -1,5 +0,0 @@
-$chip-height: rem-calc(32);
-$chip-radius: rem-calc(18);
-$chip-max-width: rem-calc(200);
-$chip-text-max-width: rem-calc(150);
-$chip-inner-content-margin: rem-calc(10);

package/src/components/coachmark/Coachmark.stories.ts

@@ -1,46 +0,0 @@
-import "@/components/coachmark/Coachmark";
-import { ThemeNameValues } from "@/components/theme/Theme";
-import { badgeColor, coachPlacement } from "@/utils/enums";
-import { action } from "@storybook/addon-actions";
-import { Args } from "@storybook/web-components";
-import { html } from "lit-element";
-
-export default {
-  title: "Components/Coachmark",
-  component: "md-coachmark",
-  argTypes: {
-    popper: { table: { disable: true } },
-    reference: { table: { disable: true } },
-    coachWrapClassMap: { table: { disable: true } },
-    coachClassMap: { table: { disable: true } },
-    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
-    darkTheme: { control: "boolean", defaultValue: false },
-    show: { control: "boolean", defaultValue: false },
-    color: { control: { type: "select", options: badgeColor }, defaultValue: "default" },
-    placement: { control: { type: "select", options: coachPlacement }, defaultValue: "right" }
-  },
-  parameters: {
-    a11y: {
-      element: "md-coachmark"
-    }
-  }
-};
-
-export const Coachmark = (args: Args) => {
-  return html`
-    <md-theme .darkTheme=${args.darkTheme} theme=${args.theme}>
-      <md-coachmark
-        ?show=${args.show}
-        .placement="${args.placement}"
-        .color="${args.color}"
-        @coach-create=${action("coach-create")}
-      >
-        <div slot="coachmark-content">
-          <span>Coachmark test content</span>
-          <md-button slot="coachmark-content">Coachmark next</md-button>
-        </div>
-        <md-button>Coachmark Default</md-button>
-      </md-coachmark>
-    </md-theme>
-  `;
-};