@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import ModalFooter from './ModalFooter.vue'
+import NexxtModal from '../../organisms/Modal/Modal.vue'
+import NexxtButton from '../../atoms/Button/Button.vue'
+
+export default {
+  title: 'Components/Molecules/Modal Footer',
+  component: ModalFooter,
+} satisfies Meta<typeof ModalFooter>
+
+type Story = StoryObj<typeof ModalFooter>
+
+// The footer only reads correctly in the place it is used, so every story renders
+// it in the real Modal's `footer` slot rather than on a blank canvas.
+//
+// They start CLOSED, and must stay that way. The docs page renders every story on
+// one screen, so a modal that opens on mount stacks itself on top of the others --
+// eight overlapping dialogs, with only the last one reachable. Opening via the
+// trigger costs one click and keeps the docs page readable. `Modal.stories.ts`
+// follows the same convention throughout.
+const inModal = (
+  title: string,
+  body: string,
+  footerAttrs: string,
+  handlers = '@cancel="open = false" @confirm="open = false"',
+) => ({
+  components: { ModalFooter, NexxtModal, NexxtButton },
+  setup() {
+    const open = ref(false)
+    return { open }
+  },
+  template: `
+    <div>
+      <NexxtButton v-if="!open" @click="open = true">Open modal</NexxtButton>
+      <NexxtModal v-model="open" title="${title}">
+        <p>${body}</p>
+        <template #footer>
+          <ModalFooter cancel-label="Annuleren" ${footerAttrs} ${handlers} />
+        </template>
+      </NexxtModal>
+    </div>
+  `,
+})
+
+/**
+ * The two-button shape. Both labels are required props: the library has no i18n
+ * layer, so copy comes from the consumer.
+ */
+export const Default: Story = {
+  render: () =>
+    inModal('Wijzigingen opslaan', 'Weet je zeker dat je verder wilt?', 'confirm-label="Opslaan"'),
+}
+
+/**
+ * `confirmVariant="danger"` — the delete-confirmation shape. The destructive
+ * action has to be the one that stands out, with cancel staying quiet next to it.
+ */
+export const DangerConfirm: Story = {
+  render: () =>
+    inModal(
+      'Contact verwijderen',
+      'Dit contact wordt permanent verwijderd. Deze actie kan niet ongedaan worden gemaakt.',
+      'confirm-label="Verwijderen" confirm-variant="danger"',
+    ),
+}
+
+/**
+ * `confirmLoading` on the action button — the state between submitting and the modal
+ * closing. Cancel stays reachable so a slow request is not a trap.
+ */
+export const Loading: Story = {
+  render: () =>
+    inModal('Wijzigingen opslaan', 'Bezig met opslaan…', 'confirm-label="Opslaan" confirm-loading'),
+}
+
+/**
+ * `confirmLoading` on a `danger` confirm, which is where a spinner most needs to be
+ * legible: a light spinner has to hold up on the red button, not only on the
+ * default one.
+ */
+export const LoadingDanger: Story = {
+  render: () =>
+    inModal(
+      'Contact verwijderen',
+      'Bezig met verwijderen…',
+      'confirm-label="Verwijderen" confirm-variant="danger" confirm-loading',
+    ),
+}
+
+/**
+ * `confirmDisabled` on the action button — the form is incomplete, so confirming is not
+ * offered yet. Visually distinct from `confirmLoading`: nothing is happening here.
+ */
+export const Disabled: Story = {
+  render: () =>
+    inModal(
+      'Wijzigingen opslaan',
+      'Vul eerst alle verplichte velden in.',
+      'confirm-label="Opslaan" confirm-disabled',
+    ),
+}
+
+/**
+ * `confirmIcon` on the action button. The prop exists because a scripted
+ * conversion dropped `icon` from two real modals without anything failing —
+ * it type-checked and ran, it just rendered no icon.
+ */
+export const ConfirmIcon: Story = {
+  render: () =>
+    inModal(
+      'Wijzigingen opslaan',
+      'De bevestigknop draagt een icoon naast zijn label.',
+      'confirm-label="Opslaan" confirm-icon="floppy-disk"',
+    ),
+}
+
+/** A cancel label that says what leaving actually does. */
+export const CustomCancelLabel: Story = {
+  render: () =>
+    inModal(
+      'Concept verlaten',
+      'Je wijzigingen gaan verloren.',
+      'cancel-label="Terug naar bewerken" confirm-label="Verlaten" confirm-variant="danger"',
+    ),
+}
+
+/**
+ * Every state next to each other, outside a modal, so the set can be compared in
+ * one glance — and so the footer's own alignment is visible without the modal's
+ * own `justify-end` footer slot doing part of the work.
+ */
+export const AllStates: Story = {
+  render: () => ({
+    components: { ModalFooter },
+    setup: () => ({
+      rows: [
+        { label: 'default', props: { confirmLabel: 'Opslaan' } },
+        {
+          label: 'confirmVariant="danger"',
+          props: { confirmLabel: 'Verwijderen', confirmVariant: 'danger' },
+        },
+        { label: 'confirmLoading', props: { confirmLabel: 'Opslaan', confirmLoading: true } },
+        { label: 'confirmDisabled', props: { confirmLabel: 'Opslaan', confirmDisabled: true } },
+        {
+          label: 'custom cancelLabel',
+          props: { cancelLabel: 'Terug naar bewerken', confirmLabel: 'Verlaten' },
+        },
+      ],
+    }),
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 8px; max-width: 560px; font-family: system-ui, sans-serif;">
+        <div v-for="row in rows" :key="row.label">
+          <p style="margin: 0 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #374151;">
+            {{ row.label }}
+          </p>
+          <!-- Modal supplies this padding via its own #footer wrapper; outside a
+               Modal the component deliberately adds none, so the story does. -->
+          <div style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px 24px;">
+            <ModalFooter v-bind="row.props" />
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Both events wired up, with a log, so it is visible that `cancel` and `confirm`
+ * are emitted rather than the footer closing the modal itself. Closing stays the
+ * caller's decision — which is what lets `confirm` await a request first.
+ */
+export const Events: Story = {
+  render: () => ({
+    components: { ModalFooter, NexxtModal, NexxtButton },
+    setup() {
+      const open = ref(false)
+      const log = ref<string[]>([])
+      const record = (event: string) => {
+        log.value.push(event)
+        open.value = false
+      }
+      return { open, log, record }
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 12px; align-items: flex-start;">
+        <NexxtButton v-if="!open" @click="open = true">Open modal</NexxtButton>
+        <NexxtModal v-model="open" title="Wijzigingen opslaan">
+          <p>Bevestig of annuleer om het event te zien.</p>
+          <template #footer>
+            <ModalFooter
+              confirm-label="Opslaan"
+              @cancel="record('cancel')"
+              @confirm="record('confirm')"
+            />
+          </template>
+        </NexxtModal>
+        <ul style="margin: 0; padding: 0; list-style: none; font-size: 12px; color: #374151;">
+          <li v-for="(entry, i) in log" :key="i">emitted: {{ entry }}</li>
+        </ul>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,276 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ModalFooter from './ModalFooter.vue'
+
+const CANCEL_LABEL = 'Annuleren'
+
+const mountFooter = (props: Record<string, unknown> = {}) =>
+  mount(ModalFooter, { props: { confirmLabel: 'Opslaan', cancelLabel: CANCEL_LABEL, ...props } })
+
+// Buttons are located by their visible label, never by index, so a footer that
+// swapped the two buttons around cannot make these assertions pass by accident.
+const byLabel = (wrapper: ReturnType<typeof mountFooter>, label: string) => {
+  const found = wrapper.findAll('button').filter((b) => b.text().includes(label))
+  expect(found).toHaveLength(1)
+  return found[0]
+}
+
+const action = (wrapper: ReturnType<typeof mountFooter>) => byLabel(wrapper, 'Opslaan')
+const cancel = (wrapper: ReturnType<typeof mountFooter>, label = CANCEL_LABEL) =>
+  byLabel(wrapper, label)
+
+describe('ModalFooter labels', () => {
+  it('renders the required confirm label', () => {
+    expect(mountFooter().text()).toContain('Opslaan')
+  })
+
+  it('renders the supplied cancel label', () => {
+    const wrapper = mountFooter({ cancelLabel: 'Sluiten' })
+
+    expect(cancel(wrapper, 'Sluiten').exists()).toBe(true)
+    expect(wrapper.text()).not.toContain(CANCEL_LABEL)
+  })
+
+  it('renders exactly two buttons', () => {
+    expect(mountFooter().findAll('button')).toHaveLength(2)
+  })
+})
+
+describe('ModalFooter events', () => {
+  it('emits confirm, and only confirm, when the action button is clicked', async () => {
+    const wrapper = mountFooter()
+    await action(wrapper).trigger('click')
+
+    expect(wrapper.emitted('confirm')).toHaveLength(1)
+    expect(wrapper.emitted('cancel')).toBeUndefined()
+  })
+
+  it('emits cancel, and only cancel, when the cancel button is clicked', async () => {
+    const wrapper = mountFooter()
+    await cancel(wrapper).trigger('click')
+
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+    expect(wrapper.emitted('confirm')).toBeUndefined()
+  })
+
+  it('emits cancel from a renamed cancel button too', async () => {
+    const wrapper = mountFooter({ cancelLabel: 'Sluiten' })
+    await cancel(wrapper, 'Sluiten').trigger('click')
+
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+  })
+})
+
+describe('ModalFooter confirmDisabled', () => {
+  it('disables the action button and leaves cancel usable', async () => {
+    const wrapper = mountFooter({ confirmDisabled: true })
+
+    expect(action(wrapper).attributes('disabled')).toBeDefined()
+    expect(cancel(wrapper).attributes('disabled')).toBeUndefined()
+
+    await cancel(wrapper).trigger('click')
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+  })
+
+  it('leaves both buttons enabled when confirmDisabled is not set', () => {
+    const wrapper = mountFooter()
+
+    expect(action(wrapper).attributes('disabled')).toBeUndefined()
+    expect(cancel(wrapper).attributes('disabled')).toBeUndefined()
+  })
+
+  it('does not emit confirm while confirmDisabled', async () => {
+    const wrapper = mountFooter({ confirmDisabled: true })
+    await action(wrapper).trigger('click')
+
+    expect(wrapper.emitted('confirm')).toBeUndefined()
+  })
+})
+
+describe('ModalFooter cancelDisabled', () => {
+  it('disables the cancel button and leaves the action usable', () => {
+    const wrapper = mountFooter({ cancelDisabled: true })
+
+    // Which button, not merely that one is disabled: wiring this to the wrong
+    // button is the plausible slip and it would still look like it works.
+    expect(cancel(wrapper).attributes('disabled')).toBeDefined()
+    expect(action(wrapper).attributes('disabled')).toBeUndefined()
+  })
+
+  it('does not emit cancel while cancelDisabled', async () => {
+    const wrapper = mountFooter({ cancelDisabled: true })
+
+    await cancel(wrapper).trigger('click')
+
+    expect(wrapper.emitted('cancel')).toBeUndefined()
+  })
+
+  it('still emits confirm while cancel is disabled', async () => {
+    const wrapper = mountFooter({ cancelDisabled: true })
+
+    await action(wrapper).trigger('click')
+
+    expect(wrapper.emitted('confirm')).toHaveLength(1)
+  })
+
+  it('leaves cancel enabled when cancelDisabled is unset', () => {
+    expect(cancel(mountFooter()).attributes('disabled')).toBeUndefined()
+  })
+})
+
+describe('ModalFooter confirmIcon', () => {
+  // The icon exists because a scripted conversion silently dropped `icon` from
+  // two action buttons: it type-checked, linted and ran, it just rendered no
+  // icon. So these assert which button carries it, not that one does.
+  it('renders the icon on the action button and not on cancel', () => {
+    const wrapper = mountFooter({ confirmIcon: 'check' })
+
+    expect(action(wrapper).find('i.fa-check').exists()).toBe(true)
+    expect(cancel(wrapper).find('i').exists()).toBe(false)
+  })
+
+  it('renders no icon on either button when confirmIcon is unset', () => {
+    const wrapper = mountFooter()
+
+    expect(action(wrapper).find('i').exists()).toBe(false)
+    expect(cancel(wrapper).find('i').exists()).toBe(false)
+  })
+
+  it('keeps the label alongside the icon rather than replacing it', () => {
+    const wrapper = mountFooter({ confirmIcon: 'check' })
+
+    expect(action(wrapper).text()).toContain('Opslaan')
+  })
+
+  it('accepts an icon name bound at runtime', async () => {
+    const wrapper = mountFooter({ confirmIcon: 'check' })
+    await wrapper.setProps({ confirmIcon: 'floppy-disk' })
+
+    expect(action(wrapper).find('i.fa-floppy-disk').exists()).toBe(true)
+    expect(action(wrapper).find('i.fa-check').exists()).toBe(false)
+  })
+})
+
+describe('ModalFooter confirmLoading', () => {
+  // The spinner is Font Awesome's, not a Tailwind utility, so matching it here is
+  // safe from the @source generation trap.
+  const spinnerIn = (button: ReturnType<typeof action>) =>
+    button.find('i.fa-spinner-third').exists()
+
+  it('shows the busy indicator on the action button only', () => {
+    const wrapper = mountFooter({ confirmLoading: true })
+
+    expect(spinnerIn(action(wrapper))).toBe(true)
+    expect(spinnerIn(cancel(wrapper))).toBe(false)
+  })
+
+  it('shows no busy indicator on either button when confirmLoading is unset', () => {
+    const wrapper = mountFooter()
+
+    expect(spinnerIn(action(wrapper))).toBe(false)
+    expect(spinnerIn(cancel(wrapper))).toBe(false)
+  })
+
+  it('keeps cancel clickable while the action is loading', async () => {
+    const wrapper = mountFooter({ confirmLoading: true })
+    await cancel(wrapper).trigger('click')
+
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+  })
+
+  it('moves the busy indicator when confirmLoading is toggled at runtime', async () => {
+    const wrapper = mountFooter()
+    expect(spinnerIn(action(wrapper))).toBe(false)
+
+    await wrapper.setProps({ confirmLoading: true })
+    expect(spinnerIn(action(wrapper))).toBe(true)
+    expect(spinnerIn(cancel(wrapper))).toBe(false)
+  })
+})
+
+describe('ModalFooter confirmVariant', () => {
+  // The cancel button has a fixed variant of its own; confirmVariant must not
+  // reach it. Compared against a baseline mount rather than a hardcoded value, so
+  // this stays true if the cancel styling is ever changed deliberately.
+  it.each(['primary', 'secondary', 'success', 'danger', 'warning'])(
+    'passes the variant "%s" through to the action button, leaving cancel alone',
+    (variant) => {
+      const baseline = cancel(mountFooter()).attributes('data-variant')
+      const wrapper = mountFooter({ confirmVariant: variant })
+
+      expect(action(wrapper).attributes('data-variant')).toBe(variant)
+      expect(cancel(wrapper).attributes('data-variant')).toBe(baseline)
+    },
+  )
+
+  it('falls through to the button default when no variant is supplied', () => {
+    expect(action(mountFooter()).attributes('data-variant')).toBe('primary')
+  })
+
+  it('accepts a variant computed at runtime rather than a literal', async () => {
+    // mirrors the real call sites: `options.variant ?? 'primary'` and
+    // `isLast ? 'success' : 'primary'`
+    const options: { variant?: string } = {}
+    const wrapper = mountFooter({ confirmVariant: options.variant ?? 'primary' })
+    expect(action(wrapper).attributes('data-variant')).toBe('primary')
+
+    const isLast = true
+    await wrapper.setProps({ confirmVariant: isLast ? 'success' : 'primary' })
+    expect(action(wrapper).attributes('data-variant')).toBe('success')
+  })
+
+  it('re-renders the action button when the variant changes', async () => {
+    const wrapper = mountFooter({ confirmVariant: 'primary' })
+    await wrapper.setProps({ confirmVariant: 'danger' })
+
+    expect(action(wrapper).attributes('data-variant')).toBe('danger')
+    expect(wrapper.emitted('confirm')).toBeUndefined()
+  })
+})
+
+describe('ModalFooter layout', () => {
+  it('is a single-root component, so fallthrough attributes have one home', () => {
+    // A comment node before the root makes this multi-root, and the compiler
+    // strips comments in production only -- so a consumer's class would land
+    // somewhere different in dev than in prod. Guarding that here.
+    const wrapper = mountFooter()
+    const row = wrapper.find('button').element.parentElement
+
+    expect(wrapper.element).toBe(row)
+    expect(wrapper.classes().length).toBeGreaterThan(0)
+  })
+
+  it('puts a consumer class, id and data attribute on the row itself', () => {
+    const wrapper = mount(ModalFooter, {
+      props: { confirmLabel: 'Opslaan', cancelLabel: CANCEL_LABEL },
+      attrs: { class: 'consumer-class', id: 'consumer-id', 'data-test': 'footer' },
+    })
+    const row = wrapper.find('button').element.parentElement as HTMLElement
+
+    expect(row.classList.contains('consumer-class')).toBe(true)
+    expect(row.getAttribute('id')).toBe('consumer-id')
+    expect(row.getAttribute('data-test')).toBe('footer')
+  })
+
+  it('adds no padding of its own, because the modal footer slot supplies it', () => {
+    const classes = mountFooter().classes()
+
+    expect(classes.length).toBeGreaterThan(0)
+    expect(classes.filter((c) => /^-?p[xytblrse]?-/.test(c))).toEqual([])
+  })
+
+  it('renders both buttons as siblings in one row element', () => {
+    const wrapper = mountFooter()
+    const parents = wrapper.findAll('button').map((b) => b.element.parentElement)
+
+    expect(parents[0]?.tagName).toBe('DIV')
+    expect(parents[0]).toBe(parents[1])
+  })
+
+  it('renders cancel before the action button in document order', () => {
+    const wrapper = mountFooter()
+    const labels = wrapper.findAll('button').map((b) => b.text())
+
+    expect(labels).toEqual([CANCEL_LABEL, 'Opslaan'])
+  })
+})

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

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import NexxtDropdownButton from '../../organisms/DropdownButton/DropdownButton.vue'
+import PageCard from './PageCard.vue'
+
+export default {
+  title: 'Components/Molecules/Page Card',
+  component: PageCard,
+} satisfies Meta<typeof PageCard>
+
+type Story = StoryObj<typeof PageCard>
+
+const ACTIONS_SLOT = `
+  <template #actions>
+    <NexxtDropdownButton
+      icon-only
+      variant="secondary"
+      trigger-icon="ellipsis"
+      aria-label="Pagina-menu"
+      :options="[{ label: 'Bekijken', action: () => {} }, { label: 'Verwijderen', action: () => {} }]"
+    />
+  </template>
+`
+
+export const Default: Story = {
+  args: {
+    title: 'Welkomstpagina',
+    mockup: 'introduction',
+    icon: 'hand-wave',
+  },
+  render: (args) => ({
+    components: { PageCard },
+    setup() {
+      return { args }
+    },
+    template: '<PageCard v-bind="args" class="max-w-sm" />',
+  }),
+}
+
+export const WithMenu: Story = {
+  args: {
+    title: 'Over ons',
+    mockup: 'about',
+    icon: 'users',
+    selectable: true,
+  },
+  render: (args) => ({
+    components: { PageCard, NexxtDropdownButton },
+    setup() {
+      return { args }
+    },
+    template: `<PageCard v-bind="args" class="max-w-sm">${ACTIONS_SLOT}</PageCard>`,
+  }),
+}
+
+export const Selected: Story = {
+  args: {
+    title: 'Waarde-indicatie',
+    mockup: 'valuation',
+    icon: 'circle-euro',
+    selectable: true,
+    selected: true,
+  },
+  render: (args) => ({
+    components: { PageCard },
+    setup() {
+      return { args }
+    },
+    template: '<PageCard v-bind="args" class="max-w-sm" />',
+  }),
+}
+
+export const Dragging: Story = {
+  args: {
+    title: 'Courtage',
+    mockup: 'packages',
+    icon: 'piggy-bank',
+    dragging: true,
+  },
+  render: (args) => ({
+    components: { PageCard },
+    setup() {
+      return { args }
+    },
+    template: '<PageCard v-bind="args" class="max-w-sm" />',
+  }),
+}
+
+export const EmptyPreview: Story = {
+  args: {
+    title: 'Overige pagina',
+    icon: 'file-lines',
+  },
+  render: (args) => ({
+    components: { PageCard },
+    setup() {
+      return { args }
+    },
+    template: '<PageCard v-bind="args" class="max-w-sm" />',
+  }),
+}

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

@@ -0,0 +1,91 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PageCard from './PageCard.vue'
+
+describe('PageCard', () => {
+  it('renders the title and icon in the footer', () => {
+    const wrapper = mount(PageCard, { props: { title: 'Welkomstpagina', icon: 'hand-wave' } })
+
+    expect(wrapper.find('h3').text()).toBe('Welkomstpagina')
+    expect(wrapper.find('.fa-hand-wave').exists()).toBe(true)
+  })
+
+  it('renders the preview and actions slots', () => {
+    const wrapper = mount(PageCard, {
+      props: { title: 'Welkomstpagina' },
+      slots: {
+        preview: '<svg data-test="mockup" />',
+        actions: '<button data-test="menu">…</button>',
+      },
+    })
+
+    expect(wrapper.find('[data-test="mockup"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="menu"]').exists()).toBe(true)
+  })
+
+  it('draws the mockup for the given type in the preview area', () => {
+    const wrapper = mount(PageCard, { props: { title: 'Over ons', mockup: 'about' } })
+
+    expect(wrapper.find('svg').exists()).toBe(true)
+  })
+
+  it('lets the preview slot win over the mockup', () => {
+    const wrapper = mount(PageCard, {
+      props: { title: 'Over ons', mockup: 'about' },
+      slots: { preview: '<img data-test="thumb" />' },
+    })
+
+    expect(wrapper.find('[data-test="thumb"]').exists()).toBe(true)
+    expect(wrapper.find('svg').exists()).toBe(false)
+  })
+
+  it('renders a div and no select button by default', () => {
+    const wrapper = mount(PageCard, { props: { title: 'Welkomstpagina' } })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.find('button').exists()).toBe(false)
+  })
+
+  it('renders a stretched button with the title as name when selectable', () => {
+    const wrapper = mount(PageCard, { props: { title: 'Welkomstpagina', selectable: true } })
+
+    const button = wrapper.find('button')
+    expect(button.attributes('type')).toBe('button')
+    expect(button.attributes('aria-label')).toBe('Welkomstpagina')
+    expect(button.classes()).toContain('inset-0')
+    // The heading must stay real document structure next to the button, not inside it.
+    expect(wrapper.find('h3').element.closest('button')).toBeNull()
+  })
+
+  it('emits select from the button', async () => {
+    const wrapper = mount(PageCard, { props: { title: 'Welkomstpagina', selectable: true } })
+
+    await wrapper.find('button').trigger('click')
+
+    expect(wrapper.emitted('select')).toHaveLength(1)
+  })
+
+  it('draws the blue border when selected or dragging', () => {
+    const selected = mount(PageCard, {
+      props: { title: 'Welkomstpagina', selectable: true, selected: true },
+    })
+    const dragging = mount(PageCard, { props: { title: 'Welkomstpagina', dragging: true } })
+    const plain = mount(PageCard, { props: { title: 'Welkomstpagina' } })
+
+    expect(selected.classes()).toContain('border-cornflower-blue-500')
+    expect(selected.find('button').attributes('aria-current')).toBe('true')
+    expect(dragging.classes()).toContain('border-cornflower-blue-500')
+    expect(dragging.classes()).toContain('opacity-60')
+    expect(plain.classes()).toContain('border-gray-200')
+  })
+
+  it('passes class and attributes through to the card', () => {
+    const wrapper = mount(PageCard, {
+      props: { title: 'Welkomstpagina' },
+      attrs: { class: 'max-w-md', 'data-key': '7' },
+    })
+
+    expect(wrapper.classes()).toContain('max-w-md')
+    expect(wrapper.attributes('data-key')).toBe('7')
+  })
+})