fix(kcard): add title tag prop (#2069)

* fix(kcard): add title tag prop

* fix(kcard): title tag type

* docs(card): prop types

docs/components/card.md

@@ -74,6 +74,27 @@ String to be used as a title. Can also be [slotted](#slots).
 <KCard title="Card Title" />
 ```
 
+### titleTag
+
+HTML element you want title to be rendered as. Defaults to `div`.
+
+Accepted values are:
+* `div`
+* `span`
+* `a`
+* `h1`
+* `h2`
+* `h3`
+* `h4`
+* `h5`
+* `h6`
+
+<KCard title-tag="h4" title="Card Title H4 Heading" />
+
+```html
+<KCard title-tag="h4" title="Card Title H4 Heading" />
+```
+
 ## Slots
 
 ### default

sandbox/pages/SandboxCard.vue

@@ -24,6 +24,14 @@
           Card content slot
         </KCard>
       </SandboxSectionComponent>
+      <SandboxSectionComponent title="titleTag">
+        <KCard
+          title="Card title"
+          title-tag="h2"
+        >
+          Card content slot
+        </KCard>
+      </SandboxSectionComponent>
 
       <!-- Slots -->
       <SandboxTitleComponent

src/components/KCard/KCard.cy.ts

@@ -13,14 +13,16 @@ describe('KCard', () => {
 
   it('renders title prop when passed', () => {
     const titleProp = 'Title prop'
+    const titleTag = 'h5'
 
     mount(KCard, {
       props: {
         title: titleProp,
+        titleTag,
       },
     })
 
-    cy.get('.k-card').find('.card-title').should('contain', titleProp)
+    cy.get('.k-card').find(`${titleTag}.card-title`).should('contain', titleProp)
   })
 
   it('renders slots when passed', () => {

src/components/KCard/KCard.vue

@@ -4,14 +4,15 @@
       v-if="showCardHeader"
       class="card-header"
     >
-      <div
+      <component
+        :is="titleTag"
         v-if="$slots.title || title"
         class="card-title"
       >
         <slot name="title">
           {{ title }}
         </slot>
-      </div>
+      </component>
       <div
         v-if="$slots.actions"
         class="card-actions"
@@ -35,13 +36,20 @@
 </template>
 
 <script setup lang="ts">
-import { useSlots, computed } from 'vue'
+import { useSlots, computed, type PropType } from 'vue'
+import { HeaderTags } from '@/types'
+import type { HeaderTag } from '@/types'
 
 const props = defineProps({
   title: {
     type: String,
     default: '',
   },
+  titleTag: {
+    type: String as PropType<HeaderTag>,
+    default: 'div',
+    validator: (value: HeaderTag): boolean => HeaderTags.includes(value),
+  },
 })
 
 const slots = useSlots()
@@ -73,6 +81,7 @@ const showCardHeader = computed((): boolean => {
       font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
       letter-spacing: var(--kui-letter-spacing-minus-30, $kui-letter-spacing-minus-30);
       line-height: var(--kui-line-height-40, $kui-line-height-40);
+      margin: var(--kui-space-0, $kui-space-0);
     }
 
     .card-actions {

src/types/card.ts

@@ -0,0 +1,3 @@
+export type HeaderTag = 'div' | 'span' | 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+export const HeaderTags: HeaderTag[] = ['div', 'span', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']

src/types/index.ts

@@ -3,11 +3,13 @@ export * from './alert'
 export * from './badge'
 export * from './breadcrumbs'
 export * from './button'
+export * from './card'
 export * from './catalog'
 export * from './code-block'
 export * from './collapse'
 export * from './date-time-picker'
 export * from './dropdown'
+export * from './empty-state'
 export * from './multi-select'
 export * from './table'
 export * from './tabs'
@@ -27,4 +29,3 @@ export * from './toaster'
 export * from './inline-edit'
 export * from './text-area'
 export * from './tree-list'
-export * from './empty-state'