rebase

learningequality · Aug 16, 2024 · 3a99396 · 3a99396
1 parent 3bb8766
commit 3a99396
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 16 deletions.
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
@@ -20,7 +20,7 @@
         :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
         title="This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title This is a sample resource title"
       >
-        <template #aboveTitle>
+        <!-- <template #aboveTitle>
           <KGrid>
 
             <KGridItem
@@ -43,7 +43,7 @@
               </div>
             </KGridItem>
           </KGrid>
-        </template>
+        </template> -->
         <template #belowTitle>
           <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
         </template>
@@ -608,6 +608,30 @@
         :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
         title="This is a sample resource title"
       >
+        <!-- <template #aboveTitle>
+          <KGrid>
+
+            <KGridItem
+              :layout12="{ span: 8 }"
+              :layout8="{ span: 6 }"
+            >
+              <span><KIcon icon="readSolid" :style="{ 'font-size': '14px' }" /></span>
+              <span
+                :style="{ 'color': $themePalette.grey.v_400,
+                          'font-size': '12px' }"
+              >Rutrum pellentesque utrum...</span>
+            </KGridItem>
+
+            <KGridItem
+              :layout12="{ span: 4 }"
+              :layout8="{ span: 2 }"
+            >
+              <div style="float:right">
+                <KIcon icon="infoOutline" class="icon-size" />
+              </div>
+            </KGridItem>
+          </KGrid>
+        </template> -->
         <template #belowTitle>
           <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
         </template>
@@ -665,7 +689,7 @@
             <KIcon icon="readSolid" :style="{ fontSize: '40px' }" />
           </span>
         </template>
-        <template #aboveTitle>
+       <template #aboveTitle>
           <KGrid>
 
             <KGridItem
@@ -688,10 +712,10 @@
               </div>
             </KGridItem>
           </KGrid>
-        </template>
-        <template #belowTitle>
+        </template> 
+        <!-- <template #belowTitle>
           <span>Below title below title below title below title below title below title below title below title below title below title below title below title below title</span>
-        </template>
+        </template>  -->
       </KCard> 
     </ul>
   </div>

diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
@@ -53,13 +53,15 @@
         <slot name="aboveTitle"></slot>
       </div>
       <div
+        v-if="$slots.belowTitle || preserveBelowTitle"
         data-test="belowTitle"
         class="below-title"
       >
         <!-- @slot Places content to the area below the title. -->
         <slot name="belowTitle"></slot>
       </div>
       <div
+        v-if="$slots.footer || preserveFooter"
         data-test="footer"
         class="footer"
       >
@@ -173,6 +175,8 @@
       },
       /**
        * Dictates  whether to preserve the space for the aboveTitle slot when it's empty.
+       * When true, preserves the space for the AboveTitle  slot even when it's empty.
+       * When false, removes the space entirely if the slot is empty.
        * @type {Boolean}
        * @default false
        */
@@ -182,6 +186,8 @@
       },
       /**
        * Dictates whether to preserve the space for the belowTitle slot when it's empty.
+       * When true, preserves the space for the belowTitle  slot even when it's empty.
+       * When false, removes the space entirely if the slot is empty.
        * @type {Boolean}
        * @default false
        */
@@ -191,6 +197,8 @@
       },
       /**
        * Dictates whether to preserve the space for the footer slot when it's empty.
+       * When true, preserves the space for the  slot even when it's empty.
+       * When false, removes the space entirely if the slot is empty.
        * @type {Boolean}
        * @default false
        */
@@ -237,22 +245,22 @@
         };
 
         // Helper function to add marginTop when above-title is not preserved
-        const addMarginTopIfNotPreserved = styles => {
-          if (!this.preserveAboveTitle && !this.$slots.aboveTitle) {
-            return {
-              ...styles,
-              marginTop: '24',
-            };
-          }
-          return styles;
-        };
+        // const addMarginTopIfNotPreserved = styles => {
+        //   if (!this.preserveAboveTitle && !this.$slots.aboveTitle) {
+        //     return {
+        //       ...styles,
+        //       marginTop: '24',
+        //     };
+        //   }
+        //   return styles;
+        // };
 
         if (this.layout === 'horizontal' && this.thumbnailDisplay === 'large') {
           return {
             rootClass: 'horizontal-with-large-thumbnail',
             titleLines: 3,
             thumbnailAspectRatio: undefined,
-            headingStyles: addMarginTopIfNotPreserved({
+            headingStyles: ({
               ...headingCommonStyles,
               width: `calc(60% - ${SPACER * 2}px)` /* same as slots width defined in styles */,
             }),