@dillingerstaffing/strand-vue 0.4.0

package/src/components/Badge/Badge.test.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Badge from './Badge.vue'
+
+describe('Badge', () => {
+  // ── Rendering ──
+
+  it('renders a span element', () => {
+    const { container } = render(Badge, { props: { count: 5 } })
+    expect(container.firstElementChild?.tagName).toBe('SPAN')
+  })
+
+  // ── Count variant ──
+
+  it('displays count number', () => {
+    const { getByRole } = render(Badge, { props: { count: 7 } })
+    expect(getByRole('status')).toHaveTextContent('7')
+  })
+
+  it('truncates count at maxCount', () => {
+    const { getByRole } = render(Badge, { props: { count: 150, maxCount: 99 } })
+    expect(getByRole('status')).toHaveTextContent('99+')
+  })
+
+  it('does not truncate count at maxCount boundary', () => {
+    const { getByRole } = render(Badge, { props: { count: 99, maxCount: 99 } })
+    expect(getByRole('status')).toHaveTextContent('99')
+  })
+
+  it('supports custom maxCount', () => {
+    const { getByRole } = render(Badge, { props: { count: 15, maxCount: 9 } })
+    expect(getByRole('status')).toHaveTextContent('9+')
+  })
+
+  // ── Dot variant ──
+
+  it('renders dot variant as small circle', () => {
+    const { container } = render(Badge, { props: { variant: 'dot' } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator?.className).toContain('strand-badge--dot')
+  })
+
+  // ── Status colors ──
+
+  it('applies default status class by default', () => {
+    const { container } = render(Badge, { props: { count: 1 } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator?.className).toContain('strand-badge--default')
+  })
+
+  it('applies teal status class', () => {
+    const { container } = render(Badge, { props: { count: 1, status: 'teal' } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator?.className).toContain('strand-badge--teal')
+  })
+
+  it('applies red status class', () => {
+    const { container } = render(Badge, { props: { count: 1, status: 'red' } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator?.className).toContain('strand-badge--red')
+  })
+
+  it('applies amber status class', () => {
+    const { container } = render(Badge, { props: { count: 1, status: 'amber' } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator?.className).toContain('strand-badge--amber')
+  })
+
+  it('applies blue status class', () => {
+    const { container } = render(Badge, { props: { count: 1, status: 'blue' } })
+    const indicator = container.querySelector('.strand-badge__indicator')
+    expect(indicator?.className).toContain('strand-badge--blue')
+  })
+
+  // ── Children wrapping ──
+
+  it('wraps children and positions badge', () => {
+    const { getByText, container } = render(Badge, {
+      props: { count: 3 },
+      slots: { default: '<span>Inbox</span>' },
+    })
+    expect(getByText('Inbox')).toBeTruthy()
+    const wrapper = container.firstElementChild
+    expect(wrapper?.className).toContain('strand-badge')
+    expect(wrapper?.className).not.toContain('strand-badge--inline')
+  })
+
+  it('renders inline without children', () => {
+    const { container } = render(Badge, { props: { count: 5 } })
+    const wrapper = container.firstElementChild
+    expect(wrapper?.className).toContain('strand-badge--inline')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className', () => {
+    const { container } = render(Badge, { props: { count: 1, className: 'custom' } })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-badge')
+    expect(el?.className).toContain('custom')
+  })
+
+  // ── Accessibility ──
+
+  it('has aria-label for count variant', () => {
+    const { getByRole } = render(Badge, { props: { count: 5 } })
+    expect(getByRole('status')).toHaveAttribute('aria-label', '5 notifications')
+  })
+
+  it('has aria-label for dot variant', () => {
+    const { getByRole } = render(Badge, { props: { variant: 'dot' } })
+    expect(getByRole('status')).toHaveAttribute('aria-label', 'Status indicator')
+  })
+})

package/src/components/Badge/Badge.vue

@@ -0,0 +1,66 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+interface Props {
+  /** Badge display mode */
+  variant?: 'dot' | 'count'
+  /** Color status */
+  status?: 'default' | 'teal' | 'blue' | 'amber' | 'red'
+  /** Number to display (count variant only) */
+  count?: number
+  /** Maximum count before showing "N+" */
+  maxCount?: number
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'count',
+  status: 'default',
+  maxCount: 99,
+  className: '',
+})
+
+const slots = useSlots()
+
+const hasChildren = computed(() => !!slots.default)
+
+const displayValue = computed(() => {
+  if (props.variant === 'count') {
+    return props.count != null && props.count > props.maxCount
+      ? `${props.maxCount}+`
+      : props.count
+  }
+  return null
+})
+
+const ariaLabel = computed(() => {
+  if (props.variant === 'dot') return 'Status indicator'
+  if (props.count != null) return `${props.count} notifications`
+  return undefined
+})
+
+const badgeClasses = computed(() =>
+  [
+    'strand-badge__indicator',
+    `strand-badge--${props.variant}`,
+    `strand-badge--${props.status}`,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+const wrapperClasses = computed(() =>
+  hasChildren.value
+    ? ['strand-badge', props.className].filter(Boolean).join(' ')
+    : ['strand-badge', 'strand-badge--inline', props.className].filter(Boolean).join(' '),
+)
+</script>
+
+<template>
+  <span :class="wrapperClasses" v-bind="$attrs">
+    <slot />
+    <span :class="badgeClasses" :aria-label="ariaLabel" role="status">{{ displayValue }}</span>
+  </span>
+</template>

package/src/components/Badge/index.ts

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

package/src/components/Breadcrumb/Breadcrumb.test.ts

@@ -0,0 +1,119 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Breadcrumb from './Breadcrumb.vue'
+
+const defaultItems = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Widget' },
+]
+
+describe('Breadcrumb', () => {
+  it('renders nav with aria-label', () => {
+    const { container } = render(Breadcrumb, {
+      props: { items: defaultItems },
+    })
+    const nav = container.querySelector('nav')
+    expect(nav).toBeInTheDocument()
+    expect(nav).toHaveAttribute('aria-label', 'Breadcrumb')
+    expect(nav).toHaveClass('strand-breadcrumb')
+  })
+
+  it('renders ordered list', () => {
+    const { container } = render(Breadcrumb, {
+      props: { items: defaultItems },
+    })
+    const ol = container.querySelector('.strand-breadcrumb__list')
+    expect(ol).toBeInTheDocument()
+    expect(ol?.tagName).toBe('OL')
+  })
+
+  it('renders correct number of items', () => {
+    const { container } = render(Breadcrumb, {
+      props: { items: defaultItems },
+    })
+    const items = container.querySelectorAll('.strand-breadcrumb__item')
+    expect(items).toHaveLength(3)
+  })
+
+  it('renders links for non-last items', () => {
+    const { container } = render(Breadcrumb, {
+      props: { items: defaultItems },
+    })
+    const links = container.querySelectorAll('.strand-breadcrumb__link')
+    expect(links).toHaveLength(2)
+    expect(links[0]).toHaveAttribute('href', '/')
+    expect(links[0]).toHaveTextContent('Home')
+    expect(links[1]).toHaveAttribute('href', '/products')
+    expect(links[1]).toHaveTextContent('Products')
+  })
+
+  it('renders last item as current page with aria-current', () => {
+    const { container } = render(Breadcrumb, {
+      props: { items: defaultItems },
+    })
+    const current = container.querySelector('.strand-breadcrumb__current')
+    expect(current).toBeInTheDocument()
+    expect(current).toHaveAttribute('aria-current', 'page')
+    expect(current).toHaveTextContent('Widget')
+  })
+
+  it('renders separators between items with aria-hidden', () => {
+    const { container } = render(Breadcrumb, {
+      props: { items: defaultItems },
+    })
+    const separators = container.querySelectorAll('.strand-breadcrumb__separator')
+    expect(separators).toHaveLength(2)
+    expect(separators[0]).toHaveAttribute('aria-hidden', 'true')
+    expect(separators[0]).toHaveTextContent('/')
+    expect(separators[1]).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('does not render separator before first item', () => {
+    const { container } = render(Breadcrumb, {
+      props: { items: defaultItems },
+    })
+    const firstItem = container.querySelector('.strand-breadcrumb__item')
+    expect(firstItem?.querySelector('.strand-breadcrumb__separator')).not.toBeInTheDocument()
+  })
+
+  it('uses custom separator', () => {
+    const { container } = render(Breadcrumb, {
+      props: { items: defaultItems, separator: '>' },
+    })
+    const separators = container.querySelectorAll('.strand-breadcrumb__separator')
+    expect(separators[0]).toHaveTextContent('>')
+  })
+
+  it('handles single item', () => {
+    const { container } = render(Breadcrumb, {
+      props: { items: [{ label: 'Home' }] },
+    })
+    const items = container.querySelectorAll('.strand-breadcrumb__item')
+    expect(items).toHaveLength(1)
+    const current = container.querySelector('.strand-breadcrumb__current')
+    expect(current).toHaveAttribute('aria-current', 'page')
+    expect(container.querySelector('.strand-breadcrumb__separator')).not.toBeInTheDocument()
+    expect(container.querySelector('.strand-breadcrumb__link')).not.toBeInTheDocument()
+  })
+
+  it('handles two items', () => {
+    const { container } = render(Breadcrumb, {
+      props: {
+        items: [
+          { label: 'Home', href: '/' },
+          { label: 'About' },
+        ],
+      },
+    })
+    const links = container.querySelectorAll('.strand-breadcrumb__link')
+    expect(links).toHaveLength(1)
+    expect(links[0]).toHaveTextContent('Home')
+    const current = container.querySelector('.strand-breadcrumb__current')
+    expect(current).toHaveTextContent('About')
+    const separators = container.querySelectorAll('.strand-breadcrumb__separator')
+    expect(separators).toHaveLength(1)
+  })
+})

package/src/components/Breadcrumb/Breadcrumb.vue

@@ -0,0 +1,58 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+export interface BreadcrumbProps {
+  /** Breadcrumb path items; last item is treated as current page */
+  items: BreadcrumbItem[]
+  /** Separator character between items */
+  separator?: string
+}
+
+const props = withDefaults(defineProps<BreadcrumbProps>(), {
+  separator: '/',
+})
+
+const classes = computed(() =>
+  ['strand-breadcrumb'].filter(Boolean).join(' '),
+)
+</script>
+
+<template>
+  <nav aria-label="Breadcrumb" :class="classes">
+    <ol class="strand-breadcrumb__list">
+      <li
+        v-for="(item, index) in items"
+        :key="`${item.label}-${index}`"
+        class="strand-breadcrumb__item"
+      >
+        <span
+          v-if="index > 0"
+          class="strand-breadcrumb__separator"
+          aria-hidden="true"
+        >
+          {{ separator }}
+        </span>
+        <span
+          v-if="index === items.length - 1"
+          class="strand-breadcrumb__current"
+          aria-current="page"
+        >
+          {{ item.label }}
+        </span>
+        <a
+          v-else
+          :href="item.href"
+          class="strand-breadcrumb__link"
+        >
+          {{ item.label }}
+        </a>
+      </li>
+    </ol>
+  </nav>
+</template>

package/src/components/Breadcrumb/index.ts

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

package/src/components/Button/Button.test.ts

@@ -0,0 +1,148 @@
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+
+import { describe, it, expect } from 'vitest'
+import { render, fireEvent } from '@testing-library/vue'
+import Button from './Button.vue'
+
+describe('Button', () => {
+  it('renders with default props', () => {
+    const { getByRole } = render(Button, {
+      slots: { default: 'Click me' },
+    })
+    const btn = getByRole('button')
+    expect(btn).toBeInTheDocument()
+    expect(btn).toHaveClass('strand-btn', 'strand-btn--primary', 'strand-btn--md')
+    expect(btn).toHaveAttribute('type', 'button')
+    expect(btn).not.toBeDisabled()
+    expect(btn).toHaveTextContent('Click me')
+  })
+
+  it('applies variant classes', () => {
+    const variants = ['primary', 'secondary', 'ghost', 'danger'] as const
+    for (const variant of variants) {
+      const { container, unmount } = render(Button, {
+        props: { variant },
+        slots: { default: 'Btn' },
+      })
+      expect(container.querySelector('.strand-btn')).toHaveClass(`strand-btn--${variant}`)
+      unmount()
+    }
+  })
+
+  it('applies size classes', () => {
+    const sizes = ['sm', 'md', 'lg'] as const
+    for (const size of sizes) {
+      const { container, unmount } = render(Button, {
+        props: { size },
+        slots: { default: 'Btn' },
+      })
+      expect(container.querySelector('.strand-btn')).toHaveClass(`strand-btn--${size}`)
+      unmount()
+    }
+  })
+
+  it('emits click event when clicked', async () => {
+    const { getByRole, emitted } = render(Button, {
+      slots: { default: 'Click me' },
+    })
+    await fireEvent.click(getByRole('button'))
+    expect(emitted().click).toHaveLength(1)
+  })
+
+  it('does not emit click when disabled', async () => {
+    const { getByRole, emitted } = render(Button, {
+      props: { disabled: true },
+      slots: { default: 'Click me' },
+    })
+    await fireEvent.click(getByRole('button'))
+    expect(emitted().click).toBeUndefined()
+  })
+
+  it('sets disabled and aria-disabled when disabled', () => {
+    const { getByRole } = render(Button, {
+      props: { disabled: true },
+      slots: { default: 'Btn' },
+    })
+    const btn = getByRole('button')
+    expect(btn).toBeDisabled()
+    expect(btn).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('shows loading state with spinner and aria-busy', () => {
+    const { getByRole, container } = render(Button, {
+      props: { loading: true },
+      slots: { default: 'Loading' },
+    })
+    const btn = getByRole('button')
+    expect(btn).toHaveClass('strand-btn--loading')
+    expect(btn).toHaveAttribute('aria-busy', 'true')
+    expect(btn).toBeDisabled()
+    expect(btn).toHaveAttribute('aria-disabled', 'true')
+    const spinner = container.querySelector('.strand-btn__spinner')
+    expect(spinner).toBeInTheDocument()
+    expect(spinner).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('hides content visibility when loading', () => {
+    const { container } = render(Button, {
+      props: { loading: true },
+      slots: { default: 'Loading' },
+    })
+    const content = container.querySelector('.strand-btn__content')
+    expect(content).toHaveStyle({ visibility: 'hidden' })
+  })
+
+  it('does not emit click when loading', async () => {
+    const { getByRole, emitted } = render(Button, {
+      props: { loading: true },
+      slots: { default: 'Click me' },
+    })
+    await fireEvent.click(getByRole('button'))
+    expect(emitted().click).toBeUndefined()
+  })
+
+  it('applies iconOnly class', () => {
+    const { getByRole } = render(Button, {
+      props: { iconOnly: true },
+      slots: { default: 'X' },
+    })
+    expect(getByRole('button')).toHaveClass('strand-btn--icon-only')
+  })
+
+  it('applies fullWidth class', () => {
+    const { getByRole } = render(Button, {
+      props: { fullWidth: true },
+      slots: { default: 'Full' },
+    })
+    expect(getByRole('button')).toHaveClass('strand-btn--full-width')
+  })
+
+  it('passes type attribute', () => {
+    const { getByRole } = render(Button, {
+      props: { type: 'submit' },
+      slots: { default: 'Submit' },
+    })
+    expect(getByRole('button')).toHaveAttribute('type', 'submit')
+  })
+
+  it('does not set aria-disabled when not disabled', () => {
+    const { getByRole } = render(Button, {
+      slots: { default: 'Btn' },
+    })
+    expect(getByRole('button')).not.toHaveAttribute('aria-disabled')
+  })
+
+  it('does not set aria-busy when not loading', () => {
+    const { getByRole } = render(Button, {
+      slots: { default: 'Btn' },
+    })
+    expect(getByRole('button')).not.toHaveAttribute('aria-busy')
+  })
+
+  it('does not show spinner when not loading', () => {
+    const { container } = render(Button, {
+      slots: { default: 'Btn' },
+    })
+    expect(container.querySelector('.strand-btn__spinner')).not.toBeInTheDocument()
+  })
+})

package/src/components/Button/Button.vue

@@ -0,0 +1,75 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface ButtonProps {
+  /** Visual style variant */
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger'
+  /** Button size */
+  size?: 'sm' | 'md' | 'lg'
+  /** Show loading spinner and disable interaction */
+  loading?: boolean
+  /** Square button for icon-only use */
+  iconOnly?: boolean
+  /** HTML button type */
+  type?: 'button' | 'submit' | 'reset'
+  /** Disabled state */
+  disabled?: boolean
+  /** Stretch to full container width */
+  fullWidth?: boolean
+}
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  variant: 'primary',
+  size: 'md',
+  loading: false,
+  iconOnly: false,
+  type: 'button',
+  disabled: false,
+  fullWidth: false,
+})
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+const isDisabled = computed(() => props.disabled || props.loading)
+
+const classes = computed(() =>
+  [
+    'strand-btn',
+    `strand-btn--${props.variant}`,
+    `strand-btn--${props.size}`,
+    props.iconOnly && 'strand-btn--icon-only',
+    props.fullWidth && 'strand-btn--full-width',
+    props.loading && 'strand-btn--loading',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+function handleClick(event: MouseEvent) {
+  if (!isDisabled.value) {
+    emit('click', event)
+  }
+}
+</script>
+
+<template>
+  <button
+    :type="type"
+    :class="classes"
+    :disabled="isDisabled"
+    :aria-disabled="isDisabled ? 'true' : undefined"
+    :aria-busy="loading ? 'true' : undefined"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="strand-btn__spinner" aria-hidden="true" />
+    <span
+      class="strand-btn__content"
+      :style="loading ? { visibility: 'hidden' } : undefined"
+    >
+      <slot />
+    </span>
+  </button>
+</template>

package/src/components/Button/index.ts

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

package/src/components/Card/Card.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/vue'
+import Card from './Card.vue'
+
+describe('Card', () => {
+  // ── Rendering ──
+
+  it('renders a div element', () => {
+    const { container } = render(Card, { slots: { default: 'Content' } })
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const { getByText } = render(Card, { slots: { default: 'Hello world' } })
+    expect(getByText('Hello world')).toBeTruthy()
+  })
+
+  // ── Variants ──
+
+  it('applies elevated variant class by default', () => {
+    const { container } = render(Card, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).toContain('strand-card--elevated')
+  })
+
+  it('applies outlined variant class', () => {
+    const { container } = render(Card, {
+      props: { variant: 'outlined' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-card--outlined')
+  })
+
+  it('applies interactive variant class', () => {
+    const { container } = render(Card, {
+      props: { variant: 'interactive' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-card--interactive')
+  })
+
+  // ── Padding ──
+
+  it('applies md padding class by default', () => {
+    const { container } = render(Card, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).toContain('strand-card--pad-md')
+  })
+
+  it('applies none padding class', () => {
+    const { container } = render(Card, {
+      props: { padding: 'none' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-card--pad-none')
+  })
+
+  it('applies sm padding class', () => {
+    const { container } = render(Card, {
+      props: { padding: 'sm' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-card--pad-sm')
+  })
+
+  it('applies lg padding class', () => {
+    const { container } = render(Card, {
+      props: { padding: 'lg' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.className).toContain('strand-card--pad-lg')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className with component classes', () => {
+    const { container } = render(Card, {
+      props: { className: 'custom' },
+      slots: { default: 'Test' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-card')
+    expect(el?.className).toContain('custom')
+  })
+
+  // ── Props forwarding ──
+
+  it('forwards additional attributes', () => {
+    const { container } = render(Card, {
+      attrs: { id: 'card-1', 'data-testid': 'my-card' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.getAttribute('id')).toBe('card-1')
+  })
+})