@nexxtmove/ui 2.6.0 → 2.8.0

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import PageContainer from './PageContainer.vue'
+
+export default {
+  title: 'Components/Molecules/PageContainer',
+  component: PageContainer,
+} satisfies Meta<typeof PageContainer>
+
+type Story = StoryObj<typeof PageContainer>
+
+const contentBlock = `
+  <div class="rounded-lg border border-gray-200 bg-gray-50 p-8 text-center">
+    Content
+  </div>
+`
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { PageContainer },
+    setup: () => ({ args }),
+    template: `
+      <div class="h-96">
+        <PageContainer v-bind="args">${contentBlock}</PageContainer>
+      </div>
+    `,
+  }),
+}
+
+/** Every step of the width scale, from xs up to full (the app's maximum width). */
+export const Widths: Story = {
+  render: () => ({
+    components: { PageContainer },
+    setup: () => ({
+      widths: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        '2xl',
+        '3xl',
+        '4xl',
+        '5xl',
+        '6xl',
+        '7xl',
+        '8xl',
+        'full',
+      ],
+    }),
+    template: `
+      <div class="flex flex-col gap-2">
+        <div v-for="width in widths" :key="width" class="h-32">
+          <PageContainer :max-width="width">
+            <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 text-center">
+              {{ width }}
+            </div>
+          </PageContainer>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/** The sidebar slot slides in and out from the right edge. */
+export const WithSidebar: Story = {
+  render: () => ({
+    components: { PageContainer },
+    setup: () => ({ open: ref(true) }),
+    template: `
+      <div class="flex h-96 flex-col">
+        <button
+          type="button"
+          class="button button-primary mb-4 self-start rounded-lg"
+          @click="open = !open"
+        >
+          Toggle sidebar
+        </button>
+        <PageContainer max-width="3xl">
+          ${contentBlock}
+          <template v-if="open" #sidebar>
+            <div class="rounded-lg border border-gray-200 bg-gray-50 p-8 text-center">
+              Sidebar
+            </div>
+          </template>
+        </PageContainer>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PageContainer from './PageContainer.vue'
+
+const WIDTHS = {
+  xs: 'max-w-xs',
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+  '8xl': 'max-w-8xl',
+  full: 'max-w-full-width',
+} as const
+
+describe('PageContainer', () => {
+  it('renders a single-root div', () => {
+    const wrapper = mount(PageContainer)
+
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('centers the content at max-w-7xl by default', () => {
+    const wrapper = mount(PageContainer, { slots: { default: '<p>content</p>' } })
+
+    expect(wrapper.find('.mx-auto').classes()).toContain('max-w-7xl')
+  })
+
+  it.each(Object.entries(WIDTHS))('maps maxWidth %s to %s', (maxWidth, expected) => {
+    const wrapper = mount(PageContainer, {
+      props: { maxWidth: maxWidth as keyof typeof WIDTHS },
+    })
+
+    expect(wrapper.find('.mx-auto').classes()).toContain(expected)
+  })
+
+  it('renders the sidebar only when the slot is filled', () => {
+    const withSidebar = mount(PageContainer, { slots: { sidebar: '<p>side</p>' } })
+    const withoutSidebar = mount(PageContainer)
+
+    expect(withSidebar.find('aside').exists()).toBe(true)
+    expect(withSidebar.find('aside').text()).toBe('side')
+    expect(withoutSidebar.find('aside').exists()).toBe(false)
+  })
+})

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import PageMockup, { PAGE_MOCKUP_TYPES } from './PageMockup.vue'
+
+export default {
+  title: 'Components/Molecules/Page Mockup',
+  component: PageMockup,
+} satisfies Meta<typeof PageMockup>
+
+type Story = StoryObj<typeof PageMockup>
+
+export const Default: Story = {
+  args: { type: 'about' },
+  render: (args) => ({
+    components: { PageMockup },
+    setup() {
+      return { args }
+    },
+    template:
+      '<div class="w-80 rounded-xl border border-gray-200 p-3"><PageMockup v-bind="args" /></div>',
+  }),
+}
+
+export const AllTypes: Story = {
+  render: () => ({
+    components: { PageMockup },
+    setup() {
+      return { types: PAGE_MOCKUP_TYPES }
+    },
+    template: `
+      <div class="grid max-w-3xl grid-cols-2 gap-4">
+        <div v-for="type in types" :key="type" class="rounded-xl border border-gray-200 p-3">
+          <PageMockup :type="type" />
+          <p class="mt-2 small-semibold text-gray-700">{{ type }}</p>
+        </div>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PageMockup, { PAGE_MOCKUP_TYPES } from './PageMockup.vue'
+
+describe('PageMockup', () => {
+  it.each(PAGE_MOCKUP_TYPES)('renders a decorative svg for %s', (type) => {
+    const wrapper = mount(PageMockup, { props: { type } })
+
+    expect(wrapper.element.tagName).toBe('svg')
+    expect(wrapper.attributes('aria-hidden')).toBe('true')
+    expect(wrapper.findAll('rect').length).toBeGreaterThan(4)
+  })
+
+  it('draws a different sketch per type', () => {
+    const about = mount(PageMockup, { props: { type: 'about' } }).html()
+    const reviews = mount(PageMockup, { props: { type: 'reviews' } }).html()
+
+    expect(about).not.toBe(reviews)
+  })
+})

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import PageTypeTile from './PageTypeTile.vue'
+
+export default {
+  title: 'Components/Molecules/Page Type Tile',
+  component: PageTypeTile,
+} satisfies Meta<typeof PageTypeTile>
+
+type Story = StoryObj<typeof PageTypeTile>
+
+export const Default: Story = {
+  args: {
+    label: "USP's",
+    icon: 'briefcase',
+  },
+  render: (args) => ({
+    components: { PageTypeTile },
+    setup() {
+      return { args }
+    },
+    template: '<div class="max-w-36"><PageTypeTile v-bind="args" draggable="true" /></div>',
+  }),
+}
+
+export const Dragging: Story = {
+  args: {
+    label: 'Courtage',
+    icon: 'piggy-bank',
+    dragging: true,
+  },
+  render: (args) => ({
+    components: { PageTypeTile },
+    setup() {
+      return { args }
+    },
+    template: '<div class="max-w-36"><PageTypeTile v-bind="args" /></div>',
+  }),
+}
+
+export const Grid: Story = {
+  render: () => ({
+    components: { PageTypeTile },
+    setup() {
+      const tiles = [
+        { label: 'Welkomstpagina', icon: 'hand-wave' },
+        { label: 'Over ons', icon: 'users' },
+        { label: 'Waarde-indicatie', icon: 'circle-euro' },
+        { label: "USP's", icon: 'briefcase' },
+        { label: 'Courtage', icon: 'piggy-bank' },
+        { label: 'Referentiewoningen', icon: 'house' },
+        { label: 'Klantbeoordelingen', icon: 'star' },
+        { label: 'Overige pagina', icon: 'file-lines' },
+      ] as const
+
+      return { tiles }
+    },
+    template: `
+      <div class="grid max-w-xs grid-cols-2 gap-3">
+        <PageTypeTile v-for="tile in tiles" :key="tile.label" v-bind="tile" draggable="true" />
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PageTypeTile from './PageTypeTile.vue'
+
+describe('PageTypeTile', () => {
+  it('renders a button with the label and icon', () => {
+    const wrapper = mount(PageTypeTile, { props: { label: "USP's", icon: 'briefcase' } })
+
+    expect(wrapper.element.tagName).toBe('BUTTON')
+    expect(wrapper.attributes('type')).toBe('button')
+    expect(wrapper.text()).toBe("USP's")
+    expect(wrapper.find('.fa-briefcase').exists()).toBe(true)
+  })
+
+  it('emits select on click', async () => {
+    const wrapper = mount(PageTypeTile, { props: { label: "USP's", icon: 'briefcase' } })
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.emitted('select')).toHaveLength(1)
+  })
+
+  it('draws the blue border while dragging', () => {
+    const dragging = mount(PageTypeTile, {
+      props: { label: "USP's", icon: 'briefcase', dragging: true },
+    })
+    const idle = mount(PageTypeTile, { props: { label: "USP's", icon: 'briefcase' } })
+
+    expect(dragging.classes()).toContain('border-cornflower-blue-500')
+    expect(idle.classes()).toContain('border-gray-200')
+  })
+
+  it('passes attributes through, so the consumer can make it draggable', () => {
+    const wrapper = mount(PageTypeTile, {
+      props: { label: "USP's", icon: 'briefcase' },
+      attrs: { draggable: 'true' },
+    })
+
+    expect(wrapper.attributes('draggable')).toBe('true')
+  })
+})

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

@@ -0,0 +1,72 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Pagination from './Pagination.vue'
+
+export default {
+  title: 'Components/Molecules/Pagination',
+  component: Pagination,
+  args: {
+    total: 100,
+    itemsPerPage: 10,
+    siblingCount: 1,
+    page: 1,
+    showEdges: true,
+  },
+} satisfies Meta<typeof Pagination>
+
+type Story = StoryObj<typeof Pagination>
+
+export const Default: Story = {}
+
+export const MidPage: Story = {
+  args: {
+    page: 5,
+  },
+}
+
+export const FewPages: Story = {
+  args: {
+    total: 30,
+    page: 2,
+  },
+}
+
+export const LotsOfPages: Story = {
+  args: {
+    total: 2054,
+    page: 1,
+  },
+}
+
+export const NoEdges: Story = {
+  args: {
+    showEdges: false,
+    page: 5,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    page: 5,
+    disabled: true,
+  },
+}
+
+export const Playground: Story = {
+  render: (args) => ({
+    components: { Pagination },
+    setup() {
+      const currentPage = ref(args.page ?? 1)
+      return { args, currentPage }
+    },
+    template: `
+      <div class="flex flex-col items-center gap-4">
+        <p class="text-gray-700 body-normal">Current page: <strong>{{ currentPage }}</strong></p>
+        <Pagination v-bind="args" v-model:page="currentPage" />
+      </div>
+    `,
+  }),
+  args: {
+    total: 100,
+  },
+}

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

@@ -0,0 +1,130 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Pagination from './Pagination.vue'
+
+const stubs = { NexxtIcon: { template: '<span />' } }
+
+const mountPagination = (props = {}) =>
+  mount(Pagination, {
+    props: { total: 100, ...props },
+    global: { stubs },
+  })
+
+describe('Pagination', () => {
+  describe('rendering', () => {
+    it('renders without crashing', () => {
+      const wrapper = mountPagination()
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('renders page number buttons', () => {
+      const wrapper = mountPagination()
+      expect(wrapper.findAll('button').length).toBeGreaterThan(0)
+    })
+
+    it('renders the correct page buttons for a small page count', () => {
+      const wrapper = mountPagination({ total: 30, itemsPerPage: 10 })
+      const pageButtons = wrapper
+        .findAll('button')
+        .filter((b) => ['1', '2', '3'].includes(b.text()))
+      expect(pageButtons.length).toBe(3)
+    })
+
+    it('does not render pages beyond the total', () => {
+      const wrapper = mountPagination({ total: 30, itemsPerPage: 10 })
+      const page4 = wrapper.findAll('button').find((b) => b.text() === '4')
+      expect(page4).toBeUndefined()
+    })
+
+    it('shows ellipsis when there are many pages', () => {
+      const wrapper = mountPagination({ total: 100, itemsPerPage: 10 })
+      expect(wrapper.html()).toContain('…')
+    })
+
+    it('does not show ellipsis when all pages fit', () => {
+      const wrapper = mountPagination({ total: 30, itemsPerPage: 10 })
+      expect(wrapper.html()).not.toContain('…')
+    })
+  })
+
+  describe('page model', () => {
+    it('defaults to page 1 as the active page', () => {
+      const wrapper = mountPagination()
+      const page1 = wrapper.findAll('button').find((b) => b.text() === '1')
+      expect(page1?.attributes('data-selected')).toBeDefined()
+    })
+
+    it('sets the active page from the page prop', () => {
+      const wrapper = mountPagination({ total: 30, itemsPerPage: 10, page: 3 })
+      const page3 = wrapper.findAll('button').find((b) => b.text() === '3')
+      expect(page3?.attributes('data-selected')).toBeDefined()
+    })
+
+    it('only marks one page as active at a time', () => {
+      const wrapper = mountPagination({ total: 30, itemsPerPage: 10, page: 2 })
+      const selectedButtons = wrapper.findAll('button[data-selected]')
+      expect(selectedButtons.length).toBe(1)
+    })
+
+    it('emits update:page when a page button is clicked', async () => {
+      const wrapper = mountPagination({ total: 30, itemsPerPage: 10 })
+      const page2 = wrapper.findAll('button').find((b) => b.text() === '2')
+      await page2?.trigger('click')
+      expect(wrapper.emitted('update:page')).toBeTruthy()
+      expect(wrapper.emitted('update:page')?.[0]).toEqual([2])
+    })
+  })
+
+  describe('props', () => {
+    it('respects itemsPerPage when calculating total pages', () => {
+      const wrapper = mountPagination({ total: 20, itemsPerPage: 5 })
+      const pageButtons = wrapper
+        .findAll('button')
+        .filter((b) => ['1', '2', '3', '4'].includes(b.text()))
+      expect(pageButtons.length).toBe(4)
+    })
+
+    it('shows more sibling pages with a higher siblingCount', () => {
+      const wrapperLow = mountPagination({ total: 100, itemsPerPage: 10, page: 5, siblingCount: 1 })
+      const wrapperHigh = mountPagination({
+        total: 100,
+        itemsPerPage: 10,
+        page: 5,
+        siblingCount: 3,
+      })
+      expect(wrapperHigh.findAll('button').length).toBeGreaterThan(
+        wrapperLow.findAll('button').length,
+      )
+    })
+  })
+
+  describe('disabled', () => {
+    it('applies opacity-50 and pointer-events-none to the list when disabled', () => {
+      const wrapper = mountPagination({ disabled: true })
+      const list = wrapper.find('.opacity-50')
+      expect(list.exists()).toBe(true)
+      expect(list.classes()).toContain('pointer-events-none')
+    })
+
+    it('does not apply opacity-50 when not disabled', () => {
+      const wrapper = mountPagination({ disabled: false })
+      expect(wrapper.find('.opacity-50').exists()).toBe(false)
+    })
+
+    it('sets disabled attribute on nav buttons when disabled', () => {
+      const wrapper = mountPagination({ disabled: true, page: 5, total: 100 })
+      // All nav and page buttons should carry disabled
+      const allButtons = wrapper.findAll('button')
+      const disabledButtons = allButtons.filter((b) => b.attributes('disabled') !== undefined)
+      expect(disabledButtons.length).toBe(allButtons.length)
+    })
+
+    it('does not set disabled on page buttons when not disabled', () => {
+      const wrapper = mountPagination({ disabled: false, total: 30, itemsPerPage: 10, page: 2 })
+      const pageButtons = wrapper
+        .findAll('button')
+        .filter((b) => ['1', '2', '3'].includes(b.text()))
+      pageButtons.forEach((b) => expect(b.attributes('disabled')).toBeUndefined())
+    })
+  })
+})

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import { ref } from 'vue'
+import PickerItem from '../../atoms/PickerItem/PickerItem.vue'
+import PickerGroup from './PickerGroup.vue'
+
+/** A group sits in a listbox; outside one axe reports the options' missing parent. */
+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/Molecules/PickerGroup',
+  component: PickerGroup,
+  args: { label: 'Media', collapsible: true },
+} satisfies Meta<typeof PickerGroup>
+
+type Story = StoryObj<typeof PickerGroup>
+
+const renderGroup = (initiallyOpen: boolean) => (args: Story['args']) => ({
+  components: { PickerGroup, PickerItem },
+  setup: () => ({ args, open: ref(initiallyOpen), classes: LISTBOX_CLASSES }),
+  template: `
+    <div role="listbox" aria-label="Onderdelen" tabindex="0" :class="classes">
+      <PickerGroup v-bind="args" v-model:open="open">
+        <PickerItem id="group-image" label="Afbeelding" icon="image" highlighted />
+        <PickerItem id="group-video" label="Video" icon="video" />
+        <PickerItem id="group-gallery" label="Galerij" icon="images" />
+      </PickerGroup>
+      <PickerGroup label="Basis" :collapsible="args.collapsible">
+        <PickerItem id="group-title" label="Titel" icon="heading" />
+      </PickerGroup>
+    </div>
+  `,
+})
+
+const groupOf = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector<HTMLElement>('[role="group"]')!
+
+/** Click the heading to fold; the chevron turns and the options leave the DOM after 120ms. */
+export const Open: Story = {
+  render: renderGroup(true),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const listbox = canvas.getByRole('listbox')
+    const group = groupOf(canvasElement)
+    const heading = group.querySelector<HTMLElement>('[role="presentation"]')!
+
+    await expect(group).toHaveAttribute('aria-expanded', 'true')
+    await expect(document.getElementById(group.getAttribute('aria-labelledby')!)).toHaveTextContent(
+      'Media',
+    )
+    await expect(heading).not.toHaveAttribute('tabindex')
+    await expect(heading.querySelector('button, a')).toBeNull()
+
+    listbox.focus()
+    await userEvent.click(heading)
+
+    await expect(group).toHaveAttribute('aria-expanded', 'false')
+    await waitFor(() => expect(group.querySelectorAll('[role="option"]')).toHaveLength(0))
+    // the heading is no tab stop and prevents the mousedown, so focus stays on the listbox
+    await expect(listbox).toHaveFocus()
+  },
+}
+
+export const Closed: Story = {
+  render: renderGroup(false),
+  play: async ({ canvasElement }) => {
+    const group = groupOf(canvasElement)
+
+    await expect(group).toHaveAttribute('aria-expanded', 'false')
+    await expect(group.querySelectorAll('[role="option"]')).toHaveLength(0)
+  },
+}
+
+/** The heading is a plain label: no chevron, no hover tint, no `aria-expanded`. */
+export const NotCollapsible: Story = {
+  args: { collapsible: false },
+  render: renderGroup(true),
+  play: async ({ canvasElement }) => {
+    const group = groupOf(canvasElement)
+    const heading = group.querySelector<HTMLElement>('[role="presentation"]')!
+
+    await expect(group).not.toHaveAttribute('aria-expanded')
+    await expect(group).toHaveAttribute('aria-labelledby')
+    await expect(heading.querySelector('i')).toBeNull()
+
+    await userEvent.click(heading)
+    await expect(group.querySelectorAll('[role="option"]')).toHaveLength(3)
+  },
+}