@nexxtmove/ui 2.6.0 → 2.8.0

package/src/components/atoms/Icon/Icon.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Icon, { type IconType } from './Icon.vue'
+
+export default {
+  title: 'Components/Atoms/Icon',
+  component: Icon,
+  // icons size with the surrounding font-size, so scale the canvas up to see them
+  decorators: [() => ({ template: '<div class="text-5xl"><story /></div>' })],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['light', 'regular', 'solid', 'duotone'] satisfies IconType[],
+    },
+    name: {
+      // Font Awesome ships ~4300 names; this is a browsable sample plus the local SVG icons.
+      // Any kit icon name is valid — type one in the control to use it.
+      control: 'select',
+      options: ['star', 'house', 'check', 'arrows-up-down', 'github', 'whatsapp', 'funda'],
+    },
+  },
+} satisfies Meta<typeof Icon>
+
+type Story = StoryObj<typeof Icon>
+
+export const Regular: Story = {
+  args: {
+    name: 'star',
+    type: 'regular',
+  },
+}
+
+export const Light: Story = {
+  args: {
+    name: 'star',
+    type: 'light',
+  },
+}
+
+export const Solid: Story = {
+  args: {
+    name: 'star',
+    type: 'solid',
+  },
+}
+
+export const Duotone: Story = {
+  args: {
+    name: 'star',
+    type: 'duotone',
+  },
+}
+
+export const Brands: Story = {
+  args: {
+    name: 'github',
+  },
+}
+
+export const Funda: Story = {
+  args: {
+    name: 'funda',
+  },
+}

package/src/components/atoms/Icon/Icon.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Icon from './Icon.vue'
+
+describe('Icon', () => {
+  it('renders as an <i> tag', () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'star',
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('I')
+  })
+
+  it('renders correctly with name', async () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'star',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('fa-star')
+
+    await wrapper.setProps({ name: 'arrows-up-down' })
+
+    expect(wrapper.classes()).toContain('fa-arrows-up-down')
+  })
+
+  it('applies default type "light"', () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'star',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('fa-light')
+  })
+
+  it('applies specified type', async () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'star',
+        type: 'regular',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('fa-regular')
+
+    await wrapper.setProps({ type: 'light' })
+    expect(wrapper.classes()).toContain('fa-light')
+
+    await wrapper.setProps({ type: 'solid' })
+    expect(wrapper.classes()).toContain('fa-solid')
+
+    await wrapper.setProps({ type: 'duotone' })
+    expect(wrapper.classes()).toContain('fa-duotone')
+  })
+
+  it('applies fa-brands automatically for brand icon names', async () => {
+    const wrapper = mount(Icon, { props: { name: 'whatsapp' } })
+    expect(wrapper.classes()).toContain('fa-brands')
+    expect(wrapper.classes()).not.toContain('fa-light')
+
+    await wrapper.setProps({ name: 'house' })
+    expect(wrapper.classes()).toContain('fa-light')
+    expect(wrapper.classes()).not.toContain('fa-brands')
+  })
+
+  it('renders a local svg for custom brand icons', () => {
+    const wrapper = mount(Icon, { props: { name: 'funda' } })
+
+    expect(wrapper.element.tagName).toBe('svg')
+    expect(wrapper.classes()).toContain('size-[1em]')
+    expect(wrapper.classes()).toContain('fill-current')
+    expect(wrapper.find('i').exists()).toBe(false)
+  })
+
+  it('applies basic layout classes', () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'star',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('items-center')
+    expect(wrapper.classes()).toContain('justify-center')
+  })
+})

package/src/components/atoms/Loader/Loader.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Loader from './Loader.vue'
+
+export default {
+  title: 'Components/Atoms/Loader',
+  component: Loader,
+} satisfies Meta<typeof Loader>
+
+type Story = StoryObj<typeof Loader>
+
+export const Default: Story = {}
+
+/** A size class on the root overrides the 96px default. */
+export const Sizes: Story = {
+  render: () => ({
+    components: { Loader },
+    setup: () => ({ sizes: ['size-8', 'size-12', 'size-24', 'size-40'] }),
+    template: `
+      <div class="flex items-end gap-8">
+        <Loader v-for="size in sizes" :key="size" :class="size" />
+      </div>
+    `,
+  }),
+}
+
+/** Filling its container, the way a page shows it while its data loads. */
+export const FullArea: Story = {
+  render: () => ({
+    components: { Loader },
+    template: `
+      <div class="flex h-64 w-96 items-center justify-center rounded-xl border border-gray-200">
+        <Loader />
+      </div>
+    `,
+  }),
+}

package/src/components/atoms/Loader/Loader.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Loader from './Loader.vue'
+
+describe('Loader', () => {
+  it('renders an svg as its root', () => {
+    const wrapper = mount(Loader)
+
+    expect(wrapper.element.tagName).toBe('svg')
+  })
+
+  it('renders the eight logo blocks', () => {
+    const wrapper = mount(Loader)
+
+    expect(wrapper.findAll('rect')).toHaveLength(8)
+  })
+
+  it('announces itself as a status with a Dutch default label', () => {
+    const wrapper = mount(Loader)
+
+    expect(wrapper.attributes('role')).toBe('status')
+    expect(wrapper.attributes('aria-label')).toBe('Bezig met laden')
+  })
+
+  it('takes a custom label', () => {
+    const wrapper = mount(Loader, { props: { label: 'Voorstel wordt opgebouwd' } })
+
+    expect(wrapper.attributes('aria-label')).toBe('Voorstel wordt opgebouwd')
+  })
+
+  it('sizes itself with presentation attributes so a size class always wins', () => {
+    const wrapper = mount(Loader, { attrs: { class: 'size-12' } })
+
+    // width/height attributes lose to any CSS rule, so the consumer's size
+    // class overrides the default regardless of Tailwind's output order.
+    expect(wrapper.attributes('width')).toBe('96')
+    expect(wrapper.attributes('height')).toBe('96')
+    expect(wrapper.classes()).toEqual(['size-12'])
+  })
+})

package/src/components/atoms/PickerItem/PickerItem.stories.ts

@@ -0,0 +1,172 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test'
+import PickerItem from './PickerItem.vue'
+
+/**
+ * An option needs a listbox parent: without it axe reports `aria-required-parent`, and the ring
+ * of a highlighted item only shows inside a focused `group/listbox`.
+ */
+const LISTBOX_CLASSES =
+  'group/listbox flex w-66 flex-col gap-0.5 rounded-xl border border-gray-200 bg-white p-2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cornflower-blue-500'
+
+export default {
+  title: 'Components/Atoms/PickerItem',
+  component: PickerItem,
+  args: {
+    id: 'picker-item-demo',
+    label: 'Afbeelding',
+    icon: 'image',
+    highlighted: false,
+    disabled: false,
+    description: 'Een foto of illustratie over de volle breedte.',
+    onSelect: fn(),
+    onHighlight: fn(),
+  },
+  render: (args) => ({
+    components: { PickerItem },
+    setup: () => ({ args, classes: LISTBOX_CLASSES }),
+    template: `
+      <div role="listbox" aria-label="Voorbeeld" tabindex="0" :class="classes">
+        <PickerItem v-bind="args" />
+      </div>
+    `,
+  }),
+} satisfies Meta<typeof PickerItem>
+
+type Story = StoryObj<typeof PickerItem>
+
+export const Playground: Story = {}
+
+/**
+ * Every state side by side. Active is the pressed state (`active:`), so press and hold an
+ * enabled row to see it; the ring on the highlighted row appears once the list has keyboard
+ * focus (Tab into it), see "Focused listbox".
+ */
+export const States: Story = {
+  render: (args) => ({
+    components: { PickerItem },
+    setup: () => ({ args, classes: LISTBOX_CLASSES }),
+    template: `
+      <div role="listbox" aria-label="Staten" tabindex="0" :class="classes">
+        <PickerItem id="state-default" label="Standaard" icon="image" @select="args.onSelect" />
+        <PickerItem id="state-highlighted" label="Gemarkeerd" icon="heading" highlighted />
+        <PickerItem
+          id="state-disabled"
+          label="Uitgeschakeld"
+          icon="table"
+          disabled
+          description="Nog niet beschikbaar."
+          @select="args.onSelect"
+        />
+        <PickerItem
+          id="state-disabled-highlighted"
+          label="Uitgeschakeld en gemarkeerd"
+          icon="table"
+          disabled
+          highlighted
+          description="Nog niet beschikbaar."
+        />
+        <PickerItem
+          id="state-long"
+          label="Een heel lang label dat niet in de kolom past en wordt afgekapt"
+          icon="font"
+          highlighted
+        />
+        <PickerItem id="state-no-icon" label="Zonder icoon" />
+        <PickerItem id="state-slot" label="Met eigen inhoud">
+          <span class="flex size-5 shrink-0 items-center justify-center rounded-md bg-gray-100 text-gray-700 extra-small-semibold">
+            A
+          </span>
+          <span class="min-w-0 flex-1 truncate small-normal text-gray-900">Met eigen inhoud</span>
+        </PickerItem>
+      </div>
+    `,
+  }),
+  play: async ({ args, canvasElement }) => {
+    const options = Array.from(canvasElement.querySelectorAll<HTMLElement>('[role="option"]'))
+
+    // one option per item, each with its own id and a selected state that follows `highlighted`
+    await expect(options.map((option) => option.id)).toEqual([
+      'state-default',
+      'state-highlighted',
+      'state-disabled',
+      'state-disabled-highlighted',
+      'state-long',
+      'state-no-icon',
+      'state-slot',
+    ])
+    await expect(options[0]).toHaveAttribute('aria-selected', 'false')
+    await expect(options[1]).toHaveAttribute('aria-selected', 'true')
+
+    // nothing inside an option can take focus
+    await expect(
+      canvasElement.querySelectorAll('[role="option"] :is(button, a, input, [tabindex])'),
+    ).toHaveLength(0)
+
+    // the description is reachable through aria-describedby, and hidden on screen
+    const disabled = options[2]
+    const description = document.getElementById(disabled.getAttribute('aria-describedby')!)!
+    await expect(description).toHaveTextContent('Nog niet beschikbaar.')
+    await expect(description).not.toBeVisible()
+    await expect(disabled).toHaveAttribute('aria-disabled', 'true')
+
+    // a disabled option swallows the click
+    await userEvent.click(disabled)
+    await expect(args.onSelect).not.toHaveBeenCalled()
+    await userEvent.click(options[0])
+    await expect(args.onSelect).toHaveBeenCalledOnce()
+
+    // the long label truncates instead of pushing the row wider
+    const longLabel = options[4].querySelector<HTMLElement>('span:last-of-type')!
+    await expect(longLabel.scrollWidth).toBeGreaterThan(longLabel.clientWidth)
+    await expect(options[4].scrollWidth).toBe(options[4].clientWidth)
+  },
+}
+
+/** Tab into the list: the highlighted row gets an inset ring on top of its tint. */
+export const FocusedListbox: Story = {
+  render: () => ({
+    components: { PickerItem },
+    setup: () => ({ classes: LISTBOX_CLASSES }),
+    template: `
+      <div role="listbox" aria-label="Gefocuste lijst" tabindex="0" :class="classes">
+        <PickerItem id="focus-a" label="Titel" icon="heading" />
+        <PickerItem id="focus-b" label="Afbeelding" icon="image" highlighted />
+        <PickerItem id="focus-c" label="Tekst" icon="font" />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const highlighted = canvasElement.querySelector<HTMLElement>('#focus-b')!
+    const ringless = getComputedStyle(highlighted).boxShadow
+
+    await userEvent.tab()
+    await expect(within(canvasElement).getByRole('listbox')).toHaveFocus()
+
+    await waitFor(() => expect(getComputedStyle(highlighted).boxShadow).not.toBe(ringless))
+    // only the highlighted row is ringed
+    await expect(getComputedStyle(canvasElement.querySelector('#focus-a')!).boxShadow).toBe(
+      ringless,
+    )
+  },
+}
+
+/**
+ * Hover tints an enabled row and leaves a highlighted or disabled row as it is. Point at the rows
+ * to check. Deliberately no real-pointer play: a Playwright hover into the story iframe hangs for
+ * its full timeout in the mixed `pnpm test` run, which is why Tree's `HoveringARow` lost its play
+ * too. The class rules behind it are covered in PickerItem.test.ts.
+ */
+export const Hover: Story = {
+  render: () => ({
+    components: { PickerItem },
+    setup: () => ({ classes: LISTBOX_CLASSES }),
+    template: `
+      <div role="listbox" aria-label="Hover" tabindex="0" :class="classes">
+        <PickerItem id="hover-plain" label="Standaard" icon="image" />
+        <PickerItem id="hover-highlighted" label="Gemarkeerd" icon="heading" highlighted />
+        <PickerItem id="hover-disabled" label="Uitgeschakeld" icon="table" disabled />
+      </div>
+    `,
+  }),
+}

package/src/components/atoms/PickerItem/PickerItem.test.ts

@@ -0,0 +1,142 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PickerItem from './PickerItem.vue'
+
+const props = { id: 'opt-image', label: 'Afbeelding', icon: 'image' as const }
+
+// No assertions on typography utilities: elements are found by structure or text, so a restyle
+// of the label never turns these red.
+describe('PickerItem', () => {
+  it('renders one option with the given id, not selected by default', () => {
+    const wrapper = mount(PickerItem, { props })
+
+    expect(wrapper.attributes('role')).toBe('option')
+    expect(wrapper.attributes('id')).toBe('opt-image')
+    expect(wrapper.attributes('aria-selected')).toBe('false')
+    expect(wrapper.text()).toBe('Afbeelding')
+  })
+
+  it('marks a highlighted item as selected', () => {
+    const wrapper = mount(PickerItem, { props: { ...props, highlighted: true } })
+
+    expect(wrapper.attributes('aria-selected')).toBe('true')
+  })
+
+  it('contains nothing focusable', () => {
+    const wrapper = mount(PickerItem, { props: { ...props, description: 'Uitleg' } })
+
+    expect(wrapper.find('button, a, input, [tabindex]').exists()).toBe(false)
+    expect(wrapper.attributes('tabindex')).toBeUndefined()
+  })
+
+  it('hides the icon from assistive tech', () => {
+    const wrapper = mount(PickerItem, { props })
+
+    expect(wrapper.find('i').attributes('aria-hidden')).toBe('true')
+  })
+
+  it('renders no icon wrapper without an icon', () => {
+    const wrapper = mount(PickerItem, { props: { id: 'x', label: 'Zonder icoon' } })
+
+    expect(wrapper.find('i').exists()).toBe(false)
+    expect(wrapper.findAll('span')).toHaveLength(1)
+  })
+
+  it('emits select on click', async () => {
+    const wrapper = mount(PickerItem, { props })
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.emitted('select')).toEqual([[]])
+  })
+
+  it('never emits select while disabled, and drops the hover tint', async () => {
+    const wrapper = mount(PickerItem, { props: { ...props, disabled: true } })
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+    expect(wrapper.attributes('aria-disabled')).toBe('true')
+    expect(wrapper.classes().some((name) => name.startsWith('hover:'))).toBe(false)
+  })
+
+  it('has no aria-disabled while enabled', () => {
+    const wrapper = mount(PickerItem, { props })
+
+    expect(wrapper.attributes('aria-disabled')).toBeUndefined()
+  })
+
+  it('lets the highlighted tint win from the hover tint', () => {
+    const wrapper = mount(PickerItem, { props: { ...props, highlighted: true } })
+
+    expect(wrapper.classes()).toContain('bg-cornflower-blue-50')
+    expect(wrapper.classes().some((name) => name.startsWith('hover:'))).toBe(false)
+  })
+
+  it('keeps raw font utilities off the label', () => {
+    for (const highlighted of [false, true]) {
+      const wrapper = mount(PickerItem, { props: { ...props, highlighted } })
+      const label = wrapper.findAll('span').at(-1)!
+
+      expect(label.text()).toBe('Afbeelding')
+      expect(label.classes().join(' ')).not.toMatch(/\b(text-(xs|sm|base|lg)|font-\w+)\b/)
+    }
+  })
+
+  it('styles the label the same in every state, so it never reflows when highlighted', () => {
+    const labelClasses = (extra: Record<string, boolean>) =>
+      mount(PickerItem, { props: { ...props, ...extra } })
+        .findAll('span')
+        .at(-1)!
+        .classes()
+
+    const resting = labelClasses({})
+    expect(labelClasses({ highlighted: true })).toEqual(resting)
+    expect(labelClasses({ disabled: true, highlighted: true })).toEqual(resting)
+  })
+
+  it('emits highlight on pointer movement, also while disabled', async () => {
+    const wrapper = mount(PickerItem, { props: { ...props, disabled: true } })
+
+    await wrapper.trigger('pointermove')
+
+    expect(wrapper.emitted('highlight')).toEqual([[]])
+  })
+
+  it('prevents the mousedown default so focus stays where it was', async () => {
+    const wrapper = mount(PickerItem, { props })
+    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true })
+
+    wrapper.element.dispatchEvent(event)
+
+    expect(event.defaultPrevented).toBe(true)
+  })
+
+  it('points aria-describedby at a hidden span with the description', () => {
+    const wrapper = mount(PickerItem, { props: { ...props, description: 'Een foto of beeld' } })
+    const describedBy = wrapper.attributes('aria-describedby')!
+    const description = wrapper.find(`[id="${describedBy}"]`)
+
+    expect(description.text()).toBe('Een foto of beeld')
+    expect(description.attributes('hidden')).toBeDefined()
+    expect(wrapper.element.contains(description.element)).toBe(true)
+  })
+
+  it('has no aria-describedby without a description', () => {
+    const wrapper = mount(PickerItem, { props })
+
+    expect(wrapper.attributes('aria-describedby')).toBeUndefined()
+  })
+
+  it('replaces icon and label with the default slot, keeping the option', () => {
+    const wrapper = mount(PickerItem, {
+      props: { ...props, highlighted: true },
+      slots: { default: '<strong>Eigen inhoud</strong>' },
+    })
+
+    expect(wrapper.attributes('role')).toBe('option')
+    expect(wrapper.attributes('aria-selected')).toBe('true')
+    expect(wrapper.find('strong').text()).toBe('Eigen inhoud')
+    expect(wrapper.find('i').exists()).toBe(false)
+  })
+})