@nexxtmove/ui 0.1.24 → 0.1.26

package/src/components/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 '../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/TimelinePhaseblock/TimelinePhaseblock.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtTooltip from '../Tooltip/Tooltip.vue'
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'NexxtTimelinePhaseblock',
+})
+import NexxtTimelineEvent from '../TimelineEvent/TimelineEvent.vue'
+import { PHASE_MAP, type TimelinePhase } from '../TimelineEvent/TimelineTypes'
+
+const props = defineProps<{
+  phase: TimelinePhase
+  /** Index within the filtered phases array (used to determine phase direction/date). */
+  index: number
+  /** The full filtered phases list, needed to look up the previous phase. */
+  phases: TimelinePhase[]
+  isSplitView: boolean
+  isLast: boolean
+}>()
+
+const gradientClasses = computed(() => {
+  const currentPhaseValue = props.phase.phase.value
+  // chronologicalPredecessor is the phase that happened BEFORE this one in time.
+  // Since the list is newest -> oldest, index + 1 is chronologically older.
+  // In the UI, index + 1 is positioned BELOW the current phase.
+  const chronologicalPredecessor = props.phases[props.index + 1]
+
+  if (!chronologicalPredecessor) return ''
+
+  // The gradient flows from TOP to BOTTOM (bg-gradient-to-b).
+  // The top color (from) is the current phase.
+  // The bottom color (to) is the previous phase (chronological predecessor).
+  const fromColorClass = PHASE_MAP[currentPhaseValue].fromColor
+  const toColorClass = PHASE_MAP[chronologicalPredecessor.phase.value].toColor
+
+  return `${fromColorClass} ${toColorClass}`
+})
+
+const formatDate = (dateString: string | null) => {
+  if (!dateString) return ''
+  const date = new Date(dateString)
+  const datePart = date.toLocaleDateString('nl-NL', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+  const timePart = date.toLocaleTimeString('nl-NL', {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+  return `${datePart} om ${timePart}`
+}
+
+const getPhaseDate = () => {
+  const prevPhase = props.phases[props.index + 1]
+  if (!prevPhase || props.phase.phase.value > prevPhase.phase.value) {
+    return formatDate(props.phase.entered_at)
+  }
+  return formatDate(props.phase.exited_at)
+}
+
+const getPhaseDirection = () => {
+  const prevPhase = props.phases[props.index + 1]
+  if (!prevPhase) return null
+  return props.phase.phase.value > prevPhase.phase.value ? 'up' : 'down'
+}
+</script>
+
+<template>
+  <div class="relative z-10 flex flex-col gap-16" :data-phase="phase.phase.value">
+    <template v-if="index === 0 && isSplitView">
+      <div class="relative z-10 bg-white">
+        <div class="flex items-center justify-between px-4 py-2">
+          <span class="flex gap-1">
+            Outbound
+            <NexxtTooltip>
+              <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
+              <template #tooltip><span class="text-sm">Vanuit Nexxtmove</span></template>
+            </NexxtTooltip>
+          </span>
+          <span class="flex gap-1">
+            Inbound
+            <NexxtTooltip as-child>
+              <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
+              <template #tooltip><span class="text-sm">Vanuit relatie</span></template>
+            </NexxtTooltip>
+          </span>
+        </div>
+      </div>
+    </template>
+    <!-- Left timeline line (always shown) -->
+    <div
+      class="absolute top-0 bottom-0 left-5 w-0 border-l"
+      :class="PHASE_MAP[phase.phase.value].color"
+    ></div>
+
+    <!-- Right timeline line (split view only) -->
+    <div
+      v-if="isSplitView"
+      class="absolute top-0 right-5 bottom-0 w-0 border-l"
+      :class="PHASE_MAP[phase.phase.value].color"
+    ></div>
+
+    <!-- Events -->
+    <NexxtTimelineEvent
+      v-for="ev in phase.events"
+      :key="ev.id"
+      :event="ev"
+      :split-view="isSplitView"
+    />
+
+    <!-- Phase separator badge (not shown for the very first phase) -->
+    <div
+      v-if="index !== phases.length - 1"
+      class="relative flex flex-col items-center bg-white pt-8 pb-24 text-center"
+      :class="{ 'pl-16': !isSplitView }"
+    >
+      <div
+        class="flex items-center gap-2 rounded-full px-12 py-4"
+        :class="[PHASE_MAP[phase.phase.value].bgColor, PHASE_MAP[phase.phase.value].textColor]"
+      >
+        <span class="text-sm font-semibold tracking-wider uppercase">
+          {{ PHASE_MAP[phase.phase.value].label }}
+        </span>
+        <template v-if="getPhaseDirection()">
+          <NexxtIcon
+            :name="getPhaseDirection() === 'up' ? 'arrow-up' : 'arrow-down'"
+            class="h-4 w-4 text-white"
+          />
+        </template>
+      </div>
+
+      <span class="mt-2 font-medium text-xs text-gray-500">
+        {{ getPhaseDate() }}
+      </span>
+
+      <div
+        v-if="isSplitView"
+        class="mt-4 h-px w-[75%]"
+        :class="PHASE_MAP[phase.phase.value].bgColor"
+      ></div>
+
+      <div v-if="!isLast" class="h-1"></div>
+
+      <div
+        class="absolute top-0 bottom-0 left-5 w-[1px] bg-linear-to-b"
+        :class="gradientClasses"
+      ></div>
+
+      <div
+        v-if="isSplitView"
+        class="absolute top-0 right-5 bottom-0 w-[1px] bg-linear-to-b"
+        :class="gradientClasses"
+      ></div>
+    </div>
+  </div>
+</template>

package/src/components/Tooltip/Tooltip.stories.ts

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Tooltip from './Tooltip.vue'
+
+export default {
+  title: 'Components/Atoms/Tooltip',
+  component: Tooltip,
+} satisfies Meta<typeof Tooltip>
+
+type Story = StoryObj<typeof Tooltip>
+
+const trigger = `<button class="rounded border border-gray-300 px-3 py-1 text-sm">Hover me</button>`
+
+export const Default: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip>
+        ${trigger}
+        <template #tooltip>This is a tooltip</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const WithDelay: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip :delay="500">
+        <button class="rounded border border-gray-300 px-3 py-1 text-sm">Hover me (500ms delay)</button>
+        <template #tooltip>Appears after a delay</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const SideBottom: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip side="bottom">
+        ${trigger}
+        <template #tooltip>Tooltip below</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const SideLeft: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip side="left">
+        ${trigger}
+        <template #tooltip>Tooltip on the left</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const SideRight: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip side="right">
+        ${trigger}
+        <template #tooltip>Tooltip on the right</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const AlignStart: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip align="start">
+        ${trigger}
+        <template #tooltip>Aligned to start</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const AlignEnd: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip align="end">
+        ${trigger}
+        <template #tooltip>Aligned to end</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const CustomOffset: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip :side-offset="20">
+        ${trigger}
+        <template #tooltip>Further away (20px offset)</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const DisableHoverableContent: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip :disable-hoverable-content="true">
+        ${trigger}
+        <template #tooltip>Closes when you move to the tooltip</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const RichContent: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip>
+        <button class="rounded border border-gray-300 px-3 py-1 text-sm">Hover for details</button>
+        <template #tooltip>
+          <strong>Title</strong>
+          <p class="mt-1 text-gray-500">Additional description here</p>
+        </template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const OnIcon: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip>
+        <span class="inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-xs text-gray-600">?</span>
+        <template #tooltip>Helpful information about this field</template>
+      </Tooltip>
+    `,
+  }),
+}