@sabrenski/spire-ui 0.0.1

package/src/components/Timeline/Timeline.test.ts

@@ -0,0 +1,193 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
+import Timeline from './Timeline.vue'
+import TimelineItem from './TimelineItem.vue'
+
+function createTimeline(props: Record<string, unknown> = {}) {
+  return mount(Timeline, {
+    props,
+    slots: {
+      default: () => [
+        h(TimelineItem, { dotColor: 'success' }, {
+          default: () => h('div', 'Event 1')
+        }),
+        h(TimelineItem, { dotColor: 'primary' }, {
+          default: () => h('div', 'Event 2')
+        }),
+        h(TimelineItem, { dotColor: 'warning' }, {
+          default: () => h('div', 'Event 3')
+        })
+      ]
+    }
+  })
+}
+
+describe('Timeline', () => {
+  describe('Rendering', () => {
+    it('renders all timeline items', async () => {
+      const wrapper = createTimeline()
+      await nextTick()
+      expect(wrapper.findAll('.ui-timeline__item')).toHaveLength(3)
+    })
+
+    it('renders dots for each item', async () => {
+      const wrapper = createTimeline()
+      await nextTick()
+      expect(wrapper.findAll('.ui-timeline__dot')).toHaveLength(3)
+    })
+
+    it('renders content for each item', async () => {
+      const wrapper = createTimeline()
+      await nextTick()
+      const contents = wrapper.findAll('.ui-timeline__content')
+      expect(contents[0].text()).toBe('Event 1')
+      expect(contents[1].text()).toBe('Event 2')
+      expect(contents[2].text()).toBe('Event 3')
+    })
+  })
+
+  describe('Alignment', () => {
+    it('applies left alignment by default', () => {
+      const wrapper = createTimeline()
+      expect(wrapper.find('.ui-timeline').classes()).toContain('ui-timeline--left')
+    })
+
+    it('applies right alignment when set', () => {
+      const wrapper = createTimeline({ align: 'right' })
+      expect(wrapper.find('.ui-timeline').classes()).toContain('ui-timeline--right')
+    })
+
+    it('applies alternate alignment when set', () => {
+      const wrapper = createTimeline({ align: 'alternate' })
+      expect(wrapper.find('.ui-timeline').classes()).toContain('ui-timeline--alternate')
+    })
+  })
+
+  describe('Line styles', () => {
+    it('applies solid line style by default', () => {
+      const wrapper = createTimeline()
+      expect(wrapper.find('.ui-timeline').classes()).toContain('ui-timeline--line-solid')
+    })
+
+    it('applies dashed line style when set', () => {
+      const wrapper = createTimeline({ lineStyle: 'dashed' })
+      expect(wrapper.find('.ui-timeline').classes()).toContain('ui-timeline--line-dashed')
+    })
+
+    it('applies dotted line style when set', () => {
+      const wrapper = createTimeline({ lineStyle: 'dotted' })
+      expect(wrapper.find('.ui-timeline').classes()).toContain('ui-timeline--line-dotted')
+    })
+  })
+
+  describe('Dot colors', () => {
+    it('applies dot color classes', async () => {
+      const wrapper = createTimeline()
+      await nextTick()
+      const dots = wrapper.findAll('.ui-timeline__dot')
+      expect(dots[0].classes()).toContain('ui-timeline__dot--success')
+      expect(dots[1].classes()).toContain('ui-timeline__dot--primary')
+      expect(dots[2].classes()).toContain('ui-timeline__dot--warning')
+    })
+
+    it('supports all dot color variants', async () => {
+      const wrapper = mount(Timeline, {
+        slots: {
+          default: () => [
+            h(TimelineItem, { dotColor: 'primary' }),
+            h(TimelineItem, { dotColor: 'success' }),
+            h(TimelineItem, { dotColor: 'warning' }),
+            h(TimelineItem, { dotColor: 'danger' }),
+            h(TimelineItem, { dotColor: 'neutral' })
+          ]
+        }
+      })
+      await nextTick()
+      const dots = wrapper.findAll('.ui-timeline__dot')
+      expect(dots[0].classes()).toContain('ui-timeline__dot--primary')
+      expect(dots[1].classes()).toContain('ui-timeline__dot--success')
+      expect(dots[2].classes()).toContain('ui-timeline__dot--warning')
+      expect(dots[3].classes()).toContain('ui-timeline__dot--danger')
+      expect(dots[4].classes()).toContain('ui-timeline__dot--neutral')
+    })
+  })
+
+  describe('First and last items', () => {
+    it('marks first item with class', async () => {
+      const wrapper = createTimeline()
+      await nextTick()
+      const items = wrapper.findAll('.ui-timeline__item')
+      expect(items[0].classes()).toContain('ui-timeline__item--first')
+    })
+
+    it('marks last item with class', async () => {
+      const wrapper = createTimeline()
+      await nextTick()
+      const items = wrapper.findAll('.ui-timeline__item')
+      expect(items[2].classes()).toContain('ui-timeline__item--last')
+    })
+  })
+
+  describe('Alternate mode positioning', () => {
+    it('alternates item positions', async () => {
+      const wrapper = createTimeline({ align: 'alternate' })
+      await nextTick()
+      const items = wrapper.findAll('.ui-timeline__item')
+      expect(items[0].classes()).toContain('ui-timeline__item--position-left')
+      expect(items[1].classes()).toContain('ui-timeline__item--position-right')
+      expect(items[2].classes()).toContain('ui-timeline__item--position-left')
+    })
+
+    it('renders opposite slot in alternate mode', async () => {
+      const wrapper = mount(Timeline, {
+        props: { align: 'alternate' },
+        slots: {
+          default: () => [
+            h(TimelineItem, null, {
+              default: () => h('div', 'Main content'),
+              opposite: () => h('div', { class: 'opposite-content' }, 'Opposite content')
+            })
+          ]
+        }
+      })
+      await nextTick()
+      expect(wrapper.find('.ui-timeline__opposite').exists()).toBe(true)
+      expect(wrapper.find('.opposite-content').text()).toBe('Opposite content')
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('has role="list" on root', () => {
+      const wrapper = createTimeline()
+      expect(wrapper.find('.ui-timeline').attributes('role')).toBe('list')
+    })
+
+    it('items have role="listitem"', async () => {
+      const wrapper = createTimeline()
+      await nextTick()
+      const items = wrapper.findAll('.ui-timeline__item')
+      items.forEach(item => {
+        expect(item.attributes('role')).toBe('listitem')
+      })
+    })
+  })
+
+  describe('Custom dot slot', () => {
+    it('renders custom dot content', async () => {
+      const wrapper = mount(Timeline, {
+        slots: {
+          default: () => [
+            h(TimelineItem, null, {
+              default: () => h('div', 'Content'),
+              dot: () => h('span', { class: 'custom-dot' }, '★')
+            })
+          ]
+        }
+      })
+      await nextTick()
+      expect(wrapper.find('.custom-dot').exists()).toBe(true)
+      expect(wrapper.find('.custom-dot').text()).toBe('★')
+    })
+  })
+})

package/src/components/Timeline/Timeline.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { provide, toRef, ref, computed, onBeforeUpdate } from 'vue'
+import { TimelineKey } from './keys'
+import type { TimelineAlign, TimelineLineStyle } from './keys'
+
+export interface TimelineProps {
+  /** Content alignment relative to the spine */
+  align?: TimelineAlign
+  /** Connector line style */
+  lineStyle?: TimelineLineStyle
+}
+
+const props = withDefaults(defineProps<TimelineProps>(), {
+  align: 'left',
+  lineStyle: 'solid'
+})
+
+const itemCount = ref(0)
+let registrationIndex = 0
+
+onBeforeUpdate(() => {
+  registrationIndex = 0
+})
+
+function registerItem(): number {
+  const index = registrationIndex++
+  itemCount.value = Math.max(itemCount.value, index + 1)
+  return index
+}
+
+provide(TimelineKey, {
+  align: toRef(props, 'align'),
+  lineStyle: toRef(props, 'lineStyle'),
+  registerItem,
+  itemCount
+})
+
+const timelineClasses = computed(() => [
+  'ui-timeline',
+  `ui-timeline--${props.align}`,
+  `ui-timeline--line-${props.lineStyle}`
+])
+</script>
+
+<template>
+  <div :class="timelineClasses" role="list">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.ui-timeline {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.ui-timeline--left {
+  padding-left: var(--space-8);
+}
+
+.ui-timeline--right {
+  padding-right: var(--space-8);
+}
+
+.ui-timeline--alternate {
+  padding-left: 50%;
+}
+
+.ui-timeline::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--border-default);
+}
+
+.ui-timeline--left::before {
+  left: 0.75rem;
+}
+
+.ui-timeline--right::before {
+  right: 0.75rem;
+}
+
+.ui-timeline--alternate::before {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.ui-timeline--line-dashed::before {
+  background: repeating-linear-gradient(
+    to bottom,
+    var(--border-default) 0,
+    var(--border-default) 4px,
+    transparent 4px,
+    transparent 8px
+  );
+}
+
+.ui-timeline--line-dotted::before {
+  background: repeating-linear-gradient(
+    to bottom,
+    var(--border-default) 0,
+    var(--border-default) 2px,
+    transparent 2px,
+    transparent 6px
+  );
+}
+</style>

package/src/components/Timeline/TimelineItem.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, inject, onMounted, ref, type Component } from 'vue'
+import { TimelineKey } from './keys'
+import type { TimelineDotColor } from './keys'
+
+export interface TimelineItemProps {
+  /** Dot color variant */
+  dotColor?: TimelineDotColor
+  /** Custom icon in dot */
+  dotIcon?: Component
+}
+
+const props = withDefaults(defineProps<TimelineItemProps>(), {
+  dotColor: 'primary'
+})
+
+const timeline = inject(TimelineKey)
+
+if (!timeline) {
+  throw new Error('TimelineItem must be used within Timeline')
+}
+
+const itemIndex = ref(-1)
+
+onMounted(() => {
+  itemIndex.value = timeline.registerItem()
+})
+
+const isFirst = computed(() => itemIndex.value === 0)
+const isLast = computed(() => itemIndex.value === timeline.itemCount.value - 1)
+
+const position = computed(() => {
+  if (timeline.align.value === 'alternate') {
+    return itemIndex.value % 2 === 0 ? 'left' : 'right'
+  }
+  return timeline.align.value
+})
+
+const itemClasses = computed(() => [
+  'ui-timeline__item',
+  `ui-timeline__item--${timeline.align.value}`,
+  `ui-timeline__item--position-${position.value}`,
+  {
+    'ui-timeline__item--first': isFirst.value,
+    'ui-timeline__item--last': isLast.value
+  }
+])
+
+const dotClasses = computed(() => [
+  'ui-timeline__dot',
+  `ui-timeline__dot--${props.dotColor}`
+])
+</script>
+
+<template>
+  <div :class="itemClasses" role="listitem">
+    <div :class="dotClasses">
+      <slot name="dot">
+        <component v-if="dotIcon" :is="dotIcon" class="ui-timeline__dot-icon" />
+      </slot>
+    </div>
+    <div class="ui-timeline__content">
+      <slot />
+    </div>
+    <div v-if="timeline.align.value === 'alternate'" class="ui-timeline__opposite">
+      <slot name="opposite" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-timeline__item {
+  position: relative;
+  display: flex;
+  padding-bottom: var(--space-6);
+}
+
+.ui-timeline__item--last {
+  padding-bottom: 0;
+}
+
+.ui-timeline__dot {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--radius-full);
+  background: var(--bg-primary);
+  border: 2px solid currentColor;
+  z-index: 1;
+}
+
+.ui-timeline__item--left .ui-timeline__dot {
+  left: calc(-1 * var(--space-8) + 0.75rem - 0.75rem);
+}
+
+.ui-timeline__item--right .ui-timeline__dot {
+  right: calc(-1 * var(--space-8) + 0.75rem - 0.75rem);
+}
+
+.ui-timeline__item--alternate .ui-timeline__dot {
+  left: calc(-0.75rem);
+}
+
+.ui-timeline__item--alternate.ui-timeline__item--position-right .ui-timeline__dot {
+  left: auto;
+  right: calc(-0.75rem);
+}
+
+.ui-timeline__dot--primary {
+  color: var(--action-primary);
+}
+
+.ui-timeline__dot--success {
+  color: var(--status-success);
+}
+
+.ui-timeline__dot--warning {
+  color: var(--status-warning);
+}
+
+.ui-timeline__dot--danger {
+  color: var(--status-error);
+}
+
+.ui-timeline__dot--neutral {
+  color: var(--border-default);
+}
+
+.ui-timeline__dot-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.ui-timeline__content {
+  flex: 1;
+}
+
+.ui-timeline__item--alternate .ui-timeline__content {
+  width: calc(100% - var(--space-4));
+  padding-right: var(--space-4);
+}
+
+.ui-timeline__item--alternate.ui-timeline__item--position-right .ui-timeline__content {
+  text-align: right;
+  padding-right: 0;
+  padding-left: var(--space-4);
+}
+
+.ui-timeline__opposite {
+  position: absolute;
+  width: calc(100% - var(--space-4));
+}
+
+.ui-timeline__item--position-left .ui-timeline__opposite {
+  left: 100%;
+  padding-left: var(--space-4);
+}
+
+.ui-timeline__item--position-right .ui-timeline__opposite {
+  right: 100%;
+  padding-right: var(--space-4);
+  text-align: right;
+}
+</style>

package/src/components/Timeline/index.ts

@@ -0,0 +1,13 @@
+export { default as Timeline } from './Timeline.vue'
+export { default as TimelineItem } from './TimelineItem.vue'
+
+export type { TimelineProps } from './Timeline.vue'
+export type { TimelineItemProps } from './TimelineItem.vue'
+export type {
+  TimelineContext,
+  TimelineItemContext,
+  TimelineAlign,
+  TimelineLineStyle,
+  TimelineDotColor
+} from './keys'
+export { TimelineKey } from './keys'

package/src/components/Timeline/keys.ts

@@ -0,0 +1,21 @@
+import type { InjectionKey, Ref } from 'vue'
+
+export type TimelineAlign = 'left' | 'right' | 'alternate'
+export type TimelineLineStyle = 'solid' | 'dashed' | 'dotted'
+export type TimelineDotColor = 'primary' | 'success' | 'warning' | 'danger' | 'neutral'
+
+export interface TimelineContext {
+  align: Ref<TimelineAlign>
+  lineStyle: Ref<TimelineLineStyle>
+  registerItem: () => number
+  itemCount: Ref<number>
+}
+
+export interface TimelineItemContext {
+  index: number
+  isFirst: boolean
+  isLast: boolean
+  position: 'left' | 'right'
+}
+
+export const TimelineKey: InjectionKey<TimelineContext> = Symbol('timeline')