@aleph-alpha/ui-library 1.8.0 → 1.10.0

package/src/primitives/UiButton/__tests__/UiButton.test.ts

@@ -0,0 +1,133 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+import { h, defineComponent, markRaw } from 'vue';
+import UiButton from '../UiButton.vue';
+
+// Mock icon component for testing startIcon and endIcon props
+// Using markRaw to prevent Vue from making it reactive
+const MockIcon = markRaw(
+  defineComponent({
+    name: 'MockIcon',
+    template: '<svg data-testid="mock-icon" />',
+  }),
+);
+
+describe('UiButton', () => {
+  test('renders as button with slot content and type="button"', () => {
+    const { getByRole } = render(UiButton, {
+      slots: { default: 'Click me' },
+    });
+    const button = getByRole('button');
+    expect(button).toHaveTextContent('Click me');
+    expect(button).toHaveAttribute('type', 'button');
+  });
+
+  describe('Variants (contract test)', () => {
+    const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'] as const;
+
+    test.each(variants)('accepts variant="%s"', (variant) => {
+      const { getByRole } = render(UiButton, {
+        props: { variant },
+        slots: { default: 'Button' },
+      });
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+  });
+
+  describe('Sizes (contract test)', () => {
+    const sizes = ['default', 'xs', 'sm', 'lg'] as const;
+
+    test.each(sizes)('accepts size="%s"', (size) => {
+      const { getByRole } = render(UiButton, {
+        props: { size },
+        slots: { default: 'Button' },
+      });
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+  });
+
+  test('emits click event when clicked', async () => {
+    const user = userEvent.setup();
+    const { getByRole, emitted } = render(UiButton, {
+      slots: { default: 'Click' },
+    });
+
+    await user.click(getByRole('button'));
+
+    expect(emitted('click')).toHaveLength(1);
+  });
+
+  test('is disabled when disabled prop is true', () => {
+    const { getByRole } = render(UiButton, {
+      props: { disabled: true },
+      slots: { default: 'Button' },
+    });
+    expect(getByRole('button')).toBeDisabled();
+  });
+
+  describe('Loading State', () => {
+    test('is disabled with aria-busy and shows spinner when loading', () => {
+      const { getByRole, getByLabelText } = render(UiButton, {
+        props: { loading: true },
+        slots: { default: 'Button' },
+      });
+      const button = getByRole('button');
+      expect(button).toBeDisabled();
+      expect(button).toHaveAttribute('aria-busy', 'true');
+      expect(getByLabelText('Loading')).toBeInTheDocument();
+    });
+
+    test('hides startIcon when loading', () => {
+      const { queryByTestId } = render(UiButton, {
+        props: { loading: true, startIcon: MockIcon },
+        slots: { default: 'Button' },
+      });
+      expect(queryByTestId('mock-icon')).not.toBeInTheDocument();
+    });
+  });
+
+  test('applies aria-label when provided', () => {
+    const { getByRole } = render(UiButton, {
+      props: { ariaLabel: 'Custom label' },
+      slots: { default: 'Button' },
+    });
+    expect(getByRole('button')).toHaveAttribute('aria-label', 'Custom label');
+  });
+
+  describe('Icons', () => {
+    test('renders startIcon when provided', () => {
+      const { getByTestId } = render(UiButton, {
+        props: { startIcon: MockIcon },
+        slots: { default: 'Button' },
+      });
+      expect(getByTestId('mock-icon')).toBeInTheDocument();
+    });
+
+    test('renders endIcon when provided', () => {
+      const { getByTestId } = render(UiButton, {
+        props: { endIcon: MockIcon },
+        slots: { default: 'Button' },
+      });
+      expect(getByTestId('mock-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('asChild Mode', () => {
+    test('does not render startIcon in asChild mode', () => {
+      const { queryByTestId } = render(UiButton, {
+        props: { startIcon: MockIcon, asChild: true },
+        slots: { default: 'Button' },
+      });
+      expect(queryByTestId('mock-icon')).not.toBeInTheDocument();
+    });
+
+    test('does not render endIcon in asChild mode', () => {
+      const { queryByTestId } = render(UiButton, {
+        props: { endIcon: MockIcon, asChild: true },
+        slots: { default: 'Button' },
+      });
+      expect(queryByTestId('mock-icon')).not.toBeInTheDocument();
+    });
+  });
+});

package/src/primitives/UiButton/index.ts

@@ -0,0 +1,2 @@
+export { default as UiButton } from './UiButton.vue';
+export type { UiButtonProps, UiButtonVariant, UiButtonSize } from './types';

package/src/primitives/UiButton/types.ts

@@ -0,0 +1,87 @@
+import type { Component } from 'vue';
+
+/**
+ * Visual style variants for UiButton.
+ */
+export type UiButtonVariant =
+  | 'default'
+  | 'destructive'
+  | 'outline'
+  | 'secondary'
+  | 'ghost'
+  | 'link';
+
+/**
+ * Size variants for UiButton.
+ */
+export type UiButtonSize = 'default' | 'xs' | 'sm' | 'lg';
+
+/**
+ * A clickable button component for triggering actions and submitting forms.
+ *
+ * @category Actions
+ * @useCases form submission, call to action, trigger modal, navigation link, toolbar action
+ * @keywords button, click, submit, action, cta, interactive
+ * @related UiIconButton, UiLink
+ */
+export interface UiButtonProps {
+  /**
+   * The visual style of the button.
+   * @default 'default'
+   */
+  variant?: UiButtonVariant;
+
+  /**
+   * The size of the button.
+   * @default 'default'
+   */
+  size?: UiButtonSize;
+
+  /**
+   * Whether to render as a child (Slot) instead of a wrapper element.
+   * Useful for tooltips or wrapping other components.
+   * @default false
+   */
+  asChild?: boolean;
+
+  /**
+   * The native button type.
+   * @default 'button'
+   */
+  type?: 'button' | 'submit' | 'reset';
+
+  /**
+   * Disables the button.
+   */
+  disabled?: boolean;
+
+  /**
+   * Shows a loading state and prevents interaction.
+   */
+  loading?: boolean;
+
+  /**
+   * Accessible label for the button.
+   * Optional for standard buttons as they usually have visible text.
+   */
+  ariaLabel?: string;
+
+  /**
+   * Icon component to display before the button text.
+   * Hidden when loading is true.
+   * @example
+   * ```vue
+   * <UiButton :startIcon="ChevronLeft">Back</UiButton>
+   * ```
+   */
+  startIcon?: Component;
+
+  /**
+   * Icon component to display after the button text.
+   * @example
+   * ```vue
+   * <UiButton :endIcon="ChevronRight">Next</UiButton>
+   * ```
+   */
+  endIcon?: Component;
+}