@weni/unnnic-system 3.5.3-alpha.2 → 3.7.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,22 +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 Popover from './ui/popover/Popover.vue';
-import PopoverContent from './ui/popover/PopoverContent.vue';
-import PopoverTrigger from './ui/popover/PopoverTrigger.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;
 
@@ -139,7 +126,6 @@ export const components: ComponentsMap = {
   unnnicCardProject: cardProject,
   unnnicCardInformation: cardInformation,
   unnnicCheckbox: checkbox,
-  unnnicCheckboxGroup: checkboxGroup,
   unnnicCollapse: collapse,
   unnnicRadio: radio,
   unnnicLanguageSelect: languageSelect,
@@ -208,18 +194,6 @@ 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;
@@ -249,7 +223,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;
@@ -272,7 +245,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,23 +286,14 @@ 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;
-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 UnnnicFontSize = fontSize;
+export const UnnnicFormElement = formElement;
 export const UnnnicInput = input;
 export const UnnnicInputNext = inputNext;
 export const UnnnicInputDatePicker = inputDatePicker;
@@ -355,7 +319,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;
@@ -378,7 +341,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;
@@ -419,20 +382,8 @@ 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;
-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;

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' },
@@ -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/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',
   },
 };

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

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

package/src/stories/ModalDialog.mdx

@@ -6,9 +6,6 @@ import * as ModalDialogStories from './ModalDialog.stories';
 
 # ModalDialog
 
-> **⚠️ DEPRECATED**: This component has been deprecated in favor of the new `Dialog` component. Please use `UnnnicDialog` 
-instead for new implementations. See the [Dialog documentation](?path=/docs/feedback-dialog--docs) for more information.
-
 The ModalDialog was designed to inform the user about a specific task, request information, or involve other tasks.
 
 <Source

package/src/stories/ModalDialog.stories.js

@@ -7,7 +7,7 @@ import iconsList from '../utils/iconList';
 import colorsList from '../utils/colorsList';
 
 export default {
-  title: 'Feedback/ModalDialog',
+  title: 'Example/ModalDialog',
   component: UnnnicModalDialog,
   argTypes: {
     type: {

package/src/stories/Switch.stories.js

@@ -4,11 +4,9 @@ export default {
   title: 'Form/Switch',
   component: UnnnicSwitch,
   argTypes: {
-    label: { control: { type: 'text' } },
-    labelTooltip: { control: { type: 'text' } },
-    labelUseHtmlTooltip: { control: 'boolean' },
-    option: { 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) => ({
@@ -34,11 +32,8 @@ export default {
 
 export const Default = {
   args: {
-    label: 'Default',
-    labelTooltip: 'Tooltip',
-    labelUseHtmlTooltip: true,
-    option: 'Option',
-    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/types/scheme-colors.d.ts

@@ -140,7 +140,6 @@ export type SchemeColor =
   | 'feedback-yellow'
   | 'feedback-blue'
   | 'feedback-grey'
-  | 'fg-base'
   | 'aux-blue'
   | 'aux-purple'
   | 'aux-orange'

package/src/utils/call.js

@@ -1,58 +1,30 @@
 import { createApp } from 'vue';
 import Alert from '../components/Alert/Alert.vue';
 import Modal from '../components/Modal/Modal.vue';
-import ToastInstance from '../components/Toast/ToastManager';
 import mitt from 'mitt';
 
 const emitter = mitt();
-const callAlert = ({ props, containerRef, seconds }) => {
-  if (props.version === '1.1' || containerRef) {
-    const AlertComponent = createApp(Alert, {
-      ...props,
-      seconds,
-      version: '1.1',
-      onClose: () => {
+
+const callAlert = ({ props, containerRef }) => {
+  const AlertComponent = createApp(Alert, {
+    ...props,
+    onClose: () => {
+      instance.$el.remove();
+    },
+    created() {
+      emitter.on(['close'], () => {
         instance.$el.remove();
-      },
-      created() {
-        emitter.on(['close'], () => {
-          instance.$el.remove();
-        });
-      },
-    });
-    const element = document.createElement('div');
-    const instance = AlertComponent.mount(element);
+      });
+    },
+  });
+  const element = document.createElement('div');
+  const instance = AlertComponent.mount(element);
 
-    if (containerRef) {
-      instance.$el.style.position = 'absolute';
-      containerRef.appendChild(instance.$el);
-    } else {
-      document.body.appendChild(instance.$el);
-    }
+  if (containerRef) {
+    instance.$el.style.position = 'absolute';
+    containerRef.appendChild(instance.$el);
   } else {
-    const typeMap = {
-      success: 'success',
-      error: 'error',
-      attention: 'attention',
-      default: 'informational',
-      'feedback-green': 'success',
-      'feedback-red': 'error',
-    };
-
-    const toastProps = {
-      timeout: seconds ? seconds * 1000 : 5000,
-      type: typeMap[props.scheme || props.type] || typeMap.default,
-
-      onClose: () => {
-        emitter.emit(['close']);
-      },
-    };
-
-    ToastInstance.show({
-      title: props.text,
-      description: '',
-      ...toastProps,
-    });
+    document.body.appendChild(instance.$el);
   }
 };
 

package/dist/assets/tokens/iconSizeTokens.d.ts

@@ -1,2 +0,0 @@
-export declare const iconSizeTokens: Record<string, string>;
-//# sourceMappingURL=iconSizeTokens.d.ts.map

package/dist/assets/tokens/iconSizeTokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"iconSizeTokens.d.ts","sourceRoot":"","sources":["../../../src/assets/tokens/iconSizeTokens.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAOjD,CAAC"}

package/dist/components/CheckboxGroup/CheckboxGroup.vue.d.ts

@@ -1,28 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & (new () => {
-    $slots: S;
-});
-declare const __VLS_component: import('vue').DefineComponent<{}, {
-    state: string;
-    labelUseHtmlTooltip: boolean;
-    label?: string | undefined;
-    helper?: string | undefined;
-    labelTooltip?: string | undefined;
-    $props: {
-        readonly state?: string | undefined;
-        readonly labelUseHtmlTooltip?: boolean | undefined;
-        readonly label?: string | undefined;
-        readonly helper?: string | undefined;
-        readonly labelTooltip?: string | undefined;
-    };
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
-type __VLS_TemplateResult = {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLElement;
-};
-//# sourceMappingURL=CheckboxGroup.vue.d.ts.map

package/dist/components/CheckboxGroup/CheckboxGroup.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.vue"],"names":[],"mappings":"AA0BA;wBAkNqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;mPAQG"}

package/dist/components/Toast/Toast.vue.d.ts

@@ -1,16 +0,0 @@
-import { ToastProps } from './types';
-declare const _default: import('vue').DefineComponent<ToastProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    close: () => any;
-    destroy: () => any;
-}, string, import('vue').PublicProps, Readonly<ToastProps> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onDestroy?: (() => any) | undefined;
-}>, {
-    type: import('./types').ToastType;
-    description: string;
-    button: import('./types').ToastButton;
-    title: string;
-    timeout: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=Toast.vue.d.ts.map

package/dist/components/Toast/Toast.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toast.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.vue"],"names":[],"mappings":"AAsEA;AA6PA,OAAO,KAAK,EAAE,UAAU,EAAc,MAAM,SAAS,CAAC;;;;;;;;;;;;;;AAqQtD,wBASG"}