@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,358 @@
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { defineComponent, nextTick, ref } from 'vue'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import PickerPanel from './PickerPanel.vue'
+import type {
+  NexxtPickerGroupData,
+  NexxtPickerItemData,
+} from '../../molecules/PickerList/PickerList.vue'
+
+const GROUPS: NexxtPickerGroupData[] = [
+  { id: 'basis', label: 'Basis' },
+  { id: 'media', label: 'Media' },
+]
+
+const ITEMS: NexxtPickerItemData[] = [
+  { id: 'table', label: 'Tabel', icon: 'table', group: 'basis', disabled: true },
+  { id: 'title', label: 'Titel', icon: 'heading', group: 'basis', description: 'Een kop' },
+  { id: 'text', label: 'Tekst', icon: 'font', group: 'basis' },
+  { id: 'image', label: 'Afbeelding', icon: 'image', group: 'media', keywords: ['foto'] },
+]
+
+const COPY = {
+  ariaLabel: 'Onderdeel kiezen',
+  listLabel: 'Onderdelen',
+  searchLabel: 'Zoek een onderdeel',
+  searchPlaceholder: 'Zoeken',
+  emptyTitle: 'Geen onderdelen gevonden',
+  clearLabel: 'Wis zoekopdracht',
+  previewEmptyText: 'Kies een onderdeel',
+}
+
+type Props = Partial<InstanceType<typeof PickerPanel>['$props']>
+
+const mounted: VueWrapper[] = []
+
+const mountPanel = async (props: Props = {}, slots: Record<string, string> = {}) => {
+  // The list settles its highlight during setup, before `mount` has returned a wrapper; until
+  // then the panel's own local model holds it
+  const holder: { wrapper?: VueWrapper } = {}
+  const wrapper = mount(PickerPanel, {
+    props: {
+      items: ITEMS,
+      groups: GROUPS,
+      ...COPY,
+      'onUpdate:search': (value: string) => holder.wrapper?.setProps({ search: value }),
+      'onUpdate:highlighted': (value: string | null) =>
+        holder.wrapper?.setProps({ highlighted: value }),
+      ...props,
+    },
+    slots,
+    attachTo: document.body,
+  })
+  holder.wrapper = wrapper
+  mounted.push(wrapper)
+  await flushPromises()
+  return wrapper
+}
+
+const inputOf = (wrapper: VueWrapper) => wrapper.find('input')
+const previewOf = (wrapper: VueWrapper) => wrapper.findComponent({ name: 'NexxtPickerPreview' })
+const listboxOf = (wrapper: VueWrapper) => wrapper.find('[role="listbox"]')
+const activeOption = (wrapper: VueWrapper) =>
+  document.getElementById(inputOf(wrapper).attributes('aria-activedescendant')!)
+
+const keydown = async (target: Element, key: string) => {
+  const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })
+  target.dispatchEvent(event)
+  await flushPromises()
+  return event
+}
+
+/** Focusable elements in tab order (no positive tabindex in use here). */
+const tabOrder = (wrapper: VueWrapper) => {
+  // An untyped VueWrapper types its element as `any`; pin it to Element for the query.
+  const root: Element = wrapper.element
+  return Array.from(
+    root.querySelectorAll<HTMLElement>('input, button, a[href], [tabindex]'),
+  ).filter((element) => element.tabIndex >= 0 && !element.closest('[inert]'))
+}
+
+describe('PickerPanel', () => {
+  afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount())
+    vi.restoreAllMocks()
+  })
+
+  it('is a named group with the list and the preview', async () => {
+    const wrapper = await mountPanel()
+
+    expect(wrapper.attributes('role')).toBe('group')
+    expect(wrapper.attributes('aria-label')).toBe('Onderdeel kiezen')
+    expect(listboxOf(wrapper).attributes('aria-label')).toBe('Onderdelen')
+    expect(previewOf(wrapper).find('[class*="aspect-"]').exists()).toBe(true)
+  })
+
+  it('focuses the search field on mount and highlights the first enabled item', async () => {
+    const wrapper = await mountPanel()
+
+    expect(document.activeElement).toBe(inputOf(wrapper).element)
+    expect(activeOption(wrapper)?.textContent).toContain('Titel')
+    expect(wrapper.emitted('update:highlighted')![0]).toEqual(['title'])
+  })
+
+  it('wires the search field as a combobox that controls the listbox', async () => {
+    const wrapper = await mountPanel()
+    const input = inputOf(wrapper)
+
+    expect(input.attributes()).toMatchObject({
+      type: 'text',
+      role: 'combobox',
+      'aria-expanded': 'true',
+      'aria-autocomplete': 'list',
+      'aria-label': 'Zoek een onderdeel',
+      autocomplete: 'off',
+      spellcheck: 'false',
+      placeholder: 'Zoeken',
+    })
+    expect(input.attributes('aria-controls')).toBe(listboxOf(wrapper).attributes('id'))
+    expect(input.attributes('aria-activedescendant')).toBe(
+      listboxOf(wrapper).attributes('aria-activedescendant'),
+    )
+  })
+
+  it('lifts the minimum width of the input inside the panel', async () => {
+    const wrapper = await mountPanel()
+
+    expect(wrapper.findComponent({ name: 'NexxtInputField' }).classes()).toContain(
+      '[&_input]:min-w-0',
+    )
+  })
+
+  it('drives the list from the field while focus stays in it', async () => {
+    const wrapper = await mountPanel()
+    const input = inputOf(wrapper).element
+
+    expect((await keydown(input, 'ArrowDown')).defaultPrevented).toBe(true)
+    expect(activeOption(wrapper)?.textContent).toContain('Tekst')
+
+    await keydown(input, 'ArrowUp')
+    expect(activeOption(wrapper)?.textContent).toContain('Titel')
+
+    await keydown(input, 'PageDown')
+    expect(activeOption(wrapper)?.textContent).toContain('Afbeelding')
+
+    await keydown(input, 'PageUp')
+    expect(activeOption(wrapper)?.textContent).toContain('Tabel')
+
+    await keydown(input, 'ArrowDown')
+    expect((await keydown(input, 'Enter')).defaultPrevented).toBe(true)
+    expect(wrapper.emitted('select')).toEqual([[ITEMS[1]]])
+
+    expect(document.activeElement).toBe(input)
+  })
+
+  it('leaves Home, End and the horizontal arrows to the text cursor', async () => {
+    const wrapper = await mountPanel()
+    const input = inputOf(wrapper).element
+
+    for (const key of ['Home', 'End', 'ArrowLeft', 'ArrowRight']) {
+      expect((await keydown(input, key)).defaultPrevented, key).toBe(false)
+    }
+    expect(activeOption(wrapper)?.textContent).toContain('Titel')
+  })
+
+  it('filters on the search model', async () => {
+    const wrapper = await mountPanel()
+
+    await inputOf(wrapper).setValue('foto')
+    await flushPromises()
+
+    expect(wrapper.emitted('update:search')!.at(-1)).toEqual(['foto'])
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(1)
+    expect(activeOption(wrapper)?.textContent).toContain('Afbeelding')
+  })
+
+  it('clears the search on Escape without letting a surrounding panel see it', async () => {
+    const wrapper = await mountPanel({ search: 'foto' })
+    const onDocument = vi.fn()
+    document.addEventListener('keydown', onDocument)
+
+    const event = await keydown(inputOf(wrapper).element, 'Escape')
+    document.removeEventListener('keydown', onDocument)
+
+    expect(event.defaultPrevented).toBe(true)
+    expect(wrapper.emitted('update:search')!.at(-1)).toEqual([''])
+    expect(wrapper.emitted('close')).toBeUndefined()
+    expect(onDocument).not.toHaveBeenCalled()
+  })
+
+  it('emits close on Escape in an empty field and lets the event through', async () => {
+    const wrapper = await mountPanel()
+    const onDocument = vi.fn()
+    document.addEventListener('keydown', onDocument)
+
+    await keydown(inputOf(wrapper).element, 'Escape')
+    document.removeEventListener('keydown', onDocument)
+
+    expect(wrapper.emitted('close')).toEqual([[]])
+    expect(onDocument).toHaveBeenCalledOnce()
+  })
+
+  it('passes close, select and highlight from the list through', async () => {
+    const wrapper = await mountPanel()
+
+    await keydown(listboxOf(wrapper).element, 'ArrowDown')
+    await keydown(listboxOf(wrapper).element, 'Enter')
+    await keydown(listboxOf(wrapper).element, 'Escape')
+
+    expect(wrapper.emitted('highlight')!.at(-1)).toEqual([ITEMS[2]])
+    expect(wrapper.emitted('select')).toEqual([[ITEMS[2]]])
+    expect(wrapper.emitted('close')).toEqual([[]])
+  })
+
+  it('tabs from the field to the listbox, and to the clear button when nothing matches', async () => {
+    const wrapper = await mountPanel({ previewEmptyText: 'Kies' })
+
+    expect(tabOrder(wrapper)).toEqual([inputOf(wrapper).element, listboxOf(wrapper).element])
+
+    await wrapper.setProps({ search: 'xyz' })
+    await flushPromises()
+
+    expect(tabOrder(wrapper)).toEqual([inputOf(wrapper).element, wrapper.find('button').element])
+  })
+
+  it('clears the search from the empty state and puts focus back in the field', async () => {
+    const wrapper = await mountPanel({ search: 'xyz' })
+    const button = wrapper.find('button').element as HTMLButtonElement
+
+    button.focus()
+    button.click()
+    await flushPromises()
+
+    expect(wrapper.emitted('update:search')!.at(-1)).toEqual([''])
+    expect(document.activeElement).toBe(inputOf(wrapper).element)
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(4)
+  })
+
+  it('has exactly one live region', async () => {
+    const wrapper = await mountPanel({ resultsAnnouncement: (n) => `${n} onderdelen` })
+
+    expect(wrapper.findAll('[aria-live]')).toHaveLength(1)
+  })
+
+  // jsdom's CSSOM drops `min(…, calc(100dvh - 5rem))`, so the height clamp is asserted in the
+  // Demo story in Chromium; only the width can be read here
+  it('sets its width, a number in pixels and a string as is', async () => {
+    const wrapper = await mountPanel()
+    expect((wrapper.element as HTMLElement).style.width).toBe('640px')
+
+    await wrapper.setProps({ width: '100%' })
+    expect((wrapper.element as HTMLElement).style.width).toBe('100%')
+  })
+
+  it('shows the preview while the row height is unknown', async () => {
+    const wrapper = await mountPanel()
+
+    expect(wrapper.find('[class*="aspect-"]').exists()).toBe(true)
+    expect(wrapper.find('.w-66').exists()).toBe(true)
+  })
+
+  it('drops the preview and widens the list below the threshold', async () => {
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(339)
+    const wrapper = await mountPanel()
+
+    expect(wrapper.find('[class*="aspect-"]').exists()).toBe(false)
+    expect(listboxOf(wrapper).element.parentElement!.parentElement!.className).toContain('w-full')
+  })
+
+  it('keeps the preview at the threshold', async () => {
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(340)
+    const wrapper = await mountPanel()
+
+    expect(wrapper.find('[class*="aspect-"]').exists()).toBe(true)
+  })
+
+  it('leaves the preview out at any height when preview is false', async () => {
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockReturnValue(800)
+    const wrapper = await mountPanel({ preview: false })
+
+    expect(wrapper.find('[class*="aspect-"]').exists()).toBe(false)
+    expect(listboxOf(wrapper).element.parentElement!.parentElement!.className).toContain('w-full')
+  })
+
+  it('passes busy and the append slot to the list', async () => {
+    const wrapper = await mountPanel(
+      { busy: true, search: 'zwembad' },
+      { append: '<div aria-hidden="true" data-test="placeholder" />' },
+    )
+
+    expect(listboxOf(wrapper).attributes('aria-busy')).toBe('true')
+    expect(listboxOf(wrapper).find('[data-test="placeholder"]').exists()).toBe(true)
+    expect(wrapper.text()).not.toContain(COPY.emptyTitle)
+  })
+
+  it('previews the highlighted item through the preview slot', async () => {
+    const wrapper = await mountPanel(
+      {},
+      { preview: '<template #preview="{ item }"><b>{{ item.id }}</b></template>' },
+    )
+    const preview = previewOf(wrapper)
+
+    expect(preview.find('b').text()).toBe('title')
+    expect(preview.text()).toContain('Een kop')
+
+    await keydown(inputOf(wrapper).element, 'ArrowDown')
+
+    expect(preview.find('b').text()).toBe('text')
+  })
+
+  it('shows the empty preview when nothing is highlighted', async () => {
+    const wrapper = await mountPanel(
+      { search: 'xyz' },
+      { preview: '<template #preview="{ item }"><b>{{ item.id }}</b></template>' },
+    )
+
+    expect(previewOf(wrapper).text()).toBe('Kies een onderdeel')
+
+    await wrapper.setProps({ search: 'zzz' })
+    const withSlot = await mountPanel({ search: 'xyz' }, { 'preview-empty': '<em>Leeg</em>' })
+
+    expect(previewOf(withSlot).find('em').text()).toBe('Leeg')
+  })
+
+  it('renders the header slot above the columns', async () => {
+    const wrapper = await mountPanel({}, { header: '<nav>Tabs</nav>' })
+
+    expect(wrapper.element.firstElementChild!.textContent).toBe('Tabs')
+  })
+
+  it('focuses the listbox on mount when not searchable', async () => {
+    const wrapper = await mountPanel({ searchable: false })
+
+    expect(inputOf(wrapper).exists()).toBe(false)
+    expect(document.activeElement).toBe(listboxOf(wrapper).element)
+  })
+
+  // Through a parent's template ref, as a consumer gets it: `wrapper.vm` would also reach
+  // setup state that was never exposed
+  it('exposes focus to a template ref', async () => {
+    const Parent = defineComponent({
+      components: { PickerPanel },
+      setup() {
+        const panel = ref<{ focus: () => void } | null>(null)
+        return { panel, items: ITEMS, groups: GROUPS, copy: COPY }
+      },
+      template: '<PickerPanel ref="panel" :items="items" :groups="groups" v-bind="copy" />',
+    })
+    const parent = mount(Parent, { attachTo: document.body })
+    await flushPromises()
+
+    parent.find<HTMLElement>('[role="listbox"]').element.focus()
+    parent.vm.panel!.focus()
+    await nextTick()
+
+    expect(document.activeElement).toBe(parent.find('input').element)
+    parent.unmount()
+  })
+})

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

@@ -0,0 +1,100 @@
+import { ref, watch } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ProgressBar from './ProgressBar.vue'
+
+export default {
+  title: 'Components/Organisms/Progress Bar',
+  component: ProgressBar,
+} satisfies Meta<typeof ProgressBar>
+
+type Story = StoryObj<typeof ProgressBar>
+
+// Keeps the stepper interactive in Storybook: clicking a completed step (or
+// picking one from the compact dropdown) actually navigates there, and the
+// button walks forward again.
+const interactiveRender: Story['render'] = (args) => ({
+  components: { ProgressBar },
+  setup() {
+    const currentStep = ref(args.currentStep)
+    watch(
+      () => args.currentStep,
+      (value) => (currentStep.value = value),
+    )
+    const next = () => {
+      currentStep.value = Math.min(currentStep.value + 1, args.steps - 1)
+    }
+    return { args, currentStep, next }
+  },
+  template: `
+    <ProgressBar v-bind="args" v-model:current-step="currentStep" />
+    <button
+      style="margin-top: 24px; cursor: pointer; border: 1px solid #d1d5db; border-radius: 8px; padding: 4px 12px; font-size: 12px;"
+      :disabled="currentStep >= args.steps - 1"
+      @click="next"
+    >
+      Volgende stap
+    </button>
+  `,
+})
+
+export const Default: Story = {
+  args: {
+    steps: 5,
+    currentStep: 0,
+  },
+}
+
+export const WithTitles: Story = {
+  render: interactiveRender,
+  args: {
+    steps: 5,
+    currentStep: 0,
+    stepTitles: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
+  },
+}
+
+export const ManySteps: Story = {
+  render: interactiveRender,
+  args: {
+    steps: 12,
+    currentStep: 4,
+    stepTitles: [
+      'Soort',
+      'Type',
+      'Inhoud',
+      'Template',
+      'Bewerk',
+      'Inplannen',
+      'Doelgroep',
+      'Kanalen',
+      'Budget',
+      'Planning',
+      'Controle',
+      'Verzenden',
+    ],
+  },
+}
+
+export const Percentage: Story = {
+  args: {
+    variant: 'percentage',
+    steps: 101,
+    currentStep: 90,
+  },
+}
+
+export const PercentageLow: Story = {
+  args: {
+    variant: 'percentage',
+    steps: 101,
+    currentStep: 5,
+  },
+}
+
+export const PercentageHalf: Story = {
+  args: {
+    variant: 'percentage',
+    steps: 101,
+    currentStep: 50,
+  },
+}