@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/UiItem/UiItem.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import { Item } from '@/components/core/item';
+  import { UiItemProps } from './types';
+
+  defineOptions({
+    name: 'UiItem',
+  });
+
+  const props = withDefaults(defineProps<UiItemProps>(), {
+    variant: 'default',
+    size: 'default',
+    asChild: false,
+  });
+</script>
+
+<template>
+  <Item :variant="props.variant" :size="props.size" :as-child="props.asChild">
+    <slot />
+  </Item>
+</template>

package/src/components/UiItem/UiItemMedia.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { ItemMedia } from '@/components/core/item';
+  import { UiItemMediaProps } from './types';
+
+  defineOptions({
+    name: 'UiItemMedia',
+  });
+
+  const props = withDefaults(defineProps<UiItemMediaProps>(), {
+    variant: 'default',
+  });
+</script>
+
+<template>
+  <ItemMedia :variant="props.variant">
+    <slot />
+  </ItemMedia>
+</template>

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

@@ -0,0 +1,446 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import {
+  UiItem,
+  UiItemGroup,
+  UiItemSeparator,
+  UiItemMedia,
+  UiItemContent,
+  UiItemTitle,
+  UiItemDescription,
+  UiItemActions,
+  UiItemHeader,
+  UiItemFooter,
+} from '../index';
+
+describe('UiItem', () => {
+  describe('Rendering', () => {
+    test('renders as div by default', () => {
+      const { container } = render(UiItem, {
+        slots: {
+          default: 'Item content',
+        },
+      });
+
+      const element = container.querySelector('[data-slot="item"]');
+      expect(element?.tagName).toBe('DIV');
+    });
+
+    test('renders slot content', () => {
+      const { getByText } = render(UiItem, {
+        slots: {
+          default: 'Item content',
+        },
+      });
+
+      expect(getByText('Item content')).toBeInTheDocument();
+    });
+
+    test('applies default variant classes', () => {
+      const { container } = render(UiItem, {
+        slots: {
+          default: 'Content',
+        },
+      });
+
+      const element = container.querySelector('[data-slot="item"]');
+      expect(element).toHaveClass('bg-transparent');
+    });
+
+    test('applies outline variant classes', () => {
+      const { container } = render(UiItem, {
+        props: {
+          variant: 'outline',
+        },
+        slots: {
+          default: 'Content',
+        },
+      });
+
+      const element = container.querySelector('[data-slot="item"]');
+      expect(element).toHaveClass('border-border');
+    });
+
+    test('applies muted variant classes', () => {
+      const { container } = render(UiItem, {
+        props: {
+          variant: 'muted',
+        },
+        slots: {
+          default: 'Content',
+        },
+      });
+
+      const element = container.querySelector('[data-slot="item"]');
+      expect(element).toHaveClass('bg-muted/50');
+    });
+
+    test('applies size classes', () => {
+      const { container } = render(UiItem, {
+        props: {
+          size: 'sm',
+        },
+        slots: {
+          default: 'Content',
+        },
+      });
+
+      const element = container.querySelector('[data-slot="item"]');
+      expect(element).toHaveClass('py-3');
+      expect(element).toHaveClass('px-4');
+    });
+  });
+
+  describe('asChild behavior', () => {
+    test('renders child element as root when asChild is true with anchor tag', () => {
+      const { container } = render(UiItem, {
+        props: {
+          asChild: true,
+        },
+        slots: {
+          default: '<a href="/test">Link Item</a>',
+        },
+      });
+
+      const element = container.querySelector('[data-slot="item"]');
+      expect(element).toBeInTheDocument();
+      expect(element?.tagName).toBe('A');
+      expect(element).toHaveAttribute('href', '/test');
+    });
+
+    test('renders child element as root when asChild is true with button tag', () => {
+      const { container } = render(UiItem, {
+        props: {
+          asChild: true,
+        },
+        slots: {
+          default: '<button type="button">Button Item</button>',
+        },
+      });
+
+      const element = container.querySelector('[data-slot="item"]');
+      expect(element).toBeInTheDocument();
+      expect(element?.tagName).toBe('BUTTON');
+      expect(element).toHaveAttribute('type', 'button');
+    });
+
+    test('applies computed classes to child element when asChild is true', () => {
+      const { container } = render(UiItem, {
+        props: {
+          asChild: true,
+          variant: 'outline',
+          size: 'sm',
+        },
+        slots: {
+          default: '<a href="/test">Link Item</a>',
+        },
+      });
+
+      const element = container.querySelector('[data-slot="item"]');
+      expect(element?.tagName).toBe('A');
+      // Check base classes from itemVariants are applied
+      expect(element).toHaveClass('flex');
+      expect(element).toHaveClass('items-center');
+      expect(element).toHaveClass('rounded-md');
+      // Check variant classes are applied
+      expect(element).toHaveClass('border-border');
+      // Check size classes are applied
+      expect(element).toHaveClass('py-3');
+      expect(element).toHaveClass('px-4');
+    });
+
+    test('applies default variant classes to child element when asChild is true', () => {
+      const { container } = render(UiItem, {
+        props: {
+          asChild: true,
+        },
+        slots: {
+          default: '<button>Button</button>',
+        },
+      });
+
+      const element = container.querySelector('[data-slot="item"]');
+      expect(element?.tagName).toBe('BUTTON');
+      expect(element).toHaveClass('bg-transparent');
+      expect(element).toHaveClass('p-4');
+    });
+  });
+});
+
+describe('UiItemGroup', () => {
+  test('renders with data-slot attribute', () => {
+    const { container } = render(UiItemGroup, {
+      slots: {
+        default: 'Group content',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-group"]');
+    expect(element).toBeInTheDocument();
+  });
+
+  test('renders children', () => {
+    const { getByText } = render(UiItemGroup, {
+      slots: {
+        default: 'Group content',
+      },
+    });
+
+    expect(getByText('Group content')).toBeInTheDocument();
+  });
+});
+
+describe('UiItemSeparator', () => {
+  test('renders with data-slot attribute', () => {
+    const { container } = render(UiItemSeparator);
+
+    const element = container.querySelector('[data-slot="item-separator"]');
+    expect(element).toBeInTheDocument();
+  });
+});
+
+describe('UiItemMedia', () => {
+  test('renders with default variant', () => {
+    const { container } = render(UiItemMedia, {
+      slots: {
+        default: 'Media content',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-media"]');
+    expect(element).toBeInTheDocument();
+    expect(element).toHaveClass('bg-transparent');
+  });
+
+  test('renders with icon variant', () => {
+    const { container } = render(UiItemMedia, {
+      props: {
+        variant: 'icon',
+      },
+      slots: {
+        default: 'Icon content',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-media"]');
+    expect(element).toHaveClass('size-8');
+  });
+
+  test('renders with image variant', () => {
+    const { container } = render(UiItemMedia, {
+      props: {
+        variant: 'image',
+      },
+      slots: {
+        default: 'Image content',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-media"]');
+    expect(element).toHaveClass('size-10');
+    expect(element).toHaveClass('rounded-sm');
+  });
+});
+
+describe('UiItemContent', () => {
+  test('renders with data-slot attribute', () => {
+    const { container } = render(UiItemContent, {
+      slots: {
+        default: 'Content',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-content"]');
+    expect(element).toBeInTheDocument();
+  });
+
+  test('has flex column layout', () => {
+    const { container } = render(UiItemContent, {
+      slots: {
+        default: 'Content',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-content"]');
+    expect(element).toHaveClass('flex');
+    expect(element).toHaveClass('flex-col');
+  });
+});
+
+describe('UiItemTitle', () => {
+  test('renders with data-slot attribute', () => {
+    const { container } = render(UiItemTitle, {
+      slots: {
+        default: 'Title text',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-title"]');
+    expect(element).toBeInTheDocument();
+  });
+
+  test('renders title text', () => {
+    const { getByText } = render(UiItemTitle, {
+      slots: {
+        default: 'My Title',
+      },
+    });
+
+    expect(getByText('My Title')).toBeInTheDocument();
+  });
+
+  test('has font-medium class', () => {
+    const { container } = render(UiItemTitle, {
+      slots: {
+        default: 'Title',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-title"]');
+    expect(element).toHaveClass('font-medium');
+  });
+});
+
+describe('UiItemDescription', () => {
+  test('renders with data-slot attribute', () => {
+    const { container } = render(UiItemDescription, {
+      slots: {
+        default: 'Description text',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-description"]');
+    expect(element).toBeInTheDocument();
+  });
+
+  test('renders description text', () => {
+    const { getByText } = render(UiItemDescription, {
+      slots: {
+        default: 'My Description',
+      },
+    });
+
+    expect(getByText('My Description')).toBeInTheDocument();
+  });
+
+  test('has muted foreground color', () => {
+    const { container } = render(UiItemDescription, {
+      slots: {
+        default: 'Description',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-description"]');
+    expect(element).toHaveClass('text-muted-foreground');
+  });
+});
+
+describe('UiItemActions', () => {
+  test('renders with data-slot attribute', () => {
+    const { container } = render(UiItemActions, {
+      slots: {
+        default: 'Actions content',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-actions"]');
+    expect(element).toBeInTheDocument();
+  });
+
+  test('has flex layout with gap', () => {
+    const { container } = render(UiItemActions, {
+      slots: {
+        default: 'Actions',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-actions"]');
+    expect(element).toHaveClass('flex');
+    expect(element).toHaveClass('gap-2');
+  });
+});
+
+describe('UiItemHeader', () => {
+  test('renders with data-slot attribute', () => {
+    const { container } = render(UiItemHeader, {
+      slots: {
+        default: 'Header text',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-header"]');
+    expect(element).toBeInTheDocument();
+  });
+
+  test('renders header text', () => {
+    const { getByText } = render(UiItemHeader, {
+      slots: {
+        default: 'CATEGORY',
+      },
+    });
+
+    expect(getByText('CATEGORY')).toBeInTheDocument();
+  });
+});
+
+describe('UiItemFooter', () => {
+  test('renders with data-slot attribute', () => {
+    const { container } = render(UiItemFooter, {
+      slots: {
+        default: 'Footer text',
+      },
+    });
+
+    const element = container.querySelector('[data-slot="item-footer"]');
+    expect(element).toBeInTheDocument();
+  });
+
+  test('renders footer text', () => {
+    const { getByText } = render(UiItemFooter, {
+      slots: {
+        default: 'Updated 2 hours ago',
+      },
+    });
+
+    expect(getByText('Updated 2 hours ago')).toBeInTheDocument();
+  });
+});
+
+describe('Composed Item', () => {
+  test('renders a complete item with all sub-components', () => {
+    const { getByText, container } = render({
+      components: {
+        UiItem,
+        UiItemMedia,
+        UiItemContent,
+        UiItemTitle,
+        UiItemDescription,
+        UiItemActions,
+      },
+      template: `
+        <UiItem variant="outline">
+          <UiItemMedia variant="icon">
+            <span data-testid="icon">Icon</span>
+          </UiItemMedia>
+          <UiItemContent>
+            <UiItemTitle>Test Title</UiItemTitle>
+            <UiItemDescription>Test Description</UiItemDescription>
+          </UiItemContent>
+          <UiItemActions>
+            <button>Action</button>
+          </UiItemActions>
+        </UiItem>
+      `,
+    });
+
+    expect(getByText('Test Title')).toBeInTheDocument();
+    expect(getByText('Test Description')).toBeInTheDocument();
+    expect(getByText('Action')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="item"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="item-media"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="item-content"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="item-title"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="item-description"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="item-actions"]')).toBeInTheDocument();
+  });
+});

package/src/components/UiItem/constants.ts

@@ -0,0 +1,13 @@
+import type { UiItemVariants, UiItemSizes, UiItemMediaVariants } from './types';
+
+export const ItemVariants = [
+  'default',
+  'outline',
+  'muted',
+] as const satisfies readonly UiItemVariants[];
+export const ItemSizes = ['default', 'sm'] as const satisfies readonly UiItemSizes[];
+export const ItemMediaVariants = [
+  'default',
+  'icon',
+  'image',
+] as const satisfies readonly UiItemMediaVariants[];

package/src/components/UiItem/index.ts

@@ -0,0 +1,15 @@
+// Components with custom props - need .vue wrapper
+export { default as UiItem } from './UiItem.vue';
+export { default as UiItemMedia } from './UiItemMedia.vue';
+
+// Simple re-exports - no wrapper needed
+export { ItemActions as UiItemActions } from '@/components/core/item';
+export { ItemContent as UiItemContent } from '@/components/core/item';
+export { ItemDescription as UiItemDescription } from '@/components/core/item';
+export { ItemFooter as UiItemFooter } from '@/components/core/item';
+export { ItemGroup as UiItemGroup } from '@/components/core/item';
+export { ItemHeader as UiItemHeader } from '@/components/core/item';
+export { ItemSeparator as UiItemSeparator } from '@/components/core/item';
+export { ItemTitle as UiItemTitle } from '@/components/core/item';
+
+export type * from './types';

package/src/components/UiItem/types.ts

@@ -0,0 +1,114 @@
+/**
+ * Variant types for the UiItem primitive component
+ */
+export type UiItemVariants = 'default' | 'outline' | 'muted';
+
+/**
+ * Size types for the UiItem primitive component
+ */
+export type UiItemSizes = 'default' | 'sm';
+
+/**
+ * Media variant types for the UiItemMedia component
+ */
+export type UiItemMediaVariants = 'default' | 'icon' | 'image';
+
+/**
+ * A versatile component that you can use to display any content.
+ * The Item component is a straightforward flex container that can house
+ * nearly any type of content. Use it to display a title, description, and actions.
+ * Group it with the ItemGroup component to create a list of items.
+ * @category Layout
+ * @useCases list item, menu entry, settings row, navigation item, notification, user card
+ * @keywords item, list, row, entry, menu, settings, navigation, selectable, card
+ * @related UiCard, UiButton, UiListbox
+ */
+export interface UiItemProps {
+  /**
+   * Visual variant of the item.
+   * - `default`: Standard styling with subtle background
+   * - `outline`: Outlined style with clear borders and transparent background
+   * - `muted`: Subdued appearance with muted colors for secondary content
+   * @default 'default'
+   */
+  variant?: UiItemVariants;
+
+  /**
+   * Size of the item.
+   * - `default`: Standard size with comfortable padding
+   * - `sm`: Compact size for dense layouts
+   * @default 'default'
+   */
+  size?: UiItemSizes;
+
+  /**
+   * Whether to render as a child element (using Radix's asChild pattern).
+   * Useful for rendering the item as a link or custom component.
+   * The hover and focus states will be applied to the custom component.
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * Props for the UiItemGroup component.
+ * Container that groups related items together with consistent styling.
+ */
+export type UiItemGroupProps = Record<string, never>;
+
+/**
+ * Props for the UiItemSeparator component.
+ * A separator that separates items in the item group.
+ */
+export type UiItemSeparatorProps = Record<string, never>;
+
+/**
+ * Props for the UiItemMedia component.
+ * Use to display media content such as icons, images, or avatars.
+ */
+export interface UiItemMediaProps {
+  /**
+   * Visual variant of the media container.
+   * - `default`: Standard styling, suitable for avatars
+   * - `icon`: Styled for icon display with appropriate sizing
+   * - `image`: Styled for image display
+   * @default 'default'
+   */
+  variant?: UiItemMediaVariants;
+}
+
+/**
+ * Props for the UiItemContent component.
+ * Wraps the title and description of the item.
+ */
+export type UiItemContentProps = Record<string, never>;
+
+/**
+ * Props for the UiItemTitle component.
+ * Displays the title of the item.
+ */
+export type UiItemTitleProps = Record<string, never>;
+
+/**
+ * Props for the UiItemDescription component.
+ * Displays the description of the item.
+ */
+export type UiItemDescriptionProps = Record<string, never>;
+
+/**
+ * Props for the UiItemActions component.
+ * Displays action buttons or other interactive elements.
+ */
+export type UiItemActionsProps = Record<string, never>;
+
+/**
+ * Props for the UiItemHeader component.
+ * Displays a header above the item content.
+ */
+export type UiItemHeaderProps = Record<string, never>;
+
+/**
+ * Props for the UiItemFooter component.
+ * Displays a footer below the item content.
+ */
+export type UiItemFooterProps = Record<string, never>;