feat(NeBadgeV2): add NeBadgeV2 component

Author: andre8244

src/components/NeBadgeV2.vue

@@ -0,0 +1,115 @@
+<!--
+  Copyright (C) 2025 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+
+const {
+  size = 'sm',
+  kind = 'indigo',
+  pill = true,
+  dismissable = false,
+  customKindClasses = '',
+  dismissAriaLabel = 'Dismiss'
+} = defineProps<{
+  size?: 'xs' | 'sm' | 'md'
+  kind?: 'primary' | 'indigo' | 'gray' | 'green' | 'amber' | 'rose' | 'blue' | 'custom'
+  pill?: boolean
+  dismissable?: boolean
+  customKindClasses?: string
+  dismissAriaLabel?: string
+}>()
+
+const emit = defineEmits(['dismiss'])
+
+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'
+})
+
+const spacingClasses = computed(() => {
+  return 'gap-x-1'
+})
+
+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 'green':
+      return 'bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-50'
+    case 'amber':
+      return 'bg-amber-100 text-amber-800 dark:bg-amber-700 dark:text-amber-50'
+    case 'rose':
+      return 'bg-rose-100 text-rose-800 dark:bg-rose-700 dark:text-rose-100'
+    case 'blue':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100'
+    case 'custom':
+      return `${customKindClasses}`
+    case 'indigo':
+    default:
+      return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-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 'green':
+      return 'hover:bg-green-200 hover:dark:bg-green-600'
+    case 'amber':
+      return 'hover:bg-amber-200 hover:dark:bg-amber-600'
+    case 'rose':
+      return 'hover:bg-rose-200 hover:dark:bg-rose-600'
+    case 'blue':
+      return 'hover:bg-blue-200 hover:dark:bg-blue-600'
+    case 'indigo':
+    default:
+      return 'hover:bg-indigo-200 hover:dark:bg-indigo-500'
+  }
+})
+</script>
+
+<template>
+  <span
+    :class="[
+      textClasses,
+      spacingClasses,
+      paddingClasses,
+      kindClasses,
+      pill ? 'rounded-full' : 'rounded'
+    ]"
+    class="flex w-fit items-center py-0.5 font-medium"
+  >
+    <slot />
+    <button
+      v-if="dismissable"
+      :class="`inline-flex rounded focus:ring-2 focus:ring-offset-2 focus:outline-hidden ${dismissButtonClasses}`"
+      type="button"
+      @click="emit('dismiss')"
+    >
+      <span class="sr-only">{{ dismissAriaLabel }}</span>
+      <FontAwesomeIcon :icon="faXmark" class="size-4" aria-hidden="true" />
+    </button>
+  </span>
+</template>

src/main.ts

@@ -39,6 +39,7 @@ export { default as NeListbox } from './components/NeListbox.vue'
 export { default as NeDropdownFilter } from './components/NeDropdownFilter.vue'
 export { default as NeSortDropdown } from './components/NeSortDropdown.vue'
 export { default as NeAvatar } from './components/NeAvatar.vue'
+export { default as NeBadgeV2 } from './components/NeBadgeV2.vue'
 
 // types export
 export type { NeComboboxOption } from './components/NeCombobox.vue'

stories/NeBadgeV2.stories.ts

@@ -0,0 +1,94 @@
+//  Copyright (C) 2025 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { Meta, StoryObj } from '@storybook/vue3-vite'
+import { NeBadgeV2 } from '../src/main'
+
+const meta: Meta<typeof NeBadgeV2> = {
+  title: 'NeBadgeV2',
+  component: NeBadgeV2,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      options: ['xs', 'sm', 'md'],
+      control: { type: 'inline-radio' }
+    },
+    kind: {
+      options: ['primary', 'gray', 'indigo', 'green', 'amber', 'rose', 'blue', 'custom'],
+      control: { type: 'inline-radio' }
+    }
+  },
+  args: {
+    size: 'sm',
+    kind: 'indigo',
+    pill: true,
+    dismissable: false,
+    customKindClasses: '',
+    dismissAriaLabel: 'Dismiss'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = `<NeBadgeV2 v-bind="args">Badge</NeBadgeV2>`
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeBadgeV2 },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {}
+}
+
+export const Kinds: Story = {
+  render: (args) => ({
+    components: { NeBadgeV2 },
+    setup() {
+      return { args }
+    },
+    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="green">green</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="amber">amber</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="rose">rose</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="blue">blue</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="custom" customKindClasses="bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-700 dark:text-fuchsia-50">custom</NeBadgeV2>
+      </div>
+    `
+  }),
+  args: {}
+}
+
+export const CustomKind: Story = {
+  render: (args) => ({
+    components: { NeBadgeV2 },
+    setup() {
+      return { args }
+    },
+    template: `<NeBadgeV2 v-bind="args">Custom badge</NeBadgeV2>`
+  }),
+  args: {
+    kind: 'custom',
+    customKindClasses: 'text-white bg-linear-to-br from-fuchsia-500 to-blue-500'
+  }
+}
+
+export const Dismissable: Story = {
+  render: (args) => ({
+    components: { NeBadgeV2 },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {
+    dismissable: true
+  }
+}