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

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,11 +76,6 @@ export default {
       },
     },
 
-    tooltip: {
-      type: String,
-      default: '',
-    },
-
     errors: {
       type: Array,
       default: () => [],
@@ -98,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() {
@@ -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/stories/Alert.stories.js

@@ -1,5 +1,7 @@
+import AlertCaller from '../components/Alert/AlertCaller.vue';
 import alert from '../utils/call';
 import UnnnicAlert from '../components/Alert/Alert.vue';
+import AlertBanner from '../components/Alert/AlertBanner.vue';
 
 export default {
   title: 'Feedback/Alert',
@@ -18,6 +20,9 @@ export default {
   args: {
     type: 'default',
     text: 'Text',
+    linkHref: '',
+    linkText: '',
+    linkTarget: '',
   },
   argTypes: {
     type: {
@@ -32,15 +37,42 @@ export default {
         type: 'text',
       },
     },
-    version: {
+
+    linkHref: {
       control: {
-        type: 'select',
+        type: 'text',
+      },
+    },
+
+    linkText: {
+      control: {
+        type: 'text',
+      },
+    },
+
+    linkTarget: {
+      control: {
+        type: 'text',
       },
-      options: ['1.1', '2.0'],
+    },
+    position: {
+      if: { arg: 'version' },
+    },
+    version: {
+      control: false,
     },
     title: {
       if: { arg: 'version' },
     },
+    icon: {
+      if: { arg: 'version' },
+    },
+    closeText: {
+      if: { arg: 'version' },
+    },
+    scheme: {
+      if: { arg: 'version' },
+    },
   },
 };
 
@@ -63,7 +95,7 @@ export const Normal = {
     },
   },
   render: (args) => ({
-    components: { UnnnicAlert },
+    components: { AlertCaller, UnnnicAlert },
     setup() {
       return { args };
     },
@@ -85,7 +117,7 @@ export const Normal = {
 
 export const InlineComponent = {
   render: (args) => ({
-    components: { UnnnicAlert },
+    components: { AlertCaller, UnnnicAlert },
     setup() {
       return { args };
     },
@@ -134,7 +166,7 @@ export const WithContainerRef = {
     },
   },
   render: (args) => ({
-    components: { UnnnicAlert },
+    components: { AlertCaller, UnnnicAlert },
     setup() {
       return { args };
     },
@@ -158,3 +190,32 @@ export const WithContainerRef = {
     scheme: 'feedback-green',
   },
 };
+
+export const Banner = {
+  parameters: {
+    docs: {
+      description: {
+        story: `This variation has the additional prop ${'`showCloseButton`'}, false by default.`,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { AlertBanner },
+    setup() {
+      return { args };
+    },
+    methods: {
+      unnnicCallAlert() {
+        alert.callAlert({
+          props: this.args,
+          containerRef: this.$refs.divContainer,
+        });
+      },
+    },
+    template: '<alert-banner v-bind="args" />',
+  }),
+  args: {
+    text: 'Text',
+    showCloseButton: false,
+  },
+};