@dillingerstaffing/strand-vue 0.6.0 → 0.7.0

package/src/components/ScrollReveal/ScrollReveal.test.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render } from '@testing-library/vue'
+import ScrollReveal from './ScrollReveal.vue'
+
+// Mock IntersectionObserver (not available in jsdom)
+const mockObserve = vi.fn()
+const mockUnobserve = vi.fn()
+const mockDisconnect = vi.fn()
+
+beforeEach(() => {
+  mockObserve.mockClear()
+  mockUnobserve.mockClear()
+  mockDisconnect.mockClear()
+
+  global.IntersectionObserver = vi.fn(() => ({
+    observe: mockObserve,
+    unobserve: mockUnobserve,
+    disconnect: mockDisconnect,
+    root: null,
+    rootMargin: '',
+    thresholds: [],
+    takeRecords: () => [],
+  })) as unknown as typeof IntersectionObserver
+})
+
+describe('ScrollReveal', () => {
+  // ── Rendering ──
+
+  it('renders a div element', () => {
+    const { container } = render(ScrollReveal, { slots: { default: 'Content' } })
+    expect(container.firstElementChild?.tagName).toBe('DIV')
+  })
+
+  it('renders slot content', () => {
+    const { getByText } = render(ScrollReveal, { slots: { default: 'Reveal me' } })
+    expect(getByText('Reveal me')).toBeTruthy()
+  })
+
+  // ── Base class ──
+
+  it('applies strand-reveal class', () => {
+    const { container } = render(ScrollReveal, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).toContain('strand-reveal')
+  })
+
+  // ── Visible class (not applied until intersection) ──
+
+  it('does not apply visible class on initial render', () => {
+    const { container } = render(ScrollReveal, { slots: { default: 'Test' } })
+    expect(container.firstElementChild?.className).not.toContain('strand-reveal--visible')
+  })
+
+  // ── Custom className ──
+
+  it('merges custom className with component classes', () => {
+    const { container } = render(ScrollReveal, {
+      props: { className: 'custom' },
+      slots: { default: 'Test' },
+    })
+    const el = container.firstElementChild
+    expect(el?.className).toContain('strand-reveal')
+    expect(el?.className).toContain('custom')
+  })
+
+  // ── Props forwarding ──
+
+  it('forwards additional attributes', () => {
+    const { container } = render(ScrollReveal, {
+      attrs: { id: 'reveal-1', 'data-testid': 'my-reveal' },
+      slots: { default: 'Test' },
+    })
+    expect(container.firstElementChild?.getAttribute('id')).toBe('reveal-1')
+  })
+})

package/src/components/ScrollReveal/ScrollReveal.vue

@@ -0,0 +1,68 @@
+<!--! Strand Vue | MIT License | dillingerstaffing.com -->
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+
+interface Props {
+  /** Intersection threshold (0-1) to trigger reveal */
+  threshold?: number
+  /** Only reveal once (do not hide on exit) */
+  once?: boolean
+  /** Additional CSS class */
+  className?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  threshold: 0.1,
+  once: true,
+  className: '',
+})
+
+const elRef = ref<HTMLDivElement | null>(null)
+const visible = ref(false)
+let observer: IntersectionObserver | null = null
+
+const classes = computed(() =>
+  [
+    'strand-reveal',
+    visible.value && 'strand-reveal--visible',
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+
+onMounted(() => {
+  if (!elRef.value) return
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          visible.value = true
+          if (props.once && observer && elRef.value) {
+            observer.unobserve(elRef.value)
+          }
+        } else if (!props.once) {
+          visible.value = false
+        }
+      }
+    },
+    { threshold: props.threshold },
+  )
+
+  observer.observe(elRef.value)
+})
+
+onUnmounted(() => {
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+})
+</script>
+
+<template>
+  <div ref="elRef" :class="classes" v-bind="$attrs">
+    <slot />
+  </div>
+</template>

package/src/components/ScrollReveal/index.ts

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

package/src/index.ts

@@ -26,6 +26,8 @@ export { default as Grid } from "./components/Grid/Grid.vue";
 export { default as Container } from "./components/Container/Container.vue";
 export { default as Divider } from "./components/Divider/Divider.vue";
 export { default as Section } from "./components/Section/Section.vue";
+export { default as InstrumentViewport } from "./components/InstrumentViewport/InstrumentViewport.vue";
+export { default as ScrollReveal } from "./components/ScrollReveal/ScrollReveal.vue";
 
 // Navigation
 export { default as Link } from "./components/Link/Link.vue";