@weni/unnnic-system 3.8.2-alpha.0 → 3.8.2-alpha.2

package/src/components/Tag/BrandTag.vue

@@ -1,96 +0,0 @@
-<template>
-  <div
-    :class="{
-      'unnnic-brand-tag': true,
-      'unnnic-brand-tag--disabled': !disabled,
-      'unnnic-brand-tag--clickable': clickable,
-    }"
-  >
-    <span class="unnnic-brand-tag__label">{{ text }}</span>
-    <UnnnicIcon
-      :icon="disabled ? 'close-1' : 'add-1'"
-      :scheme="disabled ? 'neutral-snow' : 'brand-weni-dark'"
-      class="unnnic-brand-tag__icon"
-      size="xs"
-    />
-  </div>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-
-export default {
-  name: 'UnnnicBrandTag',
-  components: {
-    UnnnicIcon,
-  },
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    closeClicked() {
-      if (!this.closeClicked) return;
-      this.$emit('close-click');
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-brand-tag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: $unnnic-border-radius-pill;
-  border: 1px solid $unnnic-color-brand-weni-soft;
-  height: 1.875 * $unnnic-font-size;
-  white-space: nowrap;
-  transition: 0.2s;
-
-  color: $unnnic-color-neutral-snow;
-  background-color: $unnnic-color-brand-weni-dark;
-  &:hover {
-    background-color: $unnnic-color-brand-weni-soft;
-  }
-
-  &--disabled {
-    color: $unnnic-color-brand-weni-dark;
-    background-color: $unnnic-color-background-snow;
-    &:hover {
-      background-color: rgba(
-        $unnnic-color-brand-weni,
-        $unnnic-opacity-level-extra-light
-      );
-    }
-  }
-  &--clickable {
-    cursor: pointer;
-  }
-
-  &__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;
-  }
-
-  &__icon {
-    margin-right: $unnnic-inline-ant;
-    cursor: pointer;
-  }
-}
-</style>

package/src/components/Tag/IndicatorTag.vue

@@ -1,107 +0,0 @@
-<template>
-  <div
-    :class="`unnnic-tag
-        ${clickable ? 'unnnic-tag--clickable' : ''}`"
-  >
-    <ToolTip
-      :enabled="enableTooltip"
-      :text="tooltipText"
-      side="bottom"
-    >
-      <span class="unnnic-tag__count">{{ count }}</span>
-    </ToolTip>
-    <span class="unnnic-tag__label">{{ text }}</span>
-    <UnnnicIcon
-      v-if="hasBackButton"
-      icon="arrow-right-1-1"
-      class="unnnic-tag__icon"
-      scheme="neutral-darkest"
-      size="xs"
-    />
-  </div>
-</template>
-
-<script>
-import UnnnicIcon from '../Icon.vue';
-import ToolTip from '../ToolTip/ToolTip.vue';
-
-export default {
-  name: 'UnnnicTag',
-  components: {
-    UnnnicIcon,
-    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>
-@use '@/assets/scss/unnnic' as *;
-
-.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/TagNext.vue

@@ -1,60 +0,0 @@
-<template>
-  <section :class="['unnnic-tag-next', `unnnic-tag-next--${scheme}`]">
-    <p class="unnnic-tag-next__text">
-      {{ text }}
-    </p>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'TagNext',
-  props: {
-    text: {
-      type: String,
-      default: null,
-    },
-    scheme: {
-      type: String,
-      default: 'weni',
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-tag-next {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-
-  border-radius: $unnnic-border-radius-pill;
-  padding: 0 $unnnic-spacing-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);
-
-  &__text {
-    margin: 0;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &--aux-purple {
-    background-color: $unnnic-color-aux-purple-100;
-    color: $unnnic-color-aux-purple-500;
-  }
-
-  &--weni {
-    background-color: $unnnic-color-weni-100;
-    color: $unnnic-color-weni-600;
-  }
-}
-</style>