@weni/unnnic-system 3.9.1-alpha.4 → 3.9.2

package/src/components/Tab/Tab.vue

@@ -9,7 +9,6 @@
           class="tab-head"
           :class="{
             'tab-head--active': localValue === tab,
-            'tab-head--disabled': disabledTabs?.includes(tab),
           }"
           @click="change(tab)"
         >
@@ -21,9 +20,10 @@
             side="bottom"
           >
             <UnnnicIcon
-              icon="help"
+              icon="info"
               :size="size === 'sm' ? 'xs' : 'sm'"
-              scheme="fg-base"
+              filled
+              scheme="neutral-cleanest"
             />
           </UnnnicToolTip>
         </li>
@@ -65,13 +65,6 @@ export default {
     tabs: {
       type: Array,
       default: null,
-      validator: (tabs) => {
-        return tabs.every((tab) => typeof tab === 'string') && tabs.length <= 5;
-      },
-    },
-    disabledTabs: {
-      type: Array,
-      default: null,
     },
   },
   emits: ['change'],
@@ -112,10 +105,6 @@ export default {
       return '';
     },
     change(value) {
-      if (this.disabledTabs?.includes(value)) {
-        return;
-      }
-
       this.localValue = value;
       this.$emit('change', this.localValue);
     },
@@ -130,15 +119,18 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  color: $unnnic-color-fg-base;
-  font: $unnnic-font-action;
-  margin-bottom: $unnnic-space-4;
-  border-bottom: $unnnic-border-width-thinner solid $unnnic-color-border-base;
+  color: $unnnic-color-neutral-cloudy;
+  font-family: $unnnic-font-family-secondary;
+  font-weight: $unnnic-font-weight-bold;
+  font-size: $unnnic-font-size-body-lg;
+  line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
+  margin-bottom: $unnnic-inset-sm;
+  border-bottom: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
 }
 
 .tab-content {
   display: flex;
-  gap: $unnnic-space-6;
+  gap: $unnnic-spacing-sm;
 
   margin: 0;
   padding: 0;
@@ -147,24 +139,27 @@ export default {
 
 .tab-head {
   display: flex;
-  gap: $unnnic-space-2;
+  gap: $unnnic-spacing-xs;
   align-items: center;
 
   cursor: pointer;
-  padding: $unnnic-space-2 $unnnic-space-4;
+  margin: $unnnic-spacing-xs $unnnic-spacing-sm;
 
   .unnnic-tooltip {
     display: flex;
   }
 
   &:hover {
-    color: $unnnic-color-fg-emphasized;
+    color: $unnnic-color-neutral-black;
   }
 }
 
 .tab-head--active {
-  color: $unnnic-color-fg-emphasized;
-  font: $unnnic-font-action;
+  font-family: $unnnic-font-family-secondary;
+  font-weight: $unnnic-font-weight-bold;
+  color: $unnnic-color-neutral-black;
+  font-size: $unnnic-font-size-body-lg;
+  line-height: ($unnnic-font-size-body-lg + $unnnic-line-height-medium);
   transition: 0.4s;
 
   position: relative;
@@ -173,23 +168,14 @@ export default {
     content: '';
 
     position: absolute;
-    bottom: 0;
-    left: 0;
+    bottom: -$unnnic-spacing-xs;
+    left: -$unnnic-spacing-sm;
 
     display: block;
 
-    width: 100%;
+    width: calc(100% + (#{$unnnic-spacing-sm} * 2));
 
-    border-bottom: $unnnic-border-width-thin solid $unnnic-color-border-active;
-  }
-}
-
-.tab-head--disabled {
-  color: $unnnic-color-fg-muted;
-  cursor: default;
-
-  &:hover {
-    color: $unnnic-color-fg-muted;
+    border-bottom: $unnnic-border-width-thin solid $unnnic-color-weni-600;
   }
 }
 

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

@@ -4,7 +4,7 @@ exports[`Tab.vue > matches the snapshot 1`] = `
 "<div data-v-b4e39fac="" class="tab size-md">
   <header data-v-b4e39fac="" class="tab-header">
     <ul data-v-b4e39fac="" class="tab-content">
-      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no">help</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
+      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-bf0cf546="" data-v-b4e39fac="" class="unnnic-tooltip"><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-cleanest unnnic-icon-size--sm unnnic-icon__size--sm material-symbols-rounded--filled" data-testid="material-icon" translate="no">info</span><span data-v-bf0cf546="" class="unnnic-tooltip-label unnnic-tooltip-label-bottom" data-testid="tooltip-label" style="left: 0px; top: 8px;">Tooltip text <br data-v-bf0cf546=""><!--v-if--></span></div>
       </li>
       <li data-v-b4e39fac="" class="tab-head tab-head--active">tab2
         <!--v-if-->

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

@@ -42,7 +42,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
     <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 1 of 1</p>
     <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
         <!--v-if-->
@@ -51,7 +51,7 @@ exports[`TableNext.vue > matches the snapshot 1`] = `
         <!--v-if-->
       </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
         <!--v-if-->
-        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+        <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
         <!--v-if-->
       </button></div>
   </section>

package/src/components/TableNext/__test__/__snapshots__/TablePagination.spec.js.snap

@@ -5,7 +5,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
   <p data-v-e29458bb="" class="table-pagination__count" data-testid="count">1 - 10 of 100</p>
   <div data-v-0eeff8cb="" data-v-e29458bb="" class="pagination"><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="previous-button" disabled="" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-clean unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_left</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="page-button" class="unnnic-button unnnic-button--size-small unnnic-button--secondary">
       <!--v-if-->
@@ -34,7 +34,7 @@ exports[`TablePagination.vue > matches the snapshot 1`] = `
       <!--v-if-->
     </button><button data-v-ceff2a60="" data-v-0eeff8cb="" data-test="next-button" class="unnnic-button unnnic-button--size-small unnnic-button--tertiary unnnic-button--icon-on-center">
       <!--v-if-->
-      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
+      <!--v-if--><span data-v-26446d8e="" data-v-ceff2a60="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="icon-center" translate="no" style="visibility: visible;">chevron_right</span><span data-v-ceff2a60="" class="unnnic-button__label" style="visibility: visible;" data-testid="button-label"> </span>
       <!--v-if-->
     </button></div>
 </section>"

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,88 +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;
-  width: fit-content;
+  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;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    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>