@aleph-alpha/ui-library 1.8.0 → 1.10.0

package/src/primitives/UiCard/__tests__/UiCardAction.test.ts

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiCardAction from '../UiCardAction.vue';
+
+describe('UiCardAction', () => {
+  test('renders with custom class', () => {
+    const { container } = render(UiCardAction, {
+      props: { class: 'custom-action' },
+      slots: {
+        default: '<button>Action</button>',
+      },
+    });
+
+    const action = container.querySelector('[data-slot="card-action"]');
+    expect(action).toBeInTheDocument();
+    expect(action).toHaveClass('custom-action');
+  });
+});

package/src/primitives/UiCard/__tests__/UiCardContent.test.ts

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiCardContent from '../UiCardContent.vue';
+
+describe('UiCardContent', () => {
+  test('renders with custom class', () => {
+    const { container } = render(UiCardContent, {
+      props: { class: 'custom-content' },
+      slots: {
+        default: '<p>Card content</p>',
+      },
+    });
+
+    const content = container.querySelector('[data-slot="card-content"]');
+    expect(content).toBeInTheDocument();
+    expect(content).toHaveClass('custom-content');
+  });
+});

package/src/primitives/UiCard/__tests__/UiCardDescription.test.ts

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiCardDescription from '../UiCardDescription.vue';
+
+describe('UiCardDescription', () => {
+  test('renders with custom class', () => {
+    const { container } = render(UiCardDescription, {
+      props: { class: 'custom-description' },
+      slots: {
+        default: 'Card description text',
+      },
+    });
+
+    const description = container.querySelector('[data-slot="card-description"]');
+    expect(description).toBeInTheDocument();
+    expect(description).toHaveClass('custom-description');
+  });
+});

package/src/primitives/UiCard/__tests__/UiCardFooter.test.ts

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiCardFooter from '../UiCardFooter.vue';
+
+describe('UiCardFooter', () => {
+  test('renders with custom class', () => {
+    const { container } = render(UiCardFooter, {
+      props: { class: 'custom-footer' },
+      slots: {
+        default: '<button>Action</button>',
+      },
+    });
+
+    const footer = container.querySelector('[data-slot="card-footer"]');
+    expect(footer).toBeInTheDocument();
+    expect(footer).toHaveClass('custom-footer');
+  });
+});

package/src/primitives/UiCard/__tests__/UiCardHeader.test.ts

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiCardHeader from '../UiCardHeader.vue';
+
+describe('UiCardHeader', () => {
+  test('renders with custom class', () => {
+    const { container } = render(UiCardHeader, {
+      props: { class: 'custom-header' },
+      slots: {
+        default: '<span>Header content</span>',
+      },
+    });
+
+    const header = container.querySelector('[data-slot="card-header"]');
+    expect(header).toBeInTheDocument();
+    expect(header).toHaveClass('custom-header');
+  });
+});

package/src/primitives/UiCard/__tests__/UiCardTitle.test.ts

@@ -0,0 +1,19 @@
+import '@testing-library/jest-dom/vitest';
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiCardTitle from '../UiCardTitle.vue';
+
+describe('UiCardTitle', () => {
+  test('renders with custom class', () => {
+    const { container } = render(UiCardTitle, {
+      props: { class: 'custom-title' },
+      slots: {
+        default: 'Card Title',
+      },
+    });
+
+    const title = container.querySelector('[data-slot="card-title"]');
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveClass('custom-title');
+  });
+});

package/src/primitives/UiCard/index.ts

@@ -0,0 +1,7 @@
+export { default as UiCard } from './UiCard.vue';
+export { default as UiCardAction } from './UiCardAction.vue';
+export { default as UiCardContent } from './UiCardContent.vue';
+export { default as UiCardDescription } from './UiCardDescription.vue';
+export { default as UiCardFooter } from './UiCardFooter.vue';
+export { default as UiCardHeader } from './UiCardHeader.vue';
+export { default as UiCardTitle } from './UiCardTitle.vue';

package/src/primitives/UiCard/types.ts

@@ -0,0 +1,10 @@
+/**
+ * A container for grouping related content with header, body, and footer.
+ * Use for displaying information in a bordered, elevated container.
+ *
+ * @category Layout
+ * @useCases content card, product card, profile card, info panel, dashboard widget
+ * @keywords card, container, panel, box, section, tile, widget
+ * @related UiAlert
+ */
+export type UiCardProps = Record<string, never>;

package/src/primitives/UiCheckbox/UiCheckbox.stories.ts

@@ -0,0 +1,231 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiCheckbox from './UiCheckbox.vue';
+import { ref } from 'vue';
+
+const meta: Meta<typeof UiCheckbox> = {
+  title: 'Primitives/UiCheckbox',
+  component: UiCheckbox,
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Set component as disabled',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Set component as required',
+    },
+  },
+  args: {
+    name: 'checkbox',
+    disabled: false,
+    required: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiCheckbox>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCheckbox } from '@aleph-alpha/ui-library'
+
+const checked = ref(false)
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <UiCheckbox id="terms" name="terms" v-model="checked" />
+    <label for="terms" class="text-sm font-medium">
+      Accept terms and conditions
+    </label>
+  </div>
+</template>`;
+
+/**
+ * Simple checkbox with label.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiCheckbox },
+    setup() {
+      const checked = ref(false);
+      return { args, checked };
+    },
+    template: `<div class="flex items-center gap-3">
+      <UiCheckbox id="terms" name="terms" v-model="checked" :disabled="args.disabled" :required="args.required" />
+      <label for="terms" class="text-sm font-medium">
+        Accept terms and conditions
+      </label>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const withDescriptionTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCheckbox } from '@aleph-alpha/ui-library'
+
+const checked = ref(true)
+</script>
+
+<template>
+  <div class="flex items-start gap-3">
+    <UiCheckbox id="terms-2" name="terms-2" v-model="checked" />
+    <div class="grid gap-2">
+      <label for="terms-2" class="text-sm font-medium">
+        Accept terms and conditions
+      </label>
+      <p class="text-muted-foreground text-sm">
+        By clicking this checkbox, you agree to the terms and conditions.
+      </p>
+    </div>
+  </div>
+</template>`;
+
+/**
+ * Checkbox with label and description text.
+ */
+export const WithDescription: Story = {
+  render: (args) => ({
+    components: { UiCheckbox },
+    setup() {
+      const checked = ref(true);
+      return { args, checked };
+    },
+    template: `<div class="flex items-start gap-3">
+      <UiCheckbox id="terms-2" name="terms-2" v-model="checked" :disabled="args.disabled" :required="args.required" />
+      <div class="grid gap-2">
+        <label for="terms-2" class="text-sm font-medium">
+          Accept terms and conditions
+        </label>
+        <p class="text-muted-foreground text-sm">
+          By clicking this checkbox, you agree to the terms and conditions.
+        </p>
+      </div>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withDescriptionTemplateSource,
+      },
+    },
+  },
+};
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { UiCheckbox } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex items-start gap-3">
+    <UiCheckbox id="toggle" name="toggle" disabled />
+    <label for="toggle" class="text-sm font-medium">
+      Enable notifications
+    </label>
+  </div>
+</template>`;
+
+/**
+ * Disabled checkbox.
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { UiCheckbox },
+    setup() {
+      return { args };
+    },
+    template: `<div class="flex items-start gap-3">
+      <UiCheckbox id="toggle" name="toggle" :disabled="args.disabled" />
+      <label for="toggle" class="text-sm font-medium">
+        Enable notifications
+      </label>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: disabledTemplateSource,
+      },
+    },
+  },
+};
+
+const cardTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import { UiCheckbox } from '@aleph-alpha/ui-library'
+
+const enabled = ref(true)
+</script>
+
+<template>
+  <label
+    class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
+  >
+    <UiCheckbox
+      id="notifications"
+      name="notifications"
+      v-model="enabled"
+      class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+    />
+    <div class="grid gap-1.5 font-normal">
+      <p class="text-sm font-medium leading-none">
+        Enable notifications
+      </p>
+      <p class="text-muted-foreground text-sm">
+        You can enable or disable notifications at any time.
+      </p>
+    </div>
+  </label>
+</template>`;
+
+/**
+ * Styled card checkbox with custom colors.
+ * The label wraps the checkbox for better click target.
+ */
+export const Card: Story = {
+  render: (args) => ({
+    components: { UiCheckbox },
+    setup() {
+      const enabled = ref(true);
+      return { args, enabled };
+    },
+    template: `<label
+      class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
+    >
+      <UiCheckbox
+        id="notifications"
+        name="notifications"
+        v-model="enabled"
+        :disabled="args.disabled"
+        class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+      />
+      <div class="grid gap-1.5 font-normal">
+        <p class="text-sm font-medium leading-none">
+          Enable notifications
+        </p>
+        <p class="text-muted-foreground text-sm">
+          You can enable or disable notifications at any time.
+        </p>
+      </div>
+    </label>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: cardTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiCheckbox/UiCheckbox.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { Checkbox as ShadcnCheckbox } from '@/primitives/shadcn/checkbox';
+  import type { UiCheckboxModelValue, UiCheckboxProps } from './types';
+
+  defineOptions({
+    name: 'UiCheckbox',
+  });
+
+  const props = withDefaults(defineProps<UiCheckboxProps>(), {
+    disabled: false,
+    required: false,
+  });
+
+  const model = defineModel<UiCheckboxModelValue>();
+</script>
+
+<template>
+  <ShadcnCheckbox v-model="model" v-bind="props" />
+</template>

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

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+import UiCheckbox from '../UiCheckbox.vue';
+
+describe('UiCheckbox', () => {
+  test('renders enabled and emits update:modelValue on click', async () => {
+    const { getByRole, emitted } = render(UiCheckbox);
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toBeEnabled();
+
+    await userEvent.click(checkbox);
+    expect(emitted('update:modelValue')?.[0][0]).toBe(true);
+  });
+
+  test('renders disabled when disabled prop is true', () => {
+    const { getByRole } = render(UiCheckbox, {
+      props: { disabled: true },
+    });
+    expect(getByRole('checkbox')).toBeDisabled();
+  });
+
+  test('renders indeterminate state with aria-checked="mixed"', () => {
+    const { getByRole } = render(UiCheckbox, {
+      props: { modelValue: 'indeterminate' },
+    });
+    expect(getByRole('checkbox')).toHaveAttribute('aria-checked', 'mixed');
+  });
+});

package/src/primitives/UiCheckbox/index.ts

@@ -0,0 +1,2 @@
+export { default as UiCheckbox } from './UiCheckbox.vue';
+export type { UiCheckboxProps } from './types';

package/src/primitives/UiCheckbox/types.ts

@@ -0,0 +1,30 @@
+/**
+ * Type for the accepted values for the component.
+ */
+export type UiCheckboxModelValue = boolean | 'indeterminate';
+
+/**
+ * A checkbox input for boolean or indeterminate selections. Use for
+ * toggling options, accepting terms, or multi-select lists.
+ *
+ * @category Form Inputs
+ * @useCases toggle option, accept terms, multi-select, settings, preferences
+ * @keywords checkbox, check, toggle, boolean, tick, select, form
+ * @related UiSwitch, UiRadioGroup
+ */
+export type UiCheckboxProps = {
+  /**
+   * Prop to name the element
+   */
+  name: string;
+  /**
+   * Prop to define the Checkbox as disabled, therefore blocking all user interaction with it.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Define the element as required on a Form.
+   * @default false
+   */
+  required?: boolean;
+};