@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,452 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test'
+import { computed, defineComponent, ref } from 'vue'
+import NexxtButton from '../../atoms/Button/Button.vue'
+import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
+import NexxtIcon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
+import NexxtTabs from '../../molecules/Tabs/Tabs.vue'
+import type {
+  NexxtPickerGroupData,
+  NexxtPickerItemData,
+} from '../../molecules/PickerList/PickerList.vue'
+import PickerPanel from './PickerPanel.vue'
+
+const GROUPS: NexxtPickerGroupData[] = [
+  { id: 'basis', label: 'Basis', defaultOpen: true },
+  { id: 'media', label: 'Media', defaultOpen: true },
+]
+
+const ITEMS: NexxtPickerItemData[] = [
+  {
+    id: 'intro',
+    label: 'Introductie',
+    icon: 'sparkles',
+    keywords: ['welkom', 'opening'],
+    description: 'Een korte opening bovenaan de pagina.',
+  },
+  {
+    id: 'title',
+    label: 'Titel',
+    icon: 'heading',
+    group: 'basis',
+    keywords: ['kop', 'heading'],
+    description: 'Een kop die een nieuw onderdeel inleidt.',
+  },
+  {
+    id: 'text',
+    label: 'Tekst',
+    icon: 'font',
+    group: 'basis',
+    keywords: ['alinea', 'paragraaf'],
+    description: 'Een of meer alinea’s lopende tekst.',
+  },
+  {
+    id: 'table',
+    label: 'Tabel',
+    icon: 'table',
+    group: 'basis',
+    keywords: ['rijen', 'kolommen'],
+    disabled: true,
+    description: 'Nog niet beschikbaar.',
+  },
+  {
+    id: 'quote',
+    label: 'Citaat',
+    icon: 'quote-left',
+    group: 'basis',
+    keywords: ['quote', 'uitspraak'],
+    description: 'Een uitgelichte uitspraak met bron.',
+  },
+  {
+    id: 'image',
+    label: 'Afbeelding',
+    icon: 'image',
+    group: 'media',
+    keywords: ['foto', 'plaatje'],
+    description: 'Een foto of illustratie over de volle breedte.',
+  },
+  {
+    id: 'video',
+    label: 'Video',
+    icon: 'video',
+    group: 'media',
+    keywords: ['film', 'youtube'],
+    description: 'Een ingesloten video met afspeelknop.',
+  },
+  {
+    id: 'gallery',
+    label: 'Galerij',
+    icon: 'images',
+    group: 'media',
+    keywords: ['album', 'fotos'],
+    description: 'Meerdere afbeeldingen in een raster.',
+  },
+]
+
+const COMBINED_ITEMS: NexxtPickerItemData[] = [
+  {
+    id: 'hero',
+    label: 'Openingsbeeld',
+    icon: 'panorama',
+    description: 'Groot beeld met titel eroverheen.',
+  },
+  {
+    id: 'features',
+    label: 'Kenmerken',
+    icon: 'list-check',
+    description: 'Drie kolommen met icoon en tekst.',
+  },
+  {
+    id: 'contact',
+    label: 'Contact',
+    icon: 'address-card',
+    description: 'Gegevens en een knop om te bellen.',
+  },
+]
+
+const COPY = {
+  ariaLabel: 'Onderdeel kiezen',
+  listLabel: 'Onderdelen',
+  searchLabel: 'Zoek een onderdeel',
+  searchPlaceholder: 'Zoeken',
+  emptyTitle: 'Geen onderdelen gevonden',
+  emptyDescription: (search: string) => `Geen resultaat voor '${search}'.`,
+  clearLabel: 'Wis zoekopdracht',
+  previewEmptyText: 'Kies een onderdeel om een voorbeeld te zien.',
+  resultsAnnouncement: (count: number) =>
+    count === 1 ? '1 onderdeel gevonden' : `${count} onderdelen gevonden`,
+}
+
+/** A neutral stand-in for real preview art: one plane, one outline, the item's icon. */
+const DummyPreview = defineComponent({
+  components: { NexxtIcon },
+  props: { icon: { type: String as () => NexxtIconName, required: true } },
+  template: `
+    <div class="relative size-full">
+      <svg viewBox="0 0 320 200" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" aria-hidden="true" focusable="false" class="absolute inset-0">
+        <rect x="16" y="16" width="288" height="168" rx="6" fill="var(--color-gray-100)" stroke="var(--color-gray-300)" stroke-width="2" vector-effect="non-scaling-stroke" />
+      </svg>
+      <div class="absolute inset-0 grid place-items-center text-5xl text-cornflower-blue-500">
+        <NexxtIcon :name="icon" aria-hidden="true" />
+      </div>
+    </div>
+  `,
+})
+
+/** Stands in for the surface a FloatingPanel or a sidebar would give the panel. */
+const SURFACE_CLASSES = 'inline-block overflow-hidden rounded-xl border border-gray-200 bg-white'
+
+export default {
+  title: 'Components/Organisms/PickerPanel',
+  component: PickerPanel,
+  args: {
+    items: ITEMS,
+    groups: GROUPS,
+    ...COPY,
+    onSelect: fn(),
+    onClose: fn(),
+  },
+} satisfies Meta<typeof PickerPanel>
+
+type Story = StoryObj<typeof PickerPanel>
+
+const renderPanel =
+  (initialSearch = '') =>
+  (args: Story['args']) => ({
+    components: { PickerPanel, DummyPreview },
+    setup() {
+      const highlighted = ref<string | null>(null)
+      const search = ref(initialSearch)
+      const closed = ref(0)
+      const onClose = () => {
+        closed.value++
+        args?.onClose?.()
+      }
+      return { args, highlighted, search, closed, onClose, surface: SURFACE_CLASSES }
+    },
+    template: `
+      <div class="flex flex-col items-start gap-3">
+        <div :class="surface">
+          <PickerPanel
+            v-bind="args"
+            v-model:highlighted="highlighted"
+            v-model:search="search"
+            @close="onClose"
+          >
+            <template #preview="{ item }">
+              <DummyPreview :icon="item.icon" />
+            </template>
+          </PickerPanel>
+        </div>
+        <dl class="grid grid-cols-[auto_1fr] gap-x-3 extra-small-normal text-gray-700">
+          <dt>highlighted</dt><dd><code data-testid="highlighted">{{ highlighted }}</code></dd>
+          <dt>search</dt><dd><code data-testid="search">{{ search }}</code></dd>
+          <dt>close</dt><dd><code data-testid="closed">{{ closed }}</code></dd>
+        </dl>
+      </div>
+    `,
+  })
+
+const inputOf = (canvasElement: HTMLElement) => within(canvasElement).getByRole('combobox')
+const listboxOf = (canvasElement: HTMLElement) => within(canvasElement).getByRole('listbox')
+
+const activeLabel = (canvasElement: HTMLElement) => {
+  const id = inputOf(canvasElement).getAttribute('aria-activedescendant')
+  const option = id ? document.getElementById(id) : null
+  return (
+    Array.from(option?.querySelectorAll(':scope > span:not([hidden])') ?? [])
+      .at(-1)
+      ?.textContent?.trim() ?? null
+  )
+}
+
+/**
+ * The demo: two groups, one ungrouped item, one disabled item with its reason, and a dummy
+ * preview. Both models are logged under the panel.
+ */
+export const Demo: Story = {
+  render: renderPanel(),
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = inputOf(canvasElement)
+    const listbox = listboxOf(canvasElement)
+    const panel = canvas.getByRole('group', { name: 'Onderdeel kiezen' })
+
+    // focus lands in the field, with the first enabled item highlighted
+    await waitFor(() => expect(input).toHaveFocus())
+    await expect(activeLabel(canvasElement)).toBe('Introductie')
+    await expect(canvas.getByTestId('highlighted')).toHaveTextContent('intro')
+    await expect(input).toHaveAttribute('aria-controls', listbox.id)
+
+    // 640 wide; the height is 420, or the viewport minus 5rem when that is less
+    const rect = panel.getBoundingClientRect()
+    await expect(rect.width).toBe(640)
+    await expect(rect.height).toBeCloseTo(Math.min(420, window.innerHeight - 80), 0)
+
+    // the input stays inside the padded search block of the 264px column, so its own
+    // `min-w-60` no longer pushes it under the clipping edge
+    const column = listbox.parentElement!.parentElement!
+    const searchBlock = column.firstElementChild!
+    const padding = parseFloat(getComputedStyle(searchBlock).paddingRight)
+    await expect(column.getBoundingClientRect().width).toBe(264)
+    await expect(input.getBoundingClientRect().right).toBeLessThanOrEqual(
+      searchBlock.getBoundingClientRect().right - padding,
+    )
+
+    // a group after an ungrouped item gets its 8px on top of the 2px row gap
+    const intro = document.getElementById(listbox.getAttribute('aria-activedescendant')!)!
+    // the list overflows, and the ungrouped option still keeps its full 36px
+    await expect(listbox.scrollHeight).toBeGreaterThan(listbox.clientHeight)
+    await expect(intro.getBoundingClientRect().height).toBe(36)
+    const firstGroup = within(listbox).getAllByRole('group')[0]
+    await expect(
+      Math.round(firstGroup.getBoundingClientRect().top - intro.getBoundingClientRect().bottom),
+    ).toBe(10)
+
+    // the arrows, PageDown and Enter drive the list while focus stays in the field
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(activeLabel(canvasElement)).toBe('Titel')
+    await userEvent.keyboard('{PageDown}')
+    await expect(activeLabel(canvasElement)).toBe('Galerij')
+    await userEvent.keyboard('{ArrowUp}{Enter}')
+    await expect(args.onSelect).toHaveBeenLastCalledWith(ITEMS[6])
+    await expect(input).toHaveFocus()
+
+    // the preview follows the highlight
+    const preview = panel.querySelector<HTMLElement>('[aria-hidden="true"].flex-col')!
+    await expect(preview).toHaveTextContent('Een ingesloten video met afspeelknop.')
+
+    // Escape twice: first the term goes, then the panel asks to close
+    await userEvent.type(input, 'foto')
+    await expect(activeLabel(canvasElement)).toBe('Afbeelding')
+    await userEvent.keyboard('{Escape}')
+    await expect(canvas.getByTestId('search')).toHaveTextContent('')
+    await expect(canvas.getByTestId('closed')).toHaveTextContent('0')
+    await userEvent.keyboard('{Escape}')
+    await expect(canvas.getByTestId('closed')).toHaveTextContent('1')
+
+    // tab order: field, listbox; the preview has no stops
+    await userEvent.tab()
+    await expect(listbox).toHaveFocus()
+    await userEvent.tab()
+    await expect(panel.contains(document.activeElement)).toBe(false)
+  },
+}
+
+/**
+ * How the app uses it: in a `NexxtFloatingPanel` with `surface="raised"` and `fit-height`. The
+ * picker takes its preferred 420px, or less when the roomiest side of the trigger has less room:
+ * `:height="Math.min(420, availableHeight ?? 420)"`. Escape first clears the term, then closes;
+ * both `@close`s fire and put focus back on the trigger.
+ */
+export const InFloatingPanel: Story = {
+  render: (args) => ({
+    components: { PickerPanel, NexxtFloatingPanel, NexxtButton, DummyPreview },
+    setup() {
+      const trigger = ref<InstanceType<typeof NexxtButton> | null>(null)
+      const search = ref('')
+      // idempotent: the panel and the FloatingPanel both report the same Escape
+      const onClosed = () => (trigger.value?.$el as HTMLElement | undefined)?.focus()
+      return { args, trigger, search, onClosed }
+    },
+    template: `
+      <div class="flex min-h-132 items-start justify-center p-6">
+        <NexxtFloatingPanel surface="raised" fit-height placement="bottom" @close="onClosed">
+          <template #trigger="{ isOpen, toggle }">
+            <NexxtButton ref="trigger" variant="secondary" icon="plus" :aria-expanded="isOpen" @click="toggle">
+              Onderdeel kiezen
+            </NexxtButton>
+          </template>
+          <template #content="{ close, availableHeight }">
+            <PickerPanel
+              v-bind="args"
+              :height="Math.min(420, availableHeight ?? 420)"
+              v-model:search="search"
+              @select="(item) => { args.onSelect(item); close() }"
+              @close="close"
+            >
+              <template #preview="{ item }">
+                <DummyPreview :icon="item.icon" />
+              </template>
+            </PickerPanel>
+          </template>
+        </NexxtFloatingPanel>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const trigger = canvas.getByRole('button', { name: 'Onderdeel kiezen' })
+
+    await userEvent.click(trigger)
+    const input = await canvas.findByRole('combobox')
+    await waitFor(() => expect(input).toHaveFocus())
+
+    // positioning element > transition wrapper > surface
+    const floating = input.closest('.z-50')!
+    const surface = floating.firstElementChild!.firstElementChild!
+    await expect(surface.scrollHeight).toBe(surface.clientHeight)
+    const rect = floating.getBoundingClientRect()
+    await expect(rect.top).toBeGreaterThanOrEqual(8)
+    await expect(rect.bottom).toBeLessThanOrEqual(document.documentElement.clientHeight - 8)
+
+    await userEvent.type(input, 'video')
+    await userEvent.keyboard('{Escape}')
+    await expect(input).toHaveValue('')
+    await expect(canvas.queryByRole('combobox')).toBe(input)
+
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(canvas.queryByRole('combobox')).toBeNull())
+    await expect(trigger).toHaveFocus()
+  },
+}
+
+const TABS = ['Onderdelen', 'Combinaties']
+
+/** `NexxtTabs` in the header swaps the items; the panel keeps its size. */
+export const WithHeader: Story = {
+  render: (args) => ({
+    components: { PickerPanel, NexxtTabs, DummyPreview },
+    setup() {
+      const tab = ref(TABS[0])
+      const items = computed(() => (tab.value === TABS[0] ? ITEMS : COMBINED_ITEMS))
+      const groups = computed(() => (tab.value === TABS[0] ? GROUPS : []))
+      return { args, tab, tabs: TABS, items, groups, surface: SURFACE_CLASSES }
+    },
+    template: `
+      <div :class="surface">
+        <PickerPanel v-bind="args" :items="items" :groups="groups">
+          <template #header>
+            <NexxtTabs v-model="tab" :tabs="tabs" tablist-label="Soort inhoud" />
+          </template>
+          <template #preview="{ item }">
+            <DummyPreview :icon="item.icon" />
+          </template>
+        </PickerPanel>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.click(canvas.getByRole('tab', { name: 'Combinaties' }))
+    await waitFor(() => expect(canvas.getAllByRole('option')).toHaveLength(COMBINED_ITEMS.length))
+    await expect(activeLabel(canvasElement)).toBe('Openingsbeeld')
+  },
+}
+
+/** 320 high: the column row drops under 340px, so the preview goes and the list takes the width. */
+export const Low: Story = {
+  args: { height: 320 },
+  render: renderPanel(),
+  play: async ({ canvasElement }) => {
+    const panel = within(canvasElement).getByRole('group', { name: 'Onderdeel kiezen' })
+    // listbox → list root → list column
+    const column = listboxOf(canvasElement).parentElement!.parentElement!
+
+    await expect(panel.querySelector('[class*="aspect-"]')).toBeNull()
+    await expect(column.getBoundingClientRect().width).toBe(panel.getBoundingClientRect().width)
+  },
+}
+
+/** No results: the clear button empties the term and puts focus back in the field. */
+export const SearchEmpty: Story = {
+  render: renderPanel('zwembad'),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = inputOf(canvasElement)
+
+    await waitFor(() => expect(input).toHaveFocus())
+    await expect(canvas.getByText("Geen resultaat voor 'zwembad'.")).toBeVisible()
+    await expect(canvas.getByText('Kies een onderdeel om een voorbeeld te zien.')).toBeVisible()
+
+    // field, then straight to the clear button: an empty listbox is no tab stop
+    await userEvent.tab()
+    const clear = canvas.getByRole('button', { name: 'Wis zoekopdracht' })
+    await expect(clear).toHaveFocus()
+
+    await userEvent.keyboard('{Enter}')
+    await expect(input).toHaveFocus()
+    await expect(input).toHaveValue('')
+    await waitFor(() => expect(canvas.getAllByRole('option')).toHaveLength(ITEMS.length))
+  },
+}
+
+/** Escape clears the search, and the highlighted item stays fully in view in the whole list. */
+export const ClearSearch: Story = {
+  render: renderPanel(),
+  play: async ({ canvasElement }) => {
+    const input = inputOf(canvasElement)
+    const listbox = listboxOf(canvasElement)
+
+    await waitFor(() => expect(input).toHaveFocus())
+    await userEvent.type(input, 'gal')
+    await expect(activeLabel(canvasElement)).toBe('Galerij')
+
+    await userEvent.keyboard('{Escape}')
+    await expect(input).toHaveValue('')
+    await expect(activeLabel(canvasElement)).toBe('Galerij')
+    await waitFor(() => {
+      const option = document.getElementById(input.getAttribute('aria-activedescendant')!)!
+      const box = listbox.getBoundingClientRect()
+      const rect = option.getBoundingClientRect()
+      expect(rect.top).toBeGreaterThanOrEqual(box.top - 0.5)
+      expect(rect.bottom).toBeLessThanOrEqual(box.bottom + 0.5)
+    })
+  },
+}
+
+/** Without a search field the listbox takes focus on mount. */
+export const NotSearchable: Story = {
+  args: { searchable: false },
+  render: renderPanel(),
+  play: async ({ canvasElement }) => {
+    const listbox = listboxOf(canvasElement)
+
+    await waitFor(() => expect(listbox).toHaveFocus())
+    await expect(within(canvasElement).queryByRole('combobox')).toBeNull()
+
+    await userEvent.keyboard('g')
+    await expect(listbox.getAttribute('aria-activedescendant')).toMatch(/-opt-gallery$/)
+  },
+}