@nexxtmove/ui 0.1.31 → 0.1.33

package/src/components/CustomerJourneyTile/CustomerJourneyTile.test.ts

@@ -1,178 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import CustomerJourneyTile from './CustomerJourneyTile.vue'
-
-const stubs = { NexxtIcon: { template: '<span :data-name="name" />', props: ['name'] } }
-
-const mountTile = (props = {}) =>
-  mount(CustomerJourneyTile, {
-    props: { ...props },
-    global: { stubs },
-  })
-
-describe('CustomerJourneyTile', () => {
-  describe('rendering', () => {
-    it('renders a button element', () => {
-      const wrapper = mountTile({ title: 'Latent' })
-      expect(wrapper.element.tagName).toBe('BUTTON')
-      expect(wrapper.attributes('type')).toBe('button')
-    })
-
-    it('renders the title label', () => {
-      const wrapper = mountTile({ title: 'Wonen' })
-      expect(wrapper.text()).toContain('Wonen')
-    })
-
-    it('does not render title label when title is omitted', () => {
-      const wrapper = mountTile({ amount: 100 })
-      expect(wrapper.text()).not.toContain('Latent')
-      expect(wrapper.find('span:not(.heading-1)').exists()).toBe(false)
-    })
-
-    it('does not render the icon div when title is omitted', () => {
-      const wrapper = mountTile({ amount: 100 })
-      expect(wrapper.find('.bg-purple-100').exists()).toBe(false)
-    })
-
-    it('does not render the icon div when title does not match a phase', () => {
-      const wrapper = mountTile({ title: 'Custom Title' })
-      expect(wrapper.find('.bg-purple-100').exists()).toBe(false)
-      expect(wrapper.text()).toContain('Custom Title')
-    })
-
-    it('renders the correct icon for each phase-matching title', () => {
-      const cases: Array<[string, string]> = [
-        ['Latent', 'eye-closed'],
-        ['Oriëntatie', 'building-magnifying-glass'],
-        ['Actief zoeken', 'house-person-return'],
-        ['Selectie', 'handshake'],
-        ['Transactie', 'pencil-mechanical'],
-        ['Wonen', 'house-heart'],
-      ]
-      for (const [title, expectedIcon] of cases) {
-        const wrapper = mountTile({ title })
-        expect(wrapper.find(`[data-name="${expectedIcon}"]`).exists()).toBe(true)
-      }
-    })
-
-    it('marks the icon as aria-hidden', () => {
-      const wrapper = mountTile({ title: 'Latent' })
-      expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(true)
-    })
-  })
-
-  describe('accessibility', () => {
-    it('has an aria-label with the title', () => {
-      const wrapper = mountTile({ title: 'Wonen' })
-      expect(wrapper.attributes('aria-label')).toBe('Wonen')
-    })
-
-    it('includes amount in the aria-label', () => {
-      const wrapper = mountTile({ title: 'Latent', amount: 270 })
-      expect(wrapper.attributes('aria-label')).toBe('Latent, 270 contacten')
-    })
-
-    it('includes positive percentage in the aria-label', () => {
-      const wrapper = mountTile({
-        title: 'Latent',
-        percentage: 14,
-        percentageExplanaition: 'vorige maand',
-      })
-      expect(wrapper.attributes('aria-label')).toBe('Latent, +14% vorige maand')
-    })
-
-    it('includes negative percentage in the aria-label', () => {
-      const wrapper = mountTile({ title: 'Latent', percentage: -8 })
-      expect(wrapper.attributes('aria-label')).toBe('Latent, -8%')
-    })
-
-    it('has a visible focus ring via focus-visible classes', () => {
-      const wrapper = mountTile({ title: 'Latent' })
-      expect(wrapper.classes()).toContain('focus-visible:outline-2')
-      expect(wrapper.classes()).toContain('focus-visible:outline-offset-2')
-      expect(wrapper.classes()).toContain('focus-visible:outline-cornflower-blue-500')
-    })
-
-    it('applies standard padding when no icon is present', () => {
-      const wrapper = mountTile({ amount: 100 })
-      expect(wrapper.classes()).toContain('p-4')
-      expect(wrapper.classes()).not.toContain('gap-6')
-      expect(wrapper.classes()).not.toContain('p-1.5')
-    })
-
-    it('applies layout gap and small padding when icon is present', () => {
-      const wrapper = mountTile({ title: 'Latent', amount: 100 })
-      expect(wrapper.classes()).toContain('gap-6')
-      expect(wrapper.classes()).toContain('p-1.5')
-      expect(wrapper.classes()).not.toContain('p-4')
-    })
-  })
-
-  describe('amount', () => {
-    it('renders the amount when provided', () => {
-      const wrapper = mountTile({ title: 'Latent', amount: 270 })
-      expect(wrapper.text()).toContain('270')
-    })
-
-    it('renders the amount with purple color when a phase-matching title is provided', () => {
-      const wrapper = mountTile({ title: 'Latent', amount: 270 })
-      expect(wrapper.find('.heading-1').classes()).toContain('text-purple-500')
-    })
-
-    it('renders the amount with standard text color when title is not a known phase', () => {
-      const wrapper = mountTile({ title: 'Custom Title', amount: 270 })
-      expect(wrapper.find('.heading-1').classes()).toContain('text-sapphire-900')
-    })
-
-    it('renders the amount with standard text color when title is omitted', () => {
-      const wrapper = mountTile({ amount: 270 })
-      expect(wrapper.find('.heading-1').classes()).toContain('text-sapphire-900')
-    })
-
-    it('does not render an amount element when omitted', () => {
-      const wrapper = mountTile({ title: 'Latent' })
-      expect(wrapper.find('.heading-1').exists()).toBe(false)
-    })
-  })
-
-  describe('percentage', () => {
-    it('renders a positive percentage with a + prefix', () => {
-      const wrapper = mountTile({ percentage: 14 })
-      expect(wrapper.text()).toContain('+14%')
-    })
-
-    it('renders a negative percentage without a + prefix', () => {
-      const wrapper = mountTile({ percentage: -8 })
-      expect(wrapper.text()).toContain('-8%')
-      expect(wrapper.text()).not.toContain('+-8%')
-    })
-
-    it('applies green color class for a positive percentage', () => {
-      const wrapper = mountTile({ percentage: 14 })
-      expect(wrapper.find('.text-green-500').exists()).toBe(true)
-    })
-
-    it('applies red color class for a negative percentage', () => {
-      const wrapper = mountTile({ percentage: -8 })
-      expect(wrapper.find('.text-brick-500').exists()).toBe(true)
-    })
-
-    it('does not render the percentage block when omitted', () => {
-      const wrapper = mountTile()
-      expect(wrapper.find('.text-green-500').exists()).toBe(false)
-      expect(wrapper.find('.text-brick-500').exists()).toBe(false)
-    })
-  })
-
-  describe('percentageExplanaition', () => {
-    it('renders the explanation when provided alongside percentage', () => {
-      const wrapper = mountTile({ percentage: 14, percentageExplanaition: 'vorige maand' })
-      expect(wrapper.text()).toContain('vorige maand')
-    })
-
-    it('does not render the explanation when omitted', () => {
-      const wrapper = mountTile({ percentage: 14 })
-      expect(wrapper.text()).not.toContain('vorige maand')
-    })
-  })
-})

package/src/components/DatePicker/DatePicker.stories.ts

@@ -1,149 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-import DatePicker from './DatePicker.vue'
-
-export default {
-  title: 'Components/Molecules/DatePicker',
-  component: DatePicker,
-  decorators: [
-    () => ({ template: '<div style="min-height: 380px; padding: 16px;"><story /></div>' }),
-  ],
-  argTypes: {
-    anchor: {
-      control: 'select',
-      options: ['bottom-right', 'bottom-left', 'top-right', 'top-left'],
-    },
-    monthYearPicker: { control: 'boolean' },
-    markedDates: { control: 'object' },
-    disabledDates: { control: 'object' },
-    minDate: { control: 'date' },
-    maxDate: { control: 'date' },
-    locale: { control: false },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=713-355&t=CbHvOQfEMIr7M5mO-4',
-    },
-  },
-} satisfies Meta<typeof DatePicker>
-
-type Story = StoryObj<typeof DatePicker>
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Selecteer datum',
-  },
-}
-
-export const AnchorBottomRight: Story = {
-  render: (args) => ({
-    components: { DatePicker },
-    setup() {
-      return { args }
-    },
-    template: `
-      <div style="min-height: 380px; display: flex; justify-content: flex-end; align-items: flex-start; padding: 16px;">
-        <DatePicker v-bind="args" />
-      </div>
-    `,
-  }),
-  args: {
-    placeholder: 'Selecteer datum',
-    anchor: 'bottom-right',
-  },
-}
-
-export const AnchorTopLeft: Story = {
-  render: (args) => ({
-    components: { DatePicker },
-    setup() {
-      return { args }
-    },
-    template: `
-      <div style="min-height: 380px; display: flex; align-items: flex-end; padding: 16px;">
-        <DatePicker v-bind="args" />
-      </div>
-    `,
-  }),
-  args: {
-    placeholder: 'Selecteer datum',
-    anchor: 'top-left',
-  },
-}
-
-export const AnchorTopRight: Story = {
-  render: (args) => ({
-    components: { DatePicker },
-    setup() {
-      return { args }
-    },
-    template: `
-      <div style="min-height: 380px; display: flex; justify-content: flex-end; align-items: flex-end; padding: 16px;">
-        <DatePicker v-bind="args" />
-      </div>
-    `,
-  }),
-  args: {
-    placeholder: 'Selecteer datum',
-    anchor: 'top-right',
-  },
-}
-
-export const WithoutAutoClose: Story = {
-  args: {
-    placeholder: 'Selecteer datum',
-    autoClose: false,
-  },
-}
-
-export const CustomTrigger: Story = {
-  render: (args) => ({
-    components: { DatePicker },
-    setup() {
-      const selected = ref(args.modelValue)
-      return { args, selected }
-    },
-    template: `
-      <div style="min-height: 380px; padding: 16px;">
-        <p style="font-size: 13px; color: #555; margin-bottom: 12px;">Selected: {{ selected ? selected.toLocaleDateString() : 'None' }}</p>
-        <DatePicker v-bind="args" v-model="selected">
-          <template #trigger="{ toggle, isOpen }">
-            <button
-              type="button"
-              @click="toggle"
-              class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm font-medium"
-            >
-              {{ isOpen ? 'Sluiten' : 'Kies een datum uit de lijst' }}
-            </button>
-          </template>
-        </DatePicker>
-      </div>
-    `,
-  }),
-  args: {
-    modelValue: null,
-  },
-}
-
-export const Playground: Story = {
-  render: (args) => ({
-    components: { DatePicker },
-    setup() {
-      const selected = ref<Date | null>(null)
-      return { args, selected }
-    },
-    template: `
-      <div style="min-height: 380px; padding: 16px;">
-        <DatePicker v-bind="args" v-model="selected" />
-        <p v-if="selected" style="margin-top: 12px; font-size: 13px; color: #555;">
-          Geselecteerd: {{ selected.toLocaleDateString('nl-NL') }}
-        </p>
-      </div>
-    `,
-  }),
-  args: {
-    placeholder: 'Selecteer datum',
-    monthYearPicker: true,
-  },
-}

package/src/components/DatePicker/DatePicker.test.ts

@@ -1,191 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest'
-import { mount, type VueWrapper } from '@vue/test-utils'
-import { nextTick } from 'vue'
-import DatePicker from './DatePicker.vue'
-
-const YEAR = 2026
-const MONTH = 2 // March (0-indexed)
-const TODAY = new Date(YEAR, MONTH, 20)
-
-const mountDatePicker = (props = {}) => mount(DatePicker, { props, attachTo: document.body })
-
-const openPicker = async (wrapper: VueWrapper) => {
-  await wrapper.find('button').trigger('click')
-  await nextTick()
-}
-
-describe('DatePicker', () => {
-  let wrapper: VueWrapper
-
-  afterEach(() => {
-    wrapper?.unmount()
-  })
-
-  // ── Trigger button ───────────────────────────────────────────────────────
-
-  it('renders trigger button with placeholder', () => {
-    wrapper = mountDatePicker({ placeholder: 'Kies een datum' })
-    expect(wrapper.text()).toContain('Kies een datum')
-  })
-
-  it('uses default placeholder when none provided', () => {
-    wrapper = mountDatePicker()
-    expect(wrapper.text()).toContain('Selecteer datum')
-  })
-
-  // ── Open / close ─────────────────────────────────────────────────────────
-
-  it('calendar is closed by default', () => {
-    wrapper = mountDatePicker()
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
-  })
-
-  it('opens when trigger button is clicked', async () => {
-    wrapper = mountDatePicker()
-    await openPicker(wrapper)
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
-  })
-
-  it('closes when trigger button is clicked again', async () => {
-    wrapper = mountDatePicker()
-    await openPicker(wrapper)
-    await wrapper.find('button').trigger('click')
-    await nextTick()
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
-  })
-
-  it('closes when clicking outside', async () => {
-    wrapper = mountDatePicker()
-    await openPicker(wrapper)
-    document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
-    await nextTick()
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
-  })
-
-  it('closes on Escape key', async () => {
-    wrapper = mountDatePicker()
-    await openPicker(wrapper)
-    await wrapper.trigger('keydown', { key: 'Escape' })
-    await nextTick()
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
-  })
-
-  // ── Day selection + autoClose ─────────────────────────────────────────────
-
-  it('closes after selecting a day (autoClose default)', async () => {
-    wrapper = mountDatePicker({ modelValue: TODAY })
-    await openPicker(wrapper)
-
-    const dayButtons = wrapper
-      .findAll('button[type="button"]')
-      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
-    await dayButtons[10]!.trigger('click')
-    await nextTick()
-
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
-  })
-
-  it('stays open after selecting a day if autoClose is false', async () => {
-    wrapper = mountDatePicker({ modelValue: TODAY, autoClose: false })
-    await openPicker(wrapper)
-
-    const dayButtons = wrapper
-      .findAll('button[type="button"]')
-      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
-    await dayButtons[10]!.trigger('click')
-    await nextTick()
-
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
-  })
-
-  it('emits update:modelValue with the clicked date', async () => {
-    wrapper = mountDatePicker({ modelValue: TODAY })
-    await openPicker(wrapper)
-
-    const dayButtons = wrapper
-      .findAll('button[type="button"]')
-      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
-    await dayButtons[10]!.trigger('click')
-    await nextTick()
-
-    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
-    expect(wrapper.emitted('update:modelValue')![0]![0]).toBeInstanceOf(Date)
-  })
-
-  // ── Resets to days view on reopen ─────────────────────────────────────────
-
-  it('resets to days view when closed and reopened', async () => {
-    wrapper = mountDatePicker({ modelValue: TODAY, monthYearPicker: true })
-    await openPicker(wrapper)
-
-    // open month picker
-    const header = wrapper.find('[class*="cornflower-blue-600"]')
-    await header.find('button').trigger('click')
-    await nextTick()
-    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(true)
-
-    // close and reopen (v-if remounts Calendar with fresh pickerView = 'days')
-    await wrapper.find('button').trigger('click')
-    await nextTick()
-    await openPicker(wrapper)
-    expect(wrapper.find('[class*="grid-cols-7"]').exists()).toBe(true)
-    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(false)
-  })
-
-  // ── Custom trigger slot ───────────────────────────────────────────────────
-
-  it('renders custom trigger through slot', () => {
-    wrapper = mount(DatePicker, {
-      slots: {
-        trigger: `
-          <template #trigger="{ toggle }">
-            <button class="custom-trigger" @click="toggle">Custom Button</button>
-          </template>
-        `,
-      },
-    })
-
-    expect(wrapper.find('.custom-trigger').exists()).toBe(true)
-    expect(wrapper.text()).toContain('Custom Button')
-  })
-
-  it('toggles picker via custom trigger toggle function', async () => {
-    wrapper = mount(DatePicker, {
-      slots: {
-        trigger: `
-          <template #trigger="{ toggle }">
-            <button class="custom-trigger" @click="toggle">Toggle</button>
-          </template>
-        `,
-      },
-    })
-
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
-
-    await wrapper.find('.custom-trigger').trigger('click')
-    await nextTick()
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
-
-    await wrapper.find('.custom-trigger').trigger('click')
-    await nextTick()
-    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
-  })
-
-  it('provides isOpen state to custom trigger', async () => {
-    wrapper = mount(DatePicker, {
-      slots: {
-        trigger: `
-          <template #trigger="{ isOpen, toggle }">
-            <button class="custom-trigger" @click="toggle">{{ isOpen ? 'OPEN' : 'CLOSED' }}</button>
-          </template>
-        `,
-      },
-    })
-
-    expect(wrapper.find('.custom-trigger').text()).toBe('CLOSED')
-
-    await wrapper.find('.custom-trigger').trigger('click')
-    await nextTick()
-    expect(wrapper.find('.custom-trigger').text()).toBe('OPEN')
-  })
-})

package/src/components/DropdownButton/DropdownButton.stories.ts

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import DropdowndButton from './DropdownButton.vue'
-
-export default {
-  title: 'Components/Atoms/Dropdown Button',
-  component: DropdowndButton,
-  decorators: [
-    () => ({
-      template:
-        '<div style="min-height: 250px; padding: 16px; display: flex; align-items: center; justify-content: center;"><story /></div>',
-    }),
-  ],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=862-1453&t=1SBsWbYXUXIJUJuq-4',
-    },
-  },
-} satisfies Meta<typeof DropdowndButton>
-
-type Story = StoryObj<typeof DropdowndButton>
-
-export const Default: Story = {
-  args: {
-    label: 'Actions',
-    action: () => alert('Primary action clicked'),
-    options: [
-      { label: 'Edit', action: () => alert('Edit clicked'), icon: 'pencil' },
-      { label: 'Delete', action: () => alert('Delete clicked'), icon: 'trash-can' },
-    ],
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    label: 'More info',
-    variant: 'secondary',
-    action: () => alert('Secondary main action'),
-    options: [
-      { label: 'View Profile', action: '/profile', icon: 'user' },
-      { label: 'Settings', action: '/settings', icon: 'gear' },
-    ],
-  },
-}
-
-export const LeftPlacement: Story = {
-  args: {
-    label: 'Menu',
-    placement: 'left',
-    action: () => console.log('Main action'),
-    options: [
-      { label: 'Option 1', action: () => console.log('1') },
-      { label: 'Option 2', action: () => console.log('2') },
-    ],
-  },
-}
-
-export const WithIcon: Story = {
-  args: {
-    label: 'Download',
-    icon: 'download',
-    action: '/download/all',
-    options: [
-      { label: 'As PDF', action: '/download/pdf', icon: 'file-pdf' },
-      { label: 'As CSV', action: '/download/csv', icon: 'file-csv' },
-    ],
-  },
-}