fix(NeBadgeV2): minor fixes

Author: andre8244

src/components/NeBadgeV2.vue

@@ -10,13 +10,13 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons'
 
 const {
   size = 'sm',
-  kind = 'indigo',
+  kind = 'gray',
   pill = true,
   dismissable = false,
   customKindClasses = '',
   dismissAriaLabel = 'Dismiss'
 } = defineProps<{
-  size?: 'xs' | 'sm' | 'md'
+  size?: 'xs' | 'sm'
   kind?: 'primary' | 'indigo' | 'gray' | 'green' | 'amber' | 'rose' | 'blue' | 'custom'
   pill?: boolean
   dismissable?: boolean
@@ -30,17 +30,20 @@ const textClasses = computed(() => {
   switch (size) {
     case 'xs':
       return 'text-xs'
-    case 'md':
-      return 'text-base'
     case 'sm':
     default:
       return 'text-sm'
   }
 })
 
 const paddingClasses = computed(() => {
-  ////
-  return 'px-2.5'
+  switch (size) {
+    case 'xs':
+      return 'px-3'
+    case 'sm':
+    default:
+      return 'px-2.5'
+  }
 })
 
 const spacingClasses = computed(() => {
@@ -51,8 +54,8 @@ const kindClasses = computed(() => {
   switch (kind) {
     case 'primary':
       return 'bg-primary-100 text-primary-800 dark:bg-primary-700 dark:text-primary-100'
-    case 'gray':
-      return 'bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-gray-100'
+    case 'indigo':
+      return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100'
     case 'green':
       return 'bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-50'
     case 'amber':
@@ -63,18 +66,18 @@ const kindClasses = computed(() => {
       return 'bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100'
     case 'custom':
       return `${customKindClasses}`
-    case 'indigo':
+    case 'gray':
     default:
-      return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100'
+      return 'bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-gray-100'
   }
 })
 
 const dismissButtonClasses = computed(() => {
   switch (kind) {
     case 'primary':
       return 'hover:bg-primary-200 hover:dark:bg-primary-600'
-    case 'gray':
-      return 'hover:bg-gray-300 hover:dark:bg-gray-500'
+    case 'indigo':
+      return 'hover:bg-indigo-200 hover:dark:bg-indigo-500'
     case 'green':
       return 'hover:bg-green-200 hover:dark:bg-green-600'
     case 'amber':
@@ -83,9 +86,11 @@ const dismissButtonClasses = computed(() => {
       return 'hover:bg-rose-200 hover:dark:bg-rose-600'
     case 'blue':
       return 'hover:bg-blue-200 hover:dark:bg-blue-600'
-    case 'indigo':
+    case 'custom':
+      return 'hover:bg-white/20'
+    case 'gray':
     default:
-      return 'hover:bg-indigo-200 hover:dark:bg-indigo-500'
+      return 'hover:bg-gray-300 hover:dark:bg-gray-500'
   }
 })
 </script>

stories/NeBadgeV2.stories.ts

@@ -3,14 +3,16 @@
 
 import { Meta, StoryObj } from '@storybook/vue3-vite'
 import { NeBadgeV2 } from '../src/main'
+import { faAward } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 const meta: Meta<typeof NeBadgeV2> = {
   title: 'NeBadgeV2',
   component: NeBadgeV2,
   tags: ['autodocs'],
   argTypes: {
     size: {
-      options: ['xs', 'sm', 'md'],
+      options: ['xs', 'sm'],
       control: { type: 'inline-radio' }
     },
     kind: {
@@ -20,7 +22,7 @@ const meta: Meta<typeof NeBadgeV2> = {
   },
   args: {
     size: 'sm',
-    kind: 'indigo',
+    kind: 'gray',
     pill: true,
     dismissable: false,
     customKindClasses: '',
@@ -52,9 +54,9 @@ export const Kinds: Story = {
     },
     template: `
       <div class="flex flex-wrap gap-8">
-        <NeBadgeV2 v-bind="args" kind="indigo">indigo</NeBadgeV2>
-        <NeBadgeV2 v-bind="args" kind="primary">primary</NeBadgeV2>
         <NeBadgeV2 v-bind="args" kind="gray">gray</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="primary">primary</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="indigo">indigo</NeBadgeV2>
         <NeBadgeV2 v-bind="args" kind="green">green</NeBadgeV2>
         <NeBadgeV2 v-bind="args" kind="amber">amber</NeBadgeV2>
         <NeBadgeV2 v-bind="args" kind="rose">rose</NeBadgeV2>
@@ -80,6 +82,22 @@ export const CustomKind: Story = {
   }
 }
 
+const withIconTemplate = `<NeBadgeV2 v-bind="args">
+  <FontAwesomeIcon :icon="faAward" class="size-4" />
+  Badge
+</NeBadgeV2>`
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    components: { NeBadgeV2, FontAwesomeIcon },
+    setup() {
+      return { args, faAward }
+    },
+    template: withIconTemplate
+  }),
+  args: {}
+}
+
 export const Dismissable: Story = {
   render: (args) => ({
     components: { NeBadgeV2 },