fix(*): apply pr feedback

Kong · Dec 13, 2024 · 5c07112 · 5c07112
1 parent bbbaeac
commit 5c07112
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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,78 +153,78 @@ 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;
     }
   }
 
   .entity-empty-state-content {
     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;
       }
     }
   }