From b170a2bc6105488860f48a414383b6d98047eb8a Mon Sep 17 00:00:00 2001
From: Arpit Singh <arpitsingh@Mac.mshome.net>
Date: Sat, 27 Jul 2024 19:13:06 +0530
Subject: [PATCH 1/2] Made the Badge component and added the props for value,
 colour and text colour

---
 package.json                   |  3 ++-
 src/components/smart/Badge.vue | 32 ++++++++++++++++++++++++++++++++
 src/components/smart/index.ts  |  1 +
 src/stories/Badge.story.vue    | 11 +++++++++++
 4 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/components/smart/Badge.vue
 create mode 100644 src/stories/Badge.story.vue

diff --git a/package.json b/package.json
index 5774565..8a2c360 100644
--- a/package.json
+++ b/package.json
@@ -118,5 +118,6 @@
       "types": "./dist/src/helpers/index.d.ts"
     }
   },
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "packageManager": "pnpm@9.5.0+sha256.dbdf5961c32909fb030595a9daa1dae720162e658609a8f92f2fa99835510ca5"
 }
diff --git a/src/components/smart/Badge.vue b/src/components/smart/Badge.vue
new file mode 100644
index 0000000..85d16b3
--- /dev/null
+++ b/src/components/smart/Badge.vue
@@ -0,0 +1,32 @@
+<template>
+    <div
+      :style="{ backgroundColor: color, color: textColor }"
+      class="inline-flex items-center justify-center px-3 py-1 rounded-full font-semibold"
+    >
+      {{ value }}
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  defineProps({
+    color: {
+      type: String,
+      default: "#000000", // Default background color if none is provided
+    },
+    textColor: {
+      type: String,
+      default: "#ffffff", // Default text color if none is provided
+    },
+    value: {
+      type: String,
+      default: "Badge", // Default value if none is provided
+    },
+  })
+  </script>
+  
+  <style scoped>
+  div {
+    @apply transition;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/smart/index.ts b/src/components/smart/index.ts
index 8ec827c..db61418 100644
--- a/src/components/smart/index.ts
+++ b/src/components/smart/index.ts
@@ -25,3 +25,4 @@ export { default as HoppSmartPlaceholder } from "./Placeholder.vue"
 export { default as HoppSmartTree } from "./Tree.vue"
 export { default as HoppSmartTreeBranch } from "./TreeBranch.vue"
 export { default as HoppSmartSelectWrapper } from "./SelectWrapper.vue"
+export { default as HoppSmartBadge } from "./Badge.vue"
\ No newline at end of file
diff --git a/src/stories/Badge.story.vue b/src/stories/Badge.story.vue
new file mode 100644
index 0000000..61a2baa
--- /dev/null
+++ b/src/stories/Badge.story.vue
@@ -0,0 +1,11 @@
+<template>
+    <Story title="Badge">
+      <Variant title="Single">
+        <HoppSmartBadge />
+    </Variant>
+    </Story>
+  </template>
+
+  <script setup lang="ts">
+  import { HoppSmartBadge } from "../components/smart"
+  </script>
\ No newline at end of file

From 3929fd10cf8451fe7cde01d4083664035326e992 Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Mon, 19 Aug 2024 05:45:48 +0600
Subject: [PATCH 2/2] feat: badge improved

---
 src/components/Badge.vue       | 32 ++++++++++++++++++++++++++++++++
 src/components/index.ts        |  1 +
 src/components/smart/Badge.vue | 32 --------------------------------
 src/components/smart/index.ts  |  1 -
 src/stories/Badge.story.vue    | 16 ++++++++--------
 5 files changed, 41 insertions(+), 41 deletions(-)
 create mode 100644 src/components/Badge.vue
 delete mode 100644 src/components/smart/Badge.vue

diff --git a/src/components/Badge.vue b/src/components/Badge.vue
new file mode 100644
index 0000000..212004b
--- /dev/null
+++ b/src/components/Badge.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    :style="{ backgroundColor: bg, color: color }"
+    class="inline-flex items-center justify-center px-3 py-1 font-semibold hover:bg-opacity-80"
+    :class="[style === 'rounded' ? 'rounded-full' : 'rounded-md', 'transition']"
+  >
+    {{ value }}
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    bg: string
+    color: string
+    value: string
+    style: "rounded" | "pill"
+  }>(),
+  {
+    bg: "#000000",
+    color: "#ffffff",
+    value: "Badge",
+    style: "rounded",
+  },
+)
+</script>
+
+<style scoped>
+div {
+  @apply transition;
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 46c6151..b67fbfd 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,3 +2,4 @@ export * from "./button"
 export * from "./smart"
 export * from "./modal"
 export * from "./toast"
+export { default as HoppBadge } from "./Badge.vue"
diff --git a/src/components/smart/Badge.vue b/src/components/smart/Badge.vue
deleted file mode 100644
index 85d16b3..0000000
--- a/src/components/smart/Badge.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <div
-      :style="{ backgroundColor: color, color: textColor }"
-      class="inline-flex items-center justify-center px-3 py-1 rounded-full font-semibold"
-    >
-      {{ value }}
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  defineProps({
-    color: {
-      type: String,
-      default: "#000000", // Default background color if none is provided
-    },
-    textColor: {
-      type: String,
-      default: "#ffffff", // Default text color if none is provided
-    },
-    value: {
-      type: String,
-      default: "Badge", // Default value if none is provided
-    },
-  })
-  </script>
-  
-  <style scoped>
-  div {
-    @apply transition;
-  }
-  </style>
-  
\ No newline at end of file
diff --git a/src/components/smart/index.ts b/src/components/smart/index.ts
index db61418..8ec827c 100644
--- a/src/components/smart/index.ts
+++ b/src/components/smart/index.ts
@@ -25,4 +25,3 @@ export { default as HoppSmartPlaceholder } from "./Placeholder.vue"
 export { default as HoppSmartTree } from "./Tree.vue"
 export { default as HoppSmartTreeBranch } from "./TreeBranch.vue"
 export { default as HoppSmartSelectWrapper } from "./SelectWrapper.vue"
-export { default as HoppSmartBadge } from "./Badge.vue"
\ No newline at end of file
diff --git a/src/stories/Badge.story.vue b/src/stories/Badge.story.vue
index 61a2baa..7713854 100644
--- a/src/stories/Badge.story.vue
+++ b/src/stories/Badge.story.vue
@@ -1,11 +1,11 @@
 <template>
-    <Story title="Badge">
-      <Variant title="Single">
-        <HoppSmartBadge />
+  <Story title="Badge">
+    <Variant title="Single">
+      <HoppBadge />
     </Variant>
-    </Story>
-  </template>
+  </Story>
+</template>
 
-  <script setup lang="ts">
-  import { HoppSmartBadge } from "../components/smart"
-  </script>
\ No newline at end of file
+<script setup lang="ts">
+import { HoppBadge } from "../components"
+</script>