@aleph-alpha/ui-library 1.9.0 → 1.11.0

package/src/primitives/UiAccordion/UiAccordion.stories.ts

@@ -0,0 +1,476 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { ref, watch } from 'vue';
+import { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent } from './index';
+import { UiButton } from '@/primitives/UiButton';
+
+const meta: Meta<typeof UiAccordion> = {
+  title: 'Primitives/UiAccordion',
+  component: UiAccordion,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['single', 'multiple'],
+      description: 'Accordion type - single allows only one item open, multiple allows many',
+    },
+    collapsible: {
+      control: 'boolean',
+      description: 'Whether all items can be collapsed (only for type="single")',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the accordion is disabled',
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description:
+        'Keyboard navigation direction: vertical = Up/Down arrows, horizontal = Left/Right arrows. Does not change visual layout.',
+    },
+  },
+  args: {
+    type: 'single',
+    collapsible: true,
+    disabled: false,
+    orientation: 'vertical',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiAccordion>;
+
+const defaultTemplateSource = `<script setup lang="ts">
+import {
+  UiAccordion,
+  UiAccordionItem,
+  UiAccordionTrigger,
+  UiAccordionContent,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiAccordion type="single" collapsible default-value="item-1" class="w-full">
+    <UiAccordionItem value="item-1">
+      <UiAccordionTrigger>Product Information</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>
+          Our flagship product combines cutting-edge technology with sleek
+          design. Built with premium materials, it offers unparalleled
+          performance and reliability.
+        </p>
+        <p class="mt-2">
+          Key features include advanced processing capabilities, and an
+          intuitive user interface designed for both beginners and experts.
+        </p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+    <UiAccordionItem value="item-2">
+      <UiAccordionTrigger>Shipping Details</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>
+          We offer worldwide shipping through trusted courier partners.
+          Standard delivery takes 3-5 business days, while express shipping
+          ensures delivery within 1-2 business days.
+        </p>
+        <p class="mt-2">
+          All orders are carefully packaged and fully insured. Track your
+          shipment in real-time through our dedicated tracking portal.
+        </p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+    <UiAccordionItem value="item-3">
+      <UiAccordionTrigger>Return Policy</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>
+          We stand behind our products with a comprehensive 30-day return
+          policy. If you're not completely satisfied, simply return the
+          item in its original condition.
+        </p>
+        <p class="mt-2">
+          Our hassle-free return process includes free return shipping and
+          full refunds processed within 48 hours of receiving the returned
+          item.
+        </p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+  </UiAccordion>
+</template>`;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+    setup() {
+      const activeItem = ref<string | undefined>('item-1');
+      watch(
+        () => args.modelValue,
+        (val) => {
+          if (val) activeItem.value = val as string;
+        },
+      );
+      return { args, activeItem };
+    },
+    template: `
+      <UiAccordion 
+        v-model="activeItem"
+        :type="args.type"
+        :collapsible="args.collapsible"
+        :disabled="args.disabled"
+        :orientation="args.orientation"
+        class="w-full"
+      >
+        <UiAccordionItem value="item-1">
+          <UiAccordionTrigger>Product Information</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>
+              Our flagship product combines cutting-edge technology with sleek
+              design. Built with premium materials, it offers unparalleled
+              performance and reliability.
+            </p>
+            <p class="mt-2">
+              Key features include advanced processing capabilities, and an
+              intuitive user interface designed for both beginners and experts.
+            </p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+        <UiAccordionItem value="item-2">
+          <UiAccordionTrigger>Shipping Details</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>
+              We offer worldwide shipping through trusted courier partners.
+              Standard delivery takes 3-5 business days, while express shipping
+              ensures delivery within 1-2 business days.
+            </p>
+            <p class="mt-2">
+              All orders are carefully packaged and fully insured. Track your
+              shipment in real-time through our dedicated tracking portal.
+            </p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+        <UiAccordionItem value="item-3">
+          <UiAccordionTrigger>Return Policy</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>
+              We stand behind our products with a comprehensive 30-day return
+              policy. If you're not completely satisfied, simply return the
+              item in its original condition.
+            </p>
+            <p class="mt-2">
+              Our hassle-free return process includes free return shipping and
+              full refunds processed within 48 hours of receiving the returned
+              item.
+            </p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+      </UiAccordion>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+};
+
+const multipleTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiAccordion,
+  UiAccordionItem,
+  UiAccordionTrigger,
+  UiAccordionContent,
+} from '@aleph-alpha/ui-library'
+
+const openItems = ref(['item-1', 'item-2'])
+</script>
+
+<template>
+  <UiAccordion v-model="openItems" type="multiple" class="w-full">
+    <UiAccordionItem value="item-1">
+      <UiAccordionTrigger>First Section</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>This section can be open at the same time as other sections.</p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+    <UiAccordionItem value="item-2">
+      <UiAccordionTrigger>Second Section</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>Multiple sections can be expanded simultaneously.</p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+    <UiAccordionItem value="item-3">
+      <UiAccordionTrigger>Third Section</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>Click to expand or collapse any section independently.</p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+  </UiAccordion>
+</template>`;
+
+export const Multiple: Story = {
+  render: () => ({
+    components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+    setup() {
+      const openItems = ref(['item-1', 'item-2']);
+      return { openItems };
+    },
+    template: `
+      <UiAccordion v-model="openItems" type="multiple" class="w-full">
+        <UiAccordionItem value="item-1">
+          <UiAccordionTrigger>First Section</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>This section can be open at the same time as other sections.</p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+        <UiAccordionItem value="item-2">
+          <UiAccordionTrigger>Second Section</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>Multiple sections can be expanded simultaneously.</p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+        <UiAccordionItem value="item-3">
+          <UiAccordionTrigger>Third Section</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>Click to expand or collapse any section independently.</p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+      </UiAccordion>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: multipleTemplateSource,
+      },
+    },
+  },
+};
+
+const nonCollapsibleTemplateSource = `<script setup lang="ts">
+import {
+  UiAccordion,
+  UiAccordionItem,
+  UiAccordionTrigger,
+  UiAccordionContent,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiAccordion type="single" :collapsible="false" default-value="item-1" class="w-full">
+    <UiAccordionItem value="item-1">
+      <UiAccordionTrigger>Always One Open</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>Click this trigger - it won't close. One item must always be open.</p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+    <UiAccordionItem value="item-2">
+      <UiAccordionTrigger>Click to Switch</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>Clicking another item switches to it, but you can't close all.</p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+  </UiAccordion>
+</template>`;
+
+export const NonCollapsible: Story = {
+  render: () => ({
+    components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+    template: `
+      <UiAccordion type="single" :collapsible="false" default-value="item-1" class="w-full">
+        <UiAccordionItem value="item-1">
+          <UiAccordionTrigger>Always One Open</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>Click this trigger - it won't close. One item must always be open.</p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+        <UiAccordionItem value="item-2">
+          <UiAccordionTrigger>Click to Switch</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>Clicking another item switches to it, but you can't close all.</p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+      </UiAccordion>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: nonCollapsibleTemplateSource,
+      },
+    },
+  },
+};
+
+const withDisabledItemTemplateSource = `<script setup lang="ts">
+import {
+  UiAccordion,
+  UiAccordionItem,
+  UiAccordionTrigger,
+  UiAccordionContent,
+} from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiAccordion type="single" collapsible default-value="item-1" class="w-full">
+    <UiAccordionItem value="item-1">
+      <UiAccordionTrigger>Available Item</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>This item is available and can be expanded or collapsed.</p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+    <UiAccordionItem value="item-2" :disabled="true">
+      <UiAccordionTrigger>Disabled Item</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>This content cannot be accessed because the item is disabled.</p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+    <UiAccordionItem value="item-3">
+      <UiAccordionTrigger>Another Available Item</UiAccordionTrigger>
+      <UiAccordionContent>
+        <p>This item is also available for interaction.</p>
+      </UiAccordionContent>
+    </UiAccordionItem>
+  </UiAccordion>
+</template>`;
+
+export const WithDisabledItem: Story = {
+  render: () => ({
+    components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent },
+    template: `
+      <UiAccordion type="single" collapsible default-value="item-1" class="w-full">
+        <UiAccordionItem value="item-1">
+          <UiAccordionTrigger>Available Item</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>This item is available and can be expanded or collapsed.</p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+        <UiAccordionItem value="item-2" :disabled="true">
+          <UiAccordionTrigger>Disabled Item</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>This content cannot be accessed because the item is disabled.</p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+        <UiAccordionItem value="item-3">
+          <UiAccordionTrigger>Another Available Item</UiAccordionTrigger>
+          <UiAccordionContent>
+            <p>This item is also available for interaction.</p>
+          </UiAccordionContent>
+        </UiAccordionItem>
+      </UiAccordion>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: withDisabledItemTemplateSource,
+      },
+    },
+  },
+};
+
+const controlledTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiAccordion,
+  UiAccordionItem,
+  UiAccordionTrigger,
+  UiAccordionContent,
+  UiButton,
+} from '@aleph-alpha/ui-library'
+
+const activeItem = ref<string | undefined>('overview')
+
+function goToDetails() {
+  activeItem.value = 'details'
+}
+
+function closeAll() {
+  activeItem.value = undefined
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center gap-4">
+      <p class="text-sm">Current: <strong>{{ activeItem ?? 'none' }}</strong></p>
+      <UiButton size="sm" @click="goToDetails">Go to Details</UiButton>
+      <UiButton size="sm" variant="secondary" @click="closeAll">Close All</UiButton>
+    </div>
+    
+    <UiAccordion v-model="activeItem" type="single" collapsible class="w-full">
+      <UiAccordionItem value="overview">
+        <UiAccordionTrigger>Overview</UiAccordionTrigger>
+        <UiAccordionContent>
+          <p>Overview content goes here.</p>
+        </UiAccordionContent>
+      </UiAccordionItem>
+      <UiAccordionItem value="details">
+        <UiAccordionTrigger>Details</UiAccordionTrigger>
+        <UiAccordionContent>
+          <p>Detailed information goes here.</p>
+        </UiAccordionContent>
+      </UiAccordionItem>
+      <UiAccordionItem value="history">
+        <UiAccordionTrigger>History</UiAccordionTrigger>
+        <UiAccordionContent>
+          <p>Historical data goes here.</p>
+        </UiAccordionContent>
+      </UiAccordionItem>
+    </UiAccordion>
+  </div>
+</template>`;
+
+export const Controlled: Story = {
+  render: () => ({
+    components: { UiAccordion, UiAccordionItem, UiAccordionTrigger, UiAccordionContent, UiButton },
+    setup() {
+      const activeItem = ref<string | undefined>('overview');
+      function goToDetails() {
+        activeItem.value = 'details';
+      }
+      function closeAll() {
+        activeItem.value = undefined;
+      }
+      return { activeItem, goToDetails, closeAll };
+    },
+    template: `
+      <div class="space-y-4">
+        <div class="flex items-center gap-4">
+          <p class="text-sm">Current: <strong>{{ activeItem ?? 'none' }}</strong></p>
+          <UiButton size="sm" @click="goToDetails">Go to Details</UiButton>
+          <UiButton size="sm" variant="secondary" @click="closeAll">Close All</UiButton>
+        </div>
+        
+        <UiAccordion v-model="activeItem" type="single" collapsible class="w-full">
+          <UiAccordionItem value="overview">
+            <UiAccordionTrigger>Overview</UiAccordionTrigger>
+            <UiAccordionContent>
+              <p>Overview content goes here.</p>
+            </UiAccordionContent>
+          </UiAccordionItem>
+          <UiAccordionItem value="details">
+            <UiAccordionTrigger>Details</UiAccordionTrigger>
+            <UiAccordionContent>
+              <p>Detailed information goes here.</p>
+            </UiAccordionContent>
+          </UiAccordionItem>
+          <UiAccordionItem value="history">
+            <UiAccordionTrigger>History</UiAccordionTrigger>
+            <UiAccordionContent>
+              <p>Historical data goes here.</p>
+            </UiAccordionContent>
+          </UiAccordionItem>
+        </UiAccordion>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: controlledTemplateSource,
+      },
+    },
+  },
+};

package/src/primitives/UiAccordion/UiAccordion.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+  import { Accordion as ShadcnAccordion } from '@/primitives/shadcn/accordion';
+  import type { UiAccordionProps, UiAccordionEmits } from './types';
+
+  defineOptions({
+    name: 'UiAccordion',
+  });
+
+  const props = defineProps<UiAccordionProps>();
+
+  const emit = defineEmits<UiAccordionEmits>();
+
+  function handleUpdateModelValue(value: string | string[] | undefined) {
+    emit('update:modelValue', value);
+  }
+</script>
+
+<template>
+  <ShadcnAccordion
+    :type="props.type"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :collapsible="props.type === 'single' ? props.collapsible : undefined"
+    :disabled="props.disabled"
+    :dir="props.dir"
+    :orientation="props.orientation"
+    @update:model-value="handleUpdateModelValue"
+  >
+    <slot />
+  </ShadcnAccordion>
+</template>

package/src/primitives/UiAccordion/UiAccordionContent.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { AccordionContent as ShadcnAccordionContent } from '@/primitives/shadcn/accordion';
+  import type { UiAccordionContentProps } from './types';
+
+  defineOptions({
+    name: 'UiAccordionContent',
+  });
+
+  const props = defineProps<UiAccordionContentProps>();
+</script>
+
+<template>
+  <ShadcnAccordionContent :force-mount="props.forceMount">
+    <slot />
+  </ShadcnAccordionContent>
+</template>

package/src/primitives/UiAccordion/UiAccordionItem.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { AccordionItem as ShadcnAccordionItem } from '@/primitives/shadcn/accordion';
+  import type { UiAccordionItemProps } from './types';
+
+  defineOptions({
+    name: 'UiAccordionItem',
+  });
+
+  const props = defineProps<UiAccordionItemProps>();
+</script>
+
+<template>
+  <ShadcnAccordionItem :value="props.value" :disabled="props.disabled">
+    <slot />
+  </ShadcnAccordionItem>
+</template>

package/src/primitives/UiAccordion/UiAccordionTrigger.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import { AccordionTrigger as ShadcnAccordionTrigger } from '@/primitives/shadcn/accordion';
+  import type { UiAccordionTriggerProps } from './types';
+
+  defineOptions({
+    name: 'UiAccordionTrigger',
+  });
+
+  const props = defineProps<UiAccordionTriggerProps>();
+
+  // shadcn styles rotate only SVG chevrons (`[data-state=open]>svg`).
+  // Our icons render as `<span data-slot="icon" ... />`, so we mirror that behavior.
+  const uiIconRotationClasses = '[&[data-state=open]>[data-slot=icon]]:rotate-180';
+</script>
+
+<template>
+  <ShadcnAccordionTrigger :as-child="props.asChild" :class="uiIconRotationClasses">
+    <slot />
+    <template #icon>
+      <slot name="icon" />
+    </template>
+  </ShadcnAccordionTrigger>
+</template>