fix(*): proper heading element in widgets [KHCP-11027] (#1252)

* fix(*): proper heading element in widgets [KHCP-11027] * chore(deps): bump kongponents [KHCP-11027] * fix(entity-base-table): add title tag prop [KHCP-11027] * fix(entities): add title tag prop [KHCP-11027] * fix(entities): title tag prop type [KHCP-11027] * fix(*): heading styling [KHCP-11027] * fix: stylelint:fix * fix(app-about-section): kcard title tag [KHCP-11027] * fix(entities-consumers): form heading [KHCP-11027] * fix: bad rebase [KHCP-11027] * fix(top-n-table): title tag [KHCP-11027] * fix(*): add title tag props [KHCP-11027] * chore(deps): bump kongponents * docs(metrics-card): minor fix [KHCP-11027] * chore(deps): peer dependencies [KHCP-11027]
Kong · Mar 20, 2024 · b66ce71 · b66ce71
1 parent bd0eadd
commit b66ce71
Show file tree

Hide file tree

Showing 45 changed files with 681 additions and 341 deletions.
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.6.5",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "@rushstack/eslint-patch": "^1.7.2",
     "@types/flat": "^5.0.5",
     "@types/js-yaml": "^4.0.9",

diff --git a/packages/analytics/analytics-chart/docs/top-n-table.md b/packages/analytics/analytics-chart/docs/top-n-table.md
@@ -62,6 +62,10 @@ Text to be displayed on the empty state.
 
 Whether or not to display the loading state.
 
+#### `titleTag`
+
+HTML element you want title to be rendered as. Defaults to `h2`.
+
 ### Slots
 
 #### name

diff --git a/packages/analytics/analytics-chart/package.json b/packages/analytics/analytics-chart/package.json
@@ -22,14 +22,14 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "vue": ">= 3.3.13 < 4"
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "@types/uuid": "^9.0.8",
     "file-saver": "^2.0.5",
     "lodash.mapkeys": "^4.6.0",

diff --git a/packages/analytics/analytics-chart/src/components/TopNTable.vue b/packages/analytics/analytics-chart/src/components/TopNTable.vue
@@ -1,17 +1,18 @@
 <template>
   <KCard
     class="kong-ui-public-top-n-table"
+    :title-tag="titleTag"
   >
     <template
       v-if="title"
       #title
     >
-      <div
+      <span
         class="top-n-card-title"
         data-testid="top-n-card-title"
       >
         {{ title }}
-      </div>
+      </span>
     </template>
     <template
       v-if="description"
@@ -110,6 +111,7 @@ import type { AnalyticsExploreRecord, ExploreResultV4 } from '@kong-ui-public/an
 // @ts-ignore - approximate-number no exported module
 import approxNum from 'approximate-number'
 import composables from '../composables'
+import type { HeaderTag } from '@kong/kongponents'
 
 const props = defineProps({
   title: {
@@ -132,6 +134,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  titleTag: {
+    type: String as PropType<HeaderTag>,
+    default: 'h2',
+  },
 })
 
 const { i18n } = composables.useI18n()
@@ -229,9 +235,6 @@ const getValue = (record: AnalyticsExploreRecord): string => {
   border: none !important;
   height: 100%;
   padding: 0 !important;
-  .top-n-card-title {
-    font-size: $kui-font-size-40;
-  }
 
   .top-n-card-description {
     color: $kui-color-text-neutral;

diff --git a/packages/analytics/analytics-metric-provider/package.json b/packages/analytics/analytics-metric-provider/package.json
@@ -65,7 +65,7 @@
     "@kong-ui-public/analytics-config-store": "workspace:^",
     "@kong-ui-public/analytics-utilities": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "pinia": ">= 2.1.7 < 3"
   }
 }
diff --git a/packages/analytics/dashboard-renderer/package.json b/packages/analytics/dashboard-renderer/package.json
@@ -45,7 +45,7 @@
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "json-schema-to-ts": "^3.0.0",
     "pinia": ">= 2.1.7 < 3",
     "swrv": "^1.0.4",
@@ -73,7 +73,7 @@
     "@kong-ui-public/analytics-metric-provider": "workspace:^",
     "@kong-ui-public/analytics-utilities": "workspace:^",
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "swrv": "^1.0.4",
     "vue": ">= 3.3.13 < 4"
   },

diff --git a/packages/analytics/metric-cards/README.md b/packages/analytics/metric-cards/README.md
@@ -2,15 +2,16 @@
 
 A Kong UI component for display Traffic, Error Rate, and P99 Latency insights in a card-like format
 
-- [@kong-ui-public/metric-cards](#kong-ui-publicmetric-cards)
-  - [Features](#features)
-  - [Requirements](#requirements)
-    - [CSS Variables](#css-variables)
-    - [Install](#install)
-    - [Props](#props)
-  - [Included Components](#included-components)
-  - [Usage](#usage)
-
+- [Features](#features)
+- [Requirements](#requirements)
+  - [CSS Variables](#css-variables)
+  - [Install](#install)
+  - [Props](#props)
+- [Included Components](#included-components)
+- [Exports](#exports)
+  - [Types](#types)
+  - [Enums](#enums)
+- [Usage](#usage)
 
 ## Features
 
@@ -26,6 +27,7 @@ A Kong UI component for display Traffic, Error Rate, and P99 Latency insights in
   - `KTooltip`
 
 ### CSS Variables
+
 Variable | Description | Default
 ---------|----------|---------
 `--kong-ui-metric-card-background` | The background of the `.kong-ui-public-metric-card-container` main container | `transparent`
@@ -44,12 +46,12 @@ Variable | Description | Default
 
 ### Props
 
-####  `cardType`
+#### `cardType`
 
 One of the three golden signals (Traffic, Error Rate, Latency) or a Generic count
 
-  - type: `MetricCardType`
-  - required: `false`
+- type: `MetricCardType`
+- required: `false`
 
 #### `title`
 
@@ -58,6 +60,14 @@ Title to be displayed in the metric card header
 - type: `String`
 - required: `false`
 
+#### `titleTag`
+
+HTML element you want title to be rendered as.
+
+- type: `String`
+- required: `false`
+- default: `h2`
+
 #### `tooltip`
 
 Deprecated
@@ -145,6 +155,7 @@ const metricCardOptions = {
       currentValue: 192895156,
       previousValue: 236609609,
       title: 'Number of Requests',
+      titleTag: 'h3',
       description: 'Requests sent throgh all data plane nodes'
       increaseIsBad: false,
       cardSize: MetricCardSize.Large,

diff --git a/packages/analytics/metric-cards/package.json b/packages/analytics/metric-cards/package.json
@@ -39,12 +39,12 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "peerDependencies": {
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "vue": ">= 3.3.13 < 4"
   },
   "devDependencies": {
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "vue": "^3.4.21"
   },
   "dependencies": {

diff --git a/packages/analytics/metric-cards/sandbox/App.vue b/packages/analytics/metric-cards/sandbox/App.vue
@@ -98,6 +98,7 @@ const cards = [
     formatChangeFn: val => `${metricChange(val * 100, true, 'N/A')}`,
     formatValueFn: val => `${val.toFixed(DECIMAL_DISPLAY)}%`,
     title: 'Error Rate',
+    titleTag: 'h3',
     description: 'Rate of requests that ended up in a 5xx response',
     increaseIsBad: true,
     trendRange: 'vs last week',
@@ -108,6 +109,7 @@ const cards = [
     previousValue: 511,
     formatValueFn: val => `${val}ms`,
     title: 'P99 Latency',
+    titleTag: 'h3',
     description: 'Time taken to send a response back to the client',
     increaseIsBad: true,
     trendRange: 'vs last week',
@@ -117,6 +119,7 @@ const cards = [
     currentValue: 5,
     previousValue: 4,
     title: 'Active Runtimes',
+    titleTag: 'h4',
     increaseIsBad: true,
     trendRange: 'vs last week',
   },
@@ -126,6 +129,7 @@ const cards = [
     previousValue: 23.2121,
     formatValueFn: val => `${val.toFixed(0)}%`,
     title: 'Saturation',
+    titleTag: 'h4',
     tooltip: 'A secondary tooltip',
     increaseIsBad: true,
     trendRange: 'vs last week',

diff --git a/packages/analytics/metric-cards/src/components/MetricCardContainer.vue b/packages/analytics/metric-cards/src/components/MetricCardContainer.vue
@@ -34,6 +34,7 @@
         :error-message="errorMessage"
         :has-error="card.hasError"
         :title="card.title"
+        :title-tag="card.titleTag"
         :tooltip="card.tooltip"
         :trend-range="card.trendRange"
       />

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,9 @@
         :color="KUI_COLOR_TEXT_NEUTRAL"
         :size="KUI_ICON_SIZE_30"
       />
-      <span>{{ title }}</span>
+      <component :is="titleTag">
+        {{ title }}
+      </component>
       <KTooltip
         v-if="tooltip"
         class="metricscard-tooltip"
@@ -112,6 +114,7 @@ import {
 import { MetricCardType } from '../../enums'
 import { MetricCardSize } from '../../constants'
 import { InfoIcon, WarningIcon, IndeterminateSmallIcon, CloudUploadIcon, EqualIcon, ResponseIcon, VitalsIcon, WarningOutlineIcon } from '@kong/icons'
+import type { HeaderTag } from '@kong/kongponents'
 
 // Import any one of the `@kong/icons` components to access the interface - they are all the same.
 // Then alias as `GenericIcon` to provide the icon interface to the prop types.
@@ -183,6 +186,10 @@ const props = defineProps({
     required: false,
     default: () => 'lg',
   },
+  titleTag: {
+    type: String as PropType<HeaderTag>,
+    default: 'h2',
+  },
 })
 
 const colorAttribute = (polarity: number): string => {
@@ -265,12 +272,10 @@ $row-gap-size: 12px;
     color: var(--kong-ui-metric-card-title, $kui-color-text);
     display: flex;
     flex-direction: row;
-    font-size: $kui-font-size-30;
-    font-weight: $kui-font-weight-medium;
-
-    &.sm {
-      font-size: $kui-font-size-20;
-    }
+    font-size: $kui-font-size-40;
+    font-weight: $kui-font-weight-bold;
+    line-height: $kui-line-height-30;
+    margin: $kui-space-0;
   }
 
   &-description {

diff --git a/packages/analytics/metric-cards/src/types/metric-card.ts b/packages/analytics/metric-cards/src/types/metric-card.ts
@@ -3,6 +3,7 @@ import type { MetricCardSize } from '../constants'
 // Import any one of the `@kong/icons` components to access the interface - they are all the same.
 // Then alias as `GenericIcon` to provide the icon interface to the prop types.
 import type { KongIcon as GenericIcon } from '@kong/icons'
+import type { HeaderTag } from '@kong/kongponents'
 
 export interface MetricCardDef {
   cardType?: MetricCardType
@@ -13,6 +14,7 @@ export interface MetricCardDef {
   formatChangeFn?: (rawValue: number) => string
   description?: string
   title?: string
+  titleTag?: HeaderTag
   hasError?: boolean
   tooltip?: string
   trendRange?: string

diff --git a/packages/core/app-layout/package.json b/packages/core/app-layout/package.json
@@ -39,7 +39,7 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "peerDependencies": {
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "vue": ">= 3.3.13 < 4",
     "vue-router": "^4.3.0"
   },
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "@types/lodash.clonedeep": "^4.5.9",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

diff --git a/packages/core/app-layout/src/components/aboutSection/AppAboutSection.vue b/packages/core/app-layout/src/components/aboutSection/AppAboutSection.vue
@@ -1,5 +1,8 @@
 <template>
-  <KCard class="kong-ui-app-about-section">
+  <KCard
+    class="kong-ui-app-about-section"
+    title-tag="h2"
+  >
     <template
       v-if="title"
       #title
@@ -140,7 +143,6 @@ const displayModified = computed(() => {
     color: $kui-color-text;
     font-size: $kui-font-size-40;
     font-weight: $kui-font-weight-bold;
-    letter-spacing: $kui-letter-spacing-minus-20;
     line-height: $kui-line-height-30;
   }
 

diff --git a/packages/core/documentation/package.json b/packages/core/documentation/package.json
@@ -41,7 +41,7 @@
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "axios": "^1.6.7",
     "vue": ">= 3.3.13 < 4"
   },
@@ -65,7 +65,7 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "vue": "^3.4.21"
   },
   "dependencies": {

diff --git a/packages/core/forms/package.json b/packages/core/forms/package.json
@@ -56,13 +56,13 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "vue": "^3.4.21"
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong/design-tokens": "1.12.10",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "@types/lodash": "^4.14.202",
     "pug": "^3.0.2"
   },

diff --git a/packages/core/misc-widgets/package.json b/packages/core/misc-widgets/package.json
@@ -40,12 +40,12 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "vue": ">= 3.3.13 < 4"
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "9.0.0-alpha.113",
+    "@kong/kongponents": "9.0.0-alpha.117",
     "vue": "^3.4.21"
   },
   "repository": {