feat: adds new properties

src/components/Badge/Badge.stories.mdx

@@ -60,6 +60,12 @@ export const defaultArgs = {
     },
     defaultValue: '',
   },
+  bordered: {
+    control: {
+      type: 'boolean',
+    },
+    defaultValue: false,
+  },
   onClick: {
     action: 'click',
   },

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

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,21 +37,25 @@
 }
 
 .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 {
   @apply h-2 w-2;
 }
 
 .badge__content--small {
-  font-size: 8px;
+  @apply text-[8px]; /* 8px it's for without line height*/
 }
 
 .badge--large {
   @apply h-4 w-4;
 }
 
 .badge__content--large {
-  font-size: 1rem;
+  @apply text-[1rem]; /* 16px it's for without line height*/
+}
+
+.badge--over {
+  @apply -top-2 -right-2;
 }