Skip to content

Commit

Permalink
fix(*): add icons to features
Browse files Browse the repository at this point in the history
  • Loading branch information
mptap committed Dec 13, 2024
1 parent 8f2715d commit bbbaeac
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 24 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,20 @@ import { RuntimesIcon } from '@kong/icons'
const features = [
{
icon: RuntimesIcon,
iconVariant: 'deploy',
title: 'First',
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae',
},
{
icon: RuntimesIcon,
iconVariant: 'plug',
title: 'Second',
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae',
}, {
icon: RuntimesIcon,
iconVariant: 'chartData',
title: 'Third ',
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae',
}, {
icon: RuntimesIcon,
iconVariant: 'analytics',
title: 'Fourth',
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Id quidem aperiam similique vitae beatae',
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,8 @@
<div :title="title">
{{ title }}
</div>
<span
v-if="$slots['title-after']"
>
<slot
name="title-after"
/>
<span v-if="$slots['title-after']">
<slot name="title-after" />
</span>
</div>
<div
Expand Down Expand Up @@ -60,6 +56,7 @@
size="large"
@click="$emit('create-button-clicked')"
>
<AddIcon />
{{ actionButtonText }}
</KButton>
<KButton
Expand All @@ -77,22 +74,18 @@
v-for="feature in features"
:key="feature"
>
<KCard
class="entity-empty-state-card"
:title="feature.title"
>
<template #icon />
<KCard class="entity-empty-state-card">
<template #title>
<component
:is="feature.iconVariant"
:is="getEntityIcon(feature.iconVariant)"
:color="`var(--kui-color-text-neutral-stronger, ${KUI_COLOR_TEXT_NEUTRAL_STRONGER})`"
:size="KUI_ICON_SIZE_30"
:size="KUI_ICON_SIZE_40"
/>
<div>{{ feature.title }}</div>
</template>
<template #default>
{{ feature.description }}
<div class="card-title">
{{ feature.title }}
</div>
</template>
{{ feature.description }}
</KCard>
</template>
</div>
Expand All @@ -102,10 +95,26 @@
<script lang="ts" setup>
import { type PropType } from 'vue'
import { KButton } from '@kong/kongponents'
import { BookIcon } from '@kong/icons'
import { BookIcon, AddIcon, DeployIcon, PlugIcon, ChartDataIcon, AnalyticsIcon } from '@kong/icons'
import composables from '../../composables'
import type { EmptyStateFeature } from 'src/types/entity-empty-state'
import { KUI_ICON_SIZE_30, KUI_COLOR_TEXT_NEUTRAL_STRONGER } from '@kong/design-tokens'
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
case 'plug':
return PlugIcon
case 'chartData':
return ChartDataIcon
case 'analytics':
return AnalyticsIcon
default:
return BookIcon
}
}
defineProps({
title: {
Expand Down Expand Up @@ -182,7 +191,7 @@ const { i18n: { t } } = composables.useI18n()
max-width: 640px; // limit width so the description stays readable if it is too long
p {
margin: var(--kui-space-0, $kui-space-0);
margin: var(--kui-space-30, $kui-space-30);
}
}
Expand Down

0 comments on commit bbbaeac

Please sign in to comment.