@weni/unnnic-system 1.16.17 → 1.16.19-develop.0

package/src/components/Tag/DefaultTag.vue

@@ -1,124 +1,124 @@
-<template>
-  <div
-  :class="`unnnic-tag
-        ${!disabled
-        ? `unnnic-tag-scheme--${scheme}`
-        : `unnnic-tag--disabled`}
-        ${ clickable ? 'unnnic-tag--clickable' : '' }`"
-    @click="$emit('click')"
-  >
-    <span
-      :class="`unnnic-tag__label
-      ${hasCloseIcon ? 'unnnic-tag__label--hasIcon' : ''}
-      ${disabled ? 'unnnic-tag__label--disabled' : ''}`">{{text}}</span>
-    <unnnic-icon-svg
-      v-if="hasCloseIcon"
-      icon="close-1"
-      class="unnnic-tag__icon"
-      scheme="neutral-darkest"
-      size="xs"
-      @click.native.stop="$emit('close')"
-    />
-  </div>
-</template>
-
-<script>
-import UnnnicIconSvg from '../Icon.vue';
-
-export default {
-  name: 'unnnic-tag',
-  components: {
-    UnnnicIconSvg,
-  },
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    hasCloseIcon: {
-      type: Boolean,
-      default: false,
-    },
-    scheme: {
-      type: String,
-      default: 'aux-purple',
-    },
-  },
-  methods: {
-    closeClicked() {
-      if (!this.closeClicked) return;
-      this.$emit('close-click');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-
-@each $name, $color in $scheme-colors {
-  &.unnnic-tag-scheme--#{$name} {
-    background-color: rgba($color, $unnnic-opacity-level-light);
-    outline-style: solid;
-    outline-color: rgba($color, $unnnic-opacity-level-extra-light);
-    outline-width: $unnnic-border-width-thinner;
-    outline-offset: -$unnnic-border-width-thinner;
-  }
-}
-
-.unnnic-tag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: $unnnic-border-radius-pill;
-
-    &--disabled {
-      background-color: $unnnic-color-background-sky;
-    }
-
-    &--clickable{
-      cursor: pointer;
-
-      @each $name, $color in $scheme-colors {
-        &.unnnic-tag-scheme--#{$name}:hover {
-          outline-style: solid;
-          outline-color: $unnnic-color-neutral-cleanest;
-          outline-width: $unnnic-border-width-thinner;
-          outline-offset: -$unnnic-border-width-thinner;
-        }
-      }
-    }
-
-    &__label{
-      font-family: $unnnic-font-family-secondary;
-      font-size: $unnnic-font-size-body-md;
-      font-weight: $unnnic-font-weight-regular;
-      line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-      padding: $unnnic-spacing-stack-nano $unnnic-inline-ant;
-      color: $unnnic-color-neutral-darkest;
-
-      &--disabled {
-        color: $unnnic-color-neutral-cloudy;
-      }
-
-      &--hasIcon {
-        padding-left: $unnnic-inline-ant;
-        padding-right: $unnnic-spacing-stack-nano;
-      }
-    }
-
-    &__icon {
-      margin-right: $unnnic-inline-ant;
-      cursor: pointer;
-    }
-}
-
-</style>
+<template>
+  <div
+  :class="`unnnic-tag
+        ${!disabled
+        ? `unnnic-tag-scheme--${scheme}`
+        : `unnnic-tag--disabled`}
+        ${ clickable ? 'unnnic-tag--clickable' : '' }`"
+    @click="$emit('click')"
+  >
+    <span
+      :class="`unnnic-tag__label
+      ${hasCloseIcon ? 'unnnic-tag__label--hasIcon' : ''}
+      ${disabled ? 'unnnic-tag__label--disabled' : ''}`">{{text}}</span>
+    <unnnic-icon-svg
+      v-if="hasCloseIcon"
+      icon="close-1"
+      class="unnnic-tag__icon"
+      scheme="neutral-darkest"
+      size="xs"
+      @click.native.stop="$emit('close')"
+    />
+  </div>
+</template>
+
+<script>
+import UnnnicIconSvg from '../Icon.vue';
+
+export default {
+  name: 'unnnic-tag',
+  components: {
+    UnnnicIconSvg,
+  },
+  props: {
+    text: {
+      type: String,
+      default: null,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    hasCloseIcon: {
+      type: Boolean,
+      default: false,
+    },
+    scheme: {
+      type: String,
+      default: 'aux-purple',
+    },
+  },
+  methods: {
+    closeClicked() {
+      if (!this.closeClicked) return;
+      this.$emit('close-click');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+@each $name, $color in $scheme-colors {
+  &.unnnic-tag-scheme--#{$name} {
+    background-color: rgba($color, $unnnic-opacity-level-light);
+    outline-style: solid;
+    outline-color: rgba($color, $unnnic-opacity-level-extra-light);
+    outline-width: $unnnic-border-width-thinner;
+    outline-offset: -$unnnic-border-width-thinner;
+  }
+}
+
+.unnnic-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $unnnic-border-radius-pill;
+
+    &--disabled {
+      background-color: $unnnic-color-background-sky;
+    }
+
+    &--clickable{
+      cursor: pointer;
+
+      @each $name, $color in $scheme-colors {
+        &.unnnic-tag-scheme--#{$name}:hover {
+          outline-style: solid;
+          outline-color: $unnnic-color-neutral-cleanest;
+          outline-width: $unnnic-border-width-thinner;
+          outline-offset: -$unnnic-border-width-thinner;
+        }
+      }
+    }
+
+    &__label{
+      font-family: $unnnic-font-family-secondary;
+      font-size: $unnnic-font-size-body-md;
+      font-weight: $unnnic-font-weight-regular;
+      line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
+      padding: $unnnic-spacing-stack-nano $unnnic-inline-ant;
+      color: $unnnic-color-neutral-darkest;
+
+      &--disabled {
+        color: $unnnic-color-neutral-cloudy;
+      }
+
+      &--hasIcon {
+        padding-left: $unnnic-inline-ant;
+        padding-right: $unnnic-spacing-stack-nano;
+      }
+    }
+
+    &__icon {
+      margin-right: $unnnic-inline-ant;
+      cursor: pointer;
+    }
+}
+
+</style>

package/src/components/Tag/IndicatorTag.vue

@@ -1,104 +1,104 @@
-<template>
-  <div
-    :class="`unnnic-tag
-        ${clickable ? 'unnnic-tag--clickable' : ''}`"
-  >
-    <tool-tip :enabled="enableTooltip" :text="tooltipText" side="bottom">
-      <span class="unnnic-tag__count">{{ count }}</span>
-    </tool-tip>
-    <span class="unnnic-tag__label">{{ text }}</span>
-    <unnnic-icon-svg
-      v-if="hasBackButton"
-      icon="arrow-right-1-1"
-      class="unnnic-tag__icon"
-      scheme="neutral-darkest"
-      size="xs"
-    />
-  </div>
-</template>
-
-<script>
-import UnnnicIconSvg from '../Icon.vue';
-import ToolTip from '../ToolTip/ToolTip.vue';
-
-export default {
-  name: 'unnnic-tag',
-  components: {
-    UnnnicIconSvg,
-    ToolTip,
-  },
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    tooltipText: {
-      type: String,
-      default: null,
-    },
-    count: {
-      type: Number,
-      default: 0,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-    hasBackButton: {
-      type: Boolean,
-      default: false,
-    },
-    enableTooltip: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
-
-.unnnic-tag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: $unnnic-border-radius-sm;
-  background-color: $unnnic-color-background-sky;
-  padding: $unnnic-inset-nano;
-  border: $unnnic-border-width-thinner solid $unnnic-color-background-sky;
-
-  &:hover {
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
-  }
-
-  &--clickable {
-    cursor: pointer;
-  }
-
-  &__count {
-    background-color: $unnnic-color-neutral-soft;
-    border-radius: $unnnic-border-radius-sm;
-    padding: $unnnic-inline-nano;
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-md;
-    font-weight: $unnnic-font-weight-regular;
-    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-    color: $unnnic-color-neutral-darkest;
-
-  }
-
-  &__label {
-    padding: 0 $unnnic-inline-xs;
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-md;
-    font-weight: $unnnic-font-weight-regular;
-    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
-    color: $unnnic-color-neutral-darkest;
-  }
-
-  &__icon {
-    margin-right: $unnnic-inline-ant;
-  }
-}
-</style>
+<template>
+  <div
+    :class="`unnnic-tag
+        ${clickable ? 'unnnic-tag--clickable' : ''}`"
+  >
+    <tool-tip :enabled="enableTooltip" :text="tooltipText" side="bottom">
+      <span class="unnnic-tag__count">{{ count }}</span>
+    </tool-tip>
+    <span class="unnnic-tag__label">{{ text }}</span>
+    <unnnic-icon-svg
+      v-if="hasBackButton"
+      icon="arrow-right-1-1"
+      class="unnnic-tag__icon"
+      scheme="neutral-darkest"
+      size="xs"
+    />
+  </div>
+</template>
+
+<script>
+import UnnnicIconSvg from '../Icon.vue';
+import ToolTip from '../ToolTip/ToolTip.vue';
+
+export default {
+  name: 'unnnic-tag',
+  components: {
+    UnnnicIconSvg,
+    ToolTip,
+  },
+  props: {
+    text: {
+      type: String,
+      default: null,
+    },
+    tooltipText: {
+      type: String,
+      default: null,
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+    hasBackButton: {
+      type: Boolean,
+      default: false,
+    },
+    enableTooltip: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $unnnic-border-radius-sm;
+  background-color: $unnnic-color-background-sky;
+  padding: $unnnic-inset-nano;
+  border: $unnnic-border-width-thinner solid $unnnic-color-background-sky;
+
+  &:hover {
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-cleanest;
+  }
+
+  &--clickable {
+    cursor: pointer;
+  }
+
+  &__count {
+    background-color: $unnnic-color-neutral-soft;
+    border-radius: $unnnic-border-radius-sm;
+    padding: $unnnic-inline-nano;
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-md;
+    font-weight: $unnnic-font-weight-regular;
+    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
+    color: $unnnic-color-neutral-darkest;
+
+  }
+
+  &__label {
+    padding: 0 $unnnic-inline-xs;
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-md;
+    font-weight: $unnnic-font-weight-regular;
+    line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
+    color: $unnnic-color-neutral-darkest;
+  }
+
+  &__icon {
+    margin-right: $unnnic-inline-ant;
+  }
+}
+</style>

package/src/components/Tag/Tag.vue

@@ -1,87 +1,87 @@
-<template>
-    <component
-      class="unnnic-tag-content"
-      :is="currentComponent"
-      :v-bind="$attrs"
-      :text="text"
-      :disabled="disabled"
-      :hasCloseIcon="hasCloseIcon"
-      :scheme="scheme"
-      :count="count"
-      :hasBackButton="hasBackButton"
-      :clickable="clickable"
-      :tooltipText="tooltipText"
-      :enableTooltip="enableTooltip"
-      :icon="icon"
-      @click="$emit('click')"
-      @close="$emit('close')"
-    />
-</template>
-
-<script>
-import DefaultTag from './DefaultTag.vue';
-import IndicatorTag from './IndicatorTag.vue';
-import BrandTag from './BrandTag.vue';
-
-export default {
-  name: 'unnnic-tag',
-  props: {
-    type: {
-      type: String,
-      default: 'default',
-      validator(value) {
-        return (
-          ['default', 'indicator', 'brand'].indexOf(value) !== -1
-        );
-      },
-    },
-    text: {
-      type: String,
-      default: null,
-    },
-    tooltipText: {
-      type: String,
-      default: null,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-    count: {
-      type: Number,
-      default: 0,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    hasCloseIcon: {
-      type: Boolean,
-      default: false,
-    },
-    scheme: {
-      type: String,
-      default: 'aux-purple',
-    },
-    hasBackButton: {
-      type: Boolean,
-      default: false,
-    },
-    enableTooltip: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: null,
-    },
-  },
-  computed: {
-    currentComponent() {
-      if (this.type === 'indicator') return IndicatorTag;
-      if (this.type === 'brand') return BrandTag;
-      return DefaultTag;
-    },
-  },
-};
-</script>
+<template>
+    <component
+      class="unnnic-tag-content"
+      :is="currentComponent"
+      :v-bind="$attrs"
+      :text="text"
+      :disabled="disabled"
+      :hasCloseIcon="hasCloseIcon"
+      :scheme="scheme"
+      :count="count"
+      :hasBackButton="hasBackButton"
+      :clickable="clickable"
+      :tooltipText="tooltipText"
+      :enableTooltip="enableTooltip"
+      :icon="icon"
+      @click="$emit('click')"
+      @close="$emit('close')"
+    />
+</template>
+
+<script>
+import DefaultTag from './DefaultTag.vue';
+import IndicatorTag from './IndicatorTag.vue';
+import BrandTag from './BrandTag.vue';
+
+export default {
+  name: 'unnnic-tag',
+  props: {
+    type: {
+      type: String,
+      default: 'default',
+      validator(value) {
+        return (
+          ['default', 'indicator', 'brand'].indexOf(value) !== -1
+        );
+      },
+    },
+    text: {
+      type: String,
+      default: null,
+    },
+    tooltipText: {
+      type: String,
+      default: null,
+    },
+    clickable: {
+      type: Boolean,
+      default: false,
+    },
+    count: {
+      type: Number,
+      default: 0,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    hasCloseIcon: {
+      type: Boolean,
+      default: false,
+    },
+    scheme: {
+      type: String,
+      default: 'aux-purple',
+    },
+    hasBackButton: {
+      type: Boolean,
+      default: false,
+    },
+    enableTooltip: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    currentComponent() {
+      if (this.type === 'indicator') return IndicatorTag;
+      if (this.type === 'brand') return BrandTag;
+      return DefaultTag;
+    },
+  },
+};
+</script>