@dillingerstaffing/strand-vue 0.4.0

package/src/components/Grid/Grid.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Grid from './Grid.vue'
+
+describe('Grid', () => {
+  // ── Rendering ──
+
+  it('renders a div element', () => {
+    const { container } = render(Grid, { slots: { default: '<div>Item</div>' } })
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+  })
+
+  it('applies strand-grid base class', () => {
+    const { container } = render(Grid, { slots: { default: '<div>Item</div>' } })
+    expect(container.firstElementChild?.className).toContain('strand-grid')
+  })
+
+  // ── Columns ──
+
+  it('sets grid-template-columns with default 1 column', () => {
+    const { container } = render(Grid, { slots: { default: '<div>Item</div>' } })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.gridTemplateColumns).toBe('repeat(1, 1fr)')
+  })
+
+  it('sets grid-template-columns to match columns prop', () => {
+    const { container } = render(Grid, {
+      props: { columns: 3 },
+      slots: { default: '<div>Item</div>' },
+    })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.gridTemplateColumns).toBe('repeat(3, 1fr)')
+  })
+
+  // ── Gap ──
+
+  it('sets gap with default space-4', () => {
+    const { container } = render(Grid, { 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(Grid, {
+      props: { gap: 8 },
+      slots: { default: '<div>Item</div>' },
+    })
+    const el = container.firstElementChild as HTMLElement
+    expect(el.style.gap).toBe('var(--strand-space-8)')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { container } = render(Grid, {
+      props: { className: 'custom' },
+      slots: { default: '<div>Item</div>' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-grid')
+    expect(el?.className).toContain('custom')
+  })
+
+  // ── Props forwarding ──
+
+  it('forwards additional attributes', () => {
+    const { container } = render(Grid, {
+      attrs: { id: 'my-grid' },
+      slots: { default: '<div>Item</div>' },
+    })
+    expect(container.firstElementChild?.getAttribute('id')).toBe('my-grid')
+  })
+})

package/src/components/Grid/Grid.vue

@@ -0,0 +1,34 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Number of equal-width columns */
+  columns?: number
+  /** Gap between items, maps to --strand-space-{n} */
+  gap?: number
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: 1,
+  gap: 4,
+  className: '',
+})
+
+const classes = computed(() =>
+  ['strand-grid', props.className].filter(Boolean).join(' '),
+)
+
+const inlineStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${props.columns}, 1fr)`,
+  gap: `var(--strand-space-${props.gap})`,
+}))
+</script>
+
+<template>
+  <div :class="classes" :style="inlineStyle" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

package/src/components/Grid/index.ts

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

package/src/components/Input/Input.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 Input from './Input.vue'
+
+describe('Input', () => {
+  it('renders with default props', () => {
+    const { container } = render(Input)
+    const wrapper = container.querySelector('.strand-input')
+    expect(wrapper).toBeInTheDocument()
+    const input = container.querySelector('.strand-input__field') as HTMLInputElement
+    expect(input).toBeInTheDocument()
+    expect(input).toHaveAttribute('type', 'text')
+    expect(input).not.toBeDisabled()
+  })
+
+  it('applies error class and aria-invalid', () => {
+    const { container } = render(Input, {
+      props: { error: true },
+    })
+    const wrapper = container.querySelector('.strand-input')
+    expect(wrapper).toHaveClass('strand-input--error')
+    const input = container.querySelector('.strand-input__field')
+    expect(input).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('does not set aria-invalid when no error', () => {
+    const { container } = render(Input)
+    const input = container.querySelector('.strand-input__field')
+    expect(input).not.toHaveAttribute('aria-invalid')
+  })
+
+  it('applies disabled class and attribute', () => {
+    const { container } = render(Input, {
+      props: { disabled: true },
+    })
+    const wrapper = container.querySelector('.strand-input')
+    expect(wrapper).toHaveClass('strand-input--disabled')
+    const input = container.querySelector('.strand-input__field')
+    expect(input).toBeDisabled()
+  })
+
+  it('sets input type', () => {
+    const types = ['text', 'email', 'password', 'search', 'number'] as const
+    for (const type of types) {
+      const { container } = render(Input, {
+        props: { type },
+      })
+      expect(container.querySelector('.strand-input__field')).toHaveAttribute('type', type)
+    }
+  })
+
+  it('emits update:modelValue on input', async () => {
+    const { container, emitted } = render(Input, {
+      props: { modelValue: '' },
+    })
+    const input = container.querySelector('.strand-input__field') as HTMLInputElement
+    await fireEvent.update(input, 'hello')
+    expect(emitted()['update:modelValue']).toBeTruthy()
+    expect(emitted()['update:modelValue'][0]).toEqual(['hello'])
+  })
+
+  it('renders leading addon slot with has-leading class', () => {
+    const { container } = render(Input, {
+      slots: { leading: '<span>$</span>' },
+    })
+    const wrapper = container.querySelector('.strand-input')
+    expect(wrapper).toHaveClass('strand-input--has-leading')
+    const leading = container.querySelector('.strand-input__leading')
+    expect(leading).toBeInTheDocument()
+    expect(leading).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('renders trailing addon slot with has-trailing class', () => {
+    const { container } = render(Input, {
+      slots: { trailing: '<span>%</span>' },
+    })
+    const wrapper = container.querySelector('.strand-input')
+    expect(wrapper).toHaveClass('strand-input--has-trailing')
+    const trailing = container.querySelector('.strand-input__trailing')
+    expect(trailing).toBeInTheDocument()
+    expect(trailing).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('does not render addon containers when slots are empty', () => {
+    const { container } = render(Input)
+    expect(container.querySelector('.strand-input__leading')).not.toBeInTheDocument()
+    expect(container.querySelector('.strand-input__trailing')).not.toBeInTheDocument()
+    const wrapper = container.querySelector('.strand-input')
+    expect(wrapper).not.toHaveClass('strand-input--has-leading')
+    expect(wrapper).not.toHaveClass('strand-input--has-trailing')
+  })
+
+  it('passes modelValue to input value', () => {
+    const { container } = render(Input, {
+      props: { modelValue: 'test value' },
+    })
+    const input = container.querySelector('.strand-input__field') as HTMLInputElement
+    expect(input.value).toBe('test value')
+  })
+})

package/src/components/Input/Input.vue

@@ -0,0 +1,63 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+export interface InputProps {
+  /** Input type */
+  type?: 'text' | 'email' | 'password' | 'search' | 'number'
+  /** Show error styling */
+  error?: boolean
+  /** Disabled state */
+  disabled?: boolean
+  /** Current value */
+  modelValue?: string
+}
+
+const props = withDefaults(defineProps<InputProps>(), {
+  type: 'text',
+  error: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const slots = useSlots()
+
+const wrapperClasses = computed(() =>
+  [
+    'strand-input',
+    props.error && 'strand-input--error',
+    props.disabled && 'strand-input--disabled',
+    !!slots.leading && 'strand-input--has-leading',
+    !!slots.trailing && 'strand-input--has-trailing',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <span v-if="$slots.leading" class="strand-input__leading" aria-hidden="true">
+      <slot name="leading" />
+    </span>
+    <input
+      :type="type"
+      class="strand-input__field"
+      :disabled="disabled"
+      :aria-invalid="error ? 'true' : undefined"
+      :value="modelValue"
+      @input="handleInput"
+    />
+    <span v-if="$slots.trailing" class="strand-input__trailing" aria-hidden="true">
+      <slot name="trailing" />
+    </span>
+  </div>
+</template>

package/src/components/Input/index.ts

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

package/src/components/Link/Link.test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Link from './Link.vue'
+
+describe('Link', () => {
+  // ── Rendering ──
+
+  it('renders an anchor element', () => {
+    const { container } = render(Link, {
+      props: { href: '/about' },
+      slots: { default: 'About' },
+    })
+    expect(container.firstElementChild?.tagName).toBe('A')
+  })
+
+  it('renders slot content', () => {
+    const { getByText } = render(Link, {
+      props: { href: '/about' },
+      slots: { default: 'About Us' },
+    })
+    expect(getByText('About Us')).toBeTruthy()
+  })
+
+  it('applies strand-link base class', () => {
+    const { container } = render(Link, {
+      props: { href: '/about' },
+      slots: { default: 'About' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-link')
+  })
+
+  // ── Href ──
+
+  it('sets href attribute', () => {
+    const { container } = render(Link, {
+      props: { href: '/contact' },
+      slots: { default: 'Contact' },
+    })
+    expect(container.firstElementChild?.getAttribute('href')).toBe('/contact')
+  })
+
+  // ── External ──
+
+  it('does not set target or rel by default', () => {
+    const { container } = render(Link, {
+      props: { href: '/about' },
+      slots: { default: 'About' },
+    })
+    const el = container.firstElementChild
+    expect(el?.getAttribute('target')).toBeNull()
+    expect(el?.getAttribute('rel')).toBeNull()
+  })
+
+  it('sets target _blank when external', () => {
+    const { container } = render(Link, {
+      props: { href: 'https://example.com', external: true },
+      slots: { default: 'External' },
+    })
+    expect(container.firstElementChild?.getAttribute('target')).toBe('_blank')
+  })
+
+  it('sets rel noopener noreferrer when external', () => {
+    const { container } = render(Link, {
+      props: { href: 'https://example.com', external: true },
+      slots: { default: 'External' },
+    })
+    expect(container.firstElementChild?.getAttribute('rel')).toBe('noopener noreferrer')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { container } = render(Link, {
+      props: { href: '/about', className: 'custom' },
+      slots: { default: 'About' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-link')
+    expect(el?.className).toContain('custom')
+  })
+
+  // ── Props forwarding ──
+
+  it('forwards additional attributes', () => {
+    const { container } = render(Link, {
+      props: { href: '/about' },
+      attrs: { id: 'my-link' },
+      slots: { default: 'About' },
+    })
+    expect(container.firstElementChild?.getAttribute('id')).toBe('my-link')
+  })
+})

package/src/components/Link/Link.vue

@@ -0,0 +1,35 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** URL destination */
+  href: string
+  /** Opens in new tab with rel="noopener noreferrer" */
+  external?: boolean
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  external: false,
+  className: '',
+})
+
+const classes = computed(() =>
+  ['strand-link', props.className].filter(Boolean).join(' '),
+)
+</script>
+
+<template>
+  <a
+    :href="href"
+    :class="classes"
+    v-bind="{
+      ...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
+      ...$attrs,
+    }"
+  >
+    <slot />
+  </a>
+</template>

package/src/components/Link/index.ts

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

package/src/components/Nav/Nav.test.ts

@@ -0,0 +1,171 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Nav from './Nav.vue'
+
+const sampleItems = [
+  { label: 'Home', href: '/', active: true },
+  { label: 'About', href: '/about' },
+  { label: 'Contact', href: '/contact' },
+]
+
+describe('Nav', () => {
+  // -- Rendering --
+
+  it('renders a nav element', () => {
+    const { container } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    expect(container.querySelector('nav')).toBeTruthy()
+  })
+
+  it('has aria-label Main navigation', () => {
+    const { getByRole } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    expect(getByRole('navigation')).toHaveAttribute('aria-label', 'Main navigation')
+  })
+
+  it('renders logo content', () => {
+    const { getByText } = render(Nav, {
+      props: { items: sampleItems },
+      slots: { logo: '<span>MyLogo</span>' },
+    })
+    expect(getByText('MyLogo')).toBeTruthy()
+  })
+
+  it('renders navigation items', () => {
+    const { getByText } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    expect(getByText('Home')).toBeTruthy()
+    expect(getByText('About')).toBeTruthy()
+    expect(getByText('Contact')).toBeTruthy()
+  })
+
+  it('renders item hrefs', () => {
+    const { getByText } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    expect(getByText('Home').closest('a')).toHaveAttribute('href', '/')
+    expect(getByText('About').closest('a')).toHaveAttribute('href', '/about')
+  })
+
+  // -- Active item --
+
+  it('active item has active class', () => {
+    const { getByText } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    const homeLink = getByText('Home').closest('a')!
+    expect(homeLink.className).toContain('strand-nav__link--active')
+  })
+
+  it('active item has aria-current page', () => {
+    const { getByText } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    const homeLink = getByText('Home').closest('a')!
+    expect(homeLink).toHaveAttribute('aria-current', 'page')
+  })
+
+  it('inactive item does not have active class', () => {
+    const { getByText } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    const aboutLink = getByText('About').closest('a')!
+    expect(aboutLink.className).not.toContain('strand-nav__link--active')
+  })
+
+  // -- Actions --
+
+  it('renders actions content', () => {
+    const { getByText } = render(Nav, {
+      props: { items: sampleItems },
+      slots: { actions: '<button type="button">Sign In</button>' },
+    })
+    expect(getByText('Sign In')).toBeTruthy()
+  })
+
+  // -- Hamburger --
+
+  it('hamburger button has aria-expanded false initially', () => {
+    const { container } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    const hamburger = container.querySelector('.strand-nav__hamburger')!
+    expect(hamburger).toHaveAttribute('aria-expanded', 'false')
+  })
+
+  it('hamburger button has aria-label Menu', () => {
+    const { container } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    const hamburger = container.querySelector('.strand-nav__hamburger')!
+    expect(hamburger).toHaveAttribute('aria-label', 'Menu')
+  })
+
+  it('clicking hamburger toggles menu and updates aria attributes', async () => {
+    const { container } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    const hamburger = container.querySelector('.strand-nav__hamburger') as HTMLButtonElement
+
+    // Initially closed
+    expect(hamburger).toHaveAttribute('aria-expanded', 'false')
+    expect(hamburger).toHaveAttribute('aria-label', 'Menu')
+    expect(container.querySelector('.strand-nav__mobile-menu')).toBeNull()
+
+    // Open
+    await fireEvent.click(hamburger)
+    expect(hamburger).toHaveAttribute('aria-expanded', 'true')
+    expect(hamburger).toHaveAttribute('aria-label', 'Close menu')
+    expect(container.querySelector('.strand-nav__mobile-menu')).toBeTruthy()
+
+    // Close
+    await fireEvent.click(hamburger)
+    expect(hamburger).toHaveAttribute('aria-expanded', 'false')
+    expect(hamburger).toHaveAttribute('aria-label', 'Menu')
+  })
+
+  it('mobile menu renders items when open', async () => {
+    const { container } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    const hamburger = container.querySelector('.strand-nav__hamburger') as HTMLButtonElement
+    await fireEvent.click(hamburger)
+
+    const mobileMenu = container.querySelector('.strand-nav__mobile-menu')!
+    expect(mobileMenu).toBeTruthy()
+    const mobileLinks = mobileMenu.querySelectorAll('.strand-nav__mobile-link')
+    expect(mobileLinks.length).toBe(3)
+  })
+
+  it('mobile active item has active class', async () => {
+    const { container } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    const hamburger = container.querySelector('.strand-nav__hamburger') as HTMLButtonElement
+    await fireEvent.click(hamburger)
+
+    const mobileMenu = container.querySelector('.strand-nav__mobile-menu')!
+    const activeLink = mobileMenu.querySelector('.strand-nav__mobile-link--active')
+    expect(activeLink).toBeTruthy()
+    expect(activeLink!.textContent?.trim()).toBe('Home')
+  })
+
+  // -- Empty states --
+
+  it('renders without items', () => {
+    const { getByRole } = render(Nav)
+    expect(getByRole('navigation')).toBeTruthy()
+  })
+
+  it('renders without logo', () => {
+    const { container } = render(Nav, {
+      props: { items: sampleItems },
+    })
+    expect(container.querySelector('.strand-nav__logo')).toBeNull()
+  })
+})

package/src/components/Nav/Nav.vue

@@ -0,0 +1,81 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+export interface NavItem {
+  label: string
+  href: string
+  active?: boolean
+}
+
+export interface NavProps {
+  /** Navigation items */
+  items?: NavItem[]
+}
+
+const props = withDefaults(defineProps<NavProps>(), {
+  items: () => [],
+})
+
+const menuOpen = ref(false)
+
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value
+}
+
+const classes = computed(() => ['strand-nav'].filter(Boolean).join(' '))
+</script>
+
+<template>
+  <nav :class="classes" aria-label="Main navigation">
+    <div class="strand-nav__inner">
+      <div v-if="$slots.logo" class="strand-nav__logo">
+        <slot name="logo" />
+      </div>
+
+      <div class="strand-nav__items">
+        <a
+          v-for="item in items"
+          :key="item.href"
+          :href="item.href"
+          :class="[
+            'strand-nav__link',
+            item.active && 'strand-nav__link--active',
+          ].filter(Boolean).join(' ')"
+          :aria-current="item.active ? 'page' : undefined"
+        >
+          {{ item.label }}
+        </a>
+      </div>
+
+      <div v-if="$slots.actions" class="strand-nav__actions">
+        <slot name="actions" />
+      </div>
+
+      <button
+        type="button"
+        class="strand-nav__hamburger"
+        :aria-expanded="menuOpen ? 'true' : 'false'"
+        :aria-label="menuOpen ? 'Close menu' : 'Menu'"
+        @click="toggleMenu"
+      >
+        <span class="strand-nav__hamburger-icon" aria-hidden="true" />
+      </button>
+    </div>
+
+    <div v-if="menuOpen" class="strand-nav__mobile-menu">
+      <a
+        v-for="item in items"
+        :key="item.href"
+        :href="item.href"
+        :class="[
+          'strand-nav__mobile-link',
+          item.active && 'strand-nav__mobile-link--active',
+        ].filter(Boolean).join(' ')"
+        :aria-current="item.active ? 'page' : undefined"
+      >
+        {{ item.label }}
+      </a>
+    </div>
+  </nav>
+</template>

package/src/components/Nav/index.ts

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