@weni/unnnic-system 3.9.4 → 3.11.0

package/src/components/Tag/DefaultTag.vue

@@ -1,144 +1,88 @@
 <template>
-  <section
-    :class="`unnnic-tag
-        ${!disabled ? `unnnic-tag-scheme--${scheme}` : `unnnic-tag--disabled`}
-        ${clickable ? 'unnnic-tag--clickable' : ''}`"
-  >
+  <section :class="`unnnic-tag unnnic-tag--${size}`">
     <section
       v-if="leftIcon"
       class="unnnic-tag__icon"
     >
       <UnnnicIcon
         :icon="leftIcon"
-        :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'"
+        scheme="fg-emphasized"
         size="sm"
       />
     </section>
+    <p :class="`unnnic-tag__label`">{{ text }}</p>
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { color as colors } from '@/assets/tokens/colors.json';
+
 import UnnnicIcon from '../Icon.vue';
 
-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');
-    },
-  },
-};
+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;
+});
 </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: 0 $unnnic-spacing-xs;
+  padding: calc($unnnic-space-1 * 1.5) $unnnic-space-3;
+  width: fit-content;
 
-  &--disabled {
-    background-color: $unnnic-color-background-sky;
-  }
+  background-color: v-bind(color);
 
-  &--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;
-      }
-    }
+  &--small {
+    padding: calc($unnnic-space-1 * 0.5) $unnnic-space-3;
   }
 
   &__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;
-    color: $unnnic-color-neutral-darkest;
-
-    &--disabled {
-      color: $unnnic-color-neutral-cloudy;
-    }
+    margin: 0;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    font: $unnnic-font-caption-1;
+    color: $unnnic-color-fg-emphasized;
   }
 
   &__icon {
     display: flex;
   }
-
-  .clickable {
-    cursor: pointer;
-  }
 }
 </style>

package/src/components/Tag/Tag.vue

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

package/src/components/Tag/types.ts

@@ -0,0 +1,19 @@
+export type TagType = 'default' | 'brand' | 'next';
+export type TagSize = 'small' | 'medium';
+
+export interface TagProps {
+  type?: TagType;
+  size?: TagSize;
+  text?: string;
+  disabled?: boolean;
+  scheme?: string;
+  leftIcon?: string;
+  hasCloseIcon?: boolean;
+}
+
+export interface DefaultTagProps {
+  text?: string;
+  size?: TagSize;
+  scheme?: string;
+  leftIcon?: string;
+}

package/src/components/TextArea/TextArea.vue

@@ -4,7 +4,8 @@
     :size="size"
     :disabled="disabled"
     :message="message"
-    :error="errors.join(', ') || type === 'error'"
+    :tooltip="tooltip"
+    :error="computedError"
   >
     <textarea
       ref="textarea"
@@ -18,13 +19,14 @@
       :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>
 
@@ -43,6 +45,14 @@ export default {
       default: 'md',
     },
 
+    resize: {
+      type: String,
+      default: 'vertical',
+      validator(value) {
+        return ['none', 'vertical'].indexOf(value) !== -1;
+      },
+    },
+
     label: {
       type: String,
     },
@@ -76,13 +86,28 @@ export default {
       },
     },
 
+    tooltip: {
+      type: String,
+      default: '',
+    },
+
     errors: {
-      type: Array,
+      type: [Array, null],
       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() {
@@ -96,31 +121,35 @@ 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: vertical;
-    box-sizing: border-box;
+
+    resize: v-bind(resize);
 
     scrollbar-width: thin;
 
+    padding: $unnnic-space-3 $unnnic-space-4;
+
     &--size-md {
       @include input-md-font;
 
-      min-height: 6.25 * $unnnic-font-size;
-      padding: ($unnnic-spacing-ant - $unnnic-border-width-thinner)
-        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
+      min-height: 90px;
     }
 
     &--size-sm {
       @include input-sm-font;
 
-      min-height: 5 * $unnnic-font-size;
-      padding: ($unnnic-spacing-xs)
-        ($unnnic-spacing-sm - $unnnic-border-width-thinner);
+      min-height: $unnnic-space-20;
     }
 
     &.unnnic-text-area__textarea--type-error {

package/src/components/TextArea/__test__/__snapshots__/TextArea.spec.js.snap

@@ -2,8 +2,16 @@
 
 exports[`TextArea.vue > matches the snapshot 1`] = `
 "<section data-v-9f8d6c86="" data-v-735b3c51="" class="unnnic-form-element">
-  <p data-v-9f8d6c86="" class="unnnic-form-element__label">Description</p><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
-  <!--v-if-->
-  <p data-v-9f8d6c86="" class="unnnic-form-element__message"> <span data-v-9f8d6c86="" class="unnnic-form-element__right-message">0/200</span></p>
+  <section data-v-7f222291="" data-v-9f8d6c86="" class="unnnic-label unnnic-form-element__label">
+    <p data-v-7f222291="" class="unnnic-label__label">Description</p>
+    <!--v-if-->
+  </section><textarea data-v-735b3c51="" class="unnnic-text-area__textarea unnnic-text-area__textarea--size-md unnnic-text-area__textarea--type-normal" placeholder="Enter text" maxlength="200" value=""></textarea>
+  <section data-v-9f8d6c86="" class="unnnic-form-element__hints-container">
+    <section data-v-9f8d6c86="" class="unnnic-form-element__message-container">
+      <!--v-if-->
+      <!--v-if-->
+    </section>
+    <p data-v-9f8d6c86="">0/200</p>
+  </section>
 </section>"
 `;