@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/components/coachmark/scss/coachmarks.scss

@@ -0,0 +1,528 @@
+.md-coachmark {
+  display: inline-flex;
+  position: relative;
+
+  &__popper {
+    border-radius: $coachmark-main-raduis;
+    display: none;
+    min-width: $coachmark-min-width;
+    padding: $coachmark-main-padding;
+    position: absolute;
+    width: auto;
+    z-index: 1;
+
+    .md-coachmark__arrow {
+      height: 0;
+      position: absolute;
+      width: 0;
+    }
+
+    &--right {
+      animation: coach-fade 1s, coach-slide-right 0.5s ease;
+      left: calc(100% + 1rem);
+      top: 50%;
+      transform: translateY(-50%);
+
+      .md-coachmark__arrow {
+        border-bottom: $coachmark-arrow-size solid transparent;
+        border-top: $coachmark-arrow-size solid transparent;
+        left: -$coachmark-arrow-size;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    &--left {
+      animation: coach-fade 1s, coach-slide-left 0.5s ease;
+      right: calc(100% + 1rem);
+      top: 50%;
+      transform: translateY(-50%);
+
+      .md-coachmark__arrow {
+        border-bottom: $coachmark-arrow-size solid transparent;
+        border-top: $coachmark-arrow-size solid transparent;
+        right: -$coachmark-arrow-size;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    &--top {
+      animation: coach-fade 1s, coach-slide-top 0.5s ease;
+      bottom: calc(100% + 0.5rem);
+      left: 50%;
+      transform: translateX(-50%);
+
+      .md-coachmark__arrow {
+        border-left: $coachmark-arrow-size solid transparent;
+        border-right: $coachmark-arrow-size solid transparent;
+        bottom: -$coachmark-arrow-size;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    &--bottom {
+      animation: coach-fade 1s, coach-slide-bottom 0.5s ease;
+      left: 50%;
+      top: calc(100% + 0.5rem);
+      transform: translateX(-50%);
+
+      .md-coachmark__arrow {
+        border-left: $coachmark-arrow-size solid transparent;
+        border-right: $coachmark-arrow-size solid transparent;
+        left: 50%;
+        top: -$coachmark-arrow-size;
+        transform: translateX(-50%);
+      }
+    }
+
+    &--default {
+      background: var(--coachmark-default-bg-color, $lm-coachmark-default-bg-color-light);
+      color: var(-coachmark-default-text-color, $lm-coachmark-default-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid
+            var(--coachmark-default-bg-color, $lm-coachmark-default-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid
+            var(--coachmark-default-bg-color, $lm-coachmark-default-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid
+            var(--coachmark-default-bg-color, $lm-coachmark-default-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid
+            var(--coachmark-default-bg-color, $lm-coachmark-default-bg-color-light);
+        }
+      }
+    }
+
+    &--blue {
+      background: var(--coachmark-blue-bg-color, $lm-coachmark-blue-bg-color-light);
+      color: var(--coachmark-blue-text-color, $lm-coachmark-blue-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid var(--coachmark-blue-bg-color, $lm-coachmark-blue-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid var(--coachmark-blue-bg-color, $lm-coachmark-blue-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid var(--coachmark-blue-bg-color, $lm-coachmark-blue-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid var(--coachmark-blue-bg-color, $lm-coachmark-blue-bg-color-light);
+        }
+      }
+    }
+
+    &--green {
+      background: var(--coachmark-green-bg-color, $lm-coachmark-green-bg-color-light);
+      color: var(--coachmark-green-text-color, $lm-coachmark-green-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid var(--coachmark-green-bg-color, $lm-coachmark-green-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid var(--coachmark-green-bg-color, $lm-coachmark-green-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid var(--coachmark-green-bg-color, $lm-coachmark-green-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid var(--coachmark-green-bg-color, $lm-coachmark-green-bg-color-light);
+        }
+      }
+    }
+
+    &--purple {
+      background: var(--coachmark-purple-bg-color, $lm-coachmark-purple-bg-color-light);
+      color: var(--coachmark-purple-text-color, $lm-coachmark-purple-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid var(--coachmark-purple-bg-color, $lm-coachmark-purple-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid
+            var(--coachmark-purple-bg-color, $lm-coachmark-purple-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid var(--coachmark-purple-bg-color, $lm-coachmark-purple-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid
+            var(--coachmark-purple-bg-color, $lm-coachmark-purple-bg-color-light);
+        }
+      }
+    }
+
+    &--violet {
+      background: var(--coachmark-violet-bg-color, $lm-coachmark-violet-bg-color-light);
+      color: var(--coachmark-violet-text-color, $lm-coachmark-violet-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid var(--coachmark-violet-bg-color, $lm-coachmark-violet-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid
+            var(--coachmark-violet-bg-color, $lm-coachmark-violet-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid var(--coachmark-violet-bg-color, $lm-coachmark-violet-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid
+            var(--coachmark-violet-bg-color, $lm-coachmark-violet-bg-color-light);
+        }
+      }
+    }
+
+    &--mint {
+      background: var(--coachmark-mint-bg-color, $lm-coachmark-mint-bg-color-light);
+      color: var(--coachmark-mint-text-color, $lm-coachmark-mint-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid var(--coachmark-mint-bg-color, $lm-coachmark-mint-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid var(--coachmark-mint-bg-color, $lm-coachmark-mint-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: 1$coachmark-arrow-size solid var(--coachmark-mint-bg-color, $lm-coachmark-mint-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid var(--coachmark-mint-bg-color, $lm-coachmark-mint-bg-color-light);
+        }
+      }
+    }
+
+    &--darkmint {
+      background: var(--coachmark-darkmint-bg-color, $lm-coachmark-darkmint-bg-color-light);
+      color: var(--coachmark-darkmint-text-color, $lm-coachmark-darkmint-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid
+            var(--coachmark-darkmint-bg-color, $lm-coachmark-darkmint-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid
+            var(--coachmark-darkmint-bg-color, $lm-coachmark-darkmint-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid
+            var(--coachmark-darkmint-bg-color, $lm-coachmark-darkmint-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid
+            var(--coachmark-darkmint-bg-color, $lm-coachmark-darkmint-bg-color-light);
+        }
+      }
+    }
+
+    &--yellow {
+      background: var(--coachmark-yellow-bg-color, $lm-coachmark-yellow-bg-color-light);
+      color: var(--coachmark-yellow-text-color, $lm-coachmark-yellow-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid var(--coachmark-yellow-bg-color, $lm-coachmark-yellow-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid
+            var(--coachmark-yellow-bg-color, $lm-coachmark-yellow-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid var(--coachmark-yellow-bg-color, $lm-coachmark-yellow-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid
+            var(--coachmark-yellow-bg-color, $lm-coachmark-yellow-bg-color-light);
+        }
+      }
+    }
+
+    &--red {
+      background: var(--coachmark-red-bg-color, $lm-coachmark-red-bg-color-light);
+      color: var(--coachmark-red-text-color, $lm-coachmark-red-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid var(--coachmark-red-bg-color, $lm-coachmark-red-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid var(--coachmark-red-bg-color, $lm-coachmark-red-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid var(--coachmark-red-bg-color, $lm-coachmark-red-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid var(--coachmark-red-bg-color, $lm-coachmark-red-bg-color-light);
+        }
+      }
+    }
+
+    &--darkred {
+      background: var(--coachmark-darkred-bg-color, $lm-coachmark-darkred-bg-color-light);
+      color: var(--coachmark-darkred-text-color, $lm-coachmark-darkred-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid
+            var(--coachmark-darkred-bg-color, $lm-coachmark-darkred-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid
+            var(--coachmark-darkred-bg-color, $lm-coachmark-darkred-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid
+            var(--coachmark-darkred-bg-color, $lm-coachmark-darkred-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid
+            var(--coachmark-darkred-bg-color, $lm-coachmark-darkred-bg-color-light);
+        }
+      }
+    }
+
+    &--orange {
+      background: var(--coachmark-orange-bg-color, $lm-coachmark-orange-bg-color-light);
+      color: var(--coachmark-orange-text-color, $lm-coachmark-orange-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid var(--coachmark-orange-bg-color, $lm-coachmark-orange-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid
+            var(--coachmark-orange-bg-color, $lm-coachmark-orange-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid var(--coachmark-orange-bg-color, $lm-coachmark-orange-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid
+            var(--coachmark-orange-bg-color, $lm-coachmark-orange-bg-color-light);
+        }
+      }
+    }
+
+    &--cyan {
+      background: var(--coachmark-cyan-bg-color, $lm-coachmark-cyan-bg-color-light);
+      color: var(--coachmark-cyan-text-color, $lm-coachmark-cyan-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid var(--coachmark-cyan-bg-color, $lm-coachmark-cyan-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid var(--coachmark-cyan-bg-color, $lm-coachmark-cyan-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid var(--coachmark-cyan-bg-color, $lm-coachmark-cyan-bg-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid var(--coachmark-cyan-bg-color, $lm-coachmark-cyan-bg-color-light);
+        }
+      }
+    }
+
+    &--outline {
+      background: var(--coachmark-outline-color, $lm-coachmark-outline-color-light);
+      color: var(--coachmark-outline-text-color, $lm-coachmark-outline-text-color-light);
+
+      &.md-coachmark__popper--left {
+        .md-coachmark__arrow {
+          border-left: $coachmark-arrow-size solid var(--coachmark-outline-color, $lm-coachmark-outline-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--right {
+        .md-coachmark__arrow {
+          border-right: $coachmark-arrow-size solid var(--coachmark-outline-color, $lm-coachmark-outline-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--top {
+        .md-coachmark__arrow {
+          border-top: $coachmark-arrow-size solid var(--coachmark-outline-color, $lm-coachmark-outline-color-light);
+        }
+      }
+
+      &.md-coachmark__popper--bottom {
+        .md-coachmark__arrow {
+          border-bottom: $coachmark-arrow-size solid var(--coachmark-outline-color, $lm-coachmark-outline-color-light);
+        }
+      }
+    }
+  }
+
+  &--active {
+    .md-coachmark__popper {
+      display: block;
+    }
+  }
+}
+
+@keyframes coach-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes coach-slide-right {
+  from {
+    left: 100%;
+  }
+  to {
+    left: calc(100% + 1rem);
+  }
+}
+
+@keyframes coach-slide-top {
+  from {
+    bottom: 100%;
+  }
+  to {
+    bottom: calc(100% + 0.5rem);
+  }
+}
+
+@keyframes coach-slide-left {
+  from {
+    right: 100%;
+  }
+  to {
+    right: calc(100% + 1rem);
+  }
+}
+
+@keyframes coach-slide-bottom {
+  from {
+    top: 100%;
+  }
+  to {
+    top: calc(100% + 0.5rem);
+  }
+}

package/src/components/coachmark/scss/module.scss

@@ -0,0 +1,14 @@
+@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 "./vars/lm-coachmark-settings";
+
+@import "./settings";
+@import "./coachmarks";

package/src/components/coachmark/scss/settings.scss

@@ -0,0 +1,4 @@
+$coachmark-min-width: rem-calc(170);
+$coachmark-main-raduis: rem-calc(4);
+$coachmark-main-padding: rem-calc(12);
+$coachmark-arrow-size: rem-calc(10);

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

@@ -0,0 +1,140 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const coachmark = {
+  prefix: "lm",
+  component: "coachmark",
+  default: {
+    "bg-color": {
+      light: colors.gray["05"].name,
+      dark: colors.gray[80].name
+    },
+    "text-color": {
+      light: colors.gray[70].name,
+      dark: colors.gray["05"].name
+    }
+  },
+  blue: {
+    "bg-color": {
+      light: colors.cobalt[20].name,
+      dark: colors.cobalt[80].name
+    },
+    "text-color": {
+      light: colors.cobalt[70].name,
+      dark: colors.cobalt[20].name
+    }
+  },
+  green: {
+    "bg-color": {
+      light: colors.green[20].name,
+      dark: colors.green[80].name
+    },
+    "text-color": {
+      light: colors.green[70].name,
+      dark: colors.green[20].name
+    }
+  },
+  purple: {
+    "bg-color": {
+      light: colors.purple[20].name,
+      dark: colors.purple[80].name
+    },
+    "text-color": {
+      light: colors.purple[70].name,
+      dark: colors.purple[20].name
+    }
+  },
+  violet: {
+    "bg-color": {
+      light: colors.violet[20].name,
+      dark: colors.violet[80].name
+    },
+    "text-color": {
+      light: colors.violet[70].name,
+      dark: colors.violet[20].name
+    }
+  },
+  mint: {
+    "bg-color": {
+      light: colors.mint[20].name,
+      dark: colors.mint[80].name
+    },
+    "text-color": {
+      light: colors.mint[70].name,
+      dark: colors.mint[20].name
+    }
+  },
+  darkmint: {
+    "bg-color": {
+      light: colors.mint[50].name,
+      dark: colors.mint[50].name
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.gray["05"].name
+    }
+  },
+  yellow: {
+    "bg-color": {
+      light: colors.yellow[20].name,
+      dark: colors.yellow[80].name
+    },
+    "text-color": {
+      light: colors.yellow[70].name,
+      dark: colors.yellow[20].name
+    }
+  },
+  red: {
+    "bg-color": {
+      light: colors.red[20].name,
+      dark: colors.red[80].name
+    },
+    "text-color": {
+      light: colors.red[70].name,
+      dark: colors.red[20].name
+    }
+  },
+  darkred: {
+    "bg-color": {
+      light: colors.red[60].name,
+      dark: colors.red[60].name
+    },
+    "text-color": {
+      light: colors.red[90].name,
+      dark: colors.red[30].name
+    }
+  },
+  orange: {
+    "bg-color": {
+      light: colors.orange[20].name,
+      dark: colors.orange[80].name
+    },
+    "text-color": {
+      light: colors.orange[70].name,
+      dark: colors.orange[20].name
+    }
+  },
+  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
+    }
+  },
+  outline: {
+    color: {
+      light: colors.gray[40].name,
+      dark: colors.gray[20].name
+    },
+    "text-color": {
+      light: colors.gray[50].name,
+      dark: colors.gray["05"].name
+    }
+  }
+};
+
+module.exports = coachmark;