@sabrenski/spire-ui 0.0.1

package/src/components/Toast/ToastItem.test.ts

@@ -0,0 +1,289 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ToastItem from './ToastItem.vue'
+import type { Toast } from './toastState'
+
+function createToast(overrides: Partial<Toast> = {}): Toast {
+  return {
+    id: 'test-id',
+    title: 'Test Title',
+    message: 'Test message',
+    variant: 'success',
+    duration: 5000,
+    createdAt: Date.now(),
+    ...overrides
+  }
+}
+
+describe('ToastItem', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  describe('Rendering', () => {
+    it('renders toast container', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast() }
+      })
+      expect(wrapper.find('.ui-toast').exists()).toBe(true)
+    })
+
+    it('renders title', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ title: 'My Title' }) }
+      })
+      expect(wrapper.find('.ui-toast__title').text()).toBe('My Title')
+    })
+
+    it('renders message', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ message: 'My message' }) }
+      })
+      expect(wrapper.find('.ui-toast__message').text()).toBe('My message')
+    })
+
+    it('does not render title if not provided', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ title: undefined }) }
+      })
+      expect(wrapper.find('.ui-toast__title').exists()).toBe(false)
+    })
+
+    it('does not render message if not provided', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ message: undefined }) }
+      })
+      expect(wrapper.find('.ui-toast__message').exists()).toBe(false)
+    })
+
+    it('renders icon', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast() }
+      })
+      expect(wrapper.find('.ui-toast__icon svg').exists()).toBe(true)
+    })
+
+    it('renders close button', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast() }
+      })
+      expect(wrapper.find('.ui-toast__close').exists()).toBe(true)
+    })
+
+    it('renders progress bar when duration > 0', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ duration: 5000 }) }
+      })
+      expect(wrapper.find('.ui-toast__progress').exists()).toBe(true)
+    })
+
+    it('does not render progress bar when duration is 0', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ duration: 0 }) }
+      })
+      expect(wrapper.find('.ui-toast__progress').exists()).toBe(false)
+    })
+  })
+
+  describe('Variants', () => {
+    it('applies success variant class', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ variant: 'success' }) }
+      })
+      expect(wrapper.find('.ui-toast').classes()).toContain('ui-toast--success')
+    })
+
+    it('applies error variant class', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ variant: 'error' }) }
+      })
+      expect(wrapper.find('.ui-toast').classes()).toContain('ui-toast--error')
+    })
+
+    it('applies warning variant class', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ variant: 'warning' }) }
+      })
+      expect(wrapper.find('.ui-toast').classes()).toContain('ui-toast--warning')
+    })
+
+    it('applies info variant class', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ variant: 'info' }) }
+      })
+      expect(wrapper.find('.ui-toast').classes()).toContain('ui-toast--info')
+    })
+  })
+
+  describe('Auto-dismiss', () => {
+    it('emits dismiss after duration', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ duration: 5000 }) }
+      })
+
+      expect(wrapper.emitted('dismiss')).toBeUndefined()
+
+      vi.advanceTimersByTime(5000)
+
+      expect(wrapper.emitted('dismiss')).toHaveLength(1)
+      expect(wrapper.emitted('dismiss')?.[0]).toEqual(['test-id'])
+    })
+
+    it('does not auto-dismiss when duration is 0', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ duration: 0 }) }
+      })
+
+      vi.advanceTimersByTime(10000)
+
+      expect(wrapper.emitted('dismiss')).toBeUndefined()
+    })
+  })
+
+  describe('Close button', () => {
+    it('emits dismiss when close button clicked', async () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast() }
+      })
+
+      await wrapper.find('.ui-toast__close').trigger('click')
+
+      expect(wrapper.emitted('dismiss')).toHaveLength(1)
+      expect(wrapper.emitted('dismiss')?.[0]).toEqual(['test-id'])
+    })
+  })
+
+  describe('Pause on hover', () => {
+    it('pauses timer on mouseenter', async () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ duration: 5000 }) }
+      })
+
+      // Advance 2 seconds
+      vi.advanceTimersByTime(2000)
+
+      // Hover - pause the timer
+      await wrapper.find('.ui-toast').trigger('mouseenter')
+
+      // Advance past original duration
+      vi.advanceTimersByTime(10000)
+
+      // Should NOT have dismissed
+      expect(wrapper.emitted('dismiss')).toBeUndefined()
+    })
+
+    it('resumes timer on mouseleave', async () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ duration: 5000 }) }
+      })
+
+      // Advance 2 seconds (3 seconds remaining)
+      vi.advanceTimersByTime(2000)
+
+      // Hover
+      await wrapper.find('.ui-toast').trigger('mouseenter')
+
+      // Wait a bit while hovering
+      vi.advanceTimersByTime(5000)
+
+      // Leave - resume timer with remaining time
+      await wrapper.find('.ui-toast').trigger('mouseleave')
+
+      // Should not dismiss yet (need ~3 more seconds)
+      expect(wrapper.emitted('dismiss')).toBeUndefined()
+
+      // Now advance the remaining time
+      vi.advanceTimersByTime(3000)
+
+      expect(wrapper.emitted('dismiss')).toHaveLength(1)
+    })
+
+    it('adds paused class to progress bar on hover', async () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ duration: 5000 }) }
+      })
+
+      expect(wrapper.find('.ui-toast__progress').classes()).not.toContain('ui-toast__progress--paused')
+
+      await wrapper.find('.ui-toast').trigger('mouseenter')
+
+      expect(wrapper.find('.ui-toast__progress').classes()).toContain('ui-toast__progress--paused')
+
+      await wrapper.find('.ui-toast').trigger('mouseleave')
+
+      expect(wrapper.find('.ui-toast__progress').classes()).not.toContain('ui-toast__progress--paused')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="alert" for error variant', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ variant: 'error' }) }
+      })
+      expect(wrapper.find('.ui-toast').attributes('role')).toBe('alert')
+    })
+
+    it('has role="status" for success variant', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ variant: 'success' }) }
+      })
+      expect(wrapper.find('.ui-toast').attributes('role')).toBe('status')
+    })
+
+    it('has role="status" for info variant', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ variant: 'info' }) }
+      })
+      expect(wrapper.find('.ui-toast').attributes('role')).toBe('status')
+    })
+
+    it('has role="status" for warning variant', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ variant: 'warning' }) }
+      })
+      expect(wrapper.find('.ui-toast').attributes('role')).toBe('status')
+    })
+
+    it('has aria-live="assertive" for error variant', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ variant: 'error' }) }
+      })
+      expect(wrapper.find('.ui-toast').attributes('aria-live')).toBe('assertive')
+    })
+
+    it('has aria-live="polite" for success variant', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ variant: 'success' }) }
+      })
+      expect(wrapper.find('.ui-toast').attributes('aria-live')).toBe('polite')
+    })
+
+    it('close button has aria-label', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast() }
+      })
+      expect(wrapper.find('.ui-toast__close').attributes('aria-label')).toBe('Dismiss notification')
+    })
+
+    it('icon is aria-hidden', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast() }
+      })
+      expect(wrapper.find('.ui-toast__icon').attributes('aria-hidden')).toBe('true')
+    })
+  })
+
+  describe('Progress bar styling', () => {
+    it('sets duration CSS variable', () => {
+      const wrapper = mount(ToastItem, {
+        props: { toast: createToast({ duration: 3000 }) }
+      })
+      const progress = wrapper.find('.ui-toast__progress')
+      expect(progress.attributes('style')).toContain('--toast-duration: 3000ms')
+    })
+  })
+})

package/src/components/Toast/ToastItem.vue

@@ -0,0 +1,370 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import Avatar from '../Avatar/Avatar.vue'
+import type { Toast, ToastVariant } from './toastState'
+
+export interface ToastItemProps {
+  /** Toast data */
+  toast: Toast
+}
+
+const props = defineProps<ToastItemProps>()
+
+const emit = defineEmits<{
+  (e: 'dismiss', id: string): void
+}>()
+
+const isPaused = ref(false)
+const remainingTime = ref(props.toast.duration)
+let timerId: ReturnType<typeof setTimeout> | null = null
+let startTime = 0
+
+const isClickable = computed(() => !!props.toast.onClick)
+
+const hasAvatar = computed(() => !!props.toast.avatar)
+
+const ariaRole = computed(() => {
+  return props.toast.variant === 'error' ? 'alert' : 'status'
+})
+
+const ariaLive = computed(() => {
+  return props.toast.variant === 'error' ? 'assertive' : 'polite'
+})
+
+function startTimer() {
+  if (props.toast.duration <= 0) return
+  if (remainingTime.value <= 0) return
+
+  startTime = Date.now()
+  timerId = setTimeout(() => {
+    emit('dismiss', props.toast.id)
+  }, remainingTime.value)
+}
+
+function pauseTimer() {
+  if (timerId) {
+    clearTimeout(timerId)
+    timerId = null
+    const elapsed = Date.now() - startTime
+    remainingTime.value = Math.max(0, remainingTime.value - elapsed)
+  }
+}
+
+function handleMouseEnter() {
+  isPaused.value = true
+  pauseTimer()
+}
+
+function handleMouseLeave() {
+  isPaused.value = false
+  startTimer()
+}
+
+function handleClose(event: Event) {
+  event.stopPropagation()
+  emit('dismiss', props.toast.id)
+}
+
+function handleBodyClick() {
+  if (props.toast.onClick) {
+    props.toast.onClick()
+    emit('dismiss', props.toast.id)
+  }
+}
+
+function handleActionClick(event: Event) {
+  event.stopPropagation()
+  if (props.toast.action) {
+    props.toast.action.onClick()
+    emit('dismiss', props.toast.id)
+  }
+}
+
+onMounted(() => {
+  startTimer()
+})
+
+onUnmounted(() => {
+  if (timerId) {
+    clearTimeout(timerId)
+  }
+})
+
+const iconPaths: Record<ToastVariant, string> = {
+  success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+  error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z',
+  warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+  info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+}
+</script>
+
+<template>
+  <div
+    class="ui-toast"
+    :class="[
+      `ui-toast--${toast.variant}`,
+      { 'ui-toast--clickable': isClickable }
+    ]"
+    :role="ariaRole"
+    :aria-live="ariaLive"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @click="handleBodyClick"
+  >
+    <div v-if="hasAvatar" class="ui-toast__avatar">
+      <Avatar
+        :src="toast.avatar?.src"
+        :name="toast.avatar?.name"
+        size="sm"
+      />
+    </div>
+    <div v-else class="ui-toast__icon" aria-hidden="true">
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path :d="iconPaths[toast.variant]" />
+      </svg>
+    </div>
+
+    <div class="ui-toast__content">
+      <div v-if="toast.title" class="ui-toast__title">{{ toast.title }}</div>
+      <div v-if="toast.message" class="ui-toast__message">{{ toast.message }}</div>
+
+      <button
+        v-if="toast.action"
+        type="button"
+        class="ui-toast__action"
+        @click="handleActionClick"
+      >
+        {{ toast.action.label }}
+      </button>
+    </div>
+
+    <button
+      type="button"
+      class="ui-toast__close"
+      aria-label="Dismiss notification"
+      @click="handleClose"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+
+    <div
+      v-if="toast.duration > 0"
+      class="ui-toast__progress"
+      :class="{ 'ui-toast__progress--paused': isPaused }"
+      :style="{ '--toast-duration': `${toast.duration}ms` }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.ui-toast {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  max-width: 400px;
+  padding: var(--space-4);
+  background: var(--toast-bg);
+  border: 1px solid var(--toast-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+.ui-toast--clickable {
+  cursor: pointer;
+  transition: background-color var(--duration-fast) var(--ease-default);
+}
+
+.ui-toast--clickable:hover {
+  background: var(--toast-bg-hover, var(--color-stone-50));
+}
+
+.ui-toast__avatar {
+  flex-shrink: 0;
+}
+
+.ui-toast__icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 1px;
+}
+
+.ui-toast__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-toast__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.ui-toast__title {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--toast-title);
+  line-height: 1.4;
+}
+
+.ui-toast__message {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  color: var(--toast-message);
+  line-height: 1.4;
+  margin-top: var(--space-1);
+}
+
+.ui-toast__title + .ui-toast__message {
+  margin-top: var(--space-1);
+}
+
+.ui-toast__action {
+  display: inline-block;
+  margin-top: var(--space-2);
+  padding: 0;
+  background: none;
+  border: none;
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--toast-action);
+  cursor: pointer;
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-default);
+}
+
+.ui-toast__action:hover {
+  color: var(--toast-action-hover);
+  text-decoration: underline;
+}
+
+.ui-toast__action:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.ui-toast__close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  margin: -0.25rem -0.25rem -0.25rem 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--toast-close);
+  cursor: pointer;
+  transition:
+    background-color var(--duration-fast) var(--ease-default),
+    color var(--duration-fast) var(--ease-default);
+}
+
+.ui-toast__close:hover {
+  background: var(--toast-close-hover-bg);
+  color: var(--toast-close-hover);
+}
+
+.ui-toast__close:focus-visible {
+  outline: 2px solid var(--ring-color);
+  outline-offset: 2px;
+}
+
+.ui-toast__close svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.ui-toast__progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--toast-progress);
+  transform-origin: left;
+  animation: toast-progress var(--toast-duration) linear forwards;
+}
+
+.ui-toast__progress--paused {
+  animation-play-state: paused;
+}
+
+@keyframes toast-progress {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+.ui-toast--success {
+  --toast-icon: var(--toast-success-icon);
+  --toast-progress: var(--toast-success-progress);
+  --toast-action: var(--toast-success-icon);
+  --toast-action-hover: var(--color-teal-700);
+}
+
+.ui-toast--success .ui-toast__icon {
+  color: var(--toast-icon);
+}
+
+.ui-toast--error {
+  --toast-icon: var(--toast-error-icon);
+  --toast-progress: var(--toast-error-progress);
+  --toast-action: var(--toast-error-icon);
+  --toast-action-hover: var(--color-coral-700);
+}
+
+.ui-toast--error .ui-toast__icon {
+  color: var(--toast-icon);
+}
+
+.ui-toast--warning {
+  --toast-icon: var(--toast-warning-icon);
+  --toast-progress: var(--toast-warning-progress);
+  --toast-action: var(--toast-warning-icon);
+  --toast-action-hover: var(--color-amber-600);
+}
+
+.ui-toast--warning .ui-toast__icon {
+  color: var(--toast-icon);
+}
+
+.ui-toast--info {
+  --toast-icon: var(--toast-info-icon);
+  --toast-progress: var(--toast-info-progress);
+  --toast-action: var(--toast-info-icon);
+  --toast-action-hover: var(--color-indigo-700);
+}
+
+.ui-toast--info .ui-toast__icon {
+  color: var(--toast-icon);
+}
+</style>