@aleph-alpha/ui-library 1.13.0 → 1.14.0

package/src/components/UiStepper/UiStepper.stories.ts

@@ -0,0 +1,425 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref, watch } from 'vue';
+import {
+  UiStepper,
+  UiStepperItem,
+  UiStepperTrigger,
+  UiStepperIndicator,
+  UiStepperTitle,
+  UiStepperDescription,
+  UiStepperSeparator,
+} from './index';
+import { UiIcon } from '../UiIcon';
+
+const meta: Meta<typeof UiStepper> = {
+  title: 'Primitives/UiStepper',
+  component: UiStepper,
+  tags: ['autodocs'],
+  argTypes: {
+    modelValue: {
+      control: 'number',
+      description: 'The controlled value of the active step (use with v-model)',
+    },
+    defaultValue: {
+      control: 'number',
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    linear: {
+      control: 'boolean',
+      description:
+        'Whether navigation must be sequential (user cannot skip ahead to incomplete steps)',
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+    linear: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiStepper>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiStepper,
+  UiStepperItem,
+  UiStepperTrigger,
+  UiStepperIndicator,
+  UiStepperTitle,
+  UiStepperDescription,
+  UiStepperSeparator,
+  UiIcon,
+} from '@aleph-alpha/ui-library'
+
+const currentStep = ref(1)
+
+const steps = [
+  { step: 1, title: 'Address', description: 'Add your address', icon: 'book-user' },
+  { step: 2, title: 'Shipping', description: 'Set your preferred', icon: 'truck' },
+  { step: 3, title: 'Payment', description: 'Add any payment', icon: 'credit-card' },
+  { step: 4, title: 'Checkout', description: 'Confirm your order' },
+]
+</script>
+
+<template>
+  <UiStepper v-model="currentStep" class="flex w-full items-start gap-2">
+    <UiStepperItem
+      v-for="item in steps"
+      :key="item.step"
+      :step="item.step"
+      class="relative flex w-full flex-col items-center justify-center"
+    >
+      <UiStepperTrigger>
+        <UiStepperIndicator class="">
+          <UiIcon v-if="item.icon" :name="item.icon" :size="16" />
+          <span v-else>{{ item.step }}</span>
+        </UiStepperIndicator>
+      </UiStepperTrigger>
+      <UiStepperSeparator
+        v-if="item.step !== steps[steps.length - 1]?.step"
+      />
+      <div class="flex flex-col items-center">
+        <UiStepperTitle>{{ item.title }}</UiStepperTitle>
+        <UiStepperDescription>{{ item.description }}</UiStepperDescription>
+      </div>
+    </UiStepperItem>
+  </UiStepper>
+</template>`;
+
+/**
+ * Default stepper with icon indicators for each step. Steps without an icon
+ * fall back to displaying the step number. Use for multi-step workflows like
+ * checkout flows or onboarding sequences.
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: {
+      UiStepper,
+      UiStepperItem,
+      UiStepperTrigger,
+      UiStepperIndicator,
+      UiStepperTitle,
+      UiStepperDescription,
+      UiStepperSeparator,
+      UiIcon,
+    },
+    setup() {
+      const currentStep = ref(args.modelValue ?? 1);
+      watch(
+        () => args.modelValue,
+        (val) => {
+          if (val != null) currentStep.value = val;
+        },
+      );
+      const steps = [
+        { step: 1, title: 'Address', description: 'Add your address', icon: 'book-user' },
+        { step: 2, title: 'Shipping', description: 'Set your preferred', icon: 'truck' },
+        { step: 3, title: 'Payment', description: 'Add any payment', icon: 'credit-card' },
+        { step: 4, title: 'Checkout', description: 'Confirm your order' },
+      ];
+      return { args, currentStep, steps };
+    },
+    template: `
+      <UiStepper
+        v-model="currentStep"
+        :orientation="args.orientation"
+        :linear="args.linear"
+        :class="args.orientation === 'vertical'
+          ? 'mx-auto flex w-full max-w-md flex-col justify-start gap-10'
+          : 'flex w-full items-start gap-2'"
+      >
+        <UiStepperItem
+          v-for="item in steps"
+          :key="item.step"
+          :step="item.step"
+          :class="args.orientation === 'vertical'
+            ? 'relative flex w-full items-start justify-start gap-6'
+            : 'relative flex w-full flex-col items-center justify-center'"
+        >
+          <UiStepperTrigger>
+            <UiStepperIndicator>
+              <UiIcon v-if="item.icon" :name="item.icon" :size="16" />
+              <span v-else>{{ item.step }}</span>
+            </UiStepperIndicator>
+          </UiStepperTrigger>
+          <UiStepperSeparator
+            v-if="item.step !== steps[steps.length - 1]?.step"
+          />
+          <div :class="args.orientation === 'vertical' ? 'flex flex-col gap-1' : 'flex flex-col items-center'">
+            <UiStepperTitle>{{ item.title }}</UiStepperTitle>
+            <UiStepperDescription>{{ item.description }}</UiStepperDescription>
+          </div>
+        </UiStepperItem>
+      </UiStepper>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const horizontalTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiStepper,
+  UiStepperItem,
+  UiStepperTrigger,
+  UiStepperIndicator,
+  UiStepperTitle,
+  UiStepperDescription,
+  UiStepperSeparator,
+  UiIcon,
+} from '@aleph-alpha/ui-library'
+
+const currentStep = ref(1)
+
+const steps = [
+  { step: 1, title: 'Your details', description: 'Provide your name and email' },
+  { step: 2, title: 'Company details', description: 'A few details about your company' },
+  { step: 3, title: 'Invite your team', description: 'Start collaborating with your team' },
+]
+</script>
+
+<template>
+  <UiStepper v-model="currentStep" :linear="true" class="flex w-full items-start gap-2">
+    <UiStepperItem
+      v-for="step in steps"
+      :key="step.step"
+      v-slot="{ state }"
+      :step="step.step"
+      class="relative flex w-full flex-col items-center justify-center"
+    >
+      <UiStepperTrigger>
+        <UiStepperIndicator
+          :class="[
+            state === 'completed' && 'bg-[oklch(var(--background-accent-default))] group-data-[state=completed]:text-content-on-accent-default',
+            state === 'inactive' && 'bg-transparent border-2 border-content-on-surface-muted/30',
+          ]"
+        >
+          <UiIcon v-if="state === 'completed'" name="check" class="size-5" />
+          <UiIcon v-if="state === 'active'" name="circle" class="size-4" />
+          <UiIcon v-if="state === 'inactive'" name="dot" class="size-4" />
+        </UiStepperIndicator>
+      </UiStepperTrigger>
+      <UiStepperSeparator
+        v-if="step.step !== steps[steps.length - 1]?.step"
+      />
+      <div class="flex flex-col items-center text-center">
+        <UiStepperTitle>{{ step.title }}</UiStepperTitle>
+        <UiStepperDescription>{{ step.description }}</UiStepperDescription>
+      </div>
+    </UiStepperItem>
+  </UiStepper>
+</template>`;
+
+/**
+ * Horizontal stepper with check/circle/dot icons. Completed and active steps
+ * show a filled blue indicator, inactive steps show an outlined circle.
+ */
+export const Horizontal: Story = {
+  render: () => ({
+    components: {
+      UiStepper,
+      UiStepperItem,
+      UiStepperTrigger,
+      UiStepperIndicator,
+      UiStepperTitle,
+      UiStepperDescription,
+      UiStepperSeparator,
+      UiIcon,
+    },
+    setup() {
+      const currentStep = ref(1);
+      const steps = [
+        { step: 1, title: 'Your details', description: 'Provide your name and email' },
+        {
+          step: 2,
+          title: 'Company details',
+          description: 'A few details about your company',
+        },
+        {
+          step: 3,
+          title: 'Invite your team',
+          description: 'Start collaborating with your team',
+        },
+      ];
+      return { currentStep, steps };
+    },
+    template: `
+      <UiStepper v-model="currentStep" :linear="true" class="flex w-full items-start gap-2">
+        <UiStepperItem
+          v-for="step in steps"
+          :key="step.step"
+          v-slot="{ state }"
+          :step="step.step"
+          class="relative flex w-full flex-col items-center justify-center"
+        >
+          <UiStepperTrigger>
+            <UiStepperIndicator
+              :class="[
+                state === 'completed' && 'bg-[oklch(var(--background-accent-default))] group-data-[state=completed]:text-content-on-accent-default',
+                state === 'inactive' && 'bg-transparent border-2 border-content-on-surface-muted/30',
+              ]"
+            >
+              <UiIcon v-if="state === 'completed'" name="check" class="size-5" />
+              <UiIcon v-if="state === 'active'" name="circle" class="size-4" />
+              <UiIcon v-if="state === 'inactive'" name="dot" class="size-4" />
+            </UiStepperIndicator>
+          </UiStepperTrigger>
+          <UiStepperSeparator
+            v-if="step.step !== steps[steps.length - 1]?.step"
+          />
+          <div class="flex flex-col items-center text-center">
+            <UiStepperTitle>{{ step.title }}</UiStepperTitle>
+            <UiStepperDescription>{{ step.description }}</UiStepperDescription>
+          </div>
+        </UiStepperItem>
+      </UiStepper>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: horizontalTemplateSource,
+      },
+    },
+  },
+};
+
+const verticalTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiStepper,
+  UiStepperItem,
+  UiStepperTrigger,
+  UiStepperIndicator,
+  UiStepperTitle,
+  UiStepperDescription,
+  UiStepperSeparator,
+  UiIcon,
+} from '@aleph-alpha/ui-library'
+
+const currentStep = ref(1)
+
+const steps = [
+  { step: 1, title: 'Your details', description: 'Provide your name and email' },
+  { step: 2, title: 'Company details', description: 'A few details about your company' },
+  { step: 3, title: 'Invite your team', description: 'Start collaborating with your team' },
+]
+</script>
+
+<template>
+  <UiStepper v-model="currentStep" orientation="vertical" :linear="true" class="mx-auto flex w-full max-w-md flex-col justify-start gap-10">
+    <UiStepperItem
+      v-for="step in steps"
+      :key="step.step"
+      v-slot="{ state }"
+      :step="step.step"
+      class="relative flex w-full items-start justify-start gap-6"
+    >
+      <UiStepperTrigger>
+        <UiStepperIndicator
+          :class="[
+            state === 'completed' && 'bg-[oklch(var(--background-accent-default))] group-data-[state=completed]:text-content-on-accent-default',
+            state === 'inactive' && 'bg-transparent border-2 border-content-on-surface-muted/30',
+          ]"
+        >
+          <UiIcon v-if="state === 'completed'" name="check" class="size-5" />
+          <UiIcon v-if="state === 'active'" name="circle" class="size-4" />
+          <UiIcon v-if="state === 'inactive'" name="dot" class="size-4" />
+        </UiStepperIndicator>
+      </UiStepperTrigger>
+      <UiStepperSeparator
+        v-if="step.step !== steps[steps.length - 1]?.step"
+      />
+      <div class="flex flex-col gap-1">
+        <UiStepperTitle>{{ step.title }}</UiStepperTitle>
+        <UiStepperDescription>{{ step.description }}</UiStepperDescription>
+      </div>
+    </UiStepperItem>
+  </UiStepper>
+</template>`;
+
+/**
+ * Vertical stepper with check/circle/dot icons. Uses the same indicator
+ * pattern as Horizontal but with vertical layout and connecting lines
+ * running top-to-bottom.
+ */
+export const Vertical: Story = {
+  render: () => ({
+    components: {
+      UiStepper,
+      UiStepperItem,
+      UiStepperTrigger,
+      UiStepperIndicator,
+      UiStepperTitle,
+      UiStepperDescription,
+      UiStepperSeparator,
+      UiIcon,
+    },
+    setup() {
+      const currentStep = ref(1);
+      const steps = [
+        { step: 1, title: 'Your details', description: 'Provide your name and email' },
+        {
+          step: 2,
+          title: 'Company details',
+          description: 'A few details about your company',
+        },
+        {
+          step: 3,
+          title: 'Invite your team',
+          description: 'Start collaborating with your team',
+        },
+      ];
+      return { currentStep, steps };
+    },
+    template: `
+      <UiStepper v-model="currentStep" orientation="vertical" :linear="true" class="mx-auto flex w-full max-w-md flex-col justify-start gap-10">
+        <UiStepperItem
+          v-for="step in steps"
+          :key="step.step"
+          v-slot="{ state }"
+          :step="step.step"
+          class="relative flex w-full items-start justify-start gap-6"
+        >
+          <UiStepperTrigger>
+            <UiStepperIndicator
+              :class="[
+                state === 'completed' && 'bg-[oklch(var(--background-accent-default))] group-data-[state=completed]:text-content-on-accent-default',
+                state === 'inactive' && 'bg-transparent border-2 border-content-on-surface-muted/30',
+              ]"
+            >
+              <UiIcon v-if="state === 'completed'" name="check" class="size-5" />
+              <UiIcon v-if="state === 'active'" name="circle" class="size-4" />
+              <UiIcon v-if="state === 'inactive'" name="dot" class="size-4" />
+            </UiStepperIndicator>
+          </UiStepperTrigger>
+          <UiStepperSeparator
+            v-if="step.step !== steps[steps.length - 1]?.step"
+          />
+          <div class="flex flex-col gap-1">
+            <UiStepperTitle>{{ step.title }}</UiStepperTitle>
+            <UiStepperDescription>{{ step.description }}</UiStepperDescription>
+          </div>
+        </UiStepperItem>
+      </UiStepper>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: verticalTemplateSource,
+      },
+    },
+  },
+};

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>