adds preserveFooter and belowTitle slots

learningequality · Aug 6, 2024 · 7ae7859 · 7ae7859
1 parent ecc4d47
commit 7ae7859
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 41 deletions.
diff --git 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
@@ -8,14 +8,16 @@
     :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. -->
       <slot name="title"></slot>
     </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,15 +172,33 @@
         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
        */
       preserveAboveTitle: {
         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>
+</style>