@nexxtmove/ui 2.6.0 → 2.7.0

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Header from './Header.vue'
+import Button from '../../atoms/Button/Button.vue'
+
+export default {
+  title: 'Components/Organisms/Header',
+  component: Header,
+} 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>
+    `,
+  }),
+}
+
+export const WithBackButtonAndActions: Story = {
+  args: {
+    title:
+      'Nieuw, Koopwoning(en) (Van Harinxmaloane 31, Barent Fockesstraat 58, Flaaksikkers 27), 18-09-2025',
+    headingType: 'heading-1',
+  },
+  render: (args) => ({
+    components: { Header, Button },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Header v-bind="args" class="shrink-0">
+        <template #back-button>
+          <Button variant="secondary" icon="chevron-left" class="shrink-0">All posts</Button>
+        </template>
+        <template #right>
+          <div class="flex items-center gap-3">
+            <Button variant="secondary" icon="pencil">Edit</Button>
+            <Button variant="secondary" icon="trash" class="text-red-600 hover:text-red-700">Delete</Button>
+          </div>
+        </template>
+      </Header>
+    `,
+  }),
+}

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

@@ -0,0 +1,233 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Header from './Header.vue'
+import Button from '../../atoms/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')
+  })
+
+  it('renders the static title span when no title slot is given', () => {
+    const wrapper = mount(Header, { props: { title: 'Static' } })
+
+    expect(wrapper.find('span.heading-4').exists()).toBe(true)
+    expect(wrapper.find('span.heading-4').text()).toBe('Static')
+  })
+
+  it('replaces the static title with the title slot', () => {
+    const wrapper = mount(Header, {
+      props: { title: 'Static' },
+      slots: {
+        title: '<input class="title-field" value="Editable" />',
+      },
+    })
+
+    expect(wrapper.find('.title-field').exists()).toBe(true)
+    expect(wrapper.find('span.heading-4').exists()).toBe(false)
+    expect(wrapper.text()).not.toContain('Static')
+  })
+
+  it('keeps the title area sizing when the title slot is used', () => {
+    const wrapper = mount(Header, {
+      slots: {
+        title: '<input class="title-field" />',
+      },
+    })
+
+    const titleArea = wrapper.find('.title-field').element.parentElement
+    expect(titleArea?.className).toContain('flex-1')
+    expect(titleArea?.className).toContain('min-w-0')
+  })
+
+  it('renders without a title prop when the title slot is used', () => {
+    const wrapper = mount(Header, {
+      slots: { title: '<span class="own-title">Eigen titel</span>' },
+    })
+
+    expect(wrapper.find('.own-title').text()).toBe('Eigen titel')
+  })
+
+  it('renders the back-button slot instead of the default button', () => {
+    const wrapper = mount(Header, {
+      props: { title: 'Test', backButtonText: 'Previous' },
+      slots: { 'back-button': '<a class="own-back">Terug</a>' },
+    })
+
+    expect(wrapper.find('.own-back').exists()).toBe(true)
+    expect(wrapper.findComponent(Button).exists()).toBe(false)
+  })
+})