@weni/unnnic-system 3.8.2-alpha.2 → 3.9.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,23 +88,18 @@ 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 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 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 +134,6 @@ export const components: ComponentsMap = {
   unnnicCardProject: cardProject,
   unnnicCardInformation: cardInformation,
   unnnicCheckbox: checkbox,
-  unnnicCheckboxGroup: checkboxGroup,
   unnnicCollapse: collapse,
   unnnicRadio: radio,
   unnnicLanguageSelect: languageSelect,
@@ -209,18 +202,13 @@ export const components: ComponentsMap = {
   unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
-  unnnicToast: Toast,
-  unnnicToastManager: toast,
+  unnnicTabs: Tabs,
+  unnnicTabsList: TabsList,
+  unnnicTabsTrigger: TabsTrigger,
+  unnnicTabsContent: TabsContent,
   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 +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;
@@ -273,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;
@@ -314,24 +301,22 @@ 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 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 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 +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;
@@ -380,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;
@@ -421,21 +405,16 @@ 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 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 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/components/ui/tabs/Tabs.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
+
+defineOptions({
+  name: 'UnnnicTabs',
+});
+
+const props = defineProps<TabsRootProps>();
+const emits = defineEmits<TabsRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

package/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsContent } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  TabsContentProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <TabsContent
+    :class="cn(props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsList } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<
+  TabsListProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn('unnnic-tabs-list', props.class)"
+  >
+    <slot />
+  </TabsList>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-tabs-list {
+  display: flex;
+  align-items: center;
+  gap: $unnnic-space-6;
+  box-shadow: inset 0 (-$unnnic-border-width-thinner) 0 0
+    $unnnic-color-border-base;
+}
+</style>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { computed } from 'vue';
+
+const props = defineProps<
+  TabsTriggerProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const classes = computed(() => {
+  const defaultClasses = ['unnnic-tabs-trigger'];
+
+  if (props.disabled) {
+    defaultClasses.push('unnnic-tabs-trigger--disabled');
+  }
+
+  return defaultClasses;
+});
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        ...classes,
+        'transition-all disabled:pointer-events-none disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="unnnic-tabs-trigger__content truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-tabs-trigger {
+  background-color: transparent;
+  border: none;
+
+  padding: $unnnic-space-2 $unnnic-space-4;
+  font: $unnnic-font-action;
+  color: $unnnic-color-fg-base;
+
+  cursor: pointer;
+
+  &[data-state='active'] {
+    font: $unnnic-font-action;
+    color: $unnnic-color-fg-emphasized;
+    box-shadow: inset 0 (-$unnnic-border-width-thin) 0 0
+      $unnnic-color-border-active;
+  }
+
+  &--disabled {
+    color: $unnnic-color-fg-muted;
+  }
+
+  &:hover {
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+  }
+}
+</style>

package/src/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue';
+export { default as TabsContent } from './TabsContent.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';

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