Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 19 commits into from
Mar 20, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
5f712c6
fix(*): proper heading element in widgets [KHCP-11027]
portikM Mar 15, 2024
ca85bfe
chore(deps): bump kongponents [KHCP-11027]
portikM Mar 15, 2024
a60d3c2
fix(entity-base-table): add title tag prop [KHCP-11027]
portikM Mar 15, 2024
55e07fc
fix(entities): add title tag prop [KHCP-11027]
portikM Mar 15, 2024
552653f
Merge branch 'main' into fix/khcp-11027-widget-heading-tag
portikM Mar 15, 2024
61c7dbf
fix(entities): title tag prop type [KHCP-11027]
portikM Mar 15, 2024
d93a03d
fix(*): heading styling [KHCP-11027]
portikM Mar 18, 2024
1c07e03
fix: resolve conflicts
portikM Mar 18, 2024
83bdcf4
fix: stylelint:fix
portikM Mar 18, 2024
259c668
fix(app-about-section): kcard title tag [KHCP-11027]
portikM Mar 18, 2024
58863b0
fix(entities-consumers): form heading [KHCP-11027]
portikM Mar 18, 2024
de5ca2a
fix: resolve conflicts
portikM Mar 18, 2024
25efb6e
fix: bad rebase [KHCP-11027]
portikM Mar 18, 2024
4d8558c
fix(top-n-table): title tag [KHCP-11027]
portikM Mar 18, 2024
f568f38
fix(*): add title tag props [KHCP-11027]
portikM Mar 20, 2024
50d46ca
chore(deps): bump kongponents
portikM Mar 20, 2024
394ba84
fix: resolve conflicts
portikM Mar 20, 2024
4cfa6c4
docs(metrics-card): minor fix [KHCP-11027]
portikM Mar 20, 2024
5bfaafa
chore(deps): peer dependencies [KHCP-11027]
portikM Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions packages/analytics/analytics-chart/docs/top-n-table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/analytics/analytics-chart/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
13 changes: 8 additions & 5 deletions packages/analytics/analytics-chart/src/components/TopNTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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: {
Expand All @@ -132,6 +134,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
titleTag: {
type: String as PropType<HeaderTag>,
default: 'h2',
},
})

const { i18n } = composables.useI18n()
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/analytics/analytics-metric-provider/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
4 changes: 2 additions & 2 deletions packages/analytics/dashboard-renderer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
},
Expand Down
35 changes: 23 additions & 12 deletions packages/analytics/metric-cards/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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`
Expand All @@ -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`

Expand All @@ -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
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/analytics/metric-cards/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
4 changes: 4 additions & 0 deletions packages/analytics/metric-cards/sandbox/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -117,6 +119,7 @@ const cards = [
currentValue: 5,
previousValue: 4,
title: 'Active Runtimes',
titleTag: 'h4',
increaseIsBad: true,
trendRange: 'vs last week',
},
Expand All @@ -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',
Expand Down
1 change: 1 addition & 0 deletions packages/analytics/metric-cards/src/components/MetricCardContainer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand Down
19 changes: 12 additions & 7 deletions packages/analytics/metric-cards/src/components/display/MetricsCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -183,6 +186,10 @@ const props = defineProps({
required: false,
default: () => 'lg',
},
titleTag: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you explain more about the use case behind making this a property? I'd expect we'd want all metric cards to have the same title tag...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is the case most of the time, however if metrics card is seeded inside some other widget that already has an h2 heading - it should be h3 to not break the hierarchy - that's when this prop comes in handy. Regardless of what tag is used - styling for the title remains consistent though

type: String as PropType<HeaderTag>,
default: 'h2',
},
})

const colorAttribute = (polarity: number): string => {
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 2 additions & 0 deletions packages/analytics/metric-cards/src/types/metric-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -13,6 +14,7 @@ export interface MetricCardDef {
formatChangeFn?: (rawValue: number) => string
description?: string
title?: string
titleTag?: HeaderTag
hasError?: boolean
tooltip?: string
trendRange?: string
Expand Down
4 changes: 2 additions & 2 deletions packages/core/app-layout/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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"
Expand Down
6 changes: 4 additions & 2 deletions packages/core/app-layout/src/components/aboutSection/AppAboutSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/core/documentation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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": {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/forms/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/core/misc-widgets/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
Loading
Loading