feat(about-section): new component [khcp-8589]

packages/analytics/analytics-chart/docs/top-n-table.md

@@ -54,6 +54,14 @@ Text to be displayed opposite the card title.
 
 Text to be displayed on the empty state.
 
+#### `isLoading`
+
+- type: `Boolean`
+- required: `false`
+- default: `false`
+
+Whether or not to display the loading state.
+
 ### Slots
 
 #### name

packages/analytics/analytics-chart/sandbox/App.vue

@@ -182,6 +182,7 @@
       class="top-n-sandbox"
       :data="exploreResultV3"
       description="Last 30-Day Summary"
+      :is-loading="showLoadingState"
       title="Top 5 Routes"
     >
       <template #name="{ record }">
@@ -249,6 +250,12 @@
           :label="limitToggle ? 'Has Limit' : 'No Limit'"
         />
       </div>
+      <div v-if="isTopNTable">
+        <KInputSwitch
+          v-model="showLoadingState"
+          :label="showLoadingState ? 'Is Loading' : 'Data Loaded'"
+        />
+      </div>
       <div>
         <KInputSwitch
           v-model="emptyState"
@@ -328,6 +335,7 @@ const limitToggle = ref(false)
 const multiDimensionToggle = ref(false)
 const showAnnotationsToggle = ref(true)
 const showLegendValuesToggle = ref(true)
+const showLoadingState = ref(false)
 const emptyState = ref(false)
 const chartType = ref<ChartTypes | ChartTypesSimple>(ChartTypes.VERTICAL_BAR)
 const legendPosition = ref(ChartLegendPosition.Right)

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

@@ -35,6 +35,12 @@
         </template>
       </KEmptyState>
 
+      <KSkeleton
+        v-else-if="isLoading"
+        :table-columns="2"
+        type="table"
+      />
+
       <KEmptyState
         v-else-if="!hasData"
         cta-is-hidden
@@ -120,6 +126,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { i18n } = composables.useI18n()
@@ -233,18 +243,22 @@ const getValue = (record: AnalyticsExploreRecord): string => {
     }
 
     .column-1 {
-      padding: 0 $kui-space-80 $kui-space-60 0;
+      padding: 0 $kui-space-80 $kui-space-50 0;
     }
 
     .column-2 {
       flex: 1;
       max-width: 110px;
-      padding: 0 0 $kui-space-60 0;
+      padding: 0 0 $kui-space-50 0;
     }
 
     .table-body {
+      .table-row:first-of-type {
+        border-top: $kui-border-width-10 solid $kui-color-border;
+      }
+
       .column-1, .column-2 {
-        padding-top: $kui-space-60;
+        padding-top: $kui-space-50;
       }
 
       .column-1 {
@@ -261,3 +275,25 @@ const getValue = (record: AnalyticsExploreRecord): string => {
   }
 }
 </style>
+
+<style lang="scss">
+// TODO: clean up these styles after KCard redesign - KHCP-8971
+.kong-ui-public-top-n-table.kong-card.border {
+  border-radius: $kui-border-radius-20;
+  padding: $kui-space-70;
+
+  .k-card-header {
+    align-items: baseline;
+    margin-bottom: $kui-space-0 !important;
+
+    .k-card-title {
+      margin-bottom: $kui-space-60;
+
+      h4 {
+        font-size: $kui-font-size-40;
+        font-weight: $kui-font-weight-semibold;
+      }
+    }
+  }
+}
+</style>

packages/core/app-layout/docs/about-section.md

@@ -0,0 +1,102 @@
+# AppAboutSection.vue
+
+A Kong UI dynamic about section component.
+
+- [Features](#features)
+- [Requirements](#requirements)
+- [Usage](#usage)
+  - [Install](#install)
+  - [Props](#props)
+  - [Slots](#slots)
+
+## Features
+
+- Reactive updates based on `prop` value changes :rocket:
+- Slottable areas for displaying custom content
+
+## Requirements
+
+- `vue` 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).
+
+## Usage
+
+### Install
+
+[See instructions for installing the `@kong-ui-public/app-layout` package.](../README.md#install)
+
+### Props
+
+#### `title`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+The title text of the about section.
+
+#### `description`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+Descriptive text displayed below the `title`
+
+#### `created`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+Created timestamp displayed to the left of the `actions` slot.
+
+#### `createdLabel`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+Label text for the `created` timestamp, defaults to `Created`.
+
+#### `modified`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+Modified timestamp displayed to the left of the `actions` slot.
+
+#### `modifiedLabel`
+
+- type: `String`
+- required: `false`
+- default: `''`
+
+Label text for the `modified` timestamp, defaults to `Modified`.
+
+#### `isLoading`
+
+- type: `Boolean`
+- required: `false`
+- default: `false`
+
+Display the loading state or not.
+
+### Slots
+
+#### `actions`
+
+Content displayed opposite the title.
+
+#### `default`
+
+Main content to be displayed in the section
+
+#### `divider-section`
+
+Additional content displayed below the main content, separated with a horizontal divider.
+
+---
+
+[← Back to `@kong-ui-public/app-layout` docs](../README.md)

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

@@ -52,12 +52,89 @@
         </div>
       </template>
     </AppPageHeader>
+
+    <AppAboutSection
+      created="2023-02-17"
+      description="Some cats are cool, some are not. This one is cool."
+      modified="2023-02-17 15:23:34"
+      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>
+      </template>
+
+      <div>
+        <span class="badge-label">Name:</span>
+        <KBadge
+          appearance="neutral"
+          shape="rectangular"
+        >
+          TK
+        </KBadge>
+      </div>
+      <div>
+        <span class="badge-label">Color:</span>
+        <KBadge
+          appearance="neutral"
+          shape="rectangular"
+        >
+          BLACK
+        </KBadge>
+      </div>
+      <div>
+        <span class="badge-label">Type:</span>
+        <KBadge
+          appearance="success"
+          shape="rectangular"
+        >
+          COOL
+        </KBadge>
+      </div>
+      <div class="method-badges">
+        <span class="badge-label">Methods:</span>
+        <KMethodBadge
+          v-for="method in ['get', 'post', 'put', 'patch', 'delete', 'head', 'options', 'trace', 'connect', 'custom']"
+          :key="method"
+          :method="(method as Method)"
+        />
+      </div>
+
+      <template #divider-section>
+        <div>
+          This cat has a habit of sleeping in uncomfortable looking positions.
+        </div>
+        <div>
+          <KButton appearance="btn-link">
+            <template #icon>
+              🍔
+            </template>
+            I can haz cheezeburger
+          </KButton>
+        </div>
+        <hr>
+        <div>
+          I have a lot to say about cats.
+        </div>
+      </template>
+    </AppAboutSection>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { AppPageHeader } from '../../src'
+import type { Method } from '@kong/kongponents'
+import { AppAboutSection, AppPageHeader } from '../../src'
 
 const breadcrumbs = computed(() => {
   return [
@@ -98,4 +175,23 @@ const enabled = ref(false)
 .actions-switch {
   margin-right: 12px;
 }
+
+.about-action-button {
+  display: flex;
+  min-height: unset !important;
+  height: 16px !important;
+}
+
+.badge-label {
+  font-size: 12px;
+  line-height: 20px;
+  margin-right: 8px;
+}
+
+.method-badges {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 4px;
+  row-gap: 8px;
+}
 </style>