fix(kcard): address PR feedback [KHCP-8971]

Kong · Nov 15, 2023 · 0502d08 · 0502d08
1 parent 6f62d8f
commit 0502d08
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 64 deletions.
diff --git a/docs/components/card.md b/docs/components/card.md
@@ -24,12 +24,10 @@ KCard is a styled container that organizes related content and actions.
   </template>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip excommodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nupariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit aid est laborum.
   <template #footer>
-    <div class="horizontal-spacing">
-      <KBadge appearance="success">
-        Published
-      </KBadge>
-      <KBadge>2 versions</KBadge>
-    </div>
+    <KBadge appearance="success">
+      Published
+    </KBadge>
+    <KBadge>2 versions</KBadge>
   </template>
 </KCard>
 
@@ -56,12 +54,10 @@ KCard is a styled container that organizes related content and actions.
   </template>
   Lorem ipsum dolor sit amet ...
   <template #footer>
-    <div class="horizontal-spacing">
-      <KBadge appearance="success">
-        Published
-      </KBadge>
-      <KBadge>2 versions</KBadge>
-    </div>
+    <KBadge appearance="success">
+      Published
+    </KBadge>
+    <KBadge>2 versions</KBadge>
   </template>
 </KCard>
 ```
@@ -144,12 +140,10 @@ Bottom drawer of the card. Helpful for providing information of lesser importanc
   </template>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip excommodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nupariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit aid est laborum.
   <template #footer>
-    <div class="horizontal-spacing">
-      <KBadge appearance="success">
-        Published
-      </KBadge>
-      <KBadge>2 versions</KBadge>
-    </div>
+    <KBadge appearance="success">
+      Published
+    </KBadge>
+    <KBadge>2 versions</KBadge>
   </template>
 </KCard>
 
@@ -176,23 +170,14 @@ Bottom drawer of the card. Helpful for providing information of lesser importanc
   </template>
   Lorem ipsum dolor sit amet ...
   <template #footer>
-    <div class="horizontal-spacing">
-      <KBadge appearance="success">
-        Published
-      </KBadge>
-      <KBadge>2 versions</KBadge>
-    </div>
+    <KBadge appearance="success">
+      Published
+    </KBadge>
+    <KBadge>2 versions</KBadge>
   </template>
 </KCard>
 ```
 
 <script setup lang="ts">
 import { MoreIcon } from '@kong/icons'
-</script>
-
-<style lang="scss" scoped>
-.horizontal-spacing {
-  display: flex;
-  gap: $kui-space-50;
-}
-</style>
+</script>
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -69,6 +69,21 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 ### KCard
 
+#### Props
+
+* `testMode` prop has been removed
+* `body` prop has been deprecated. Use `default` slot instead
+* `borderVariant` prop has been removed. KCard has a border by default
+* `hasHover` prop has been removed
+* `hasShadow` prop has been removed. KCard does not have a box-shadow by default
+* `status` prop has been removed
+
+#### Slots
+
+* `statusHat` slot has been removed
+* `body` slot has been deprecated in favor of `default` slot
+* `notifications` slot has been removed
+
 #### Structure
 
 * `kong-card` class has been changed to `k-card`
@@ -88,23 +103,6 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 * `BorderVariantsArray` constant has been removed
 * `BorderVariant` type has been removed
 
-#### Props
-
-* `testMode` prop has been removed
-* `body` prop has been deprecated. Use `default` slot instead
-* `borderVariant` prop has been removed. KCard has a border by default
-* `hasHover` prop has been removed
-* `hasShadow` prop has been removed. KCard does not have a box-shadow by default
-* `status` prop has been removed
-
-#### Slots
-
-* `statusHat` slot has been removed
-* `body` slot has been deprecated in favor of `default` slot
-* `notifications` slot has been removed
-
-#### Events
-
 ### KCatalog
 
 

diff --git a/sandbox/pages/SandboxCard.vue b/sandbox/pages/SandboxCard.vue
@@ -51,12 +51,10 @@
           </template>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <em>ut labore</em> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <b>Excepteur sint occaecat cupidatat non proident</b>, sunt in culpa qui officia deserunt mollit anim id est laborum.
           <template #footer>
-            <div class="horizontal-spacing">
-              <KBadge appearance="success">
-                Published
-              </KBadge>
-              <KBadge>2 versions</KBadge>
-            </div>
+            <KBadge appearance="success">
+              Published
+            </KBadge>
+            <KBadge>2 versions</KBadge>
           </template>
         </KCard>
       </div>
@@ -84,13 +82,11 @@
           </template>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
           <template #footer>
-            <span class="footer-content">
-              <CheckIcon
-                :color="KUI_COLOR_TEXT_SUCCESS"
-                :size="KUI_ICON_SIZE_40"
-              />
-              Approved
-            </span>
+            <CheckIcon
+              :color="KUI_COLOR_TEXT_SUCCESS"
+              :size="KUI_ICON_SIZE_40"
+            />
+            Approved
           </template>
         </KCard>
       </div>

diff --git a/src/components/KCard/KCard.cy.ts b/src/components/KCard/KCard.cy.ts
@@ -2,7 +2,7 @@ import { mount } from 'cypress/vue'
 import KCard from '@/components/KCard/KCard.vue'
 
 describe('KCard', () => {
-  it('does not render any content when no props or slots are passed', () => {
+  it('renders empty card element when no props or slots are passed', () => {
     mount(KCard)
 
     cy.get('.k-card').should('be.visible')

diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
@@ -23,7 +23,10 @@
       v-if="showCardBody"
       class="card-content"
     >
-      <slot v-if="$slots.default" />
+      <slot
+        v-if="$slots.default"
+        name="default"
+      />
       <slot
         v-else-if="!$slots.default && ($slots.body || body)"
         name="body"
@@ -103,6 +106,11 @@ onMounted(() => {
       letter-spacing: var(--kui-letter-spacing-minus-30, $kui-letter-spacing-minus-30);
       line-height: var(--kui-line-height-40, $kui-line-height-40);
     }
+
+    .card-actions {
+      display: flex;
+      gap: var(--kui-space-30, $kui-space-30);
+    }
   }
 
   .card-content {
@@ -111,6 +119,9 @@ onMounted(() => {
 
   .card-footer {
     @include bodyText;
+
+    display: flex;
+    gap: var(--kui-space-30, $kui-space-30);
   }
 }
 </style>