feat(entityemptystate): added appreance prop support [KHCP-14905] (#1919)

* feat(entityemptystate): added appreance prop support [KHCP-14905]

* fix(entityemptystate): props docs, improvements [KHCP-14905]

* fix: type imports

* fix(entityemptystate): fixed all spacing issues [KHCP-14905]

* fix: fixed computed naming

* fix: type imports

Author: afrzhussain

packages/entities/entities-shared/docs/entity-empty-state.md

@@ -38,6 +38,13 @@ Title for the empty state.
 
 Description for the empty state.
 
+#### `appearance`
+
+- type: `String`
+- default: `'primary'`
+
+Appearance of the empty state, component takes one of the following appearance values: `primary`, `secondary`
+
 #### `pricing`
 
 - type: `String`

packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue

@@ -7,7 +7,6 @@
         description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae. Repellat quam voluptas vitae, maxime consequuntur praesentium suscipit. Numquam aliquid nulla vel esse accusantium reiciendis error?"
         :features="features"
         learn-more
-        pricing="Lorem ipsum dolor sit amet consectetur adipisicing elit"
         title="Gateway Manager"
         @click:create="console.log('create button clicked')"
         @click:learn-more="console.log('learning hub button clicked')"

packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue

@@ -12,7 +12,7 @@
         v-if="title || $slots.title"
         class="entity-empty-state-title"
       >
-        <h1>
+        <h1 :class="emptyStateAppearance">
           <slot name="title">
             {{ title }}
           </slot>
@@ -78,7 +78,10 @@
       </slot>
     </div>
 
-    <div class="entity-empty-state-card-container">
+    <div
+      v-if="features.length"
+      class="entity-empty-state-card-container"
+    >
       <template
         v-for="(feature, idx) in features"
         :key="feature"
@@ -118,9 +121,17 @@ import { type PropType, computed, ref, onBeforeMount } from 'vue'
 import { KButton } from '@kong/kongponents'
 import { BookIcon, AddIcon } from '@kong/icons'
 import composables from '../../composables'
-import type { EmptyStateFeature } from 'src/types/entity-empty-state'
+import type { EmptyStateFeature, AppearanceTypes } from '../../types/entity-empty-state'
+import { Appearances } from '../../types/entity-empty-state'
 
 const props = defineProps({
+  appearance: {
+    type: String as PropType<AppearanceTypes>,
+    default: () => 'primary',
+    validator: (value: AppearanceTypes): boolean => {
+      return Appearances.includes(value)
+    },
+  },
   title: {
     type: String,
     default: '',
@@ -163,6 +174,16 @@ const { i18n: { t } } = composables.useI18n()
 const useCanCreate = ref(false)
 const showCreateButton = computed((): boolean => useCanCreate.value && !!props.actionButtonText)
 
+const emptyStateAppearance = computed((): AppearanceTypes | [AppearanceTypes, string] => {
+  // If the appearance is invalid, output both to keep backwards compatibility
+  // in case some of the tests rely on the invalid appearance output
+  if (!Appearances.includes(props.appearance)) {
+    return ['primary', props.appearance]
+  }
+
+  return props.appearance
+})
+
 onBeforeMount(async () => {
   // Evaluate if the user has create permissions
   useCanCreate.value = await props.canCreate()
@@ -180,7 +201,7 @@ $entity-empty-state-max-width: calc(2 * #{$entity-empty-state-feature-card-width
   display: flex;
   flex-direction: column;
   font-family: $kui-font-family-text;
-  gap: $kui-space-110;
+  gap: $kui-space-80;
   padding: $kui-space-130 $kui-space-0;
   width: 100%;
 
@@ -209,6 +230,10 @@ $entity-empty-state-max-width: calc(2 * #{$entity-empty-state-feature-card-width
       gap: $kui-space-40;
       line-height: $kui-line-height-60;
       margin: $kui-space-0;
+
+      &.secondary {
+        font-size: $kui-font-size-50;
+      }
     }
   }
 
@@ -220,10 +245,14 @@ $entity-empty-state-max-width: calc(2 * #{$entity-empty-state-feature-card-width
     max-width: 640px; // limit width so the description stays readable if it is too long
 
     p {
-      margin: $kui-space-30;
+      margin: $kui-space-0;
     }
   }
 
+  .entity-empty-state-pricing {
+    margin-top: $kui-space-60;
+  }
+
   .entity-empty-state-action {
     align-items: center;
     display: flex;
@@ -235,6 +264,7 @@ $entity-empty-state-max-width: calc(2 * #{$entity-empty-state-feature-card-width
     flex-wrap: wrap;
     gap: $kui-space-60;
     justify-content: space-around;
+    margin-top: $kui-space-40;
     /** single column on mobile */
     width: $entity-empty-state-feature-card-width;
 

packages/entities/entities-shared/src/types/entity-empty-state.ts

@@ -2,3 +2,10 @@ export interface EmptyStateFeature {
   title: string,
   description: string
 }
+
+export type AppearanceTypes = 'primary' | 'secondary'
+
+export const Appearances = [
+  'primary',
+  'secondary',
+]