From cedc3c3aea5edad5349c5972cd301e603920eed7 Mon Sep 17 00:00:00 2001
From: mihai-peteu <mihai.peteu@konghq.com>
Date: Thu, 21 Mar 2024 07:56:27 -0700
Subject: [PATCH] feat: default to span

---
 packages/analytics/metric-cards/sandbox/App.vue   | 15 +++++++--------
 .../src/components/display/MetricsCard.vue        |  8 ++------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/analytics/metric-cards/sandbox/App.vue b/packages/analytics/metric-cards/sandbox/App.vue
index 4cfa8b01f2..0e0d79ea6e 100644
--- a/packages/analytics/metric-cards/sandbox/App.vue
+++ b/packages/analytics/metric-cards/sandbox/App.vue
@@ -74,19 +74,18 @@
 </template>
 
 <script setup lang="ts">
-import { MetricCardContainer } from '../src'
+import { MetricCardContainer, type MetricCardDef } from '../src'
 import { DECIMAL_DISPLAY, metricChange } from '../src/utilities'
 import type { MetricCardContainerOptions } from '../src/types'
 import { MetricCardType } from '../src/enums'
 import { MetricCardSize } from '../src/constants'
 
-const cards = [
+const cards: MetricCardDef[] = [
   {
     cardType: MetricCardType.TRAFFIC,
     currentValue: 192895156,
     previousValue: 236609609,
     title: 'Requests',
-    titleTag: 'h4',
     description: 'Requests proxied through all data plane nodes',
     tooltip: 'This is a tooltip',
     increaseIsBad: false,
@@ -99,7 +98,6 @@ const cards = [
     formatChangeFn: val => `${metricChange(val * 100, true, 'N/A')}`,
     formatValueFn: val => `${val.toFixed(DECIMAL_DISPLAY)}%`,
     title: 'Error Rate',
-    titleTag: 'h4',
     description: 'Rate of requests that ended up in a 5xx response',
     increaseIsBad: true,
     trendRange: 'vs last week',
@@ -110,7 +108,6 @@ const cards = [
     previousValue: 511,
     formatValueFn: val => `${val}ms`,
     title: 'P99 Latency',
-    titleTag: 'h4',
     description: 'Time taken to send a response back to the client',
     increaseIsBad: true,
     trendRange: 'vs last week',
@@ -120,7 +117,6 @@ const cards = [
     currentValue: 5,
     previousValue: 4,
     title: 'Active Runtimes',
-    titleTag: 'h4',
     increaseIsBad: true,
     trendRange: 'vs last week',
   },
@@ -130,13 +126,16 @@ const cards = [
     previousValue: 23.2121,
     formatValueFn: val => `${val.toFixed(0)}%`,
     title: 'Saturation',
-    titleTag: 'h4',
     tooltip: 'A secondary tooltip',
     increaseIsBad: true,
     trendRange: 'vs last week',
   },
 ]
 
+const cardsWithHeadings: MetricCardDef[] = cards.map((item) => {
+  return { titleTag: 'h2', ...item }
+})
+
 const cardsWithErrors = JSON.parse(JSON.stringify(cards))
 cardsWithErrors[0].hasError = true
 cardsWithErrors[1].hasError = true
@@ -167,7 +166,7 @@ const cardsRegularCompact: MetricCardContainerOptions = {
 }
 
 const cardsXL: MetricCardContainerOptions = {
-  cards: [...cards].slice(0, 3),
+  cards: [...cardsWithHeadings].slice(0, 3),
   loading: false,
   hasTrendAccess: true,
   fallbackDisplayText: 'Not available',
diff --git a/packages/analytics/metric-cards/src/components/display/MetricsCard.vue b/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
index e7b0fd3d26..43005eedf2 100644
--- a/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
+++ b/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
@@ -11,11 +11,7 @@
         :color="KUI_COLOR_TEXT_NEUTRAL"
         :size="KUI_ICON_SIZE_30"
       />
-      <span v-if="!titleTag">{{ title }}</span>
-      <component
-        :is="titleTag"
-        else
-      >
+      <component :is="titleTag">
         {{ title }}
       </component>
       <KTooltip
@@ -192,7 +188,7 @@ const props = defineProps({
   },
   titleTag: {
     type: String as PropType<HeaderTag>,
-    default: '',
+    default: 'span',
   },
 })