@nexxtmove/ui 0.1.22 → 0.1.23

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

@@ -0,0 +1,169 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Header from './Header.vue'
+import Button from '../Button/Button.vue'
+
+describe('Header', () => {
+  it('renders the title', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'My Page Title',
+      },
+    })
+
+    expect(wrapper.text()).toContain('My Page Title')
+    expect(wrapper.find('span.heading-4').text()).toBe('My Page Title')
+  })
+
+  it('renders the back button with default text', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+      },
+    })
+
+    const button = wrapper.findComponent(Button)
+    expect(button.exists()).toBe(true)
+    expect(button.text()).toBe('Back')
+    expect(button.props('variant')).toBe('secondary')
+  })
+
+  it('renders the back button with custom text', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+        backButtonText: 'Go Back',
+      },
+    })
+
+    const button = wrapper.findComponent(Button)
+    expect(button.text()).toBe('Go Back')
+  })
+
+  it('calls backButtonAction when back button is clicked', async () => {
+    const backButtonAction = vi.fn()
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+        backButtonAction,
+      },
+    })
+
+    const button = wrapper.findComponent(Button)
+    await button.trigger('click')
+
+    expect(backButtonAction).toHaveBeenCalledOnce()
+  })
+
+  it('calls window.history.back() by default when back button is clicked', async () => {
+    const historyBackSpy = vi.spyOn(window.history, 'back').mockImplementation(() => {})
+
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+      },
+    })
+
+    const button = wrapper.findComponent(Button)
+    await button.trigger('click')
+
+    expect(historyBackSpy).toHaveBeenCalledOnce()
+
+    historyBackSpy.mockRestore()
+  })
+
+  it('renders center slot content', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+      },
+      slots: {
+        center: '<span class="logo">Logo</span>',
+      },
+    })
+
+    expect(wrapper.find('.logo').text()).toBe('Logo')
+    expect(wrapper.find('.col-start-2').exists()).toBe(true)
+  })
+
+  it('does not render center slot wrapper when slot is empty', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+      },
+    })
+
+    expect(wrapper.find('.col-start-2').exists()).toBe(false)
+  })
+
+  it('renders right slot content', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+      },
+      slots: {
+        right: '<button class="next">Next</button>',
+      },
+    })
+
+    expect(wrapper.find('.next').text()).toBe('Next')
+    expect(wrapper.find('.ml-auto').exists()).toBe(true)
+  })
+
+  it('does not render right slot wrapper when slot is empty', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+      },
+    })
+
+    expect(wrapper.find('.col-start-3').exists()).toBe(false)
+  })
+
+  it('uses grid layout with 3 columns when center slot is provided', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+      },
+      slots: {
+        center: '<span>Center</span>',
+      },
+    })
+
+    const header = wrapper.find('.header')
+    expect(header.classes()).toContain('grid')
+    expect(header.classes()).toContain('grid-cols-3')
+    expect(header.classes()).toContain('items-center')
+  })
+
+  it('uses flex layout when no center slot is provided', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test',
+      },
+    })
+
+    const header = wrapper.find('.header')
+    expect(header.classes()).toContain('flex')
+    expect(header.classes()).toContain('items-center')
+    expect(header.classes()).not.toContain('grid')
+  })
+
+  it('renders all slots correctly', () => {
+    const wrapper = mount(Header, {
+      props: {
+        title: 'Test Title',
+        backButtonText: 'Previous',
+      },
+      slots: {
+        center: '<div class="center-content">Center</div>',
+        right: '<div class="right-content">Right</div>',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Previous')
+    expect(wrapper.text()).toContain('Test Title')
+    expect(wrapper.find('.center-content').text()).toBe('Center')
+    expect(wrapper.find('.right-content').text()).toBe('Right')
+  })
+})

package/src/components/Header/Header.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import Button from '../Button/Button.vue'
+
+interface NexxtHeaderProps {
+  title: string
+  backButtonText?: string
+  backButtonAction?: () => void
+}
+
+defineOptions({
+  name: 'NexxtHeader',
+})
+
+const {
+  backButtonText = 'Back',
+  backButtonAction = () => {
+    window.history.back()
+  },
+} = defineProps<NexxtHeaderProps>()
+</script>
+
+<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>
+      <span class="block truncate heading-4 text-sapphire-500">
+        {{ title }}
+      </span>
+    </div>
+    <div v-if="$slots.center" class="col-span-1 col-start-2 flex justify-center">
+      <slot name="center" />
+    </div>
+    <div
+      v-if="$slots.right"
+      :class="$slots.center ? 'col-span-1 col-start-3 flex justify-end' : 'ml-auto'"
+    >
+      <slot name="right" />
+    </div>
+  </div>
+</template>

package/src/components/Icon/Icon.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Icon from './Icon.vue'
+
+export default {
+  title: 'Components/Atoms/Icon',
+  component: Icon,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=162-97&t=CbHvOQfEMIr7M5mO-11',
+    },
+  },
+} satisfies Meta<typeof Icon>
+
+type Story = StoryObj<typeof Icon>
+
+export const Regular: Story = {
+  args: {
+    name: 'star',
+    type: 'regular',
+  },
+}
+
+export const Light: Story = {
+  args: {
+    name: 'star',
+    type: 'light',
+  },
+}
+
+export const Solid: Story = {
+  args: {
+    name: 'star',
+    type: 'solid',
+  },
+}
+
+export const Duotone: Story = {
+  args: {
+    name: 'star',
+    type: 'duotone',
+  },
+}
+
+export const Brands: Story = {
+  args: {
+    name: 'github',
+    type: 'brands',
+  },
+}

package/src/components/Icon/Icon.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Icon from './Icon.vue'
+
+describe('Icon', () => {
+  it('renders as an <i> tag', () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'star',
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('I')
+  })
+
+  it('renders correctly with name', async () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'star',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('fa-star')
+
+    await wrapper.setProps({ name: 'arrows-up-down' })
+
+    expect(wrapper.classes()).toContain('fa-arrows-up-down')
+  })
+
+  it('applies default type "light"', () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'star',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('fa-light')
+  })
+
+  it('applies specified type', async () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'star',
+        type: 'regular',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('fa-regular')
+
+    await wrapper.setProps({ type: 'light' })
+    expect(wrapper.classes()).toContain('fa-light')
+
+    await wrapper.setProps({ type: 'solid' })
+    expect(wrapper.classes()).toContain('fa-solid')
+
+    await wrapper.setProps({ type: 'duotone' })
+    expect(wrapper.classes()).toContain('fa-duotone')
+
+    await wrapper.setProps({ type: 'brands' })
+    expect(wrapper.classes()).toContain('fa-brands')
+  })
+
+  it('applies basic layout classes', () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'star',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('items-center')
+    expect(wrapper.classes()).toContain('justify-center')
+  })
+})

package/src/components/Icon/Icon.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
+
+export type IconType = 'regular' | 'solid' | 'light' | 'duotone' | 'brands'
+
+interface NexxtIconProps {
+  name: IconName
+  type?: IconType
+}
+
+defineOptions({
+  name: 'NexxtIcon',
+})
+
+const { type = 'light' } = defineProps<NexxtIconProps>()
+</script>
+
+<template>
+  <i :class="[`fa-${type}`, `fa-${name}`, 'items-center', 'justify-center']" />
+</template>

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import InfoBlock from './InfoBlock.vue'
+
+export default {
+  title: 'Components/Atoms/Info Block',
+  component: InfoBlock,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=513-514&t=CbHvOQfEMIr7M5mO-11',
+    },
+  },
+} 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>
+    `,
+  }),
+}

package/src/components/InfoBlock/InfoBlock.test.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import InfoBlock from './InfoBlock.vue'
+
+describe('InfoBlock', () => {
+  it('renders correctly with default slot content and green color', () => {
+    const customText = 'Koopwoningen doen het goed als post of reel'
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'bell',
+        color: 'green',
+      },
+      slots: {
+        default: `<div class="heading-4">Tip!</div><div class="body-medium">${customText}</div>`,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Tip!')
+    expect(wrapper.text()).toContain(customText)
+    expect(wrapper.find('.bg-green-50').exists()).toBe(true)
+    expect(wrapper.find('.bg-green-500').exists()).toBe(true)
+  })
+
+  it('renders correctly with custom color purple', () => {
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'star',
+        color: 'purple',
+      },
+      slots: {
+        default: 'Custom Purple Content',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Custom Purple Content')
+    expect(wrapper.find('.bg-sapphire-50').exists()).toBe(true)
+    expect(wrapper.find('.bg-purple-500').exists()).toBe(true)
+    expect(wrapper.find('.border-purple-500').exists()).toBe(true)
+  })
+
+  it('renders correctly with custom color blue', () => {
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'info',
+        color: 'blue',
+      },
+      slots: {
+        default: 'Custom Blue Content',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Custom Blue Content')
+    expect(wrapper.find('.bg-yale-blue-50').exists()).toBe(true)
+    expect(wrapper.find('.bg-cornflower-blue-500').exists()).toBe(true)
+    expect(wrapper.find('.border-cornflower-blue-500').exists()).toBe(true)
+  })
+
+  it('renders correctly with custom color rose', () => {
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'info',
+        color: 'rose',
+      },
+      slots: {
+        default: 'Custom Rose Content',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Custom Rose Content')
+    expect(wrapper.find('.bg-rose-50').exists()).toBe(true)
+    expect(wrapper.find('.bg-rose-500').exists()).toBe(true)
+    expect(wrapper.find('.border-rose-500').exists()).toBe(true)
+  })
+
+  it('has correct accessibility attributes', () => {
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'bell',
+      },
+    })
+
+    // Check for role="note"
+    expect(wrapper.attributes('role')).toBe('note')
+
+    // Check that the icon container is hidden from screen readers
+    const iconContainer = wrapper.find('[aria-hidden="true"]')
+    expect(iconContainer.exists()).toBe(true)
+  })
+
+  it('renders the specific icon provided via props', () => {
+    const wrapper = mount(InfoBlock, {
+      props: {
+        icon: 'heart',
+      },
+    })
+
+    const icon = wrapper.findComponent({ name: 'NexxtIcon' })
+    expect(icon.exists()).toBe(true)
+    expect(icon.props('name')).toBe('heart')
+  })
+})

package/src/components/InfoBlock/InfoBlock.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Icon from '../Icon/Icon.vue'
+
+interface NexxtInfoBlockProps {
+  icon: InstanceType<typeof Icon>['name']
+  color?: 'green' | 'purple' | 'blue' | 'rose'
+}
+
+defineOptions({
+  name: 'NexxtInfoBlock',
+})
+
+const { color = 'green' } = defineProps<NexxtInfoBlockProps>()
+
+const colors = computed(() => {
+  switch (color) {
+    case 'green':
+      return {
+        border: 'border-green-500',
+        background: 'bg-green-50',
+        icon: 'bg-green-500',
+      }
+    case 'purple':
+      return {
+        border: 'border-purple-500',
+        background: 'bg-sapphire-50',
+        icon: 'bg-purple-500',
+      }
+    case 'blue':
+      return {
+        border: 'border-cornflower-blue-500',
+        background: 'bg-yale-blue-50',
+        icon: 'bg-cornflower-blue-500',
+      }
+    case 'rose':
+      return {
+        border: 'border-rose-500',
+        background: 'bg-rose-50',
+        icon: 'bg-rose-500',
+      }
+    default:
+      return {
+        border: 'border-green-500',
+        background: 'bg-green-50',
+        icon: 'bg-green-500',
+      }
+  }
+})
+</script>
+
+<template>
+  <div class="info-block flex rounded-xl border" :class="colors.border" role="note">
+    <div
+      class="flex min-h-20 w-20 shrink-0 items-center justify-center rounded-l-lg"
+      :class="colors.background"
+      aria-hidden="true"
+    >
+      <div
+        class="flex aspect-square h-10 items-center justify-center rounded-3xl"
+        :class="colors.icon"
+      >
+        <Icon :name="icon" class="text-xl text-white" />
+      </div>
+    </div>
+    <div class="p-5">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/ProgressBar/ProgressBar.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ProgressBar from './ProgressBar.vue'
+
+export default {
+  title: 'Components/Atoms/Progress Bar',
+  component: ProgressBar,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=369-218&t=CbHvOQfEMIr7M5mO-11',
+    },
+  },
+} satisfies Meta<typeof ProgressBar>
+
+type Story = StoryObj<typeof ProgressBar>
+
+export const Default: Story = {
+  args: {
+    steps: 5,
+    currentStep: 0,
+  },
+}
+
+export const WithTitles: Story = {
+  args: {
+    steps: 5,
+    currentStep: 0,
+    stepTitles: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
+  },
+}