@dillingerstaffing/strand-vue 0.4.0

package/src/components/Tooltip/Tooltip.test.ts

@@ -0,0 +1,145 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Tooltip from './Tooltip.vue'
+
+describe('Tooltip', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  function renderTooltip(props: Record<string, unknown> = {}) {
+    return render(Tooltip, {
+      props: { content: 'Hint', ...props },
+      slots: { default: '<button type="button">Hover me</button>' },
+    })
+  }
+
+  it('renders children', () => {
+    const { getByText } = renderTooltip()
+    expect(getByText('Hover me')).toBeTruthy()
+  })
+
+  it('renders tooltip content text', () => {
+    const { container } = renderTooltip({ content: 'Helpful tip' })
+    const tooltip = container.querySelector('[role="tooltip"]')
+    expect(tooltip).toBeTruthy()
+    expect(tooltip!.textContent).toBe('Helpful tip')
+  })
+
+  it('tooltip is hidden by default', () => {
+    const { container } = renderTooltip({ content: 'Hidden' })
+    const tooltip = container.querySelector('[role="tooltip"]')
+    expect(tooltip).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('shows tooltip on mouseenter after delay', async () => {
+    const { container } = renderTooltip({ content: 'Visible', delay: 100 })
+    const wrapper = container.querySelector('.strand-tooltip__wrapper')!
+    const tooltip = container.querySelector('[role="tooltip"]')!
+
+    await fireEvent.mouseEnter(wrapper)
+    vi.advanceTimersByTime(100)
+    await vi.dynamicImportSettled()
+
+    expect(tooltip).toHaveAttribute('aria-hidden', 'false')
+  })
+
+  it('hides tooltip on mouseleave', async () => {
+    const { container } = renderTooltip({ content: 'Gone', delay: 100 })
+    const wrapper = container.querySelector('.strand-tooltip__wrapper')!
+    const tooltip = container.querySelector('[role="tooltip"]')!
+
+    await fireEvent.mouseEnter(wrapper)
+    vi.advanceTimersByTime(100)
+    await vi.dynamicImportSettled()
+    expect(tooltip).toHaveAttribute('aria-hidden', 'false')
+
+    await fireEvent.mouseLeave(wrapper)
+    await vi.dynamicImportSettled()
+    expect(tooltip).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('wrapper has aria-describedby pointing to tooltip id', () => {
+    const { container } = renderTooltip({ content: 'Described' })
+    const wrapper = container.querySelector('.strand-tooltip__wrapper')!
+    const tooltip = container.querySelector('[role="tooltip"]')!
+    const tooltipId = tooltip.getAttribute('id')
+    expect(wrapper).toHaveAttribute('aria-describedby', tooltipId)
+  })
+
+  it('tooltip has role tooltip', () => {
+    const { container } = renderTooltip({ content: 'Accessible' })
+    expect(container.querySelector('[role="tooltip"]')).toBeTruthy()
+  })
+
+  it('applies top position class by default', () => {
+    const { container } = renderTooltip({ content: 'Top' })
+    const tooltip = container.querySelector('[role="tooltip"]')!
+    expect(tooltip.className).toContain('strand-tooltip--top')
+  })
+
+  it('applies right position class', () => {
+    const { container } = renderTooltip({ content: 'Right', position: 'right' })
+    const tooltip = container.querySelector('[role="tooltip"]')!
+    expect(tooltip.className).toContain('strand-tooltip--right')
+  })
+
+  it('applies bottom position class', () => {
+    const { container } = renderTooltip({ content: 'Bottom', position: 'bottom' })
+    const tooltip = container.querySelector('[role="tooltip"]')!
+    expect(tooltip.className).toContain('strand-tooltip--bottom')
+  })
+
+  it('applies left position class', () => {
+    const { container } = renderTooltip({ content: 'Left', position: 'left' })
+    const tooltip = container.querySelector('[role="tooltip"]')!
+    expect(tooltip.className).toContain('strand-tooltip--left')
+  })
+
+  it('cancels show if mouseleave before delay completes', async () => {
+    const { container } = renderTooltip({ content: 'Cancelled', delay: 300 })
+    const wrapper = container.querySelector('.strand-tooltip__wrapper')!
+    const tooltip = container.querySelector('[role="tooltip"]')!
+
+    await fireEvent.mouseEnter(wrapper)
+    vi.advanceTimersByTime(100)
+    await fireEvent.mouseLeave(wrapper)
+    vi.advanceTimersByTime(300)
+    await vi.dynamicImportSettled()
+
+    expect(tooltip).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('shows on focus for keyboard accessibility', async () => {
+    const { container } = renderTooltip({ content: 'Focused', delay: 100 })
+    const wrapper = container.querySelector('.strand-tooltip__wrapper')!
+    const tooltip = container.querySelector('[role="tooltip"]')!
+
+    await fireEvent.focus(wrapper)
+    vi.advanceTimersByTime(100)
+    await vi.dynamicImportSettled()
+
+    expect(tooltip).toHaveAttribute('aria-hidden', 'false')
+  })
+
+  it('hides on blur', async () => {
+    const { container } = renderTooltip({ content: 'Blurred', delay: 100 })
+    const wrapper = container.querySelector('.strand-tooltip__wrapper')!
+    const tooltip = container.querySelector('[role="tooltip"]')!
+
+    await fireEvent.focus(wrapper)
+    vi.advanceTimersByTime(100)
+    await vi.dynamicImportSettled()
+    expect(tooltip).toHaveAttribute('aria-hidden', 'false')
+
+    await fireEvent.blur(wrapper)
+    await vi.dynamicImportSettled()
+    expect(tooltip).toHaveAttribute('aria-hidden', 'true')
+  })
+})

package/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,79 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed, ref, onUnmounted } from 'vue'
+
+export interface TooltipProps {
+  /** Tooltip text */
+  content: string
+  /** Position relative to trigger */
+  position?: 'top' | 'right' | 'bottom' | 'left'
+  /** Delay in ms before showing */
+  delay?: number
+}
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+  position: 'top',
+  delay: 200,
+})
+
+let tooltipIdCounter = 0
+const tooltipId = `strand-tooltip-${++tooltipIdCounter}`
+
+const visible = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+function show() {
+  timer = setTimeout(() => {
+    visible.value = true
+  }, props.delay)
+}
+
+function hide() {
+  if (timer !== null) {
+    clearTimeout(timer)
+    timer = null
+  }
+  visible.value = false
+}
+
+onUnmounted(() => {
+  if (timer !== null) {
+    clearTimeout(timer)
+  }
+})
+
+const wrapperClasses = computed(() =>
+  ['strand-tooltip__wrapper'].filter(Boolean).join(' '),
+)
+
+const tooltipClasses = computed(() =>
+  [
+    'strand-tooltip',
+    `strand-tooltip--${props.position}`,
+    visible.value && 'strand-tooltip--visible',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <span
+    :class="wrapperClasses"
+    :aria-describedby="tooltipId"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focus="show"
+    @blur="hide"
+  >
+    <slot />
+    <span
+      :id="tooltipId"
+      :class="tooltipClasses"
+      role="tooltip"
+      :aria-hidden="!visible"
+    >
+      {{ content }}
+    </span>
+  </span>
+</template>

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+export { default as Tooltip } from './Tooltip.vue'

package/src/index.ts

@@ -0,0 +1,44 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+// Input
+export { default as Button } from "./components/Button/Button.vue";
+export { default as Input } from "./components/Input/Input.vue";
+export { default as Textarea } from "./components/Textarea/Textarea.vue";
+export { default as Select } from "./components/Select/Select.vue";
+export { default as Checkbox } from "./components/Checkbox/Checkbox.vue";
+export { default as Radio } from "./components/Radio/Radio.vue";
+export { default as Switch } from "./components/Switch/Switch.vue";
+export { default as Slider } from "./components/Slider/Slider.vue";
+export { default as FormField } from "./components/FormField/FormField.vue";
+
+// Display
+export { default as Card } from "./components/Card/Card.vue";
+export { default as Badge } from "./components/Badge/Badge.vue";
+export { default as Avatar } from "./components/Avatar/Avatar.vue";
+export { default as Tag } from "./components/Tag/Tag.vue";
+export { default as Table } from "./components/Table/Table.vue";
+export { default as DataReadout } from "./components/DataReadout/DataReadout.vue";
+
+// Layout
+export { default as Stack } from "./components/Stack/Stack.vue";
+export { default as Grid } from "./components/Grid/Grid.vue";
+export { default as Container } from "./components/Container/Container.vue";
+export { default as Divider } from "./components/Divider/Divider.vue";
+export { default as Section } from "./components/Section/Section.vue";
+
+// Navigation
+export { default as Link } from "./components/Link/Link.vue";
+export { default as Tabs } from "./components/Tabs/Tabs.vue";
+export { default as Breadcrumb } from "./components/Breadcrumb/Breadcrumb.vue";
+export { default as Nav } from "./components/Nav/Nav.vue";
+
+// Feedback
+export { default as Toast } from "./components/Toast/Toast.vue";
+export { default as ToastProvider } from "./components/Toast/ToastProvider.vue";
+export { useToast } from "./components/Toast/useToast";
+export { default as Alert } from "./components/Alert/Alert.vue";
+export { default as Dialog } from "./components/Dialog/Dialog.vue";
+export { default as Tooltip } from "./components/Tooltip/Tooltip.vue";
+export { default as Progress } from "./components/Progress/Progress.vue";
+export { default as Spinner } from "./components/Spinner/Spinner.vue";
+export { default as Skeleton } from "./components/Skeleton/Skeleton.vue";

package/src/test-setup.ts

@@ -0,0 +1,7 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/vue";
+import { afterEach } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});