From fa064306fa7e368408ddf319a66d6acac0116616 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Epif=C3=A2nio=20Francisco?= <epifaniofrancisco03@gmail.com>
Date: Fri, 28 Feb 2025 11:10:50 +0100
Subject: [PATCH] feat(docs): Add deprecated badge for icons with deprecation
 status (#2618)

* feat(docs): Add deprecated badge for icons with deprecation status

* fix: resolve formatting issues in types.ts to pass Prettier checks

* Small adjustments

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
---
 .../theme/components/icons/IconInfo.vue       | 28 +++++++++++++++++++
 docs/.vitepress/theme/types.ts                |  3 ++
 docs/scripts/writeIconDetails.mjs             |  5 +++-
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/theme/components/icons/IconInfo.vue b/docs/.vitepress/theme/components/icons/IconInfo.vue
index 6abd902a6..3ee04d762 100644
--- a/docs/.vitepress/theme/components/icons/IconInfo.vue
+++ b/docs/.vitepress/theme/components/icons/IconInfo.vue
@@ -9,6 +9,8 @@ import {useData, useRouter} from 'vitepress';
 import { computed } from 'vue';
 import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
 import { diamond }  from '../../../data/iconNodes'
+import deprecationReasonTemplate from '../../../../../tools/build-icons/utils/deprecationReasonTemplate.mjs';
+
 
 const props = defineProps<{
   icon: IconEntity
@@ -24,6 +26,15 @@ const tags = computed(() => {
 })
 
 const DiamondIcon = createLucideIcon('Diamond', diamond)
+
+const deprecatedTitle = computed(() => {
+  if (!props.icon.deprecationReason) return '';
+  return deprecationReasonTemplate(props.icon.deprecationReason, {
+    componentName: props.icon.name,
+    iconName: props.icon.name,
+    toBeRemovedInVersion: props.icon.toBeRemovedInVersion,
+  });
+});
 </script>
 
 <template>
@@ -36,6 +47,13 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)
         <DiamondIcon fill="currentColor" :size="12"/>
         {{ icon.externalLibrary }}
       </div>
+      <Badge
+        v-if="icon.deprecated"
+        class="deprecated-badge"
+        :title="deprecatedTitle"
+      >
+        Deprecated
+      </Badge>
     </div>
     <div class="tags-scroller" v-if="tags.length">
       <p class="icon-tags horizontal-scroller">
@@ -98,6 +116,16 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)
   align-items: center;
 }
 
+.deprecated-badge {
+  background-color: var(--vp-c-brand-5);
+  margin-left: 40px;
+  opacity: .8;
+}
+
+.deprecated-badge:hover {
+  background-color: var(--vp-c-brand-2);
+}
+
 .icon-tags {
   font-size: 16px;
   color: var(--vp-c-text-2);
diff --git a/docs/.vitepress/theme/types.ts b/docs/.vitepress/theme/types.ts
index 4ceeff181..d057858d6 100644
--- a/docs/.vitepress/theme/types.ts
+++ b/docs/.vitepress/theme/types.ts
@@ -6,6 +6,9 @@ export interface IconMetaData {
   categories: string[];
   contributors: string[];
   aliases?: string[];
+  deprecated?: boolean;
+  deprecationReason?: string;
+  toBeRemovedInVersion?: string;
 }
 
 export type ExternalLibs = 'lab';
diff --git a/docs/scripts/writeIconDetails.mjs b/docs/scripts/writeIconDetails.mjs
index 83e26fbb5..7d8b66fbc 100644
--- a/docs/scripts/writeIconDetails.mjs
+++ b/docs/scripts/writeIconDetails.mjs
@@ -27,7 +27,7 @@ import iconNode from '../iconNodes/${iconName}.node.json'
 import metaData from '../../../../icons/${iconName}.json'
 import releaseData from '../releaseMetadata/${iconName}.json'
 
-const { tags, categories, contributors, aliases } = metaData
+const { tags, categories, contributors, aliases, deprecated, deprecationReason, toBeRemovedInVersion } = metaData
 
 const iconDetails = {
   name: '${iconName}',
@@ -36,6 +36,9 @@ const iconDetails = {
   tags,
   categories,
   aliases,
+  deprecated,
+  deprecationReason,
+  toBeRemovedInVersion,
   ...releaseData,
 }