feat(*): kongponents alpha [KHCP-9494]

package.json

@@ -25,7 +25,7 @@
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.5.2",
     "@kong/design-tokens": "^1.11.9",
-    "@kong/kongponents": "^8.126.2",
+    "@kong/kongponents": "9.0.0-alpha.54",
     "@rushstack/eslint-patch": "^1.5.1",
     "@types/flat": "^5.0.3",
     "@types/js-yaml": "^4.0.6",

packages/analytics/analytics-chart/package.json

@@ -21,14 +21,14 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "^8.126.2",
+    "@kong/kongponents": "9.0.0-alpha.54",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
     "@kong-ui-public/sandbox-layout": "workspace:^",
     "@kong/design-tokens": "^1.11.9",
-    "@kong/kongponents": "^8.126.2",
+    "@kong/kongponents": "9.0.0-alpha.54",
     "@types/uuid": "^9.0.5",
     "vue": "^3.3.4"
   },
@@ -63,6 +63,7 @@
   },
   "dependencies": {
     "@kong-ui-public/analytics-utilities": "workspace:^0.10.1",
+    "@kong/icons": "^1.7.8",
     "approximate-number": "^2.1.1",
     "chart.js": "^4.4.0",
     "chartjs-adapter-date-fns": "^3.0.0",
@@ -74,7 +75,7 @@
     "vue-chartjs": "^5.2.0"
   },
   "distSizeChecker": {
-    "warningLimit": "1.2MB",
-    "errorLimit": "1.3MB"
+    "warningLimit": "1.35MB",
+    "errorLimit": "1.4MB"
   }
 }

packages/analytics/analytics-chart/sandbox/pages/BarChartDemo.vue

@@ -95,7 +95,7 @@
       <KLabel>Dataset options</KLabel>
       <div class="dataset-options">
         <KButton
-          appearance="outline"
+          appearance="secondary"
           size="small"
           @click="addDataset()"
         >

packages/analytics/analytics-chart/sandbox/pages/ChartDemoSimple.vue

@@ -121,15 +121,15 @@
         <KLabel>Dataset options</KLabel>
         <div class="dataset-options">
           <KButton
-            appearance="outline"
+            appearance="secondary"
             class="first-button"
             size="small"
             @click="randomizeData()"
           >
             Randomize data
           </KButton>
           <KButton
-            appearance="outline"
+            appearance="secondary"
             size="small"
             @click="addDataset()"
           >
@@ -291,7 +291,6 @@ const exploreResult = computed<AnalyticsExploreV2Result | null>(() => {
   const end = Date.now()
 
   const records: AnalyticsExploreRecord[] = []
-  const totalRequests = 0
 
   const dimensions = [...statusCodeDimensionValues.value]
 
@@ -471,16 +470,16 @@ const isTopNTable = computed<boolean>(() => {
   return (ChartTypesSimple.TOPN === chartType.value)
 })
 
-const onMetricSelected = (item: any) => {
-  if (!item) {
-    return
-  }
+// const onMetricSelected = (item: any) => {
+//   if (!item) {
+//     return
+//   }
 
-  selectedMetric.value = {
-    name: item.value,
-    unit: item.unit,
-  }
-}
+//   selectedMetric.value = {
+//     name: item.value,
+//     unit: item.unit,
+//   }
+// }
 
 watch(multiDimensionToggle, () => {
   serviceDimensionValues.value = new Set(Array(5).fill(0).map(() => `Service${rand(1, 100)}`))

packages/analytics/analytics-chart/src/components/AnalyticsChart.vue

@@ -15,13 +15,10 @@
           placement="right"
         >
           <div class="limit-icon-wrapper">
-            <KIcon
-              class="warning-icon"
-              color="currentColor"
-              hide-title
-              icon="warning"
-              :secondary-color="KUI_COLOR_TEXT_WARNING"
-              size="18"
+            <WarningIcon
+              :color="KUI_COLOR_TEXT_WARNING"
+              decorative
+              :size="KUI_ICON_SIZE_40"
             />
           </div>
           <template #content>
@@ -109,7 +106,8 @@ import { GranularityKeys, msToGranularity } from '@kong-ui-public/analytics-util
 import type { AnalyticsExploreResult, AnalyticsExploreV2Result, GranularityFullObj } from '@kong-ui-public/analytics-utilities'
 import { datavisPalette, hasMillisecondTimestamps } from '../utils'
 import TimeSeriesChart from './chart-types/TimeSeriesChart.vue'
-import { KUI_COLOR_TEXT_WARNING } from '@kong/design-tokens'
+import { KUI_COLOR_TEXT_WARNING, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
+import { WarningIcon } from '@kong/icons'
 
 const props = defineProps({
   chartData: {
@@ -340,7 +338,6 @@ provide('legendPosition', toRef(props, 'legendPosition'))
   }
 
   .limit-icon-wrapper {
-    color: $kui-color-text-inverse;
     display: flex;
     flex-direction: row;
   }

packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue

@@ -9,10 +9,10 @@
   >
     <div class="tooltip-title">
       <span class="title font-bold">{{ tooltipTitle }}</span>
-      <KIcon
+      <DragIcon
         v-if="locked"
         class="drag-icon"
-        icon="drag"
+        :color="KUI_COLOR_TEXT_NEUTRAL"
       />
       <span
         v-if="context"
@@ -41,6 +41,8 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { DragIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_NEUTRAL } from '@kong/design-tokens'
 
 const emit = defineEmits(['dimensions', 'top', 'left'])
 

packages/analytics/analytics-metric-provider/package.json

@@ -56,9 +56,10 @@
   },
   "peerDependencies": {
     "@kong-ui-public/i18n": "workspace:^",
-    "@kong/kongponents": "^8.126.2"
+    "@kong/kongponents": "9.0.0-alpha.54"
   },
   "devDependencies": {
-    "@kong-ui-public/i18n": "workspace:^"
+    "@kong-ui-public/i18n": "workspace:^",
+    "@kong/kongponents": "9.0.0-alpha.54"
   }
 }

packages/analytics/metric-cards/package.json

@@ -38,12 +38,12 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "peerDependencies": {
-    "@kong/kongponents": "^8.126.2",
+    "@kong/kongponents": "9.0.0-alpha.54",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@kong/design-tokens": "^1.11.9",
-    "@kong/kongponents": "^8.126.2",
+    "@kong/kongponents": "9.0.0-alpha.54",
     "vue": "^3.3.4"
   },
   "dependencies": {

packages/analytics/metric-cards/src/components/MetricCardContainer.vue

@@ -7,11 +7,7 @@
       v-if="allCardsHaveErrors"
       class="error-display"
     >
-      <KIcon
-        class="error-display-icon"
-        icon="warning"
-        size="24"
-      />
+      <WarningIcon class="error-display-icon" />
       <div
         v-if="errorMessage"
         class="error-display-message"
@@ -54,6 +50,7 @@ import type { MetricCardDef, MetricCardDisplayValue } from '../types'
 import { changePolarity, metricChange, defineIcon, calculateChange } from '../utilities'
 import MetricsCard from './display/MetricsCard.vue'
 import MetricCardLoadingSkeleton from './display/MetricCardLoadingSkeleton.vue'
+import { WarningIcon } from '@kong/icons'
 
 // 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.

packages/analytics/metric-cards/src/components/display/MetricsCard.vue

@@ -18,9 +18,9 @@
         :label="tooltip"
         placement="right"
       >
-        <KIcon
-          icon="info"
-          size="12"
+        <InfoIcon
+          :color="KUI_COLOR_TEXT_NEUTRAL"
+          :size="KUI_ICON_SIZE_30"
         />
       </KTooltip>
     </div>
@@ -40,11 +40,11 @@
         v-if="hasError"
         class="metricscard-error"
       >
-        <KIcon
-          icon="warning"
-          size="20"
+        <WarningIcon
+          :color="KUI_COLOR_TEXT_NEUTRAL"
+          :size="KUI_ICON_SIZE_40"
         />
-        <div>{{ errorMessage }}</div>
+        <div>&nbsp;{{ errorMessage }}</div>
       </div>
       <!-- Metric value -->
       <div
@@ -103,19 +103,19 @@ import {
   KUI_FONT_SIZE_30, // 14px
   KUI_FONT_SIZE_100, // 48px
   KUI_ICON_SIZE_30,
+  KUI_ICON_SIZE_40,
   KUI_COLOR_TEXT_SUCCESS, // Positive trend
   KUI_COLOR_TEXT_NEUTRAL_STRONG, // Neutral trend
   KUI_COLOR_TEXT_NEUTRAL,
 } from '@kong/design-tokens'
 import { MetricCardType } from '../../enums'
 import { MetricCardSize } from '../../constants'
+import { InfoIcon, WarningIcon, IndeterminateSmallIcon, CloudUploadIcon, EqualIcon, ResponseIcon, VitalsIcon, WarningOutlineIcon } from '@kong/icons'
 
 // 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 { IndeterminateSmallIcon, CloudUploadIcon, EqualIcon, ResponseIcon, VitalsIcon, WarningOutlineIcon } from '@kong/icons'
-
 const iconMap = new Map<MetricCardType, any>([
   [MetricCardType.GENERIC_COUNT, VitalsIcon],
   [MetricCardType.TRAFFIC, CloudUploadIcon],

packages/core/app-layout/docs/sidebar.md

@@ -37,7 +37,7 @@ A Kong UI dynamic sidebar component.
 - `vue` and `vue-router` must be initialized in the host application
 - `@kong/kongponents` must be available as a `dependency` in the host application, along with the package's style imports. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents). Specifically, the following Kongponents must be available:
   - `KDropdownItem`
-  - `KDropdownMenu`
+  - `KDropdown`
   - `KIcon`
   - `KTooltip`
 - The sidebar is set to `position: fixed` and is expected to render at 100% of the viewport height. This means your Navbar, etc. should never be placed above the sidebar unless on mobile.

packages/core/app-layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kong-ui-public/app-layout",
-  "version": "0.24.10",
+  "version": "1.0.0",
   "type": "module",
   "main": "./dist/app-layout.umd.js",
   "module": "./dist/app-layout.es.js",
@@ -38,18 +38,19 @@
     "test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
   },
   "peerDependencies": {
-    "@kong/kongponents": "^8.126.2",
+    "@kong/kongponents": "9.0.0-alpha.54",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },
   "dependencies": {
+    "@kong/icons": "^1.7.8",
     "focus-trap": "^7.5.3",
     "focus-trap-vue": "^4.0.2",
     "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {
     "@kong/design-tokens": "^1.11.9",
-    "@kong/kongponents": "^8.126.2",
+    "@kong/kongponents": "9.0.0-alpha.54",
     "@types/lodash.clonedeep": "^4.5.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"

packages/core/app-layout/sandbox/pages/KongManagerLayoutExample.vue

@@ -67,8 +67,8 @@
           Docs / Support
         </a>
       </div>
-      <KDropdownMenu
-        button-appearance="btn-link"
+      <KDropdown
+        appearance="tertiary"
         class="admin-menu"
         :items="[
           { label: 'AppLayout', to: '/' },
@@ -321,7 +321,7 @@ const sidebarItemsTop = computed((): SidebarPrimaryItem[] => {
   --KButtonLink: #fff;
 
   // Ensure button is aligned center
-  :deep(.k-dropdown-trigger) {
+  :deep(.dropdown-trigger) {
     > div {
       align-items: center;
       display: flex;

packages/core/app-layout/sandbox/pages/PageHeaderPage.vue

@@ -38,7 +38,7 @@
             label-position="left"
           />
           <KButton
-            appearance="creation"
+            appearance="primary"
             icon="plus"
           >
             Do Things
@@ -60,18 +60,11 @@
       title="About this Cat"
     >
       <template #actions>
-        <KButton
-          appearance="btn-link"
-          class="about-action-button"
-        >
-          <template #icon>
-            <KIcon
-              color="#0044f4"
-              icon="pencil"
-              size="16"
-            />
-          </template>
-        </KButton>
+        <EditIcon
+          color="#0044f4"
+          role="button"
+          :size="20"
+        />
       </template>
 
       <div>
@@ -115,7 +108,7 @@
           This cat has a habit of sleeping in uncomfortable looking positions.
         </div>
         <div>
-          <KButton appearance="btn-link">
+          <KButton appearance="tertiary">
             <template #icon>
               🍔
             </template>
@@ -135,6 +128,7 @@
 import { computed, ref } from 'vue'
 import type { Method } from '@kong/kongponents'
 import { AppAboutSection, AppPageHeader } from '../../src'
+import { EditIcon } from '@kong/icons'
 
 const breadcrumbs = computed(() => {
   return [
@@ -178,8 +172,6 @@ const enabled = ref(false)
 
 .about-action-button {
   display: flex;
-  min-height: unset !important;
-  height: 16px !important;
 }
 
 .badge-label {
@@ -189,9 +181,9 @@ const enabled = ref(false)
 }
 
 .method-badges {
+  column-gap: 4px;
   display: flex;
   flex-wrap: wrap;
-  column-gap: 4px;
   row-gap: 8px;
 }
 </style>