@weni/unnnic-system 3.12.3-alpha.2 → 3.12.3-alpha.4

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

@@ -93,6 +93,21 @@ $popover-space: $unnnic-space-4;
 .unnnic-popover {
   border-radius: $unnnic-radius-2;
   box-shadow: $unnnic-shadow-1;
+  border: 1px solid $unnnic-color-border-soft;
+
+  &::-webkit-scrollbar {
+    width: $unnnic-spacing-inline-nano;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $unnnic-color-neutral-cleanest;
+    border-radius: $unnnic-border-radius-pill;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $unnnic-color-neutral-soft;
+    border-radius: $unnnic-border-radius-pill;
+  }
 
   &--size-small {
     width: 240px;

package/src/locales/en.json

@@ -42,5 +42,6 @@
       "custom": "Custom"
     }
   },
-  "search": "Search"
+  "search": "Search",
+  "without_results": "No results found"
 }

package/src/locales/es.json

@@ -42,5 +42,6 @@
       "custom": "Personalizados"
     }
   },
-  "search": "Buscar"
+  "search": "Buscar",
+  "without_results": "No se encontró ningún resultado"
 }

package/src/locales/pt_br.json

@@ -42,5 +42,6 @@
       "custom": "Personalizados"
     }
   },
-  "search": "Buscar"
+  "search": "Buscar",
+  "without_results": "Nenhum resultado encontrado"
 }

package/src/stories/Disclaimer.stories.js

@@ -1,22 +1,63 @@
 import UnnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
-import icons from '../utils/iconList';
-import colors from '../utils/colorsList';
 
 export default {
-  title: 'Example/Disclaimer',
+  title: 'Feedback/Disclaimer',
   component: UnnnicDisclaimer,
-  args: {},
   argTypes: {
-    text: { control: { type: 'text' } },
-    icon: { options: icons, control: { type: 'select' } },
-    iconColor: { options: colors, control: { type: 'select' } },
+    type: {
+      control: { type: 'select' },
+      options: ['informational', 'success', 'attention', 'error', 'neutral'],
+    },
   },
 };
 
-export const Default = {
-  args: {
-    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    icon: 'alert-circle-1-1',
-    iconColor: 'feedback-yellow',
+const Template = (args) => ({
+  components: { UnnnicDisclaimer },
+  setup() {
+    return { args };
   },
+  template: '<UnnnicDisclaimer v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Disclaimer',
+  description: 'The quick brown fox jumps over the lazy dog',
+  type: 'informational',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  ...Default.args,
+  type: 'success',
+};
+
+export const Attention = Template.bind({});
+Attention.args = {
+  ...Default.args,
+  type: 'attention',
+};
+
+export const ErrorState = Template.bind({});
+ErrorState.args = {
+  ...Default.args,
+  type: 'error',
+};
+
+export const Neutral = Template.bind({});
+Neutral.args = {
+  ...Default.args,
+  type: 'neutral',
+};
+
+export const OnlyTitle = Template.bind({});
+OnlyTitle.args = {
+  ...Default.args,
+  description: '',
+};
+
+export const OnlyDescription = Template.bind({});
+OnlyDescription.args = {
+  ...Default.args,
+  title: '',
 };