fix(metric-cards): don't default to a heading tag

Kong · Mar 21, 2024 · dceb30c · dceb30c
1 parent f0adf5e
commit dceb30c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -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: '',
   },
 })