From 7ae7859b4801f899c773643ea390f41873cad63e Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Tue, 6 Aug 2024 16:19:03 +0300
Subject: [PATCH] adds preserveFooter and belowTitle slots

---
 lib/KCard/__tests__/KCard.spec.js | 37 +------------------------------
 lib/KCard/index.vue               | 30 ++++++++++++++++++++-----
 2 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/lib/KCard/__tests__/KCard.spec.js b/lib/KCard/__tests__/KCard.spec.js
index 3d1313530..a9885983d 100644
--- a/lib/KCard/__tests__/KCard.spec.js
+++ b/lib/KCard/__tests__/KCard.spec.js
@@ -128,7 +128,7 @@ describe('KCard', () => {
       expect(footerSlot.text()).toBe('footer slot content goes here');
     });
   });
-  describe('it renders aboveTitle slot whether should occupy the area designated for it or not ', () => {
+  describe('it renders aboveTitle slot  to occupy the area designated for it or not ', () => {
     it('preserves above-title space when preserveAboveTitle is true', () => {
       const wrapper = makeWrapper({
         propsData: {
@@ -178,40 +178,5 @@ describe('KCard', () => {
       expect(aboveTitle.exists()).toBe(true);
       expect(aboveTitle.text()).toBe('Above Title Content');
     });
-    it('adds correct margin to title when above-title is not preserved', async () => {
-      const wrapper = makeWrapper({
-        propsData: {
-          to: { path: '/some-link' },
-          title: 'sample title ',
-          headingLevel: 4,
-          preserveAboveTitle: false,
-        },
-        slots: {},
-      });
-      // We need to wait for the next tick to ensure all reactive updates have been applied
-      await wrapper.vm.$nextTick();
-      const heading = wrapper.find('.base-card-title');
-      expect(heading.element.style.marginTop).toBe('24px');
-    });
-    // it('works correctly with different layouts', () => {
-    //   const layouts = ['vertical', 'horizontal']
-    //   const thumbnailDisplays = ['none', 'small', 'large']
-    //   layouts.forEach(layout => {
-    //     thumbnailDisplays.forEach(thumbnailDisplay => {
-    //       const wrapper =  makeWrapper( {
-    //         propsData: { to: { path: '/some-link' },title: 'sample title ', headingLevel: 4 ,
-    //           layout,
-    //           thumbnailDisplay,
-    //           preserveAboveTitle: false,
-    //         },
-    //       })
-    //     const aboveTitle = wrapper.find('[data-test="aboveTitle"]')
-    //     expect(aboveTitle.exists()).toBe(false)
-    //     // Check that the correct layout class is applied
-    //     expect(wrapper.classes()).toContain(`${layout}-with-${thumbnailDisplay}-thumbnail`)
-    //   })
-    // })
-    // }
-    // )
   });
 });
diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
index 39b744a18..4b62da485 100644
--- a/lib/KCard/index.vue
+++ b/lib/KCard/index.vue
@@ -8,6 +8,8 @@
     :class="['k-card', rootClass]"
     :headingStyles="headingStyles"
     :preserveAboveTitle="preserveAboveTitle"
+    :preserveBelowTitle="preserveBelowTitle"
+    :preserveFooter="preserveFooter"
   >
     <template v-if="$slots.title" #title>
       <!-- @slot Optional slot section containing the title contents, should not contain a heading element. -->
@@ -15,7 +17,7 @@
     </template>
     <template #default>
       <div class="thumbnail">
-        <!-- 
+        <!--
           Render KImg even if thumbnailSrc is not provided since in that case
           KImg takes care of showing the gray placeholder area.
         -->
@@ -170,7 +172,7 @@
         default: 'centerInside',
       },
       /**
-       * Whether to preserve the space for the aboveTitle slot when it's empty.
+       * Dictates  whether to preserve the space for the aboveTitle slot when it's empty.
        * @type {Boolean}
        * @default false
        */
@@ -178,7 +180,25 @@
         type: Boolean,
         default: false,
       },
-    },
+      /**
+       * Dictates whether to preserve the space for the belowTitle slot when it's empty.
+       * @type {Boolean}
+       * @default false
+       */
+      preserveBelowTitle: {
+        type: Boolean,
+        default: false,
+
+      },
+       /**
+       * Dictates whether to preserve the space for the footer slot when it's empty.
+       * @type {Boolean}
+       * @default false
+       */
+      preserveFooter: {
+        type: Boolean,
+        default: false,
+      },
     computed: {
       rootClass() {
         return this.stylesAndClasses.rootClass;
@@ -201,7 +221,7 @@
           New styles and classes are meant to be added to this single-source-of-truth object so
           that we can easily locate all styling being applied to a particular layout
 
-          Could be further simplified by using solely dynamic styles, but that would have detrimental effects on our auto RTL machinery and we would need to take care manually of more places. 
+          Could be further simplified by using solely dynamic styles, but that would have detrimental effects on our auto RTL machinery and we would need to take care manually of more places.
         */
       stylesAndClasses() {
         /* In px. Needs to be the same as $spacer variable in styles part */
@@ -440,4 +460,4 @@
     }
   }
 
-</style>
\ No newline at end of file
+</style>