@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,417 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import ProgressBar from './ProgressBar.vue'
+
+vi.mock('@floating-ui/vue', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@floating-ui/vue')>()
+  return {
+    ...actual,
+    useFloating: () => ({
+      floatingStyles: ref({}),
+      placement: ref('bottom-start'),
+      isPositioned: ref(true),
+    }),
+    autoUpdate: () => () => {},
+  }
+})
+
+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 non-current list items hide their titles when the container is small
+    const nonCurrentTitle = wrapper.findAll('li')[1]!
+    expect(nonCurrentTitle.classes()).toContain('@max-md:hidden')
+  })
+
+  describe('compact mode (many steps)', () => {
+    const manyTitles = [
+      'Step 1',
+      'Step 2',
+      'Step 3',
+      'Step 4',
+      'Step 5',
+      'Step 6',
+      'Step 7',
+      'Step 8',
+    ]
+
+    it('collapses the label row and always shows the counter above the threshold', () => {
+      const wrapper = mount(ProgressBar, {
+        props: { steps: manyTitles.length, currentStep: 3, stepTitles: manyTitles },
+      })
+
+      // Counter is no longer hidden on large containers
+      const counter = wrapper.find('.tabular-nums')
+      expect(counter.classes()).not.toContain('@md:hidden')
+
+      // The inline label row is replaced by a dropdown trigger for the current step
+      expect(wrapper.find('ol').exists()).toBe(false)
+      const trigger = wrapper.find('button[aria-haspopup="menu"]')
+      expect(trigger.exists()).toBe(true)
+      expect(trigger.text()).toContain('Step 4')
+    })
+
+    it('keeps the full responsive layout at or below the threshold', () => {
+      const titles = manyTitles.slice(0, 7)
+      const wrapper = mount(ProgressBar, {
+        props: { steps: titles.length, currentStep: 0, stepTitles: titles },
+      })
+
+      expect(wrapper.find('.tabular-nums').classes()).toContain('@md:hidden')
+      // A non-current step keeps the responsive hide-on-small behavior
+      expect(wrapper.findAll('li')[1]!.classes()).toContain('@max-md:hidden')
+    })
+
+    it('respects a custom maxInlineSteps threshold', () => {
+      const titles = manyTitles.slice(0, 4)
+      const wrapper = mount(ProgressBar, {
+        props: { steps: titles.length, currentStep: 0, stepTitles: titles, maxInlineSteps: 3 },
+      })
+
+      expect(wrapper.find('.tabular-nums').classes()).not.toContain('@md:hidden')
+      expect(wrapper.find('button[aria-haspopup="menu"]').exists()).toBe(true)
+    })
+
+    it('opens a menu with every step and emits when a previous step is picked', async () => {
+      const wrapper = mount(ProgressBar, {
+        props: { steps: manyTitles.length, currentStep: 3, stepTitles: manyTitles },
+      })
+
+      await wrapper.find('button[aria-haspopup="menu"]').trigger('click')
+      await nextTick()
+      await nextTick()
+
+      const items = wrapper.findAll('[role="menuitem"]')
+      expect(items).toHaveLength(manyTitles.length)
+      // Steps after the current one cannot be selected
+      expect(items[4]!.attributes('disabled')).toBeDefined()
+      expect(items[3]!.attributes('aria-current')).toBe('step')
+
+      await items[1]!.trigger('click')
+      expect(wrapper.emitted('update:currentStep')).toEqual([[1]])
+    })
+
+    it('does not emit when the current step is picked from the menu', async () => {
+      const wrapper = mount(ProgressBar, {
+        props: { steps: manyTitles.length, currentStep: 3, stepTitles: manyTitles },
+      })
+
+      await wrapper.find('button[aria-haspopup="menu"]').trigger('click')
+      await nextTick()
+      await nextTick()
+
+      await wrapper.findAll('[role="menuitem"]')[3]!.trigger('click')
+      expect(wrapper.emitted('update:currentStep')).toBeUndefined()
+    })
+  })
+
+  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])
+  })
+
+  describe('percentage variant', () => {
+    it('renders a progress bar with the given percentage', () => {
+      const wrapper = mount(ProgressBar, {
+        props: { variant: 'percentage', steps: 100, currentStep: 75 },
+      })
+
+      const progressbar = wrapper.find('[role="progressbar"]')
+      expect(progressbar.attributes('aria-valuenow')).toBe('75')
+      expect(progressbar.find('.progress-bar-progress').attributes('style')).toContain('width: 75%')
+    })
+
+    it('shows percentage text', () => {
+      const wrapper = mount(ProgressBar, {
+        props: { variant: 'percentage', steps: 100, currentStep: 90 },
+      })
+
+      expect(wrapper.find('span[aria-hidden="true"]').text()).toBe('90%')
+    })
+
+    it('does not render stepper elements', () => {
+      const wrapper = mount(ProgressBar, {
+        props: { variant: 'percentage', steps: 101, currentStep: 50 },
+      })
+
+      expect(wrapper.find('ol').exists()).toBe(false)
+      expect(wrapper.find('li').exists()).toBe(false)
+    })
+
+    it('has taller bar than stepper variant', () => {
+      const wrapper = mount(ProgressBar, {
+        props: { variant: 'percentage', steps: 101, currentStep: 50 },
+      })
+
+      const progressbar = wrapper.find('[role="progressbar"]')
+      expect(progressbar.classes()).toContain('h-6')
+    })
+  })
+})

package/src/components/organisms/ReferenceCard/ReferenceCard.stories.ts

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import ReferenceCard, { type ProposalReference } from './ReferenceCard.vue'
+
+const BASE_REFERENCE: ProposalReference = {
+  index: 1,
+  postalCode: '3811 KV',
+  streetName: 'Amersfoortsestraat',
+  houseNumber: 12,
+  houseType: 'Tussenwoning',
+  city: 'Amersfoort',
+  mainImageUrl: 'https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=800',
+  latitude: 52.1561,
+  longitude: 5.3878,
+  useSurface: 124,
+  parcelSurface: 210,
+  buildYear: 1998,
+  volume: 420,
+  energyLabel: 'A',
+  garage: 'Aangebouwde stenen garage',
+  insulation: 'Volledig geïsoleerd',
+  shedStorageType: 'Vrijstaand houten berging',
+  saleDate: '2025-03-14',
+  dateOnOfferSince: '2025-01-08',
+  transportDate: '2025-05-01',
+  salePrice: '485000',
+  indexedSalePrice: '502000',
+  pricePerSquareMeter: '3911',
+}
+
+export default {
+  title: 'Components/Organisms/Reference Card',
+  component: ReferenceCard,
+} satisfies Meta<typeof ReferenceCard>
+
+type Story = StoryObj<typeof ReferenceCard>
+
+const render: Story['render'] = (args) => ({
+  components: { ReferenceCard },
+  setup() {
+    const selected = ref(args.modelValue ?? false)
+    return { args, selected }
+  },
+  template: '<ReferenceCard v-bind="args" v-model="selected" />',
+})
+
+export const Default: Story = {
+  args: { reference: BASE_REFERENCE },
+  render,
+}
+
+export const Selected: Story = {
+  args: { reference: BASE_REFERENCE, modelValue: true },
+  render,
+}
+
+export const NarrowContainer: Story = {
+  args: { reference: BASE_REFERENCE },
+  render: (args) => ({
+    components: { ReferenceCard },
+    setup() {
+      const selected = ref(args.modelValue ?? false)
+      return { args, selected }
+    },
+    template: `
+      <div class="w-80">
+        <ReferenceCard v-bind="args" v-model="selected" />
+      </div>
+    `,
+  }),
+}
+
+export const CustomCurrency: Story = {
+  args: {
+    reference: BASE_REFERENCE,
+    locale: 'en-US',
+    currency: 'USD',
+  },
+  render,
+}
+
+export const CustomMessages: Story = {
+  args: {
+    reference: BASE_REFERENCE,
+    messages: {
+      selected: 'Included in advice',
+      unselected: 'Select this property',
+      details: 'More details',
+      energyLabel: 'Energy label',
+    },
+  },
+  render,
+}
+
+export const List: Story = {
+  args: { reference: BASE_REFERENCE },
+  render: (args) => ({
+    components: { ReferenceCard },
+    setup() {
+      const references = [
+        BASE_REFERENCE,
+        {
+          ...BASE_REFERENCE,
+          index: 2,
+          streetName: 'Klaverkamp',
+          houseNumber: 22,
+          postalCode: '7905 BK',
+          city: 'Zwolle',
+          energyLabel: 'C',
+          salePrice: '465000',
+          saleDate: '2024-03-18',
+        },
+      ]
+      const selected = ref([true, false])
+      return { args, references, selected }
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <ReferenceCard
+          v-for="(reference, index) in references"
+          :key="reference.index"
+          v-bind="args"
+          v-model="selected[index]"
+          :reference="reference"
+        />
+      </div>
+    `,
+  }),
+}
+
+export const MillionPlusPrice: Story = {
+  args: {
+    reference: {
+      ...BASE_REFERENCE,
+      salePrice: '1485000',
+      indexedSalePrice: '1602000',
+      pricePerSquareMeter: '11975',
+    },
+  },
+  render,
+}
+
+export const WithoutImage: Story = {
+  args: {
+    reference: { ...BASE_REFERENCE, mainImageUrl: null },
+  },
+  render,
+}
+
+export const WithoutPrice: Story = {
+  args: {
+    reference: { ...BASE_REFERENCE, salePrice: null },
+  },
+  render,
+}
+
+export const MinimalData: Story = {
+  args: {
+    reference: {
+      ...BASE_REFERENCE,
+      mainImageUrl: null,
+      useSurface: null,
+      parcelSurface: null,
+      buildYear: null,
+      volume: null,
+      energyLabel: null,
+      garage: null,
+      insulation: null,
+      shedStorageType: null,
+      saleDate: null,
+      dateOnOfferSince: null,
+      transportDate: null,
+      salePrice: null,
+      indexedSalePrice: null,
+      pricePerSquareMeter: null,
+    },
+  },
+  render,
+}
+
+export const OverflowingText: Story = {
+  args: {
+    reference: {
+      ...BASE_REFERENCE,
+      streetName: 'Burgemeester van Nispen tot Sevenaerstraat-Zuidzijde',
+      city: 'Sint-Annaparochie aan de Rijksstraatweg',
+      houseType: 'Vrijstaande woning met aangebouwd bedrijfspand en dubbele garage',
+    },
+  },
+  render,
+}