@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/organisms/TimelinePhaseblock/TimelinePhaseblock.test.ts

@@ -0,0 +1,283 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import TimelinePhaseblock from './TimelinePhaseblock.vue'
+import type { TimelinePhase } from '../../molecules/TimelineEvent/TimelineTypes'
+
+const TimelineEventStub = defineComponent({
+  name: 'NexxtTimelineEvent',
+  props: ['event', 'splitView'],
+  template: '<div class="timeline-event-stub" />',
+})
+
+const makePhase = (
+  value: number,
+  entered_at: string | null = '2024-06-01T09:00:00.000Z',
+  exited_at: string | null = '2024-07-01T09:00:00.000Z',
+  events: TimelinePhase['events'] = [],
+): TimelinePhase => ({
+  phase: { value },
+  entered_at,
+  exited_at,
+  events,
+})
+
+const baseEvent = {
+  id: 1,
+  type: 'contact_created',
+  happened_at: '2024-06-10T10:30:00.000Z',
+  medium_type: null,
+  url: null,
+  page_title: null,
+  request_reason: null,
+  agenda_item_type: null,
+  source: 'system',
+  direction: 'outbound',
+  description: null,
+}
+
+const stubs = {
+  NexxtIcon: true,
+  NexxtTimelineEvent: TimelineEventStub,
+}
+
+const mountBlock = (overrides: Partial<InstanceType<typeof TimelinePhaseblock>['$props']> = {}) => {
+  const phases = [makePhase(4), makePhase(2)]
+  return mount(TimelinePhaseblock, {
+    props: {
+      phase: phases[0],
+      index: 0,
+      phases,
+      isSplitView: true,
+      isLast: false,
+      ...overrides,
+    },
+    global: { stubs },
+  })
+}
+
+describe('TimelinePhaseblock', () => {
+  describe('data attribute', () => {
+    it('sets data-phase to the phase value', () => {
+      const wrapper = mountBlock()
+      expect(wrapper.attributes('data-phase')).toBe('4')
+    })
+  })
+
+  describe('outbound/inbound header', () => {
+    it('shows the header when index is 0 and isSplitView is true', () => {
+      const wrapper = mountBlock({ index: 0, isSplitView: true })
+      expect(wrapper.text()).toContain('Outbound')
+      expect(wrapper.text()).toContain('Inbound')
+    })
+
+    it('does not show the header when index is not 0', () => {
+      const phases = [makePhase(4), makePhase(2)]
+      const wrapper = mountBlock({ phase: phases[1], index: 1, phases, isSplitView: true })
+      expect(wrapper.text()).not.toContain('Outbound')
+    })
+
+    it('does not show the header when isSplitView is false', () => {
+      const wrapper = mountBlock({ index: 0, isSplitView: false })
+      expect(wrapper.text()).not.toContain('Outbound')
+    })
+  })
+
+  describe('timeline lines', () => {
+    it('always renders the left timeline line', () => {
+      const wrapper = mountBlock({ isSplitView: false })
+      expect(wrapper.find('.border-l.left-5').exists()).toBe(true)
+    })
+
+    it('renders the right timeline line when isSplitView is true', () => {
+      const wrapper = mountBlock({ isSplitView: true })
+      expect(wrapper.find('.border-l.right-5').exists()).toBe(true)
+    })
+
+    it('does not render the right timeline line when isSplitView is false', () => {
+      const wrapper = mountBlock({ isSplitView: false })
+      expect(wrapper.find('.border-l.right-5').exists()).toBe(false)
+    })
+
+    it('applies the phase color to the left timeline line', () => {
+      // phase value 4 → border-blue-500
+      const wrapper = mountBlock()
+      expect(wrapper.find('.border-l.left-5').classes()).toContain('border-blue-500')
+    })
+  })
+
+  describe('events', () => {
+    it('renders a NexxtTimelineEvent for each event in the phase', () => {
+      const phases = [
+        makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [
+          baseEvent,
+          { ...baseEvent, id: 2 },
+        ]),
+      ]
+      const wrapper = mount(TimelinePhaseblock, {
+        props: { phase: phases[0], index: 0, phases, isSplitView: true, isLast: true },
+        global: { stubs },
+      })
+      expect(wrapper.findAllComponents(TimelineEventStub).length).toBe(2)
+    })
+
+    it('renders no events when the phase has an empty events array', () => {
+      const wrapper = mountBlock()
+      expect(wrapper.findAllComponents(TimelineEventStub).length).toBe(0)
+    })
+
+    it('passes isSplitView to each event', () => {
+      const phases = [
+        makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z', [baseEvent]),
+      ]
+      const wrapper = mount(TimelinePhaseblock, {
+        props: { phase: phases[0], index: 0, phases, isSplitView: false, isLast: true },
+        global: { stubs },
+      })
+      expect(wrapper.findComponent(TimelineEventStub).props('splitView')).toBe(false)
+    })
+  })
+
+  describe('phase separator badge', () => {
+    it('shows the separator when index is not the last in the phases array', () => {
+      // phases has 2 items, index 0 → 0 !== 1 → shows separator
+      const wrapper = mountBlock({ index: 0 })
+      expect(wrapper.find('.rounded-full').exists()).toBe(true)
+    })
+
+    it('does not show the separator when index equals phases.length - 1', () => {
+      const phases = [makePhase(4), makePhase(2)]
+      const wrapper = mountBlock({ phase: phases[1], index: 1, phases })
+      expect(wrapper.find('.rounded-full').exists()).toBe(false)
+    })
+
+    it('displays the phase label in the separator', () => {
+      // phase value 4 → 'Selectie'
+      const wrapper = mountBlock()
+      expect(wrapper.find('.rounded-full').text()).toContain('Selectie')
+    })
+
+    it('applies the correct background color class to the separator badge', () => {
+      // phase value 4 → bg-blue-500
+      const wrapper = mountBlock()
+      expect(wrapper.find('.rounded-full').classes()).toContain('bg-blue-500')
+    })
+
+    it('applies the correct text color class to the separator badge', () => {
+      // phase value 4 → text-white
+      const wrapper = mountBlock()
+      expect(wrapper.find('.rounded-full').classes()).toContain('text-white')
+    })
+
+    it('shows an up arrow when the current phase value is higher than the previous phase', () => {
+      // index 0 = value 4, index 1 = value 2 → 4 > 2 → up
+      const wrapper = mountBlock()
+      const arrowStub = wrapper.find('nexxt-icon-stub[name="arrow-up"]')
+      expect(arrowStub.exists()).toBe(true)
+    })
+
+    it('shows a down arrow when the current phase value is lower than the previous phase', () => {
+      // index 0 = value 2, index 1 = value 4 → 2 < 4 → down
+      const phases = [makePhase(2), makePhase(4)]
+      const wrapper = mountBlock({ phase: phases[0], index: 0, phases })
+      const arrowStub = wrapper.find('nexxt-icon-stub[name="arrow-down"]')
+      expect(arrowStub.exists()).toBe(true)
+    })
+
+    it('shows no direction arrow when there is no previous phase', () => {
+      const phases = [makePhase(4)]
+      // With only one phase, index 0 === phases.length - 1, so separator is hidden anyway.
+      // Use a 2-item list but check the last item's arrow (no prevPhase for last)
+      // Actually let's test: if index === phases.length -1, separator is hidden.
+      // The arrow is inside the separator, so let's just check getPhaseDirection returns null
+      // by having no phase at index+1. We can't show separator unless index !== phases.length-1,
+      // so create a dummy scenario: index=0, phases=[phase0] would hide separator.
+      // Instead verify: no arrow-up or arrow-down when phases only have one entry.
+      const wrapper = mount(TimelinePhaseblock, {
+        props: { phase: phases[0], index: 0, phases, isSplitView: true, isLast: true },
+        global: { stubs },
+      })
+      expect(wrapper.find('nexxt-icon-stub[name="arrow-up"]').exists()).toBe(false)
+      expect(wrapper.find('nexxt-icon-stub[name="arrow-down"]').exists()).toBe(false)
+    })
+
+    it('shows entered_at date when phase progressed upward', () => {
+      // phase value 4 > prev value 2 → show entered_at
+      const phase = makePhase(4, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z')
+      const phases = [phase, makePhase(2)]
+      const wrapper = mountBlock({ phase, phases })
+      // entered_at = 2024-06-01 → formatted in nl-NL → contains "jun"
+      const dateEl = wrapper.find('.text-gray-500')
+      expect(dateEl.text()).toContain('jun')
+    })
+
+    it('shows exited_at date when phase regressed downward', () => {
+      // phase value 2 < prev value 4 → show exited_at
+      const phase = makePhase(2, '2024-06-01T09:00:00.000Z', '2024-07-01T09:00:00.000Z')
+      const phases = [phase, makePhase(4)]
+      const wrapper = mountBlock({ phase, phases })
+      // exited_at = 2024-07-01 → contains "jul"
+      const dateEl = wrapper.find('.text-gray-500')
+      expect(dateEl.text()).toContain('jul')
+    })
+
+    it('shows empty string when relevant date is null', () => {
+      const phase = makePhase(4, null, null)
+      const phases = [phase, makePhase(2)]
+      const wrapper = mountBlock({ phase, phases })
+      expect(wrapper.find('.text-gray-500').text()).toBe('')
+    })
+
+    it('renders the horizontal divider line in split view', () => {
+      const wrapper = mountBlock({ isSplitView: true })
+      expect(wrapper.find('.h-px.w-\\[75\\%\\]').exists()).toBe(true)
+    })
+
+    it('does not render the horizontal divider line outside split view', () => {
+      const wrapper = mountBlock({ isSplitView: false })
+      expect(wrapper.find('.h-px.w-\\[75\\%\\]').exists()).toBe(false)
+    })
+
+    it('applies pl-16 to the separator container when not in split view', () => {
+      const wrapper = mountBlock({ isSplitView: false })
+      const separator = wrapper.find('.relative.flex.flex-col.items-center')
+      expect(separator.classes()).toContain('pl-16')
+    })
+
+    it('does not apply pl-16 to the separator container in split view', () => {
+      const wrapper = mountBlock({ isSplitView: true })
+      const separator = wrapper.find('.relative.flex.flex-col.items-center')
+      expect(separator.classes()).not.toContain('pl-16')
+    })
+  })
+
+  describe('gradient', () => {
+    it('applies gradient classes to the vertical gradient bar when there is a previous phase', () => {
+      // phase value 4 → fromColor: from-blue-500; prev phase value 2 → toColor: to-purple-500
+      const wrapper = mountBlock()
+      const gradientBar = wrapper.find('.bg-linear-to-b.left-5')
+      expect(gradientBar.classes()).toContain('from-blue-500')
+      expect(gradientBar.classes()).toContain('to-purple-500')
+    })
+
+    it('applies no gradient classes when there is no previous phase', () => {
+      const phases = [makePhase(4)]
+      const wrapper = mount(TimelinePhaseblock, {
+        props: { phase: phases[0], index: 0, phases, isSplitView: true, isLast: true },
+        global: { stubs },
+      })
+      // No separator rendered, so no gradient bar inside separator
+      expect(wrapper.find('.bg-linear-to-b').exists()).toBe(false)
+    })
+
+    it('renders the right-side gradient bar in split view', () => {
+      const wrapper = mountBlock({ isSplitView: true })
+      expect(wrapper.find('.bg-linear-to-b.right-5').exists()).toBe(true)
+    })
+
+    it('does not render the right-side gradient bar outside split view', () => {
+      const wrapper = mountBlock({ isSplitView: false })
+      expect(wrapper.find('.bg-linear-to-b.right-5').exists()).toBe(false)
+    })
+  })
+})

package/src/components/organisms/TimelineTrack/TimelineTrack.stories.ts

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import TimelineTrack from './TimelineTrack.vue'
+import type { TimelineEvent } from '../../molecules/TimelineEvent/TimelineTypes'
+
+export default {
+  title: 'Components/Organisms/Timeline Track',
+  component: TimelineTrack,
+} satisfies Meta<typeof TimelineTrack>
+
+type Story = StoryObj<typeof TimelineTrack>
+
+// A proposal timeline: no journey phases, events composed by the consumer.
+const proposalEvents: TimelineEvent[] = [
+  {
+    id: 'accepted-1',
+    type: 'proposal_accepted',
+    happened_at: '2024-06-18T14:12:00.000Z',
+    direction: 'inbound',
+    description: 'Door Sophie de Vries',
+  },
+  {
+    id: 'opened-1',
+    type: 'proposal_opened',
+    happened_at: '2024-06-17T09:41:00.000Z',
+    direction: 'inbound',
+  },
+  {
+    id: 'mail-opened-1',
+    type: 'proposal_mail_opened',
+    happened_at: '2024-06-16T20:03:00.000Z',
+    direction: 'inbound',
+  },
+  {
+    id: 'failed-1',
+    type: 'proposal_send_failed',
+    happened_at: '2024-06-16T12:05:00.000Z',
+    direction: 'outbound',
+    description: 'Naar Kees Jansen',
+    request_reason: 'Mailbox bestaat niet',
+  },
+  {
+    id: 'delivered-1',
+    type: 'proposal_delivered',
+    happened_at: '2024-06-16T12:01:00.000Z',
+    direction: 'outbound',
+    description: 'Naar Jan de Vries',
+  },
+  {
+    id: 'sent-1',
+    type: 'proposal_sent',
+    happened_at: '2024-06-16T12:00:00.000Z',
+    direction: 'outbound',
+    description: 'Naar Jan de Vries',
+  },
+  {
+    id: 'status-1',
+    type: 'proposal_status_changed',
+    happened_at: '2024-06-16T11:59:00.000Z',
+    direction: 'outbound',
+    // Dynamic label: overrides the map, icon and color still come from it.
+    label: 'Status gewijzigd van Gepland naar Verzonden',
+  },
+  {
+    id: 'scheduled-1',
+    type: 'proposal_scheduled',
+    happened_at: '2024-06-15T16:20:00.000Z',
+    direction: 'outbound',
+    description: 'Door Sophie de Vries',
+  },
+  {
+    id: 'created-1',
+    type: 'proposal_created',
+    happened_at: '2024-06-15T16:18:00.000Z',
+    direction: 'outbound',
+    description: 'Door Sophie de Vries',
+  },
+]
+
+export const ProposalTimeline: Story = {
+  args: {
+    events: proposalEvents,
+    splitView: true,
+    leftLabel: 'Nexxtmove',
+    rightLabel: 'Contact',
+  },
+}
+
+export const SingleColumn: Story = {
+  args: {
+    events: proposalEvents,
+    splitView: false,
+  },
+}
+
+export const CustomLineColor: Story = {
+  args: {
+    events: proposalEvents,
+    splitView: true,
+    leftLabel: 'Nexxtmove',
+    rightLabel: 'Contact',
+    color: 'border-purple-500',
+  },
+}
+
+export const Expired: Story = {
+  args: {
+    splitView: true,
+    leftLabel: 'Nexxtmove',
+    rightLabel: 'Contact',
+    events: [
+      {
+        id: 'expired-1',
+        type: 'proposal_expired',
+        happened_at: '2024-06-22T00:00:00.000Z',
+        direction: 'outbound',
+      },
+      ...proposalEvents.slice(3),
+    ],
+  },
+}

package/src/components/organisms/TimelineTrack/TimelineTrack.test.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TimelineTrack from './TimelineTrack.vue'
+import type { TimelineEvent } from '../../molecules/TimelineEvent/TimelineTypes'
+
+const events: TimelineEvent[] = [
+  { id: 'created-1', type: 'proposal_created', happened_at: '2024-06-15T10:30:00.000Z' },
+  {
+    id: 'sent-1',
+    type: 'proposal_sent',
+    happened_at: '2024-06-15T11:00:00.000Z',
+    direction: 'outbound',
+    description: 'Naar Jan de Vries',
+  },
+  {
+    id: 'opened-1',
+    type: 'proposal_opened',
+    happened_at: '2024-06-15T12:00:00.000Z',
+    direction: 'inbound',
+  },
+]
+
+const mountTrack = (props = {}, slots = {}) =>
+  mount(TimelineTrack, { props: { events, ...props }, slots })
+
+describe('TimelineTrack', () => {
+  it('renders an event for each item', () => {
+    const wrapper = mountTrack()
+    expect(wrapper.findAll('[data-event-date]')).toHaveLength(3)
+  })
+
+  it('renders lane headers in split view', () => {
+    const wrapper = mountTrack({ splitView: true })
+    expect(wrapper.text()).toContain('Outbound')
+  })
+
+  it('passes lane labels through', () => {
+    const wrapper = mountTrack({ leftLabel: 'Nexxtmove', rightLabel: 'Contact' })
+    expect(wrapper.text()).toContain('Nexxtmove')
+    expect(wrapper.text()).toContain('Contact')
+  })
+
+  it('does not render lane headers when splitView is false', () => {
+    const wrapper = mountTrack({ splitView: false })
+    expect(wrapper.text()).not.toContain('Outbound')
+  })
+
+  it('does not render lane headers when showLanes is false', () => {
+    const wrapper = mountTrack({ showLanes: false })
+    expect(wrapper.text()).not.toContain('Outbound')
+  })
+
+  it('renders both timeline lines in split view', () => {
+    const wrapper = mountTrack({ splitView: true })
+    expect(wrapper.find('.left-5').exists()).toBe(true)
+    expect(wrapper.find('.right-5').exists()).toBe(true)
+  })
+
+  it('renders only the left timeline line when splitView is false', () => {
+    const wrapper = mountTrack({ splitView: false })
+    expect(wrapper.find('.left-5').exists()).toBe(true)
+    expect(wrapper.find('.right-5').exists()).toBe(false)
+  })
+
+  it('offsets the lines below the lane headers when they are shown', () => {
+    const wrapper = mountTrack({ splitView: true })
+    expect(wrapper.find('.left-5').classes()).toContain('top-10')
+  })
+
+  it('starts the lines at the top when there are no lane headers', () => {
+    const wrapper = mountTrack({ splitView: false })
+    expect(wrapper.find('.left-5').classes()).toContain('top-0')
+  })
+
+  it('applies the color prop to the timeline lines', () => {
+    const wrapper = mountTrack({ color: 'border-purple-500' })
+    expect(wrapper.find('.left-5').classes()).toContain('border-purple-500')
+  })
+
+  it('passes splitView down so inbound events align right', () => {
+    const wrapper = mountTrack({ splitView: true })
+    const inbound = wrapper.find('[data-event-source="inbound"]')
+    expect(inbound.classes()).toContain('justify-end')
+  })
+
+  it('renders slot content instead of events when the default slot is used', () => {
+    const wrapper = mountTrack({}, { default: '<div class="custom">eigen inhoud</div>' })
+    expect(wrapper.find('.custom').exists()).toBe(true)
+    expect(wrapper.findAll('[data-event-date]')).toHaveLength(0)
+  })
+})

package/src/components/organisms/Toaster/Toaster.stories.ts

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref, readonly } from 'vue'
+import NexxtToaster from './Toaster.vue'
+import NexxtButton from '../../atoms/Button/Button.vue'
+import type { ToastItem } from '../../molecules/Toast/Toast.vue'
+import type { ToasterPosition } from './Toaster.vue'
+
+export default {
+  title: 'Components/Organisms/Toaster',
+  component: NexxtToaster,
+} satisfies Meta<typeof NexxtToaster>
+
+type Story = StoryObj<typeof NexxtToaster>
+
+const makeRender =
+  (position: ToasterPosition = 'bottom-right') =>
+  () => ({
+    components: { NexxtToaster, NexxtButton },
+    setup() {
+      const toasts = ref<ToastItem[]>([])
+
+      const add = (toast: Omit<ToastItem, 'id'>) =>
+        toasts.value.push({ ...toast, id: crypto.randomUUID() })
+
+      const remove = (id: string) => (toasts.value = toasts.value.filter((t) => t.id !== id))
+
+      return { toasts: readonly(toasts), add, remove, position }
+    },
+    template: `
+    <div style="height: 300px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; padding: 16px;">
+      <NexxtButton variant="success" @click="add({ variant: 'success', title: 'Opgeslagen', message: 'Je wijzigingen zijn succesvol opgeslagen.', autoClose: 4000 })">
+        Success toast
+      </NexxtButton>
+      <NexxtButton variant="primary" @click="add({ variant: 'info', title: 'Informatie', message: 'Er is een nieuwe versie beschikbaar.', autoClose: 4000 })">
+        Info toast
+      </NexxtButton>
+      <NexxtButton variant="warning" @click="add({ variant: 'warning', title: 'Let op', message: 'Je sessie verloopt over 5 minuten.', autoClose: 4000 })">
+        Warning toast
+      </NexxtButton>
+      <NexxtButton variant="danger" @click="add({ variant: 'error', title: 'Fout opgetreden', message: 'De actie kon niet worden voltooid.' })">
+        Error toast
+      </NexxtButton>
+    </div>
+    <NexxtToaster :toasts="toasts" :position="position" @dismiss="remove" />
+  `,
+  })
+
+export const BottomRight: Story = { render: makeRender('bottom-right') }
+export const BottomLeft: Story = { render: makeRender('bottom-left') }
+export const TopRight: Story = { render: makeRender('top-right') }
+export const TopLeft: Story = { render: makeRender('top-left') }

package/src/components/organisms/Toaster/Toaster.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import NexxtToaster from './Toaster.vue'
+import type { ToastItem } from '../../molecules/Toast/Toast.vue'
+
+const toasts: ToastItem[] = [
+  { id: '1', variant: 'success', title: 'Opgeslagen', message: 'Wijzigingen opgeslagen.' },
+  { id: '2', variant: 'error', title: 'Fout', message: 'Er is iets misgegaan.' },
+]
+
+describe('NexxtToaster', () => {
+  it('renders a toast for each item in the list', () => {
+    const wrapper = mount(NexxtToaster, {
+      props: { toasts },
+      attachTo: document.body,
+    })
+    const rendered = document.querySelectorAll('[role="alert"], [role="status"]')
+    expect(rendered.length).toBe(2)
+    wrapper.unmount()
+  })
+
+  it('renders nothing when toasts list is empty', () => {
+    const wrapper = mount(NexxtToaster, {
+      props: { toasts: [] },
+      attachTo: document.body,
+    })
+    const rendered = document.querySelectorAll('[role="alert"], [role="status"]')
+    expect(rendered.length).toBe(0)
+    wrapper.unmount()
+  })
+
+  it('emits dismiss with the correct toast id when a toast is closed', async () => {
+    const wrapper = mount(NexxtToaster, {
+      props: { toasts },
+      attachTo: document.body,
+    })
+    const buttons = document.querySelectorAll('button[aria-label="Sluiten"]')
+    ;(buttons[0] as HTMLElement).click()
+    await flushPromises()
+    expect(wrapper.emitted('dismiss')?.[0]).toEqual(['1'])
+    wrapper.unmount()
+  })
+
+  it('applies bottom-right position classes by default', () => {
+    const wrapper = mount(NexxtToaster, {
+      props: { toasts: [] },
+      attachTo: document.body,
+    })
+    const container = document.querySelector('.fixed')
+    expect(container?.className).toContain('bottom-4')
+    expect(container?.className).toContain('right-4')
+    wrapper.unmount()
+  })
+
+  it('applies top-left position classes when position is top-left', () => {
+    const wrapper = mount(NexxtToaster, {
+      props: { toasts: [], position: 'top-left' },
+      attachTo: document.body,
+    })
+    const container = document.querySelector('.fixed')
+    expect(container?.className).toContain('top-4')
+    expect(container?.className).toContain('left-4')
+    wrapper.unmount()
+  })
+
+  it('teleports to body', () => {
+    const wrapper = mount(NexxtToaster, {
+      props: { toasts },
+      attachTo: document.body,
+    })
+    const container = document.body.querySelector('.fixed')
+    expect(container).not.toBeNull()
+    wrapper.unmount()
+  })
+})