@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/UiBadge/UiBadge.stories.ts

@@ -0,0 +1,373 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiBadge from './UiBadge.vue';
+import { BadgeVariants } from './constants';
+import { UiIcon } from '../UiIcon';
+
+const InfoIcon = {
+  components: { UiIcon },
+  template: '<UiIcon name="info" :size="16" />',
+};
+
+const XIcon = {
+  components: { UiIcon },
+  template: '<UiIcon name="x" :size="16" />',
+};
+
+const CheckIcon = {
+  components: { UiIcon },
+  template: '<UiIcon name="check" :size="16" />',
+};
+
+const meta: Meta<typeof UiBadge> = {
+  title: 'Components/UiBadge',
+  component: UiBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: BadgeVariants,
+      description: 'The visual style of the badge',
+    },
+    startIcon: {
+      control: false,
+      description: 'Icon component to display before the badge text',
+    },
+    endIcon: {
+      control: false,
+      description: 'Icon component to display after the badge text',
+    },
+  },
+  args: {
+    variant: 'default',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiBadge>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiBadge } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiBadge>Badge</UiBadge>
+</template>`;
+
+/**
+ * Default badge variant.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiBadge },
+    setup() {
+      return { args };
+    },
+    template: `<UiBadge :variant="args.variant">Badge</UiBadge>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const secondaryTemplateSource = `<script setup lang="ts">
+import { UiBadge } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiBadge variant="secondary">Secondary</UiBadge>
+</template>`;
+
+/**
+ * Secondary badge variant.
+ */
+export const Secondary: Story = {
+  render: () => ({
+    components: { UiBadge },
+    template: `<UiBadge variant="secondary">Secondary</UiBadge>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: secondaryTemplateSource,
+      },
+    },
+  },
+};
+
+const destructiveTemplateSource = `<script setup lang="ts">
+import { UiBadge } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiBadge variant="destructive">Destructive</UiBadge>
+</template>`;
+
+/**
+ * Destructive badge variant.
+ */
+export const Destructive: Story = {
+  render: () => ({
+    components: { UiBadge },
+    template: `<UiBadge variant="destructive">Destructive</UiBadge>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: destructiveTemplateSource,
+      },
+    },
+  },
+};
+
+const outlineTemplateSource = `<script setup lang="ts">
+import { UiBadge } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiBadge variant="outline">Outline</UiBadge>
+</template>`;
+
+/**
+ * Outline badge variant.
+ */
+export const Outline: Story = {
+  render: () => ({
+    components: { UiBadge },
+    template: `<UiBadge variant="outline">Outline</UiBadge>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: outlineTemplateSource,
+      },
+    },
+  },
+};
+
+const withStartIconTemplateSource = `<script setup lang="ts">
+import { UiBadge, UiIcon } from '@aleph-alpha/ui-library'
+
+const InfoIcon = {
+  components: { UiIcon },
+  template: '<UiIcon name="info" :size="16" />',
+}
+</script>
+
+<template>
+  <UiBadge :start-icon="InfoIcon">Info</UiBadge>
+</template>`;
+
+/**
+ * Use the `startIcon` prop to add an icon before the badge text.
+ */
+export const WithStartIcon: Story = {
+  render: () => ({
+    components: { UiBadge },
+    setup() {
+      return { InfoIcon };
+    },
+    template: `<UiBadge :start-icon="InfoIcon">Info</UiBadge>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withStartIconTemplateSource,
+      },
+    },
+  },
+};
+
+const withEndIconTemplateSource = `<script setup lang="ts">
+import { UiBadge, UiIcon } from '@aleph-alpha/ui-library'
+
+const XIcon = {
+  components: { UiIcon },
+  template: '<UiIcon name="x" :size="16" />',
+}
+</script>
+
+<template>
+  <UiBadge :end-icon="XIcon">Dismissible</UiBadge>
+</template>`;
+
+/**
+ * Use the `endIcon` prop to add an icon after the badge text.
+ */
+export const WithEndIcon: Story = {
+  render: () => ({
+    components: { UiBadge },
+    setup() {
+      return { XIcon };
+    },
+    template: `<UiBadge :end-icon="XIcon">Dismissible</UiBadge>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withEndIconTemplateSource,
+      },
+    },
+  },
+};
+
+const withBothIconsTemplateSource = `<script setup lang="ts">
+import { UiBadge, UiIcon } from '@aleph-alpha/ui-library'
+
+const CheckIcon = {
+  components: { UiIcon },
+  template: '<UiIcon name="check" :size="16" />',
+}
+
+const XIcon = {
+  components: { UiIcon },
+  template: '<UiIcon name="x" :size="16" />',
+}
+</script>
+
+<template>
+  <UiBadge variant="secondary" :start-icon="CheckIcon" :end-icon="XIcon">
+    Complete
+  </UiBadge>
+</template>`;
+
+/**
+ * You can use both `startIcon` and `endIcon` together.
+ */
+export const WithBothIcons: Story = {
+  render: () => ({
+    components: { UiBadge },
+    setup() {
+      return { CheckIcon, XIcon };
+    },
+    template: `<UiBadge variant="secondary" :start-icon="CheckIcon" :end-icon="XIcon">Complete</UiBadge>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withBothIconsTemplateSource,
+      },
+    },
+  },
+};
+
+const withIconTemplateSource = `<script setup lang="ts">
+import { UiBadge, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiBadge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
+    <UiIcon name="badge-check" :size="12" />
+    Verified
+  </UiBadge>
+</template>`;
+
+/**
+ * For maximum flexibility, you can use slots to render custom icon content.
+ */
+export const WithIconSlot: Story = {
+  render: () => ({
+    components: { UiBadge, UiIcon },
+    template: `
+      <UiBadge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
+        <UiIcon name="badge-check" :size="12" />
+        Verified
+      </UiBadge>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withIconTemplateSource,
+      },
+    },
+  },
+};
+
+const pillTemplateSource = `<script setup lang="ts">
+import { UiBadge } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <UiBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
+      8
+    </UiBadge>
+    <UiBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="destructive">
+      99
+    </UiBadge>
+    <UiBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="outline">
+      20+
+    </UiBadge>
+  </div>
+</template>`;
+
+/**
+ * Pill-shaped badges for counts/notifications.
+ */
+export const Pill: Story = {
+  render: () => ({
+    components: { UiBadge },
+    template: `
+      <div class="flex gap-2">
+        <UiBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
+          8
+        </UiBadge>
+        <UiBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="destructive">
+          99
+        </UiBadge>
+        <UiBadge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="outline">
+          20+
+        </UiBadge>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: pillTemplateSource,
+      },
+    },
+  },
+};
+
+const allVariantsTemplateSource = `<script setup lang="ts">
+import { UiBadge } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <UiBadge>Badge</UiBadge>
+    <UiBadge variant="secondary">Secondary</UiBadge>
+    <UiBadge variant="destructive">Destructive</UiBadge>
+    <UiBadge variant="outline">Outline</UiBadge>
+  </div>
+</template>`;
+
+/**
+ * All badge variants side by side.
+ */
+export const AllVariants: Story = {
+  render: () => ({
+    components: { UiBadge },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <UiBadge>Badge</UiBadge>
+        <UiBadge variant="secondary">Secondary</UiBadge>
+        <UiBadge variant="destructive">Destructive</UiBadge>
+        <UiBadge variant="outline">Outline</UiBadge>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: allVariantsTemplateSource,
+      },
+    },
+  },
+};

package/src/components/UiBadge/UiBadge.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import { Badge as ShadcnBadge } from '@/components/core/badge';
+  import { UiBadgeProps } from './types';
+
+  defineOptions({
+    name: 'UiBadge',
+  });
+
+  const props = withDefaults(defineProps<UiBadgeProps>(), {
+    asChild: false,
+    variant: 'default',
+  });
+</script>
+
+<template>
+  <ShadcnBadge v-bind="props">
+    <component :is="props.startIcon" v-if="props.startIcon" class="mr-2 size-4" />
+    <slot />
+    <component :is="props.endIcon" v-if="props.endIcon" class="ml-2 size-4" />
+  </ShadcnBadge>
+</template>

package/src/components/UiBadge/__tests__/UiBadge.test.ts

@@ -0,0 +1,34 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import { createMockIcon } from '@/__tests__/test-utils';
+import UiBadge from '../UiBadge.vue';
+
+describe('UiBadge', () => {
+  describe('Icons', () => {
+    test('renders start icon', () => {
+      const iconTestId = 'start-icon';
+
+      const { getByTestId } = render(UiBadge, {
+        props: {
+          startIcon: createMockIcon(iconTestId),
+        },
+        slots: { default: 'Badge' },
+      });
+
+      expect(getByTestId(iconTestId)).toBeInTheDocument();
+    });
+
+    test('renders end icon', () => {
+      const iconTestId = 'end-icon';
+
+      const { getByTestId } = render(UiBadge, {
+        props: {
+          endIcon: createMockIcon(iconTestId),
+        },
+        slots: { default: 'Badge' },
+      });
+
+      expect(getByTestId(iconTestId)).toBeInTheDocument();
+    });
+  });
+});

package/src/components/UiBadge/types.ts

@@ -0,0 +1,47 @@
+import { Component } from 'vue';
+
+/**
+ * Variant Types for the UiBadge primitive component
+ */
+export type UiBadgeVariants = 'default' | 'secondary' | 'outline' | 'destructive';
+
+/**
+ * A small label for status, counts, or categories. Use for tags,
+ * notifications counts, status indicators, or labels.
+ * @category Feedback
+ * @useCases status label, notification count, tag, category, version
+ * @keywords badge, label, tag, status, count, chip, pill
+ * @related UiButton
+ */
+export interface UiBadgeProps {
+  /**
+   * Variant types for the badge
+   * @default default
+   */
+  variant?: UiBadgeVariants;
+
+  /**
+   * Whether to render as a child (Slot) instead of a wrapper element.
+   * Useful for tooltips or wrapping other components.
+   * @default false
+   */
+  asChild?: boolean;
+
+  /**
+   * Icon component to display before the badge text.
+   * @example
+   * ```vue
+   * <UiBadge :startIcon="InfoIcon">Info</UiBadge>
+   * ```
+   */
+  startIcon?: Component;
+
+  /**
+   * Icon component to display after the badge text.
+   * @example
+   * ```vue
+   * <UiBadge :endIcon="CloseIcon">Dismissible</UiBadge>
+   * ```
+   */
+  endIcon?: Component;
+}