@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/components/UiStepper/UiStepper.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import { Stepper as ShadcnStepper } from '@/components/core/stepper';
+  import type { UiStepperProps } from './types';
+
+  defineOptions({
+    name: 'UiStepper',
+  });
+
+  defineProps<UiStepperProps>();
+  const model = defineModel<number>();
+</script>
+
+<template>
+  <ShadcnStepper
+    #default="slotProps"
+    v-model="model"
+    :default-value="$props.defaultValue"
+    :orientation="$props.orientation"
+    :linear="$props.linear"
+    :class="[
+      'w-full items-start',
+      'data-[orientation=vertical]:flex-col data-[orientation=vertical]:gap-10',
+    ]"
+  >
+    <slot v-bind="slotProps" />
+  </ShadcnStepper>
+</template>

package/src/components/UiStepper/UiStepperDescription.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+  import { StepperDescription as ShadcnStepperDescription } from '@/components/core/stepper';
+
+  defineOptions({
+    name: 'UiStepperDescription',
+  });
+</script>
+
+<template>
+  <ShadcnStepperDescription
+    #default="slotProps"
+    :class="[
+      'transition-colors',
+      'group-data-[state=active]:text-content-on-surface-primary',
+      'group-data-[state=completed]:text-content-on-surface-primary',
+    ]"
+  >
+    <slot v-bind="slotProps" />
+  </ShadcnStepperDescription>
+</template>

package/src/components/UiStepper/UiStepperIndicator.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { StepperIndicator as ShadcnStepperIndicator } from '@/components/core/stepper';
+
+  defineOptions({
+    name: 'UiStepperIndicator',
+  });
+</script>
+
+<template>
+  <ShadcnStepperIndicator #default="slotProps" :class="['transition-colors']">
+    <slot v-bind="slotProps" />
+  </ShadcnStepperIndicator>
+</template>

package/src/components/UiStepper/UiStepperItem.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import { StepperItem as ShadcnStepperItem } from '@/components/core/stepper';
+  import type { UiStepperItemProps } from './types';
+
+  defineOptions({
+    name: 'UiStepperItem',
+  });
+
+  const props = defineProps<UiStepperItemProps>();
+</script>
+
+<template>
+  <ShadcnStepperItem
+    #default="slotProps"
+    :step="props.step"
+    :disabled="props.disabled"
+    :completed="props.completed"
+    :class="[
+      'relative w-full flex-col justify-center',
+      'data-[orientation=vertical]:flex-row data-[orientation=vertical]:items-start data-[orientation=vertical]:gap-6',
+    ]"
+  >
+    <slot v-bind="slotProps" />
+  </ShadcnStepperItem>
+</template>

package/src/components/UiStepper/UiStepperSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+  import { StepperSeparator as ShadcnStepperSeparator } from '@/components/core/stepper';
+
+  defineOptions({
+    name: 'UiStepperSeparator',
+  });
+</script>
+
+<template>
+  <ShadcnStepperSeparator
+    :class="[
+      'absolute block shrink-0 rounded-full transition-colors',
+      'left-[calc(50%+24px)] right-[calc(-50%+16px)] top-[23px] h-0.5',
+      'group-data-[orientation=vertical]:left-[23px] group-data-[orientation=vertical]:top-[48px] group-data-[orientation=vertical]:bottom-[-40px] group-data-[orientation=vertical]:h-auto group-data-[orientation=vertical]:w-0.5 group-data-[orientation=vertical]:right-auto',
+    ]"
+  />
+</template>

package/src/components/UiStepper/UiStepperTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { StepperTitle as ShadcnStepperTitle } from '@/components/core/stepper';
+
+  defineOptions({
+    name: 'UiStepperTitle',
+  });
+</script>
+
+<template>
+  <ShadcnStepperTitle
+    :class="[
+      'transition-colors',
+      'group-data-[state=active]:text-content-on-surface-primary',
+      'group-data-[state=completed]:text-content-on-surface-primary',
+    ]"
+  >
+    <slot />
+  </ShadcnStepperTitle>
+</template>

package/src/components/UiStepper/UiStepperTrigger.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { StepperTrigger as ShadcnStepperTrigger } from '@/components/core/stepper';
+  import type { UiStepperTriggerProps } from './types';
+
+  defineOptions({
+    name: 'UiStepperTrigger',
+  });
+
+  const props = withDefaults(defineProps<UiStepperTriggerProps>(), {
+    asChild: false,
+  });
+</script>
+
+<template>
+  <ShadcnStepperTrigger :as-child="props.asChild">
+    <slot />
+  </ShadcnStepperTrigger>
+</template>

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

@@ -0,0 +1,167 @@
+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 {
+  UiStepper,
+  UiStepperItem,
+  UiStepperTrigger,
+  UiStepperIndicator,
+  UiStepperTitle,
+  UiStepperDescription,
+  UiStepperSeparator,
+} from '../index';
+
+const components = {
+  UiStepper,
+  UiStepperItem,
+  UiStepperTrigger,
+  UiStepperIndicator,
+  UiStepperTitle,
+  UiStepperDescription,
+  UiStepperSeparator,
+};
+
+const stepperTemplate = `
+  <UiStepper v-bind="stepperProps" v-on="stepperEvents">
+    <UiStepperItem :step="1">
+      <UiStepperTrigger>
+        <UiStepperIndicator>1</UiStepperIndicator>
+        <UiStepperTitle>Step 1</UiStepperTitle>
+      </UiStepperTrigger>
+      <UiStepperSeparator />
+    </UiStepperItem>
+    <UiStepperItem :step="2">
+      <UiStepperTrigger>
+        <UiStepperIndicator>2</UiStepperIndicator>
+        <UiStepperTitle>Step 2</UiStepperTitle>
+      </UiStepperTrigger>
+      <UiStepperSeparator />
+    </UiStepperItem>
+    <UiStepperItem :step="3">
+      <UiStepperTrigger>
+        <UiStepperIndicator>3</UiStepperIndicator>
+        <UiStepperTitle>Step 3</UiStepperTitle>
+      </UiStepperTrigger>
+    </UiStepperItem>
+  </UiStepper>
+`;
+
+describe('UiStepper', () => {
+  test('activates step specified by defaultValue prop', () => {
+    const { getAllByRole } = render({
+      components,
+      template: stepperTemplate,
+      setup() {
+        return { stepperProps: { defaultValue: 2, linear: false }, stepperEvents: {} };
+      },
+    });
+
+    const triggers = getAllByRole('button');
+    expect(triggers[0]).toHaveAttribute('data-state', 'completed');
+    expect(triggers[1]).toHaveAttribute('data-state', 'active');
+    expect(triggers[2]).toHaveAttribute('data-state', 'inactive');
+  });
+
+  test('emits update:modelValue when a step trigger is clicked', async () => {
+    const user = userEvent.setup();
+    const onUpdateModelValue = vi.fn();
+
+    const { getAllByRole } = render({
+      components,
+      template: stepperTemplate,
+      setup() {
+        return {
+          stepperProps: { defaultValue: 1, linear: false },
+          stepperEvents: { 'update:modelValue': onUpdateModelValue },
+        };
+      },
+    });
+
+    const triggers = getAllByRole('button');
+    expect(triggers.length).toBe(3);
+
+    await user.click(triggers[1]);
+
+    expect(onUpdateModelValue).toHaveBeenCalledWith(2);
+  });
+
+  test('reflects controlled modelValue and updates when it changes', async () => {
+    const modelValue = ref(1);
+
+    const { getAllByRole } = render({
+      components,
+      template: `
+        <UiStepper v-model="modelValue" :linear="false">
+          <UiStepperItem :step="1">
+            <UiStepperTrigger>
+              <UiStepperIndicator>1</UiStepperIndicator>
+              <UiStepperTitle>Step 1</UiStepperTitle>
+            </UiStepperTrigger>
+            <UiStepperSeparator />
+          </UiStepperItem>
+          <UiStepperItem :step="2">
+            <UiStepperTrigger>
+              <UiStepperIndicator>2</UiStepperIndicator>
+              <UiStepperTitle>Step 2</UiStepperTitle>
+            </UiStepperTrigger>
+          </UiStepperItem>
+        </UiStepper>
+      `,
+      setup() {
+        return { modelValue };
+      },
+    });
+
+    const triggers = getAllByRole('button');
+    expect(triggers[0]).toHaveAttribute('data-state', 'active');
+    expect(triggers[1]).toHaveAttribute('data-state', 'inactive');
+
+    modelValue.value = 2;
+
+    await waitFor(() => {
+      expect(triggers[0]).toHaveAttribute('data-state', 'completed');
+      expect(triggers[1]).toHaveAttribute('data-state', 'active');
+    });
+  });
+
+  test('does not activate a disabled step when clicked', async () => {
+    const user = userEvent.setup();
+    const onUpdateModelValue = vi.fn();
+
+    const { getAllByRole } = render({
+      components,
+      template: `
+        <UiStepper :default-value="1" :linear="false" @update:modelValue="onUpdateModelValue">
+          <UiStepperItem :step="1">
+            <UiStepperTrigger>
+              <UiStepperIndicator>1</UiStepperIndicator>
+              <UiStepperTitle>Step 1</UiStepperTitle>
+            </UiStepperTrigger>
+            <UiStepperSeparator />
+          </UiStepperItem>
+          <UiStepperItem :step="2" :disabled="true">
+            <UiStepperTrigger>
+              <UiStepperIndicator>2</UiStepperIndicator>
+              <UiStepperTitle>Step 2</UiStepperTitle>
+            </UiStepperTrigger>
+          </UiStepperItem>
+        </UiStepper>
+      `,
+      setup() {
+        return { onUpdateModelValue };
+      },
+    });
+
+    const triggers = getAllByRole('button', { hidden: true });
+    const step2Trigger = triggers[1];
+    expect(step2Trigger).toBeDisabled();
+
+    await user.click(step2Trigger);
+
+    expect(triggers[0]).toHaveAttribute('data-state', 'active');
+    expect(step2Trigger).toHaveAttribute('data-state', 'inactive');
+    expect(onUpdateModelValue).not.toHaveBeenCalledWith(2);
+  });
+});

package/src/components/UiStepper/index.ts

@@ -0,0 +1,9 @@
+export { default as UiStepper } from './UiStepper.vue';
+export { default as UiStepperItem } from './UiStepperItem.vue';
+export { default as UiStepperTrigger } from './UiStepperTrigger.vue';
+export { default as UiStepperIndicator } from './UiStepperIndicator.vue';
+export { default as UiStepperTitle } from './UiStepperTitle.vue';
+export { default as UiStepperDescription } from './UiStepperDescription.vue';
+export { default as UiStepperSeparator } from './UiStepperSeparator.vue';
+
+export * from './types';

package/src/components/UiStepper/types.ts

@@ -0,0 +1,65 @@
+/** Orientation of the stepper layout. */
+export type UiStepperOrientation = 'horizontal' | 'vertical';
+
+/**
+ * A step-by-step navigation component for multi-step workflows. Use for
+ * wizards, checkout flows, onboarding sequences, or any process with
+ * sequential steps.
+ *
+ * @category Navigation
+ * @useCases wizard, checkout flow, onboarding, multi-step form, progress tracker
+ * @keywords stepper, steps, wizard, progress, sequential, workflow, multi-step
+ * @related UiProgress, UiTabs
+ */
+export type UiStepperProps = {
+  /**
+   * The controlled value of the active step.
+   * - Omit for uncontrolled mode (uses defaultValue)
+   * - Use `v-model` for controlled mode
+   * @example
+   * ```vue
+   * <!-- Uncontrolled -->
+   * <UiStepper :default-value="1">...</UiStepper>
+   *
+   * <!-- Controlled -->
+   * <UiStepper v-model="currentStep">...</UiStepper>
+   * ```
+   */
+  modelValue?: number;
+  /**
+   * The step that should be active when initially rendered (uncontrolled mode).
+   * @default 1
+   */
+  defaultValue?: number;
+  /** The orientation of the stepper layout. */
+  orientation?: UiStepperOrientation;
+  /**
+   * Whether navigation must be sequential (user cannot skip ahead to incomplete steps).
+   * @default true
+   */
+  linear?: boolean;
+};
+
+/**
+ * Props for the UiStepperTrigger component.
+ */
+export type UiStepperTriggerProps = {
+  /**
+   * Renders as the child element instead of the default trigger button.
+   * Use with UiIconButton or UiButton to customize the trigger appearance.
+   * @default false
+   */
+  asChild?: boolean;
+};
+
+/**
+ * Props for the UiStepperItem component.
+ */
+export type UiStepperItemProps = {
+  /** The step number this item represents (required). */
+  step: number;
+  /** Whether this step is disabled and cannot be navigated to. */
+  disabled?: boolean;
+  /** Whether this step is marked as completed. */
+  completed?: boolean;
+};

package/src/components/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: 'Components/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/components/UiSwitch/UiSwitch.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import { Switch as ShadcnSwitch } from '@/components/core/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/components/UiSwitch/types.ts

@@ -0,0 +1,24 @@
+/**
+ * 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;
+};