@cnamts/synapse 0.0.2-alpha → 0.0.4-alpha

package/src/components/HeaderBar/tests/HeaderBar.spec.ts

@@ -0,0 +1,216 @@
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { afterAll, describe, expect, it, vi } from 'vitest'
+import { defineComponent, inject, onMounted, ref, type Ref } from 'vue'
+import HeaderBar from '../HeaderBar.vue'
+import { registerHeaderMenuKey } from '../consts'
+
+describe('HeaderBar', () => {
+	vi.mock('@/utils/functions/throttleDisplayFn/throttleDisplayFn.ts', () => ({
+		default: (fn: (...args: unknown[]) => void) => fn,
+	}))
+
+	afterAll(() => {
+		vi.restoreAllMocks()
+		document.body.innerHTML = ''
+	})
+
+	it('should render the component', async () => {
+		const wrapper = mount(HeaderBar, {
+			props: {
+				sticky: false,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+		window.dispatchEvent(new CustomEvent('scroll'))
+
+		expect(wrapper.html()).toMatchSnapshot()
+
+		// mock scroll related values
+		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(2000)
+		const header = wrapper.find('.header')
+		vi.spyOn(header.element, 'getBoundingClientRect').mockReturnValue({
+			top: -2000,
+		} as DOMRect)
+		window.dispatchEvent(new CustomEvent('scroll'))
+
+		await wrapper.vm.$nextTick()
+
+		const stickyHeader = wrapper.find('.sticky-header')
+		const stickyHeaderStyle = stickyHeader.attributes('style')
+		expect(stickyHeaderStyle).toContain('position: relative;')
+		expect(stickyHeaderStyle).toContain('top: auto;')
+
+		wrapper.unmount()
+	})
+
+	it('should render all the component slots', async () => {
+		const wrapper = mount(HeaderBar, {
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+			slots: {
+				'default': '<div>Default slot</div>',
+				'prepend': '<div>Prepend slot</div>',
+				'append': '<div>Append slot</div>',
+				'menu': '<div>Menu slot</div>',
+				'logo': '<div>Logo slot</div>',
+				'header-side': '<div>Header side slot</div>',
+				'logo-brand-content': '<div>Logo brand content slot</div>',
+			},
+		})
+
+		const text = wrapper.text()
+
+		expect(text).not.toContain('Default slot')
+		expect(text).toContain('Prepend slot')
+		expect(text).toContain('Append slot')
+		expect(text).toContain('Menu slot')
+		expect(text).toContain('Logo slot')
+		expect(text).toContain('Header side slot')
+		expect(text).not.toContain('Logo brand content slot')
+
+		wrapper.unmount()
+	})
+
+	const TestMenu = defineComponent({
+		setup() {
+			const menu = ref(false)
+			const registerHeaderMenu = inject<(r: Ref<boolean>) => void>(registerHeaderMenuKey)
+
+			onMounted(() => {
+				if (registerHeaderMenu) {
+					registerHeaderMenu(menu)
+				}
+			})
+
+			return {
+				menu,
+			}
+		},
+		template: '<button @click="menu = true">Menu</button>',
+	})
+
+	it('should render the menu slot', async () => {
+		const wrapper = mount({
+			components: {
+				HeaderBar,
+				TestMenu,
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<TestMenu />
+					</template>
+					<template #logo="{menuOpen}">
+						<div>{{menuOpen ? 'the menu is open' : 'the menu is closed'}}</div>
+					</template>
+				</HeaderBar>`,
+		}, {
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+		const text = wrapper.text()
+		expect(text).toContain('Menu')
+		expect(text).toContain('the menu is closed')
+
+		const button = wrapper.find('button')
+		await button.trigger('click')
+
+		expect(wrapper.text()).toContain('the menu is open')
+
+		wrapper.unmount()
+	})
+
+	it('should render in sticky mode', async () => {
+		const wrapper = mount(HeaderBar, {
+			props: {
+				sticky: true,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+		window.dispatchEvent(new CustomEvent('scroll'))
+
+		// mock scroll related values
+		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(2000)
+		const header = wrapper.find('.header')
+		vi.spyOn(header.element, 'getBoundingClientRect').mockReturnValue({
+			top: -2000,
+		} as DOMRect)
+		window.dispatchEvent(new CustomEvent('scroll'))
+
+		await wrapper.vm.$nextTick()
+
+		const stickyHeader = wrapper.find('.sticky-header')
+		const stickyHeaderStyle = stickyHeader.attributes('style')
+		expect(stickyHeaderStyle).toContain('position: fixed;')
+		expect(stickyHeaderStyle).toContain('top: 0px;')
+
+		wrapper.unmount()
+	})
+
+	it('should only show the header when the user scrolls up', async () => {
+		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
+		window.happyDOM.setInnerWidth(600)
+		const wrapper = mount(HeaderBar, {
+			props: {
+				hideWhenDown: true,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+		window.dispatchEvent(new CustomEvent('scroll'))
+
+		const header = wrapper.find('.header')
+		const mockHeaderRect = vi.spyOn(header.element, 'getBoundingClientRect')
+
+		// mock scroll related values
+		const mockScrollY = vi.spyOn(window, 'scrollY', 'get')
+		const mockScrollTop = vi.spyOn(document.documentElement, 'scrollTop', 'get')
+		mockScrollY.mockReturnValue(2000)
+		mockScrollTop.mockReturnValue(2000)
+		mockHeaderRect.mockReturnValue({
+			top: -2000,
+			height: 77,
+		} as DOMRect)
+		window.dispatchEvent(new CustomEvent('scroll'))
+		await wrapper.vm.$nextTick()
+
+		const stickyHeader = wrapper.find('.sticky-header')
+		let stickyHeaderStyle = stickyHeader.attributes('style')
+
+		// Do not show the header when the user scrolls down
+		expect(stickyHeaderStyle).toContain('position: fixed;')
+		expect(stickyHeaderStyle).toContain('top: 0px;')
+		expect(stickyHeaderStyle).toContain('transform: translateY(-100%);')
+
+		mockScrollY.mockReturnValue(800)
+		mockScrollTop.mockReturnValue(800)
+		mockHeaderRect.mockReturnValue({
+			top: -800,
+			height: 77,
+		} as DOMRect)
+		window.dispatchEvent(new CustomEvent('scroll'))
+		await wrapper.vm.$nextTick()
+
+		stickyHeaderStyle = stickyHeader.attributes('style')
+
+		// Do show the header when the user scrolls up
+		expect(stickyHeaderStyle).toContain('position: fixed;')
+		expect(stickyHeaderStyle).toContain('top: 0px;')
+		expect(stickyHeaderStyle).toContain('transform: none;')
+
+		wrapper.unmount()
+	})
+})

package/src/components/HeaderBar/tests/__snapshots__/HeaderBar.spec.ts.snap

@@ -0,0 +1,45 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HeaderBar > should render the component 1`] = `
+"<header data-v-efdbe191="" class="header" style="min-height: auto;">
+  <div data-v-efdbe191="" class="sticky-header" style="position: relative; width: 100%; top: auto; transform: none; transition: none;">
+    <!--v-if-->
+    <div data-v-efdbe191="" class="inner-header">
+      <div data-v-efdbe191="" class="header-logo"><a data-v-a3ce97de="" data-v-efdbe191="" href="/" class="logo"><svg data-v-d1ac2910="" data-v-a3ce97de="" fill="#0c419a" width="141" height="42" viewBox="0 0 211 64" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" aria-label="Logo de l'Assurance Maladie, cliquez pour revenir à l'accueil">
+            <g data-v-d1ac2910="">
+              <path d="M100.1 45V30.6h3.8v14.6c0 .8.4 1 .7 1h.5l.5 2.9a5 5 0 0 1-2 .3c-2.6 0-3.5-1.7-3.5-4.4Z" data-v-d1ac2910=""></path>
+              <path d="m75.7 40.4 3.8-8.5h4V49h-3.6V38.4l-3 7.8h-2.4l-3-7.8v10.7H68V32h4l3.8 8.5Z" data-v-d1ac2910=""></path>
+              <path d="M107.1 45.5c0-2.8 2.3-4.3 7.4-4.9 0-1.1-.8-1.8-2.2-1.8-1 0-2.1.4-3.4 1.2l-1.3-2.6c1.6-1 3.5-1.7 5.5-1.7 3.3 0 5 1.9 5 5.9V49h-3.5v-1.3s-1.5 1.6-3.6 1.6c-2.4 0-3.9-1.7-3.9-4Zm7.4-.3V43c-2.7.3-3.7 1.2-3.7 2.2 0 .8.5 1.2 1.5 1.2.8 0 1.5-.5 2.2-1.2Z" data-v-d1ac2910=""></path>
+              <path d="M86.1 45.5c0-2.8 2.3-4.3 7.4-4.9 0-1.1-.8-1.8-2.2-1.8-1 0-2.1.4-3.4 1.2l-1.3-2.6c1.6-1 3.5-1.7 5.5-1.7 3.3 0 5 1.9 5 5.9V49h-3.5v-1.3S92 49.4 90 49.4c-2.4 0-3.9-1.7-3.9-4Zm7.4-.3V43c-2.7.3-3.7 1.2-3.7 2.2 0 .8.6 1.2 1.5 1.2.8 0 1.6-.5 2.2-1.2Z" data-v-d1ac2910=""></path>
+              <path d="M129 30.6v6.3a4.1 4.1 0 0 0-3.2-1.2c-2.7 0-5.3 2.6-5.3 6.8 0 4.3 2 7 5.2 7 1.8 0 3.1-1.4 3.2-1.5v1.1h3.8V30.6H129Zm-2.3 15.7c-1.5 0-2.4-1.2-2.4-3.8 0-2.5 1.1-3.6 2.4-3.6.6 0 1.4.2 2.2.8v5.4c-.7.8-1.4 1.2-2.2 1.2Z" data-v-d1ac2910=""></path>
+              <path d="M135.7 32c0-1.2 1-2 2.2-2 1.2 0 2.2.8 2.2 2s-1 2-2.2 2c-1.3 0-2.2-.8-2.2-2Zm.3 4h3.8V49H136V36Z" data-v-d1ac2910=""></path>
+              <path d="M142.2 42.5c0-4.2 2.6-6.8 5.9-6.8 3.6 0 5.6 2.7 5.6 6.3l-.1 1.7h-7.7c.3 2 1.6 2.8 3.3 2.8 1 0 1.8-.4 2.8-1l1.3 2.5c-1.3.9-3 1.4-4.6 1.4-3.8 0-6.5-2.5-6.5-6.9Zm8.3-1.4c0-1.4-.9-2.5-2.4-2.5-1.2 0-2 .9-2.3 2.5h4.7Z" data-v-d1ac2910=""></path>
+              <path d="M68 23.3V8.8h3.7v14.7c0 .8.4 1 .7 1h.5l.4 2.9a5 5 0 0 1-1.9.3c-2.6 0-3.5-1.7-3.5-4.4Z" data-v-d1ac2910=""></path>
+              <path d="m88.1 23.3 1 4.1h4l-5.3-17.3h-4.4l-5.3 17.3h4l1-4.1h5Zm-4.2-3 1.6-6.6h.2l1.6 6.5H84Z" data-v-d1ac2910=""></path>
+              <path d="m93.9 25.9 1.7-2.4c1.1.9 2.2 1.3 3.3 1.3 1.1 0 1.6-.4 1.6-1 0-1-1.2-1.4-2.6-1.9-1.6-.6-3.4-1.7-3.4-3.8 0-2.5 2-4.2 5-4.2 1.9 0 3.4.8 4.5 1.7l-1.7 2.4c-1-.7-1.8-1.2-2.8-1.2-1 0-1.4.4-1.4 1 0 1 1.2 1.2 2.5 1.7 1.6.7 3.5 1.6 3.5 4s-1.9 4.2-5.3 4.2c-1.7 0-3.6-.7-5-1.8Z" data-v-d1ac2910=""></path>
+              <path d="m105.3 25.9 1.7-2.4c1.1.9 2.2 1.3 3.3 1.3 1.1 0 1.6-.4 1.6-1 0-1-1.2-1.4-2.6-1.9-1.6-.6-3.4-1.7-3.4-3.8 0-2.5 2-4.2 5-4.2 1.9 0 3.4.8 4.5 1.7l-1.7 2.4c-1-.7-1.8-1.2-2.8-1.2-1 0-1.4.4-1.4 1 0 1 1.2 1.2 2.5 1.7 1.6.7 3.5 1.6 3.5 4s-1.9 4.2-5.3 4.2c-1.7 0-3.6-.7-5-1.8Z" data-v-d1ac2910=""></path>
+              <path d="M132.2 14.3h3.8V16c.8-1.4 2.5-2 3.4-2 .8 0 1.2.2 1.6.3l-.4 3.6c-.5-.2-1.1-.4-1.7-.4-1.5 0-2.8 1.3-2.9 3v6.8h-3.8V14.3Z" data-v-d1ac2910=""></path>
+              <path d="M155.7 14.3h3.8v1.6c1-1 2.2-2 4-2 2.7 0 4 2 4 5.3v8.2h-3.9v-7.7c0-1.9-.5-2.5-1.6-2.5-1 0-1.6.5-2.5 1.3v8.8h-3.8v-13Z" data-v-d1ac2910=""></path>
+              <path d="M180.6 20.8c0-4.3 2.7-6.9 5.9-6.9 3.7 0 5.7 2.8 5.7 6.3 0 .7 0 1.4-.2 1.8h-7.7c.4 1.9 1.7 2.8 3.4 2.8 1 0 1.8-.4 2.7-1l1.3 2.4c-1.3 1-3 1.5-4.6 1.5-3.7 0-6.5-2.5-6.5-6.9Zm8.4-1.4c0-1.4-.9-2.5-2.4-2.5-1.2 0-2 .8-2.3 2.5h4.7Z" data-v-d1ac2910=""></path>
+              <path d="M141.8 23.7c0-2.7 2.3-4.3 7.4-4.8 0-1.2-.8-1.9-2.2-1.9a7 7 0 0 0-3.4 1.2l-1.3-2.5c1.6-1 3.4-1.8 5.5-1.8 3.3 0 5 2 5 6v7.5h-3.6V26s-1.4 1.6-3.5 1.6c-2.4 0-4-1.7-4-4Zm7.4-.2v-2.3c-2.7.4-3.8 1.3-3.8 2.3 0 .8.6 1.2 1.5 1.2s1.7-.5 2.3-1.2Z" data-v-d1ac2910=""></path>
+              <path d="M76.7 8.8c-.8 0-1.9.6-1.9 1.7 0 1 .8 1.5 1.6 1.5 0 1.2-1 1.8-1.5 2.1l1 1.4c3.3-1 4-6.7.8-6.7Z" data-v-d1ac2910=""></path>
+              <path d="M125.3 14.3V23c-.8 1-1.4 1.4-2.3 1.4-1 0-1.6-.6-1.6-2.5v-7.6h-3.8v8.3c0 3 1.4 5.1 4 5.1 2.5 0 3.8-1.6 3.8-1.6v1.3h3.7V14.3h-3.8Z" data-v-d1ac2910=""></path>
+              <path d="M176.3 24.6c-1.7 0-3-1.5-3-3.7 0-2.3 1.3-3.8 3-3.8.6 0 1.1.2 1.7.7l1.8-2.5c-.9-.8-2.1-1.3-3.7-1.3a6.5 6.5 0 0 0-6.6 6.9c0 4.3 2.7 6.8 6.3 6.8 1.4 0 3-.4 4.2-1.5l-1.4-2.7c-.7.6-1.5 1-2.3 1Z" data-v-d1ac2910=""></path>
+            </g>
+            <path d="M34.8 9c-.1-.2-.4-.3-.6-.3H34c-.2-.2-5.3 0-6.5.7 0-.8-.4-1.8-1.7-2-1-.3-3.1.7-2.4 2.8 0 .3.3.6.7.8.2 0 .5 0 .7.6h.3l.2.2h.5c.4.4.8-.1 1-.5l.7 2c-.2-.2-1.8-.6-2.5.2s-1.2 1.8-1.7 3.5c-.2.4-.5.7-1 .9-.9.3-.4.7-.2.7a6 6 0 0 0 2 0c.4-.2.1-1 .5-1.4l.8-1c0 .5 0 .8-.3 1.5-.2.7-1 1-1.3 1.3-.4.5.6.5.8.5.7-.2 1-.2 1.3-.4.4-.2.2-.8.3-1 .3-.7 1.4-2 1.6-2.3.8.2 1.7.2 2 .2 1.9-.2 2.3-1.5 2-2.6-.1-1-.7-1.5-.9-1.8l-.9-1.4 3.5-.9c0 .3.3.3.4.4.2.1.3 0 .2-.1a.6.6 0 0 1-.2-.2h.7c.3 0 .4-.4.3-.5Z" data-v-d1ac2910=""></path>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M61 26.7c-.5-2.6-2.9-4.1-4.1-4.7l-1.4-.4-.4-.2c.1-.5.8-.5 1.2-1.3 1-2.3-1.2-3.8-2.8-3.5-.8.2-1.3.4-1.5 1 0 .4-.3.4-.7.8-.2.2.1.4.2.5l-.1.3v.5s-.3.3 0 .7l.3.8c0 .1 0 .2-.3 0l-3.4-1a37.4 37.4 0 0 1-4.2-4.7c-.7 0 .5 1.3-.1.8-.2 0-.7-.4-.8-.5l-.1-.2-.3-.3H42.2c-.2 0-.1.5 0 .7 0 0 .4 1.2.6 1.4l1.5 1 2.6 3c.7.7 3.8 2.5 3.9 2.6.2 0 .5.8 0 5.5-.1 1.8-1.4 5.6-.8 7.5.4 1.3.9 2.2 1.3 5.6.1.8-.5 1.3-1.3 2l-1.4.8c-.2.2 0 .4.2.5.2 0 .5.3.8.3.3.1.9 0 1.4-.3.7-.3.7-.4 1-.6.5-.3 1-.3 1.2-.8.2-.6-.3-1.4-.3-1.7.4-2.8.9-4.1.2-5.8-.2-.3 1-4 1-3.4.2.9.3 3.8.3 5.9 0 .9.8 4.2 1 5.4.4 1.8-2.6 3.2-2 3.8l1 .3 1-.1c.3-.1.6-.5.7-.6.6-.8.4-.6 1-1.1.4-.5 0-1.4 0-1.8v-2.9c0-1.9 0-2.4.2-3.2l1-6.2s.2 0 .3-.2c.2-.2.1-.5.2-.7 0-.2 0 0 0 0l.2.6-.2.8c-.2.4.1.4.2.5 0 0 1-.7 1.2-1l.1-.8-.2-1.8c.2-.9 1-3.2.8-3.8Zm-2.2 3.6c-.2.5-.2 0-.6 1.7V31.1c0-2.1-1.5-6.5-.6-5.6 0 0 1.2.8 1.4 1.4.2.5.1 1.8-.2 3.4Z" data-v-d1ac2910=""></path>
+            <path d="M20 35.3c-.3-.3-1.6-2-2.4-2.7l-1-1.5c-1.6-2-1.9-2.1-3-2.2-.1-.2 0-.3 0-.4 1.3-.5.9-1.6.8-1.7l.2-.6-.2-1-.1-.7c-.8-.9-2.6-.9-3.5-.3-.8.5-.3.9-.6 1.6-.1.5 0 .9.3 1.2 0 .3.8.7.7 1.2-.2.6-1 .7-1 .7l-.3.1c-1.4.8-2.7 2-2.9 3.2 0 1 1.7 2.5 2.7 3.3.1 1.7 1.2 4.4 1.3 4.5.1.3-.3-.3-1.4-.7-.6-.1-1.2-.9-1.4 0 0 .4 0 1-.3 1.8-.2.6 0 1.5.7 1.5.5 0 .8-1.4.8-1.4s2.3 1 3.3.7c.7-.2.8-2.7.2-5-.2-.8.4 1.3 2 3.1.2.4 0 .7.2 2.2v1c0 .7-.7 1.6.9 2 1.6.4 1.5.8 2.5.1.5-.3-1.4-.5-1.8-1.6v-.2c0-.9.3-2.9.2-3.6-.6-3.4-2-5-2.2-5.8 0-2.4-.2-3.2 0-2.6l1 1.5.3.3.4.4 2.8 2.1s.1 1 .6 1c.4 0 2.3-1 2.2-1.1 0-.3-2-.3-2-.4ZM9.7 34l-1-1.8c.4-.7 1-1 1-.9.2 0 0 2.7 0 2.7Z" data-v-d1ac2910=""></path>
+            <path d="M51.8 54.8c-.1 0-1.2-.5-2.2-2-.5-.8-3.8-7-4.3-8.2-.9-2.4-8-6.7-8.2-7-.2-.1-.2-.5-.1-.8.5-2 .3-3.8.4-4.1.3-.7.8-1.7.4-2.3l-.7-1.2s3.7 1.4 4.6 1.2c.8-.2 4.5-2.8 4.7-2.9.5-.2 1.8.1 3-1.3.5-.5.2-.6 0-.6.1 0-.1-.2-.4 0-.2.1-1.3.4-1.1.2.8-.5.2-.7.2-.7-.3.3-1.8.7-2.1 1l-.8.5c-.9.5-2.4 1.3-4 1.7-.3 0-3.3-2-5-2.2-1-.1-1.3 0-1.8.1-.6.2-.6-.7 0-1 .2 0 .6-.1.7-.4.2-.4 0-.7 0-.8v-.2l-.1-.1v-.5c.3-.2.2-.4.1-.4-.1-.1-.6-.4-.7-.7 0-.6-.3-.9-.3-1.2 0 0-.1-.8-.4-1-.4-.4-1.2-.8-2.8-.3-.6.1-.5.4-1.8.6-1.6.3-2.4 2.7-2.3 3.7.1.8.8.4.8.7 0 .6-.1 1.5 1 1.8.3 0 1.8-.2 2.4 0 0 0 .5 0 .2.4-.1.2-1.6.9-2 1-1 .4-3.6 4.6-4.3 5-.7.3-1 .6-1.3.8-1 .6-2.1 1.4-2.7 1.4-.7 0-1.4.3-1.9 1.5-.1.3 0 .5.3.5 0 .1.2.3.4.3.2.2.5 0 .7 0l1-.7c.5-.2 4-1.5 4.7-2.1 1.2-.6 3.5-3 4-3s1.6 1 1.2 3c0 .7-1 2-1.4 2.6-1 1.5-.2 2.7-.4 3-1 1.6-2.2 3.7-4.2 5.5-.8.6-2.4.7-3.3 1-2 .5-4.2 2-5.7 2.8-.5.3-1-.3-1.6-.4-.7 0-.7 1-1 1.8l-.7 1.5c-.1.4-.7 1.7-.1 2.2.4.7 1.5-1.4 2.4-2.3.4-.5.7-.7 1.7-1 .6 0 5.6-1.4 8.8-2.2h.3c4.2-1.1 8.6-6.6 8.7-6.6l7.2 3.5c.7.4.7 1.8 1.5 3.4a22 22 0 0 0 4.4 4.9c.4.4 0 1 .2 1.6.2.6.6.6 1.1.6l1.6-.2c.7 0 .5 0 1.3.2.4 0 1.3.1 2-.5 1-1.2-1.2-.6-2.3-1.1Z" data-v-d1ac2910=""></path>
+            <path d="M44 51.7a.4.4 0 0 0-.6-.2 22.2 22.2 0 0 1-21-.6.5.5 0 0 0-.6.2c-.1.2 0 .4.1.6a23 23 0 0 0 21.9.5c.2 0 .3-.3.2-.5Z" data-v-d1ac2910=""></path>
+            <path d="M12.9 22.9h-.2c-.2-.2-.3-.4-.2-.6 2-4.4 5.2-8 9.3-10.4.2-.1.5 0 .6.2.2.2 0 .4-.1.6-4 2.3-7.1 5.7-9 10l-.4.2Z" data-v-d1ac2910=""></path>
+            <path d="M50.3 17.3c-.1 0-.3 0-.3-.2A22 22 0 0 0 36.5 10c-.2 0-.4-.3-.3-.5 0-.3.2-.4.5-.4a23 23 0 0 1 14 7.5v.7h-.4Z" data-v-d1ac2910=""></path>
+          </svg>
+          <!--v-if-->
+          <!--v-if-->
+        </a></div>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+  </div>
+</header>"
+`;

package/src/components/HeaderBar/tests/useHeaderResponsiveMode.spec.ts

@@ -0,0 +1,26 @@
+import { it, describe, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import useHeaderResponsiveMode from '../useHeaderResponsiveMode'
+
+describe('useHeaderResponsiveMode', () => {
+	it('should return the correct responsive mode', async () => {
+		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
+		window.happyDOM.setInnerWidth(600)
+		const wrapper = mount({
+			template: `<div :class="{'is-desktop': isDesktop}"></div>`,
+			setup() {
+				const { isDesktop } = useHeaderResponsiveMode()
+				return { isDesktop }
+			},
+		})
+
+		expect(wrapper.find('.is-desktop').exists()).toBe(false)
+
+		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
+		window.happyDOM.setInnerWidth(1200)
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('.is-desktop').exists()).toBe(true)
+
+		wrapper.unmount()
+	})
+})

package/src/components/HeaderBar/tests/useScrollDirection.spec.ts

@@ -0,0 +1,34 @@
+import { it, describe, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import useScrollDirection from '../useScrollDirection'
+
+describe('useScrollDirection', () => {
+	it('should return the correct scroll direction', async () => {
+		const mockScrollTop = vi.spyOn(document.documentElement, 'scrollTop', 'get')
+
+		const wrapper = mount({
+			template: `<div :class="scrollDirection"></div>`,
+			setup() {
+				const { scrollDirection } = useScrollDirection()
+				return { scrollDirection }
+			},
+		})
+		mockScrollTop.mockReturnValue(0)
+		window.dispatchEvent(new CustomEvent('scroll'))
+
+		expect(wrapper.find('div').classes()).toEqual([])
+
+		mockScrollTop.mockReturnValue(100)
+		window.dispatchEvent(new CustomEvent('scroll'))
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('div').classes()).toEqual(['bottom'])
+
+		mockScrollTop.mockReturnValue(50)
+		window.dispatchEvent(new CustomEvent('scroll'))
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('div').classes()).toEqual(['top'])
+
+		vi.clearAllMocks()
+		wrapper.unmount()
+	})
+})

package/src/components/HeaderBar/useHeaderResponsiveMode.ts

@@ -0,0 +1,25 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+import { headerBreakpoint } from './consts'
+
+export default function useIsDesktop() {
+	const isDesktop = ref(false)
+
+	let mediaQuery: MediaQueryList
+
+	function handleChange(e: MediaQueryListEvent) {
+		isDesktop.value = e.matches
+	}
+
+	onMounted(() => {
+		mediaQuery = window.matchMedia(`(min-width: ${headerBreakpoint}px)`)
+		isDesktop.value = mediaQuery.matches
+
+		mediaQuery.addEventListener('change', handleChange)
+	})
+
+	onUnmounted(() => {
+		mediaQuery.removeEventListener('change', handleChange)
+	})
+
+	return { isDesktop }
+}

package/src/components/HeaderBar/useScrollDirection.ts

@@ -0,0 +1,26 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export default function useScrollDirection() {
+	const lastYPos = ref<number | null>(null)
+	const scrollDirection = ref<'' | 'top' | 'bottom'>('')
+
+	function handleScroll() {
+		const yPos = document.documentElement.scrollTop
+		if (lastYPos.value === null) {
+			lastYPos.value = yPos
+			return ''
+		}
+		scrollDirection.value = yPos >= lastYPos.value ? 'bottom' : 'top'
+		lastYPos.value = yPos
+	}
+
+	onMounted(() => {
+		window.addEventListener('scroll', handleScroll)
+	})
+
+	onUnmounted(() => {
+		window.removeEventListener('scroll', handleScroll)
+	})
+
+	return { scrollDirection }
+}

package/src/components/HeaderLoading/HeaderLoading.mdx

@@ -0,0 +1,28 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import * as HeaderLoading from './HeaderLoading.stories';
+
+<Meta of={HeaderLoading} />
+
+# HeaderLoading
+
+L’élément `HeaderLoading` est une extension du composant `VSkeletonLoader` de Vuetify, il est utilisé pour afficher un élément de chargement avec des dimensions personnalisées.
+
+<Canvas of={HeaderLoading.Default} />
+
+# API
+
+<Controls of={HeaderLoading.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import HeaderLoading from '@cnamts/synapse'
+</script>
+
+<template>
+	<div class="pa-4">
+		<HeaderLoading width="200px" />
+	</div>
+</template>
+`} />

package/src/components/HeaderLoading/HeaderLoading.stories.ts

@@ -0,0 +1,62 @@
+import HeaderLoading from './HeaderLoading.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta: Meta<typeof HeaderLoading> = {
+	title: 'Composants/Structure/HeaderLoading',
+	component: HeaderLoading,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['heading', 'itemsNumber', 'row'] },
+	},
+	argTypes: {
+		width: { control: 'text' },
+		height: { control: 'text' },
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<HeaderLoading :width="width" :height="height" />
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import HeaderLoading from '@cnamts/synapse'
+					
+					const width = '100px'
+					const height = '1rem'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		width: '100px',
+		height: '1rem',
+	},
+	render: (args) => {
+		return {
+			components: { HeaderLoading },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+                    <HeaderLoading v-bind="args" />
+				</div>
+			`,
+		}
+	},
+}

package/src/components/HeaderLoading/HeaderLoading.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+	import { VSkeletonLoader } from 'vuetify/components/VSkeletonLoader'
+
+	const props = defineProps({
+		width: {
+			type: String,
+			default: '100px',
+		},
+		height: {
+			type: String,
+			default: '1rem',
+		},
+	})
+</script>
+
+<template>
+	<VSkeletonLoader
+		v-bind="$attrs"
+		:width="props.width"
+		:height="props.height"
+		type="heading"
+		aria-hidden="true"
+		class="vd-header-loading"
+	/>
+</template>
+
+<style lang="scss" scoped>
+.vd-header-loading :deep() {
+  background: transparent;
+  .v-skeleton-loader__heading {
+    width: 100%;
+    height: 100%;
+    border-radius: 35px;
+    margin: 0;
+    background: rgba(grey, var(--v-border-opacity));
+  }
+}
+
+// Remove border radius when tile option is activated
+.vd-header-loading.v-skeleton-loader--tile :deep() {
+  .v-skeleton-loader__heading {
+    border-radius: 0;
+  }
+}
+</style>

package/src/components/HeaderLoading/tests/HeaderLoading.spec.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import HeaderLoading from '../HeaderLoading.vue'
+
+describe('HeaderLoading', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(HeaderLoading, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				width: '100px',
+				height: '1rem',
+			},
+		})
+
+		const elExists = wrapper.find('.vd-header-loading').exists()
+		expect(elExists).toBe(true)
+	})
+})

package/src/components/HeaderNavigationBar/HeaderNavigationBar.mdx

@@ -0,0 +1,128 @@
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+import * as HeaderNavigationBarStories from "./HeaderNavigationBar.stories";
+
+<Meta of={HeaderNavigationBarStories} />
+
+# HeaderNavigationBar
+
+Le composant `HeaderNavigationBar` est un composant de navigation qui permet de naviguer entre les différentes pages de l'application.
+
+Il est basé sur les composants `HeaderBar` et `HeaderBurgerMenu` du design system.
+
+Ce composant propose un navigation à l'aide d'un menu horizontal en mode desktop ce qui peut être util pour les produits ayant peut de page a destination des agents.
+
+Si vous n'avez pas besoin du menu horizontal, vous devriez utiliser le composant `HeaderBar` directement.
+
+Il est conseillé de ne pas utiliser le menu horizontal pour afficher plus de 6 liens. Vous pouvez configurer le nombre de lien affiché dans le menu horizontal en utilisant la prop `maxHorizontalMenuItems`. Au-delà de ce chiffre, le menu passera en mode burger. Par défaut, le menu horizontal affiche au maximum six items.
+
+
+<Canvas of={HeaderNavigationBarStories.Default} />
+
+## API
+
+<Controls of={HeaderNavigationBarStories.Default} />
+
+
+## Exemple d'utilisation
+
+<Source
+  dark
+  code={`
+<HeaderNavigationBar
+	home-aria-label="Home"
+	service-title="Synapse"
+	service-subtitle="design system de la CNAM"
+	:sticky="true"
+	:items="[
+		{ label: 'Home', to: '/' },
+		{ label: 'About', to: '/about' },
+		{ label: 'Services', to: '/services' },
+		{ label: 'Contact', to: '/contact' },
+		{ label: 'Blog', to: '/blog' },
+	]"
+/>
+`}
+/>
+
+## Les slots
+
+### HeaderSide
+
+Le slot `header-side` permet d'ajouter du contenu à droite du header. Il est possible d'ajouter plusieurs éléments dans ce slot.
+Il sera principalement utilisé pour ajouter un bouton de connexion, d'accès à un compte ou de recherche.
+Il est nécessaire de faire attention à la place que prendront les éléments en mode mobile et de prévoir un mode réduit ou bien de les déporter dans le menu burger.
+
+<Source dark code={`
+<script setup lang="ts">
+	import { mdiMagnify, mdiAccountCircleOutline } from '@mdi/js'
+</script>
+
+<template>
+  <HeaderNavigationBar>
+	<template #header-side>
+	  <div class="d-flex justify-center h-100 ga-4 pr-4">
+		<VBtn
+			variant="text"
+			:prepend-icon="mdiMagnify"
+			color="primary"
+		>
+			Rechercher
+		</VBtn>
+		<VBtn
+			color="primary"
+			:prepend-icon="mdiAccountCircleOutline"
+		>
+			Login
+		</VBtn>
+	</div>
+	</template>
+  </HeaderNavigationBar>
+</template>
+`} />
+
+### Les slots concernant le menu
+
+
+<Canvas of={HeaderNavigationBarStories.WithSlots} />
+
+#### le slot `logo-brand-section`
+
+<Canvas of={HeaderNavigationBarStories.WithLogoSlot} />
+
+#### Le menu horizontal
+
+Quand le menu est en mode horizontal, les slots `navigation-bar-prepend` et `navigation-bar-append` permettent d'ajouter du contenu avant et après le menu.
+
+Le slot `navigation-bar-content` quant à lui, remplace les items du menu tel que généré avec la props `items`. Il n'écrase pas les slots `navigation-bar-prepend` et `navigation-bar-append`.
+
+##### Slot `Navigation-bar-prepend`
+
+<Canvas of={HeaderNavigationBarStories.WithNavigationBarPrependSlot} />
+
+
+##### Slot `Navigation-bar-append`
+
+<Canvas of={HeaderNavigationBarStories.WithNavigationBarAppendSlot} />
+
+
+#### Les slots concernant le menu burger
+
+Le menu burger est généré automatiquement à partir des items passés en props, il utilise en interne le composant `HeaderBurgerMenu`.
+
+
+les slots `burger-menu-prepend` et `burger-menu-append` permettent d'ajouter du contenu en haut et en bas du menu burger.
+
+
+Le slot `burger-menu-content` permet de remplacer le contenu du menu burger. Il n'écrase pas les slots `burger-menu-prepend` et `burger-menu-append` et permet d'utiliser les composants `HeaderMenuItem` et `HeaderMenuGroup` pour construire le menu.
+Pour plus de d'information sur la manière de construire un menu avec le composant `HeaderBurgerMenu`, vous pouvez consulter la documentation de ce [composant](/docs/components-headerbar-headerburgermenu--docs).
+
+##### Slot `burger-menu-append`
+
+<Canvas of={HeaderNavigationBarStories.WithNavigationMenuAppendSlot} />
+
+
+## Configuration des composants Vuetify internes.
+
+Le composant `HeaderNavigationBar` utilise les composants `VSheet`, `VTabs` et `VTab` de Vuetify pour construire le menu horizontal. Il est possible de configurer ces composants en utilisant la props `vuetifyOptions`.
+
+<Canvas of={HeaderNavigationBarStories.WithVuetifyOptions} />