@dillingerstaffing/strand-vue 0.4.0

package/src/components/Progress/Progress.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Progress from './Progress.vue'
+
+describe('Progress', () => {
+  // ── ARIA ──
+
+  it('renders with progressbar role', () => {
+    const { getByRole } = render(Progress, { props: { value: 50 } })
+    expect(getByRole('progressbar')).toBeTruthy()
+  })
+
+  it('has aria-valuemin of 0', () => {
+    const { getByRole } = render(Progress, { props: { value: 50 } })
+    expect(getByRole('progressbar')).toHaveAttribute('aria-valuemin', '0')
+  })
+
+  it('has aria-valuemax of 100', () => {
+    const { getByRole } = render(Progress, { props: { value: 50 } })
+    expect(getByRole('progressbar')).toHaveAttribute('aria-valuemax', '100')
+  })
+
+  it('has aria-valuenow when determinate', () => {
+    const { getByRole } = render(Progress, { props: { value: 75 } })
+    expect(getByRole('progressbar')).toHaveAttribute('aria-valuenow', '75')
+  })
+
+  it('has no aria-valuenow when indeterminate', () => {
+    const { getByRole } = render(Progress)
+    expect(getByRole('progressbar')).not.toHaveAttribute('aria-valuenow')
+  })
+
+  // ── Variants ──
+
+  it('applies bar variant class by default', () => {
+    const { getByRole } = render(Progress, { props: { value: 50 } })
+    expect(getByRole('progressbar').className).toContain('strand-progress--bar')
+  })
+
+  it('applies ring variant class', () => {
+    const { getByRole } = render(Progress, { props: { variant: 'ring', value: 50 } })
+    expect(getByRole('progressbar').className).toContain('strand-progress--ring')
+  })
+
+  it('renders SVG for ring variant', () => {
+    const { container } = render(Progress, { props: { variant: 'ring', value: 50 } })
+    expect(container.querySelector('svg')).toBeTruthy()
+  })
+
+  // ── Indeterminate ──
+
+  it('applies indeterminate class when no value', () => {
+    const { getByRole } = render(Progress)
+    expect(getByRole('progressbar').className).toContain('strand-progress--indeterminate')
+  })
+
+  it('does not apply indeterminate class when value is provided', () => {
+    const { getByRole } = render(Progress, { props: { value: 50 } })
+    expect(getByRole('progressbar').className).not.toContain('strand-progress--indeterminate')
+  })
+
+  // ── Sizes ──
+
+  it('applies md size class by default', () => {
+    const { getByRole } = render(Progress, { props: { value: 50 } })
+    expect(getByRole('progressbar').className).toContain('strand-progress--md')
+  })
+
+  it('applies sm size class', () => {
+    const { getByRole } = render(Progress, { props: { value: 50, size: 'sm' } })
+    expect(getByRole('progressbar').className).toContain('strand-progress--sm')
+  })
+
+  it('applies lg size class', () => {
+    const { getByRole } = render(Progress, { props: { value: 50, size: 'lg' } })
+    expect(getByRole('progressbar').className).toContain('strand-progress--lg')
+  })
+
+  // ── Fill width ──
+
+  it('sets fill width to match value for bar variant', () => {
+    const { container } = render(Progress, { props: { value: 60 } })
+    const fill = container.querySelector('.strand-progress__fill')
+    expect((fill as HTMLElement)?.style.width).toBe('60%')
+  })
+
+  // ── Ring SVG ──
+
+  it('renders track and fill circles for ring variant', () => {
+    const { container } = render(Progress, { props: { variant: 'ring', value: 50 } })
+    expect(container.querySelector('.strand-progress__track')).toBeTruthy()
+    expect(container.querySelector('.strand-progress__fill')).toBeTruthy()
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { getByRole } = render(Progress, { props: { value: 50, className: 'custom' } })
+    const el = getByRole('progressbar')
+    expect(el.className).toContain('strand-progress')
+    expect(el.className).toContain('custom')
+  })
+})

package/src/components/Progress/Progress.vue

@@ -0,0 +1,96 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Visual variant */
+  variant?: 'bar' | 'ring'
+  /** Completion percentage (0-100). Omit for indeterminate. */
+  value?: number
+  /** Size of the progress indicator */
+  size?: 'sm' | 'md' | 'lg'
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'bar',
+  size: 'md',
+  className: '',
+})
+
+const RING_SIZES: Record<string, number> = { sm: 24, md: 40, lg: 56 }
+const RING_STROKE = 3
+
+const isDeterminate = computed(() => props.value != null)
+
+const classes = computed(() =>
+  [
+    'strand-progress',
+    `strand-progress--${props.variant}`,
+    `strand-progress--${props.size}`,
+    !isDeterminate.value && 'strand-progress--indeterminate',
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+const dim = computed(() => RING_SIZES[props.size] ?? RING_SIZES.md)
+const radius = computed(() => (dim.value - RING_STROKE) / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+const offset = computed(() =>
+  isDeterminate.value
+    ? circumference.value - (circumference.value * (props.value as number)) / 100
+    : 0,
+)
+</script>
+
+<template>
+  <div
+    :class="classes"
+    role="progressbar"
+    :aria-valuemin="0"
+    :aria-valuemax="100"
+    :aria-valuenow="isDeterminate ? value : undefined"
+    v-bind="$attrs"
+  >
+    <!-- Ring variant -->
+    <template v-if="variant === 'ring'">
+      <svg
+        :width="dim"
+        :height="dim"
+        :viewBox="`0 0 ${dim} ${dim}`"
+        class="strand-progress__ring"
+      >
+        <circle
+          :cx="dim / 2"
+          :cy="dim / 2"
+          :r="radius"
+          fill="none"
+          :stroke-width="RING_STROKE"
+          class="strand-progress__track"
+        />
+        <circle
+          :cx="dim / 2"
+          :cy="dim / 2"
+          :r="radius"
+          fill="none"
+          :stroke-width="RING_STROKE"
+          :stroke-dasharray="circumference"
+          :stroke-dashoffset="isDeterminate ? offset : undefined"
+          stroke-linecap="round"
+          class="strand-progress__fill"
+          :transform="`rotate(-90 ${dim / 2} ${dim / 2})`"
+        />
+      </svg>
+    </template>
+    <!-- Bar variant -->
+    <template v-else>
+      <div
+        class="strand-progress__fill"
+        :style="isDeterminate ? { width: `${value}%` } : undefined"
+      />
+    </template>
+  </div>
+</template>

package/src/components/Progress/index.ts

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

package/src/components/Radio/Radio.test.ts

@@ -0,0 +1,92 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Radio from './Radio.vue'
+
+describe('Radio', () => {
+  it('renders with default props', () => {
+    const { container } = render(Radio)
+    const label = container.querySelector('.strand-radio')
+    expect(label).toBeInTheDocument()
+    const input = container.querySelector('.strand-radio__native') as HTMLInputElement
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'radio')
+    expect(input).not.toBeChecked()
+  })
+
+  it('applies checked state and class', () => {
+    const { container } = render(Radio, {
+      props: { checked: true },
+    })
+    const wrapper = container.querySelector('.strand-radio')
+    expect(wrapper).toHaveClass('strand-radio--checked')
+    const input = container.querySelector('.strand-radio__native') as HTMLInputElement
+    expect(input).toBeChecked()
+  })
+
+  it('applies disabled state', () => {
+    const { container } = render(Radio, {
+      props: { disabled: true },
+    })
+    const wrapper = container.querySelector('.strand-radio')
+    expect(wrapper).toHaveClass('strand-radio--disabled')
+    const input = container.querySelector('.strand-radio__native')
+    expect(input).toBeDisabled()
+  })
+
+  it('renders label text', () => {
+    const { container } = render(Radio, {
+      props: { label: 'Option 1' },
+    })
+    const labelSpan = container.querySelector('.strand-radio__label')
+    expect(labelSpan).toBeInTheDocument()
+    expect(labelSpan).toHaveTextContent('Option 1')
+  })
+
+  it('does not render label span without label prop', () => {
+    const { container } = render(Radio)
+    expect(container.querySelector('.strand-radio__label')).not.toBeInTheDocument()
+  })
+
+  it('passes name attribute', () => {
+    const { container } = render(Radio, {
+      props: { name: 'color' },
+    })
+    const input = container.querySelector('.strand-radio__native')
+    expect(input).toHaveAttribute('name', 'color')
+  })
+
+  it('passes value attribute', () => {
+    const { container } = render(Radio, {
+      props: { value: 'red' },
+    })
+    const input = container.querySelector('.strand-radio__native')
+    expect(input).toHaveAttribute('value', 'red')
+  })
+
+  it('renders control with dot and aria-hidden', () => {
+    const { container } = render(Radio)
+    const control = container.querySelector('.strand-radio__control')
+    expect(control).toBeInTheDocument()
+    expect(control).toHaveAttribute('aria-hidden', 'true')
+    const dot = container.querySelector('.strand-radio__dot')
+    expect(dot).toBeInTheDocument()
+  })
+
+  it('emits change event when clicked', async () => {
+    const { container, emitted } = render(Radio)
+    const input = container.querySelector('.strand-radio__native') as HTMLInputElement
+    await fireEvent.click(input)
+    expect(emitted().change).toHaveLength(1)
+  })
+
+  it('does not emit change when disabled', async () => {
+    const { container, emitted } = render(Radio, {
+      props: { disabled: true },
+    })
+    const input = container.querySelector('.strand-radio__native') as HTMLInputElement
+    await fireEvent.click(input)
+    expect(emitted().change).toBeUndefined()
+  })
+})

package/src/components/Radio/Radio.vue

@@ -0,0 +1,60 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface RadioProps {
+  /** Controlled checked state */
+  checked?: boolean
+  /** Disabled state */
+  disabled?: boolean
+  /** Label text */
+  label?: string
+  /** Radio group name */
+  name?: string
+  /** Radio value */
+  value?: string
+}
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  checked: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'change', event: Event): void
+}>()
+
+const classes = computed(() =>
+  [
+    'strand-radio',
+    props.checked && 'strand-radio--checked',
+    props.disabled && 'strand-radio--disabled',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+function handleChange(event: Event) {
+  if (!props.disabled) {
+    emit('change', event)
+  }
+}
+</script>
+
+<template>
+  <label :class="classes">
+    <input
+      type="radio"
+      class="strand-radio__native"
+      :checked="checked"
+      :disabled="disabled"
+      :name="name"
+      :value="value"
+      @change="handleChange"
+    />
+    <span class="strand-radio__control" aria-hidden="true">
+      <span class="strand-radio__dot" />
+    </span>
+    <span v-if="label" class="strand-radio__label">{{ label }}</span>
+  </label>
+</template>

package/src/components/Radio/index.ts

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

package/src/components/Section/Section.test.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Section from './Section.vue'
+
+describe('Section', () => {
+  // ── Rendering ──
+
+  it('renders a section element', () => {
+    const { container } = render(Section, { slots: { default: 'Content' } })
+    expect(container.firstElementChild?.tagName).toBe('SECTION')
+  })
+
+  it('renders slot content', () => {
+    const { getByText } = render(Section, { slots: { default: 'Hello' } })
+    expect(getByText('Hello')).toBeTruthy()
+  })
+
+  // ── Variants ──
+
+  it('applies standard variant class by default', () => {
+    const { container } = render(Section, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).toContain('strand-section--standard')
+  })
+
+  it('applies hero variant class', () => {
+    const { container } = render(Section, {
+      props: { variant: 'hero' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-section--hero')
+  })
+
+  // ── Background ──
+
+  it('applies primary background class by default', () => {
+    const { container } = render(Section, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).toContain('strand-section--bg-primary')
+  })
+
+  it('applies elevated background class', () => {
+    const { container } = render(Section, {
+      props: { background: 'elevated' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-section--bg-elevated')
+  })
+
+  it('applies recessed background class', () => {
+    const { container } = render(Section, {
+      props: { background: 'recessed' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-section--bg-recessed')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { container } = render(Section, {
+      props: { className: 'custom' },
+      slots: { default: 'Test' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-section')
+    expect(el?.className).toContain('custom')
+  })
+
+  // ── Props forwarding ──
+
+  it('forwards additional attributes', () => {
+    const { container } = render(Section, {
+      attrs: { id: 'hero-section' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.getAttribute('id')).toBe('hero-section')
+  })
+})

package/src/components/Section/Section.vue

@@ -0,0 +1,36 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Padding variant */
+  variant?: 'standard' | 'hero'
+  /** Surface background */
+  background?: 'primary' | 'elevated' | 'recessed'
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'standard',
+  background: 'primary',
+  className: '',
+})
+
+const classes = computed(() =>
+  [
+    'strand-section',
+    `strand-section--${props.variant}`,
+    `strand-section--bg-${props.background}`,
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <section :class="classes" v-bind="$attrs">
+    <slot />
+  </section>
+</template>

package/src/components/Section/index.ts

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

package/src/components/Select/Select.test.ts

@@ -0,0 +1,102 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Select from './Select.vue'
+
+const defaultOptions = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B' },
+  { value: 'c', label: 'Option C' },
+]
+
+describe('Select', () => {
+  it('renders with default props', () => {
+    const { container } = render(Select, {
+      props: { options: defaultOptions },
+    })
+    const wrapper = container.querySelector('.strand-select')
+    expect(wrapper).toBeInTheDocument()
+    const select = container.querySelector('.strand-select__field') as HTMLSelectElement
+    expect(select).toBeInTheDocument()
+    expect(select).not.toBeDisabled()
+  })
+
+  it('renders all options', () => {
+    const { container } = render(Select, {
+      props: { options: defaultOptions },
+    })
+    const options = container.querySelectorAll('option')
+    expect(options).toHaveLength(3)
+    expect(options[0]).toHaveTextContent('Option A')
+    expect(options[0]).toHaveAttribute('value', 'a')
+    expect(options[1]).toHaveTextContent('Option B')
+    expect(options[2]).toHaveTextContent('Option C')
+  })
+
+  it('renders placeholder as first disabled option', () => {
+    const { container } = render(Select, {
+      props: { options: defaultOptions, placeholder: 'Choose one' },
+    })
+    const options = container.querySelectorAll('option')
+    expect(options).toHaveLength(4)
+    expect(options[0]).toHaveTextContent('Choose one')
+    expect(options[0]).toHaveAttribute('value', '')
+    expect(options[0]).toBeDisabled()
+  })
+
+  it('applies error class and aria-invalid', () => {
+    const { container } = render(Select, {
+      props: { options: defaultOptions, error: true },
+    })
+    const wrapper = container.querySelector('.strand-select')
+    expect(wrapper).toHaveClass('strand-select--error')
+    const select = container.querySelector('.strand-select__field')
+    expect(select).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('does not set aria-invalid when no error', () => {
+    const { container } = render(Select, {
+      props: { options: defaultOptions },
+    })
+    const select = container.querySelector('.strand-select__field')
+    expect(select).not.toHaveAttribute('aria-invalid')
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Select, {
+      props: { options: defaultOptions, disabled: true },
+    })
+    const wrapper = container.querySelector('.strand-select')
+    expect(wrapper).toHaveClass('strand-select--disabled')
+    const select = container.querySelector('.strand-select__field')
+    expect(select).toBeDisabled()
+  })
+
+  it('renders arrow indicator with aria-hidden', () => {
+    const { container } = render(Select, {
+      props: { options: defaultOptions },
+    })
+    const arrow = container.querySelector('.strand-select__arrow')
+    expect(arrow).toBeInTheDocument()
+    expect(arrow).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('emits update:modelValue on change', async () => {
+    const { container, emitted } = render(Select, {
+      props: { options: defaultOptions, modelValue: 'a' },
+    })
+    const select = container.querySelector('.strand-select__field') as HTMLSelectElement
+    await fireEvent.update(select, 'b')
+    expect(emitted()['update:modelValue']).toBeTruthy()
+    expect(emitted()['update:modelValue'][0]).toEqual(['b'])
+  })
+
+  it('sets selected value from modelValue', () => {
+    const { container } = render(Select, {
+      props: { options: defaultOptions, modelValue: 'b' },
+    })
+    const select = container.querySelector('.strand-select__field') as HTMLSelectElement
+    expect(select.value).toBe('b')
+  })
+})

package/src/components/Select/Select.vue

@@ -0,0 +1,70 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface SelectOption {
+  value: string
+  label: string
+}
+
+export interface SelectProps {
+  /** Array of options to display */
+  options: SelectOption[]
+  /** Disabled state */
+  disabled?: boolean
+  /** Currently selected value */
+  modelValue?: string
+  /** Show error styling */
+  error?: boolean
+  /** Placeholder text shown as first disabled option */
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  disabled: false,
+  error: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const wrapperClasses = computed(() =>
+  [
+    'strand-select',
+    props.error && 'strand-select--error',
+    props.disabled && 'strand-select--disabled',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLSelectElement
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <select
+      class="strand-select__field"
+      :value="modelValue"
+      :disabled="disabled"
+      :aria-invalid="error ? 'true' : undefined"
+      @change="handleChange"
+    >
+      <option v-if="placeholder" value="" disabled>
+        {{ placeholder }}
+      </option>
+      <option
+        v-for="opt in options"
+        :key="opt.value"
+        :value="opt.value"
+      >
+        {{ opt.label }}
+      </option>
+    </select>
+    <span class="strand-select__arrow" aria-hidden="true" />
+  </div>
+</template>

package/src/components/Select/index.ts

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