@nexxtmove/ui 2.6.0 → 2.8.0

package/src/components/molecules/InfoBlock/InfoBlock.test.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import InfoBlock from './InfoBlock.vue'
+
+describe('InfoBlock', () => {
+  it('renders correctly with default slot content and green color', () => {
+    const customText = 'Koopwoningen doen het goed als post of reel'
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'bell',
+        color: 'green',
+      },
+      slots: {
+        default: `<div class="heading-4">Tip!</div><div class="body-medium">${customText}</div>`,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Tip!')
+    expect(wrapper.text()).toContain(customText)
+    expect(wrapper.find('.bg-green-50').exists()).toBe(true)
+    expect(wrapper.find('.bg-green-500').exists()).toBe(true)
+  })
+
+  it('renders correctly with custom color purple', () => {
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'star',
+        color: 'purple',
+      },
+      slots: {
+        default: 'Custom Purple Content',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Custom Purple Content')
+    expect(wrapper.find('.bg-sapphire-50').exists()).toBe(true)
+    expect(wrapper.find('.bg-purple-500').exists()).toBe(true)
+    expect(wrapper.find('.border-purple-500').exists()).toBe(true)
+  })
+
+  it('renders correctly with custom color blue', () => {
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'info',
+        color: 'blue',
+      },
+      slots: {
+        default: 'Custom Blue Content',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Custom Blue Content')
+    expect(wrapper.find('.bg-yale-blue-50').exists()).toBe(true)
+    expect(wrapper.find('.bg-cornflower-blue-500').exists()).toBe(true)
+    expect(wrapper.find('.border-cornflower-blue-500').exists()).toBe(true)
+  })
+
+  it('renders correctly with custom color rose', () => {
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'info',
+        color: 'rose',
+      },
+      slots: {
+        default: 'Custom Rose Content',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Custom Rose Content')
+    expect(wrapper.find('.bg-rose-50').exists()).toBe(true)
+    expect(wrapper.find('.bg-rose-500').exists()).toBe(true)
+    expect(wrapper.find('.border-rose-500').exists()).toBe(true)
+  })
+
+  it('has correct accessibility attributes', () => {
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'bell',
+      },
+    })
+
+    // Check for role="note"
+    expect(wrapper.attributes('role')).toBe('note')
+
+    // Check that the icon container is hidden from screen readers
+    const iconContainer = wrapper.find('[aria-hidden="true"]')
+    expect(iconContainer.exists()).toBe(true)
+  })
+
+  it('renders the specific icon provided via props', () => {
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'heart',
+      },
+    })
+
+    const icon = wrapper.findComponent({ name: 'NexxtIcon' })
+    expect(icon.exists()).toBe(true)
+    expect(icon.props('name')).toBe('heart')
+  })
+})

package/src/components/molecules/InputField/InputField.stories.ts

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import NexxtInputField from './InputField.vue'
+
+export default {
+  title: 'Components/Molecules/Input field',
+  component: NexxtInputField,
+} satisfies Meta<typeof NexxtInputField>
+
+type Story = StoryObj<typeof NexxtInputField>
+
+const render = (args: Story['args']) => ({
+  components: { NexxtInputField },
+  setup() {
+    return { args }
+  },
+  template: `
+    <NexxtInputField
+      v-bind="args"
+      :modelValue="args.modelValue"
+      @update:modelValue="args.modelValue = $event"
+    />
+  `,
+})
+
+export const Default: Story = {
+  render,
+  args: {
+    label: '',
+    placeholder: 'Placeholder...',
+    modelValue: '',
+    error: false,
+    errorMessage: '',
+    leftIcon: 'search',
+    required: false,
+  },
+}
+
+export const WithLabel: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Email address',
+  },
+}
+
+export const Focused: Story = {
+  render,
+  args: {
+    ...Default.args,
+  },
+}
+
+export const Error: Story = {
+  render,
+  args: {
+    ...Default.args,
+    error: true,
+    errorMessage: 'Dit veld is verplicht',
+  },
+}
+
+export const WithValue: Story = {
+  render,
+  args: {
+    ...Default.args,
+    modelValue: 'Voorbeeld tekst',
+  },
+}
+
+export const WithRightIcon: Story = {
+  render,
+  args: {
+    ...Default.args,
+    rightIcon: 'filter',
+  },
+}
+
+export const WithoutIcons: Story = {
+  render,
+  args: {
+    ...Default.args,
+    leftIcon: undefined,
+    rightIcon: undefined,
+  },
+}
+
+export const Required: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Required field',
+    required: true,
+  },
+}
+
+export const Number: Story = {
+  render: (args) => ({
+    components: { NexxtInputField },
+    setup() {
+      return { args }
+    },
+    template: `
+      <NexxtInputField
+        v-bind="args"
+        type="number"
+        v-model="args.modelValue"
+      />
+    `,
+  }),
+  args: {
+    ...Default.args,
+    label: 'Number input',
+    placeholder: '0',
+    modelValue: 10,
+    leftIcon: undefined,
+  },
+}

package/src/components/molecules/InputField/InputField.test.ts

@@ -0,0 +1,138 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NexxtInputField from './InputField.vue'
+
+describe('NexxtInputField', () => {
+  // Not about the (non-existent) module-scope id bug: this asserts the label
+  // association contract itself, which nothing else covers.
+  it('points the label at the input it labels', () => {
+    const wrapper = mount(NexxtInputField, { props: { label: 'A' } })
+    expect(wrapper.find('label').attributes('for')).toBe(wrapper.find('input').attributes('id'))
+  })
+
+  describe('exposed focus API', () => {
+    it('exposes the input element and a focus method', () => {
+      const wrapper = mount(NexxtInputField, { attachTo: document.body })
+      const exposed = wrapper.vm as unknown as {
+        focus?: () => void
+        inputEl?: HTMLInputElement | null
+      }
+
+      expect(typeof exposed.focus).toBe('function')
+      expect(exposed.inputEl).toBe(wrapper.find('input').element)
+    })
+
+    it('actually focuses the input, so callers stop reaching for querySelector', () => {
+      const wrapper = mount(NexxtInputField, { attachTo: document.body })
+      const exposed = wrapper.vm as unknown as { focus: () => void }
+
+      exposed.focus()
+
+      expect(document.activeElement).toBe(wrapper.find('input').element)
+    })
+  })
+
+  it('renders label and placeholder', () => {
+    const wrapper = mount(NexxtInputField, {
+      props: {
+        label: 'Test Label',
+        placeholder: 'Test Placeholder',
+      },
+    })
+    expect(wrapper.text()).toContain('Test Label')
+    expect(wrapper.find('input').attributes('placeholder')).toBe('Test Placeholder')
+  })
+
+  it('emits update:modelValue on input', async () => {
+    const wrapper = mount(NexxtInputField, {
+      props: { modelValue: '' },
+    })
+    const input = wrapper.find('input')
+    await input.setValue('Hello')
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['Hello'])
+  })
+
+  it('shows error message and error class', () => {
+    const wrapper = mount(NexxtInputField, {
+      props: {
+        error: true,
+        errorMessage: 'Error occurred',
+      },
+    })
+    expect(wrapper.text()).toContain('Error occurred')
+    expect(wrapper.find('.ring-brick-400').exists()).toBe(true)
+  })
+
+  it('shows left and right icons if props are set', () => {
+    const wrapper = mount(NexxtInputField, {
+      props: {
+        leftIcon: 'search',
+        rightIcon: 'eye',
+      },
+    })
+    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
+    expect(icons.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('focus and blur events do not throw', async () => {
+    const wrapper = mount(NexxtInputField)
+    const input = wrapper.find('input')
+    await input.trigger('focus')
+    await input.trigger('blur')
+    expect(input.exists()).toBe(true)
+  })
+
+  it('renders required asterisk when required prop is true', () => {
+    const wrapper = mount(NexxtInputField, {
+      props: {
+        label: 'Required Label',
+        required: true,
+      },
+    })
+    const asterisk = wrapper.find('.text-brick-500')
+    expect(asterisk.exists()).toBe(true)
+    expect(asterisk.text()).toBe('*')
+  })
+
+  it('renders numeric arrows and updates value when type is number', async () => {
+    const wrapper = mount(NexxtInputField, {
+      props: {
+        type: 'number',
+        modelValue: 10,
+      },
+      attrs: {
+        type: 'number',
+      },
+    })
+
+    const buttons = wrapper.findAll('button')
+    expect(buttons).toHaveLength(2)
+
+    // Increment
+    await buttons[0].trigger('click')
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([11])
+
+    // Update prop to simulate modelValue change from parent/v-model
+    await wrapper.setProps({ modelValue: 11 })
+
+    // Decrement
+    await buttons[1].trigger('click')
+    expect(wrapper.emitted()['update:modelValue'][1]).toEqual([10])
+  })
+
+  it('handles null/empty modelValue when incrementing', async () => {
+    const wrapper = mount(NexxtInputField, {
+      props: {
+        type: 'number',
+        modelValue: undefined,
+      },
+      attrs: {
+        type: 'number',
+      },
+    })
+
+    const buttons = wrapper.findAll('button')
+    await buttons[0].trigger('click')
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([1])
+  })
+})

package/src/components/molecules/InputSelect/InputSelect.stories.ts

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import NexxtInputSelect from './InputSelect.vue'
+
+export default {
+  title: 'Components/Molecules/Input Select',
+  component: NexxtInputSelect,
+  decorators: [
+    () => ({
+      template:
+        '<div style="min-height: 250px; padding: 16px; display: flex; justify-content: center;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof NexxtInputSelect>
+
+type Story = StoryObj<typeof NexxtInputSelect>
+
+const unitOptions = [
+  { label: 'km', value: 'km' },
+  { label: 'mi', value: 'mi' },
+  { label: 'm', value: 'm' },
+]
+
+const currencyOptions = [
+  { label: 'EUR', value: 'eur' },
+  { label: 'USD', value: 'usd' },
+  { label: 'GBP', value: 'gbp' },
+]
+
+const render = (args: Story['args']) => ({
+  components: { NexxtInputSelect },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 16px; align-items: flex-start;">
+      <NexxtInputSelect
+        v-bind="args"
+        :input="args.input"
+        :select="args.select"
+        @update:input="args.input = $event"
+        @update:select="args.select = $event"
+      />
+    </div>
+  `,
+})
+
+export const Default: Story = {
+  render,
+  args: {
+    options: unitOptions,
+    placeholder: '0',
+    selectPlaceholder: 'Eenheid',
+    input: '',
+    select: null,
+  },
+}
+
+export const WithLabel: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Afstand',
+    required: false,
+  },
+}
+
+export const WithValue: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Afstand',
+    input: '42',
+    select: 'km',
+  },
+}
+
+export const WithLeftIcon: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Bedrag',
+    options: currencyOptions,
+    selectPlaceholder: 'Valuta',
+    leftIcon: 'dollar-sign',
+  },
+}
+
+export const Required: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Verplicht veld',
+    required: true,
+  },
+}
+
+export const SelectBefore: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Afstand',
+    input: '42',
+    select: 'km',
+    selectPosition: 'before',
+  },
+}
+
+export const Error: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Afstand',
+    error: true,
+    errorMessage: 'Dit veld is verplicht',
+  },
+}

package/src/components/molecules/InputSelect/InputSelect.test.ts

@@ -0,0 +1,127 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { ref, nextTick } from 'vue'
+import NexxtInputSelect from './InputSelect.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-end'),
+      isPositioned: ref(true),
+    }),
+    autoUpdate: () => () => {},
+  }
+})
+
+const unitOptions = [
+  { label: 'km', value: 'km' },
+  { label: 'mi', value: 'mi' },
+  { label: 'm', value: 'm' },
+]
+
+const openSelect = async (wrapper: ReturnType<typeof mount>) => {
+  await wrapper.find('[role="combobox"]').trigger('click')
+  await flushPromises()
+  await nextTick()
+}
+
+describe('NexxtInputSelect', () => {
+  it('renders label and placeholder', () => {
+    const wrapper = mount(NexxtInputSelect, {
+      props: { options: unitOptions, label: 'Afstand', placeholder: '0' },
+    })
+    expect(wrapper.text()).toContain('Afstand')
+    expect(wrapper.find('input').attributes('placeholder')).toBe('0')
+  })
+
+  it('renders select placeholder', () => {
+    const wrapper = mount(NexxtInputSelect, {
+      props: { options: unitOptions, selectPlaceholder: 'Eenheid' },
+    })
+    expect(wrapper.text()).toContain('Eenheid')
+  })
+
+  it('emits update:input when the input value changes', async () => {
+    const wrapper = mount(NexxtInputSelect, { props: { options: unitOptions, input: '' } })
+    await wrapper.find('input').setValue('42')
+    expect(wrapper.emitted()['update:input'][0]).toEqual(['42'])
+  })
+
+  it('opens dropdown and shows options on click', async () => {
+    const wrapper = mount(NexxtInputSelect, { props: { options: unitOptions } })
+    await openSelect(wrapper)
+    const items = wrapper.findAll('[role="option"]')
+    expect(items).toHaveLength(unitOptions.length)
+    expect(items[0].text()).toBe('km')
+  })
+
+  it('emits update:select when an option is selected', async () => {
+    const wrapper = mount(NexxtInputSelect, {
+      props: { options: unitOptions, select: null },
+    })
+    await openSelect(wrapper)
+    await wrapper.find('[role="option"]').trigger('click')
+    expect(wrapper.emitted()['update:select'][0]).toEqual(['km'])
+  })
+
+  it('displays the selected label when a select value is set', () => {
+    const wrapper = mount(NexxtInputSelect, {
+      props: { options: unitOptions, select: 'mi' },
+    })
+    expect(wrapper.text()).toContain('mi')
+  })
+
+  it('marks the selected option with aria-selected', async () => {
+    const wrapper = mount(NexxtInputSelect, { props: { options: unitOptions, select: 'km' } })
+    await openSelect(wrapper)
+    const selected = wrapper.find('[aria-selected="true"]')
+    expect(selected.text()).toBe('km')
+  })
+
+  it('shows error ring and error message', () => {
+    const wrapper = mount(NexxtInputSelect, {
+      props: { options: unitOptions, error: true, errorMessage: 'Dit veld is verplicht' },
+    })
+    expect(wrapper.find('.ring-brick-400').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Dit veld is verplicht')
+  })
+
+  it('renders required asterisk when required is true', () => {
+    const wrapper = mount(NexxtInputSelect, {
+      props: { options: unitOptions, label: 'Afstand', required: true },
+    })
+    const asterisk = wrapper.find('.text-brick-500')
+    expect(asterisk.exists()).toBe(true)
+    expect(asterisk.text()).toBe('*')
+  })
+
+  it('places select after input by default (flex-row-reverse)', () => {
+    const wrapper = mount(NexxtInputSelect, { props: { options: unitOptions } })
+    expect(wrapper.find('.flex-row-reverse').exists()).toBe(true)
+  })
+
+  it('places select before input when selectPosition is before (flex-row)', () => {
+    const wrapper = mount(NexxtInputSelect, {
+      props: { options: unitOptions, selectPosition: 'before' },
+    })
+    expect(wrapper.find('.flex-row').exists()).toBe(true)
+    expect(wrapper.find('.flex-row-reverse').exists()).toBe(false)
+  })
+
+  it('select trigger has border-l when selectPosition is after', () => {
+    const wrapper = mount(NexxtInputSelect, {
+      props: { options: unitOptions, selectPosition: 'after' },
+    })
+    expect(wrapper.find('[role="combobox"]').classes()).toContain('border-l')
+  })
+
+  it('select trigger has border-r when selectPosition is before', () => {
+    const wrapper = mount(NexxtInputSelect, {
+      props: { options: unitOptions, selectPosition: 'before' },
+    })
+    expect(wrapper.find('[role="combobox"]').classes()).toContain('border-r')
+  })
+})