@dillingerstaffing/strand-vue 0.4.0

package/src/components/Skeleton/Skeleton.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Skeleton from './Skeleton.vue'
+
+describe('Skeleton', () => {
+  // ── Rendering ──
+
+  it('renders a div element', () => {
+    const { container } = render(Skeleton)
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+  })
+
+  it('has aria-hidden attribute', () => {
+    const { container } = render(Skeleton)
+    expect(container.firstElementChild?.getAttribute('aria-hidden')).toBe('true')
+  })
+
+  // ── Variants ──
+
+  it('applies text variant class by default', () => {
+    const { container } = render(Skeleton)
+    expect(container.firstElementChild?.className).toContain('strand-skeleton--text')
+  })
+
+  it('applies rectangle variant class', () => {
+    const { container } = render(Skeleton, { props: { variant: 'rectangle' } })
+    expect(container.firstElementChild?.className).toContain('strand-skeleton--rectangle')
+  })
+
+  it('applies circle variant class', () => {
+    const { container } = render(Skeleton, { props: { variant: 'circle', width: '48px' } })
+    expect(container.firstElementChild?.className).toContain('strand-skeleton--circle')
+  })
+
+  // ── Shimmer ──
+
+  it('applies shimmer class', () => {
+    const { container } = render(Skeleton)
+    expect(container.firstElementChild?.className).toContain('strand-skeleton--shimmer')
+  })
+
+  // ── Dimensions ──
+
+  it('sets width to 100% for text variant by default', () => {
+    const { container } = render(Skeleton)
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.width).toBe('100%')
+  })
+
+  it('uses custom width when provided', () => {
+    const { container } = render(Skeleton, { props: { width: '200px' } })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.width).toBe('200px')
+  })
+
+  it('uses custom height when provided', () => {
+    const { container } = render(Skeleton, { props: { height: '50px' } })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.height).toBe('50px')
+  })
+
+  it('sets height equal to width for circle variant', () => {
+    const { container } = render(Skeleton, { props: { variant: 'circle', width: '48px' } })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.width).toBe('48px')
+    expect(el.style.height).toBe('48px')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { container } = render(Skeleton, { props: { className: 'custom' } })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-skeleton')
+    expect(el?.className).toContain('custom')
+  })
+})

package/src/components/Skeleton/Skeleton.vue

@@ -0,0 +1,48 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Shape variant */
+  variant?: 'text' | 'rectangle' | 'circle'
+  /** CSS width value */
+  width?: string
+  /** CSS height value */
+  height?: string
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'text',
+  className: '',
+})
+
+const effectiveWidth = computed(() =>
+  props.width ?? (props.variant === 'text' ? '100%' : undefined),
+)
+
+const effectiveHeight = computed(() =>
+  props.variant === 'circle' ? effectiveWidth.value : props.height,
+)
+
+const classes = computed(() =>
+  [
+    'strand-skeleton',
+    `strand-skeleton--${props.variant}`,
+    'strand-skeleton--shimmer',
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+const inlineStyle = computed(() => ({
+  width: effectiveWidth.value,
+  height: effectiveHeight.value,
+}))
+</script>
+
+<template>
+  <div :class="classes" aria-hidden="true" :style="inlineStyle" v-bind="$attrs" />
+</template>

package/src/components/Skeleton/index.ts

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

package/src/components/Slider/Slider.test.ts

@@ -0,0 +1,73 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Slider from './Slider.vue'
+
+describe('Slider', () => {
+  it('renders with default props', () => {
+    const { container } = render(Slider)
+    const wrapper = container.querySelector('.strand-slider')
+    expect(wrapper).toBeInTheDocument()
+    const input = container.querySelector('.strand-slider__field') as HTMLInputElement
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'range')
+    expect(input).toHaveAttribute('min', '0')
+    expect(input).toHaveAttribute('max', '100')
+    expect(input).toHaveAttribute('step', '1')
+  })
+
+  it('sets aria-valuemin, aria-valuemax, and aria-valuenow', () => {
+    const { container } = render(Slider, {
+      props: { min: 10, max: 200, modelValue: 50 },
+    })
+    const input = container.querySelector('.strand-slider__field')
+    expect(input).toHaveAttribute('aria-valuemin', '10')
+    expect(input).toHaveAttribute('aria-valuemax', '200')
+    expect(input).toHaveAttribute('aria-valuenow', '50')
+  })
+
+  it('applies custom min, max, step props', () => {
+    const { container } = render(Slider, {
+      props: { min: 5, max: 50, step: 5 },
+    })
+    const input = container.querySelector('.strand-slider__field')
+    expect(input).toHaveAttribute('min', '5')
+    expect(input).toHaveAttribute('max', '50')
+    expect(input).toHaveAttribute('step', '5')
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Slider, {
+      props: { disabled: true },
+    })
+    const wrapper = container.querySelector('.strand-slider')
+    expect(wrapper).toHaveClass('strand-slider--disabled')
+    const input = container.querySelector('.strand-slider__field')
+    expect(input).toBeDisabled()
+  })
+
+  it('does not apply disabled class when not disabled', () => {
+    const { container } = render(Slider)
+    const wrapper = container.querySelector('.strand-slider')
+    expect(wrapper).not.toHaveClass('strand-slider--disabled')
+  })
+
+  it('emits update:modelValue on input', async () => {
+    const { container, emitted } = render(Slider, {
+      props: { modelValue: 50 },
+    })
+    const input = container.querySelector('.strand-slider__field') as HTMLInputElement
+    await fireEvent.update(input, '75')
+    expect(emitted()['update:modelValue']).toBeTruthy()
+    expect(emitted()['update:modelValue'][0]).toEqual([75])
+  })
+
+  it('sets value from modelValue prop', () => {
+    const { container } = render(Slider, {
+      props: { modelValue: 42 },
+    })
+    const input = container.querySelector('.strand-slider__field') as HTMLInputElement
+    expect(input.value).toBe('42')
+  })
+})

package/src/components/Slider/Slider.vue

@@ -0,0 +1,60 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface SliderProps {
+  /** Minimum value */
+  min?: number
+  /** Maximum value */
+  max?: number
+  /** Step increment */
+  step?: number
+  /** Current value */
+  modelValue?: number
+  /** Disabled state */
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+}>()
+
+const wrapperClasses = computed(() =>
+  [
+    'strand-slider',
+    props.disabled && 'strand-slider--disabled',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', Number(target.value))
+}
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <input
+      type="range"
+      class="strand-slider__field"
+      :min="min"
+      :max="max"
+      :step="step"
+      :value="modelValue"
+      :disabled="disabled"
+      :aria-valuemin="min"
+      :aria-valuemax="max"
+      :aria-valuenow="modelValue"
+      @input="handleInput"
+    />
+  </div>
+</template>

package/src/components/Slider/index.ts

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

package/src/components/Spinner/Spinner.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Spinner from './Spinner.vue'
+
+describe('Spinner', () => {
+  // ── Rendering ──
+
+  it('renders a span element', () => {
+    const { container } = render(Spinner)
+    expect(container.firstElementChild?.tagName).toBe('SPAN')
+  })
+
+  it('has status role', () => {
+    const { getByRole } = render(Spinner)
+    expect(getByRole('status')).toBeTruthy()
+  })
+
+  // ── Inner elements ──
+
+  it('renders a ring span with aria-hidden', () => {
+    const { container } = render(Spinner)
+    const ring = container.querySelector('.strand-spinner__ring')
+    expect(ring).toBeTruthy()
+    expect(ring?.getAttribute('aria-hidden')).toBe('true')
+  })
+
+  it('renders sr-only loading text', () => {
+    const { container } = render(Spinner)
+    const srOnly = container.querySelector('.strand-spinner__sr-only')
+    expect(srOnly).toBeTruthy()
+    expect(srOnly?.textContent).toBe('Loading')
+  })
+
+  // ── Sizes ──
+
+  it('applies md size class by default', () => {
+    const { container } = render(Spinner)
+    expect(container.firstElementChild?.className).toContain('strand-spinner--md')
+  })
+
+  it('applies sm size class', () => {
+    const { container } = render(Spinner, { props: { size: 'sm' } })
+    expect(container.firstElementChild?.className).toContain('strand-spinner--sm')
+  })
+
+  it('applies lg size class', () => {
+    const { container } = render(Spinner, { props: { size: 'lg' } })
+    expect(container.firstElementChild?.className).toContain('strand-spinner--lg')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { container } = render(Spinner, { props: { className: 'custom' } })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-spinner')
+    expect(el?.className).toContain('custom')
+  })
+
+  // ── Props forwarding ──
+
+  it('forwards additional attributes', () => {
+    const { container } = render(Spinner, { attrs: { id: 'my-spinner' } })
+    expect(container.firstElementChild?.getAttribute('id')).toBe('my-spinner')
+  })
+})

package/src/components/Spinner/Spinner.vue

@@ -0,0 +1,33 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Size of the spinner */
+  size?: 'sm' | 'md' | 'lg'
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  className: '',
+})
+
+const classes = computed(() =>
+  [
+    'strand-spinner',
+    `strand-spinner--${props.size}`,
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <span :class="classes" role="status" v-bind="$attrs">
+    <span class="strand-spinner__ring" aria-hidden="true" />
+    <span class="strand-spinner__sr-only">Loading</span>
+  </span>
+</template>

package/src/components/Spinner/index.ts

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

package/src/components/Stack/Stack.test.ts

@@ -0,0 +1,140 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Stack from './Stack.vue'
+
+describe('Stack', () => {
+  // ── Rendering ──
+
+  it('renders a div element', () => {
+    const { container } = render(Stack, { slots: { default: '<div>Item</div>' } })
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+  })
+
+  it('applies strand-stack base class', () => {
+    const { container } = render(Stack, { slots: { default: '<div>Item</div>' } })
+    expect(container.firstElementChild?.className).toContain('strand-stack')
+  })
+
+  // ── Direction ──
+
+  it('applies vertical direction class by default', () => {
+    const { container } = render(Stack, { slots: { default: '<div>Item</div>' } })
+    expect(container.firstElementChild?.className).toContain('strand-stack--vertical')
+  })
+
+  it('applies horizontal direction class', () => {
+    const { container } = render(Stack, {
+      props: { direction: 'horizontal' },
+      slots: { default: '<div>Item</div>' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-stack--horizontal')
+  })
+
+  // ── Gap ──
+
+  it('sets gap with default space-4', () => {
+    const { container } = render(Stack, { slots: { default: '<div>Item</div>' } })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.gap).toBe('var(--strand-space-4)')
+  })
+
+  it('sets gap to match gap prop', () => {
+    const { container } = render(Stack, {
+      props: { gap: 8 },
+      slots: { default: '<div>Item</div>' },
+    })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.gap).toBe('var(--strand-space-8)')
+  })
+
+  // ── Align ──
+
+  it('does not apply align class when stretch (default)', () => {
+    const { container } = render(Stack, { slots: { default: '<div>Item</div>' } })
+    expect(container.firstElementChild?.className).not.toContain('strand-stack--align-')
+  })
+
+  it('applies align-center class', () => {
+    const { container } = render(Stack, {
+      props: { align: 'center' },
+      slots: { default: '<div>Item</div>' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-stack--align-center')
+  })
+
+  it('applies align-start class', () => {
+    const { container } = render(Stack, {
+      props: { align: 'start' },
+      slots: { default: '<div>Item</div>' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-stack--align-start')
+  })
+
+  it('applies align-end class', () => {
+    const { container } = render(Stack, {
+      props: { align: 'end' },
+      slots: { default: '<div>Item</div>' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-stack--align-end')
+  })
+
+  // ── Justify ──
+
+  it('does not apply justify class by default', () => {
+    const { container } = render(Stack, { slots: { default: '<div>Item</div>' } })
+    expect(container.firstElementChild?.className).not.toContain('strand-stack--justify-')
+  })
+
+  it('applies justify-center class', () => {
+    const { container } = render(Stack, {
+      props: { justify: 'center' },
+      slots: { default: '<div>Item</div>' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-stack--justify-center')
+  })
+
+  it('applies justify-between class', () => {
+    const { container } = render(Stack, {
+      props: { justify: 'between' },
+      slots: { default: '<div>Item</div>' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-stack--justify-between')
+  })
+
+  // ── Wrap ──
+
+  it('does not apply wrap class by default', () => {
+    const { container } = render(Stack, { slots: { default: '<div>Item</div>' } })
+    expect(container.firstElementChild?.className).not.toContain('strand-stack--wrap')
+  })
+
+  it('applies wrap class when enabled', () => {
+    const { container } = render(Stack, {
+      props: { wrap: true },
+      slots: { default: '<div>Item</div>' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-stack--wrap')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { container } = render(Stack, {
+      props: { className: 'custom' },
+      slots: { default: '<div>Item</div>' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-stack')
+    expect(el?.className).toContain('custom')
+  })
+
+  // ── Props forwarding ──
+
+  it('forwards additional attributes', () => {
+    const { container } = render(Stack, {
+      attrs: { id: 'my-stack' },
+      slots: { default: '<div>Item</div>' },
+    })
+    expect(container.firstElementChild?.getAttribute('id')).toBe('my-stack')
+  })
+})

package/src/components/Stack/Stack.vue

@@ -0,0 +1,50 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Flex direction */
+  direction?: 'vertical' | 'horizontal'
+  /** Gap between items, maps to --strand-space-{n} */
+  gap?: number
+  /** Cross-axis alignment */
+  align?: 'start' | 'center' | 'end' | 'stretch'
+  /** Main-axis alignment */
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around'
+  /** Enable flex-wrap */
+  wrap?: boolean
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: 'vertical',
+  gap: 4,
+  align: 'stretch',
+  wrap: false,
+  className: '',
+})
+
+const classes = computed(() =>
+  [
+    'strand-stack',
+    `strand-stack--${props.direction}`,
+    props.align !== 'stretch' && `strand-stack--align-${props.align}`,
+    props.justify && `strand-stack--justify-${props.justify}`,
+    props.wrap && 'strand-stack--wrap',
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+const inlineStyle = computed(() => ({
+  gap: `var(--strand-space-${props.gap})`,
+}))
+</script>
+
+<template>
+  <div :class="classes" :style="inlineStyle" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

package/src/components/Stack/index.ts

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

package/src/components/Switch/Switch.test.ts

@@ -0,0 +1,116 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Switch from './Switch.vue'
+
+describe('Switch', () => {
+  // -- Rendering --
+
+  it('renders as switch role', () => {
+    const { getByRole } = render(Switch)
+    expect(getByRole('switch')).toBeTruthy()
+  })
+
+  // -- Toggle on click --
+
+  it('emits change with true when unchecked switch is clicked', async () => {
+    const { getByRole, emitted } = render(Switch)
+    await fireEvent.click(getByRole('switch'))
+    expect(emitted().change[0]).toEqual([true])
+  })
+
+  it('emits change with false when checked switch is clicked', async () => {
+    const { getByRole, emitted } = render(Switch, {
+      props: { checked: true },
+    })
+    await fireEvent.click(getByRole('switch'))
+    expect(emitted().change[0]).toEqual([false])
+  })
+
+  // -- Toggle on Space key --
+
+  it('toggles on Space key', async () => {
+    const { getByRole, emitted } = render(Switch)
+    await fireEvent.keyDown(getByRole('switch'), { key: ' ' })
+    expect(emitted().change[0]).toEqual([true])
+  })
+
+  // -- Toggle on Enter key --
+
+  it('toggles on Enter key', async () => {
+    const { getByRole, emitted } = render(Switch)
+    await fireEvent.keyDown(getByRole('switch'), { key: 'Enter' })
+    expect(emitted().change[0]).toEqual([true])
+  })
+
+  // -- Checked state --
+
+  it('sets aria-checked true when checked', () => {
+    const { getByRole } = render(Switch, {
+      props: { checked: true },
+    })
+    expect(getByRole('switch')).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('sets aria-checked false when unchecked', () => {
+    const { getByRole } = render(Switch, {
+      props: { checked: false },
+    })
+    expect(getByRole('switch')).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('applies checked class', () => {
+    const { container } = render(Switch, {
+      props: { checked: true },
+    })
+    expect(container.querySelector('.strand-switch--checked')).toBeTruthy()
+  })
+
+  // -- Disabled state --
+
+  it('disables the switch when disabled prop is set', () => {
+    const { getByRole } = render(Switch, {
+      props: { disabled: true },
+    })
+    expect(getByRole('switch')).toBeDisabled()
+  })
+
+  it('does not emit change when disabled', async () => {
+    const { getByRole, emitted } = render(Switch, {
+      props: { disabled: true },
+    })
+    await fireEvent.click(getByRole('switch'))
+    expect(emitted().change).toBeUndefined()
+  })
+
+  it('applies disabled class', () => {
+    const { container } = render(Switch, {
+      props: { disabled: true },
+    })
+    expect(container.querySelector('.strand-switch--disabled')).toBeTruthy()
+  })
+
+  // -- Inline label --
+
+  it('renders inline label text', () => {
+    const { getByText } = render(Switch, {
+      props: { label: 'Dark mode' },
+    })
+    expect(getByText('Dark mode')).toBeTruthy()
+  })
+
+  it('does not render label span without label prop', () => {
+    const { container } = render(Switch)
+    expect(container.querySelector('.strand-switch__label')).not.toBeInTheDocument()
+  })
+
+  // -- Structure --
+
+  it('renders thumb with aria-hidden', () => {
+    const { container } = render(Switch)
+    const thumb = container.querySelector('.strand-switch__thumb')
+    expect(thumb).toBeInTheDocument()
+    expect(thumb).toHaveAttribute('aria-hidden', 'true')
+  })
+})