@nexxtmove/ui 2.6.0 → 2.8.0

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

@@ -0,0 +1,339 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TemplateCard from './TemplateCard.vue'
+
+describe('TemplateCard', () => {
+  it('renders the title and subtitle', () => {
+    const wrapper = mount(TemplateCard, {
+      props: {
+        image: 'https://example.com/image.webp',
+        title: 'Basis template',
+        subtitle: '3 dagen geleden aangepast',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Basis template')
+    expect(wrapper.text()).toContain('3 dagen geleden aangepast')
+  })
+
+  it('renders the image when provided', () => {
+    const wrapper = mount(TemplateCard, {
+      props: {
+        image: 'https://example.com/image.webp',
+        title: 'Basis template',
+      },
+    })
+
+    const img = wrapper.find('img')
+    expect(img.exists()).toBe(true)
+    expect(img.attributes('src')).toBe('https://example.com/image.webp')
+    // Decorative: the title is right below it as text, so a duplicate alt only adds noise.
+    expect(img.attributes('alt')).toBe('')
+    expect(img.classes()).toContain('h-38')
+    expect(img.classes()).toContain('object-cover')
+  })
+
+  it('renders a placeholder when image is undefined', () => {
+    const wrapper = mount(TemplateCard, {
+      props: {
+        title: 'Basis template',
+      },
+    })
+
+    expect(wrapper.find('img').exists()).toBe(false)
+    expect(wrapper.find('.bg-gray-100 .fa-image').exists()).toBe(true)
+    // The placeholder and a real image must be the same height, or cards in a grid end up unequal.
+    expect(wrapper.find('.bg-gray-100').classes()).toContain('h-38')
+  })
+
+  it('does not render a subtitle when omitted', () => {
+    const wrapper = mount(TemplateCard, {
+      props: {
+        title: 'Basis template',
+      },
+    })
+
+    expect(wrapper.find('p').exists()).toBe(false)
+  })
+
+  it('does not render the feature list when contentFeatures is empty', () => {
+    const wrapper = mount(TemplateCard, {
+      props: {
+        title: 'Basis template',
+      },
+    })
+
+    expect(wrapper.find('ul').exists()).toBe(false)
+  })
+
+  it('renders an icon for each content feature', () => {
+    const wrapper = mount(TemplateCard, {
+      props: {
+        title: 'Basis template',
+        contentFeatures: ['references', 'valuation', 'reviews', 'packages'],
+      },
+    })
+
+    expect(wrapper.findAll('li')).toHaveLength(4)
+    expect(wrapper.find('.fa-house-circle-check').exists()).toBe(true)
+    expect(wrapper.find('.fa-circle-euro').exists()).toBe(true)
+    expect(wrapper.find('.fa-star').exists()).toBe(true)
+    expect(wrapper.find('.fa-piggy-bank').exists()).toBe(true)
+  })
+
+  it('applies the feature colors', () => {
+    const wrapper = mount(TemplateCard, {
+      props: {
+        title: 'Basis template',
+        contentFeatures: ['references', 'packages'],
+      },
+    })
+
+    expect(wrapper.find('.bg-cornflower-blue-50.text-cornflower-blue-500').exists()).toBe(true)
+    expect(wrapper.find('.bg-green-50.text-green-500').exists()).toBe(true)
+  })
+
+  it('renders a div and no button by default', () => {
+    const wrapper = mount(TemplateCard, { props: { title: 'Basis template' } })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.find('button').exists()).toBe(false)
+  })
+
+  it('renders a stretched button that never submits a form when selectable', () => {
+    const wrapper = mount(TemplateCard, { props: { title: 'Basis template', selectable: true } })
+
+    const button = wrapper.find('button')
+    expect(button.exists()).toBe(true)
+    expect(button.attributes('type')).toBe('button')
+    // The card content is its own layer next to the button, so the button needs a name of its own.
+    expect(button.attributes('aria-label')).toBe('Basis template')
+    expect(button.attributes('aria-pressed')).toBe('false')
+    expect(button.classes()).toContain('absolute')
+    expect(button.classes()).toContain('inset-0')
+  })
+
+  it('keeps the heading and the tooltip triggers outside the select button', () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', selectable: true, contentFeatures: ['references'] },
+    })
+
+    // Flow content inside a <button> is invalid and the heading role would be lost, so the card
+    // body must stay a sibling of the button.
+    const button = wrapper.find('button')
+    expect(button.find('h3').exists()).toBe(false)
+    expect(wrapper.find('h3').exists()).toBe(true)
+    expect(wrapper.find('h3').element.closest('button')).toBeNull()
+    expect(wrapper.find('.bg-cornflower-blue-50').element.closest('button')).toBeNull()
+  })
+
+  it('emits select when the selectable card is clicked', async () => {
+    const wrapper = mount(TemplateCard, { props: { title: 'Basis template', selectable: true } })
+
+    await wrapper.find('button').trigger('click')
+
+    expect(wrapper.emitted('select')).toHaveLength(1)
+  })
+
+  it('does not emit select while disabled', async () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', selectable: true, disabled: true },
+    })
+
+    const button = wrapper.find('button')
+    expect((button.element as HTMLButtonElement).disabled).toBe(true)
+
+    await button.trigger('click')
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+
+  it('does not emit select when it is not selectable', async () => {
+    const wrapper = mount(TemplateCard, { props: { title: 'Basis template' } })
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+
+  it('selects the card when a feature icon is clicked', async () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', selectable: true, contentFeatures: ['references'] },
+    })
+
+    // The icon claims its own pointer events for the tooltip, so without forwarding the click it
+    // would be a dead zone on top of the stretched button.
+    await wrapper.find('.bg-cornflower-blue-50').trigger('click')
+
+    expect(wrapper.emitted('select')).toHaveLength(1)
+  })
+
+  it('does not select on a feature icon of a read-only card', async () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', contentFeatures: ['references'] },
+    })
+
+    await wrapper.find('.bg-cornflower-blue-50').trigger('click')
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+
+  it('names the feature icons for screen readers', () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', contentFeatures: ['references'] },
+    })
+
+    // The icon itself is aria-hidden and the trigger is not focusable, so without this label the
+    // feature is invisible to a screen reader.
+    expect(wrapper.find('.bg-cornflower-blue-50 .sr-only').text()).toBe('Referenties')
+  })
+
+  it('exposes the selected state through aria-pressed', async () => {
+    const wrapper = mount(TemplateCard, { props: { title: 'Basis template', selectable: true } })
+
+    expect(wrapper.find('button').attributes('aria-pressed')).toBe('false')
+
+    await wrapper.setProps({ selected: true })
+
+    expect(wrapper.find('button').attributes('aria-pressed')).toBe('true')
+  })
+
+  it('omits aria-pressed on the non-selectable card', () => {
+    const wrapper = mount(TemplateCard, { props: { title: 'Basis template', selected: true } })
+
+    expect(wrapper.attributes('aria-pressed')).toBeUndefined()
+    expect(wrapper.find('[aria-pressed]').exists()).toBe(false)
+  })
+
+  it('draws the selected border only when selectable', async () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', selected: true, checkmark: true },
+    })
+
+    // selected, disabled and checkmark only mean something together with selectable, as their
+    // JSDoc says: a read-only card must not look chosen.
+    expect(wrapper.classes()).not.toContain('border-cornflower-blue-500')
+    expect(wrapper.find('i.fa-check').exists()).toBe(false)
+
+    await wrapper.setProps({ selectable: true })
+
+    expect(wrapper.classes()).toContain('border-cornflower-blue-500')
+  })
+
+  it('shows the check badge only with checkmark and selected', async () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', selectable: true, selected: true },
+    })
+
+    expect(wrapper.find('i.fa-check').exists()).toBe(false)
+
+    await wrapper.setProps({ checkmark: true })
+
+    expect(wrapper.find('i.fa-check').exists()).toBe(true)
+
+    await wrapper.setProps({ selected: false })
+
+    expect(wrapper.find('i.fa-check').exists()).toBe(false)
+  })
+
+  it('renders overlay and actions content outside the select button', () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', selectable: true },
+      slots: {
+        overlay: '<button type="button" data-test="overlay-button">Bekijk</button>',
+        actions: '<button type="button" data-test="actions-button">Menu</button>',
+      },
+    })
+
+    expect(wrapper.find('[data-test="overlay-button"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="actions-button"]').exists()).toBe(true)
+
+    // Nested buttons are invalid markup and swallow each other's clicks, so both slots must stay
+    // siblings of the select button.
+    const button = wrapper.find('button[aria-pressed]')
+    expect(button.find('[data-test="overlay-button"]').exists()).toBe(false)
+    expect(button.find('[data-test="actions-button"]').exists()).toBe(false)
+  })
+
+  it('renders no actions container when the slot is empty', () => {
+    const bare = mount(TemplateCard, { props: { title: 'Basis template', selectable: true } })
+    const withActions = mount(TemplateCard, {
+      props: { title: 'Basis template', selectable: true },
+      slots: { actions: '<button type="button" data-test="actions-button">Menu</button>' },
+    })
+
+    // An empty container would still sit over the top-right corner of the card, so it is dropped
+    // with its slot: the root then holds only the card body and the select button.
+    expect(bare.element.children).toHaveLength(2)
+    expect(withActions.element.children).toHaveLength(3)
+    expect(withActions.find('[data-test="actions-button"]').exists()).toBe(true)
+  })
+
+  it('renders no overlay layer when the slot is empty', () => {
+    const wrapper = mount(TemplateCard, { props: { title: 'Basis template', selectable: true } })
+
+    expect(wrapper.find('.backdrop-blur-xs').exists()).toBe(false)
+  })
+
+  it('drops the overlay while selectable and disabled', () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', selectable: true, disabled: true },
+      slots: { overlay: '<button type="button" data-test="overlay-button">Bekijk</button>' },
+    })
+
+    // An invisible layer would still hold a tabbable button, and a card that cannot be chosen
+    // reveals nothing. #actions is the place for a preview button on a disabled card.
+    expect(wrapper.find('.backdrop-blur-xs').exists()).toBe(false)
+    expect(wrapper.find('[data-test="overlay-button"]').exists()).toBe(false)
+  })
+
+  it('keeps the overlay on a read-only card, disabled or not', () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', disabled: true },
+      slots: { overlay: '<button type="button" data-test="overlay-button">Bekijk</button>' },
+    })
+
+    expect(wrapper.find('.backdrop-blur-xs').exists()).toBe(true)
+    expect(wrapper.find('[data-test="overlay-button"]').exists()).toBe(true)
+  })
+
+  it('lets the slot buttons keep their own clicks', async () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', selectable: true },
+      slots: {
+        overlay: '<button type="button" data-test="overlay-button">Bekijk</button>',
+        actions: '<button type="button" data-test="actions-button">Menu</button>',
+      },
+    })
+
+    const overlayButton = wrapper.find('[data-test="overlay-button"]')
+    const actionsButton = wrapper.find('[data-test="actions-button"]')
+
+    await overlayButton.trigger('click')
+    await actionsButton.trigger('click')
+
+    expect(wrapper.emitted('select')).toBeUndefined()
+
+    // Both layers come after the select button and carry a z-index, so they win the hit test
+    // instead of the stretched button swallowing the click.
+    const order = [...wrapper.element.querySelectorAll('button')]
+    expect(order.indexOf(wrapper.find('button[aria-pressed]').element)).toBe(0)
+    expect(order.indexOf(actionsButton.element)).toBeGreaterThan(0)
+    expect(order.indexOf(overlayButton.element)).toBeGreaterThan(0)
+    expect(actionsButton.element.closest('.z-20')).not.toBeNull()
+    expect(overlayButton.element.closest('.z-10')).not.toBeNull()
+  })
+
+  it('hands selected to the overlay and actions slots', () => {
+    const wrapper = mount(TemplateCard, {
+      props: { title: 'Basis template', selectable: true, selected: true },
+      slots: {
+        overlay: `<template #overlay="{ selected }"><span data-test="overlay">{{ selected ? 'aan' : 'uit' }}</span></template>`,
+        actions: `<template #actions="{ selected }"><span data-test="actions">{{ selected ? 'aan' : 'uit' }}</span></template>`,
+      },
+    })
+
+    expect(wrapper.find('[data-test="overlay"]').text()).toBe('aan')
+    expect(wrapper.find('[data-test="actions"]').text()).toBe('aan')
+  })
+})

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

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, within } from 'storybook/test'
+import { ref } from 'vue'
+import { NexxtInputField, NexxtTextarea } from '../../../index'
+
+export default {
+  title: 'Components/Molecules/Textarea',
+  component: NexxtTextarea,
+} satisfies Meta<typeof NexxtTextarea>
+
+type Story = StoryObj<typeof NexxtTextarea>
+
+const withModel = (attrs: string, initial = '') => ({
+  components: { NexxtTextarea },
+  setup() {
+    const value = ref(initial)
+    return { value }
+  },
+  template: `<div style="max-width: 480px"><NexxtTextarea v-model="value" ${attrs} /></div>`,
+})
+
+/**
+ * The default: a fixed row count, so the field keeps a predictable height.
+ */
+export const Default: Story = {
+  render: () => withModel('label="Toelichting" placeholder="Typ hier je toelichting"'),
+}
+
+/**
+ * The field is `inline-flex` by default, so it takes the width of its content.
+ * A consumer that wants it to fill its container passes `class="w-full"`, which
+ * lands on the wrapper -- the control inside is already full-width.
+ */
+export const FullWidth: Story = {
+  render: () => ({
+    components: { NexxtTextarea },
+    setup() {
+      const value = ref('')
+      return { value }
+    },
+    template: `
+      <div style="width: 100%; border: 1px dashed #d1d5db; padding: 12px">
+        <NexxtTextarea v-model="value" class="w-full" label="Vult de volle breedte"
+          placeholder="Deze groeit mee met de container" />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const field = within(canvasElement).getByRole('textbox')
+    const container = canvasElement.querySelector('div[style]') as HTMLElement
+
+    // Within a pixel of the container's inner width: proof that `w-full`
+    // reached the wrapper, since the control alone cannot widen a shrink-wrapped
+    // parent.
+    const inner = container.clientWidth - 24
+    await expect(Math.abs(field.getBoundingClientRect().width - inner)).toBeLessThanOrEqual(1)
+  },
+}
+
+/** Without `w-full` the field stays at its natural width, for comparison. */
+export const NaturalWidth: Story = {
+  render: () => ({
+    components: { NexxtTextarea },
+    setup() {
+      const value = ref('')
+      return { value }
+    },
+    template: `
+      <div style="width: 100%; border: 1px dashed #d1d5db; padding: 12px">
+        <NexxtTextarea v-model="value" label="Neemt zijn eigen breedte" />
+      </div>
+    `,
+  }),
+}
+
+export const WithoutLabel: Story = {
+  render: () => withModel('placeholder="Zonder label"'),
+}
+
+export const Required: Story = {
+  render: () => withModel('label="Toelichting" required placeholder="Verplicht veld"'),
+}
+
+export const WithError: Story = {
+  render: () =>
+    withModel('label="Toelichting" error error-message="Dit veld is verplicht"', 'Te kort'),
+}
+
+/** More rows for a field that is expected to hold a few paragraphs. */
+export const MoreRows: Story = {
+  render: () => withModel('label="Bericht" :rows="8" placeholder="Acht regels hoog"'),
+}
+
+/**
+ * `autosize` grows the field with its content. Opt-in on purpose: a field that
+ * changes height while you type moves whatever sits below it, which is rarely
+ * what a form wants by default.
+ */
+export const Autosize: Story = {
+  render: () =>
+    withModel(
+      'label="Groeit mee" autosize placeholder="Typ meerdere regels en kijk wat er gebeurt"',
+      'Eén regel.\nTwee regels.\nDrie regels.',
+    ),
+  // jsdom has no layout engine, so the unit tests stub scrollHeight and
+  // line-height. Only a real browser proves the field actually grows.
+  play: async ({ canvasElement }) => {
+    const field = within(canvasElement).getByRole('textbox') as HTMLTextAreaElement
+    const threeLines = field.getBoundingClientRect().height
+
+    field.value = Array.from({ length: 10 }, (_, i) => `Regel ${i + 1}`).join('\n')
+    field.dispatchEvent(new Event('input', { bubbles: true }))
+    await new Promise((r) => requestAnimationFrame(r))
+
+    await expect(field.getBoundingClientRect().height).toBeGreaterThan(threeLines)
+  },
+}
+
+/** With `maxRows` the field stops growing and starts scrolling instead. */
+export const AutosizeWithMax: Story = {
+  render: () =>
+    withModel(
+      'label="Groeit tot 5 regels" autosize :max-rows="5"',
+      'Regel een\nRegel twee\nRegel drie\nRegel vier\nRegel vijf\nRegel zes\nRegel zeven',
+    ),
+  // Seven lines of content against a five-row cap: the field must stop at the
+  // cap and scroll, not keep growing.
+  play: async ({ canvasElement }) => {
+    const field = within(canvasElement).getByRole('textbox') as HTMLTextAreaElement
+    await new Promise((r) => requestAnimationFrame(r))
+
+    const style = getComputedStyle(field)
+    const lineHeight = parseFloat(style.lineHeight)
+    const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)
+    const border = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth)
+
+    // The cap is five rows of text plus the field's own padding and border,
+    // because `height` is border-box here. Measuring against rows alone would
+    // expect a field that is padding-and-border too short.
+    const capped = 5 * lineHeight + padding + border
+
+    await expect(field.scrollHeight).toBeGreaterThan(capped - padding - border)
+    await expect(field.getBoundingClientRect().height).toBeLessThanOrEqual(capped + 1)
+    await expect(getComputedStyle(field).overflowY).toBe('auto')
+  },
+}
+
+/**
+ * A one-row field lines up with a NexxtInputField. Without a floor it would sit
+ * a few pixels lower, which is visible the moment the two share a form row.
+ */
+export const MatchesInputFieldHeight: Story = {
+  render: () => ({
+    components: { NexxtTextarea, NexxtInputField },
+    setup() {
+      const text = ref('')
+      const area = ref('')
+      return { text, area }
+    },
+    template: `
+      <div style="display: flex; gap: 12px; align-items: flex-start; width: 520px">
+        <NexxtInputField v-model="text" class="w-full" placeholder="NexxtInputField" />
+        <NexxtTextarea v-model="area" class="w-full" :rows="1" placeholder="NexxtTextarea, 1 rij" />
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const input = canvasElement.querySelector('input') as HTMLElement
+    const area = canvasElement.querySelector('textarea') as HTMLElement
+
+    await expect(area.getBoundingClientRect().height).toBe(input.getBoundingClientRect().height)
+  },
+}
+
+/**
+ * `resize` controls the drag grip in the corner. `vertical` is the default;
+ * `none` pins the height, which is what a form wants when the field sits in a
+ * fixed layout.
+ */
+export const Resize: Story = {
+  render: () => ({
+    components: { NexxtTextarea },
+    setup() {
+      const a = ref('')
+      const b = ref('')
+      return { a, b }
+    },
+    template: `
+      <div style="display: flex; gap: 12px; width: 620px">
+        <NexxtTextarea v-model="a" class="w-full" label="Sleepbaar (standaard)" />
+        <NexxtTextarea v-model="b" class="w-full" label="Vaste hoogte" resize="none" />
+      </div>
+    `,
+  }),
+  // A class assertion would pass whether or not Tailwind generated any CSS for
+  // it. Only the computed value says the grip is actually gone.
+  play: async ({ canvasElement }) => {
+    const [draggable, pinned] = canvasElement.querySelectorAll('textarea')
+
+    await expect(getComputedStyle(draggable).resize).toBe('vertical')
+    await expect(getComputedStyle(pinned).resize).toBe('none')
+  },
+}
+
+/** `autosize` owns the height, so it drops the grip whatever `resize` says. */
+export const AutosizeIgnoresResize: Story = {
+  render: () => withModel('label="Groeit mee" autosize resize="vertical"', 'Eén regel.'),
+  play: async ({ canvasElement }) => {
+    const field = within(canvasElement).getByRole('textbox')
+    await expect(getComputedStyle(field).resize).toBe('none')
+  },
+}
+
+export const Disabled: Story = {
+  render: () => withModel('label="Niet te bewerken" disabled', 'Vaste inhoud'),
+}