@nexxtmove/ui 0.1.26 → 0.1.28

package/dist/nuxt.js

@@ -1,23 +1,24 @@
-import { defineNuxtModule as c, addComponent as s, addTemplate as i } from "@nuxt/kit";
-const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button/Button.vue", x = "components/Calendar/Calendar.vue", p = "components/Chip/Chip.vue", l = "components/DatePicker/DatePicker.vue", u = "components/Header/Header.vue", d = "components/Icon/Icon.vue", r = "components/InfoBlock/InfoBlock.vue", v = "components/ProgressBar/ProgressBar.vue", N = "components/SocialIcons/SocialIcons.vue", S = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", T = "components/SocialMediaTemplate/SocialMediaTemplate.vue", f = "components/SocialMediaType/SocialMediaType.vue", C = "components/StepperHeader/StepperHeader.vue", h = "components/TimelineEvent/TimelineEvent.vue", M = "components/TimelinePhaseblock/TimelinePhaseblock.vue", P = "components/Tooltip/Tooltip.vue", b = {
+import { defineNuxtModule as s, addComponent as c, addTemplate as i } from "@nuxt/kit";
+const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button/Button.vue", x = "components/Calendar/Calendar.vue", u = "components/Chip/Chip.vue", p = "components/CustomerJourneyTile/CustomerJourneyTile.vue", l = "components/DatePicker/DatePicker.vue", r = "components/Header/Header.vue", d = "components/Icon/Icon.vue", v = "components/InfoBlock/InfoBlock.vue", N = "components/ProgressBar/ProgressBar.vue", T = "components/SocialIcons/SocialIcons.vue", S = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", C = "components/SocialMediaTemplate/SocialMediaTemplate.vue", f = "components/SocialMediaType/SocialMediaType.vue", h = "components/StepperHeader/StepperHeader.vue", M = "components/TimelineEvent/TimelineEvent.vue", P = "components/TimelinePhaseblock/TimelinePhaseblock.vue", b = "components/Tooltip/Tooltip.vue", k = {
   NexxtAnimatedNumber: a,
   NexxtButton: m,
   NexxtCalendar: x,
-  NexxtChip: p,
+  NexxtChip: u,
+  NexxtCustomerJourneyTile: p,
   NexxtDatePicker: l,
-  NexxtHeader: u,
+  NexxtHeader: r,
   NexxtIcon: d,
-  NexxtInfoBlock: r,
-  NexxtProgressBar: v,
-  NexxtSocialIcons: N,
+  NexxtInfoBlock: v,
+  NexxtProgressBar: N,
+  NexxtSocialIcons: T,
   NexxtSocialMediaCustomTemplate: S,
-  NexxtSocialMediaTemplate: T,
+  NexxtSocialMediaTemplate: C,
   NexxtSocialMediaType: f,
-  NexxtStepperHeader: C,
-  NexxtTimelineEvent: h,
-  NexxtTimelinePhaseblock: M,
-  NexxtTooltip: P
-}, B = c({
+  NexxtStepperHeader: h,
+  NexxtTimelineEvent: M,
+  NexxtTimelinePhaseblock: P,
+  NexxtTooltip: b
+}, I = s({
   meta: {
     name: "@nexxtmove/ui",
     configKey: "nexxtmoveUi",
@@ -29,8 +30,8 @@ const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(b))
-      s({
+    for (const [t, n] of Object.entries(k))
+      c({
         name: t,
         export: "default",
         filePath: `@nexxtmove/ui/${n}`
@@ -48,5 +49,5 @@ const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button
   }
 });
 export {
-  B as default
+  I as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -29,7 +29,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@awesome.me/kit-37b149f3ef": "^1.0.4",
+    "@awesome.me/kit-37b149f3ef": "^1.0.8",
     "@eslint/js": "^9.39.2",
     "@nuxt/kit": "^4.3.1",
     "@nuxt/schema": "^4.3.1",

package/src/components/CustomerJourneyTile/CustomerJourneyTile.stories.ts

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import CustomerJourneyTile from './CustomerJourneyTile.vue'
+
+export default {
+  title: 'Components/Atoms/Customer Journey Tile',
+  component: CustomerJourneyTile,
+} satisfies Meta<typeof CustomerJourneyTile>
+
+type Story = StoryObj<typeof CustomerJourneyTile>
+
+export const Default: Story = {
+  args: {
+    title: 'Latent',
+    amount: 270,
+    percentage: 14,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const CustomTitle: Story = {
+  args: {
+    title: 'Custom Title',
+    amount: 270,
+    percentage: -8,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const NegativePercentage: Story = {
+  args: {
+    title: 'Latent',
+    amount: 270,
+    percentage: -8,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const WithoutPercentage: Story = {
+  args: {
+    title: 'Wonen',
+    amount: 54,
+  },
+}
+
+export const WithoutAmount: Story = {
+  args: {
+    title: 'Actief zoeken',
+    percentage: 5,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const Orientatie: Story = {
+  args: {
+    title: 'Oriëntatie',
+    amount: 142,
+    percentage: 3,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const Selectie: Story = {
+  args: {
+    title: 'Selectie',
+    amount: 89,
+    percentage: -2,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const Transactie: Story = {
+  args: {
+    title: 'Transactie',
+    amount: 31,
+    percentage: 21,
+    percentageExplanaition: 'vorige maand',
+  },
+}
+
+export const WithoutPhase: Story = {
+  args: {
+    amount: 270,
+    percentage: 14,
+    percentageExplanaition: 'vorige maand',
+  },
+}

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

@@ -0,0 +1,178 @@
+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/CustomerJourneyTile/CustomerJourneyTile.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import NexxtIcon from '../Icon/Icon.vue'
+import { computed } from 'vue'
+
+type Phase = 'Latent' | 'Oriëntatie' | 'Actief zoeken' | 'Selectie' | 'Transactie' | 'Wonen'
+
+interface NexxtCustomerJourneyTileProps {
+  title?: string
+  amount?: number
+  percentage?: number
+  percentageExplanaition?: string
+}
+
+const PHASE_ICON_MAP: Record<Phase, string> = {
+  Latent: 'eye-closed',
+  Oriëntatie: 'building-magnifying-glass',
+  'Actief zoeken': 'house-person-return',
+  Selectie: 'handshake',
+  Transactie: 'pencil-mechanical',
+  Wonen: 'house-heart',
+}
+
+defineOptions({
+  name: 'NexxtCustomerJourneyTile',
+})
+
+const { title, amount, percentage, percentageExplanaition } =
+  defineProps<NexxtCustomerJourneyTileProps>()
+
+const icon = computed(() => {
+  if (!title) return null
+  return (PHASE_ICON_MAP[title as Phase] as InstanceType<typeof NexxtIcon>['name']) || null
+})
+
+const ariaLabel = computed(() => {
+  const parts: string[] = []
+  if (title) parts.push(title)
+  if (amount !== undefined) parts.push(`${amount} contacten`)
+  if (percentage !== undefined) {
+    const sign = percentage > 0 ? '+' : ''
+    const explanation = percentageExplanaition ? ` ${percentageExplanaition}` : ''
+    parts.push(`${sign}${percentage}%${explanation}`)
+  }
+  return parts.join(', ')
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-label="ariaLabel"
+    class="flex cursor-pointer rounded-xl bg-white outline outline-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500"
+    :class="icon ? 'gap-6 p-1.5' : 'p-4'"
+  >
+    <div
+      v-if="icon"
+      class="flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-tl-md rounded-bl-md bg-purple-100"
+    >
+      <NexxtIcon :name="icon" class="text-2xl text-purple-500" aria-hidden="true" />
+    </div>
+    <div class="flex flex-col items-start gap-1" :class="icon ? 'py-6 pr-4' : ''">
+      <span v-if="title">{{ title }}</span>
+      <span
+        class="heading-1"
+        :class="icon ? 'text-purple-500' : 'text-sapphire-900'"
+        v-if="amount"
+        >{{ amount }}</span
+      >
+      <div v-if="percentage" class="flex gap-0.5">
+        <span
+          class="extra-small-semibold"
+          :class="percentage > 0 ? 'text-green-500' : 'text-brick-500'"
+          ><template v-if="percentage > 0">+</template>{{ percentage }}%</span
+        >
+        <span class="extra-small-normal" v-if="percentageExplanaition">{{
+          percentageExplanaition
+        }}</span>
+      </div>
+    </div>
+  </button>
+</template>

package/src/components/Header/Header.stories.ts

@@ -23,6 +23,12 @@ export const Default: Story = {
   },
 }
 
+export const WithoutBackButton: Story = {
+  args: {
+    title: 'Header Title',
+  },
+}
+
 export const WithSlots: Story = {
   args: {
     title: 'Header Title',

package/src/components/Header/Header.test.ts

@@ -15,10 +15,11 @@ describe('Header', () => {
     expect(wrapper.find('span.heading-4').text()).toBe('My Page Title')
   })
 
-  it('renders the back button with default text', () => {
+  it('renders the back button with explicit text', () => {
     const wrapper = mount(Header, {
       props: {
         title: 'Test',
+        backButtonText: 'Back',
       },
     })
 
@@ -28,6 +29,17 @@ describe('Header', () => {
     expect(button.props('variant')).toBe('secondary')
   })
 
+  it('does not render the back button when backButtonText is not provided', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+      },
+    })
+
+    const button = wrapper.findComponent(Button)
+    expect(button.exists()).toBe(false)
+  })
+
   it('renders the back button with custom text', () => {
     const wrapper = mount(Header, {
       props: {
@@ -45,6 +57,7 @@ describe('Header', () => {
     const wrapper = mount(Header, {
       props: {
         title: 'Test',
+        backButtonText: 'Back',
         backButtonAction,
       },
     })
@@ -61,6 +74,7 @@ describe('Header', () => {
     const wrapper = mount(Header, {
       props: {
         title: 'Test',
+        backButtonText: 'Back',
       },
     })
 

package/src/components/Header/Header.vue

@@ -12,7 +12,7 @@ defineOptions({
 })
 
 const {
-  backButtonText = 'Back',
+  backButtonText,
   backButtonAction = () => {
     window.history.back()
   },
@@ -22,9 +22,13 @@ const {
 <template>
   <div class="header flex items-center" :class="$slots.center ? 'grid grid-cols-3' : ''">
     <div class="flex max-w-full items-center justify-start gap-4">
-      <Button class="shrink-0" variant="secondary" @click="backButtonAction">{{
-        backButtonText
-      }}</Button>
+      <Button
+        v-if="backButtonText"
+        class="shrink-0"
+        variant="secondary"
+        @click="backButtonAction"
+        >{{ backButtonText }}</Button
+      >
       <span class="block truncate heading-4 text-sapphire-500">
         {{ title }}
       </span>

package/src/components.json

@@ -3,6 +3,7 @@
   "NexxtButton": "components/Button/Button.vue",
   "NexxtCalendar": "components/Calendar/Calendar.vue",
   "NexxtChip": "components/Chip/Chip.vue",
+  "NexxtCustomerJourneyTile": "components/CustomerJourneyTile/CustomerJourneyTile.vue",
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
   "NexxtHeader": "components/Header/Header.vue",
   "NexxtIcon": "components/Icon/Icon.vue",

package/src/index.ts

@@ -3,6 +3,7 @@ export { default as NexxtAnimatedNumber } from './components/AnimatedNumber/Anim
 export { default as NexxtButton } from './components/Button/Button.vue'
 export { default as NexxtCalendar } from './components/Calendar/Calendar.vue'
 export { default as NexxtChip } from './components/Chip/Chip.vue'
+export { default as NexxtCustomerJourneyTile } from './components/CustomerJourneyTile/CustomerJourneyTile.vue'
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
 export { default as NexxtHeader } from './components/Header/Header.vue'
 export { default as NexxtIcon } from './components/Icon/Icon.vue'