@dillingerstaffing/strand-vue 0.4.0

package/src/components/Switch/Switch.vue

@@ -0,0 +1,62 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface SwitchProps {
+  /** Controlled checked state */
+  checked?: boolean
+  /** Disabled state */
+  disabled?: boolean
+  /** Inline label text */
+  label?: string
+}
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  checked: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'change', checked: boolean): void
+}>()
+
+const classes = computed(() =>
+  [
+    'strand-switch',
+    props.checked && 'strand-switch--checked',
+    props.disabled && 'strand-switch--disabled',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+function handleClick() {
+  if (!props.disabled) {
+    emit('change', !props.checked)
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if ((event.key === ' ' || event.key === 'Enter') && !props.disabled) {
+    event.preventDefault()
+    emit('change', !props.checked)
+  }
+}
+</script>
+
+<template>
+  <label :class="classes">
+    <button
+      type="button"
+      role="switch"
+      class="strand-switch__track"
+      :aria-checked="checked ? 'true' : 'false'"
+      :disabled="disabled"
+      @click="handleClick"
+      @keydown="handleKeyDown"
+    >
+      <span class="strand-switch__thumb" aria-hidden="true" />
+    </button>
+    <span v-if="label" class="strand-switch__label">{{ label }}</span>
+  </label>
+</template>

package/src/components/Switch/index.ts

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

package/src/components/Table/Table.test.ts

@@ -0,0 +1,152 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Table from './Table.vue'
+
+const columns = [
+  { key: 'name', header: 'Name', sortable: true },
+  { key: 'role', header: 'Role' },
+  { key: 'status', header: 'Status', sortable: true },
+]
+
+const data = [
+  { name: 'Alice', role: 'Engineer', status: 'Active' },
+  { name: 'Bob', role: 'Designer', status: 'Away' },
+]
+
+describe('Table', () => {
+  // -- Rendering --
+
+  it('renders a table element', () => {
+    const { container } = render(Table, {
+      props: { columns, data },
+    })
+    expect(container.querySelector('table')).toBeTruthy()
+  })
+
+  it('renders column headers', () => {
+    const { getByText } = render(Table, {
+      props: { columns, data },
+    })
+    expect(getByText('Name')).toBeTruthy()
+    expect(getByText('Role')).toBeTruthy()
+    expect(getByText('Status')).toBeTruthy()
+  })
+
+  it('renders data rows', () => {
+    const { getByText } = render(Table, {
+      props: { columns, data },
+    })
+    expect(getByText('Alice')).toBeTruthy()
+    expect(getByText('Bob')).toBeTruthy()
+  })
+
+  it('renders correct number of cells', () => {
+    const { container } = render(Table, {
+      props: { columns, data },
+    })
+    const cells = container.querySelectorAll('.strand-table__td')
+    // 2 rows x 3 columns = 6 cells
+    expect(cells.length).toBe(6)
+  })
+
+  it('renders correct number of header cells', () => {
+    const { container } = render(Table, {
+      props: { columns, data },
+    })
+    const headers = container.querySelectorAll('.strand-table__th')
+    expect(headers.length).toBe(3)
+  })
+
+  // -- Sorting --
+
+  it('renders sort button for sortable columns', () => {
+    const { container } = render(Table, {
+      props: { columns, data },
+    })
+    const sortButtons = container.querySelectorAll('.strand-table__sort-btn')
+    // "Name" and "Status" are sortable
+    expect(sortButtons.length).toBe(2)
+  })
+
+  it('does not render sort button for non-sortable columns', () => {
+    const nonSortable = [{ key: 'role', header: 'Role' }]
+    const { container } = render(Table, {
+      props: { columns: nonSortable, data },
+    })
+    const sortButtons = container.querySelectorAll('.strand-table__sort-btn')
+    expect(sortButtons.length).toBe(0)
+  })
+
+  it('emits sort with key and asc direction on first click', async () => {
+    const { container, emitted } = render(Table, {
+      props: { columns, data },
+    })
+    const sortButtons = container.querySelectorAll('.strand-table__sort-btn')
+    await fireEvent.click(sortButtons[0])
+    expect(emitted().sort[0]).toEqual(['name', 'asc'])
+  })
+
+  it('toggles sort direction on second click of same column', async () => {
+    const { container, emitted } = render(Table, {
+      props: { columns, data },
+    })
+    const sortButtons = container.querySelectorAll('.strand-table__sort-btn')
+    await fireEvent.click(sortButtons[0]) // asc
+    await fireEvent.click(sortButtons[0]) // desc
+    expect(emitted().sort[1]).toEqual(['name', 'desc'])
+  })
+
+  // -- Responsive --
+
+  it('wraps table in overflow-x scroll container', () => {
+    const { container } = render(Table, {
+      props: { columns, data },
+    })
+    const wrapper = container.querySelector('.strand-table-wrapper')
+    expect(wrapper).toBeTruthy()
+  })
+
+  // -- Empty state --
+
+  it('renders empty tbody when data is empty', () => {
+    const { container } = render(Table, {
+      props: { columns, data: [] },
+    })
+    const rows = container.querySelectorAll('.strand-table__row')
+    expect(rows.length).toBe(0)
+  })
+
+  // -- Column width --
+
+  it('applies width style to column headers', () => {
+    const cols = [{ key: 'name', header: 'Name', width: '200px' }]
+    const { container } = render(Table, {
+      props: { columns: cols, data: [] },
+    })
+    const th = container.querySelector('.strand-table__th') as HTMLElement
+    expect(th?.style.width).toBe('200px')
+  })
+
+  // -- Sort indicator --
+
+  it('shows sort indicator on sortable columns', () => {
+    const { container } = render(Table, {
+      props: { columns, data },
+    })
+    const indicators = container.querySelectorAll('.strand-table__sort-indicator')
+    expect(indicators.length).toBe(2)
+  })
+
+  // -- Sort button aria-label --
+
+  it('sort button has aria-label with column name', () => {
+    const { container } = render(Table, {
+      props: { columns, data },
+    })
+    const sortButtons = container.querySelectorAll('.strand-table__sort-btn')
+    expect(sortButtons[0]).toHaveAttribute('aria-label', 'Sort by Name')
+    expect(sortButtons[1]).toHaveAttribute('aria-label', 'Sort by Status')
+  })
+})

package/src/components/Table/Table.vue

@@ -0,0 +1,98 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+export interface TableColumn {
+  /** Unique key matching the data field */
+  key: string
+  /** Display header text */
+  header: string
+  /** Whether the column is sortable */
+  sortable?: boolean
+  /** Optional fixed width */
+  width?: string
+}
+
+export interface TableProps {
+  /** Column definitions */
+  columns: TableColumn[]
+  /** Row data */
+  data: Array<Record<string, unknown>>
+}
+
+const props = defineProps<TableProps>()
+
+const emit = defineEmits<{
+  (e: 'sort', key: string, direction: 'asc' | 'desc'): void
+}>()
+
+const sortKey = ref<string | null>(null)
+const sortDirection = ref<'asc' | 'desc'>('asc')
+
+const wrapperClasses = computed(() =>
+  ['strand-table-wrapper'].filter(Boolean).join(' '),
+)
+
+function handleSort(key: string) {
+  const nextDirection =
+    sortKey.value === key && sortDirection.value === 'asc' ? 'desc' : 'asc'
+  sortKey.value = key
+  sortDirection.value = nextDirection
+  emit('sort', key, nextDirection)
+}
+
+function sortIndicator(key: string): string {
+  if (sortKey.value === key) {
+    return sortDirection.value === 'asc' ? '\u2191' : '\u2193'
+  }
+  return '\u2195'
+}
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <table class="strand-table">
+      <thead class="strand-table__head">
+        <tr>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            class="strand-table__th"
+            :style="col.width ? { width: col.width } : undefined"
+          >
+            <button
+              v-if="col.sortable"
+              type="button"
+              class="strand-table__sort-btn"
+              :aria-label="`Sort by ${col.header}`"
+              @click="handleSort(col.key)"
+            >
+              {{ col.header }}
+              <span class="strand-table__sort-indicator" aria-hidden="true">
+                {{ sortIndicator(col.key) }}
+              </span>
+            </button>
+            <template v-else>
+              {{ col.header }}
+            </template>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="strand-table__body">
+        <tr
+          v-for="(row, rowIndex) in data"
+          :key="rowIndex"
+          class="strand-table__row"
+        >
+          <td
+            v-for="col in columns"
+            :key="col.key"
+            class="strand-table__td"
+          >
+            {{ row[col.key] }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/components/Table/index.ts

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

package/src/components/Tabs/Tabs.test.ts

@@ -0,0 +1,138 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Tabs from './Tabs.vue'
+
+const sampleTabs = [
+  { id: 'one', label: 'Tab One' },
+  { id: 'two', label: 'Tab Two' },
+  { id: 'three', label: 'Tab Three' },
+]
+
+function renderTabs(props: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
+  return render(Tabs, {
+    props: {
+      tabs: sampleTabs,
+      activeTab: 'one',
+      ...props,
+    },
+    slots: {
+      'panel-one': '<div>Content One</div>',
+      'panel-two': '<div>Content Two</div>',
+      'panel-three': '<div>Content Three</div>',
+      ...slots,
+    },
+  })
+}
+
+describe('Tabs', () => {
+  // -- Structure --
+
+  it('renders tablist role', () => {
+    const { getByRole } = renderTabs()
+    expect(getByRole('tablist')).toBeTruthy()
+  })
+
+  it('renders tab buttons for each tab', () => {
+    const { getAllByRole } = renderTabs()
+    expect(getAllByRole('tab')).toHaveLength(3)
+  })
+
+  // -- Active state --
+
+  it('active tab has aria-selected true', () => {
+    const { getAllByRole } = renderTabs()
+    const tabs = getAllByRole('tab')
+    expect(tabs[0]).toHaveAttribute('aria-selected', 'true')
+  })
+
+  it('inactive tabs have aria-selected false', () => {
+    const { getAllByRole } = renderTabs()
+    const tabs = getAllByRole('tab')
+    expect(tabs[1]).toHaveAttribute('aria-selected', 'false')
+    expect(tabs[2]).toHaveAttribute('aria-selected', 'false')
+  })
+
+  it('active tab has tabindex 0, inactive tabs have tabindex -1', () => {
+    const { getAllByRole } = renderTabs({ activeTab: 'two' })
+    const tabs = getAllByRole('tab')
+    expect(tabs[0]).toHaveAttribute('tabindex', '-1')
+    expect(tabs[1]).toHaveAttribute('tabindex', '0')
+    expect(tabs[2]).toHaveAttribute('tabindex', '-1')
+  })
+
+  // -- Interaction --
+
+  it('clicking tab emits change with the tab id', async () => {
+    const { getAllByRole, emitted } = renderTabs()
+    await fireEvent.click(getAllByRole('tab')[1])
+    expect(emitted().change[0]).toEqual(['two'])
+  })
+
+  // -- Panels --
+
+  it('active panel is visible', () => {
+    const { getByText } = renderTabs()
+    expect(getByText('Content One').closest('[role="tabpanel"]')).not.toHaveAttribute('hidden')
+  })
+
+  it('inactive panels are hidden', () => {
+    const { getByText } = renderTabs()
+    expect(getByText('Content Two').closest('[role="tabpanel"]')).toHaveAttribute('hidden')
+    expect(getByText('Content Three').closest('[role="tabpanel"]')).toHaveAttribute('hidden')
+  })
+
+  it('tabpanel has aria-labelledby pointing to its tab', () => {
+    const { getAllByRole } = renderTabs()
+    const panels = getAllByRole('tabpanel', { hidden: true })
+    expect(panels[0]).toHaveAttribute('aria-labelledby', 'tab-one')
+  })
+
+  // -- Keyboard navigation --
+
+  it('ArrowRight moves to next tab', async () => {
+    const { getAllByRole, emitted } = renderTabs()
+    await fireEvent.keyDown(getAllByRole('tab')[0], { key: 'ArrowRight' })
+    expect(emitted().change[0]).toEqual(['two'])
+  })
+
+  it('ArrowLeft moves to previous tab', async () => {
+    const { getAllByRole, emitted } = renderTabs({ activeTab: 'two' })
+    await fireEvent.keyDown(getAllByRole('tab')[1], { key: 'ArrowLeft' })
+    expect(emitted().change[0]).toEqual(['one'])
+  })
+
+  it('ArrowRight wraps to first tab from last', async () => {
+    const { getAllByRole, emitted } = renderTabs({ activeTab: 'three' })
+    await fireEvent.keyDown(getAllByRole('tab')[2], { key: 'ArrowRight' })
+    expect(emitted().change[0]).toEqual(['one'])
+  })
+
+  it('ArrowLeft wraps to last tab from first', async () => {
+    const { getAllByRole, emitted } = renderTabs({ activeTab: 'one' })
+    await fireEvent.keyDown(getAllByRole('tab')[0], { key: 'ArrowLeft' })
+    expect(emitted().change[0]).toEqual(['three'])
+  })
+
+  it('Home moves focus to first tab', async () => {
+    const { getAllByRole, emitted } = renderTabs({ activeTab: 'three' })
+    await fireEvent.keyDown(getAllByRole('tab')[2], { key: 'Home' })
+    expect(emitted().change[0]).toEqual(['one'])
+  })
+
+  it('End moves focus to last tab', async () => {
+    const { getAllByRole, emitted } = renderTabs({ activeTab: 'one' })
+    await fireEvent.keyDown(getAllByRole('tab')[0], { key: 'End' })
+    expect(emitted().change[0]).toEqual(['three'])
+  })
+
+  // -- Tab aria-controls --
+
+  it('tab has aria-controls pointing to panel', () => {
+    const { getAllByRole } = renderTabs()
+    const tabs = getAllByRole('tab')
+    expect(tabs[0]).toHaveAttribute('aria-controls', 'panel-one')
+    expect(tabs[1]).toHaveAttribute('aria-controls', 'panel-two')
+  })
+})

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,96 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+export interface TabItem {
+  id: string
+  label: string
+}
+
+export interface TabsProps {
+  /** Tab definitions (id + label only; content is provided via slots) */
+  tabs: TabItem[]
+  /** Currently active tab id (controlled) */
+  activeTab: string
+}
+
+const props = defineProps<TabsProps>()
+
+const emit = defineEmits<{
+  (e: 'change', id: string): void
+}>()
+
+const tablistRef = ref<HTMLDivElement | null>(null)
+
+const classes = computed(() => ['strand-tabs'].filter(Boolean).join(' '))
+
+function focusAndSelect(index: number) {
+  const tab = props.tabs[index]
+  if (tab) {
+    emit('change', tab.id)
+    const buttons = tablistRef.value?.querySelectorAll<HTMLButtonElement>('[role="tab"]')
+    buttons?.[index]?.focus()
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  const currentIndex = props.tabs.findIndex((t) => t.id === props.activeTab)
+  let nextIndex: number | null = null
+
+  switch (event.key) {
+    case 'ArrowRight':
+      nextIndex = (currentIndex + 1) % props.tabs.length
+      break
+    case 'ArrowLeft':
+      nextIndex = (currentIndex - 1 + props.tabs.length) % props.tabs.length
+      break
+    case 'Home':
+      nextIndex = 0
+      break
+    case 'End':
+      nextIndex = props.tabs.length - 1
+      break
+    default:
+      return
+  }
+
+  event.preventDefault()
+  focusAndSelect(nextIndex)
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <div ref="tablistRef" role="tablist" @keydown="handleKeyDown">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :id="`tab-${tab.id}`"
+        role="tab"
+        type="button"
+        :class="[
+          'strand-tabs__tab',
+          tab.id === activeTab && 'strand-tabs__tab--active',
+        ].filter(Boolean).join(' ')"
+        :aria-selected="tab.id === activeTab ? 'true' : 'false'"
+        :aria-controls="`panel-${tab.id}`"
+        :tabindex="tab.id === activeTab ? 0 : -1"
+        @click="emit('change', tab.id)"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <div
+      v-for="tab in tabs"
+      :key="tab.id"
+      :id="`panel-${tab.id}`"
+      role="tabpanel"
+      :aria-labelledby="`tab-${tab.id}`"
+      :hidden="tab.id !== activeTab || undefined"
+      :tabindex="0"
+    >
+      <slot :name="`panel-${tab.id}`" />
+    </div>
+  </div>
+</template>

package/src/components/Tabs/index.ts

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

package/src/components/Tag/Tag.test.ts

@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Tag from './Tag.vue'
+
+describe('Tag', () => {
+  // ── Rendering ──
+
+  it('renders a span element', () => {
+    const { container } = render(Tag, { slots: { default: 'Label' } })
+    expect(container.firstElementChild?.tagName).toBe('SPAN')
+  })
+
+  it('renders slot content inside text span', () => {
+    const { container } = render(Tag, { slots: { default: 'Active' } })
+    const textSpan = container.querySelector('.strand-tag__text')
+    expect(textSpan?.textContent).toBe('Active')
+  })
+
+  // ── Variants ──
+
+  it('applies solid variant class by default', () => {
+    const { container } = render(Tag, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).toContain('strand-tag--solid')
+  })
+
+  it('applies outlined variant class', () => {
+    const { container } = render(Tag, {
+      props: { variant: 'outlined' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-tag--outlined')
+  })
+
+  // ── Status colors ──
+
+  it('applies default status class by default', () => {
+    const { container } = render(Tag, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).toContain('strand-tag--default')
+  })
+
+  it('applies teal status class', () => {
+    const { container } = render(Tag, {
+      props: { status: 'teal' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-tag--teal')
+  })
+
+  it('applies red status class', () => {
+    const { container } = render(Tag, {
+      props: { status: 'red' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-tag--red')
+  })
+
+  it('applies amber status class', () => {
+    const { container } = render(Tag, {
+      props: { status: 'amber' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-tag--amber')
+  })
+
+  it('applies blue status class', () => {
+    const { container } = render(Tag, {
+      props: { status: 'blue' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-tag--blue')
+  })
+
+  // ── Removable ──
+
+  it('does not show remove button by default', () => {
+    const { container } = render(Tag, { slots: { default: 'Test' } })
+    expect(container.querySelector('.strand-tag__remove')).toBeNull()
+  })
+
+  it('shows remove button when removable', () => {
+    const { container } = render(Tag, {
+      props: { removable: true },
+      slots: { default: 'Test' },
+    })
+    expect(container.querySelector('.strand-tag__remove')).toBeTruthy()
+  })
+
+  it('remove button has aria-label', () => {
+    const { container } = render(Tag, {
+      props: { removable: true },
+      slots: { default: 'Test' },
+    })
+    const btn = container.querySelector('.strand-tag__remove')
+    expect(btn?.getAttribute('aria-label')).toBe('Remove')
+  })
+
+  it('emits remove event on button click', async () => {
+    const { container, emitted } = render(Tag, {
+      props: { removable: true },
+      slots: { default: 'Test' },
+    })
+    const btn = container.querySelector('.strand-tag__remove') as HTMLButtonElement
+    await fireEvent.click(btn)
+    expect(emitted().remove).toHaveLength(1)
+  })
+
+  it('remove button contains SVG with aria-hidden', () => {
+    const { container } = render(Tag, {
+      props: { removable: true },
+      slots: { default: 'Test' },
+    })
+    const svg = container.querySelector('.strand-tag__remove svg')
+    expect(svg).toBeTruthy()
+    expect(svg?.getAttribute('aria-hidden')).toBe('true')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { container } = render(Tag, {
+      props: { className: 'custom' },
+      slots: { default: 'Test' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-tag')
+    expect(el?.className).toContain('custom')
+  })
+})