From d975afb507ae269f5989f8f5551d8e56e4d76183 Mon Sep 17 00:00:00 2001
From: Kai Arrowood <kai.arrowood@konghq.com>
Date: Fri, 15 Sep 2023 09:29:22 -0400
Subject: [PATCH] feat(about-section): new component [khcp-8589] (#782)

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

* fix(*): lint

* fix(*): alignment

* fix(*): pr feedback

* fix(*): pr feedback

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* fix(*): pr feedback

* fix(*): lint

* fix(kcard): styles

* fix(*): lint

* fix(*): add docs

* fix(*): loading state

* fix(*): text

* test(about-section): add component test

* fix(*): test ext

* fix(*): tests

* fix(*): tests

* fix(*): pr feedback

---------

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
---
 .../analytics-chart/docs/top-n-table.md       |   8 +
 .../analytics/analytics-chart/sandbox/App.vue |   8 +
 .../src/components/TopNTable.vue              |  42 ++-
 .../core/app-layout/docs/about-section.md     | 102 ++++++++
 .../sandbox/pages/PageHeaderPage.vue          |  98 ++++++-
 .../aboutSection/AppAboutSection.cy.ts        | 116 +++++++++
 .../aboutSection/AppAboutSection.vue          | 243 ++++++++++++++++++
 packages/core/app-layout/src/index.ts         |   2 +
 8 files changed, 615 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/app-layout/docs/about-section.md
 create mode 100644 packages/core/app-layout/src/components/aboutSection/AppAboutSection.cy.ts
 create mode 100644 packages/core/app-layout/src/components/aboutSection/AppAboutSection.vue

diff --git a/packages/analytics/analytics-chart/docs/top-n-table.md b/packages/analytics/analytics-chart/docs/top-n-table.md
index b32f6352ba..ef8dad10e6 100644
--- a/packages/analytics/analytics-chart/docs/top-n-table.md
+++ b/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
diff --git a/packages/analytics/analytics-chart/sandbox/App.vue b/packages/analytics/analytics-chart/sandbox/App.vue
index 75d3f7bb31..90ffc98af0 100644
--- a/packages/analytics/analytics-chart/sandbox/App.vue
+++ b/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)
diff --git a/packages/analytics/analytics-chart/src/components/TopNTable.vue b/packages/analytics/analytics-chart/src/components/TopNTable.vue
index ce5aa7d046..5723fcc2da 100644
--- a/packages/analytics/analytics-chart/src/components/TopNTable.vue
+++ b/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: $kui-space-0 $kui-space-80 $kui-space-50 $kui-space-0;
     }
 
     .column-2 {
       flex: 1;
       max-width: 110px;
-      padding: 0 0 $kui-space-60 0;
+      padding: $kui-space-0 $kui-space-0 $kui-space-50 $kui-space-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>
diff --git a/packages/core/app-layout/docs/about-section.md b/packages/core/app-layout/docs/about-section.md
new file mode 100644
index 0000000000..c16a1ef006
--- /dev/null
+++ b/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)
diff --git a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue b/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
index 3886f9e3d6..5e17280613 100644
--- a/packages/core/app-layout/sandbox/pages/PageHeaderPage.vue
+++ b/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>
diff --git a/packages/core/app-layout/src/components/aboutSection/AppAboutSection.cy.ts b/packages/core/app-layout/src/components/aboutSection/AppAboutSection.cy.ts
new file mode 100644
index 0000000000..897411a4ae
--- /dev/null
+++ b/packages/core/app-layout/src/components/aboutSection/AppAboutSection.cy.ts
@@ -0,0 +1,116 @@
+// Cypress component test spec file
+
+import AppAboutSection from './AppAboutSection.vue'
+
+describe('<AppAboutSection />', () => {
+  it('should correctly renders loading state', () => {
+    const title = 'Cats are Cool'
+    const description = 'cool cat description'
+
+    cy.mount(AppAboutSection, {
+      props: {
+        title,
+        description,
+        isLoading: true,
+      },
+    })
+
+    cy.get('.kong-ui-app-about-section').should('exist')
+    cy.getTestId('about-section-loading-skeleton').should('be.visible')
+  })
+
+  it('should correctly render content when using props', () => {
+    const title = 'Cats are Cool'
+    const description = 'cool cat description'
+    const created = '2023-02-17'
+    const createdLabel = 'Joined'
+    const modified = '2023-02-17 15:23:34'
+    const modifiedLabel = 'Edited'
+
+    cy.mount(AppAboutSection, {
+      props: {
+        title,
+        description,
+        created,
+        createdLabel,
+        modified,
+        modifiedLabel,
+      },
+    })
+
+    cy.get('.kong-ui-app-about-section').should('exist')
+    cy.getTestId('about-section-title').should('be.visible')
+    cy.getTestId('about-section-title').should('contain.text', title)
+    cy.getTestId('about-section-description').should('be.visible')
+    cy.getTestId('about-section-description').should('contain.text', description)
+    cy.getTestId('about-section-timestamps-created').should('be.visible')
+    cy.getTestId('about-section-timestamps-created').should('contain.text', created)
+    cy.getTestId('about-section-timestamps-created').should('contain.text', createdLabel)
+    cy.getTestId('about-section-timestamps-modified').should('be.visible')
+    cy.getTestId('about-section-timestamps-modified').should('contain.text', modified)
+    cy.getTestId('about-section-timestamps-modified').should('contain.text', modifiedLabel)
+  })
+
+  it('should not render modified when it equals created', () => {
+    const title = 'Cats are Cool'
+    const description = 'cool cat description'
+    const created = '2023-02-17'
+
+    cy.mount(AppAboutSection, {
+      props: {
+        title,
+        description,
+        created,
+        modified: created,
+      },
+    })
+
+    cy.get('.kong-ui-app-about-section').should('exist')
+    cy.getTestId('about-section-timestamps-created').should('be.visible')
+    cy.getTestId('about-section-timestamps-created').should('contain.text', created)
+    cy.getTestId('about-section-timestamps-modified').should('not.exist')
+  })
+
+  it('should correctly render content when use slots', () => {
+    const title = 'Cats are Cool'
+    const description = 'cool cat description'
+    const actionsText = 'Actions'
+    const mainContent = 'A cat a day is a lot of cats'
+    const dividerText = 'Cats can spend up to a third of their waking hours grooming'
+
+    cy.mount(AppAboutSection, {
+      props: {
+        title,
+        description,
+      },
+      slots: {
+        actions: actionsText,
+        default: mainContent,
+        'divider-section': dividerText,
+      },
+    })
+
+    cy.get('.kong-ui-app-about-section').should('exist')
+    cy.getTestId('about-section-actions').should('be.visible')
+    cy.getTestId('about-section-actions').should('contain.text', actionsText)
+    cy.getTestId('about-section-content').should('be.visible')
+    cy.getTestId('about-section-content').should('contain.text', mainContent)
+    cy.getTestId('about-divider-section').should('be.visible')
+    cy.getTestId('about-divider-section-separator').should('be.visible')
+    cy.getTestId('about-divider-section').should('contain.text', dividerText)
+  })
+
+  it('should not render empty props/slots', () => {
+    cy.mount(AppAboutSection, {})
+
+    cy.get('.kong-ui-app-about-section').should('exist')
+    cy.getTestId('about-section-title').should('not.exist')
+    cy.getTestId('about-section-description').should('not.exist')
+    cy.getTestId('about-section-timestamps-created').should('not.exist')
+    cy.getTestId('about-section-timestamps-modified').should('not.exist')
+    cy.getTestId('about-section-actions').should('not.exist')
+    cy.getTestId('about-section-content').should('not.exist')
+    cy.getTestId('about-divider-section').should('not.exist')
+    cy.getTestId('about-divider-section-separator').should('not.exist')
+  })
+})
diff --git a/packages/core/app-layout/src/components/aboutSection/AppAboutSection.vue b/packages/core/app-layout/src/components/aboutSection/AppAboutSection.vue
new file mode 100644
index 0000000000..7138a03d00
--- /dev/null
+++ b/packages/core/app-layout/src/components/aboutSection/AppAboutSection.vue
@@ -0,0 +1,243 @@
+<template>
+  <KCard class="kong-ui-app-about-section">
+    <template
+      v-if="title"
+      #title
+    >
+      <span
+        class="about-section-title"
+        data-testid="about-section-title"
+      >
+        {{ title }}
+      </span>
+    </template>
+
+    <template
+      v-if="$slots.actions || created || modified"
+      #actions
+    >
+      <div class="about-section-header-end">
+        <div
+          v-if="created || modified"
+          class="about-section-timestamps"
+          :class="{ 'has-actions': $slots.actions }"
+        >
+          <span
+            v-if="created"
+            class="about-section-timestamps-created"
+            data-testid="about-section-timestamps-created"
+          >{{ createdLabel }}: {{ created }}</span>
+          <span
+            v-if="created && displayModified"
+            class="about-section-timestamps-arrow"
+          >-></span>
+          <span
+            v-if="displayModified"
+            class="about-section-timestamps-modified"
+            data-testid="about-section-timestamps-modified"
+          >{{ modifiedLabel }}: {{ modified }}</span>
+        </div>
+
+        <div
+          v-if="$slots.actions"
+          class="about-section-actions"
+          data-testid="about-section-actions"
+        >
+          <slot name="actions" />
+        </div>
+      </div>
+    </template>
+
+    <template #body>
+      <div
+        v-if="isLoading"
+        data-testid="about-section-loading-skeleton"
+      >
+        <KSkeletonBox
+          height="2"
+          width="100"
+        />
+        <KSkeletonBox
+          height="2"
+          width="100"
+        />
+      </div>
+
+      <div v-else>
+        <p
+          v-if="description"
+          class="about-section-description"
+          data-testid="about-section-description"
+        >
+          {{ description }}
+        </p>
+
+        <div
+          v-if="$slots.default"
+          class="about-section-content"
+          data-testid="about-section-content"
+        >
+          <slot name="default" />
+        </div>
+
+        <hr
+          v-if="$slots['divider-section']"
+          data-testid="about-divider-section-separator"
+        >
+
+        <div
+          v-if="$slots['divider-section']"
+          class="about-divider-section"
+          data-testid="about-divider-section"
+        >
+          <slot name="divider-section" />
+        </div>
+      </div>
+    </template>
+  </KCard>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  created: {
+    type: String,
+    default: '',
+  },
+  createdLabel: {
+    type: String,
+    default: 'Created',
+  },
+  modified: {
+    type: String,
+    default: '',
+  },
+  modifiedLabel: {
+    type: String,
+    default: 'Modified',
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const displayModified = computed(() => {
+  return !!props.modified && props.modified !== props.created
+})
+</script>
+
+<style lang="scss" scoped>
+.kong-ui-app-about-section {
+  .about-section-title {
+    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;
+  }
+
+  .about-section-header-end {
+    display: flex;
+
+    .about-section-timestamps {
+      align-self: center;
+      color: $kui-color-text-neutral;
+      flex-direction: column;
+      font-size: $kui-font-size-20;
+      line-height: $kui-line-height-20;
+      margin-bottom: $kui-space-50;
+
+      @media (min-width: $kui-breakpoint-phablet) {
+        flex-direction: row;
+        margin-bottom: $kui-space-0;
+      }
+
+      &.has-actions {
+        margin-right: $kui-space-60;
+      }
+
+      .about-section-timestamps-arrow {
+        line-height: $kui-line-height-30;
+        margin-left: $kui-space-40;
+        margin-right: $kui-space-40;
+      }
+    }
+  }
+
+  .about-section-description {
+    color: $kui-color-text;
+    font-size: $kui-font-size-30;
+    line-height: $kui-line-height-30;
+    margin-bottom: $kui-space-70;
+    margin-top: $kui-space-0;
+  }
+
+  .about-section-content {
+    align-items: flex-start;
+    align-self: stretch;
+    color: $kui-color-text-neutral;
+    column-gap: $kui-space-70;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: $kui-font-size-30;
+    line-height: $kui-line-height-30;
+    padding: $kui-space-0;
+    row-gap: $kui-space-30;
+  }
+
+  .about-divider-section {
+    color: $kui-color-text-neutral;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    font-size: $kui-font-size-30;
+    line-height: $kui-line-height-30;
+    row-gap: $kui-space-50;
+  }
+
+  :deep(hr),
+  hr {
+    background-color: $kui-color-border;
+    border: none;
+    height: 1px;
+    margin: $kui-space-0;
+    width: 100%;
+  }
+
+  hr {
+    margin-bottom: $kui-space-50;
+    margin-top: $kui-space-50;
+  }
+}
+</style>
+
+<style lang="scss">
+// TODO: clean up these styles after KCard redesign - KHCP-8971
+.kong-ui-app-about-section.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;
+
+    @media (max-width: $kui-breakpoint-phablet) {
+      flex-direction: column;
+
+      .k-card-actions {
+        margin-left: unset;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/core/app-layout/src/index.ts b/packages/core/app-layout/src/index.ts
index 706c55351b..c5ac8f607e 100644
--- a/packages/core/app-layout/src/index.ts
+++ b/packages/core/app-layout/src/index.ts
@@ -1,6 +1,7 @@
 import type { App } from 'vue'
 
 import AccountDropdown from './components/navbar/AccountDropdown.vue'
+import AppAboutSection from './components/aboutSection/AppAboutSection.vue'
 import AppError from './components/errors/AppError.vue'
 import AppLayout from './components/AppLayout.vue'
 import AppNavbar from './components/navbar/AppNavbar.vue'
@@ -20,6 +21,7 @@ export default {
 // Export individual Components
 export {
   AccountDropdown,
+  AppAboutSection,
   AppError,
   AppLayout,
   AppNavbar,