@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,271 @@
+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'] },
+  NexxtAnimatedNumber: {
+    name: 'NexxtAnimatedNumber',
+    template: '{{ value }}',
+    props: ['value', 'delay'],
+  },
+}
+
+const mountTile = (props = {}) =>
+  mount(CustomerJourneyTile, {
+    props: { ...props },
+    global: { stubs },
+  })
+
+describe('CustomerJourneyTile', () => {
+  describe('rendering', () => {
+    it('renders a div element by default', () => {
+      const wrapper = mountTile({ title: 'Latent' })
+      expect(wrapper.element.tagName).toBe('DIV')
+    })
+
+    it('renders as a button when as="button"', () => {
+      const wrapper = mountTile({ as: 'button', title: 'Latent' })
+      expect(wrapper.element.tagName).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.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 amount 0 when provided', () => {
+      const wrapper = mountTile({ amount: 0 })
+      expect(wrapper.find('.heading-1').exists()).toBe(true)
+    })
+
+    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('renders zero percentage', () => {
+      const wrapper = mountTile({ percentage: 0 })
+      expect(wrapper.text()).toContain('0%')
+    })
+
+    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('applies orange color class for zero percentage', () => {
+      const wrapper = mountTile({ percentage: 0 })
+      expect(wrapper.find('.text-orange-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)
+      expect(wrapper.find('.text-orange-500').exists()).toBe(false)
+    })
+
+    it('applies red color class for a positive percentage when invertPercentageColor is true', () => {
+      const wrapper = mountTile({ percentage: 14, invertPercentageColor: true })
+      expect(wrapper.find('.text-brick-500').exists()).toBe(true)
+    })
+
+    it('applies green color class for a negative percentage when invertPercentageColor is true', () => {
+      const wrapper = mountTile({ percentage: -8, invertPercentageColor: true })
+      expect(wrapper.find('.text-green-500').exists()).toBe(true)
+    })
+
+    it('applies orange color class for zero percentage when invertPercentageColor is true', () => {
+      const wrapper = mountTile({ percentage: 0, invertPercentageColor: true })
+      expect(wrapper.find('.text-orange-500').exists()).toBe(true)
+    })
+  })
+
+  describe('variant', () => {
+    it('applies information outline by default', () => {
+      const wrapper = mountTile({ title: 'Latent' })
+      expect(wrapper.classes()).toContain('outline-gray-200')
+    })
+
+    it('applies display outline when variant is display', () => {
+      const wrapper = mountTile({ title: 'Latent', variant: 'display' })
+      expect(wrapper.classes()).toContain('outline-purple-50')
+    })
+
+    it('applies selected display outline when variant is display and selected is true', () => {
+      const wrapper = mountTile({ title: 'Latent', variant: 'display', selected: true })
+      expect(wrapper.classes()).toContain('outline-purple-500')
+    })
+
+    it('applies information icon colors by default', () => {
+      const wrapper = mountTile({ title: 'Latent' })
+      const iconDiv = wrapper.find('.bg-purple-100')
+      expect(iconDiv.exists()).toBe(true)
+      expect(iconDiv.classes()).toContain('text-purple-500')
+    })
+
+    it('applies display icon colors when variant is display', () => {
+      const wrapper = mountTile({ title: 'Latent', variant: 'display' })
+      const iconDiv = wrapper.find('.bg-purple-50')
+      expect(iconDiv.exists()).toBe(true)
+      expect(iconDiv.classes()).toContain('text-purple-100')
+    })
+
+    it('applies selected display icon colors when variant is display and selected is true', () => {
+      const wrapper = mountTile({ title: 'Latent', variant: 'display', selected: true })
+      const iconDiv = wrapper.find('.bg-purple-500')
+      expect(iconDiv.exists()).toBe(true)
+      expect(iconDiv.classes()).toContain('text-white')
+    })
+  })
+
+  describe('delay', () => {
+    it('passes delay to NexxtAnimatedNumber when provided', () => {
+      const wrapper = mountTile({ amount: 100, animated: true, delay: 300 })
+      const animatedNumber = wrapper.findComponent({ name: 'NexxtAnimatedNumber' })
+      expect(animatedNumber.props('delay')).toBe(300)
+    })
+
+    it('passes no delay to NexxtAnimatedNumber when omitted', () => {
+      const wrapper = mountTile({ amount: 100 })
+      const animatedNumber = wrapper.findComponent({ name: 'NexxtAnimatedNumber' })
+      expect(animatedNumber.props('delay')).toBeUndefined()
+    })
+  })
+
+  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/molecules/DoughnutChart/DoughnutChart.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DoughnutChart from './DoughnutChart.vue'
+
+export default {
+  title: 'Components/Molecules/Doughnut Chart',
+  component: DoughnutChart,
+} satisfies Meta<typeof DoughnutChart>
+
+type Story = StoryObj<typeof DoughnutChart>
+
+export const Default: Story = {
+  args: {
+    value: 142,
+    percentage: 75,
+  },
+}
+
+export const WithDelay: Story = {
+  args: {
+    value: 142,
+    percentage: 75,
+    color: '#6366f1',
+    delay: 1000,
+  },
+}
+
+export const Large: Story = {
+  args: {
+    value: 89,
+    percentage: 60,
+    color: '#22c55e',
+    size: 240,
+    thickness: 28,
+  },
+}
+
+export const Small: Story = {
+  args: {
+    value: 31,
+    percentage: 40,
+    color: '#f59e0b',
+    size: 96,
+    thickness: 12,
+  },
+}

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

@@ -0,0 +1,205 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DoughnutChart from './DoughnutChart.vue'
+
+describe('DoughnutChart', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('renders an SVG with the correct size', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 80, percentage: 75 },
+    })
+
+    const svg = wrapper.find('svg')
+    expect(svg.attributes('width')).toBe('160')
+    expect(svg.attributes('height')).toBe('160')
+    expect(svg.attributes('viewBox')).toBe('0 0 160 160')
+  })
+
+  it('respects custom size and thickness props', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50, size: 240, thickness: 28 },
+    })
+
+    const svg = wrapper.find('svg')
+    expect(svg.attributes('width')).toBe('240')
+    expect(svg.attributes('height')).toBe('240')
+  })
+
+  it('sets aria-label to the value prop', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 142, percentage: 75 },
+    })
+
+    expect(wrapper.find('svg').attributes('aria-label')).toBe('142')
+  })
+
+  it('renders the value in the default slot', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 142, percentage: 75 },
+    })
+
+    expect(wrapper.text()).toContain('142')
+  })
+
+  it('renders custom slot content instead of the default value', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 142, percentage: 75 },
+      slots: { default: '<span>custom label</span>' },
+    })
+
+    expect(wrapper.text()).toContain('custom label')
+    expect(wrapper.text()).not.toContain('142')
+  })
+
+  it('resolves a Tailwind color token to a CSS variable', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50, color: 'purple-500' },
+    })
+
+    const arc = wrapper.findAll('circle')[0]
+    expect(arc!.attributes('stroke')).toBe('var(--color-purple-500)')
+  })
+
+  it('passes a hex color through as-is', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50, color: '#ff0000' },
+    })
+
+    const arc = wrapper.findAll('circle')[0]
+    expect(arc!.attributes('stroke')).toBe('#ff0000')
+  })
+
+  it('passes a CSS named color through as-is', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50, color: 'transparent' },
+    })
+
+    const arc = wrapper.findAll('circle')[0]
+    expect(arc!.attributes('stroke')).toBe('transparent')
+  })
+
+  it('passes an rgb color through as-is', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50, color: 'rgb(255, 0, 0)' },
+    })
+
+    const arc = wrapper.findAll('circle')[0]
+    expect(arc!.attributes('stroke')).toBe('rgb(255, 0, 0)')
+  })
+
+  it('does not render the background circle when backgroundColor is not set', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50 },
+    })
+
+    expect(wrapper.findAll('circle')).toHaveLength(1)
+  })
+
+  it('renders the background circle when backgroundColor is set', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50, backgroundColor: 'gray-100' },
+    })
+
+    const circles = wrapper.findAll('circle')
+    expect(circles).toHaveLength(2)
+    expect(circles[0]!.attributes('stroke')).toBe('var(--color-gray-100)')
+  })
+
+  it('starts with a zero arc before mounting', () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50 },
+      attachTo: document.body,
+    })
+
+    // Before timers run the dasharray should start at "0 circumference"
+    const arc = wrapper.findAll('circle')[0]
+    expect(arc!.attributes('stroke-dasharray')).toMatch(/^0 /)
+
+    wrapper.unmount()
+  })
+
+  it('animates to the correct arc after mount', async () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50 },
+      attachTo: document.body,
+    })
+
+    await vi.runAllTimersAsync()
+
+    const arc = wrapper.findAll('circle')[0]
+    const dasharray = arc!.attributes('stroke-dasharray') ?? ''
+    const [drawn] = dasharray.split(' ').map(Number)
+    // 50% of circumference for radius (160-20)/2 = 70 → C = 2π*70 ≈ 439.82 → half ≈ 219.91
+    expect(drawn).toBeCloseTo(Math.PI * 70, 0)
+
+    wrapper.unmount()
+  })
+
+  it('respects the delay prop before animating', async () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50, delay: 1000 },
+      attachTo: document.body,
+    })
+
+    // Before delay the arc should still be 0
+    await vi.advanceTimersByTimeAsync(500)
+    const arcBefore = wrapper.findAll('circle')[0]
+    expect(arcBefore!.attributes('stroke-dasharray')).toMatch(/^0 /)
+
+    // After delay the arc should be filled
+    await vi.advanceTimersByTimeAsync(500)
+    const arcAfter = wrapper.findAll('circle')[0]
+    expect(arcAfter!.attributes('stroke-dasharray')).not.toMatch(/^0 /)
+
+    wrapper.unmount()
+  })
+
+  it('clamps percentage below 0 to 0', async () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 0, percentage: -20 },
+      attachTo: document.body,
+    })
+
+    await vi.runAllTimersAsync()
+
+    const arc = wrapper.findAll('circle')[0]
+    const [drawn] = (arc!.attributes('stroke-dasharray') ?? '').split(' ').map(Number)
+    expect(drawn).toBe(0)
+
+    wrapper.unmount()
+  })
+
+  it('clamps percentage above 100 to full circumference', async () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 100, percentage: 150 },
+      attachTo: document.body,
+    })
+
+    await vi.runAllTimersAsync()
+
+    const radius = (160 - 20) / 2
+    const circumference = 2 * Math.PI * radius
+
+    const arc = wrapper.findAll('circle')[0]
+    const [drawn] = (arc!.attributes('stroke-dasharray') ?? '').split(' ').map(Number)
+    expect(drawn).toBeCloseTo(circumference, 0)
+
+    wrapper.unmount()
+  })
+
+  it("applies the correct transform for 12 o'clock counter-clockwise direction", () => {
+    const wrapper = mount(DoughnutChart, {
+      props: { value: 50, percentage: 50 },
+    })
+
+    const g = wrapper.find('g')
+    expect(g.attributes('transform')).toBe('scale(-1, 1) translate(-160, 0) rotate(-90, 80, 80)')
+  })
+})

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import InfoBlock from './InfoBlock.vue'
+
+export default {
+  title: 'Components/Molecules/Info Block',
+  component: InfoBlock,
+} satisfies Meta<typeof InfoBlock>
+
+type Story = StoryObj<typeof InfoBlock>
+
+const TEMPLATE =
+  '<span class="heading-4 text-yale-blue-500 inline">Tip!</span> <span class="body-medium text-gray-700">Koopwoningen doen het goed als post of reel</span>'
+
+export const Green: Story = {
+  args: {
+    icon: 'bell',
+    color: 'green',
+  },
+  render: (args) => ({
+    components: { InfoBlock },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoBlock v-bind="args">
+        ${TEMPLATE}
+      </InfoBlock>
+    `,
+  }),
+}
+
+export const Purple: Story = {
+  args: {
+    icon: 'circle-video',
+    color: 'purple',
+  },
+  render: (args) => ({
+    components: { InfoBlock },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoBlock v-bind="args">
+        ${TEMPLATE}
+      </InfoBlock>
+    `,
+  }),
+}
+
+export const Blue: Story = {
+  args: {
+    icon: 'info',
+    color: 'blue',
+  },
+  render: (args) => ({
+    components: { InfoBlock },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoBlock v-bind="args">
+        ${TEMPLATE}
+      </InfoBlock>
+    `,
+  }),
+}
+
+export const Rose: Story = {
+  args: {
+    icon: 'info',
+    color: 'rose',
+  },
+  render: (args) => ({
+    components: { InfoBlock },
+    setup() {
+      return { args }
+    },
+    template: `
+      <InfoBlock v-bind="args">
+        ${TEMPLATE}
+      </InfoBlock>
+    `,
+  }),
+}