@aleph-alpha/ui-library 1.9.0 → 1.11.0

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

@@ -0,0 +1,198 @@
+import '@testing-library/jest-dom/vitest';
+import { render, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+import { ref } from 'vue';
+import { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent } from '../index';
+
+describe('UiAccordion', () => {
+  test('emits update:modelValue with string when item is expanded (single mode)', async () => {
+    const user = userEvent.setup();
+    const onUpdateModelValue = vi.fn();
+
+    const { getByRole } = render({
+      components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+      template: `
+        <UiAccordion type="single" collapsible @update:modelValue="onUpdateModelValue">
+          <UiAccordionItem value="item-1">
+            <UiAccordionTrigger>Item 1</UiAccordionTrigger>
+            <UiAccordionContent>Content 1</UiAccordionContent>
+          </UiAccordionItem>
+          <UiAccordionItem value="item-2">
+            <UiAccordionTrigger>Item 2</UiAccordionTrigger>
+            <UiAccordionContent>Content 2</UiAccordionContent>
+          </UiAccordionItem>
+        </UiAccordion>
+      `,
+      setup() {
+        return { onUpdateModelValue };
+      },
+    });
+
+    await user.click(getByRole('button', { name: 'Item 1' }));
+
+    expect(onUpdateModelValue).toHaveBeenCalledWith('item-1');
+  });
+
+  test('emits update:modelValue with array when item is toggled (multiple mode)', async () => {
+    const user = userEvent.setup();
+    const onUpdateModelValue = vi.fn();
+
+    const { getByRole } = render({
+      components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+      template: `
+        <UiAccordion type="multiple" @update:modelValue="onUpdateModelValue">
+          <UiAccordionItem value="item-1">
+            <UiAccordionTrigger>Item 1</UiAccordionTrigger>
+            <UiAccordionContent>Content 1</UiAccordionContent>
+          </UiAccordionItem>
+          <UiAccordionItem value="item-2">
+            <UiAccordionTrigger>Item 2</UiAccordionTrigger>
+            <UiAccordionContent>Content 2</UiAccordionContent>
+          </UiAccordionItem>
+        </UiAccordion>
+      `,
+      setup() {
+        return { onUpdateModelValue };
+      },
+    });
+
+    await user.click(getByRole('button', { name: 'Item 1' }));
+
+    expect(onUpdateModelValue).toHaveBeenCalledWith(['item-1']);
+  });
+
+  test('reflects controlled modelValue', async () => {
+    const { getByRole, getByText } = render({
+      components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+      template: `
+        <UiAccordion type="single" collapsible :model-value="value">
+          <UiAccordionItem value="item-1">
+            <UiAccordionTrigger>Item 1</UiAccordionTrigger>
+            <UiAccordionContent>Content 1</UiAccordionContent>
+          </UiAccordionItem>
+          <UiAccordionItem value="item-2">
+            <UiAccordionTrigger>Item 2</UiAccordionTrigger>
+            <UiAccordionContent>Content 2</UiAccordionContent>
+          </UiAccordionItem>
+        </UiAccordion>
+      `,
+      setup() {
+        const value = ref('item-2');
+        return { value };
+      },
+    });
+
+    await waitFor(() => {
+      expect(getByRole('button', { name: 'Item 2' })).toHaveAttribute('data-state', 'open');
+      expect(getByText('Content 2')).toBeVisible();
+    });
+  });
+
+  test('disabled items do not respond to clicks', async () => {
+    const user = userEvent.setup();
+    const { getByRole } = render({
+      components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+      template: `
+        <UiAccordion type="single" collapsible>
+          <UiAccordionItem value="item-1" :disabled="true">
+            <UiAccordionTrigger>Disabled Item</UiAccordionTrigger>
+            <UiAccordionContent>Content</UiAccordionContent>
+          </UiAccordionItem>
+        </UiAccordion>
+      `,
+    });
+
+    const trigger = getByRole('button', { name: 'Disabled Item' });
+    expect(trigger).toBeDisabled();
+
+    await user.click(trigger);
+
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute('data-state', 'closed');
+    });
+  });
+
+  test('collapses open item when collapsible is true (single mode)', async () => {
+    const user = userEvent.setup();
+    const { getByRole } = render({
+      components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+      template: `
+        <UiAccordion type="single" collapsible>
+          <UiAccordionItem value="item-1">
+            <UiAccordionTrigger>Item 1</UiAccordionTrigger>
+            <UiAccordionContent>Content 1</UiAccordionContent>
+          </UiAccordionItem>
+        </UiAccordion>
+      `,
+    });
+
+    const trigger = getByRole('button', { name: 'Item 1' });
+
+    // Open the item
+    await user.click(trigger);
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute('data-state', 'open');
+    });
+
+    // Click again to collapse
+    await user.click(trigger);
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute('data-state', 'closed');
+    });
+  });
+
+  test('expands items specified in defaultValue on initial render', async () => {
+    const { getByRole, getByText } = render({
+      components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+      template: `
+        <UiAccordion type="single" default-value="item-2">
+          <UiAccordionItem value="item-1">
+            <UiAccordionTrigger>Item 1</UiAccordionTrigger>
+            <UiAccordionContent>Content 1</UiAccordionContent>
+          </UiAccordionItem>
+          <UiAccordionItem value="item-2">
+            <UiAccordionTrigger>Item 2</UiAccordionTrigger>
+            <UiAccordionContent>Content 2</UiAccordionContent>
+          </UiAccordionItem>
+        </UiAccordion>
+      `,
+    });
+
+    await waitFor(() => {
+      expect(getByRole('button', { name: 'Item 1' })).toHaveAttribute('data-state', 'closed');
+      expect(getByRole('button', { name: 'Item 2' })).toHaveAttribute('data-state', 'open');
+      expect(getByText('Content 2')).toBeVisible();
+    });
+  });
+
+  test('expands multiple items specified in defaultValue (multiple mode)', async () => {
+    const { getByRole, getByText } = render({
+      components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+      template: `
+        <UiAccordion type="multiple" :default-value="['item-1', 'item-3']">
+          <UiAccordionItem value="item-1">
+            <UiAccordionTrigger>Item 1</UiAccordionTrigger>
+            <UiAccordionContent>Content 1</UiAccordionContent>
+          </UiAccordionItem>
+          <UiAccordionItem value="item-2">
+            <UiAccordionTrigger>Item 2</UiAccordionTrigger>
+            <UiAccordionContent>Content 2</UiAccordionContent>
+          </UiAccordionItem>
+          <UiAccordionItem value="item-3">
+            <UiAccordionTrigger>Item 3</UiAccordionTrigger>
+            <UiAccordionContent>Content 3</UiAccordionContent>
+          </UiAccordionItem>
+        </UiAccordion>
+      `,
+    });
+
+    await waitFor(() => {
+      expect(getByRole('button', { name: 'Item 1' })).toHaveAttribute('data-state', 'open');
+      expect(getByRole('button', { name: 'Item 2' })).toHaveAttribute('data-state', 'closed');
+      expect(getByRole('button', { name: 'Item 3' })).toHaveAttribute('data-state', 'open');
+      expect(getByText('Content 1')).toBeVisible();
+      expect(getByText('Content 3')).toBeVisible();
+    });
+  });
+});

package/src/primitives/UiAccordion/index.ts

@@ -0,0 +1,6 @@
+export { default as UiAccordion } from './UiAccordion.vue';
+export { default as UiAccordionItem } from './UiAccordionItem.vue';
+export { default as UiAccordionTrigger } from './UiAccordionTrigger.vue';
+export { default as UiAccordionContent } from './UiAccordionContent.vue';
+
+export * from './types';

package/src/primitives/UiAccordion/types.ts

@@ -0,0 +1,95 @@
+/** The type of accordion - single or multiple open items allowed. */
+export type UiAccordionType = 'single' | 'multiple';
+
+/** Reading direction for the accordion. */
+export type UiAccordionDir = 'ltr' | 'rtl';
+
+/** Orientation of the accordion. */
+export type UiAccordionOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Props for the UiAccordion root component (single mode).
+ */
+export type UiAccordionSingleProps = {
+  /** Accordion type - 'single' allows only one item open at a time. */
+  type: 'single';
+  /** The controlled value of the expanded item when using `v-model` for two-way binding. */
+  modelValue?: string;
+  /** The value of the item that should be expanded when initially rendered (uncontrolled). */
+  defaultValue?: string;
+  /** Whether the accordion can be collapsed (all items closed). Only applicable when type is 'single'. */
+  collapsible?: boolean;
+  /** Whether the accordion is disabled. */
+  disabled?: boolean;
+  /** The reading direction. */
+  dir?: UiAccordionDir;
+  /** The orientation of the accordion. */
+  orientation?: UiAccordionOrientation;
+};
+
+/**
+ * Props for the UiAccordion root component (multiple mode).
+ */
+export type UiAccordionMultipleProps = {
+  /** Accordion type - 'multiple' allows multiple items open at once. */
+  type: 'multiple';
+  /** The controlled value of the expanded items when using `v-model` for two-way binding. */
+  modelValue?: string[];
+  /** The values of the items that should be expanded when initially rendered (uncontrolled). */
+  defaultValue?: string[];
+  /** Whether the accordion is disabled. */
+  disabled?: boolean;
+  /** The reading direction. */
+  dir?: UiAccordionDir;
+  /** The orientation of the accordion. */
+  orientation?: UiAccordionOrientation;
+};
+
+/**
+ * Collapsible sections for organizing content. Use for FAQs,
+ * settings panels, or any content that benefits from show/hide.
+ *
+ * @category Navigation
+ * @useCases FAQ section, settings panel, collapsible content, expandable list
+ * @keywords accordion, collapse, expand, faq, panel, section, toggle
+ * @related UiTabs
+ */
+export type UiAccordionProps = UiAccordionSingleProps | UiAccordionMultipleProps;
+
+/**
+ * Emits for the UiAccordion root component.
+ */
+export type UiAccordionEmits = {
+  /**
+   * Emitted when the expanded item(s) change.
+   * - Single mode: `string` (item value) or `undefined` (when collapsed)
+   * - Multiple mode: `string[]` (array of item values)
+   */
+  'update:modelValue': [value: string | string[] | undefined];
+};
+
+/**
+ * Props for the UiAccordionItem component.
+ */
+export type UiAccordionItemProps = {
+  /** Unique value that identifies the accordion item (required). */
+  value: string;
+  /** Whether the accordion item is disabled. */
+  disabled?: boolean;
+};
+
+/**
+ * Props for the UiAccordionTrigger component.
+ */
+export type UiAccordionTriggerProps = {
+  /** Whether the trigger element is an `asChild` element. */
+  asChild?: boolean;
+};
+
+/**
+ * Props for the UiAccordionContent component.
+ */
+export type UiAccordionContentProps = {
+  /** Force mounting when more control is needed (useful for animations). */
+  forceMount?: boolean;
+};

package/src/primitives/UiAlert/UiAlert.stories.ts

@@ -0,0 +1,199 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { UiAlert, UiAlertDescription, UiAlertTitle } from './index';
+import { AlertVariants } from './constants';
+import { UiIcon } from '../UiIcon';
+
+const meta: Meta<typeof UiAlert> = {
+  title: 'Primitives/UiAlert',
+  component: UiAlert,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: AlertVariants,
+      description: 'The visual style of the alert',
+    },
+  },
+  args: {
+    variant: 'default',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiAlert>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiAlert, UiAlertDescription, UiAlertTitle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiAlert>
+    <UiIcon icon="i-material-symbols-check-circle" class="size-4" />
+    <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
+    <UiAlertDescription>
+      This is an alert with icon, title and description.
+    </UiAlertDescription>
+  </UiAlert>
+</template>`;
+
+/**
+ * Default alert with icon, title and description.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: {
+      UiAlert,
+      UiAlertDescription,
+      UiAlertTitle,
+      UiIcon,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <UiAlert :variant="args.variant">
+        <UiIcon icon="i-material-symbols-check-circle" class="size-4" />
+        <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
+        <UiAlertDescription>
+          This is an alert with icon, title and description.
+        </UiAlertDescription>
+      </UiAlert>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const destructiveTemplateSource = `<script setup lang="ts">
+import { UiAlert, UiAlertDescription, UiAlertTitle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiAlert variant="destructive">
+    <UiIcon icon="i-material-symbols-error" class="size-4" />
+    <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
+    <UiAlertDescription>
+      <p>Please verify your billing information and try again.</p>
+      <ul class="mt-2 list-inside list-disc space-y-1">
+        <li>Check your card details</li>
+        <li>Ensure sufficient funds</li>
+        <li>Verify billing address</li>
+      </ul>
+    </UiAlertDescription>
+  </UiAlert>
+</template>`;
+
+/**
+ * Destructive alert variant for errors or critical warnings.
+ */
+export const Destructive: Story = {
+  render: () => ({
+    components: {
+      UiAlert,
+      UiAlertDescription,
+      UiAlertTitle,
+      UiIcon,
+    },
+    template: `
+      <UiAlert variant="destructive">
+        <UiIcon icon="i-material-symbols-error" class="size-4" />
+        <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
+        <UiAlertDescription>
+          <p>Please verify your billing information and try again.</p>
+          <ul class="mt-2 list-inside list-disc space-y-1">
+            <li>Check your card details</li>
+            <li>Ensure sufficient funds</li>
+            <li>Verify billing address</li>
+          </ul>
+        </UiAlertDescription>
+      </UiAlert>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: destructiveTemplateSource,
+      },
+    },
+  },
+};
+
+const allVariantsTemplateSource = `<script setup lang="ts">
+import { UiAlert, UiAlertDescription, UiAlertTitle, UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <UiAlert>
+      <UiIcon icon="i-material-symbols-check-circle" class="size-4" />
+      <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
+      <UiAlertDescription>
+        This is an alert with icon, title and description.
+      </UiAlertDescription>
+    </UiAlert>
+
+    <UiAlert variant="destructive">
+      <UiIcon icon="i-material-symbols-error" class="size-4" />
+      <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
+      <UiAlertDescription>
+        <p>Please verify your billing information and try again.</p>
+        <ul class="mt-2 list-inside list-disc space-y-1">
+          <li>Check your card details</li>
+          <li>Ensure sufficient funds</li>
+          <li>Verify billing address</li>
+        </ul>
+      </UiAlertDescription>
+    </UiAlert>
+  </div>
+</template>`;
+
+/**
+ * All available alert variants side by side.
+ */
+export const AllVariants: Story = {
+  render: () => ({
+    components: {
+      UiAlert,
+      UiAlertDescription,
+      UiAlertTitle,
+      UiIcon,
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <UiAlert>
+          <UiIcon icon="i-material-symbols-check-circle" class="size-4" />
+          <UiAlertTitle>Success! Your changes have been saved</UiAlertTitle>
+          <UiAlertDescription>
+            This is an alert with icon, title and description.
+          </UiAlertDescription>
+        </UiAlert>
+
+        <UiAlert variant="destructive">
+          <UiIcon icon="i-material-symbols-error" class="size-4" />
+          <UiAlertTitle>Unable to process your payment.</UiAlertTitle>
+          <UiAlertDescription>
+            <p>Please verify your billing information and try again.</p>
+            <ul class="mt-2 list-inside list-disc space-y-1">
+              <li>Check your card details</li>
+              <li>Ensure sufficient funds</li>
+              <li>Verify billing address</li>
+            </ul>
+          </UiAlertDescription>
+        </UiAlert>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: allVariantsTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiAlert/UiAlert.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { Alert as ShadcnAlert } from '@/primitives/shadcn/alert';
+
+  import { UiAlertProps } from './types';
+
+  defineOptions({
+    name: 'UiAlert',
+  });
+
+  withDefaults(defineProps<UiAlertProps>(), {
+    variant: 'default',
+  });
+
+  /**
+   * shadcn-vue `Alert` styles are optimized for SVG icons (`has-[>svg]...`).
+   * Our `UiIcon` renders as `<span data-slot="icon" ... />`, so we mirror the same
+   * layout rules for `[data-slot=icon]` to keep alignment consistent.
+   */
+  const uiIconLayoutClasses =
+    'has-[>[data-slot=icon]]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>[data-slot=icon]]:gap-x-3 [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:translate-y-0.5 [&>[data-slot=icon]]:text-current';
+</script>
+
+<template>
+  <ShadcnAlert :variant :class="uiIconLayoutClasses">
+    <slot />
+  </ShadcnAlert>
+</template>

package/src/primitives/UiAlert/UiAlertDescription.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { AlertDescription as ShadcnAlertDescription } from '@/primitives/shadcn/alert';
+
+  defineOptions({
+    name: 'UiAlertDescription',
+  });
+</script>
+
+<template>
+  <ShadcnAlertDescription>
+    <slot />
+  </ShadcnAlertDescription>
+</template>

package/src/primitives/UiAlert/UiAlertTitle.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { AlertTitle as ShadcnAlertTitle } from '@/primitives/shadcn/alert';
+
+  defineOptions({
+    name: 'UiAlertTitle',
+  });
+</script>
+
+<template>
+  <ShadcnAlertTitle>
+    <slot />
+  </ShadcnAlertTitle>
+</template>

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

@@ -0,0 +1,20 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiAlert from '../UiAlert.vue';
+
+describe('UiAlert', () => {
+  test('has alert role for screen readers', () => {
+    const { getByRole } = render(UiAlert, {
+      slots: { default: 'Message' },
+    });
+    expect(getByRole('alert')).toBeInTheDocument();
+  });
+
+  test('accepts destructive variant', () => {
+    const { getByRole } = render(UiAlert, {
+      props: { variant: 'destructive' },
+      slots: { default: 'Message' },
+    });
+    expect(getByRole('alert')).toBeInTheDocument();
+  });
+});

package/src/primitives/UiAlert/constants.ts

@@ -0,0 +1,3 @@
+import { UiAlertVariants } from './types';
+
+export const AlertVariants: UiAlertVariants[] = ['default', 'destructive'];

package/src/primitives/UiAlert/index.ts

@@ -0,0 +1,5 @@
+export { default as UiAlert } from './UiAlert.vue';
+export { default as UiAlertDescription } from './UiAlertDescription.vue';
+export { default as UiAlertTitle } from './UiAlertTitle.vue';
+
+export type * from './types';

package/src/primitives/UiAlert/types.ts

@@ -0,0 +1,14 @@
+export type UiAlertVariants = 'default' | 'destructive';
+
+/**
+ * A highlighted message box for important information. Use for
+ * success messages, warnings, errors, or informational notices.
+ *
+ * @category Feedback
+ * @useCases success message, error notice, warning, info banner, notification
+ * @keywords alert, message, notice, warning, error, success, info, banner
+ * @related UiAlertDialog
+ */
+export type UiAlertProps = {
+  variant?: UiAlertVariants;
+};