@nexxtmove/ui 0.1.31 → 0.1.32

package/src/components/DropdownButton/DropdownButton.test.ts

@@ -1,124 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
-import DropdownButton, { type NexxtDropdownButtonProps } from './DropdownButton.vue'
-
-const stubs = { NexxtIcon: { template: '<span :data-name="name" />', props: ['name'] } }
-
-const defaultProps: NexxtDropdownButtonProps = {
-  label: 'Actions',
-  action: '/main-action',
-  options: [
-    { label: 'Edit', action: '/edit', icon: 'pencil' as IconName },
-    { label: 'Delete', action: '/delete', icon: 'trash-can' as IconName },
-  ],
-}
-
-const mountDropdown = (props = {}) =>
-  mount(DropdownButton, {
-    props: { ...defaultProps, ...props } as NexxtDropdownButtonProps,
-    global: { stubs },
-  })
-
-describe('DropdownButton', () => {
-  describe('rendering', () => {
-    it('renders the main label', () => {
-      const wrapper = mountDropdown()
-      expect(wrapper.text()).toContain('Actions')
-    })
-
-    it('renders the main icon when provided', () => {
-      const wrapper = mountDropdown({ icon: 'download' })
-      expect(wrapper.find('[data-name="download"]').exists()).toBe(true)
-    })
-
-    it('renders the primary variant by default', () => {
-      const wrapper = mountDropdown()
-      expect(wrapper.find('.bg-button-bg-primary-default').exists()).toBe(true)
-    })
-
-    it('renders the secondary variant when specified', () => {
-      const wrapper = mountDropdown({ variant: 'secondary' })
-      expect(wrapper.find('.bg-button-bg-secondary-default').exists()).toBe(true)
-    })
-
-    it('does not show the dropdown menu by default', () => {
-      const wrapper = mountDropdown()
-      expect(wrapper.find('[role="menu"]').exists()).toBe(false)
-    })
-  })
-
-  describe('interactions', () => {
-    it('emits navigate when main button is clicked with a string action', async () => {
-      const wrapper = mountDropdown()
-      const mainButton = wrapper.findAll('button')[0]
-      await mainButton.trigger('click')
-
-      expect(wrapper.emitted('navigate')).toBeTruthy()
-      expect(wrapper.emitted('navigate')?.[0]).toEqual(['/main-action'])
-    })
-
-    it('executes function when main button is clicked with function action', async () => {
-      const action = vi.fn()
-      const wrapper = mountDropdown({ action })
-      const mainButton = wrapper.findAll('button')[0]
-      await mainButton.trigger('click')
-
-      expect(action).toHaveBeenCalled()
-      expect(wrapper.emitted('navigate')).toBeFalsy()
-    })
-
-    it('toggles the dropdown menu when chevron is clicked', async () => {
-      const wrapper = mountDropdown()
-      const toggleButton = wrapper.findAll('button')[1]
-
-      await toggleButton.trigger('click')
-      expect(wrapper.find('[role="menu"]').exists()).toBe(true)
-      expect(toggleButton.attributes('aria-expanded')).toBe('true')
-
-      await toggleButton.trigger('click')
-      expect(wrapper.find('[role="menu"]').exists()).toBe(false)
-      expect(toggleButton.attributes('aria-expanded')).toBe('false')
-    })
-
-    it('closes the dropdown and emits navigate when an option is clicked', async () => {
-      const wrapper = mountDropdown()
-      await wrapper.findAll('button')[1].trigger('click')
-
-      const option = wrapper.find('[role="menuitem"]')
-      await option.trigger('click')
-
-      expect(wrapper.emitted('navigate')).toBeTruthy()
-      expect(wrapper.emitted('navigate')?.[0]).toEqual(['/edit'])
-      expect(wrapper.find('[role="menu"]').exists()).toBe(false)
-    })
-  })
-
-  describe('placement', () => {
-    it('aligns to right by default', () => {
-      const wrapper = mountDropdown()
-      expect(wrapper.find('.items-end').exists()).toBe(true)
-    })
-
-    it('aligns to left when placement is set to left', () => {
-      const wrapper = mountDropdown({ placement: 'left' })
-      expect(wrapper.find('.items-start').exists()).toBe(true)
-    })
-  })
-
-  describe('accessibility', () => {
-    it('has correct ARIA roles', async () => {
-      const wrapper = mountDropdown()
-      await wrapper.findAll('button')[1].trigger('click')
-
-      expect(wrapper.find('[role="menu"]').exists()).toBe(true)
-      expect(wrapper.find('[role="menuitem"]').exists()).toBe(true)
-    })
-
-    it('has aria-haspopup on the toggle button', () => {
-      const wrapper = mountDropdown()
-      const toggleButton = wrapper.findAll('button')[1]
-      expect(toggleButton.attributes('aria-haspopup')).toBe('menu')
-    })
-  })
-})

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

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import Header from './Header.vue'
-import Button from '../Button/Button.vue'
-
-export default {
-  title: 'Components/Atoms/Header',
-  component: Header,
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=441-280&t=CbHvOQfEMIr7M5mO-4',
-    },
-  },
-} satisfies Meta<typeof Header>
-
-type Story = StoryObj<typeof Header>
-
-export const Default: Story = {
-  args: {
-    title: 'Header Title',
-    backButtonText: 'Back',
-    backButtonAction: () => console.log('Back button clicked'),
-  },
-}
-
-export const WithoutBackButton: Story = {
-  args: {
-    title: 'Header Title',
-  },
-}
-
-export const WithSlots: Story = {
-  args: {
-    title: 'Header Title',
-    backButtonText: 'Go Back',
-    backButtonAction: () => console.log('Back clicked'),
-  },
-  render: (args) => ({
-    components: { Header, Button },
-    setup() {
-      return { args }
-    },
-    template: `
-      <Header v-bind="args">
-        <template #center>
-          <span class="font-bold">Centered Content</span>
-        </template>
-        <template #right>
-          <Button variant="primary" icon="arrow-right" :icon-right="true">Next</Button>
-        </template>
-      </Header>
-    `,
-  }),
-}

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

@@ -1,183 +0,0 @@
-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 explicit text', () => {
-    const wrapper = mount(Header, {
-      props: {
-        title: 'Test',
-        backButtonText: 'Back',
-      },
-    })
-
-    const button = wrapper.findComponent(Button)
-    expect(button.exists()).toBe(true)
-    expect(button.text()).toBe('Back')
-    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: {
-        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',
-        backButtonText: 'Back',
-        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',
-        backButtonText: 'Back',
-      },
-    })
-
-    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/Icon/Icon.stories.ts

@@ -1,50 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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/InfoBlock/InfoBlock.stories.ts

@@ -1,90 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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/ProgressBar/ProgressBar.stories.ts

@@ -1,30 +0,0 @@
-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'],
-  },
-}