@aleph-alpha/ui-library 1.8.0 → 1.10.0

package/src/primitives/UiTooltip/UiTooltip.stories.ts

@@ -0,0 +1,550 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import UiTooltip from './UiTooltip.vue';
+import { UiButton } from '@/primitives/UiButton';
+import { UiIcon } from '@/primitives/UiIcon';
+
+const meta: Meta<typeof UiTooltip> = {
+  title: 'Primitives/UiTooltip',
+  component: UiTooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    content: {
+      control: 'text',
+      description: 'The text content to display in the tooltip',
+    },
+    side: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'The side of the trigger where the tooltip should appear',
+    },
+    align: {
+      control: 'select',
+      options: ['start', 'center', 'end'],
+      description: 'The preferred alignment against the trigger',
+    },
+    sideOffset: {
+      control: 'number',
+      description: 'The distance in pixels from the trigger',
+    },
+    delayDuration: {
+      control: 'number',
+      description: 'The duration from when the pointer enters until the tooltip opens',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Prevents the tooltip from opening',
+    },
+  },
+  args: {
+    content: 'This is a helpful tooltip',
+    side: 'top',
+    align: 'center',
+    sideOffset: 4,
+    delayDuration: 500,
+    disabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UiTooltip>;
+
+/**
+ * The default tooltip story. Hover over the button to see the tooltip.
+ */
+
+const defaultTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="This is a helpful tooltip" side="top" align="center" :delay-duration="500" :disabled="false">
+    <UiButton>Hover me</UiButton>
+  </UiTooltip>
+</template>`;
+
+const defaultTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="This is a helpful tooltip" side="top" align="center" :delay-duration="500" :disabled="false">
+      <UiButton>Hover me</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: defaultTemplateSource,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { UiTooltip, UiButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="flex justify-center p-8">
+        <UiTooltip 
+          :content="args.content" 
+          :side="args.side" 
+          :align="args.align" 
+          :side-offset="args.sideOffset"
+          :delay-duration="args.delayDuration" 
+          :disabled="args.disabled"
+        >
+          <UiButton>Hover me</UiButton>
+        </UiTooltip>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Tooltip with an icon button.
+ */
+
+const withIconButtonTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+import { UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="More information" side="top" align="center" :delay-duration="500">
+    <UiButton size="icon" variant="ghost" aria-label="Information">
+      <UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+    </UiButton>
+  </UiTooltip>
+</template>`;
+
+const withIconButtonTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="More information" side="top" align="center" :delay-duration="500">
+      <UiButton size="icon" variant="ghost" aria-label="Information">
+        <UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+      </UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+export const WithIconButton: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: withIconButtonTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton, UiIcon },
+    template: withIconButtonTemplate,
+  }),
+};
+
+/**
+ * Tooltip with custom delay duration (instant).
+ */
+
+const instantDelayTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Appears instantly" side="top" align="center" :delay-duration="0">
+    <UiButton>Instant tooltip</UiButton>
+  </UiTooltip>
+</template>`;
+
+const instantDelayTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="Appears instantly" side="top" align="center" :delay-duration="0">
+      <UiButton>Instant tooltip</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+export const InstantDelay: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: instantDelayTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: instantDelayTemplate,
+  }),
+};
+
+/**
+ * Tooltip with longer delay duration.
+ */
+
+const longDelayTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Takes a moment to appear" side="top" align="center" :delay-duration="1500">
+    <UiButton>Slow tooltip</UiButton>
+  </UiTooltip>
+</template>`;
+
+const longDelayTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="Takes a moment to appear" side="top" align="center" :delay-duration="1500">
+      <UiButton>Slow tooltip</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+export const LongDelay: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: longDelayTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: longDelayTemplate,
+  }),
+};
+
+/**
+ * Disabled tooltip - will not show on hover.
+ */
+const disabledTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="You should not see this" :disabled="true">
+    <UiButton>Hover me (disabled tooltip)</UiButton>
+  </UiTooltip>
+</template>`;
+
+const disabledTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="You should not see this" :disabled="true">
+      <UiButton>Hover me (disabled tooltip)</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+export const Disabled: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: disabledTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: disabledTemplate,
+  }),
+};
+
+/**
+ * Tooltip with different alignment options.
+ */
+
+const alignmentOptionsTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Aligned to the start" side="bottom" align="start">
+    <UiButton>Hover me</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Aligned to the center" side="bottom" align="center">
+    <UiButton>Hover me</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Aligned to the end" side="bottom" align="end">
+    <UiButton>Hover me</UiButton>
+  </UiTooltip>
+</template>`;
+
+const alignmentOptionsTemplate = `
+	<div class="flex flex-col gap-8 items-center p-8">
+		<div class="flex flex-col items-center gap-2">
+			<span class="text-xs text-muted-foreground">Align Start</span>
+			<UiTooltip content="Aligned to the start" side="bottom" align="start">
+				<UiButton>Hover me</UiButton>
+			</UiTooltip>
+		</div>
+
+		<div class="flex flex-col items-center gap-2">
+			<span class="text-xs text-muted-foreground">Align Center</span>
+			<UiTooltip content="Aligned to the center" side="bottom" align="center">
+				<UiButton>Hover me</UiButton>
+			</UiTooltip>
+		</div>
+		
+		<div class="flex flex-col items-center gap-2">
+			<span class="text-xs text-muted-foreground">Align End</span>
+			<UiTooltip content="Aligned to the end" side="bottom" align="end">
+				<UiButton>Hover me</UiButton>
+			</UiTooltip>
+		</div>
+	</div>
+`;
+
+export const AlignmentOptions: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: alignmentOptionsTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: alignmentOptionsTemplate,
+  }),
+};
+
+/**
+ * All available positions for the tooltip.
+ */
+
+const allSidesTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Top tooltip" side="top" align="center">
+    <UiButton>Top</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Right tooltip" side="right" align="center">
+    <UiButton>Right</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Bottom tooltip" side="bottom" align="center">
+    <UiButton>Bottom</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Left tooltip" side="left" align="center">
+    <UiButton>Left</UiButton>
+  </UiTooltip>
+</template>`;
+
+const allSidesTemplate = `
+  <div class="flex items-center justify-center gap-8 p-16">
+    <UiTooltip content="Top tooltip" side="top" align="center">
+      <UiButton>Top</UiButton>
+    </UiTooltip>
+    
+    <UiTooltip content="Right tooltip" side="right" align="center">
+      <UiButton>Right</UiButton>
+    </UiTooltip>
+    
+    <UiTooltip content="Bottom tooltip" side="bottom" align="center">
+      <UiButton>Bottom</UiButton>
+    </UiTooltip>
+    
+    <UiTooltip content="Left tooltip" side="left" align="center">
+      <UiButton>Left</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+export const AllSides: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: allSidesTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: allSidesTemplate,
+  }),
+};
+
+/**
+ * Various tooltip use cases with different trigger elements.
+ */
+
+const useCasesTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+import { UiIcon } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Click to submit the form" side="top" align="center">
+    <UiButton>Submit</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="This action is permanent and cannot be undone" side="top" align="center">
+    <UiButton variant="destructive">Delete</UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Need help? Click for documentation" side="top" align="center">
+    <UiButton size="icon" variant="ghost" aria-label="Help">
+      <UiIcon icon="i-material-symbols-help" class="w-4 h-4" />
+    </UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Important information about this feature" side="top" align="center">
+    <UiButton size="icon" variant="outline" aria-label="Information">
+      <UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+    </UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Warning: This may affect other settings" side="top" align="center">
+    <UiButton size="icon" variant="secondary" aria-label="Warning">
+      <UiIcon icon="i-material-symbols-warning" class="w-4 h-4" />
+    </UiButton>
+  </UiTooltip>
+
+  <UiTooltip content="Disabled buttons can also have tooltips" side="top" align="center">
+    <UiButton :disabled="true">Disabled</UiButton>
+  </UiTooltip>
+</template>`;
+
+const useCasesTemplate = `
+	<div class="flex flex-wrap gap-4 items-center justify-center p-8">
+		<UiTooltip content="Click to submit the form" side="top" align="center">
+			<UiButton>Submit</UiButton>
+		</UiTooltip>
+
+		<UiTooltip content="This action is permanent and cannot be undone" side="top" align="center">
+			<UiButton variant="destructive">Delete</UiButton>
+		</UiTooltip>
+
+		<UiTooltip content="Need help? Click for documentation" side="top" align="center">
+			<UiButton size="icon" variant="ghost" aria-label="Help">
+				<UiIcon icon="i-material-symbols-help" class="w-4 h-4" />
+			</UiButton>
+		</UiTooltip>
+
+		<UiTooltip content="Important information about this feature" side="top" align="center">
+			<UiButton size="icon" variant="outline" aria-label="Information">
+				<UiIcon icon="i-material-symbols-info" class="w-4 h-4" />
+			</UiButton>
+		</UiTooltip>
+
+		<UiTooltip content="Warning: This may affect other settings" side="top" align="center">
+			<UiButton size="icon" variant="secondary" aria-label="Warning">
+				<UiIcon icon="i-material-symbols-warning" class="w-4 h-4" />
+			</UiButton>
+		</UiTooltip>
+
+		<UiTooltip content="Disabled buttons can also have tooltips" side="top" align="center">
+			<UiButton :disabled="true">Disabled</UiButton>
+		</UiTooltip>
+	</div>
+`;
+
+export const UseCases: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: useCasesTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton, UiIcon },
+    template: useCasesTemplate,
+  }),
+};
+
+/**
+ * Tooltip wrapping text instead of a button.
+ */
+
+const withTextTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Additional context for this text" side="top" align="center">
+    <span class="underline decoration-dashed cursor-help">Hover over this text</span>
+  </UiTooltip>
+</template>`;
+
+const withTextTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="Additional context for this text" side="top" align="center">
+      <span class="underline decoration-dashed cursor-help">Hover over this text</span>
+    </UiTooltip>
+  </div>
+`;
+
+export const WithText: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: withTextTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip },
+    template: withTextTemplate,
+  }),
+};
+
+/**
+ * Tooltip with a larger offset from the trigger.
+ */
+
+const customOffsetTemplateSource = `<script setup lang="ts">
+import { UiTooltip } from '@aleph-alpha/ui-library'
+import { UiButton } from '@aleph-alpha/ui-library'
+</script>
+
+<template>
+  <UiTooltip content="Tooltip with 16px offset" side="top" align="center" :side-offset="16">
+    <UiButton>Hover me</UiButton>
+  </UiTooltip>
+</template>`;
+
+const customOffsetTemplate = `
+  <div class="flex justify-center p-8">
+    <UiTooltip content="Tooltip with 16px offset" side="top" align="center" :side-offset="16">
+      <UiButton>Hover me</UiButton>
+    </UiTooltip>
+  </div>
+`;
+
+export const CustomOffset: Story = {
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+        code: customOffsetTemplateSource,
+      },
+    },
+  },
+  render: () => ({
+    components: { UiTooltip, UiButton },
+    template: customOffsetTemplate,
+  }),
+};

package/src/primitives/UiTooltip/UiTooltip.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  import {
+    Tooltip as ShadcnTooltip,
+    TooltipContent as ShadcnTooltipContent,
+    TooltipProvider as ShadcnTooltipProvider,
+    TooltipTrigger as ShadcnTooltipTrigger,
+  } from '@/primitives/shadcn/tooltip';
+  import type { UiTooltipProps } from './types';
+
+  defineOptions({
+    name: 'UiTooltip',
+  });
+
+  const open = defineModel<boolean>('open');
+
+  const props = withDefaults(defineProps<UiTooltipProps>(), {
+    side: 'top',
+    sideOffset: 4,
+    align: 'center',
+    class: '',
+    delayDuration: 500,
+    disabled: false,
+  });
+</script>
+
+<template>
+  <ShadcnTooltipProvider :delay-duration="props.delayDuration">
+    <ShadcnTooltip v-model:open="open" :disabled="props.disabled">
+      <ShadcnTooltipTrigger as-child>
+        <slot />
+      </ShadcnTooltipTrigger>
+      <ShadcnTooltipContent
+        :side="props.side"
+        :side-offset="props.sideOffset"
+        :align="props.align"
+        :class="props.class"
+      >
+        {{ props.content }}
+      </ShadcnTooltipContent>
+    </ShadcnTooltip>
+  </ShadcnTooltipProvider>
+</template>

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

@@ -0,0 +1,78 @@
+import { render, screen } from '@testing-library/vue';
+import { describe, expect, test } from 'vitest';
+import UiTooltip from '../UiTooltip.vue';
+
+describe('UiTooltip', () => {
+  test('renders with content when open is true', async () => {
+    render(UiTooltip, {
+      props: {
+        content: 'Tooltip text',
+        open: true,
+        delayDuration: 0,
+      },
+      slots: {
+        default: '<button>Hover me</button>',
+      },
+    });
+    const tooltip = await screen.findByRole('tooltip', { hidden: true });
+    expect(tooltip).toBeInTheDocument();
+    expect(tooltip).toHaveTextContent('Tooltip text');
+  });
+
+  test('applies custom classes to content', async () => {
+    const customClass = 'bg-red-500';
+    render(UiTooltip, {
+      props: {
+        content: 'Tooltip text',
+        open: true,
+        class: customClass,
+        delayDuration: 0,
+      },
+      slots: {
+        default: '<button>Hover me</button>',
+      },
+    });
+
+    const tooltipSpan = await screen.findByRole('tooltip', { hidden: true });
+    expect(tooltipSpan).toHaveTextContent('Tooltip text');
+    // Custom classes are applied to the visible wrapper div, not the hidden role span
+    // The span is a direct child of the wrapper div
+    expect(tooltipSpan.parentElement).toHaveClass(customClass);
+  });
+
+  test('renders with specific side configuration', async () => {
+    render(UiTooltip, {
+      props: {
+        content: 'Tooltip text',
+        open: true,
+        side: 'right',
+        delayDuration: 0,
+      },
+      slots: {
+        default: '<button>Hover me</button>',
+      },
+    });
+
+    const tooltipSpan = await screen.findByRole('tooltip', { hidden: true });
+    // Data attributes are on the visible wrapper div
+    expect(tooltipSpan.parentElement).toHaveAttribute('data-side', 'right');
+  });
+
+  test('renders with specific align configuration', async () => {
+    render(UiTooltip, {
+      props: {
+        content: 'Tooltip text',
+        open: true,
+        align: 'start',
+        delayDuration: 0,
+      },
+      slots: {
+        default: '<button>Hover me</button>',
+      },
+    });
+
+    const tooltipSpan = await screen.findByRole('tooltip', { hidden: true });
+    // Data attributes are on the visible wrapper div
+    expect(tooltipSpan.parentElement).toHaveAttribute('data-align', 'start');
+  });
+});

package/src/primitives/UiTooltip/index.ts

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