@dillingerstaffing/strand-vue 0.4.0

package/src/components/Dialog/Dialog.test.ts

@@ -0,0 +1,224 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Dialog from './Dialog.vue'
+
+describe('Dialog', () => {
+  afterEach(() => {
+    document.body.style.overflow = ''
+  })
+
+  // -- Rendering --
+
+  it('renders nothing visible when closed', () => {
+    const { container } = render(Dialog, {
+      props: { open: false },
+    })
+    expect(container.querySelector('.strand-dialog__backdrop')).toBeNull()
+    expect(container.querySelector('[role="dialog"]')).toBeNull()
+  })
+
+  it('renders dialog when open', () => {
+    const { getByRole } = render(Dialog, {
+      props: { open: true },
+      slots: { default: 'Content' },
+    })
+    expect(getByRole('dialog')).toBeTruthy()
+  })
+
+  it('renders children inside the dialog', () => {
+    const { getByRole } = render(Dialog, {
+      props: { open: true },
+      slots: { default: '<p>Dialog content</p>' },
+    })
+    expect(getByRole('dialog')).toHaveTextContent('Dialog content')
+  })
+
+  // -- ARIA --
+
+  it('has role dialog', () => {
+    const { getByRole } = render(Dialog, {
+      props: { open: true },
+      slots: { default: 'Content' },
+    })
+    expect(getByRole('dialog')).toBeTruthy()
+  })
+
+  it('has aria-modal true', () => {
+    const { getByRole } = render(Dialog, {
+      props: { open: true },
+      slots: { default: 'Content' },
+    })
+    expect(getByRole('dialog')).toHaveAttribute('aria-modal', 'true')
+  })
+
+  it('renders title with aria-labelledby linkage', () => {
+    const { getByRole, getByText } = render(Dialog, {
+      props: { open: true, title: 'My Dialog' },
+      slots: { default: 'Content' },
+    })
+    const dialog = getByRole('dialog')
+    const titleEl = getByText('My Dialog')
+    const titleId = titleEl.getAttribute('id')
+    expect(dialog).toHaveAttribute('aria-labelledby', titleId)
+  })
+
+  it('does not set aria-labelledby when no title', () => {
+    const { getByRole } = render(Dialog, {
+      props: { open: true },
+      slots: { default: 'Content' },
+    })
+    expect(getByRole('dialog').hasAttribute('aria-labelledby')).toBe(false)
+  })
+
+  // -- Title --
+
+  it('renders the title text', () => {
+    const { getByText } = render(Dialog, {
+      props: { open: true, title: 'Confirm Action' },
+      slots: { default: 'Content' },
+    })
+    expect(getByText('Confirm Action')).toBeTruthy()
+  })
+
+  // -- Close button --
+
+  it('close button emits close', async () => {
+    const { getByLabelText, emitted } = render(Dialog, {
+      props: { open: true },
+      slots: { default: 'Content' },
+    })
+    await fireEvent.click(getByLabelText('Close'))
+    expect(emitted().close).toHaveLength(1)
+  })
+
+  // -- Escape key --
+
+  it('Escape key emits close', async () => {
+    const { getByRole, emitted } = render(Dialog, {
+      props: { open: true },
+      slots: { default: 'Content' },
+    })
+    await fireEvent.keyDown(getByRole('dialog').parentElement!, {
+      key: 'Escape',
+    })
+    expect(emitted().close).toHaveLength(1)
+  })
+
+  it('Escape key does not emit close when closeOnEscape is false', async () => {
+    const { getByRole, emitted } = render(Dialog, {
+      props: { open: true, closeOnEscape: false },
+      slots: { default: 'Content' },
+    })
+    await fireEvent.keyDown(getByRole('dialog').parentElement!, {
+      key: 'Escape',
+    })
+    expect(emitted().close).toBeUndefined()
+  })
+
+  // -- Outside click --
+
+  it('clicking backdrop emits close', async () => {
+    const { container, emitted } = render(Dialog, {
+      props: { open: true },
+      slots: { default: 'Content' },
+    })
+    const backdrop = container.querySelector('.strand-dialog__backdrop')!
+    await fireEvent.click(backdrop)
+    expect(emitted().close).toHaveLength(1)
+  })
+
+  it('clicking inside dialog does not emit close', async () => {
+    const { getByRole, emitted } = render(Dialog, {
+      props: { open: true },
+      slots: { default: 'Content' },
+    })
+    await fireEvent.click(getByRole('dialog'))
+    expect(emitted().close).toBeUndefined()
+  })
+
+  it('backdrop click disabled when closeOnOutsideClick is false', async () => {
+    const { container, emitted } = render(Dialog, {
+      props: { open: true, closeOnOutsideClick: false },
+      slots: { default: 'Content' },
+    })
+    const backdrop = container.querySelector('.strand-dialog__backdrop')!
+    await fireEvent.click(backdrop)
+    expect(emitted().close).toBeUndefined()
+  })
+
+  // -- Scroll lock --
+
+  it('sets body overflow hidden when open', () => {
+    render(Dialog, {
+      props: { open: true },
+      slots: { default: 'Content' },
+    })
+    expect(document.body.style.overflow).toBe('hidden')
+  })
+
+  it('restores body overflow when closed', async () => {
+    const { rerender } = render(Dialog, {
+      props: { open: true },
+      slots: { default: 'Content' },
+    })
+    expect(document.body.style.overflow).toBe('hidden')
+    await rerender({ open: false })
+    expect(document.body.style.overflow).toBe('')
+  })
+
+  // -- Focus trap --
+
+  it('traps focus with Tab cycling within the panel', async () => {
+    const { container } = render(Dialog, {
+      props: { open: true },
+      slots: {
+        default: '<button id="first">First</button><button id="last">Last</button>',
+      },
+    })
+    const backdrop = container.querySelector('.strand-dialog__backdrop')!
+    const lastBtn = container.querySelector('#last') as HTMLElement
+    const closeBtn = container.querySelector('.strand-dialog__close') as HTMLElement
+
+    // Focus the last button
+    lastBtn.focus()
+    expect(document.activeElement).toBe(lastBtn)
+
+    // Tab from last should wrap to first focusable (close button)
+    await fireEvent.keyDown(backdrop, { key: 'Tab' })
+    expect(document.activeElement).toBe(closeBtn)
+  })
+
+  it('traps focus with Shift+Tab cycling within the panel', async () => {
+    const { container, getByRole } = render(Dialog, {
+      props: { open: true },
+      slots: {
+        default: '<button id="first">First</button><button id="last">Last</button>',
+      },
+    })
+    const panel = getByRole('dialog')
+    const focusable = Array.from(
+      panel.querySelectorAll<HTMLElement>(
+        'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])',
+      ),
+    )
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+
+    // Focus the first focusable element in the panel
+    first.focus()
+    expect(document.activeElement).toBe(first)
+
+    // Simulate Shift+Tab by creating and dispatching a KeyboardEvent on the panel
+    // which will bubble to the backdrop's keydown handler
+    const event = new KeyboardEvent('keydown', {
+      key: 'Tab',
+      shiftKey: true,
+      bubbles: true,
+      cancelable: true,
+    })
+    first.dispatchEvent(event)
+    expect(document.activeElement).toBe(last)
+  })
+})

package/src/components/Dialog/Dialog.vue

@@ -0,0 +1,146 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
+
+export interface DialogProps {
+  /** Whether the dialog is open */
+  open: boolean
+  /** Optional title rendered in the dialog header */
+  title?: string
+  /** Close when clicking the backdrop */
+  closeOnOutsideClick?: boolean
+  /** Close when pressing Escape */
+  closeOnEscape?: boolean
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  closeOnOutsideClick: true,
+  closeOnEscape: true,
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])'
+
+let dialogIdCounter = 0
+const titleId = `strand-dialog-title-${++dialogIdCounter}`
+
+const panelRef = ref<HTMLDivElement | null>(null)
+let previousFocus: Element | null = null
+let originalOverflow = ''
+
+const panelClasses = computed(() =>
+  ['strand-dialog__panel'].filter(Boolean).join(' '),
+)
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && props.closeOnEscape) {
+    event.stopPropagation()
+    emit('close')
+    return
+  }
+
+  if (event.key === 'Tab') {
+    const panel = panelRef.value
+    if (!panel) return
+
+    const focusable = Array.from(
+      panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+    )
+    if (focusable.length === 0) return
+
+    const first = focusable[0]
+    const last = focusable[focusable.length - 1]
+
+    if (event.shiftKey) {
+      if (document.activeElement === first) {
+        event.preventDefault()
+        last.focus()
+      }
+    } else {
+      if (document.activeElement === last) {
+        event.preventDefault()
+        first.focus()
+      }
+    }
+  }
+}
+
+function handleBackdropClick(event: MouseEvent) {
+  if (props.closeOnOutsideClick && event.target === event.currentTarget) {
+    emit('close')
+  }
+}
+
+watch(
+  () => props.open,
+  async (isOpen) => {
+    if (isOpen) {
+      previousFocus = document.activeElement
+      originalOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+
+      await nextTick()
+      const panel = panelRef.value
+      if (panel) {
+        const focusable = panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+        if (focusable.length > 0) {
+          focusable[0].focus()
+        } else {
+          panel.focus()
+        }
+      }
+    } else {
+      document.body.style.overflow = originalOverflow
+      if (previousFocus && previousFocus instanceof HTMLElement) {
+        previousFocus.focus()
+      }
+    }
+  },
+  { immediate: true },
+)
+
+onUnmounted(() => {
+  if (props.open) {
+    document.body.style.overflow = originalOverflow
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="open"
+    class="strand-dialog__backdrop"
+    @click="handleBackdropClick"
+    @keydown="handleKeyDown"
+  >
+    <div
+      ref="panelRef"
+      :class="panelClasses"
+      role="dialog"
+      aria-modal="true"
+      :aria-labelledby="title ? titleId : undefined"
+      :tabindex="-1"
+    >
+      <div v-if="title" class="strand-dialog__header">
+        <h2 :id="titleId" class="strand-dialog__title">
+          {{ title }}
+        </h2>
+      </div>
+      <button
+        type="button"
+        class="strand-dialog__close"
+        aria-label="Close"
+        @click="emit('close')"
+      >
+        &#215;
+      </button>
+      <div class="strand-dialog__body">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/Dialog/index.ts

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

package/src/components/Divider/Divider.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Divider from './Divider.vue'
+
+describe('Divider', () => {
+  // ── Horizontal (default) ──
+
+  it('renders an hr element by default', () => {
+    const { container } = render(Divider)
+    expect(container.firstElementChild?.tagName).toBe('HR')
+  })
+
+  it('applies horizontal class by default', () => {
+    const { container } = render(Divider)
+    expect(container.firstElementChild?.className).toContain('strand-divider--horizontal')
+  })
+
+  it('has separator role', () => {
+    const { container } = render(Divider)
+    expect(container.firstElementChild?.getAttribute('role')).toBe('separator')
+  })
+
+  it('has horizontal aria-orientation by default', () => {
+    const { container } = render(Divider)
+    expect(container.firstElementChild?.getAttribute('aria-orientation')).toBe('horizontal')
+  })
+
+  // ── Vertical ──
+
+  it('renders a div for vertical direction', () => {
+    const { container } = render(Divider, { props: { direction: 'vertical' } })
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+  })
+
+  it('applies vertical class', () => {
+    const { container } = render(Divider, { props: { direction: 'vertical' } })
+    expect(container.firstElementChild?.className).toContain('strand-divider--vertical')
+  })
+
+  it('has vertical aria-orientation', () => {
+    const { container } = render(Divider, { props: { direction: 'vertical' } })
+    expect(container.firstElementChild?.getAttribute('aria-orientation')).toBe('vertical')
+  })
+
+  // ── Labeled ──
+
+  it('renders a div with label spans for labeled variant', () => {
+    const { container } = render(Divider, { props: { label: 'OR' } })
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+  })
+
+  it('applies labeled class when label is provided', () => {
+    const { container } = render(Divider, { props: { label: 'OR' } })
+    expect(container.firstElementChild?.className).toContain('strand-divider--labeled')
+  })
+
+  it('renders label text', () => {
+    const { container } = render(Divider, { props: { label: 'OR' } })
+    const label = container.querySelector('.strand-divider__label')
+    expect(label?.textContent).toBe('OR')
+  })
+
+  it('renders two line spans for labeled variant', () => {
+    const { container } = render(Divider, { props: { label: 'OR' } })
+    const lines = container.querySelectorAll('.strand-divider__line')
+    expect(lines.length).toBe(2)
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className on horizontal', () => {
+    const { container } = render(Divider, { props: { className: 'custom' } })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-divider')
+    expect(el?.className).toContain('custom')
+  })
+
+  it('merges custom className on vertical', () => {
+    const { container } = render(Divider, {
+      props: { direction: 'vertical', className: 'custom' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-divider')
+    expect(el?.className).toContain('custom')
+  })
+
+  it('merges custom className on labeled', () => {
+    const { container } = render(Divider, {
+      props: { label: 'OR', className: 'custom' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-divider')
+    expect(el?.className).toContain('custom')
+  })
+})

package/src/components/Divider/Divider.vue

@@ -0,0 +1,63 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Separator direction */
+  direction?: 'horizontal' | 'vertical'
+  /** Optional label text displayed in the middle of the line */
+  label?: string
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: 'horizontal',
+  className: '',
+})
+
+const isVertical = computed(() => props.direction === 'vertical')
+const isLabeled = computed(() => !isVertical.value && !!props.label)
+const isPlainHorizontal = computed(() => !isVertical.value && !props.label)
+
+const classes = computed(() => {
+  if (isVertical.value) {
+    return ['strand-divider', 'strand-divider--vertical', props.className]
+      .filter(Boolean)
+      .join(' ')
+  }
+  if (isLabeled.value) {
+    return ['strand-divider', 'strand-divider--horizontal', 'strand-divider--labeled', props.className]
+      .filter(Boolean)
+      .join(' ')
+  }
+  return ['strand-divider', 'strand-divider--horizontal', props.className]
+    .filter(Boolean)
+    .join(' ')
+})
+</script>
+
+<template>
+  <div
+    v-if="isVertical"
+    :class="classes"
+    role="separator"
+    aria-orientation="vertical"
+  />
+  <div
+    v-else-if="isLabeled"
+    :class="classes"
+    role="separator"
+    aria-orientation="horizontal"
+  >
+    <span class="strand-divider__line" />
+    <span class="strand-divider__label">{{ label }}</span>
+    <span class="strand-divider__line" />
+  </div>
+  <hr
+    v-else
+    :class="classes"
+    role="separator"
+    aria-orientation="horizontal"
+  />
+</template>

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { default as Divider } from './Divider.vue'

package/src/components/FormField/FormField.test.ts

@@ -0,0 +1,98 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import FormField from './FormField.vue'
+
+describe('FormField', () => {
+  it('renders with label and slot content', () => {
+    const { container, getByText } = render(FormField, {
+      props: { label: 'Email', htmlFor: 'email' },
+      slots: { default: '<input id="email" />' },
+    })
+    const wrapper = container.querySelector('.strand-form-field')
+    expect(wrapper).toBeInTheDocument()
+    expect(getByText('Email')).toBeInTheDocument()
+    const label = container.querySelector('.strand-form-field__label')
+    expect(label).toHaveAttribute('for', 'email')
+    const control = container.querySelector('.strand-form-field__control')
+    expect(control).toBeInTheDocument()
+    expect(control?.querySelector('input')).toBeInTheDocument()
+  })
+
+  it('shows required indicator', () => {
+    const { container } = render(FormField, {
+      props: { label: 'Name', htmlFor: 'name', required: true },
+      slots: { default: '<input id="name" />' },
+    })
+    const required = container.querySelector('.strand-form-field__required')
+    expect(required).toBeInTheDocument()
+    expect(required).toHaveTextContent('*')
+    expect(required).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('does not show required indicator by default', () => {
+    const { container } = render(FormField, {
+      props: { label: 'Name', htmlFor: 'name' },
+      slots: { default: '<input id="name" />' },
+    })
+    expect(container.querySelector('.strand-form-field__required')).not.toBeInTheDocument()
+  })
+
+  it('shows hint text with correct id', () => {
+    const { container, getByText } = render(FormField, {
+      props: { label: 'Email', htmlFor: 'email', hint: 'We will not share this' },
+      slots: { default: '<input id="email" />' },
+    })
+    const hint = container.querySelector('.strand-form-field__hint')
+    expect(hint).toBeInTheDocument()
+    expect(hint).toHaveAttribute('id', 'email-hint')
+    expect(getByText('We will not share this')).toBeInTheDocument()
+  })
+
+  it('shows error text with correct id and role', () => {
+    const { container, getByText } = render(FormField, {
+      props: { label: 'Email', htmlFor: 'email', error: 'Required field' },
+      slots: { default: '<input id="email" />' },
+    })
+    const error = container.querySelector('.strand-form-field__error')
+    expect(error).toBeInTheDocument()
+    expect(error).toHaveAttribute('id', 'email-error')
+    expect(error).toHaveAttribute('role', 'alert')
+    expect(getByText('Required field')).toBeInTheDocument()
+  })
+
+  it('applies error class when error is present', () => {
+    const { container } = render(FormField, {
+      props: { label: 'Email', htmlFor: 'email', error: 'Invalid' },
+      slots: { default: '<input id="email" />' },
+    })
+    expect(container.querySelector('.strand-form-field')).toHaveClass('strand-form-field--error')
+  })
+
+  it('error replaces hint when both provided', () => {
+    const { container } = render(FormField, {
+      props: { label: 'Email', htmlFor: 'email', hint: 'Hint text', error: 'Error text' },
+      slots: { default: '<input id="email" />' },
+    })
+    expect(container.querySelector('.strand-form-field__error')).toBeInTheDocument()
+    expect(container.querySelector('.strand-form-field__hint')).not.toBeInTheDocument()
+  })
+
+  it('does not show hint or error when neither provided', () => {
+    const { container } = render(FormField, {
+      props: { label: 'Email', htmlFor: 'email' },
+      slots: { default: '<input id="email" />' },
+    })
+    expect(container.querySelector('.strand-form-field__error')).not.toBeInTheDocument()
+    expect(container.querySelector('.strand-form-field__hint')).not.toBeInTheDocument()
+  })
+
+  it('does not apply error class without error', () => {
+    const { container } = render(FormField, {
+      props: { label: 'Email', htmlFor: 'email' },
+      slots: { default: '<input id="email" />' },
+    })
+    expect(container.querySelector('.strand-form-field')).not.toHaveClass('strand-form-field--error')
+  })
+})

package/src/components/FormField/FormField.vue

@@ -0,0 +1,59 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface FormFieldProps {
+  /** Label text */
+  label: string
+  /** Associates the label with a form control */
+  htmlFor: string
+  /** Hint text displayed below the input */
+  hint?: string
+  /** Error text displayed below the input (replaces hint) */
+  error?: string
+  /** Show required indicator */
+  required?: boolean
+}
+
+const props = withDefaults(defineProps<FormFieldProps>(), {
+  required: false,
+})
+
+const classes = computed(() =>
+  [
+    'strand-form-field',
+    props.error && 'strand-form-field--error',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <div :class="classes">
+    <label class="strand-form-field__label" :for="htmlFor">
+      {{ label }}
+      <span v-if="required" class="strand-form-field__required" aria-hidden="true">
+        *
+      </span>
+    </label>
+    <div class="strand-form-field__control">
+      <slot />
+    </div>
+    <p
+      v-if="error"
+      class="strand-form-field__error"
+      :id="`${htmlFor}-error`"
+      role="alert"
+    >
+      {{ error }}
+    </p>
+    <p
+      v-else-if="hint"
+      class="strand-form-field__hint"
+      :id="`${htmlFor}-hint`"
+    >
+      {{ hint }}
+    </p>
+  </div>
+</template>

package/src/components/FormField/index.ts

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