@aleph-alpha/ui-library 1.9.0 → 1.11.0

package/src/primitives/UiSpinner/UiSpinner.stories.ts

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiSpinner from './UiSpinner.vue';
+
+const meta: Meta<typeof UiSpinner> = {
+  title: 'Primitives/UiSpinner',
+  component: UiSpinner,
+  tags: ['autodocs'],
+  argTypes: {
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible label for the spinner (announced by screen readers)',
+    },
+    class: {
+      control: 'text',
+      description: 'Additional CSS classes to apply to the spinner',
+    },
+  },
+  args: {
+    ariaLabel: 'Loading',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiSpinner>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiSpinner } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiSpinner />
+</template>`;
+
+/**
+ * Default spinner with standard size.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiSpinner },
+    setup() {
+      return { args };
+    },
+    template: '<UiSpinner :aria-label="args.ariaLabel" :class="args.class" />',
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const sizesTemplateSource = `<script setup lang="ts">
+import { UiSpinner } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex items-end gap-6">
+    <div class="flex flex-col items-center gap-2">
+      <span class="text-muted-foreground text-xs">default</span>
+      <UiSpinner />
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <span class="text-muted-foreground text-xs">size-6</span>
+      <UiSpinner class="size-6" />
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <span class="text-muted-foreground text-xs">size-8</span>
+      <UiSpinner class="size-8" />
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <span class="text-muted-foreground text-xs">size-12</span>
+      <UiSpinner class="size-12" />
+    </div>
+  </div>
+</template>`;
+
+/**
+ * Spinner sizes using Tailwind classes. Default is size-4.
+ */
+export const Sizes: Story = {
+  render: () => ({
+    components: { UiSpinner },
+    template: `<div class="flex items-end gap-6">
+      <div class="flex flex-col items-center gap-2">
+        <span class="text-muted-foreground text-xs">default</span>
+        <UiSpinner />
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <span class="text-muted-foreground text-xs">size-6</span>
+        <UiSpinner class="size-6" />
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <span class="text-muted-foreground text-xs">size-8</span>
+        <UiSpinner class="size-8" />
+      </div>
+      <div class="flex flex-col items-center gap-2">
+        <span class="text-muted-foreground text-xs">size-12</span>
+        <UiSpinner class="size-12" />
+      </div>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: sizesTemplateSource,
+      },
+    },
+  },
+};
+
+const inlineTemplateSource = `<script setup lang="ts">
+import { UiSpinner } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <UiSpinner />
+    <span>Loading...</span>
+  </div>
+</template>`;
+
+/**
+ * Spinner used inline with text.
+ */
+export const InlineWithText: Story = {
+  render: () => ({
+    components: { UiSpinner },
+    template: `<div class="flex items-center gap-2">
+      <UiSpinner />
+      <span>Loading...</span>
+    </div>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: inlineTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiSpinner/UiSpinner.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { Spinner as ShadcnSpinner } from '@/primitives/shadcn/spinner';
+  import type { UiSpinnerProps } from './types';
+
+  defineOptions({
+    name: 'UiSpinner',
+  });
+
+  const props = withDefaults(defineProps<UiSpinnerProps>(), {
+    ariaLabel: 'Loading',
+  });
+</script>
+
+<template>
+  <ShadcnSpinner :aria-label="props.ariaLabel" />
+</template>

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

@@ -0,0 +1,19 @@
+import { render } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiSpinner from '../UiSpinner.vue';
+
+describe('UiSpinner', () => {
+  test('renders with role="status" and default aria-label', () => {
+    const { getByRole } = render(UiSpinner);
+    const spinner = getByRole('status');
+    expect(spinner).toBeInTheDocument();
+    expect(spinner).toHaveAttribute('aria-label', 'Loading');
+  });
+
+  test('accepts custom aria-label', () => {
+    const { getByRole } = render(UiSpinner, {
+      props: { ariaLabel: 'Submitting form' },
+    });
+    expect(getByRole('status')).toHaveAttribute('aria-label', 'Submitting form');
+  });
+});

package/src/primitives/UiSpinner/index.ts

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

package/src/primitives/UiSpinner/types.ts

@@ -0,0 +1,16 @@
+/**
+ * An animated loading indicator. Use while content is loading
+ * or an action is processing.
+ *
+ * @category Feedback
+ * @useCases loading state, processing, waiting, fetching data
+ * @keywords spinner, loading, loader, wait, progress, animation
+ * @related UiProgress
+ */
+export interface UiSpinnerProps {
+  /**
+   * Accessible label for the spinner.
+   * @default 'Loading'
+   */
+  ariaLabel?: string;
+}

package/src/primitives/UiSwitch/UiSwitch.stories.ts

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiSwitch from './UiSwitch.vue';
+import { ref, watch } from 'vue';
+
+const meta: Meta<typeof UiSwitch> = {
+  title: 'Primitives/UiSwitch',
+  component: UiSwitch,
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Set component as disabled',
+    },
+    modelValue: {
+      control: 'boolean',
+      description: 'Toggle the switch state',
+    },
+  },
+  args: {
+    name: 'switch',
+    disabled: false,
+    modelValue: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiSwitch>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import { UiSwitch } from '@aleph-alpha/ui-library'
+
+const enabled = ref(false)
+</script>
+
+<template>
+  <div class="flex items-center space-x-2">
+    <UiSwitch id="airplane-mode" v-model="enabled" name="airplane-mode" />
+    <label for="airplane-mode" class="text-sm font-medium">Airplane Mode</label>
+  </div>
+</template>`;
+
+/**
+ * Default switch with a label.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiSwitch },
+    setup() {
+      const enabled = ref(args.modelValue);
+      watch(
+        () => args.modelValue,
+        (val) => {
+          enabled.value = val;
+        },
+      );
+      return { args, enabled };
+    },
+    template: `
+      <div class="flex items-center space-x-2">
+        <UiSwitch id="airplane-mode" v-model="enabled" name="airplane-mode" :disabled="args.disabled" />
+        <label for="airplane-mode" class="text-sm font-medium">Airplane Mode</label>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const disabledTemplateSource = `<script setup lang="ts">
+import { UiSwitch } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <div class="flex items-center space-x-2">
+    <UiSwitch id="airplane-mode" name="airplane-mode" disabled />
+    <label for="airplane-mode" class="text-sm font-medium text-muted-foreground">Airplane Mode</label>
+  </div>
+</template>`;
+
+/**
+ * Switch in disabled state.
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => ({
+    components: { UiSwitch },
+    setup() {
+      const enabled = ref(args.modelValue);
+      watch(
+        () => args.modelValue,
+        (val) => {
+          enabled.value = val;
+        },
+      );
+      return { args, enabled };
+    },
+    template: `
+      <div class="flex items-center space-x-2">
+        <UiSwitch id="airplane-mode" v-model="enabled" name="airplane-mode" :disabled="args.disabled" />
+        <label for="airplane-mode" class="text-sm font-medium text-muted-foreground">Airplane Mode</label>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: disabledTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiSwitch/UiSwitch.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import { Switch as ShadcnSwitch } from '../shadcn/switch';
+  import { UiSwitchProps } from './types';
+
+  defineOptions({
+    name: 'UiSwitch',
+  });
+
+  const props = withDefaults(defineProps<UiSwitchProps>(), {
+    disabled: false,
+    required: false,
+  });
+
+  const model = defineModel<boolean>({
+    default: false,
+  });
+</script>
+
+<template>
+  <ShadcnSwitch v-model="model" v-bind="props" />
+</template>

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

@@ -0,0 +1,47 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test } from 'vitest';
+import UiSwitch from '../UiSwitch.vue';
+
+describe('UiSwitch', () => {
+  test('renders with role="switch" and defaults to unchecked', () => {
+    const { getByRole } = render(UiSwitch);
+    const switchEl = getByRole('switch');
+    expect(switchEl).toBeInTheDocument();
+    expect(switchEl).toHaveAttribute('aria-checked', 'false');
+  });
+
+  test('renders with initial checked state', () => {
+    const { getByRole } = render(UiSwitch, {
+      props: { modelValue: true },
+    });
+    expect(getByRole('switch')).toHaveAttribute('aria-checked', 'true');
+  });
+
+  test('emits update:modelValue true when toggled from off', async () => {
+    const { getByRole, emitted } = render(UiSwitch);
+
+    await userEvent.click(getByRole('switch'));
+    expect(emitted('update:modelValue')).toHaveLength(1);
+    expect(emitted('update:modelValue')[0][0]).toBe(true);
+  });
+
+  test('emits update:modelValue false when toggled from on', async () => {
+    const { getByRole, emitted } = render(UiSwitch, {
+      props: { modelValue: true },
+    });
+
+    await userEvent.click(getByRole('switch'));
+    expect(emitted('update:modelValue')).toHaveLength(1);
+    expect(emitted('update:modelValue')[0][0]).toBe(false);
+  });
+
+  test('does not toggle when disabled', async () => {
+    const { getByRole, emitted } = render(UiSwitch, {
+      props: { disabled: true },
+    });
+
+    await userEvent.click(getByRole('switch'));
+    expect(emitted('update:modelValue')).toBeUndefined();
+  });
+});

package/src/primitives/UiSwitch/index.ts

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

package/src/primitives/UiSwitch/types.ts

@@ -0,0 +1,25 @@
+/**
+ * A toggle switch for on/off states. Use for settings, preferences,
+ * or any binary choice that takes effect immediately.
+ *
+ * @category Form Inputs
+ * @useCases toggle setting, enable feature, on off switch, preferences
+ * @keywords switch, toggle, on, off, boolean, setting, preference
+ * @related UiCheckbox
+ */
+export type UiSwitchProps = {
+  /**
+   * Prop to name the element
+   */
+  name: string;
+  /**
+   * Prop to define the component 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;
+};