feat(kcard): component reskin [KHCP-8971]

docs/components/collapse.md

@@ -166,9 +166,13 @@ To set the default state (collapsed or expanded) without binding to v-model you
         </div>
       </template>
       <template #visible-content>
-        <KCard body="I am content that is always visible" />
+        <KCard>
+          I am content that is always visible
+        </KCard>
       </template>
-      <KCard body="I am only visible when expanded" />
+      <KCard>
+        I am only visible when expanded
+      </KCard>
     </KCollapse>
   </template>
 </KCard>
@@ -182,10 +186,14 @@ To set the default state (collapsed or expanded) without binding to v-model you
     </div>
   </template>
   <template #visible-content>
-    <KCard body="I am content that is always visible" />
+    <KCard>
+      I am content that is always visible
+    </KCard>
   </template>
 
-  <KCard body="I am only visible when expanded" />
+  <KCard>
+    I am only visible when expanded
+  </KCard>
 </KCollapse>
 ```
 

docs/guide/migrating-to-version-9.md

@@ -69,6 +69,39 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 ### KCard
 
+#### Props
+
+* `testMode` prop has been removed
+* `body` prop has been removed. 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 removed. Use the `default` slot instead
+* `notifications` slot has been removed
+
+#### Structure
+
+* `kong-card` class has been changed to `k-card`
+* `hover` class has been removed
+* `kcard-shadow` class has been removed
+* `k-card-header` class has been changed to `card-header`
+* `has-status` class has been removed
+* `k-card-status-hat` class has been removed
+* `k-card-title` class has been changed to `card-title`
+* `k-card-actions` class has been changed to `card-actions`
+* `k-card-content` class has been changed to `card-content`
+* `k-card-body` class has been removed
+* `k-card-notifications` class has been removed
+
+#### Constants, Types & Interfaces
+
+* `BorderVariantsArray` constant has been removed
+* `BorderVariant` type has been removed
 
 ### KCatalog
 

sandbox/index.ts

@@ -18,6 +18,7 @@ app.component('SandboxLayout', SandboxLayout)
 const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KAlert', to: { name: 'alert' } },
   { name: 'KButton', to: { name: 'button' } },
+  { name: 'KCard', to: { name: 'card' } },
   { name: 'KCatalog', to: { name: 'catalog' } },
   { name: 'KCheckbox', to: { name: 'checkbox' } },
   { name: 'KDropdown', to: { name: 'dropdown' } },

sandbox/pages/SandboxCard.vue

@@ -0,0 +1,128 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KCard"
+  >
+    <div class="kcard-sandbox">
+      <SandboxTitleComponent
+        title="KCard"
+      >
+        <template #description>
+          <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1152%3A19831&mode=dev">
+            Figma
+          </KExternalLink>
+        </template>
+      </SandboxTitleComponent>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="title">
+        <KCard title="Card title">
+          Card content slot
+        </KCard>
+      </SandboxSectionComponent>
+
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="title & content & actions & footer">
+        <div>
+          <KCard>
+            <template #title>
+              Card title
+            </template>
+            <template #actions>
+              <KDropdown
+                :items="[
+                  { label: 'Home', to: { name: 'home' } },
+                  { label: 'KDropdown', to: { name: 'dropdown' } },
+                  { label: 'Stay', to: { name: 'card' } }
+                ]"
+              >
+                <KButton
+                  appearance="tertiary"
+                  class="icon-button"
+                  size="small"
+                >
+                  <MoreIcon />
+                </KButton>
+              </KDropdown>
+            </template>
+            <div>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.</div>
+            <template #footer>
+              <KBadge appearance="success">
+                Published
+              </KBadge>
+              <KBadge>2 versions</KBadge>
+            </template>
+          </KCard>
+        </div>
+        <div class="limit-width">
+          <KCard>
+            <template #title>
+              Example of very long card title that should not be truncated with ellipsis and should wrap to the next line even if it is too long
+            </template>
+            <template #actions>
+              <KDropdown
+                :items="[
+                  { label: 'Home', to: { name: 'home' } },
+                  { label: 'KDropdown', to: { name: 'dropdown' } },
+                  { label: 'Stay', to: { name: 'card' } }
+                ]"
+              >
+                <KButton
+                  appearance="tertiary"
+                  class="icon-button"
+                  size="small"
+                >
+                  <MoreIcon />
+                </KButton>
+              </KDropdown>
+            </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>
+              <CheckIcon
+                :color="KUI_COLOR_TEXT_SUCCESS"
+                :size="KUI_ICON_SIZE_40"
+              />
+              Approved
+            </template>
+          </KCard>
+        </div>
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import { MoreIcon, CheckIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_SUCCESS, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
+</script>
+
+<style scoped lang="scss">
+.kcard-sandbox {
+  .horizontal-spacing {
+    display: flex;
+    gap: $kui-space-50;
+  }
+
+  .limit-width {
+    /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+    max-width: $kui-breakpoint-mobile;
+  }
+
+  .footer-content {
+    color: $kui-color-text-success;
+    display: flex;
+    gap: $kui-space-30;
+  }
+}
+</style>

sandbox/router/sandbox-routes.ts

@@ -20,6 +20,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Button Sandbox' },
     component: () => import('../pages/SandboxButton.vue'),
   },
+  {
+    path: '/card',
+    name: 'card',
+    meta: { title: 'Card Sandbox' },
+    component: () => import('../pages/SandboxCard.vue'),
+  },
   {
     path: '/catalog',
     name: 'catalog',

src/components/KCard/KCard.cy.ts

@@ -1,92 +1,47 @@
 import { mount } from 'cypress/vue'
 import KCard from '@/components/KCard/KCard.vue'
-import { h } from 'vue'
 
-/**
- * ALL TESTS MUST USE testMode: true
- * We generate unique IDs for reference by aria properties. Test mode strips these out
- * allowing for successful snapshot verification.
- * props: {
- *   testMode: true
- * }
- */
 describe('KCard', () => {
-  it('renders slots when passed', () => {
-    const cardStatusHat = 'Card Status Hat'
-    const cardTitle = 'Card Title'
-    const cardActions = 'Card Actions'
-    const cardBody = 'Card Body'
-    const cardNotifications = 'Card Notifications'
+  it('renders empty card element when no props or slots are passed', () => {
+    mount(KCard)
 
-    mount(KCard, {
-      props: {
-        testMode: true,
-      },
-      slots: {
-        statusHat: () => h('span', {}, cardStatusHat),
-        title: () => h('span', {}, cardTitle),
-        actions: () => h('span', {}, cardActions),
-        body: () => h('span', {}, cardBody),
-        notifications: () => h('span', {}, cardNotifications),
-      },
-    })
-
-    cy.get('.k-card-status-hat').should('contain.text', cardStatusHat)
-    cy.get('.k-card-title').should('contain.text', cardTitle)
-    cy.get('.k-card-actions').should('contain.text', cardActions)
-    cy.get('.k-card-body').should('contain.text', cardBody)
-    cy.get('.k-card-notifications').should('contain.text', cardNotifications)
+    cy.get('.k-card').should('be.visible')
+    cy.get('.k-card').find('card-header').should('not.exist')
+    cy.get('.k-card').find('card-content').should('not.exist')
+    cy.get('.k-card').find('card-footer').should('not.exist')
   })
 
-  it('renders proper content when using props', () => {
-    const cardStatus = 'Card Status'
-    const cardTitle = 'Card Title'
-    const cardBody = 'Card Body'
+  it('renders title prop when passed', () => {
+    const titleProp = 'Title prop'
 
     mount(KCard, {
       props: {
-        testMode: true,
-        status: cardStatus,
-        title: cardTitle,
-        body: cardBody,
+        title: titleProp,
       },
     })
 
-    cy.get('.k-card-status-hat').should('have.text', cardStatus)
-    cy.get('.k-card-title').should('have.text', cardTitle)
-    cy.get('.k-card-body').should('have.text', cardBody)
+    cy.get('.k-card').find('.card-title').should('contain', titleProp)
   })
 
-  it('has border class when passed', () => {
-    mount(KCard, {
-      props: {
-        testMode: true,
-        hasBorder: true,
-      },
-    })
-
-    cy.get('.kong-card').should('have.class', 'border')
-  })
+  it('renders slots when passed', () => {
+    const titleProp = 'Test title'
+    const titleText = 'I am the title'
 
-  it('has hover class when passed', () => {
     mount(KCard, {
       props: {
-        testMode: true,
-        hasHover: true,
+        title: titleProp,
       },
-    })
-
-    cy.get('.kong-card').should('have.class', 'hover')
-  })
-
-  it('has shadow class when passed', () => {
-    mount(KCard, {
-      props: {
-        testMode: true,
-        hasShadow: true,
+      slots: {
+        title: `<span data-testid="card-title">${titleText}</span>`,
+        actions: '<span data-testid="card-actions">Card actions</span>',
+        default: '<span data-testid="card-content">Card content</span>',
+        footer: '<span data-testid="card-footer">Card footer</span>',
       },
     })
 
-    cy.get('.kong-card').should('have.class', 'kcard-shadow')
+    cy.get('.k-card').find('.card-title').get('[data-testid="card-title"]').should('contain', titleText)
+    cy.get('.k-card').find('.card-actions').get('[data-testid="card-actions"]').should('be.visible')
+    cy.get('.k-card').find('.card-content').get('[data-testid="card-content"]').should('be.visible')
+    cy.get('.k-card').find('.card-footer').get('[data-testid="card-footer"]').should('be.visible')
   })
 })