From dceb30cda6641a59ceb06eb33a0c9a6c229469b5 Mon Sep 17 00:00:00 2001
From: mihai-peteu <mihai.peteu@konghq.com>
Date: Thu, 21 Mar 2024 07:36:57 -0700
Subject: [PATCH] fix(metric-cards): don't default to a heading tag

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

diff --git a/packages/analytics/metric-cards/sandbox/App.vue b/packages/analytics/metric-cards/sandbox/App.vue
index 69a6296efb..4cfa8b01f2 100644
--- a/packages/analytics/metric-cards/sandbox/App.vue
+++ b/packages/analytics/metric-cards/sandbox/App.vue
@@ -86,6 +86,7 @@ const cards = [
     currentValue: 192895156,
     previousValue: 236609609,
     title: 'Requests',
+    titleTag: 'h4',
     description: 'Requests proxied through all data plane nodes',
     tooltip: 'This is a tooltip',
     increaseIsBad: false,
@@ -98,7 +99,7 @@ const cards = [
     formatChangeFn: val => `${metricChange(val * 100, true, 'N/A')}`,
     formatValueFn: val => `${val.toFixed(DECIMAL_DISPLAY)}%`,
     title: 'Error Rate',
-    titleTag: 'h3',
+    titleTag: 'h4',
     description: 'Rate of requests that ended up in a 5xx response',
     increaseIsBad: true,
     trendRange: 'vs last week',
@@ -109,7 +110,7 @@ const cards = [
     previousValue: 511,
     formatValueFn: val => `${val}ms`,
     title: 'P99 Latency',
-    titleTag: 'h3',
+    titleTag: 'h4',
     description: 'Time taken to send a response back to the client',
     increaseIsBad: true,
     trendRange: 'vs last week',
diff --git a/packages/analytics/metric-cards/src/components/display/MetricsCard.vue b/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
index 03762ac433..e7b0fd3d26 100644
--- a/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
+++ b/packages/analytics/metric-cards/src/components/display/MetricsCard.vue
@@ -11,7 +11,11 @@
         :color="KUI_COLOR_TEXT_NEUTRAL"
         :size="KUI_ICON_SIZE_30"
       />
-      <component :is="titleTag">
+      <span v-if="!titleTag">{{ title }}</span>
+      <component
+        :is="titleTag"
+        else
+      >
         {{ title }}
       </component>
       <KTooltip
@@ -188,7 +192,7 @@ const props = defineProps({
   },
   titleTag: {
     type: String as PropType<HeaderTag>,
-    default: 'h2',
+    default: '',
   },
 })