@weni/unnnic-system 3.7.1-alpha.3 → 3.8.0

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';
@@ -89,23 +88,14 @@ import ModalDialog from './ModalDialog/ModalDialog.vue';
 import Tour from './Tour/Tour.vue';
 import Navigator from './Navigator/index.vue';
 import SelectTime from './SelectTime/index.vue';
-import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
-import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.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 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 Dialog from './ui/dialog/Dialog.vue';
-import DialogContent from './ui/dialog/DialogContent.vue';
-import DialogFooter from './ui/dialog/DialogFooter.vue';
-import DialogHeader from './ui/dialog/DialogHeader.vue';
-import DialogTitle from './ui/dialog/DialogTitle.vue';
-import DialogTrigger from './ui/dialog/DialogTrigger.vue';
-import DialogClose from './ui/dialog/DialogClose.vue';
+import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
+import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
 
 type VueComponent = Component;
 
@@ -140,7 +130,6 @@ export const components: ComponentsMap = {
   unnnicCardProject: cardProject,
   unnnicCardInformation: cardInformation,
   unnnicCheckbox: checkbox,
-  unnnicCheckboxGroup: checkboxGroup,
   unnnicCollapse: collapse,
   unnnicRadio: radio,
   unnnicLanguageSelect: languageSelect,
@@ -209,18 +198,9 @@ export const components: ComponentsMap = {
   unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
-  unnnicToast: Toast,
-  unnnicToastManager: toast,
   unnnicPopover: Popover,
   unnnicPopoverContent: PopoverContent,
   unnnicPopoverTrigger: PopoverTrigger,
-  unnnicDialog: Dialog,
-  unnnicDialogContent: DialogContent,
-  unnnicDialogFooter: DialogFooter,
-  unnnicDialogHeader: DialogHeader,
-  unnnicDialogTitle: DialogTitle,
-  unnnicDialogTrigger: DialogTrigger,
-  unnnicDialogClose: DialogClose,
 };
 
 export const unnnicFontSize = fontSize;
@@ -250,7 +230,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;
@@ -273,7 +252,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;
@@ -314,24 +293,18 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
-export const unnnicSelectTime = SelectTime as VueComponent;
-export const unnnicTemplatePreview = TemplatePreview as VueComponent;
-export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 export const unnnicDataTable = DataTable as VueComponent;
+export const unnnicSelectTime = SelectTime as VueComponent;
 export const unnnicChip = Chip;
 export const unnnicPopover = Popover;
 export const unnnicPopoverContent = PopoverContent;
 export const unnnicPopoverTrigger = PopoverTrigger;
 export const unnnicPopoverFooter = PopoverFooter;
-export const unnnicDialog = Dialog;
-export const unnnicDialogContent = DialogContent;
-export const unnnicDialogFooter = DialogFooter;
-export const unnnicDialogHeader = DialogHeader;
-export const unnnicDialogTitle = DialogTitle;
-export const unnnicDialogTrigger = DialogTrigger;
-export const unnnicDialogClose = DialogClose;
+export const unnnicTemplatePreview = TemplatePreview as VueComponent;
+export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 
 export const UnnnicFontSize = fontSize;
+export const UnnnicFormElement = formElement;
 export const UnnnicInput = input;
 export const UnnnicInputNext = inputNext;
 export const UnnnicInputDatePicker = inputDatePicker;
@@ -357,7 +330,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;
@@ -380,7 +352,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;
@@ -421,21 +393,12 @@ export const UnnnicDrawer = Drawer;
 export const UnnnicTableNext = TableNext;
 export const UnnnicTour = Tour;
 export const UnnnicNavigator = Navigator;
-export const UnnnicSelectTime = SelectTime as VueComponent;
-export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
-export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 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 UnnnicPopover = Popover;
 export const UnnnicPopoverContent = PopoverContent;
 export const UnnnicPopoverTrigger = PopoverTrigger;
 export const UnnnicPopoverFooter = PopoverFooter;
-export const UnnnicDialog = Dialog;
-export const UnnnicDialogContent = DialogContent;
-export const UnnnicDialogFooter = DialogFooter;
-export const UnnnicDialogHeader = DialogHeader;
-export const UnnnicDialogTitle = DialogTitle;
-export const UnnnicDialogTrigger = DialogTrigger;
-export const UnnnicDialogClose = DialogClose;
+export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
+export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;

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"
+  }
 }

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,
+  },
+};

package/src/stories/Button.stories.js

@@ -8,7 +8,7 @@ export default {
       description: {
         component: `Allows users to perform an action or navigate to another page. 
           It has styles for various needs and are ideal for directing the user's attention. 
-          It is divided into 5 types: Primary, Secondary, Tertiary, Warning, Attention.
+          It is divided into 6 types: Primary, Secondary, Tertiary, Alternative, Warning, Attention.
           Each of these types has its states.
           <br/>
           <br/>
@@ -36,7 +36,14 @@ export default {
   argTypes: {
     type: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'tertiary', 'warning', 'attention'],
+      options: [
+        'primary',
+        'secondary',
+        'tertiary',
+        'alternative',
+        'warning',
+        'attention',
+      ],
     },
     size: {
       control: { type: 'select' },
@@ -68,71 +75,74 @@ export default {
 
 export const Primary = {
   args: {
-    text: 'Text',
+    text: 'Button Text',
   },
 };
 
 export const Secondary = {
   args: {
     type: 'secondary',
-    text: 'Text',
+    text: 'Button Text',
   },
 };
 
 export const Tertiary = {
   args: {
     type: 'tertiary',
-    text: 'Text',
+    text: 'Button Text',
   },
 };
 
-export const Warning = {
-  parameters: {
-    docs: {
-      description: {
-        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
-        For example: Deleting an element.`,
-      },
-    },
-  },
+export const WithIcon = {
   args: {
-    type: 'warning',
-    text: 'Text',
+    text: 'Button Text',
+    iconLeft: 'add',
   },
 };
 
-export const Attention = {
+export const FilledIcon = {
   args: {
-    type: 'attention',
-    text: 'Text',
+    text: 'Button Text',
+    iconLeft: 'play_arrow',
+    iconsFilled: true,
   },
 };
 
-export const Loading = {
+export const OnlyIcon = {
   args: {
-    loading: true,
-    text: 'Text',
+    iconCenter: 'add',
   },
 };
 
-export const WithIcon = {
+export const Alternative = {
   args: {
-    text: 'Text',
+    type: 'alternative',
     iconLeft: 'add',
+    text: 'Text',
   },
 };
 
-export const FilledIcon = {
+export const Warning = {
+  parameters: {
+    docs: {
+      description: {
+        story: `This variation aims to highlight actions that could be destructive or have negative consequences if taken. 
+        For example: Deleting an element.`,
+      },
+    },
+  },
   args: {
+    type: 'warning',
+    iconLeft: 'add',
     text: 'Text',
-    iconLeft: 'play_arrow',
-    iconsFilled: true,
   },
 };
 
-export const OnlyIcon = {
+export const Attention = {
   args: {
-    iconCenter: 'add',
+    type: 'attention',
+    iconLeft: 'add',
+    text: 'Text',
   },
 };
 

package/src/stories/Checkbox.stories.js

@@ -15,12 +15,12 @@ export default {
       },
     },
   },
-  args: { disabled: false },
+  args: { disabled: false, size: 'md' },
   argTypes: {
     modelValue: { control: 'inline-radio', options: [true, false, 'less'] },
     disabled: { control: 'boolean' },
-    label: { control: 'text' },
-    helper: { control: 'text' },
+    size: { control: 'select', options: ['md', 'sm'] },
+    textRight: { control: 'text' },
   },
   render: (args) => ({
     components: {
@@ -34,7 +34,6 @@ export default {
       return { args, updateModelValue };
     },
     template: `
-      <pre>v-model: {{ args.modelValue }}</pre>
       <UnnnicCheckbox v-bind="args" @update:modelValue="updateModelValue"/>
     `,
   }),
@@ -43,22 +42,18 @@ export default {
 export const Default = {
   args: {
     modelValue: false,
-    label: 'Label',
-    helper: 'Helper',
   },
 };
 
 export const Selected = {
   args: {
     modelValue: true,
-    label: 'Label',
   },
 };
 
-export const Less = {
+export const LessSelected = {
   args: {
     modelValue: 'less',
-    label: 'Label',
   },
 };
 
@@ -66,7 +61,6 @@ export const Disabled = {
   args: {
     modelValue: false,
     disabled: true,
-    label: 'Label',
   },
 };
 
@@ -74,6 +68,5 @@ export const DisabledSelected = {
   args: {
     modelValue: true,
     disabled: true,
-    label: 'Label',
   },
 };