fix(entity-empty-state): update pricing prop type and style fixes [kh…

…cp-14355] (#1852)
Kong · Dec 13, 2024 · 3b7e850 · 3b7e850
1 parent 0bc00b1
commit 3b7e850
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/packages/entities/entities-shared/docs/entity-empty-state.md b/packages/entities/entities-shared/docs/entity-empty-state.md
@@ -38,8 +38,8 @@ Description for the empty state.
 
 #### `pricing`
 
-- type: `String`
-- default: ``
+- type: `Boolean`
+- default: false
 
 If provided, will display pricing information for transparency.
 

diff --git a/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue b/packages/entities/entities-shared/sandbox/pages/EntityEmptyStatePage.vue
@@ -7,14 +7,17 @@
         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
-        pricing="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+        pricing
         title="Gateway Manager"
         @create-button-clicked="console.log('create button clicked')"
         @learning-hub-button-clicked="console.log('learning hub button clicked')"
       >
         <template #icon>
           <RuntimesIcon />
         </template>
+        <template #pricing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit
+        </template>
       </EntityEmptyState>
     </main>
   </div>

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
@@ -75,7 +75,7 @@
               :color="KUI_COLOR_TEXT_NEUTRAL_STRONGER"
               :size="KUI_ICON_SIZE_40"
             />
-            <div class="card-title">
+            <div class="card-header">
               {{ feature.title }}
             </div>
           </template>
@@ -119,8 +119,8 @@ defineProps({
     required: true,
   },
   pricing: {
-    type: String,
-    default: '',
+    type: Boolean,
+    default: false,
   },
   actionButtonText: {
     type: String,
@@ -149,7 +149,7 @@ const { i18n: { t } } = composables.useI18n()
   display: flex;
   flex-direction: column;
   font-family: $kui-font-family-text;
-  gap: $kui-space-100;
+  gap: $kui-space-90;
   padding: $kui-space-130 $kui-space-150;
   width: 100%;
 
@@ -197,7 +197,7 @@ const { i18n: { t } } = composables.useI18n()
       border: $kui-border-width-10 solid $kui-color-border;
       border-radius: $kui-border-radius-30;
       color: $kui-color-text-neutral-weak;
-      gap: $kui-space-60;
+      gap: $kui-space-40;
       height: 160px;
       padding: $kui-space-80;
       width: 312px;
@@ -207,6 +207,10 @@ const { i18n: { t } } = composables.useI18n()
         font-weight: $kui-font-weight-semibold;
       }
 
+      :deep(.card-header) {
+        padding-top: $kui-space-40;
+      }
+
       :deep(.card-content) {
         color: $kui-color-text-neutral;
       }