@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,183 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { computed, defineComponent, ref } from 'vue'
+import NexxtButton from '../Button/Button.vue'
+import NexxtIcon, { type NexxtIconName } from '../Icon/Icon.vue'
+import PickerPreview from './PickerPreview.vue'
+
+/** A neutral stand-in for real preview art: one plane, one outline, the icon in the middle. */
+const DummyArt = 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>
+  `,
+})
+
+export default {
+  title: 'Components/Atoms/PickerPreview',
+  component: PickerPreview,
+  decorators: [() => ({ template: '<div class="w-86"><story /></div>' })],
+  args: {
+    title: 'Afbeelding',
+    description: 'Een foto of illustratie over de volle breedte van de pagina.',
+    emptyText: 'Kies een onderdeel om een voorbeeld te zien.',
+  },
+} satisfies Meta<typeof PickerPreview>
+
+type Story = StoryObj<typeof PickerPreview>
+
+const frameOf = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector<HTMLElement>('[class*="aspect-"]')!
+
+export const WithContent: Story = {
+  render: (args) => ({
+    components: { PickerPreview, DummyArt },
+    setup: () => ({ args }),
+    template: `<PickerPreview v-bind="args"><DummyArt icon="image" /></PickerPreview>`,
+  }),
+  play: async ({ canvasElement }) => {
+    const root = canvasElement.querySelector('[aria-hidden="true"]')!
+
+    await expect(root.querySelectorAll('button, a, input, [tabindex]')).toHaveLength(0)
+    await expect(frameOf(canvasElement).querySelector('svg')).not.toBeNull()
+  },
+}
+
+/** Nothing highlighted: the frame keeps its size and centres the text. */
+export const EmptyWithText: Story = {
+  args: { title: undefined, description: undefined },
+  play: async ({ canvasElement }) => {
+    const frame = frameOf(canvasElement)
+    const { width, height } = frame.getBoundingClientRect()
+
+    await expect(frame).toHaveTextContent('Kies een onderdeel om een voorbeeld te zien.')
+    await expect(width / height).toBeCloseTo(1.6, 1)
+  },
+}
+
+export const EmptyWithSlot: Story = {
+  args: { title: undefined, description: undefined },
+  render: (args) => ({
+    components: { PickerPreview, NexxtIcon },
+    setup: () => ({ args }),
+    template: `
+      <PickerPreview v-bind="args">
+        <template #empty>
+          <div class="flex flex-col items-center gap-2 text-gray-700">
+            <NexxtIcon name="hand-pointer" class="text-2xl" aria-hidden="true" />
+            <p class="small-normal">Wijs een onderdeel aan.</p>
+          </div>
+        </template>
+      </PickerPreview>
+    `,
+  }),
+}
+
+/** The explanation stops after two lines; the title after one. */
+export const LongDescription: Story = {
+  args: {
+    title: 'Een titel die veel te lang is voor de kolom van het voorbeeld',
+    description:
+      'Een uitleg die zo lang is dat hij niet in twee regels past. Hij loopt door en door, zodat te zien is dat de rest wordt afgekapt in plaats van dat de kolom groeit en de hoogte van het paneel verschuift.',
+  },
+  render: (args) => ({
+    components: { PickerPreview, DummyArt },
+    setup: () => ({ args }),
+    template: `<PickerPreview v-bind="args"><DummyArt icon="font" /></PickerPreview>`,
+  }),
+  play: async ({ canvasElement }) => {
+    const [title, description] = Array.from(canvasElement.querySelectorAll<HTMLElement>('p'))
+    const lineHeight = parseFloat(getComputedStyle(description).lineHeight)
+
+    await expect(title.scrollWidth).toBeGreaterThan(title.clientWidth)
+    await expect(description.clientHeight).toBeLessThanOrEqual(lineHeight * 2 + 1)
+  },
+}
+
+/** 280, 344 and 520 wide: the frame stays 16:10 at every width. */
+export const Widths: Story = {
+  decorators: [() => ({ template: '<story />' })],
+  render: (args) => ({
+    components: { PickerPreview, DummyArt },
+    setup: () => ({ args, widths: [280, 344, 520] }),
+    template: `
+      <div class="flex items-start gap-6">
+        <div v-for="width in widths" :key="width" class="shrink-0" :style="{ width: width + 'px' }">
+          <PickerPreview v-bind="args"><DummyArt icon="image" /></PickerPreview>
+        </div>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const frames = Array.from(canvasElement.querySelectorAll<HTMLElement>('[class*="aspect-"]'))
+
+    await expect(frames.map((frame) => Math.round(frame.getBoundingClientRect().width))).toEqual([
+      280, 344, 520,
+    ])
+    for (const frame of frames) {
+      const { width, height } = frame.getBoundingClientRect()
+      await expect(width / height).toBeCloseTo(1.6, 1)
+      await expect(getComputedStyle(frame).overflow).toBe('hidden')
+    }
+  },
+}
+
+const SEQUENCE = [
+  { key: 'image', icon: 'image', title: 'Afbeelding', description: 'Een foto of illustratie.' },
+  { key: 'title', icon: 'heading', title: 'Titel', description: 'Een kop boven een onderdeel.' },
+  { key: 'text', icon: 'font', title: 'Tekst', description: 'Een alinea lopende tekst.' },
+] as const
+
+/** Each click shows the next item: the new content fades in, the old one is gone at once. */
+export const Swap: Story = {
+  render: () => ({
+    components: { PickerPreview, DummyArt, NexxtButton },
+    setup() {
+      const index = ref(0)
+      const current = computed(() => SEQUENCE[index.value % SEQUENCE.length])
+      return { current, next: () => index.value++ }
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <NexxtButton variant="secondary" @click="next">Volgende</NexxtButton>
+        <PickerPreview :content-key="current.key" :title="current.title" :description="current.description">
+          <DummyArt :icon="current.icon" />
+        </PickerPreview>
+      </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const frame = frameOf(canvasElement)
+    const fading: string[] = []
+    frame.addEventListener('transitionrun', (event) => {
+      fading.push((event as TransitionEvent).propertyName)
+    })
+
+    await userEvent.click(within(canvasElement).getByRole('button', { name: 'Volgende' }))
+
+    // no crossfade: only the incoming layer is ever in the frame
+    await expect(frame.children).toHaveLength(1)
+    await expect(canvasElement.querySelector('p')).toHaveTextContent('Titel')
+    await waitFor(() => expect(fading).toContain('opacity'))
+
+    // swaps 30ms apart, like a held arrow key, show at full opacity instead of restarting the fade
+    const button = within(canvasElement).getByRole('button', { name: 'Volgende' })
+    await new Promise((resolve) => setTimeout(resolve, 300))
+    button.click()
+    await new Promise((resolve) => setTimeout(resolve, 30))
+    button.click()
+    await new Promise((resolve) => setTimeout(resolve, 20))
+    await expect(getComputedStyle(frame.children[0]).opacity).toBe('1')
+    await expect(getComputedStyle(canvasElement.querySelector('p')!.parentElement!).opacity).toBe(
+      '1',
+    )
+  },
+}

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

@@ -0,0 +1,137 @@
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
+import PickerPreview from './PickerPreview.vue'
+
+const frameOf = (wrapper: ReturnType<typeof mount>) => wrapper.find('[class*="aspect-"]')
+
+const stubReducedMotion = (reduce: boolean) =>
+  vi.stubGlobal('matchMedia', (query: string) => ({
+    matches: reduce && query.includes('reduce'),
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }))
+
+describe('PickerPreview', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('hides the whole preview from assistive tech and holds nothing focusable', () => {
+    const wrapper = mount(PickerPreview, {
+      props: { title: 'Afbeelding', description: 'Een foto' },
+      slots: { default: '<svg></svg>' },
+    })
+
+    expect(wrapper.attributes('aria-hidden')).toBe('true')
+    expect(wrapper.find('button, a, input, [tabindex]').exists()).toBe(false)
+  })
+
+  it('keeps a 16:10 frame that clips its content on the radius', () => {
+    const wrapper = mount(PickerPreview)
+
+    expect(frameOf(wrapper).classes()).toEqual(
+      expect.arrayContaining(['aspect-16/10', 'w-full', 'overflow-hidden', 'rounded-xl']),
+    )
+  })
+
+  it('shows the empty text in the frame when there is no content and no title', () => {
+    const wrapper = mount(PickerPreview, { props: { emptyText: 'Kies een item' } })
+
+    expect(frameOf(wrapper).text()).toBe('Kies een item')
+    expect(wrapper.findAll('p')).toHaveLength(1)
+  })
+
+  it('lets the empty slot replace the empty text', () => {
+    const wrapper = mount(PickerPreview, {
+      props: { emptyText: 'Kies een item' },
+      slots: { empty: '<em>Niets gekozen</em>' },
+    })
+
+    expect(frameOf(wrapper).text()).toBe('Niets gekozen')
+  })
+
+  it('keeps the frame when empty without any copy', () => {
+    const wrapper = mount(PickerPreview)
+
+    expect(frameOf(wrapper).exists()).toBe(true)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('renders title and description under an empty frame without slot content', () => {
+    const wrapper = mount(PickerPreview, {
+      props: { title: 'Titel', description: 'Een kop', emptyText: 'Kies een item' },
+    })
+
+    expect(frameOf(wrapper).text()).toBe('')
+    expect(wrapper.findAll('p').map((p) => p.text())).toEqual(['Titel', 'Een kop'])
+  })
+
+  it('renders the default slot in the frame', () => {
+    const wrapper = mount(PickerPreview, {
+      props: { title: 'Afbeelding' },
+      slots: { default: '<svg data-test="art"></svg>' },
+    })
+
+    expect(frameOf(wrapper).find('[data-test="art"]').exists()).toBe(true)
+  })
+
+  it('fades new content in and drops the old content at once', async () => {
+    stubReducedMotion(false)
+    const wrapper = mount(PickerPreview, {
+      props: { title: 'Een', contentKey: 'a' },
+      slots: { default: '<span>art</span>' },
+      global: { stubs: { transition: false } },
+    })
+
+    await wrapper.setProps({ title: 'Twee', contentKey: 'b' })
+
+    const layers = frameOf(wrapper).element.children
+    expect(layers).toHaveLength(1)
+    expect(layers[0].className).toContain('opacity-0')
+    expect(layers[0].className).toContain('motion-reduce:transition-none')
+    expect(wrapper.findAll('p').map((p) => p.text())).toEqual(['Twee'])
+  })
+
+  it('skips the fade for a swap within 150ms of the previous one, as with a held arrow key', async () => {
+    vi.useFakeTimers()
+    stubReducedMotion(false)
+    const wrapper = mount(PickerPreview, {
+      props: { title: 'Een', contentKey: 'a' },
+      slots: { default: '<span>art</span>' },
+      global: { stubs: { transition: false } },
+    })
+    const layer = () => frameOf(wrapper).element.children[0]
+
+    await wrapper.setProps({ title: 'Twee', contentKey: 'b' })
+    expect(layer().className).toContain('opacity-0')
+
+    vi.advanceTimersByTime(30)
+    await wrapper.setProps({ title: 'Drie', contentKey: 'c' })
+    expect(frameOf(wrapper).element.children).toHaveLength(1)
+    expect(layer().className).not.toContain('opacity-0')
+    expect(wrapper.findAll('p').at(-1)!.element.parentElement!.className).not.toContain('opacity-0')
+
+    // after a pause, a single swap fades again
+    vi.advanceTimersByTime(200)
+    await wrapper.setProps({ title: 'Vier', contentKey: 'd' })
+    expect(layer().className).toContain('opacity-0')
+    vi.useRealTimers()
+  })
+
+  it('swaps without a fade under reduced motion', async () => {
+    stubReducedMotion(true)
+    const wrapper = mount(PickerPreview, {
+      props: { title: 'Een', contentKey: 'a' },
+      slots: { default: '<span>art</span>' },
+      global: { stubs: { transition: false } },
+    })
+
+    await wrapper.setProps({ title: 'Twee', contentKey: 'b' })
+    await nextTick()
+
+    const layers = frameOf(wrapper).element.children
+    expect(layers).toHaveLength(1)
+    expect(layers[0].className).not.toContain('opacity-0')
+  })
+})

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import PresenceIndicator from './PresenceIndicator.vue'
+
+export default {
+  title: 'Components/Atoms/Presence indicator',
+  component: PresenceIndicator,
+} satisfies Meta<typeof PresenceIndicator>
+
+type Story = StoryObj<typeof PresenceIndicator>
+
+export const Online: Story = {
+  args: {
+    online: true,
+  },
+}
+
+export const Offline: Story = {
+  args: {
+    online: false,
+  },
+}

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import NexxtPropertyListing from './PropertyListing.vue'
+
+export default {
+  title: 'Components/Atoms/Property Listing',
+  component: NexxtPropertyListing,
+} satisfies Meta<typeof NexxtPropertyListing>
+
+type Story = StoryObj<typeof NexxtPropertyListing>
+
+export const Default: Story = {
+  args: {
+    price: 520000,
+    city: 'Hollandscheveld',
+    text: 'Van Echtenstraat 62b',
+  },
+}
+
+export const CityOnly: Story = {
+  args: {
+    city: 'Hollandscheveld',
+  },
+}
+
+export const WithLongText: Story = {
+  args: {
+    price: 520000,
+    city: 'Hollandscheveld',
+    text: 'Van Echtenstraat 62b is a spacious family home located in the heart of Hollandscheveld. This charming property features a large living area, modern kitchen, and a sunny backyard, making it perfect for comfortable family living.',
+  },
+}
+
+export const OverflowingCity: Story = {
+  args: {
+    price: 1250000,
+    city: 'Nieuw-Amsterdam en Veenoord',
+  },
+}

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

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NexxtPropertyListing from './PropertyListing.vue'
+
+describe('NexxtPropertyListing', () => {
+  it('renders price with euro sign and city', () => {
+    const wrapper = mount(NexxtPropertyListing, {
+      props: { price: 520000, city: 'Hollandscheveld' },
+    })
+    expect(wrapper.text()).toContain('€')
+    expect(wrapper.text()).toContain('520.000')
+    expect(wrapper.text()).toContain('Hollandscheveld')
+    expect(wrapper.text()).toContain('|')
+  })
+
+  it('renders city as semibold when no price', () => {
+    const wrapper = mount(NexxtPropertyListing, {
+      props: { city: 'Hollandscheveld' },
+    })
+    expect(wrapper.text()).not.toContain('|')
+    expect(wrapper.find('.body-semibold').text()).toContain('Hollandscheveld')
+  })
+
+  it('does not render separator when price is absent', () => {
+    const wrapper = mount(NexxtPropertyListing, {
+      props: { city: 'Hollandscheveld' },
+    })
+    expect(wrapper.text()).not.toContain('|')
+  })
+
+  it('renders text when provided', () => {
+    const wrapper = mount(NexxtPropertyListing, {
+      props: { city: 'Hollandscheveld', text: 'Van Echtenstraat 62b' },
+    })
+    expect(wrapper.text()).toContain('Van Echtenstraat 62b')
+  })
+
+  it('renders long text', () => {
+    const longText =
+      'Van Echtenstraat 62b is a spacious family home located in the heart of Hollandscheveld. This charming property features a large living area, modern kitchen, and a sunny backyard, making it perfect for comfortable family living.'
+    const wrapper = mount(NexxtPropertyListing, {
+      props: { price: 520000, city: 'Hollandscheveld', text: longText },
+    })
+    expect(wrapper.text()).toContain(longText)
+  })
+})

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

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import SelectableOption from './SelectableOption.vue'
+
+export default {
+  title: 'Components/Atoms/SelectableOption',
+  component: SelectableOption,
+  argTypes: {
+    rounded: { control: 'select', options: ['lg', 'xl', '3xl'] },
+  },
+} satisfies Meta<typeof SelectableOption>
+
+type Story = StoryObj<typeof SelectableOption>
+
+const single = (args: Story['args']) => ({
+  components: { SelectableOption },
+  setup: () => ({ args }),
+  template: `<SelectableOption v-bind="args" class="px-5 py-2.5">30 minuten</SelectableOption>`,
+})
+
+export const Default: Story = {
+  args: { selected: false },
+  render: single,
+}
+
+export const Selected: Story = {
+  args: { selected: true },
+  render: single,
+}
+
+export const Disabled: Story = {
+  args: { selected: false, disabled: true },
+  render: single,
+}
+
+export const DisabledSelected: Story = {
+  args: { selected: true, disabled: true },
+  render: single,
+}
+
+/** Cards get a check badge in the corner; it only appears while selected. */
+export const WithCheckmark: Story = {
+  args: { selected: true, checkmark: true },
+  render: (args) => ({
+    components: { SelectableOption },
+    setup: () => ({ args }),
+    template: `<SelectableOption v-bind="args" class="w-48 p-6 text-center">Kaart</SelectableOption>`,
+  }),
+}
+
+/**
+ * The three radii side by side. `lg` is for compact rows of choices, `xl` for
+ * tile pickers, `3xl` for the large content-type tiles.
+ */
+export const Radii: Story = {
+  render: () => ({
+    components: { SelectableOption },
+    setup: () => ({ radii: ['lg', 'xl', '3xl'] as const }),
+    template: `
+      <div class="flex items-center gap-4">
+        <SelectableOption v-for="r in radii" :key="r" :rounded="r" selected class="px-5 py-2.5">
+          {{ r }}
+        </SelectableOption>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * A single-choice group, the way the planner wizard uses it: the parent owns
+ * the selection and every option reads its own `selected` from it.
+ */
+export const SingleChoiceGroup: Story = {
+  render: () => ({
+    components: { SelectableOption },
+    setup: () => {
+      const options = [15, 30, 45, 60]
+      const chosen = ref(30)
+      return { options, chosen }
+    },
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <SelectableOption
+          v-for="option in options"
+          :key="option"
+          rounded="lg"
+          :selected="chosen === option"
+          class="px-5 py-2.5"
+          @click="chosen = option"
+        >
+          {{ option }} minuten
+        </SelectableOption>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The slot receives `selected`, so content can colour itself along with the
+ * option instead of re-deriving the state. This is the employee-card pattern.
+ */
+export const SlotReceivesSelected: Story = {
+  render: () => ({
+    components: { SelectableOption },
+    setup: () => {
+      const chosen = ref('anna')
+      const people = [
+        { id: 'anna', name: 'Anna de Vries', email: 'anna@nexxtmove.nl' },
+        { id: 'bram', name: 'Bram Jansen', email: 'bram@nexxtmove.nl' },
+      ]
+      return { chosen, people }
+    },
+    template: `
+      <div class="grid w-[520px] grid-cols-2 gap-4">
+        <SelectableOption
+          v-for="person in people"
+          :key="person.id"
+          v-slot="{ selected }"
+          :selected="chosen === person.id"
+          class="p-6 text-center"
+          @click="chosen = person.id"
+        >
+          <p class="font-semibold" :class="selected ? 'text-cornflower-blue-500' : 'text-neutral-900'">
+            {{ person.name }}
+          </p>
+          <p class="text-sm text-neutral-500">{{ person.email }}</p>
+        </SelectableOption>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,96 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SelectableOption from './SelectableOption.vue'
+
+describe('SelectableOption', () => {
+  it('renders a button that never submits a form', () => {
+    const wrapper = mount(SelectableOption, { slots: { default: 'Optie' } })
+
+    expect(wrapper.element.tagName).toBe('BUTTON')
+    expect(wrapper.attributes('type')).toBe('button')
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(SelectableOption, { slots: { default: 'Optie' } })
+
+    expect(wrapper.text()).toBe('Optie')
+  })
+
+  it('is not selected by default', () => {
+    const wrapper = mount(SelectableOption)
+
+    expect(wrapper.attributes('aria-pressed')).toBe('false')
+    expect(wrapper.classes()).toContain('border-gray-200')
+    expect(wrapper.classes()).not.toContain('border-cornflower-blue-500')
+  })
+
+  it('exposes the selected state to assistive tech and styles it', () => {
+    const wrapper = mount(SelectableOption, { props: { selected: true } })
+
+    expect(wrapper.attributes('aria-pressed')).toBe('true')
+    expect(wrapper.classes()).toContain('border-cornflower-blue-500')
+    expect(wrapper.classes()).toContain('bg-cornflower-blue-50')
+    expect(wrapper.classes()).not.toContain('border-gray-200')
+  })
+
+  it('hands selected to the slot', () => {
+    const wrapper = mount(SelectableOption, {
+      props: { selected: true },
+      slots: {
+        default: `<template #default="{ selected }"><span>{{ selected ? 'aan' : 'uit' }}</span></template>`,
+      },
+    })
+
+    expect(wrapper.text()).toBe('aan')
+  })
+
+  it('uses the xl radius by default', () => {
+    const wrapper = mount(SelectableOption)
+
+    expect(wrapper.classes()).toContain('rounded-xl')
+  })
+
+  it.each(['lg', 'xl', '3xl'] as const)('applies the %s radius', (rounded) => {
+    const wrapper = mount(SelectableOption, { props: { rounded } })
+
+    expect(wrapper.classes()).toContain(`rounded-${rounded}`)
+  })
+
+  it('disables the button when disabled', () => {
+    const wrapper = mount(SelectableOption, { props: { disabled: true } })
+
+    expect((wrapper.element as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('emits a native click when chosen', async () => {
+    const wrapper = mount(SelectableOption)
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.emitted('click')).toHaveLength(1)
+  })
+
+  it('shows no check badge by default', () => {
+    const wrapper = mount(SelectableOption, { props: { selected: true } })
+
+    expect(wrapper.find('i.fa-check').exists()).toBe(false)
+  })
+
+  it('shows the check badge only while selected', async () => {
+    const wrapper = mount(SelectableOption, { props: { checkmark: true, selected: false } })
+
+    expect(wrapper.find('i.fa-check').exists()).toBe(false)
+    expect(wrapper.classes()).toContain('relative')
+
+    await wrapper.setProps({ selected: true })
+
+    expect(wrapper.find('i.fa-check').exists()).toBe(true)
+  })
+
+  it('forwards attributes and classes to the button', () => {
+    const wrapper = mount(SelectableOption, { attrs: { class: 'p-6', 'data-test': 'optie' } })
+
+    expect(wrapper.classes()).toContain('p-6')
+    expect(wrapper.attributes('data-test')).toBe('optie')
+  })
+})

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Skeleton from './Skeleton.vue'
+
+export default {
+  title: 'Components/Atoms/Skeleton',
+  component: Skeleton,
+} satisfies Meta<typeof Skeleton>
+
+type Story = StoryObj<typeof Skeleton>
+
+export const Default: Story = {
+  args: {
+    class: 'h-4 w-48',
+  },
+}
+
+export const Circle: Story = {
+  args: {
+    class: 'h-12 w-12 rounded-full',
+  },
+}
+
+export const ImagePlaceholder: Story = {
+  args: {
+    class: 'h-40 w-80',
+  },
+}