@nexxtmove/ui 0.1.30 → 0.1.31

package/dist/nuxt.js

@@ -1,26 +1,27 @@
-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", u = "components/Checkbox/Checkbox.vue", p = "components/Chip/Chip.vue", l = "components/CustomerJourneyTile/CustomerJourneyTile.vue", r = "components/DatePicker/DatePicker.vue", d = "components/DropdownButton/DropdownButton.vue", v = "components/Header/Header.vue", N = "components/Icon/Icon.vue", T = "components/InfoBlock/InfoBlock.vue", C = "components/ProgressBar/ProgressBar.vue", S = "components/SocialIcons/SocialIcons.vue", b = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", f = "components/SocialMediaTemplate/SocialMediaTemplate.vue", h = "components/SocialMediaType/SocialMediaType.vue", k = "components/StepperHeader/StepperHeader.vue", B = "components/Table/Table.vue", M = "components/TimelineEvent/TimelineEvent.vue", P = "components/TimelinePhaseblock/TimelinePhaseblock.vue", I = "components/Tooltip/Tooltip.vue", y = {
-  NexxtAnimatedNumber: a,
-  NexxtButton: m,
-  NexxtCalendar: x,
-  NexxtCheckbox: u,
-  NexxtChip: p,
-  NexxtCustomerJourneyTile: l,
-  NexxtDatePicker: r,
-  NexxtDropdownButton: d,
-  NexxtHeader: v,
-  NexxtIcon: N,
-  NexxtInfoBlock: T,
-  NexxtProgressBar: C,
-  NexxtSocialIcons: S,
-  NexxtSocialMediaCustomTemplate: b,
-  NexxtSocialMediaTemplate: f,
-  NexxtSocialMediaType: h,
-  NexxtStepperHeader: k,
-  NexxtTable: B,
-  NexxtTimelineEvent: M,
-  NexxtTimelinePhaseblock: P,
-  NexxtTooltip: I
+import { defineNuxtModule as c, addComponent as s, addTemplate as a } from "@nuxt/kit";
+const i = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Avatar/Avatar.vue", x = "components/Button/Button.vue", u = "components/Calendar/Calendar.vue", p = "components/Checkbox/Checkbox.vue", l = "components/Chip/Chip.vue", r = "components/CustomerJourneyTile/CustomerJourneyTile.vue", d = "components/DatePicker/DatePicker.vue", v = "components/DropdownButton/DropdownButton.vue", N = "components/Header/Header.vue", T = "components/Icon/Icon.vue", C = "components/InfoBlock/InfoBlock.vue", S = "components/ProgressBar/ProgressBar.vue", b = "components/SocialIcons/SocialIcons.vue", f = "components/SocialMediaCustomTemplate/SocialMediaCustomTemplate.vue", h = "components/SocialMediaTemplate/SocialMediaTemplate.vue", k = "components/SocialMediaType/SocialMediaType.vue", B = "components/StepperHeader/StepperHeader.vue", M = "components/Table/Table.vue", P = "components/TimelineEvent/TimelineEvent.vue", I = "components/TimelinePhaseblock/TimelinePhaseblock.vue", y = "components/Tooltip/Tooltip.vue", A = {
+  NexxtAnimatedNumber: i,
+  NexxtAvatar: m,
+  NexxtButton: x,
+  NexxtCalendar: u,
+  NexxtCheckbox: p,
+  NexxtChip: l,
+  NexxtCustomerJourneyTile: r,
+  NexxtDatePicker: d,
+  NexxtDropdownButton: v,
+  NexxtHeader: N,
+  NexxtIcon: T,
+  NexxtInfoBlock: C,
+  NexxtProgressBar: S,
+  NexxtSocialIcons: b,
+  NexxtSocialMediaCustomTemplate: f,
+  NexxtSocialMediaTemplate: h,
+  NexxtSocialMediaType: k,
+  NexxtStepperHeader: B,
+  NexxtTable: M,
+  NexxtTimelineEvent: P,
+  NexxtTimelinePhaseblock: I,
+  NexxtTooltip: y
 }, H = c({
   meta: {
     name: "@nexxtmove/ui",
@@ -33,13 +34,13 @@ const a = "components/AnimatedNumber/AnimatedNumber.vue", m = "components/Button
     addCSS: !0
   },
   setup(e, o) {
-    for (const [t, n] of Object.entries(y))
+    for (const [t, n] of Object.entries(A))
       s({
         name: t,
         export: "default",
         filePath: `@nexxtmove/ui/${n}`
       });
-    e.addCSS && (i({
+    e.addCSS && (a({
       filename: "nexxtmove-ui.css",
       getContents: () => `
 @import "tailwindcss";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/Avatar/Avatar.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Avatar from './Avatar.vue'
+
+export default {
+  title: 'Components/Atoms/Avatar',
+  component: Avatar,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System',
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+  },
+} satisfies Meta<typeof Avatar>
+
+type Story = StoryObj<typeof Avatar>
+
+export const Default: Story = {
+  args: {
+    name: 'Peter van der Sloot',
+    size: 'sm',
+  },
+}

package/src/components/Avatar/Avatar.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Avatar from './Avatar.vue'
+
+describe('Avatar', () => {
+  it('generates 2 character initials from name with multiple words', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: 'Peter Vink',
+      },
+    })
+
+    expect(wrapper.text()).toContain('PV')
+  })
+
+  it('generates 2 character initials from name with single word', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: 'Peter',
+      },
+    })
+
+    expect(wrapper.text()).toContain('PE')
+  })
+
+  it('generates 2 character initials picking first and last words for names with tussenvoegsels', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: 'Peter van der Sloot',
+      },
+    })
+
+    expect(wrapper.text()).toContain('PS')
+  })
+
+  it('handles empty strings gracefully by returning no text', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: '',
+      },
+    })
+
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('handles whitespace-only strings gracefully by returning no text', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: '   ',
+      },
+    })
+
+    expect(wrapper.text()).toBe('')
+  })
+})

package/src/components/Avatar/Avatar.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface NexxtAvatarProps {
+  name: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}
+
+defineOptions({
+  name: 'NexxtAvatar',
+})
+
+const props = withDefaults(defineProps<NexxtAvatarProps>(), {
+  size: 'sm',
+})
+
+const computedInitials = computed(() => {
+  if (!props.name?.trim()) return ''
+
+  const parts = props.name.trim().split(/\s+/)
+  if (parts.length >= 2) {
+    const firstInitial = parts[0][0]
+    const lastInitial = parts[parts.length - 1][0]
+
+    return (firstInitial + lastInitial).toUpperCase()
+  }
+
+  return parts[0].substring(0, 2).toUpperCase()
+})
+
+const sizeClasses = {
+  xs: 'h-6 w-6 text-[10px]',
+  sm: 'h-8 w-8 text-sm',
+  md: 'h-10 w-10 text-base',
+  lg: 'h-12 w-12 text-lg',
+  xl: 'h-16 w-16 text-xl',
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-cornflower-blue-50 font-semibold text-cornflower-blue-500',
+      sizeClasses[size],
+    ]"
+  >
+    {{ computedInitials }}
+  </div>
+</template>

package/src/components.json

@@ -1,5 +1,6 @@
 {
   "NexxtAnimatedNumber": "components/AnimatedNumber/AnimatedNumber.vue",
+  "NexxtAvatar": "components/Avatar/Avatar.vue",
   "NexxtButton": "components/Button/Button.vue",
   "NexxtCalendar": "components/Calendar/Calendar.vue",
   "NexxtCheckbox": "components/Checkbox/Checkbox.vue",

package/src/index.ts

@@ -1,5 +1,6 @@
 // This file is auto-generated by scripts/generate-index.ts
 export { default as NexxtAnimatedNumber } from './components/AnimatedNumber/AnimatedNumber.vue'
+export { default as NexxtAvatar } from './components/Avatar/Avatar.vue'
 export { default as NexxtButton } from './components/Button/Button.vue'
 export { default as NexxtCalendar } from './components/Calendar/Calendar.vue'
 export { default as NexxtCheckbox } from './components/Checkbox/Checkbox.vue'