@nexxtmove/ui 2.6.0 → 2.8.0

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

@@ -0,0 +1,230 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import Tabs, { type NexxtTabItem } from './Tabs.vue'
+
+export default {
+  title: 'Components/Molecules/Tabs',
+  component: Tabs,
+  decorators: [
+    () => ({
+      template:
+        '<div style="min-height: 250px; padding: 16px; display: flex; align-items: center; justify-content: center; background-color: #F5F5F5;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof Tabs>
+
+type Story = StoryObj<typeof Tabs>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Tabs },
+    setup() {
+      const selected = ref('')
+      return { args, selected }
+    },
+    template: `<Tabs v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    tabs: ['Overzicht', 'Activiteiten & Communicatie', 'Tijdlijn'],
+  },
+}
+
+export const TwoTabs: Story = {
+  render: (args) => ({
+    components: { Tabs },
+    setup() {
+      const selected = ref(args.tabs[0])
+      return { args, selected }
+    },
+    template: `<Tabs v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    tabs: ['Active', 'Archived'],
+  },
+}
+
+export const ManyTabs: Story = {
+  render: (args) => ({
+    components: { Tabs },
+    setup() {
+      const selected = ref(args.tabs[0])
+      return { args, selected }
+    },
+    template: `<Tabs v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    tabs: ['Dashboard', 'Analytics', 'Reports', 'Users', 'Settings'],
+  },
+}
+
+export const WithIcons: Story = {
+  render: (args) => ({
+    components: { Tabs },
+    setup() {
+      const selected = ref('E-mail')
+      return { args, selected }
+    },
+    template: `<Tabs v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    tabs: [
+      { label: 'E-mail', icon: 'envelope' },
+      { label: 'WhatsApp', icon: 'whatsapp' },
+    ],
+  },
+}
+
+export const MixedStringAndIconTabs: Story = {
+  render: (args) => ({
+    components: { Tabs },
+    setup() {
+      const selected = ref('Overzicht')
+      return { args, selected }
+    },
+    template: `<Tabs v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    tabs: ['Overzicht', { label: 'E-mail', icon: 'envelope' }, { label: 'Funda', icon: 'funda' }],
+  },
+}
+
+const DEVICES: NexxtTabItem[] = [
+  { label: 'Desktop', icon: 'desktop' },
+  { label: 'Tablet', icon: 'tablet-screen-button' },
+  { label: 'Mobiel', icon: 'mobile-screen' },
+]
+
+/**
+ * `iconOnly` shows every tab as its icon alone. The label stays the `v-model` value and, in a
+ * visually hidden span, the tab's accessible name.
+ */
+export const IconOnly: Story = {
+  render: (args) => ({
+    components: { Tabs },
+    setup() {
+      const selected = ref('Desktop')
+      return { args, selected }
+    },
+    template: `<Tabs v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    tabs: DEVICES,
+    tablistLabel: 'Apparaat',
+    iconOnly: true,
+  },
+}
+
+/**
+ * A single tab can opt in or out with its own `iconOnly`, which wins over the tabs-wide prop.
+ */
+export const IconOnlyPerTab: Story = {
+  render: (args) => ({
+    components: { Tabs },
+    setup() {
+      const selected = ref('Overzicht')
+      return { args, selected }
+    },
+    template: `<Tabs v-bind="args" v-model="selected" />`,
+  }),
+  args: {
+    tabs: [
+      'Overzicht',
+      { label: 'E-mail', icon: 'envelope', iconOnly: true },
+      { label: 'WhatsApp', icon: 'whatsapp', iconOnly: true },
+    ],
+    tablistLabel: 'Kanaal',
+  },
+}
+
+const rect = (el: Element) => el.getBoundingClientRect()
+
+/** The pill and the white copy both sit exactly on the selected tab; every copy matches its tab. */
+const expectAligned = async (tablist: HTMLElement) => {
+  const tabs = within(tablist).getAllByRole('tab')
+  const pill = tablist.firstElementChild!
+  const copies = [...tablist.lastElementChild!.children]
+  const selectedTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true')!
+
+  await waitFor(
+    () => {
+      expect(rect(pill).left).toBeCloseTo(rect(selectedTab).left, 1)
+      expect(rect(pill).width).toBeCloseTo(rect(selectedTab).width, 1)
+    },
+    { timeout: 2000 },
+  )
+  copies.forEach((copy, index) => {
+    expect(rect(copy).left).toBeCloseTo(rect(tabs[index]).left, 1)
+    expect(rect(copy).width).toBeCloseTo(rect(tabs[index]).width, 1)
+  })
+}
+
+/**
+ * Switching `iconOnly` re-measures the pill, so it lands on the selected tab in either mode. In
+ * the app this follows a media query; here a checkbox stands in for it.
+ */
+export const IconOnlyToggle: Story = {
+  render: (args) => ({
+    components: { Tabs },
+    setup() {
+      const selected = ref('Tablet')
+      const iconOnly = ref(true)
+      return { args, selected, iconOnly }
+    },
+    template: `
+      <div class="flex flex-col items-center gap-4">
+        <label class="flex items-center gap-2 small-normal text-gray-950">
+          <input v-model="iconOnly" type="checkbox" />
+          Alleen iconen
+        </label>
+        <Tabs v-bind="args" v-model="selected" :icon-only="iconOnly" />
+      </div>
+    `,
+  }),
+  args: {
+    tabs: DEVICES,
+    tablistLabel: 'Apparaat',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const tablist = canvas.getByRole('tablist', { name: 'Apparaat' })
+    const toggle = canvas.getByRole('checkbox', { name: 'Alleen iconen' })
+
+    await document.fonts.ready
+
+    // icon-only: a near-square button per tab, still named after its label
+    for (const name of ['Desktop', 'Tablet', 'Mobiel']) {
+      const tab = canvas.getByRole('tab', { name })
+      expect(rect(tab).height).toBe(36)
+      expect(rect(tab).width).toBeLessThanOrEqual(48)
+    }
+    await expectAligned(tablist)
+    const compactWidth = rect(canvas.getByRole('tab', { name: 'Tablet' })).width
+
+    await userEvent.click(toggle)
+    await waitFor(() =>
+      expect(rect(canvas.getByRole('tab', { name: 'Tablet' })).width).toBeGreaterThan(compactWidth),
+    )
+    await expectAligned(tablist)
+
+    await userEvent.click(toggle)
+    await expectAligned(tablist)
+
+    // the keyboard and v-model work on the labels, as before
+    canvas.getByRole('tab', { name: 'Tablet' }).focus()
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(canvas.getByRole('tab', { name: 'Mobiel' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    )
+    await userEvent.keyboard('{Home}')
+    await expect(canvas.getByRole('tab', { name: 'Desktop' })).toHaveFocus()
+    await expectAligned(tablist)
+    await userEvent.keyboard('{End}')
+    await expect(canvas.getByRole('tab', { name: 'Mobiel' })).toHaveAttribute(
+      'aria-selected',
+      'true',
+    )
+    await expectAligned(tablist)
+  },
+}

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

@@ -0,0 +1,280 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import Tabs, { type NexxtTabItem } from './Tabs.vue'
+
+beforeEach(() => {
+  Object.defineProperty(document, 'fonts', {
+    value: { ready: Promise.resolve() },
+    configurable: true,
+  })
+})
+
+describe('Tabs', () => {
+  it('renders all tabs', () => {
+    const wrapper = mount(Tabs, { props: { tabs: ['One', 'Two', 'Three'] } })
+
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons).toHaveLength(3)
+    expect(buttons[0].text()).toBe('One')
+    expect(buttons[1].text()).toBe('Two')
+    expect(buttons[2].text()).toBe('Three')
+  })
+
+  it('marks the selected tab with aria-selected', () => {
+    const wrapper = mount(Tabs, {
+      props: { tabs: ['One', 'Two'], modelValue: 'Two' },
+    })
+
+    expect(wrapper.findAll('button')[1].attributes('aria-selected')).toBe('true')
+    expect(wrapper.findAll('button')[0].attributes('aria-selected')).toBe('false')
+  })
+
+  it('keeps every tab below the white overlay so the pill wipe stays smooth', () => {
+    const wrapper = mount(Tabs, {
+      props: { tabs: ['One', 'Two'], modelValue: 'One' },
+    })
+
+    // a tab painted above the z-20 overlay would flip to dark text instantly mid-transition
+    for (const button of wrapper.findAll('button')) {
+      expect(button.classes()).toContain('z-10')
+    }
+  })
+
+  it('emits update:modelValue when a tab is clicked', async () => {
+    const wrapper = mount(Tabs, {
+      props: { tabs: ['One', 'Two'], modelValue: 'One' },
+    })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['Two'])
+  })
+
+  it('updates the active tab after clicking', async () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: ['One', 'Two'],
+        modelValue: 'One',
+        'onUpdate:modelValue': (val: string) => wrapper.setProps({ modelValue: val }),
+      },
+    })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.findAll('button')[1].attributes('aria-selected')).toBe('true')
+    expect(wrapper.findAll('button')[0].attributes('aria-selected')).toBe('false')
+  })
+
+  it('accepts object tabs with icons alongside plain strings', () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: [{ label: 'E-mail', icon: 'envelope' as const }, { label: 'WhatsApp' }, 'Overig'],
+        modelValue: 'E-mail',
+      },
+    })
+
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons).toHaveLength(3)
+    expect(buttons[0].text()).toBe('E-mail')
+    expect(buttons[1].text()).toBe('WhatsApp')
+    expect(buttons[2].text()).toBe('Overig')
+    expect(buttons[0].find('.fa-envelope').exists()).toBe(true)
+    expect(buttons[1].find('i').exists()).toBe(false)
+  })
+
+  it('renders the icon in the clipped overlay too, so the pill stays aligned', () => {
+    const wrapper = mount(Tabs, {
+      props: { tabs: [{ label: 'E-mail', icon: 'envelope' as const }], modelValue: 'E-mail' },
+    })
+
+    const overlay = wrapper.find('[aria-hidden="true"].absolute.inset-0')
+
+    expect(overlay.find('.fa-envelope').exists()).toBe(true)
+    expect(overlay.text()).toBe('E-mail')
+  })
+
+  it('emits the label when an object tab is clicked', async () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: [{ label: 'E-mail', icon: 'envelope' as const }, { label: 'WhatsApp' }],
+        modelValue: 'E-mail',
+      },
+    })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['WhatsApp'])
+  })
+
+  it('moves selection with arrow keys across object tabs', async () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: ['One', { label: 'Two', icon: 'envelope' as const }],
+        modelValue: 'One',
+      },
+    })
+
+    await wrapper.findAll('button')[0].trigger('keydown', { key: 'ArrowRight' })
+
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['Two'])
+  })
+
+  it('renders the slider element', () => {
+    const wrapper = mount(Tabs, { props: { tabs: ['One', 'Two'] } })
+
+    expect(wrapper.find('.bg-cornflower-blue-500').exists()).toBe(true)
+  })
+
+  describe('iconOnly', () => {
+    const devices: NexxtTabItem[] = [
+      { label: 'Desktop', icon: 'desktop' },
+      { label: 'Tablet', icon: 'tablet-screen-button' },
+      { label: 'Mobiel', icon: 'mobile-screen' },
+    ]
+
+    const overlayOf = (wrapper: ReturnType<typeof mount>) =>
+      wrapper.find('[aria-hidden="true"].absolute.inset-0')
+
+    let warn: ReturnType<typeof vi.spyOn>
+
+    beforeEach(() => {
+      warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+      warn.mockRestore()
+    })
+
+    it('keeps the label only as visually hidden text, the name of the tab', () => {
+      const wrapper = mount(Tabs, {
+        props: { tabs: devices, modelValue: 'Desktop', iconOnly: true },
+      })
+
+      for (const [index, button] of wrapper.findAll('button').entries()) {
+        const hidden = button.find('.sr-only')
+        expect(hidden.text()).toBe(devices[index].label)
+        expect(button.text()).toBe(hidden.text())
+        expect(button.find('i').attributes('aria-hidden')).toBe('true')
+        expect(button.attributes('aria-label')).toBeUndefined()
+      }
+    })
+
+    it('shows only the icons in the white overlay, so it matches the buttons', () => {
+      const wrapper = mount(Tabs, {
+        props: { tabs: devices, modelValue: 'Desktop', iconOnly: true },
+      })
+
+      const overlay = overlayOf(wrapper)
+
+      expect(overlay.text()).toBe('')
+      expect(overlay.findAll('i')).toHaveLength(3)
+      // a copy is as wide as its button only when it carries the same spacing
+      wrapper.findAll('button').forEach((button, index) => {
+        const copy = overlay.findAll('span')[index]
+        const spacing = ['gap-2', 'px-3', 'px-4']
+        expect(copy.classes().filter((name) => spacing.includes(name))).toEqual(
+          button.classes().filter((name) => spacing.includes(name)),
+        )
+      })
+    })
+
+    it('renders the same markup with iconOnly false as without the prop', () => {
+      const without = mount(Tabs, { props: { tabs: devices, modelValue: 'Tablet' } })
+      const off = mount(Tabs, { props: { tabs: devices, modelValue: 'Tablet', iconOnly: false } })
+
+      expect(off.element.outerHTML).toBe(without.element.outerHTML)
+      expect(without.find('.sr-only').exists()).toBe(false)
+    })
+
+    it('still emits the label on click and on arrow, Home and End keys', async () => {
+      const wrapper = mount(Tabs, {
+        props: {
+          tabs: devices,
+          modelValue: 'Tablet',
+          iconOnly: true,
+          'onUpdate:modelValue': (value: string) => wrapper.setProps({ modelValue: value }),
+        },
+      })
+      const buttons = wrapper.findAll('button')
+
+      await buttons[0].trigger('click')
+      await buttons[0].trigger('keydown', { key: 'ArrowLeft' })
+      await buttons[2].trigger('keydown', { key: 'Home' })
+      await buttons[0].trigger('keydown', { key: 'End' })
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([
+        ['Desktop'],
+        ['Mobiel'],
+        ['Desktop'],
+        ['Mobiel'],
+      ])
+      expect(buttons[2].attributes('aria-selected')).toBe('true')
+    })
+
+    it('lets a tab opt in or out on its own', () => {
+      const wrapper = mount(Tabs, {
+        props: {
+          tabs: [
+            { label: 'Desktop', icon: 'desktop' as const, iconOnly: false },
+            { label: 'Tablet', icon: 'tablet-screen-button' as const },
+          ],
+          iconOnly: true,
+        },
+      })
+      const [desktop, tablet] = wrapper.findAll('button')
+
+      expect(desktop.find('.sr-only').exists()).toBe(false)
+      expect(tablet.find('.sr-only').exists()).toBe(true)
+
+      const single = mount(Tabs, {
+        props: { tabs: [{ label: 'E-mail', icon: 'envelope' as const, iconOnly: true }, 'Overig'] },
+      })
+      expect(single.findAll('button')[0].find('.sr-only').text()).toBe('E-mail')
+      expect(single.findAll('button')[1].find('.sr-only').exists()).toBe(false)
+    })
+
+    it('shows the label of a tab without an icon, and warns about it', () => {
+      const wrapper = mount(Tabs, {
+        props: { tabs: [{ label: 'Desktop', icon: 'desktop' as const }, 'Overig'], iconOnly: true },
+      })
+      const plain = wrapper.findAll('button')[1]
+
+      expect(plain.find('.sr-only').exists()).toBe(false)
+      expect(plain.text()).toBe('Overig')
+      expect(overlayOf(wrapper).text()).toBe('Overig')
+      expect(warn).toHaveBeenCalledTimes(1)
+      expect(warn.mock.calls[0][0]).toContain('"Overig"')
+    })
+
+    it('does not warn when every icon-only tab has an icon', () => {
+      mount(Tabs, { props: { tabs: devices, iconOnly: true } })
+
+      expect(warn).not.toHaveBeenCalled()
+    })
+
+    it('re-measures the pill when iconOnly switches', async () => {
+      // jsdom has no layout: give each tab a width that follows its mode
+      const rect = vi
+        .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
+        .mockImplementation(function (this: HTMLElement) {
+          if (this.getAttribute('role') !== 'tab') return new DOMRect(0, 0, 0, 36)
+          const width = this.querySelector('.sr-only') ? 44 : 100
+          return new DOMRect(0, 0, width, 36)
+        })
+      const wrapper = mount(Tabs, { props: { tabs: devices, modelValue: 'Desktop' } })
+      const pill = () => wrapper.find('.bg-cornflower-blue-500').attributes('style')
+
+      await flushPromises()
+      expect(pill()).toContain('width: 100px')
+
+      await wrapper.setProps({ iconOnly: true })
+      await flushPromises()
+      expect(pill()).toContain('width: 44px')
+
+      rect.mockRestore()
+    })
+  })
+})