@dillingerstaffing/strand-vue 0.4.0

package/src/components/Card/Card.vue

@@ -0,0 +1,36 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Visual style variant */
+  variant?: 'elevated' | 'outlined' | 'interactive'
+  /** Inner padding */
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'elevated',
+  padding: 'md',
+  className: '',
+})
+
+const classes = computed(() =>
+  [
+    'strand-card',
+    `strand-card--${props.variant}`,
+    `strand-card--pad-${props.padding}`,
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

package/src/components/Card/index.ts

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

package/src/components/Checkbox/Checkbox.test.ts

@@ -0,0 +1,118 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Checkbox from './Checkbox.vue'
+
+describe('Checkbox', () => {
+  it('renders with default props', () => {
+    const { container } = render(Checkbox)
+    const label = container.querySelector('.strand-checkbox')
+    expect(label).toBeInTheDocument()
+    const input = container.querySelector('.strand-checkbox__native') as HTMLInputElement
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'checkbox')
+    expect(input).toHaveAttribute('role', 'checkbox')
+    expect(input).toHaveAttribute('aria-checked', 'false')
+    expect(input).not.toBeChecked()
+  })
+
+  it('applies checked state and class', () => {
+    const { container } = render(Checkbox, {
+      props: { checked: true },
+    })
+    const wrapper = container.querySelector('.strand-checkbox')
+    expect(wrapper).toHaveClass('strand-checkbox--checked')
+    const input = container.querySelector('.strand-checkbox__native') as HTMLInputElement
+    expect(input).toBeChecked()
+    expect(input).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('shows checkmark SVG when checked', () => {
+    const { container } = render(Checkbox, {
+      props: { checked: true },
+    })
+    const svg = container.querySelector('.strand-checkbox__icon')
+    expect(svg).toBeInTheDocument()
+    expect(container.querySelector('path')).toBeInTheDocument()
+  })
+
+  it('shows indeterminate state with mixed aria-checked', () => {
+    const { container } = render(Checkbox, {
+      props: { indeterminate: true },
+    })
+    const wrapper = container.querySelector('.strand-checkbox')
+    expect(wrapper).toHaveClass('strand-checkbox--indeterminate')
+    const input = container.querySelector('.strand-checkbox__native') as HTMLInputElement
+    expect(input).toHaveAttribute('aria-checked', 'mixed')
+  })
+
+  it('shows dash SVG when indeterminate', () => {
+    const { container } = render(Checkbox, {
+      props: { indeterminate: true },
+    })
+    const svg = container.querySelector('.strand-checkbox__icon')
+    expect(svg).toBeInTheDocument()
+    expect(container.querySelector('line')).toBeInTheDocument()
+  })
+
+  it('does not show SVG when unchecked and not indeterminate', () => {
+    const { container } = render(Checkbox)
+    expect(container.querySelector('.strand-checkbox__icon')).not.toBeInTheDocument()
+  })
+
+  it('applies disabled state', () => {
+    const { container } = render(Checkbox, {
+      props: { disabled: true },
+    })
+    const wrapper = container.querySelector('.strand-checkbox')
+    expect(wrapper).toHaveClass('strand-checkbox--disabled')
+    const input = container.querySelector('.strand-checkbox__native')
+    expect(input).toBeDisabled()
+  })
+
+  it('renders label text', () => {
+    const { container } = render(Checkbox, {
+      props: { label: 'Accept terms' },
+    })
+    const labelSpan = container.querySelector('.strand-checkbox__label')
+    expect(labelSpan).toBeInTheDocument()
+    expect(labelSpan).toHaveTextContent('Accept terms')
+  })
+
+  it('does not render label span without label prop', () => {
+    const { container } = render(Checkbox)
+    expect(container.querySelector('.strand-checkbox__label')).not.toBeInTheDocument()
+  })
+
+  it('emits change event when clicked', async () => {
+    const { container, emitted } = render(Checkbox)
+    const input = container.querySelector('.strand-checkbox__native') as HTMLInputElement
+    await fireEvent.click(input)
+    expect(emitted().change).toHaveLength(1)
+  })
+
+  it('does not emit change when disabled', async () => {
+    const { container, emitted } = render(Checkbox, {
+      props: { disabled: true },
+    })
+    const input = container.querySelector('.strand-checkbox__native') as HTMLInputElement
+    await fireEvent.click(input)
+    expect(emitted().change).toBeUndefined()
+  })
+
+  it('renders custom control with aria-hidden', () => {
+    const { container } = render(Checkbox)
+    const control = container.querySelector('.strand-checkbox__control')
+    expect(control).toBeInTheDocument()
+    expect(control).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('sets indeterminate property on the native input', () => {
+    const { container } = render(Checkbox, {
+      props: { indeterminate: true },
+    })
+    const input = container.querySelector('.strand-checkbox__native') as HTMLInputElement
+    expect(input.indeterminate).toBe(true)
+  })
+})

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,117 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed, ref, watch, onMounted } from 'vue'
+
+export interface CheckboxProps {
+  /** Controlled checked state */
+  checked?: boolean
+  /** Indeterminate visual state */
+  indeterminate?: boolean
+  /** Disabled state */
+  disabled?: boolean
+  /** Label text */
+  label?: string
+}
+
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  checked: false,
+  indeterminate: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'change', event: Event): void
+}>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+onMounted(() => {
+  if (inputRef.value) {
+    inputRef.value.indeterminate = props.indeterminate
+  }
+})
+
+watch(() => props.indeterminate, (val) => {
+  if (inputRef.value) {
+    inputRef.value.indeterminate = val
+  }
+})
+
+const classes = computed(() =>
+  [
+    'strand-checkbox',
+    props.checked && 'strand-checkbox--checked',
+    props.indeterminate && 'strand-checkbox--indeterminate',
+    props.disabled && 'strand-checkbox--disabled',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+const ariaChecked = computed(() =>
+  props.indeterminate ? 'mixed' : props.checked ? 'true' : 'false',
+)
+
+function handleChange(event: Event) {
+  if (!props.disabled) {
+    emit('change', event)
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === ' ' && !props.disabled) {
+    event.preventDefault()
+    if (inputRef.value) {
+      inputRef.value.click()
+    }
+  }
+}
+</script>
+
+<template>
+  <label :class="classes" @keydown="handleKeyDown">
+    <input
+      ref="inputRef"
+      type="checkbox"
+      class="strand-checkbox__native"
+      :checked="checked"
+      :disabled="disabled"
+      :aria-checked="ariaChecked"
+      role="checkbox"
+      @change="handleChange"
+    />
+    <span class="strand-checkbox__control" aria-hidden="true">
+      <svg
+        v-if="indeterminate"
+        class="strand-checkbox__icon"
+        viewBox="0 0 16 16"
+        fill="none"
+      >
+        <line
+          x1="4"
+          y1="8"
+          x2="12"
+          y2="8"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+      <svg
+        v-else-if="checked"
+        class="strand-checkbox__icon"
+        viewBox="0 0 16 16"
+        fill="none"
+      >
+        <path
+          d="M3.5 8L6.5 11L12.5 5"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+    <span v-if="label" class="strand-checkbox__label">{{ label }}</span>
+  </label>
+</template>

package/src/components/Checkbox/index.ts

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

package/src/components/Container/Container.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Container from './Container.vue'
+
+describe('Container', () => {
+  // ── Rendering ──
+
+  it('renders a div element', () => {
+    const { container } = render(Container, { slots: { default: 'Content' } })
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const { getByText } = render(Container, { slots: { default: 'Hello' } })
+    expect(getByText('Hello')).toBeTruthy()
+  })
+
+  // ── Sizes ──
+
+  it('applies default size class by default', () => {
+    const { container } = render(Container, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).toContain('strand-container--default')
+  })
+
+  it('applies narrow size class', () => {
+    const { container } = render(Container, {
+      props: { size: 'narrow' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-container--narrow')
+  })
+
+  it('applies wide size class', () => {
+    const { container } = render(Container, {
+      props: { size: 'wide' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-container--wide')
+  })
+
+  it('applies full size class', () => {
+    const { container } = render(Container, {
+      props: { size: 'full' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-container--full')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { container } = render(Container, {
+      props: { className: 'custom' },
+      slots: { default: 'Test' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-container')
+    expect(el?.className).toContain('custom')
+  })
+
+  // ── Props forwarding ──
+
+  it('forwards additional attributes', () => {
+    const { container } = render(Container, {
+      attrs: { id: 'main-container' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.getAttribute('id')).toBe('main-container')
+  })
+})

package/src/components/Container/Container.vue

@@ -0,0 +1,32 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Max-width constraint */
+  size?: 'narrow' | 'default' | 'wide' | 'full'
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'default',
+  className: '',
+})
+
+const classes = computed(() =>
+  [
+    'strand-container',
+    `strand-container--${props.size}`,
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

package/src/components/Container/index.ts

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

package/src/components/DataReadout/DataReadout.test.ts

@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import DataReadout from './DataReadout.vue'
+
+describe('DataReadout', () => {
+  // ── Rendering ──
+
+  it('renders a div element', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Revenue', value: '$1.2M' },
+    })
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+  })
+
+  it('applies strand-data-readout base class', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Revenue', value: '$1.2M' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-data-readout')
+  })
+
+  // ── Label and value ──
+
+  it('renders label text', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Revenue', value: '$1.2M' },
+    })
+    const label = container.querySelector('.strand-data-readout__label')
+    expect(label?.textContent).toBe('Revenue')
+  })
+
+  it('renders string value', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Revenue', value: '$1.2M' },
+    })
+    const val = container.querySelector('.strand-data-readout__value')
+    expect(val?.textContent).toBe('$1.2M')
+  })
+
+  it('renders numeric value', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Count', value: 42 },
+    })
+    const val = container.querySelector('.strand-data-readout__value')
+    expect(val?.textContent).toBe('42')
+  })
+
+  // ── Sizes ──
+
+  it('does not apply size class for md (default)', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Test', value: '0', size: 'md' },
+    })
+    expect(container.firstElementChild?.className).not.toContain('strand-data-readout--md')
+  })
+
+  it('does not apply size class when size is omitted', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Test', value: '0' },
+    })
+    expect(container.firstElementChild?.className).not.toContain('strand-data-readout--sm')
+    expect(container.firstElementChild?.className).not.toContain('strand-data-readout--lg')
+  })
+
+  it('applies sm size class', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Test', value: '0', size: 'sm' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-data-readout--sm')
+  })
+
+  it('applies lg size class', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Test', value: '0', size: 'lg' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-data-readout--lg')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Test', value: '0', className: 'custom' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-data-readout')
+    expect(el?.className).toContain('custom')
+  })
+
+  // ── Props forwarding ──
+
+  it('forwards additional attributes', () => {
+    const { container } = render(DataReadout, {
+      props: { label: 'Test', value: '0' },
+      attrs: { id: 'my-readout' },
+    })
+    expect(container.firstElementChild?.getAttribute('id')).toBe('my-readout')
+  })
+})

package/src/components/DataReadout/DataReadout.vue

@@ -0,0 +1,36 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Overline label text */
+  label: string
+  /** The large displayed value */
+  value: string | number
+  /** Size variant: sm (compact), md (default), lg (hero) */
+  size?: 'sm' | 'md' | 'lg'
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  className: '',
+})
+
+const classes = computed(() =>
+  [
+    'strand-data-readout',
+    props.size && props.size !== 'md' ? `strand-data-readout--${props.size}` : '',
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <div :class="classes" v-bind="$attrs">
+    <span class="strand-data-readout__label">{{ label }}</span>
+    <span class="strand-data-readout__value">{{ value }}</span>
+  </div>
+</template>

package/src/components/DataReadout/index.ts

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