@nexxtmove/ui 0.1.30 → 0.1.32

package/src/components/ProgressBar/ProgressBar.test.ts

@@ -1,314 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { mount } from '@vue/test-utils'
-import ProgressBar from './ProgressBar.vue'
-
-describe('ProgressBar', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.stubGlobal('console', { warn: vi.fn() })
-  })
-
-  it('renders correct percentage for first step', () => {
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 5,
-        currentStep: 0,
-      },
-    })
-
-    const progressbar = wrapper.find('[role="progressbar"]')
-    expect(progressbar.attributes('aria-valuenow')).toBe('0')
-
-    const innerBar = progressbar.find('div')
-    expect(innerBar.attributes('style')).toContain('width: 0%')
-  })
-
-  it('renders correct percentage for middle step', () => {
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 5,
-        currentStep: 2,
-      },
-    })
-
-    const progressbar = wrapper.find('[role="progressbar"]')
-    expect(progressbar.attributes('aria-valuenow')).toBe('50')
-    expect(progressbar.find('div').attributes('style')).toContain('width: 50%')
-  })
-
-  it('renders correct percentage for last step', () => {
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 5,
-        currentStep: 4,
-      },
-    })
-
-    const progressbar = wrapper.find('[role="progressbar"]')
-    expect(progressbar.attributes('aria-valuenow')).toBe('100')
-    expect(progressbar.find('div').attributes('style')).toContain('width: 100%')
-  })
-
-  it('clamps currentStep within range', () => {
-    const wrapperLow = mount(ProgressBar, {
-      props: { steps: 5, currentStep: -1 },
-    })
-    expect(wrapperLow.find('[role="progressbar"]').attributes('aria-valuenow')).toBe('0')
-
-    const wrapperHigh = mount(ProgressBar, {
-      props: { steps: 5, currentStep: 10 },
-    })
-    expect(wrapperHigh.find('[role="progressbar"]').attributes('aria-valuenow')).toBe('100')
-  })
-
-  it('handles edge case of 0 or 1 steps', () => {
-    const wrapperZero = mount(ProgressBar, {
-      props: { steps: 0, currentStep: 0 },
-    })
-    expect(wrapperZero.find('[role="progressbar"]').attributes('aria-valuenow')).toBe('0')
-
-    const wrapperOne = mount(ProgressBar, {
-      props: { steps: 1, currentStep: 0 },
-    })
-    expect(wrapperOne.find('[role="progressbar"]').attributes('aria-valuenow')).toBe('100')
-  })
-
-  it('handles empty stepTitles array', () => {
-    const wrapper = mount(ProgressBar, {
-      props: { steps: 5, currentStep: 0, stepTitles: [] },
-    })
-    expect(wrapper.find('ol').exists()).toBe(false)
-    expect(wrapper.find('.tabular-nums').exists()).toBe(false)
-  })
-
-  it('displays correct step text without titles', () => {
-    const wrapper = mount(ProgressBar, {
-      props: { steps: 5, currentStep: 2 },
-    })
-
-    expect(wrapper.find('[role="progressbar"]').attributes('aria-valuetext')).toBe('Step 3 of 5')
-  })
-
-  it('displays correct step text with titles', () => {
-    const stepTitles = ['Start', 'Middle', 'End']
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 3,
-        currentStep: 1,
-        stepTitles,
-      },
-    })
-
-    expect(wrapper.find('[role="progressbar"]').attributes('aria-valuetext')).toBe(
-      'Step 2 of 3: Middle',
-    )
-  })
-
-  it('renders step titles and marks current step', () => {
-    const stepTitles = ['Step 1', 'Step 2', 'Step 3']
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 3,
-        currentStep: 1,
-        stepTitles,
-      },
-    })
-
-    const items = wrapper.findAll('li')
-    expect(items).toHaveLength(3)
-    expect(items[1]!.attributes('aria-current')).toBe('step')
-    expect(items[1]!.classes()).toContain('text-sapphire-500')
-    expect(items[0]!.attributes('aria-current')).toBeUndefined()
-  })
-
-  it('uses default progress label', () => {
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 5,
-        currentStep: 0,
-      },
-    })
-    expect(wrapper.find('[role="progressbar"]').attributes('aria-label')).toBe('Voortgang')
-  })
-
-  it('uses custom progress label', () => {
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 5,
-        currentStep: 0,
-        progressLabel: 'My Progress',
-      },
-    })
-    expect(wrapper.find('[role="progressbar"]').attributes('aria-label')).toBe('My Progress')
-  })
-
-  it('warns when stepTitles length mismatch', () => {
-    const spy = vi.spyOn(console, 'warn')
-    mount(ProgressBar, {
-      props: {
-        steps: 5,
-        currentStep: 0,
-        stepTitles: ['Only one'],
-      },
-    })
-    expect(spy).toHaveBeenCalledWith(expect.stringContaining('[NexxtProgressBar]'))
-  })
-
-  it('handles missing title in titles array gracefully', () => {
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 3,
-        currentStep: 2, // Last step
-        stepTitles: ['Only First'], // Only index 0 exists
-      },
-    })
-    // clampedStep is 2, stepTitles[2] is undefined
-    expect(wrapper.find('[role="progressbar"]').attributes('aria-valuetext')).toBe('Step 3 of 3')
-  })
-
-  it('has responsive container query classes', () => {
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 5,
-        currentStep: 0,
-        stepTitles: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
-      },
-    })
-
-    // Verify the root is a container
-    expect(wrapper.classes()).toContain('@container')
-
-    // Verify the digit counter hides when the container is large
-    const counter = wrapper.find('.tabular-nums')
-    expect(counter.classes()).toContain('@md:hidden')
-
-    // Verify list items hide titles when the container is small
-    const firstTitle = wrapper.find('li')
-    expect(firstTitle.classes()).toContain('@max-md:hidden')
-  })
-
-  it('updates animation direction correctly based on step change', async () => {
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 5,
-        currentStep: 2,
-        stepTitles: ['1', '2', '3', '4', '5'],
-      },
-      global: {
-        stubs: {
-          // Stubbing Transition lets us inspect the dynamic classes passed to it
-          Transition: {
-            template: '<slot />',
-            props: ['enterFromClass', 'leaveToClass'],
-          },
-        },
-      },
-    })
-
-    // Increment: Step 3 -> 4
-    await wrapper.setProps({ currentStep: 3 })
-    let transition = wrapper.findComponent({ name: 'Transition' })
-    expect(transition.props('enterFromClass')).toBe('translate-y-full')
-    expect(transition.props('leaveToClass')).toBe('-translate-y-full')
-
-    // Decrement: Step 4 -> 2
-    await wrapper.setProps({ currentStep: 1 })
-    transition = wrapper.findComponent({ name: 'Transition' })
-    expect(transition.props('enterFromClass')).toBe('-translate-y-full')
-    expect(transition.props('leaveToClass')).toBe('translate-y-full')
-  })
-
-  it('emits update:currentStep when a previous step is clicked', async () => {
-    const stepTitles = ['Step 1', 'Step 2', 'Step 3']
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 3,
-        currentStep: 2,
-        stepTitles,
-      },
-    })
-
-    const items = wrapper.findAll('li')
-
-    // Click first step (index 0, previous)
-    await items[0]!.trigger('click')
-    expect(wrapper.emitted('update:currentStep')).toBeTruthy()
-    expect(wrapper.emitted('update:currentStep')![0]).toEqual([0])
-
-    // Click second step (index 1, previous)
-    await items[1]!.trigger('click')
-    expect(wrapper.emitted('update:currentStep')![1]).toEqual([1])
-  })
-
-  it('does not emit update:currentStep when the current or a future step is clicked', async () => {
-    const stepTitles = ['Step 1', 'Step 2', 'Step 3']
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 3,
-        currentStep: 1,
-        stepTitles,
-      },
-    })
-
-    const items = wrapper.findAll('li')
-
-    // Click current step (index 1)
-    await items[1]!.trigger('click')
-    expect(wrapper.emitted('update:currentStep')).toBeFalsy()
-
-    // Click future step (index 2)
-    await items[2]!.trigger('click')
-    expect(wrapper.emitted('update:currentStep')).toBeFalsy()
-  })
-
-  it('applies interactive classes only to previous steps', () => {
-    const stepTitles = ['Step 1', 'Step 2', 'Step 3']
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 3,
-        currentStep: 1,
-        stepTitles,
-      },
-    })
-
-    const items = wrapper.findAll('li')
-
-    // Previous step
-    expect(items[0]!.classes()).toContain('cursor-pointer')
-    expect(items[0]!.classes()).toContain('hover:text-sapphire-400')
-    expect(items[0]!.attributes('role')).toBe('button')
-    expect(items[0]!.attributes('tabindex')).toBe('0')
-    expect(items[0]!.attributes('aria-label')).toBe('Ga naar Step 1')
-
-    // Current step
-    expect(items[1]!.classes()).not.toContain('cursor-pointer')
-    expect(items[1]!.attributes('role')).toBeUndefined()
-    expect(items[1]!.attributes('tabindex')).toBeUndefined()
-
-    // Future step
-    expect(items[2]!.classes()).not.toContain('cursor-pointer')
-    expect(items[2]!.attributes('role')).toBeUndefined()
-    expect(items[2]!.attributes('tabindex')).toBeUndefined()
-  })
-
-  it('emits update:currentStep when Enter or Space is pressed on a previous step', async () => {
-    const stepTitles = ['Step 1', 'Step 2', 'Step 3']
-    const wrapper = mount(ProgressBar, {
-      props: {
-        steps: 3,
-        currentStep: 2,
-        stepTitles,
-      },
-    })
-
-    const items = wrapper.findAll('li')
-
-    // Press Enter on first step
-    await items[0]!.trigger('keydown.enter')
-    expect(wrapper.emitted('update:currentStep')![0]).toEqual([0])
-
-    // Press Space on second step
-    await items[1]!.trigger('keydown.space')
-    expect(wrapper.emitted('update:currentStep')![1]).toEqual([1])
-  })
-})

package/src/components/SocialIcons/SocialIcons.stories.ts

@@ -1,34 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import SocialIcons from './SocialIcons.vue'
-
-export default {
-  title: 'Components/Molecules/Social Icons',
-  component: SocialIcons,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=524-17&t=CbHvOQfEMIr7M5mO-11',
-    },
-  },
-} satisfies Meta<typeof SocialIcons>
-
-type Story = StoryObj<typeof SocialIcons>
-
-export const Default: Story = {
-  args: {
-    facebook: true,
-    instagram: true,
-    linkedin: true,
-    x: true,
-    google: true,
-    tiktok: true,
-  },
-}
-
-export const Selective: Story = {
-  args: {
-    facebook: true,
-    linkedin: true,
-    instagram: true,
-  },
-}

package/src/components/SocialIcons/SocialIcons.test.ts

@@ -1,58 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import SocialIcons from './SocialIcons.vue'
-
-describe('SocialIcons', () => {
-  it('renders nothing when no props are set', () => {
-    const wrapper = mount(SocialIcons)
-    expect(wrapper.findAll('.rounded-full')).toHaveLength(0)
-  })
-
-  it('renders only the requested icons', () => {
-    const wrapper = mount(SocialIcons, {
-      props: {
-        facebook: true,
-        instagram: true,
-      },
-    })
-
-    const icons = wrapper.findAll('.rounded-full')
-    expect(icons).toHaveLength(2)
-
-    // Check for specific background colors to verify which icons are rendered
-    expect(icons[0]!.classes()).toContain('bg-brands-facebook')
-    expect(icons[1]!.classes()).toContain('bg-brands-instagram')
-  })
-
-  it('has correct accessibility attributes', () => {
-    const wrapper = mount(SocialIcons, {
-      props: {
-        facebook: true,
-      },
-    })
-
-    const list = wrapper.find('ul')
-    expect(list.exists()).toBe(true)
-    expect(list.attributes('aria-label')).toBe('Sociale media kanalen')
-
-    const item = wrapper.find('li')
-    expect(item.exists()).toBe(true)
-    expect(item.attributes('aria-label')).toBe('Facebook')
-    expect(item.findComponent({ name: 'NexxtIcon' }).attributes('aria-hidden')).toBe('true')
-  })
-
-  it('renders all icons when all props are true', () => {
-    const wrapper = mount(SocialIcons, {
-      props: {
-        facebook: true,
-        instagram: true,
-        linkedin: true,
-        x: true,
-        google: true,
-        tiktok: true,
-      },
-    })
-
-    expect(wrapper.findAll('.rounded-full')).toHaveLength(6)
-  })
-})

package/src/components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.stories.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import SocialMediaCustomTemplate from './SocialMediaCustomTemplate.vue'
-
-export default {
-  title: 'Components/Molecules/Social Media Custom Template',
-  component: SocialMediaCustomTemplate,
-} satisfies Meta<typeof SocialMediaCustomTemplate>
-
-type Story = StoryObj<typeof SocialMediaCustomTemplate>
-
-export const Default: Story = {}

package/src/components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.test.ts

@@ -1,131 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, vi } from 'vitest'
-import SocialMediaCustomTemplate from './SocialMediaCustomTemplate.vue'
-
-describe('SocialMediaCustomTemplate', () => {
-  it('renders correctly with video and poster', () => {
-    const wrapper = mount(SocialMediaCustomTemplate)
-    const video = wrapper.find('video')
-
-    expect(wrapper.element.tagName).toBe('BUTTON')
-    expect(video.exists()).toBe(true)
-    // Check video properties directly
-    const videoElement = video.element as HTMLVideoElement
-    expect(videoElement.muted).toBe(true)
-    expect(video.attributes('poster')).toContain('Template_aanvragen.jpg')
-  })
-
-  it('handles video ended event correctly', async () => {
-    const wrapper = mount(SocialMediaCustomTemplate)
-    const videoElement = wrapper.find('video').element as HTMLVideoElement
-    const loadSpy = vi.spyOn(videoElement, 'load').mockImplementation(() => {})
-
-    // Simulate video ending
-    await wrapper.find('video').trigger('ended')
-
-    expect(videoElement.currentTime).toBe(0)
-    expect(loadSpy).toHaveBeenCalled()
-  })
-
-  it('plays video on mouseenter after first play', async () => {
-    const wrapper = mount(SocialMediaCustomTemplate)
-    const videoElement = wrapper.find('video').element as HTMLVideoElement
-    const playSpy = vi.spyOn(videoElement, 'play').mockImplementation(() => Promise.resolve())
-
-    // Set state to hasPlayedOnce
-    await wrapper.find('video').trigger('ended')
-
-    // Trigger mouseenter
-    await wrapper.trigger('mouseenter')
-
-    expect(playSpy).toHaveBeenCalled()
-  })
-
-  it('pauses video on mouseleave after first play', async () => {
-    const wrapper = mount(SocialMediaCustomTemplate)
-    const videoElement = wrapper.find('video').element as HTMLVideoElement
-    const pauseSpy = vi.spyOn(videoElement, 'pause')
-
-    // Set state to hasPlayedOnce
-    await wrapper.find('video').trigger('ended')
-
-    // Trigger mouseleave
-    await wrapper.trigger('mouseleave')
-
-    expect(pauseSpy).toHaveBeenCalled()
-  })
-
-  it('sets loop to true after first play', async () => {
-    const wrapper = mount(SocialMediaCustomTemplate)
-    const video = wrapper.find('video')
-    const videoElement = video.element as HTMLVideoElement
-
-    expect(videoElement.loop).toBe(false)
-
-    // Simulate video ending
-    await video.trigger('ended')
-
-    expect(videoElement.loop).toBe(true)
-  })
-
-  it('does not play on mouseenter before first play has ended', async () => {
-    const wrapper = mount(SocialMediaCustomTemplate)
-    const videoElement = wrapper.find('video').element as HTMLVideoElement
-    const playSpy = vi.spyOn(videoElement, 'play')
-
-    await wrapper.trigger('mouseenter')
-
-    expect(playSpy).not.toHaveBeenCalled()
-  })
-
-  it('does not pause on mouseleave before first play has ended', async () => {
-    const wrapper = mount(SocialMediaCustomTemplate)
-    const videoElement = wrapper.find('video').element as HTMLVideoElement
-    const pauseSpy = vi.spyOn(videoElement, 'pause')
-
-    await wrapper.trigger('mouseleave')
-
-    expect(pauseSpy).not.toHaveBeenCalled()
-  })
-
-  it('does not call handleEnded if videoRef is null', async () => {
-    const wrapper = mount(SocialMediaCustomTemplate)
-    // @ts-expect-error - manually setting ref to null for test
-    wrapper.vm.videoRef = null
-
-    // Trigger handleEnded directly (internally)
-    // @ts-expect-error - calling internal method
-    wrapper.vm.handleEnded()
-
-    // @ts-expect-error - checking internal state
-    expect(wrapper.vm.hasPlayedOnce).toBe(false)
-  })
-
-  it('internal methods do nothing if videoRef is null', async () => {
-    const wrapper = mount(SocialMediaCustomTemplate)
-    // @ts-expect-error - manually setting ref to null for test
-    wrapper.vm.videoRef = null
-    // @ts-expect-error - manually setting hasPlayedOnce for branch test
-    wrapper.vm.hasPlayedOnce = true
-
-    // Trigger handleMouseEnter directly (internally)
-    // @ts-expect-error - calling internal method
-    wrapper.vm.handleMouseEnter()
-    // Trigger handleMouseLeave directly (internally)
-    // @ts-expect-error - calling internal method
-    wrapper.vm.handleMouseLeave()
-
-    // No errors should occur
-  })
-
-  it('plays onMounted if videoRef is valid', async () => {
-    const wrapper = mount(SocialMediaCustomTemplate)
-    const videoElement = wrapper.find('video').element as HTMLVideoElement
-    const playSpy = vi.spyOn(videoElement, 'play').mockImplementation(() => Promise.resolve())
-
-    // Simulate onMounted behavior by calling it again (it already ran once on mount)
-    // @ts-expect-error - manually calling onMounted setup code
-    wrapper.vm.handleMouseEnter() // hasPlayedOnce is false, should not play
-    expect(playSpy).not.toHaveBeenCalled()
-  })
-})

package/src/components/SocialMediaTemplate/SocialMediaTemplate.stories.ts

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import SocialMediaTemplate from './SocialMediaTemplate.vue'
-
-export default {
-  title: 'Components/Organisms/Social Media Template',
-  component: SocialMediaTemplate,
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['post', 'video', 'slideshow'],
-    },
-    selected: {
-      control: 'boolean',
-    },
-    muted: {
-      control: 'boolean',
-    },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=578-340&t=CbHvOQfEMIr7M5mO-11',
-    },
-  },
-} satisfies Meta<typeof SocialMediaTemplate>
-
-type Story = StoryObj<typeof SocialMediaTemplate>
-
-export const Post: Story = {
-  args: {
-    variant: 'post',
-    media: 'https://loremflickr.com/400/600/house',
-    mediaType: 'image',
-    name: 'Amsterdam',
-    type: 'Woning',
-    selected: false,
-  },
-}
-
-export const Video: Story = {
-  args: {
-    variant: 'video',
-    media: '/barcelona.mp4',
-    mediaType: 'video',
-    muted: true,
-    name: 'Barcelona',
-    type: 'Woning',
-    selected: false,
-  },
-}
-
-export const Slideshow: Story = {
-  args: {
-    variant: 'slideshow',
-    media: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    mediaType: 'image',
-    name: 'Stockholm',
-    type: 'Bedrijfsunit',
-  },
-}
-
-export const Selected: Story = {
-  args: {
-    variant: 'post',
-    media: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    mediaType: 'image',
-    name: 'Amsterdam',
-    type: 'Woning',
-    selected: true,
-  },
-}