@weni/unnnic-system 3.28.2-alpha.1 → 3.28.2-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.28.2-alpha.1",
+  "version": "3.28.2-alpha.2",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Disclaimer/Disclaimer.vue

@@ -3,13 +3,15 @@
     :class="['unnnic-disclaimer', `unnnic-disclaimer--${type}`]"
     data-testid="disclaimer"
   >
-    <UnnnicIcon
-      class="unnnic-disclaimer__icon"
-      size="ant"
-      :icon="variant.icon"
-      :scheme="variant.scheme"
-      data-testid="disclaimer-icon"
-    />
+    <slot name="icon">
+      <UnnnicIcon
+        class="unnnic-disclaimer__icon"
+        size="ant"
+        :icon="variant.icon"
+        :scheme="variant.scheme"
+        data-testid="disclaimer-icon"
+      />
+    </slot>
 
     <section class="unnnic-disclaimer__content">
       <p
@@ -57,7 +59,7 @@ const slots = useSlots();
 const hasDescription = computed(() => {
   return (
     Boolean(props.description) ||
-    (slots.description && slots.description().length > 0)
+    (slots.description && slots.description({}).length > 0)
   );
 });
 

package/src/components/IconLoading/IconLoading.vue

@@ -44,6 +44,10 @@ const props = defineProps({
     type: String,
     default: 'lg',
   },
+  strokeWidth: {
+    type: Number,
+    default: 5,
+  },
 });
 
 defineOptions({ name: 'UnnnicIconLoading' });
@@ -79,6 +83,7 @@ const sizeInPixels = computed(() => SIZE_MAP[props.size] ?? props.size);
 
 .unnnic-icon-loading {
   display: inline-flex;
+  align-items: center;
   user-select: none;
 
   svg {
@@ -87,7 +92,7 @@ const sizeInPixels = computed(() => SIZE_MAP[props.size] ?? props.size);
     circle {
       fill: none;
       stroke: currentColor;
-      stroke-width: 5;
+      stroke-width: v-bind(strokeWidth);
       stroke-linecap: round;
       animation: unnnic-icon-loading-dash 1s ease-in-out infinite;
     }

package/src/stories/Disclaimer.stories.js

@@ -1,4 +1,5 @@
 import UnnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
+import UnnnicIconLoading from '../components/IconLoading/IconLoading.vue';
 
 export default {
   title: 'Feedback/Disclaimer',
@@ -75,3 +76,18 @@ export const WithDescriptionSlot = TemplateWithDescriptionSlot.bind({});
 WithDescriptionSlot.args = {
   ...Default.args,
 };
+
+const TemplateWithCustomIcon = (args) => ({
+  components: { UnnnicDisclaimer, UnnnicIconLoading },
+  setup() {
+    return { args };
+  },
+  template:
+    '<UnnnicDisclaimer v-bind="args"><template #icon><UnnnicIconLoading size="sm" scheme="fg-emphasized" stroke-width="3" /></template></UnnnicDisclaimer>',
+});
+
+export const WithCustomIcon = TemplateWithCustomIcon.bind({});
+WithCustomIcon.args = {
+  text: '',
+  description: 'Analysis in progress · 381 of 437 items processed.',
+};

package/src/stories/IconLoading.stories.js

@@ -55,3 +55,9 @@ export const CustomSize = {
     size: '64px',
   },
 };
+
+export const CustomStrokeWidth = {
+  args: {
+    strokeWidth: 3,
+  },
+};