From a60b77121a7c77f445968327a5c0626703e9e469 Mon Sep 17 00:00:00 2001
From: Mysterious_Dev <40738104+Mysterious-Dev@users.noreply.github.com>
Date: Mon, 13 Nov 2023 21:04:14 +0100
Subject: [PATCH] Add translation keys for Badge Component & improve
 documentation (#137)

* Begin Work

* Ordering

* Add all keys to JSON file

* Add accepted, approved, archived & closed keys to vue component

* Add draft, failed, listed keys to vue component

* Format (fix lint) & improve documentation

* Finish the work
---
 docs/components/badge.md      |  57 ++++++++++++
 lib/components/base/Badge.vue | 157 ++++++++++++++++++++++++++++++----
 locales/en-US/index.json      |  57 ++++++++++++
 3 files changed, 252 insertions(+), 19 deletions(-)

diff --git a/docs/components/badge.md b/docs/components/badge.md
index 95f91289f..171c64d19 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -1,5 +1,7 @@
 # Badge
 
+## Colored badge
+
 <DemoContainer>
 <Badge color="red" type="Tomato" />
 <Badge color="orange" type="Squash" />
@@ -13,3 +15,58 @@
 <Badge color="green" type="Lettuce" />
 <Badge type="Onion" />
 ```
+
+## Badge with icon
+
+<DemoContainer>
+<Badge type="admin" />
+<Badge type="moderator" />
+<Badge type="creator" />
+
+<Badge type="approved" />
+<Badge type="approved-general" />
+<Badge type="unlisted" />
+<Badge type="withheld" />
+<Badge type="private" />
+<Badge type="scheduled" />
+<Badge type="draft" />
+<Badge type="archived" />
+<Badge type="rejected" />
+<Badge type="processing" />
+
+<Badge type="accepted" />
+<Badge type="pending" />
+
+<Badge type="processed" />
+<Badge type="failed" />
+<Badge type="returned" />
+
+<Badge type="closed" />
+</DemoContainer>
+
+```vue
+<Badge type="admin" />
+<Badge type="moderator" />
+<Badge type="creator" />
+
+<Badge type="approved" />
+<Badge type="approved-general" />
+<Badge type="unlisted" />
+<Badge type="withheld" />
+<Badge type="private" />
+<Badge type="scheduled" />
+<Badge type="draft" />
+<Badge type="archived" />
+<Badge type="rejected" />
+<Badge type="processing" />
+
+<Badge type="accepted" />
+<Badge type="pending" />
+
+<Badge type="processed" />
+<Badge type="failed" />
+<Badge type="returned" />
+
+<Badge type="closed" />
+```
+
diff --git a/lib/components/base/Badge.vue b/lib/components/base/Badge.vue
index 824c55a32..371d45c70 100644
--- a/lib/components/base/Badge.vue
+++ b/lib/components/base/Badge.vue
@@ -3,33 +3,71 @@
     <template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>
 
     <!-- User roles -->
-    <template v-else-if="type === 'admin'"> <ModrinthIcon /> Modrinth Team</template>
-    <template v-else-if="type === 'moderator'"> <ScaleIcon /> Moderator</template>
-    <template v-else-if="type === 'creator'"><BoxIcon /> Creator</template>
+    <template v-else-if="type === 'admin'">
+      <ModrinthIcon /> {{ formatMessage(messages.modrinthTeamLabel) }}
+    </template>
+    <template v-else-if="type === 'moderator'">
+      <ScaleIcon /> {{ formatMessage(messages.moderatorLabel) }}
+    </template>
+    <template v-else-if="type === 'creator'">
+      <BoxIcon /> {{ formatMessage(messages.creatorLabel) }}
+    </template>
 
     <!-- Project statuses -->
-    <template v-else-if="type === 'approved'"><ListIcon /> Listed</template>
-    <template v-else-if="type === 'approved-general'"><CheckIcon /> Approved</template>
-    <template v-else-if="type === 'unlisted'"><EyeOffIcon /> Unlisted</template>
-    <template v-else-if="type === 'withheld'"><EyeOffIcon /> Withheld</template>
-    <template v-else-if="type === 'private'"><LockIcon /> Private</template>
-    <template v-else-if="type === 'scheduled'"> <CalendarIcon /> Scheduled</template>
-    <template v-else-if="type === 'draft'"><FileTextIcon /> Draft</template>
-    <template v-else-if="type === 'archived'"> <ArchiveIcon /> Archived</template>
-    <template v-else-if="type === 'rejected'"><XIcon /> Rejected</template>
-    <template v-else-if="type === 'processing'"> <UpdatedIcon /> Under review</template>
+    <template v-else-if="type === 'approved'">
+      <ListIcon /> {{ formatMessage(messages.listedLabel) }}
+    </template>
+    <template v-else-if="type === 'approved-general'">
+      <CheckIcon /> {{ formatMessage(messages.approvedLabel) }}
+    </template>
+    <template v-else-if="type === 'unlisted'">
+      <EyeOffIcon /> {{ formatMessage(messages.unlistedLabel) }}
+    </template>
+    <template v-else-if="type === 'withheld'">
+      <EyeOffIcon /> {{ formatMessage(messages.withheldLabel) }}
+    </template>
+    <template v-else-if="type === 'private'">
+      <LockIcon /> {{ formatMessage(messages.privateLabel) }}
+    </template>
+    <template v-else-if="type === 'scheduled'">
+      <CalendarIcon /> {{ formatMessage(messages.scheduledLabel) }}
+    </template>
+    <template v-else-if="type === 'draft'">
+      <FileTextIcon /> {{ formatMessage(messages.draftLabel) }}
+    </template>
+    <template v-else-if="type === 'archived'">
+      <ArchiveIcon /> {{ formatMessage(messages.archivedLabel) }}
+    </template>
+    <template v-else-if="type === 'rejected'">
+      <XIcon /> {{ formatMessage(messages.rejectedLabel) }}
+    </template>
+    <template v-else-if="type === 'processing'">
+      <UpdatedIcon /> {{ formatMessage(messages.underReviewLabel) }}
+    </template>
 
     <!-- Team members -->
-    <template v-else-if="type === 'accepted'"><CheckIcon /> Accepted</template>
-    <template v-else-if="type === 'pending'"> <UpdatedIcon /> Pending</template>
+    <template v-else-if="type === 'accepted'">
+      <CheckIcon /> {{ formatMessage(messages.acceptedLabel) }}
+    </template>
+    <template v-else-if="type === 'pending'">
+      <UpdatedIcon /> {{ formatMessage(messages.pendingLabel) }}
+    </template>
 
     <!-- Transaction statuses (pending, processing reused) -->
-    <template v-else-if="type === 'processed'"><CheckIcon /> Processed</template>
-    <template v-else-if="type === 'failed'"><XIcon /> Failed</template>
-    <template v-else-if="type === 'returned'"><XIcon /> Returned</template>
+    <template v-else-if="type === 'processed'">
+      <CheckIcon /> {{ formatMessage(messages.processedLabel) }}
+    </template>
+    <template v-else-if="type === 'failed'">
+      <XIcon /> {{ formatMessage(messages.failedLabel) }}
+    </template>
+    <template v-else-if="type === 'returned'">
+      <XIcon /> {{ formatMessage(messages.returnedLabel) }}
+    </template>
 
     <!-- Report status -->
-    <template v-else-if="type === 'closed'"> <XIcon /> Closed</template>
+    <template v-else-if="type === 'closed'">
+      <XIcon /> {{ formatMessage(messages.closedLabel) }}
+    </template>
 
     <!-- Other -->
     <template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
@@ -53,6 +91,87 @@ import {
   capitalizeString,
 } from '@'
 
+import { useVIntl, defineMessages } from '@vintl/vintl'
+const messages = defineMessages({
+  acceptedLabel: {
+    id: 'omorphia.component.badge.label.accepted',
+    defaultMessage: 'Accepted',
+  },
+  approvedLabel: {
+    id: 'omorphia.component.badge.label.approved',
+    defaultMessage: 'Approved',
+  },
+  archivedLabel: {
+    id: 'omorphia.component.badge.label.archived',
+    defaultMessage: 'Archived',
+  },
+  closedLabel: {
+    id: 'omorphia.component.badge.label.closed',
+    defaultMessage: 'Closed',
+  },
+  creatorLabel: {
+    id: 'omorphia.component.badge.label.creator',
+    defaultMessage: 'Creator',
+  },
+  draftLabel: {
+    id: 'omorphia.component.badge.label.draft',
+    defaultMessage: 'Draft',
+  },
+  failedLabel: {
+    id: 'omorphia.component.badge.label.failed',
+    defaultMessage: 'Failed',
+  },
+  listedLabel: {
+    id: 'omorphia.component.badge.label.listed',
+    defaultMessage: 'Listed',
+  },
+  moderatorLabel: {
+    id: 'omorphia.component.badge.label.moderator',
+    defaultMessage: 'Moderator',
+  },
+  modrinthTeamLabel: {
+    id: 'omorphia.component.badge.label.modrinth-team',
+    defaultMessage: 'Modrinth Team',
+  },
+  pendingLabel: {
+    id: 'omorphia.component.badge.label.pending',
+    defaultMessage: 'Pending',
+  },
+  privateLabel: {
+    id: 'omorphia.component.badge.label.private',
+    defaultMessage: 'Private',
+  },
+  processedLabel: {
+    id: 'omorphia.component.badge.label.processed',
+    defaultMessage: 'Processed',
+  },
+  rejectedLabel: {
+    id: 'omorphia.component.badge.label.rejected',
+    defaultMessage: 'Rejected',
+  },
+  returnedLabel: {
+    id: 'omorphia.component.badge.label.returned',
+    defaultMessage: 'Returned',
+  },
+  scheduledLabel: {
+    id: 'omorphia.component.badge.label.scheduled',
+    defaultMessage: 'Scheduled',
+  },
+  underReviewLabel: {
+    id: 'omorphia.component.badge.label.under-review',
+    defaultMessage: 'Under review',
+  },
+  unlistedLabel: {
+    id: 'omorphia.component.badge.label.unlisted',
+    defaultMessage: 'Unlisted',
+  },
+  withheldLabel: {
+    id: 'omorphia.component.badge.label.withheld',
+    defaultMessage: 'Withheld',
+  },
+})
+const { formatMessage } = useVIntl()
+
 defineProps({
   type: {
     type: String,
diff --git a/locales/en-US/index.json b/locales/en-US/index.json
index c0a3243bc..a6629e385 100644
--- a/locales/en-US/index.json
+++ b/locales/en-US/index.json
@@ -1,4 +1,61 @@
 {
+  "omorphia.component.badge.label.accepted": {
+    "defaultMessage": "Accepted"
+  },
+  "omorphia.component.badge.label.approved": {
+    "defaultMessage": "Approved"
+  },
+  "omorphia.component.badge.label.archived": {
+    "defaultMessage": "Archived"
+  },
+  "omorphia.component.badge.label.closed": {
+    "defaultMessage": "Closed"
+  },
+  "omorphia.component.badge.label.creator": {
+    "defaultMessage": "Creator"
+  },
+  "omorphia.component.badge.label.draft": {
+    "defaultMessage": "Draft"
+  },
+  "omorphia.component.badge.label.failed": {
+    "defaultMessage": "Failed"
+  },
+  "omorphia.component.badge.label.listed": {
+    "defaultMessage": "Listed"
+  },
+  "omorphia.component.badge.label.moderator": {
+    "defaultMessage": "Moderator"
+  },
+  "omorphia.component.badge.label.modrinth-team": {
+    "defaultMessage": "Modrinth Team"
+  },
+  "omorphia.component.badge.label.pending": {
+    "defaultMessage": "Pending"
+  },
+  "omorphia.component.badge.label.private": {
+    "defaultMessage": "Private"
+  },
+  "omorphia.component.badge.label.processed": {
+    "defaultMessage": "Processed"
+  },
+  "omorphia.component.badge.label.rejected": {
+    "defaultMessage": "Rejected"
+  },
+  "omorphia.component.badge.label.returned": {
+    "defaultMessage": "Returned"
+  },
+  "omorphia.component.badge.label.scheduled": {
+    "defaultMessage": "Scheduled"
+  },
+  "omorphia.component.badge.label.under-review": {
+    "defaultMessage": "Under review"
+  },
+  "omorphia.component.badge.label.unlisted": {
+    "defaultMessage": "Unlisted"
+  },
+  "omorphia.component.badge.label.withheld": {
+    "defaultMessage": "Withheld"
+  },
   "omorphia.component.copy.action.copy": {
     "defaultMessage": "Copy code to clipboard"
   }