From 49917702a6aa8786e42a5171d6d4ec5525fe028c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Go=CC=88khan=20O=CC=88ztu=CC=88rk?=
 <gokhaanozturk@gmail.com>
Date: Fri, 23 Sep 2022 16:27:04 +0300
Subject: [PATCH] feat: adds new properties

---
 src/components/Badge/Badge.stories.mdx |  6 ++++++
 src/components/Badge/Badge.vue         | 15 +++++++++++++--
 src/components/Badge/badge.css         | 20 ++++++++++++++------
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/components/Badge/Badge.stories.mdx b/src/components/Badge/Badge.stories.mdx
index fa8d3be..163e1c8 100644
--- a/src/components/Badge/Badge.stories.mdx
+++ b/src/components/Badge/Badge.stories.mdx
@@ -60,6 +60,12 @@ export const defaultArgs = {
     },
     defaultValue: '',
   },
+  bordered: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
   onClick: {
     action: 'click',
   },
diff --git a/src/components/Badge/Badge.vue b/src/components/Badge/Badge.vue
index 8f9a7cd..987c98f 100644
--- a/src/components/Badge/Badge.vue
+++ b/src/components/Badge/Badge.vue
@@ -13,6 +13,8 @@ export interface BadgeProps {
   hover?: boolean;
   icon?: string;
   content?: string | number;
+  bordered?: boolean;
+  over?: boolean;
 }
 const props = withDefaults(defineProps<BadgeProps>(), {
   placement: 'right',
@@ -24,6 +26,8 @@ const props = withDefaults(defineProps<BadgeProps>(), {
   hover: false,
   icon: '',
   content: '',
+  bordered: false,
+  over: false,
 });
 const emit = defineEmits(['click']);
 const classes = computed(() => {
@@ -37,6 +41,8 @@ const classes = computed(() => {
     'badge--overlap': props.overlap,
     'badge--square': props.square,
     'badge--hover': props.hover,
+    'badge--bordered': props.bordered,
+    'badge--over': props.over,
   };
 });
 const styles = computed(() => {
@@ -55,8 +61,13 @@ const iconSize = computed(() => {
 const onClick = () => emit('click');
 </script>
 <template>
-  <div class="wrapper group">
-    <div v-if="!props.icon" :style="styles" :class="classes" @click="onClick">
+  <div class="badge-wrapper group">
+    <div
+      v-if="!props.icon && props.content"
+      :style="styles"
+      :class="classes"
+      @click="onClick"
+    >
       {{ props.content }}
     </div>
     <Icon
diff --git a/src/components/Badge/badge.css b/src/components/Badge/badge.css
index 50e4026..e1acdd2 100644
--- a/src/components/Badge/badge.css
+++ b/src/components/Badge/badge.css
@@ -1,11 +1,11 @@
 @tailwind components;
 
-.wrapper {
-  @apply font-sans relative max-w-max p-2;
+.badge-wrapper {
+  @apply transition duration-500 ease-in-out font-sans relative max-w-max p-2;
 }
 
 .badge {
-  @apply h-3 w-3 absolute z-50 rounded-full;
+  @apply min-h-[12px] min-w-[12px] absolute z-50 rounded-full p-[2px];
 }
 
 .badge--right {
@@ -20,6 +20,10 @@
   @apply right-0 bottom-0;
 }
 
+.badge--bordered {
+  @apply border border-white border-solid;
+}
+
 .badge--overlap {
   @apply top-1 right-1;
 }
@@ -33,7 +37,7 @@
 }
 
 .badge__content {
-  @apply grid place-items-center leading-none text-xs text-white font-bold h-3.5 w-3.5;
+  @apply grid place-items-center leading-none text-xs text-white font-bold;
 }
 
 .badge--small {
@@ -41,7 +45,7 @@
 }
 
 .badge__content--small {
-  font-size: 8px;
+  @apply text-[8px]; /* 8px it's for without line height*/
 }
 
 .badge--large {
@@ -49,5 +53,9 @@
 }
 
 .badge__content--large {
-  font-size: 1rem;
+  @apply text-[1rem]; /* 16px it's for without line height*/
+}
+
+.badge--over {
+  @apply -top-2 -right-2;
 }