@weni/unnnic-system 3.9.3-alpha.0 → 3.9.3

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,8 +4,7 @@
     :size="size"
     :disabled="disabled"
     :message="message"
-    :tooltip="tooltip"
-    :error="computedError"
+    :error="errors.join(', ') || type === 'error'"
   >
     <textarea
       ref="textarea"
@@ -19,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>
 
@@ -45,14 +43,6 @@ export default {
       default: 'md',
     },
 
-    resize: {
-      type: String,
-      default: 'vertical',
-      validator(value) {
-        return ['none', 'vertical'].indexOf(value) !== -1;
-      },
-    },
-
     label: {
       type: String,
     },
@@ -86,28 +76,13 @@ export default {
       },
     },
 
-    tooltip: {
-      type: String,
-      default: '',
-    },
-
     errors: {
-      type: [Array, null],
+      type: Array,
       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() {
@@ -121,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 {

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

@@ -2,16 +2,8 @@
 
 exports[`TextArea.vue > matches the snapshot 1`] = `
 "<section data-v-9f8d6c86="" data-v-735b3c51="" class="unnnic-form-element">
-  <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>
+  <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>"
 `;

package/src/components/index.ts

@@ -25,7 +25,6 @@ import cardImage from './CardImage/CardImage.vue';
 import cardProject from './CardProject/CardProject.vue';
 import cardInformation from './CardInformation/CardInformation.vue';
 import checkbox from './Checkbox/Checkbox.vue';
-import checkboxGroup from './CheckboxGroup/CheckboxGroup.vue';
 import collapse from './Collapse/Collapse.vue';
 import radio from './Radio/Radio.vue';
 import languageSelect from './Dropdown/LanguageSelect.vue';
@@ -91,19 +90,16 @@ import Navigator from './Navigator/index.vue';
 import SelectTime from './SelectTime/index.vue';
 import DataTable from './DataTable/index.vue';
 import Chip from './Chip/Chip.vue';
-import Toast from './Toast/Toast.vue';
-import { toast } from './Toast/ToastManager';
+import Tabs from './ui/tabs/Tabs.vue';
+import TabsList from './ui/tabs/TabsList.vue';
+import TabsTrigger from './ui/tabs/TabsTrigger.vue';
+import TabsContent from './ui/tabs/TabsContent.vue';
 import Popover from './ui/popover/Popover.vue';
 import PopoverContent from './ui/popover/PopoverContent.vue';
 import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
 import PopoverFooter from './ui/popover/PopoverFooter.vue';
 import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
 import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
-import Tabs from './ui/tabs/Tabs.vue';
-import TabsList from './ui/tabs/TabsList.vue';
-import TabsTrigger from './ui/tabs/TabsTrigger.vue';
-import TabsContent from './ui/tabs/TabsContent.vue';
-import PageHeader from './PageHeader/PageHeader.vue';
 
 type VueComponent = Component;
 
@@ -138,7 +134,6 @@ export const components: ComponentsMap = {
   unnnicCardProject: cardProject,
   unnnicCardInformation: cardInformation,
   unnnicCheckbox: checkbox,
-  unnnicCheckboxGroup: checkboxGroup,
   unnnicCollapse: collapse,
   unnnicRadio: radio,
   unnnicLanguageSelect: languageSelect,
@@ -207,16 +202,13 @@ export const components: ComponentsMap = {
   unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
-  unnnicToast: Toast,
-  unnnicToastManager: toast,
-  unnnicPopover: Popover,
-  unnnicPopoverContent: PopoverContent,
-  unnnicPopoverTrigger: PopoverTrigger,
   unnnicTabs: Tabs,
   unnnicTabsList: TabsList,
   unnnicTabsTrigger: TabsTrigger,
   unnnicTabsContent: TabsContent,
-  unnnicPageHeader: PageHeader,
+  unnnicPopover: Popover,
+  unnnicPopoverContent: PopoverContent,
+  unnnicPopoverTrigger: PopoverTrigger,
 };
 
 export const unnnicFontSize = fontSize;
@@ -246,7 +238,6 @@ export const unnnicCardImage = cardImage as VueComponent;
 export const unnnicCardProject = cardProject as VueComponent;
 export const unnnicCardInformation = cardInformation;
 export const unnnicCheckbox = checkbox;
-export const unnnicCheckboxGroup = checkboxGroup;
 export const unnnicCollapse = collapse;
 export const unnnicRadio = radio;
 export const unnniclanguageSelect = languageSelect as VueComponent;
@@ -269,7 +260,7 @@ export const unnnicAccordion = accordion;
 export const unnnicIndicator = indicator;
 export const unnnicSkeletonLoading = skeletonLoading;
 export const unnnicCarousel = carousel;
-export const unnnicLabel = label as VueComponent;
+export const unnnicLabel = label;
 export const unnnicTab = tab;
 export const unnnicTabsExpanded = tabsExpanded;
 export const unnnicBanner = banner;
@@ -313,21 +304,19 @@ export const unnnicNavigator = Navigator;
 export const unnnicDataTable = DataTable as VueComponent;
 export const unnnicSelectTime = SelectTime as VueComponent;
 export const unnnicChip = Chip;
-export const unnnicToast = Toast;
-export const unnnicToastManager = toast;
+export const unnnicTabs = Tabs;
+export const unnnicTabsList = TabsList;
+export const unnnicTabsTrigger = TabsTrigger;
+export const unnnicTabsContent = TabsContent;
 export const unnnicPopover = Popover;
 export const unnnicPopoverContent = PopoverContent;
 export const unnnicPopoverTrigger = PopoverTrigger;
 export const unnnicPopoverFooter = PopoverFooter;
 export const unnnicTemplatePreview = TemplatePreview as VueComponent;
 export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
-export const unnnicTabs = Tabs;
-export const unnnicTabsList = TabsList;
-export const unnnicTabsTrigger = TabsTrigger;
-export const unnnicTabsContent = TabsContent;
-export const unnnicPageHeader = PageHeader;
 
 export const UnnnicFontSize = fontSize;
+export const UnnnicFormElement = formElement;
 export const UnnnicInput = input;
 export const UnnnicInputNext = inputNext;
 export const UnnnicInputDatePicker = inputDatePicker;
@@ -353,7 +342,6 @@ export const UnnnicCardImage = cardImage as VueComponent;
 export const UnnnicCardProject = cardProject as VueComponent;
 export const UnnnicCardInformation = cardInformation;
 export const UnnnicCheckbox = checkbox;
-export const UnnnicCheckboxGroup = checkboxGroup;
 export const UnnnicCollapse = collapse;
 export const UnnnicRadio = radio;
 export const UnnniclanguageSelect = languageSelect as VueComponent;
@@ -376,7 +364,7 @@ export const UnnnicAccordion = accordion;
 export const UnnnicIndicator = indicator;
 export const UnnnicSkeletonLoading = skeletonLoading;
 export const UnnnicCarousel = carousel;
-export const UnnnicLabel = label as VueComponent;
+export const UnnnicLabel = label;
 export const UnnnicTab = tab;
 export const UnnnicTabsExpanded = tabsExpanded;
 export const UnnnicBanner = banner;
@@ -420,16 +408,13 @@ export const UnnnicNavigator = Navigator;
 export const UnnnicDataTable = DataTable as VueComponent;
 export const UnnnicSelectTime = SelectTime as VueComponent;
 export const UnnnicChip = Chip;
-export const UnnnicToast = Toast;
-export const UnnnicToastManager = toast;
+export const UnnnicTabs = Tabs;
+export const UnnnicTabsList = TabsList;
+export const UnnnicTabsTrigger = TabsTrigger;
+export const UnnnicTabsContent = TabsContent;
 export const UnnnicPopover = Popover;
 export const UnnnicPopoverContent = PopoverContent;
 export const UnnnicPopoverTrigger = PopoverTrigger;
 export const UnnnicPopoverFooter = PopoverFooter;
 export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
 export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
-export const UnnnicTabs = Tabs;
-export const UnnnicTabsList = TabsList;
-export const UnnnicTabsTrigger = TabsTrigger;
-export const UnnnicTabsContent = TabsContent;
-export const UnnnicPageHeader = PageHeader;

package/src/locales/en.json

@@ -41,6 +41,5 @@
       "flags": "Flags",
       "custom": "Custom"
     }
-  },
-  "search": "Search"
+  }
 }

package/src/locales/es.json

@@ -41,6 +41,5 @@
       "flags": "Banderas",
       "custom": "Personalizados"
     }
-  },
-  "search": "Buscar"
+  }
 }

package/src/locales/pt_br.json

@@ -41,6 +41,5 @@
       "flags": "Bandeiras",
       "custom": "Personalizados"
     }
-  },
-  "search": "Buscar"
+  }
 }