@weni/unnnic-system 3.4.1-alpha.2 → 3.5.1-alpha.0

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,12 +88,10 @@ 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 TemplatePreview from './TemplatePreview/TemplatePreview.vue';
+import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
 import Popover from './ui/popover/Popover.vue';
 import PopoverContent from './ui/popover/PopoverContent.vue';
 import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
@@ -132,7 +129,6 @@ export const components: ComponentsMap = {
   unnnicCardProject: cardProject,
   unnnicCardInformation: cardInformation,
   unnnicCheckbox: checkbox,
-  unnnicCheckboxGroup: checkboxGroup,
   unnnicCollapse: collapse,
   unnnicRadio: radio,
   unnnicLanguageSelect: languageSelect,
@@ -201,8 +197,6 @@ export const components: ComponentsMap = {
   unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
-  unnnicToast: Toast,
-  unnnicToastManager: toast,
   unnnicPopover: Popover,
   unnnicPopoverContent: PopoverContent,
   unnnicPopoverTrigger: PopoverTrigger,
@@ -235,7 +229,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;
@@ -258,7 +251,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;
@@ -299,11 +292,11 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
+export const unnnicDataTable = DataTable as VueComponent;
 export const unnnicSelectTime = SelectTime as VueComponent;
+export const unnnicChip = Chip;
 export const unnnicTemplatePreview = TemplatePreview as VueComponent;
 export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
-export const unnnicDataTable = DataTable as VueComponent;
-export const unnnicChip = Chip;
 export const unnnicPopover = Popover;
 export const unnnicPopoverContent = PopoverContent;
 export const unnnicPopoverTrigger = PopoverTrigger;
@@ -335,7 +328,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;
@@ -358,7 +350,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;
@@ -399,13 +391,11 @@ export const UnnnicDrawer = Drawer;
 export const UnnnicTableNext = TableNext;
 export const UnnnicTour = Tour;
 export const UnnnicNavigator = Navigator;
+export const UnnnicDataTable = DataTable as VueComponent;
 export const UnnnicSelectTime = SelectTime as VueComponent;
+export const UnnnicChip = Chip;
 export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
 export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
-export const UnnnicDataTable = DataTable 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;

package/src/components/ui/popover/Popover.vue

@@ -2,6 +2,10 @@
 import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
 import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
 
+defineOptions({
+  name: 'UnnnicPopover',
+});
+
 const props = defineProps<PopoverRootProps>();
 const emits = defineEmits<PopoverRootEmits>();
 

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/AvatarIcon.stories.js

@@ -1,7 +1,6 @@
 import AvatarIcon from '../components/AvatarIcon/AvatarIcon.vue';
-import icons from '../utils/icons';
 
-const iconsOptions = Object.keys(icons);
+const iconsOptions = [];
 
 const schemes = [
   'feedback-red',

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' },
@@ -107,6 +114,14 @@ export const OnlyIcon = {
   },
 };
 
+export const Alternative = {
+  args: {
+    type: 'alternative',
+    iconLeft: 'add',
+    text: 'Text',
+  },
+};
+
 export const Warning = {
   parameters: {
     docs: {

package/src/stories/ButtonIcon.stories.js

@@ -1,7 +1,6 @@
 import UnnnicButtonIcon from '../components/Button/ButtonIcon.vue';
-import icons from '../utils/icons';
 
-const iconsOptions = Object.keys(icons);
+const iconsOptions = ['add'];
 
 export default {
   title: 'Form/ButtonIcon',

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] },
+    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: {
@@ -42,15 +42,18 @@ export default {
 export const Default = {
   args: {
     modelValue: false,
-    label: 'Label',
-    helper: 'Helper',
   },
 };
 
 export const Selected = {
   args: {
     modelValue: true,
-    label: 'Label',
+  },
+};
+
+export const LessSelected = {
+  args: {
+    modelValue: 'less',
   },
 };
 
@@ -58,7 +61,6 @@ export const Disabled = {
   args: {
     modelValue: false,
     disabled: true,
-    label: 'Label',
   },
 };
 
@@ -66,6 +68,5 @@ export const DisabledSelected = {
   args: {
     modelValue: true,
     disabled: true,
-    label: 'Label',
   },
 };

package/src/stories/Icon.stories.js

@@ -1,7 +1,6 @@
 import UnnnicIcon from '../components/Icon.vue';
-import icons from '../utils/icons';
 
-const iconsOptions = Object.keys(icons);
+const iconsOptions = ['add', 'add-1', 'warning', 'bi:stars'];
 
 const schemes = [
   'background-solo',
@@ -94,27 +93,27 @@ const schemes = [
 ];
 
 export default {
-  title: 'example/Icon',
+  title: 'Misc/Icon',
   component: UnnnicIcon,
   argTypes: {
-    scheme: { control: { type: 'select', options: schemes } },
+    scheme: { control: { type: 'select' }, options: schemes },
     size: {
       control: {
         type: 'select',
-        options: [
-          'nano',
-          'xs',
-          'sm',
-          'md',
-          'lg',
-          'avatar-lg',
-          'avatar-md',
-          'avatar-sm',
-          'avatar-xs',
-          'avatar-nano',
-        ],
       },
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'avatar-lg',
+        'avatar-md',
+        'avatar-sm',
+        'avatar-xs',
+        'avatar-nano',
+      ],
     },
+    icon: { control: { type: 'select' }, options: iconsOptions },
   },
 };
 

package/src/stories/Input.stories.js

@@ -35,7 +35,9 @@ export default {
       },
     },
     template: `
-        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" label="Label" />
+      <unnnic-form-element label="Label" message="Helper text">
+        <unnnic-input v-model="value" @icon-right-click="click" v-bind="args" />
+      </unnnic-form-element>
     `,
   }),
 };
@@ -155,18 +157,3 @@ export const Mask = {
     mask: ['###.###.###-##', '##.###.###/####-##'],
   },
 };
-
-export const LimitMaxLength = {
-  args: {
-    placeholder: 'Text',
-    maxlength: 10,
-    showMaxlengthCounter: true,
-  },
-};
-
-export const WithTooltip = {
-  args: {
-    placeholder: 'Text',
-    tooltip: 'Tooltip',
-  },
-};

package/src/stories/InputNext.stories.js

@@ -1,8 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import UnnnicInputNext from '../components/InputNext/InputNext.vue';
-import icons from '../utils/icons';
 
-const iconsOptions = Object.keys(icons);
+const iconsOptions = [];
 
 export default {
   title: 'Form/InputNext',

package/src/stories/Label.stories.js

@@ -13,10 +13,3 @@ export const Default = {
     label: 'Label',
   },
 };
-
-export const WithTooltip = {
-  args: {
-    label: 'Label',
-    tooltip: 'Tooltip',
-  },
-};

package/src/stories/ModalNext.stories.js

@@ -1,9 +1,8 @@
 import unnnicModalNext from '../components/ModalNext/ModalNext.vue';
-import icons from '../utils/icons';
 
 import { action } from '@storybook/addon-actions';
 
-const iconsOptions = Object.keys(icons);
+const iconsOptions = [];
 
 const schemesOptions = [
   'feedback-red',

package/src/stories/Switch.stories.js

@@ -4,8 +4,9 @@ export default {
   title: 'Form/Switch',
   component: UnnnicSwitch,
   argTypes: {
-    label: { control: { type: 'text' } },
-    helper: { control: { type: 'text' } },
+    size: { control: { type: 'select', options: ['small', 'medium'] } },
+    textLeft: { control: { type: 'text' } },
+    textRight: { control: { type: 'text' } },
     disabled: { control: { type: 'boolean' } },
   },
   render: (args) => ({
@@ -31,8 +32,8 @@ export default {
 
 export const Default = {
   args: {
-    label: 'Default',
-    helper: 'Helper text',
+    size: 'medium',
+    textRight: 'Default',
     disabled: false,
   },
 };

package/src/stories/Tab.stories.js

@@ -3,6 +3,9 @@ import unnnicTab from '../components/Tab/Tab.vue';
 export default {
   title: 'tabs/Tab',
   component: unnnicTab,
+  argTypes: {
+    size: { control: { type: 'select', options: ['md', 'sm'] } },
+  },
   render: (args) => ({
     components: {
       unnnicTab,
@@ -33,15 +36,6 @@ export default {
             Second description
           </p>
         </template>
-        <template #tab-head-third>
-          Third
-        </template>
-        <template #tab-panel-third>
-          <h2 class="title">Third Content</h2>
-          <p class="description">
-            Third description
-          </p>
-        </template>
       </unnnic-tab>
     `,
   }),
@@ -50,7 +44,6 @@ export default {
 export const Default = {
   args: {
     initialTab: 'first',
-    tabs: ['first', 'second', 'third'],
-    disabledTabs: ['third'],
+    tabs: ['first', 'second'],
   },
 };

package/src/stories/TemplatePreview.stories.js

@@ -1,8 +1,8 @@
-import UnnnicTemplatePreview from '../components/TemplatePreview/TemplatePreview.vue';
+import UnnnicTemplatePreview from "../components/TemplatePreview/TemplatePreview.vue";
 
 export default {
-  title: 'example/TemplatePreview',
-  tags: ['autodocs'],
+  title: "example/TemplatePreview",
+  tags: ["autodocs"],
   component: UnnnicTemplatePreview,
 };
 
@@ -17,28 +17,28 @@ const Template = (args) => ({
 });
 
 const bodyText =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.';
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sem orci, ultrices id lectus non, vehicula suscipit libero. Ut vehicula libero a tempus fringilla. Nam tincidunt vestibulum maximus. Morbi vel pretium risus. Curabitur id quam lectus. Quisque dolor elit, auctor a lacus non, rutrum ullamcorper mi. Nulla et turpis sed eros pharetra ullamcorper fermentum ac nisl. Donec lacinia hendrerit tellus, sit amet suscipit velit vestibulum sed. Praesent gravida posuere metus, ut fringilla dolor euismod vel. Aenean vel ipsum magna. Integer metus mi, fermentum ut nulla at, facilisis lobortis metus. Ut vitae tortor posuere, dapibus leo quis, finibus neque.";
 
 export const Default = Template.bind({});
 Default.args = {
   template: {
     header: {
-      type: 'TEXT',
-      text: 'Hello, world!',
+      type: "TEXT",
+      text: "Hello, world!",
     },
-    footer: 'Weni by VTEX',
+    footer: "Weni by VTEX",
     buttons: [
       {
-        text: 'Button 1',
-        type: 'PHONE_NUMBER',
+        text: "Button 1",
+        type: "PHONE_NUMBER",
       },
       {
-        text: 'Button 2',
-        type: 'URL',
+        text: "Button 2",
+        type: "URL",
       },
       {
-        text: 'Button 3',
-        type: 'QUICK_REPLY',
+        text: "Button 3",
+        type: "QUICK_REPLY",
       },
     ],
     body: bodyText,
@@ -49,10 +49,10 @@ export const Image = Template.bind({});
 Image.args = {
   template: {
     header: {
-      type: 'MEDIA',
-      mediaType: 'IMAGE',
+      type: "MEDIA",
+      mediaType: "IMAGE",
     },
-    footer: 'Weni by VTEX',
+    footer: "Weni by VTEX",
     body: bodyText,
   },
 };
@@ -61,21 +61,21 @@ export const Video = Template.bind({});
 Video.args = {
   template: {
     header: {
-      type: 'MEDIA',
-      mediaType: 'VIDEO',
+      type: "MEDIA",
+      mediaType: "VIDEO",
     },
     buttons: [
       {
-        text: 'Button 1',
-        type: 'PHONE_NUMBER',
+        text: "Button 1",
+        type: "PHONE_NUMBER",
       },
       {
-        text: 'Button 2',
-        type: 'URL',
+        text: "Button 2",
+        type: "URL",
       },
       {
-        text: 'Button 3',
-        type: 'QUICK_REPLY',
+        text: "Button 3",
+        type: "QUICK_REPLY",
       },
     ],
   },
@@ -85,10 +85,10 @@ export const Document = Template.bind({});
 Document.args = {
   template: {
     header: {
-      type: 'MEDIA',
-      mediaType: 'DOCUMENT',
+      type: "MEDIA",
+      mediaType: "DOCUMENT",
     },
-    footer: 'Weni by VTEX',
+    footer: "Weni by VTEX",
     body: bodyText,
   },
 };