@weni/unnnic-system 3.22.0 → 3.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.22.0",
+  "version": "3.23.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/ModalDialog/ModalDialog.vue

@@ -28,12 +28,14 @@
           <slot name="leftSidebar" />
         </section>
         <UnnnicDialogHeader
-          v-if="title"
+          v-if="title || $slots.title"
           :closeButton="showCloseIcon"
           :type="type"
         >
           <UnnnicDialogTitle>
-            {{ title }}
+            <slot name="title">
+              {{ title }}
+            </slot>
           </UnnnicDialogTitle>
         </UnnnicDialogHeader>
         <section class="unnnic-modal-dialog__container__content">

package/src/components/ModalDialog/__tests__/ModalDialog.spec.js

@@ -44,6 +44,89 @@ describe('ModalDialog.vue', () => {
     });
   });
 
+  describe('Title slot', () => {
+    const titleSlotStubs = {
+      teleport: true,
+      UnnnicIcon: true,
+      UnnnicButton: true,
+      DialogPortal: { template: '<div><slot /></div>' },
+      DialogOverlay: true,
+    };
+
+    it('renders the header when the title slot is provided without a title prop', () => {
+      wrapper = mount(ModalDialog, {
+        props: {
+          modelValue: true,
+          primaryButtonProps: { text: 'Confirm' },
+        },
+        slots: {
+          title:
+            '<span class="custom-title">Custom <strong>Title</strong></span>',
+        },
+        global: {
+          stubs: titleSlotStubs,
+        },
+      });
+
+      expect(wrapper.find('.custom-title').exists()).toBe(true);
+      expect(wrapper.find('.custom-title').html()).toContain(
+        '<strong>Title</strong>',
+      );
+    });
+
+    it('does not render the header when neither title prop nor title slot is provided', () => {
+      wrapper = mount(ModalDialog, {
+        props: {
+          modelValue: true,
+          primaryButtonProps: { text: 'Confirm' },
+        },
+        global: {
+          stubs: titleSlotStubs,
+        },
+      });
+
+      expect(
+        wrapper.findComponent({ name: 'UnnnicDialogHeader' }).exists(),
+      ).toBe(false);
+    });
+
+    it('renders the title prop text when no title slot is provided', () => {
+      wrapper = mount(ModalDialog, {
+        props: {
+          title: 'Test Title',
+          modelValue: true,
+          primaryButtonProps: { text: 'Confirm' },
+        },
+        global: {
+          stubs: titleSlotStubs,
+        },
+      });
+
+      expect(wrapper.findComponent({ name: 'UnnnicDialogTitle' }).text()).toBe(
+        'Test Title',
+      );
+    });
+
+    it('renders the title slot content instead of the title prop when both are provided', () => {
+      wrapper = mount(ModalDialog, {
+        props: {
+          title: 'Prop Title',
+          modelValue: true,
+          primaryButtonProps: { text: 'Confirm' },
+        },
+        slots: {
+          title: '<span class="slot-title">Slot Title</span>',
+        },
+        global: {
+          stubs: titleSlotStubs,
+        },
+      });
+
+      expect(wrapper.find('.slot-title').exists()).toBe(true);
+      expect(wrapper.find('.slot-title').text()).toBe('Slot Title');
+    });
+  });
+
   describe('persistentHandler', () => {
     it('prevents default when persistent is true', () => {
       wrapper = mount(ModalDialog, {

package/src/stories/ModalDialog.stories.js

@@ -4,6 +4,7 @@ import UnnnicLabel from '../components/Label/Label.vue';
 import UnnnicInputDatePicker from '../components/InputDatePicker/InputDatePicker.vue';
 import UnnnicSwitch from '../components/Switch/Switch.vue';
 import UnnnicButton from '../components/Button/Button.vue';
+import UnnnicTag from '../components/Tag/Tag.vue';
 
 import { action } from '@storybook/addon-actions';
 import iconsList from '../utils/iconList';
@@ -356,3 +357,92 @@ WithDatePicker.args = {
     text: 'Cancel',
   },
 };
+
+const TemplateCustomTitleSlot = (args) => ({
+  components: { UnnnicModalDialog, UnnnicTag, UnnnicButton },
+  setup() {
+    const updateModelValue = (value) => {
+      action('update:modelValue')(value);
+      args.modelValue = value;
+    };
+    return { args, updateModelValue };
+  },
+  template: `
+  <div>
+    <button @click="updateModelValue(true)">Open Modal</button>
+    <unnnic-modal-dialog
+      v-bind="args"
+      @primaryButtonClick="primaryButtonClick"
+      @secondaryButtonClick="secondaryButtonClick"
+      @update:modelValue="updateModelValue"
+    >
+      <template #title>
+        <span style="display: flex; align-items: center; gap: 8px;">
+          Custom Title
+          <UnnnicTag text="New" scheme="feedback-green" />
+        </span>
+      </template>
+      <p style="margin: 0;">This modal uses the <strong>title slot</strong> instead of the title prop, allowing you to add custom components like tags, buttons, or icons inside the title area.</p>
+    </unnnic-modal-dialog>
+  </div>
+  `,
+  methods: {
+    primaryButtonClick: action('primaryButtonClick'),
+    secondaryButtonClick: action('secondaryButtonClick'),
+  },
+});
+
+export const CustomTitleSlot = TemplateCustomTitleSlot.bind({});
+CustomTitleSlot.args = {
+  type: '',
+  showCloseIcon: true,
+  primaryButtonProps: {
+    text: 'Confirm',
+  },
+};
+
+const TemplateCustomTitleWithButtons = (args) => ({
+  components: { UnnnicModalDialog, UnnnicButton },
+  setup() {
+    const updateModelValue = (value) => {
+      action('update:modelValue')(value);
+      args.modelValue = value;
+    };
+    return { args, updateModelValue };
+  },
+  template: `
+  <div>
+    <button @click="updateModelValue(true)">Open Modal</button>
+    <unnnic-modal-dialog
+      v-bind="args"
+      @primaryButtonClick="primaryButtonClick"
+      @secondaryButtonClick="secondaryButtonClick"
+      @update:modelValue="updateModelValue"
+    >
+      <template #title>
+        <span style="display: flex; align-items: center; gap: 8px;">
+          Settings
+          <UnnnicButton type="tertiary" iconCenter="help" size="small" />
+        </span>
+      </template>
+      <p style="margin: 0;">This modal demonstrates a title with an inline help button using the <strong>title slot</strong>.</p>
+    </unnnic-modal-dialog>
+  </div>
+  `,
+  methods: {
+    primaryButtonClick: action('primaryButtonClick'),
+    secondaryButtonClick: action('secondaryButtonClick'),
+  },
+});
+
+export const CustomTitleWithButton = TemplateCustomTitleWithButtons.bind({});
+CustomTitleWithButton.args = {
+  type: '',
+  showCloseIcon: true,
+  primaryButtonProps: {
+    text: 'Save',
+  },
+  secondaryButtonProps: {
+    text: 'Cancel',
+  },
+};