@nexxtmove/ui 0.1.22 → 0.1.24

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

@@ -0,0 +1,314 @@
+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/ProgressBar/ProgressBar.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, watchEffect } from 'vue'
+import AnimatedNumber from '../AnimatedNumber/AnimatedNumber.vue'
+
+interface NexxtProgressBarProps {
+  steps: number
+  currentStep: number
+  progressLabel?: string
+  stepTitles?: string[]
+}
+
+defineOptions({
+  name: 'NexxtProgressBar',
+})
+
+defineEmits(['update:currentStep'])
+
+const {
+  progressLabel = 'Voortgang',
+  stepTitles,
+  steps,
+  currentStep,
+} = defineProps<NexxtProgressBarProps>()
+
+const clampedStep = computed(() => Math.min(Math.max(0, currentStep), Math.max(0, steps - 1)))
+const displayStep = computed(() => (steps > 0 ? clampedStep.value + 1 : 0))
+
+const percentage = computed(() => {
+  if (steps <= 1) return steps === 1 ? 100 : 0
+  return (clampedStep.value / (steps - 1)) * 100
+})
+
+const hasTitles = computed(() => Boolean(stepTitles?.length))
+
+watchEffect(() => {
+  if (stepTitles && stepTitles.length !== steps) {
+    console.warn(
+      `[NexxtProgressBar] The "stepTitles" array length (${stepTitles.length}) must match the "steps" prop (${steps}).`,
+    )
+  }
+})
+</script>
+
+<template>
+  <div class="@container">
+    <div class="flex flex-col @md:gap-2">
+      <div class="flex items-center justify-between gap-2">
+        <div
+          class="progress-bar progress-bar-bar h-2 w-full overflow-hidden rounded-full"
+          role="progressbar"
+          :aria-label="progressLabel"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :aria-valuenow="Math.round(percentage)"
+          :aria-valuetext="
+            hasTitles && stepTitles?.[clampedStep]
+              ? `Step ${displayStep} of ${steps}: ${stepTitles[clampedStep]}`
+              : `Step ${displayStep} of ${steps}`
+          "
+        >
+          <div
+            class="progress-bar-progress h-full transition-all duration-500 ease-out"
+            :style="{ width: `${percentage}%` }"
+            :aria-hidden="true"
+          />
+        </div>
+        <div
+          v-if="hasTitles"
+          class="flex items-center small-normal tabular-nums @md:hidden"
+          aria-hidden="true"
+        >
+          <AnimatedNumber :value="displayStep" />
+          <span>/{{ steps }}</span>
+        </div>
+      </div>
+      <ol
+        v-if="hasTitles"
+        class="flex justify-between @max-md:order-first @max-md:justify-center"
+        aria-label="Progress steps"
+      >
+        <li
+          v-for="(title, index) in stepTitles"
+          :key="title"
+          class="rounded-xs transition-colors duration-500 focus-visible:outline-3 @max-md:hidden @max-md:body-normal @min-md:small-normal"
+          :class="[
+            index === clampedStep ? 'text-sapphire-500 @max-md:inline' : '',
+            index < clampedStep ? 'cursor-pointer duration-200! hover:text-sapphire-400' : '',
+          ]"
+          :aria-current="index === clampedStep ? 'step' : undefined"
+          :role="index < clampedStep ? 'button' : undefined"
+          :tabindex="index < clampedStep ? 0 : undefined"
+          :aria-label="index < clampedStep ? `Ga naar ${title}` : undefined"
+          @click="index < clampedStep && $emit('update:currentStep', index)"
+          @keydown.enter="index < clampedStep && $emit('update:currentStep', index)"
+          @keydown.space.prevent="index < clampedStep && $emit('update:currentStep', index)"
+        >
+          {{ title }}
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,58 @@
+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/SocialIcons/SocialIcons.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Icon from '../Icon/Icon.vue'
+
+export interface NexxtSocialIconsProps {
+  facebook?: boolean
+  instagram?: boolean
+  linkedin?: boolean
+  x?: boolean
+  google?: boolean
+  tiktok?: boolean
+}
+
+defineOptions({
+  name: 'NexxtSocialIcons',
+})
+
+const props = defineProps<NexxtSocialIconsProps>()
+
+const socialPlatforms = [
+  { name: 'facebook', label: 'Facebook', icon: 'facebook-f' },
+  { name: 'instagram', label: 'Instagram', icon: 'instagram' },
+  { name: 'linkedin', label: 'LinkedIn', icon: 'linkedin-in' },
+  { name: 'x', label: 'X (voorheen Twitter)', icon: 'x-twitter' },
+  { name: 'google', label: 'Google', icon: 'google' },
+  { name: 'tiktok', label: 'TikTok', icon: 'tiktok' },
+] as const
+
+const brandColors: Record<string, string> = {
+  facebook: 'bg-brands-facebook',
+  instagram: 'bg-brands-instagram',
+  linkedin: 'bg-brands-linkedin',
+  x: 'bg-brands-x',
+  google: 'bg-brands-google',
+  tiktok: 'bg-brands-tiktok',
+}
+
+const activeIcons = computed(() =>
+  socialPlatforms.filter((platform) => props[platform.name as keyof NexxtSocialIconsProps]),
+)
+</script>
+
+<template>
+  <ul
+    class="m-0 inline-flex list-none items-start justify-start gap-0.5 p-0"
+    aria-label="Sociale media kanalen"
+  >
+    <li
+      v-for="platform in activeIcons"
+      :key="platform.name"
+      class="inline-flex h-5 w-5 items-center justify-center rounded-full outline-1 outline-white"
+      :class="brandColors[platform.name]"
+      :aria-label="platform.label"
+    >
+      <Icon :name="platform.icon" type="brands" class="text-[10px] text-white" aria-hidden="true" />
+    </li>
+  </ul>
+</template>

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

@@ -0,0 +1,11 @@
+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 = {}