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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.8.2-alpha.1",
+  "version": "3.8.2-alpha.2",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/ChatsContact/ChatsContact.vue

@@ -45,12 +45,12 @@
           {{ title }}
         </h1>
 
-        <UnnnicTag
+        <p
           v-if="projectName"
           class="chats-contact__infos__project-tag"
-          :text="projectName"
-          scheme="neutral-white"
-        />
+        >
+          {{ projectName }}
+        </p>
       </section>
       <div
         class="chats-contact__infos__additional-information"
@@ -145,7 +145,6 @@ import UnnnicIcon from '../Icon.vue';
 import TransitionRipple from '../TransitionRipple/TransitionRipple.vue';
 import UnnnicI18n from '../../mixins/i18n';
 import Checkbox from '../Checkbox/Checkbox.vue';
-import UnnnicTag from '../Tag/Tag.vue';
 
 import('moment/dist/locale/es.js');
 import('moment/dist/locale/pt-br.js');
@@ -160,7 +159,6 @@ export default {
     UnnnicIcon,
     TransitionRipple,
     Checkbox,
-    UnnnicTag,
   },
 
   mixins: [UnnnicI18n],
@@ -505,6 +503,12 @@ export default {
       display: block;
       flex-shrink: 1;
       border: 1px solid $unnnic-color-neutral-cleanest;
+
+      font: $unnnic-font-caption-1;
+      color: $unnnic-color-fg-emphasized;
+
+      border-radius: $unnnic-radius-4;
+      padding: 1px $unnnic-space-2;
     }
 
     &__media {

package/src/components/Tag/DefaultTag.vue

@@ -1,144 +1,83 @@
 <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;
 
-  &--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;
+
+    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/stories/Tag.stories.js

@@ -1,5 +1,4 @@
 import UnnnicTag from '../components/Tag/Tag.vue';
-import colorsList from '../utils/colorsList';
 
 export default {
   title: 'Data Display/Tag',
@@ -8,13 +7,30 @@ export default {
   argTypes: {
     text: { control: { type: 'text' } },
     type: {
-      control: { type: 'select', options: ['default', 'indicator', 'brand'] },
+      control: 'select',
+      options: ['default', 'brand', 'next'],
     },
     scheme: {
-      control: {
-        type: 'select',
-        options: colorsList,
-      },
+      control: 'select',
+      options: [
+        'green',
+        'blue',
+        'purple',
+        'red',
+        'orange',
+        'yellow',
+        'gray',
+        'teal',
+      ],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium'],
+    },
+    hasCloseIcon: { control: 'boolean' },
+    leftIcon: {
+      control: 'select',
+      options: [null, 'check_circle', 'sentiment_satisfied'],
     },
   },
 };
@@ -34,45 +50,10 @@ export const LeftIcon = {
   },
 };
 
-export const RightIcon = {
+export const Small = {
   args: {
     text: 'Label',
     type: 'default',
-    rightIcon: 'check_circle',
-  },
-};
-
-export const CloseIcon = {
-  args: {
-    text: 'Label',
-    type: 'default',
-    hasCloseIcon: true,
-  },
-};
-
-export const Next = {
-  args: {
-    text: 'Label',
-    type: 'next',
-    scheme: 'weni',
-  },
-};
-
-export const Indicator = {
-  args: {
-    text: 'Tag Name',
-    type: 'indicator',
-    count: 100,
-    clickable: true,
-    hasBackButton: false,
-    enableTooltip: true,
-    tooltipText: 'This is the amount',
-  },
-};
-
-export const Brand = {
-  args: {
-    text: 'Settings',
-    type: 'brand',
+    size: 'small',
   },
 };

package/dist/components/Tag/BrandTag.vue.d.ts

@@ -1,51 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    clickable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {
-    closeClicked(): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    clickable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    text: string;
-    clickable: boolean;
-    disabled: boolean;
-}, {}, {
-    UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        click: (event: Event) => any;
-        mousedown: (event: Event) => any;
-        mouseup: (event: Event) => any;
-    }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
-        onClick?: ((event: Event) => any) | undefined;
-        onMousedown?: ((event: Event) => any) | undefined;
-        onMouseup?: ((event: Event) => any) | undefined;
-    }>, {
-        size: import('../Icon.vue').IconSize;
-        filled: boolean;
-        icon: string | null;
-        clickable: boolean;
-        scheme: import('../Icon.vue').SchemeColor;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=BrandTag.vue.d.ts.map

package/dist/components/Tag/BrandTag.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BrandTag.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/BrandTag.vue"],"names":[],"mappings":"AAiBA;"}

package/dist/components/Tag/IndicatorTag.vue.d.ts

@@ -1,151 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    tooltipText: {
-        type: StringConstructor;
-        default: null;
-    };
-    count: {
-        type: NumberConstructor;
-        default: number;
-    };
-    clickable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hasBackButton: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    enableTooltip: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    text: {
-        type: StringConstructor;
-        default: null;
-    };
-    tooltipText: {
-        type: StringConstructor;
-        default: null;
-    };
-    count: {
-        type: NumberConstructor;
-        default: number;
-    };
-    clickable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hasBackButton: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    enableTooltip: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    text: string;
-    clickable: boolean;
-    tooltipText: string;
-    count: number;
-    hasBackButton: boolean;
-    enableTooltip: boolean;
-}, {}, {
-    UnnnicIcon: import('vue').DefineComponent<import('../Icon.vue').IconProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        click: (event: Event) => any;
-        mousedown: (event: Event) => any;
-        mouseup: (event: Event) => any;
-    }, string, import('vue').PublicProps, Readonly<import('../Icon.vue').IconProps> & Readonly<{
-        onClick?: ((event: Event) => any) | undefined;
-        onMousedown?: ((event: Event) => any) | undefined;
-        onMouseup?: ((event: Event) => any) | undefined;
-    }>, {
-        size: import('../Icon.vue').IconSize;
-        filled: boolean;
-        icon: string | null;
-        clickable: boolean;
-        scheme: import('../Icon.vue').SchemeColor;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-    ToolTip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        text: {
-            type: StringConstructor;
-            default: string;
-        };
-        enabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        forceOpen: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        side: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        maxWidth: {
-            type: StringConstructor;
-            default: string;
-        };
-        shortcutText: {
-            type: StringConstructor;
-            default: null;
-        };
-        enableHtml: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>, {}, {
-        topPos: null;
-        leftPos: null;
-    }, {}, {
-        handleResize(): void;
-        getRightPost(element: any): void;
-    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        text: {
-            type: StringConstructor;
-            default: string;
-        };
-        enabled: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        forceOpen: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        side: {
-            type: StringConstructor;
-            default: string;
-            validator(value: unknown): boolean;
-        };
-        maxWidth: {
-            type: StringConstructor;
-            default: string;
-        };
-        shortcutText: {
-            type: StringConstructor;
-            default: null;
-        };
-        enableHtml: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, {
-        text: string;
-        enabled: boolean;
-        forceOpen: boolean;
-        side: string;
-        maxWidth: string;
-        shortcutText: string;
-        enableHtml: boolean;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;
-//# sourceMappingURL=IndicatorTag.vue.d.ts.map

package/dist/components/Tag/IndicatorTag.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IndicatorTag.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/IndicatorTag.vue"],"names":[],"mappings":"AAsBA;"}