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

package/src/components/Tag/BrandTag.vue

@@ -0,0 +1,96 @@
+<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/DefaultTag.vue

@@ -1,83 +1,144 @@
 <template>
-  <section :class="`unnnic-tag unnnic-tag--${size}`">
+  <section
+    :class="`unnnic-tag
+        ${!disabled ? `unnnic-tag-scheme--${scheme}` : `unnnic-tag--disabled`}
+        ${clickable ? 'unnnic-tag--clickable' : ''}`"
+  >
     <section
       v-if="leftIcon"
       class="unnnic-tag__icon"
     >
       <UnnnicIcon
         :icon="leftIcon"
-        scheme="fg-emphasized"
+        :scheme="scheme"
+        size="sm"
+      />
+    </section>
+    <span
+      :class="`unnnic-tag__label
+      ${disabled ? 'unnnic-tag__label--disabled' : ''}`"
+      >{{ text }}</span
+    >
+    <section
+      v-if="rightIcon || hasCloseIcon"
+      :class="{ 'unnnic-tag__icon': true, clickable: !rightIcon }"
+      @click.stop="hasCloseIcon ? emitClose() : () => {}"
+    >
+      <UnnnicIcon
+        :icon="rightIcon || 'close'"
+        :scheme="rightIcon ? scheme : 'neutral-darkest'"
         size="sm"
       />
     </section>
-    <p :class="`unnnic-tag__label`">{{ text }}</p>
   </section>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { color as colors } from '@/assets/tokens/colors.json';
-
+<script>
 import UnnnicIcon from '../Icon.vue';
 
-import type { DefaultTagProps } from './types';
-
-const props = withDefaults(defineProps<DefaultTagProps>(), {
-  text: undefined,
-  size: 'medium',
-  scheme: 'aux-purple',
-  leftIcon: undefined,
-});
-
-const COLOR_MAPPING = [
-  { keywords: ['green'], color: colors.green[200].value },
-  { keywords: ['blue'], color: colors.blue[200].value },
-  { keywords: ['purple'], color: colors.purple[200].value },
-  { keywords: ['red', 'pink'], color: colors.red[200].value },
-  { keywords: ['orange'], color: colors.orange[200].value },
-  { keywords: ['yellow'], color: colors.yellow[200].value },
-  { keywords: ['gray'], color: colors.gray[200].value },
-  { keywords: ['teal', 'weni'], color: colors.teal[200].value },
-];
-
-const color = computed(() => {
-  const scheme = props.scheme.toLowerCase();
-
-  const match = COLOR_MAPPING.find(({ keywords }) =>
-    keywords.some((keyword) => scheme.includes(keyword)),
-  );
-
-  return match?.color ?? colors.gray[200].value;
-});
+export default {
+  name: 'UnnnicTag',
+  components: {
+    UnnnicIcon,
+  },
+  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',
+    },
+    leftIcon: {
+      type: String,
+      default: null,
+    },
+    rightIcon: {
+      type: String,
+      default: null,
+    },
+  },
+  methods: {
+    closeClicked() {
+      if (!this.closeClicked) return;
+      this.$emit('close-click');
+    },
+    emitClose() {
+      this.$emit('close');
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 
+@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;
-  gap: $unnnic-space-1;
   border-radius: $unnnic-border-radius-pill;
-  padding: calc($unnnic-space-1 * 1.5) $unnnic-space-3;
+  padding: 0 $unnnic-spacing-xs;
 
-  background-color: v-bind(color);
+  &--disabled {
+    background-color: $unnnic-color-background-sky;
+  }
 
-  &--small {
-    padding: calc($unnnic-space-1 * 0.5) $unnnic-space-3;
+  &--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 {
-    margin: 0;
-
-    font: $unnnic-font-caption-1;
-    color: $unnnic-color-fg-emphasized;
+    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;
+    color: $unnnic-color-neutral-darkest;
+
+    &--disabled {
+      color: $unnnic-color-neutral-cloudy;
+    }
   }
 
   &__icon {
     display: flex;
   }
+
+  .clickable {
+    cursor: pointer;
+  }
 }
 </style>

package/src/components/Tag/IndicatorTag.vue

@@ -0,0 +1,107 @@
+<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/Tag.vue

@@ -1,43 +1,90 @@
 <template>
-  <UnnnicChip
-    v-if="type === 'brand' || hasCloseIcon"
-    :text="text"
-    type="multiple"
-    :isSelected="disabled || hasCloseIcon"
-    isClickable
-    @click="hasCloseIcon ? $emit('close') : $emit('click')"
-  />
-
-  <DefaultTag
-    v-else
-    :size="type === 'next' ? 'small' : size"
+  <component
+    :is="currentComponent"
+    class="unnnic-tag-content"
+    v-bind="$attrs"
     :text="text"
+    :disabled="disabled"
+    :hasCloseIcon="hasCloseIcon"
     :scheme="scheme"
+    :count="count"
+    :hasBackButton="hasBackButton"
+    :clickable="clickable"
+    :tooltipText="tooltipText"
+    :enableTooltip="enableTooltip"
     :leftIcon="leftIcon"
+    :rightIcon="rightIcon"
   />
 </template>
 
-<script setup lang="ts">
-import UnnnicChip from '../Chip/Chip.vue';
+<script>
 import DefaultTag from './DefaultTag.vue';
-import type { TagProps } from './types';
+import IndicatorTag from './IndicatorTag.vue';
+import BrandTag from './BrandTag.vue';
+import TagNext from './TagNext.vue';
 
-defineOptions({
+export default {
   name: 'UnnnicTag',
-});
-
-withDefaults(defineProps<TagProps>(), {
-  type: 'default',
-  size: 'medium',
-  text: undefined,
-  disabled: false,
-  scheme: 'aux-purple',
-  leftIcon: '',
-  hasCloseIcon: false,
-});
-
-defineEmits<{
-  close: [];
-  click: [];
-}>();
+  props: {
+    type: {
+      type: String,
+      default: 'default',
+      validator(value) {
+        return ['default', 'indicator', 'brand', 'next'].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,
+    },
+    leftIcon: {
+      type: String,
+      default: '',
+    },
+    rightIcon: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    currentComponent() {
+      if (this.type === 'indicator') return IndicatorTag;
+      if (this.type === 'brand') return BrandTag;
+      if (this.type === 'next') return TagNext;
+      return DefaultTag;
+    },
+  },
+};
 </script>

package/src/components/Tag/TagNext.vue

@@ -0,0 +1,60 @@
+<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>

package/src/components/TextArea/TextArea.vue

@@ -4,7 +4,7 @@
     :size="size"
     :disabled="disabled"
     :message="message"
-    :error="computedError"
+    :error="errors.join(', ') || type === 'error'"
   >
     <textarea
       ref="textarea"
@@ -18,14 +18,13 @@
       :disabled="disabled"
       :value="modelValue"
       @input="$emit('update:modelValue', fullySanitize($event.target.value))"
-    />
+    ></textarea>
 
     <template
       v-if="maxLength"
       #rightMessage
+      >{{ modelValue.length }}/{{ maxLength }}</template
     >
-      {{ modelValue.length }}/{{ maxLength }}
-    </template>
   </UnnnicFormElement>
 </template>
 
@@ -44,14 +43,6 @@ export default {
       default: 'md',
     },
 
-    resize: {
-      type: String,
-      default: 'vertical',
-      validator(value) {
-        return ['none', 'vertical'].indexOf(value) !== -1;
-      },
-    },
-
     label: {
       type: String,
     },
@@ -92,16 +83,6 @@ export default {
   },
   emits: ['update:modelValue'],
 
-  computed: {
-    computedError() {
-      if (Array.isArray(this.errors)) {
-        return this.errors.join(', ') || this.type === 'error';
-      }
-
-      return this.errors || this.type === 'error';
-    },
-  },
-
   methods: {
     fullySanitize,
     focus() {
@@ -115,35 +96,31 @@ export default {
 @use '@/assets/scss/unnnic' as *;
 @use '@/components/Input/Input' as *;
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
 .unnnic-text-area {
   &__textarea {
     @include input-base;
 
     display: block;
     width: 100%;
-
-    resize: v-bind(resize);
+    resize: vertical;
+    box-sizing: border-box;
 
     scrollbar-width: thin;
 
-    padding: $unnnic-space-3 $unnnic-space-4;
-
     &--size-md {
       @include input-md-font;
 
-      min-height: 90px;
+      min-height: 6.25 * $unnnic-font-size;
+      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
 
     &--size-sm {
       @include input-sm-font;
 
-      min-height: $unnnic-space-20;
+      min-height: 5 * $unnnic-font-size;
+      padding: ($unnnic-spacing-xs)
+        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
     }
 
     &.unnnic-text-area__textarea--type-error {