feat(kcatalogitem): add card-footer slot (#2154)

* feat(kcatalogitem): add card-footer slot * feat(kcatalogitem): apply pr feedback Co-authored-by: Maksym Portianoi <maksym.portianoi@konghq.com> * feat(kcatalogitem): apply pr feedback * feat(kcatalogitem): apply pr feedback --------- Co-authored-by: Maksym Portianoi <maksym.portianoi@konghq.com>
Kong · Apr 23, 2024 · e26025b · e26025b
1 parent fa2e633
commit e26025b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/docs/components/catalog.md b/docs/components/catalog.md
@@ -239,13 +239,20 @@ The title content for the card.
 
 The body content for the card.
 
+#### card-footer
+
+The footer content for the card.
+
 <KCatalogItem>
   <template #card-title>
     Card Title
   </template>
   <template #card-body>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
   </template>
+  <template #card-footer>
+    <KBadge appearance="neutral">Card footer</KBadge>
+  </template>
 </KCatalogItem>
 
 ```html
@@ -256,6 +263,9 @@ The body content for the card.
   <template #card-body>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
   </template>
+  <template #card-footer>
+      <KBadge appearance="neutral">Card footer</KBadge>
+  </template>
 </KCatalogItem>
 ```
 

diff --git a/src/components/KCatalog/KCatalogItem.vue b/src/components/KCatalog/KCatalogItem.vue
@@ -21,6 +21,10 @@
         {{ item ? item.description : '' }}
       </slot>
     </div>
+
+    <template #footer>
+      <slot name="card-footer" />
+    </template>
   </KCard>
 </template>