@nexxtmove/ui 0.1.22 → 0.1.23

package/src/components/SocialMediaTemplate/SocialMediaTemplate.test.ts

@@ -0,0 +1,466 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import SocialMediaTemplate from './SocialMediaTemplate.vue'
+
+describe('SocialMediaTemplate', () => {
+  it('renders an image when media is an image file', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: 'https://example.com/image.jpg',
+        mediaType: 'image',
+        name: 'Amsterdam',
+        type: 'Woning',
+      },
+    })
+
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  it('renders a video when media is a video file', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/barcelona.mp4',
+        mediaType: 'video',
+        name: 'Barcelona',
+        type: 'Woning',
+        muted: true,
+      },
+    })
+
+    expect(wrapper.find('video').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(false)
+  })
+
+  it('displays the name and type correctly', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: 'https://example.com/image.png',
+        mediaType: 'image',
+        name: 'Amsterdam',
+        type: 'Woning',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Amsterdam')
+    expect(wrapper.text()).toContain('Woning')
+  })
+
+  it('shows play icon when variant is video', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+      },
+    })
+
+    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
+    const playIcon = icons.find((icon) => icon.props('name') === 'play-circle')
+    expect(playIcon).toBeDefined()
+  })
+
+  it('does not show play icon when variant is post', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Image',
+      },
+    })
+
+    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
+    const playIcon = icons.find((icon) => icon.props('name') === 'play')
+    expect(playIcon).toBeUndefined()
+  })
+
+  it('shows selected overlay when selected prop is true', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Image',
+        selected: true,
+      },
+    })
+
+    const overlay = wrapper.find('.bg-cornflower-blue-200\\/70')
+    expect(overlay.classes()).toContain('opacity-100')
+  })
+
+  it('hides selected overlay when selected prop is false', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Image',
+        selected: false,
+      },
+    })
+
+    const overlay = wrapper.find('.bg-cornflower-blue-200\\/70')
+    expect(overlay.classes()).toContain('opacity-0')
+  })
+
+  it('plays video on mouseenter when media is video', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        muted: true,
+      },
+    })
+
+    const video = wrapper.find('video').element as HTMLVideoElement
+    const playSpy = vi.spyOn(video, 'play').mockImplementation(() => Promise.resolve())
+
+    await wrapper.trigger('mouseenter')
+
+    expect(playSpy).toHaveBeenCalled()
+  })
+
+  it('pauses video on mouseleave when media is video', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        muted: true,
+      },
+    })
+
+    const video = wrapper.find('video').element as HTMLVideoElement
+    const pauseSpy = vi.spyOn(video, 'pause')
+
+    await wrapper.trigger('mouseleave')
+
+    expect(pauseSpy).toHaveBeenCalled()
+  })
+
+  it('applies aspect-9/16 class when variant is video', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('aspect-9/16')
+  })
+
+  it('applies h-80 class when variant is post', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Image',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('h-80')
+  })
+
+  it('uses media_type prop for image rendering', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test-without-extension',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Image',
+      },
+    })
+
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  it('uses media_type prop for video rendering', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test-video-without-extension',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        muted: true,
+      },
+    })
+
+    expect(wrapper.find('video').exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(false)
+  })
+
+  it('correctly map various media extensions to mime types', () => {
+    const extensions = {
+      mp4: 'video/mp4',
+      webm: 'video/webm',
+      ogg: 'video/ogg',
+      mov: 'video/quicktime',
+      avi: 'video/x-msvideo',
+      mkv: 'video/x-matroska',
+      unknown: 'video/mp4',
+    }
+
+    Object.entries(extensions).forEach(([ext, expectedMime]) => {
+      const wrapper = mount(SocialMediaTemplate, {
+        props: {
+          variant: 'video',
+          media: `/test.${ext}`,
+          mediaType: 'video',
+          mediaExtension: ext === 'unknown' ? undefined : ext,
+          name: 'Test',
+          type: 'Video',
+        },
+      })
+
+      const source = wrapper.find('source')
+      expect(source.attributes('type')).toBe(expectedMime)
+    })
+  })
+
+  it('handles custom aspect ratio correctly', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        aspectRatio: '16:9',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('aspect-16/9')
+  })
+
+  it('applies video-specific colors when variant is video', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        selected: true,
+      },
+    })
+
+    // Check overlay background
+    const overlay = wrapper.find('.z-10')
+    expect(overlay.classes()).toContain('bg-purple-200/70')
+
+    // Check checkmark background
+    const checkmarkCircle = overlay.find('.rounded-full')
+    expect(checkmarkCircle.classes()).toContain('bg-purple-500')
+
+    // Check info block background
+    const infoBlock = wrapper.find('.z-20')
+    expect(infoBlock.classes()).toContain('bg-purple-500')
+  })
+
+  it('uses correct icons based on variant', () => {
+    const variants = [
+      { variant: 'post', icon: 'image' },
+      { variant: 'video', icon: 'play-circle' },
+      { variant: 'slideshow', icon: 'images' },
+    ]
+
+    variants.forEach(({ variant, icon }) => {
+      const wrapper = mount(SocialMediaTemplate, {
+        props: {
+          variant: variant as 'post' | 'video' | 'slideshow',
+          media: '/test.jpg',
+          mediaType: 'image',
+          name: 'Test',
+          type: 'Test',
+        },
+      })
+      const nexxtIcon = wrapper.find('.z-20').findComponent({ name: 'NexxtIcon' })
+      expect(nexxtIcon.props('name')).toBe(icon)
+    })
+  })
+
+  it('shows image-stack icon when variant is slideshow', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'slideshow',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Slideshow',
+      },
+    })
+
+    const icons = wrapper.findAllComponents({ name: 'NexxtIcon' })
+    const stackIcon = icons.find((icon) => icon.props('name') === 'images')
+    expect(stackIcon).toBeDefined()
+  })
+
+  it('correctly uses parsedAspectRatio for slideshow variant', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'slideshow',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Slideshow',
+        aspectRatio: '1:1',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('aspect-1/1')
+  })
+
+  it('correctly returns empty string aspect ratio when mediaType is image and no aspect ratio is provided', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video', // TriggerparsedAspectRatio evaluation
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Test',
+      },
+    })
+
+    // Classes should not include any aspect ratio class
+    const classes = wrapper.classes()
+    expect(classes.some((c) => c.startsWith('aspect-'))).toBe(false)
+  })
+
+  it('computes undefined mime type when mediaType is image', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: 'test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Test',
+      },
+    })
+
+    // @ts-expect-error - testing computed property internal
+    expect(wrapper.vm.videoMimeType).toBeUndefined()
+  })
+
+  it('handles custom aspect ratio with aspect- prefix correctly', () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        aspectRatio: 'aspect-4:3',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('aspect-4/3')
+  })
+
+  it('emits click event on click', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Test',
+      },
+    })
+
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+
+  it('emits click event on enter key down', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Test',
+      },
+    })
+
+    await wrapper.trigger('keydown.enter')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+
+  it('emits click event on space key down', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'post',
+        media: '/test.jpg',
+        mediaType: 'image',
+        name: 'Test',
+        type: 'Test',
+      },
+    })
+
+    await wrapper.trigger('keydown.space')
+    expect(wrapper.emitted('click')).toBeTruthy()
+  })
+
+  it('plays video on focus when media is video', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        muted: true,
+      },
+    })
+
+    const video = wrapper.find('video').element as HTMLVideoElement
+    const playSpy = vi.spyOn(video, 'play').mockImplementation(() => Promise.resolve())
+
+    await wrapper.trigger('focus')
+
+    expect(playSpy).toHaveBeenCalled()
+  })
+
+  it('pauses video on blur when media is video', async () => {
+    const wrapper = mount(SocialMediaTemplate, {
+      props: {
+        variant: 'video',
+        media: '/test.mp4',
+        mediaType: 'video',
+        name: 'Test',
+        type: 'Video',
+        muted: true,
+      },
+    })
+
+    const video = wrapper.find('video').element as HTMLVideoElement
+    const pauseSpy = vi.spyOn(video, 'pause')
+
+    await wrapper.trigger('blur')
+
+    expect(pauseSpy).toHaveBeenCalled()
+  })
+})

package/src/components/SocialMediaTemplate/SocialMediaTemplate.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import Icon from '../Icon/Icon.vue'
+
+interface NexxtSocialMediaTemplateProps {
+  variant: 'post' | 'video' | 'slideshow'
+  media: string
+  mediaType: 'image' | 'video'
+  name: string
+  type: string
+  mediaExtension?: string
+  selected?: boolean
+  muted?: boolean
+  aspectRatio?: string
+}
+
+defineOptions({
+  name: 'NexxtSocialMediaTemplate',
+})
+
+const emit = defineEmits(['click'])
+
+const { mediaType, media, mediaExtension, aspectRatio } =
+  defineProps<NexxtSocialMediaTemplateProps>()
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+
+const videoMimeType = computed(() => {
+  if (mediaType !== 'video') return undefined
+
+  const mimeTypes: Record<string, string> = {
+    mp4: 'video/mp4',
+    webm: 'video/webm',
+    ogg: 'video/ogg',
+    mov: 'video/quicktime',
+    avi: 'video/x-msvideo',
+    mkv: 'video/x-matroska',
+  }
+
+  return mimeTypes[mediaExtension || ''] || 'video/mp4'
+})
+
+const parsedAspectRatio = computed(() => {
+  if (aspectRatio) {
+    return aspectRatio.startsWith('aspect-')
+      ? aspectRatio.replace(':', '/')
+      : `aspect-${aspectRatio.replace(':', '/')}`
+  }
+
+  if (mediaType === 'video') {
+    return 'aspect-9/16'
+  }
+
+  return ''
+})
+
+const handleMouseEnter = () => {
+  if (videoRef.value) {
+    videoRef.value.play()
+  }
+}
+
+const handleMouseLeave = () => {
+  if (videoRef.value) {
+    videoRef.value.pause()
+  }
+}
+</script>
+
+<template>
+  <div
+    class="group grid w-64 cursor-pointer grid-cols-1 grid-rows-[1fr_auto] overflow-hidden rounded-3xl outline-1 -outline-offset-1 transition-all focus-visible:outline-2 focus-visible:outline-cornflower-blue-600"
+    :class="[
+      variant !== 'post' ? parsedAspectRatio : 'h-80',
+      selected ? 'outline-cornflower-blue-500' : 'outline-gray-200',
+    ]"
+    role="button"
+    tabindex="0"
+    :aria-pressed="selected"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    @focus="handleMouseEnter"
+    @blur="handleMouseLeave"
+    @click="emit('click')"
+    @keydown.enter.prevent="emit('click')"
+    @keydown.space.prevent="emit('click')"
+  >
+    <picture v-if="mediaType === 'image'" class="col-start-1 row-span-2 row-start-1">
+      <source :srcset="media" />
+      <img :src="media" alt="Media content" class="h-full w-full object-cover object-center" />
+    </picture>
+    <video
+      v-else
+      ref="videoRef"
+      :muted="muted"
+      loop="true"
+      class="col-start-1 row-span-2 row-start-1 h-full w-full object-cover"
+    >
+      <source :src="media" :type="videoMimeType" />
+      Your browser does not support the video tag.
+    </video>
+    <div
+      class="z-10 col-start-1 row-span-2 row-start-1 flex items-center justify-center transition-opacity duration-300"
+      :class="[
+        selected ? 'opacity-100' : 'opacity-0',
+        variant === 'video' ? 'bg-purple-200/70' : 'bg-cornflower-blue-200/70',
+      ]"
+    >
+      <div
+        class="flex aspect-square items-center justify-center rounded-full px-2"
+        :class="variant === 'video' ? 'bg-purple-500' : 'bg-cornflower-blue-500'"
+      >
+        <Icon name="check" class="ml-auto block shrink-0 text-3xl text-white" />
+      </div>
+    </div>
+    <div
+      class="goup-hover:opacity-0 z-20 col-start-1 row-start-2 flex items-center px-5 pt-2.5 pb-3.5 text-white transition-all duration-300 ease-out group-hover:translate-y-full"
+      :class="variant === 'video' ? 'bg-purple-500' : 'bg-social-media-template-info-bg'"
+    >
+      <div>
+        <div class="heading-4">{{ name }}</div>
+        <div class="extra-small">{{ type }}</div>
+      </div>
+      <Icon
+        :name="variant === 'post' ? 'image' : variant === 'video' ? 'play-circle' : 'images'"
+        class="mb-1 ml-auto block shrink-0 self-end text-lg"
+      />
+    </div>
+  </div>
+</template>

package/src/components/SocialMediaType/SocialMediaType.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import SocialMediaType from './SocialMediaType.vue'
+
+export default {
+  title: 'Components/Organisms/Social Media Type',
+  component: SocialMediaType,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=533-28&t=CbHvOQfEMIr7M5mO-11',
+    },
+  },
+} satisfies Meta<typeof SocialMediaType>
+
+type Story = StoryObj<typeof SocialMediaType>
+
+export const Post: Story = {
+  args: {
+    variant: 'post',
+    icons: ['facebook', 'instagram', 'linkedin', 'x', 'google'],
+  },
+}
+
+export const Reel: Story = {
+  args: {
+    variant: 'reel',
+    chip: 'Nieuw!',
+  },
+}
+
+export const Story: Story = {
+  args: {
+    variant: 'story',
+    icons: ['instagram'],
+  },
+}
+
+export const ReelSelected: Story = {
+  args: {
+    variant: 'reel',
+    selected: true,
+  },
+}