From 5c07112e319459524b1abeae304130b39843de0f Mon Sep 17 00:00:00 2001
From: Manjiri Tapaswi <manjiri.tapaswi@konghq.com>
Date: Fri, 13 Dec 2024 12:02:09 -0800
Subject: [PATCH] fix(*): apply pr feedback

---
 .../docs/entity-empty-state.md                |  8 +--
 .../sandbox/pages/EntityEmptyStatePage.vue    |  2 +-
 .../entity-empty-state/EntityEmptyState.vue   | 68 ++++++++++---------
 3 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/packages/entities/entities-shared/docs/entity-empty-state.md b/packages/entities/entities-shared/docs/entity-empty-state.md
index bd6a10599b..ae7e650b59 100644
--- a/packages/entities/entities-shared/docs/entity-empty-state.md
+++ b/packages/entities/entities-shared/docs/entity-empty-state.md
@@ -52,17 +52,17 @@ If provided, a CTA button will show with text and icon typically, for creating a
 
 #### `learnMoreLink`
 
-- type: `String`
-- default: ``
+- type: `Boolean`
+- default: false
 
-If provided, will link to the Learning Hub link for the entity.
+If provided, will show the Learning Hub button for the entity.
 
 #### `features`
 
 - type: `Array`
 - default: `[]`
 
-If provided, will display card for each feature of that entity, along with an icon, a tilte and a short description.
+If provided, will display card for each feature of that entity, along with an icon, a title and a short description.
 
 ### Usage example
 
diff --git a/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue b/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue
index 51b8348222..85a4212dc3 100644
--- a/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue
+++ b/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue
@@ -6,7 +6,7 @@
         action-button-text="Create a gateway"
         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-link="https://konghq.com"
+        learn-more-link
         pricing="Lorem ipsum dolor sit amet consectetur adipisicing elit."
         title="Gateway Manager"
         @create-button-clicked="console.log('create button clicked')"
diff --git a/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue b/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue
index 8450b6863d..06a0ec2e3a 100644
--- a/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue
+++ b/packages/entities/entities-shared/src/components/entity-empty-state/EntityEmptyState.vue
@@ -14,9 +14,10 @@
     </div>
     <div class="entity-empty-state-content">
       <div
-        v-if="title || $slots.title"
+        v-if="title || $slots.title || $slots['title-after']"
         class="entity-empty-state-title"
       >
+        <slot name="title" />
         <div :title="title">
           {{ title }}
         </div>
@@ -39,7 +40,9 @@
         class="entity-empty-state-pricing"
       >
         <p>
-          <b>{{ t('emptyState.pricingTitle') }}</b> {{ pricing }}
+          <b>{{ t('emptyState.pricingTitle') }}</b> <slot name="pricing">
+            {{ pricing }}
+          </slot>
         </p>
       </div>
     </div>
@@ -51,7 +54,7 @@
     </div>
     <div class="entity-empty-state-action">
       <KButton
-        v-if="(actionButtonText) || $slots.action"
+        v-if="actionButtonText || $slots.action"
         appearance="primary"
         size="large"
         @click="$emit('create-button-clicked')"
@@ -78,7 +81,7 @@
           <template #title>
             <component
               :is="getEntityIcon(feature.iconVariant)"
-              :color="`var(--kui-color-text-neutral-stronger, ${KUI_COLOR_TEXT_NEUTRAL_STRONGER})`"
+              :color="KUI_COLOR_TEXT_NEUTRAL_STRONGER"
               :size="KUI_ICON_SIZE_40"
             />
             <div class="card-title">
@@ -101,7 +104,6 @@ import type { EmptyStateFeature } from 'src/types/entity-empty-state'
 import { KUI_ICON_SIZE_40, KUI_COLOR_TEXT_NEUTRAL_STRONGER } from '@kong/design-tokens'
 
 const getEntityIcon = (iconType: string): object => {
-  console.log(iconType)
   switch (iconType) {
     case 'deploy':
       return DeployIcon
@@ -134,8 +136,8 @@ defineProps({
     default: '',
   },
   learnMoreLink: {
-    type: String,
-    default: '',
+    type: Boolean,
+    default: false,
   },
   features: {
     type: Array as PropType<EmptyStateFeature[]>,
@@ -151,19 +153,19 @@ const { i18n: { t } } = composables.useI18n()
 <style lang="scss" scoped>
 .kong-ui-public-entity-empty-state {
   align-items: center;
-  background-color: var(--kui-color-background, $kui-color-background);
+  background-color: $kui-color-background;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  font-family: var(--kui-font-family-text, $kui-font-family-text);
-  gap: var(--kui-space-100, $kui-space-100);
-  padding: var(--kui-space-130, $kui-space-150) var(--kui-space-130, $kui-space-150);
+  font-family: $kui-font-family-text;
+  gap: $kui-space-100;
+  padding: $kui-space-130 $kui-space-150;
   width: 100%;
 
   .entity-empty-state-icon {
     :deep() {
-      height: var(--kui-icon-size-50, $kui-icon-size-50) !important;
-      width: var(--kui-icon-size-50, $kui-icon-size-50) !important;
+      height: $kui-icon-size-50 !important;
+      width: $kui-icon-size-50 !important;
     }
   }
 
@@ -171,58 +173,58 @@ const { i18n: { t } } = composables.useI18n()
     align-items: center;
     display: flex;
     flex-direction: column;
-    gap: var(--kui-space-40, $kui-space-40);
+    gap: $kui-space-40;
     text-align: center;
     width: 100%;
 
     .entity-empty-state-title {
-      color: var(--kui-color-text, $kui-color-text);
-      font-size: var(--kui-font-size-70, $kui-font-size-70);
-      font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
-      line-height: var(--kui-line-height-60, $kui-line-height-60);
+      color: $kui-color-text;
+      font-size: $kui-font-size-70;
+      font-weight: $kui-font-weight-bold;
+      line-height: $kui-line-height-60;
     }
   }
 
   .entity-empty-state-description, .entity-empty-state-pricing {
-    color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong);
-    font-size: var(--kui-font-size-30, $kui-font-size-30);
-    font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-    line-height: var(--kui-line-height-30, $kui-line-height-30);
+    color: $kui-color-text-neutral-strong;
+    font-size: $kui-font-size-30;
+    font-weight: $kui-font-weight-regular;
+    line-height: $kui-line-height-30;
     max-width: 640px; // limit width so the description stays readable if it is too long
 
     p {
-      margin: var(--kui-space-30, $kui-space-30);
+      margin: $kui-space-30;
     }
   }
 
   .entity-empty-state-action {
     align-items: center;
     display: flex;
-    gap: var(--kui-space-50, $kui-space-50);
+    gap: $kui-space-50;
   }
 
   .entity-empty-state-card-container {
     display: grid !important;
-    gap: var(--kui-space-60, $kui-space-60);
+    gap: $kui-space-60;
     grid-template-columns: auto auto !important;
 
     .entity-empty-state-card {
-      background-color:  var(--kui-color-background-neutral-weakest, $kui-color-background-neutral-weakest);
+      background-color: $kui-color-background-neutral-weakest;
       border: $kui-border-width-10 solid $kui-color-border;
-      border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
-      color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
-      gap: var(--kui-space-60, $kui-space-60);
+      border-radius: $kui-border-radius-30;
+      color: $kui-color-text-neutral-weak;
+      gap: $kui-space-60;
       height: 160px;
-      padding: var(--kui-space-80, $kui-space-80);
+      padding: $kui-space-80;
       width: 312px;
 
       :deep(.card-title) {
-        font-size: var(--kui-font-size-30, $kui-font-size-30);
-        font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
+        font-size: $kui-font-size-30;
+        font-weight: $kui-font-weight-semibold;
       }
 
       :deep(.card-content) {
-        color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+        color: $kui-color-text-neutral;
       }
     }
   }