@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.stories.ts

@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import HeaderBar from '../../HeaderBar.vue'
+import HeaderBurgerMenu from '../HeaderBurgerMenu.vue'
+import HeaderMenuItem from '../HeaderMenuItem/HeaderMenuItem.vue'
+import HeaderMenuSection from '../HeaderMenuSection/HeaderMenuSection.vue'
+import HeaderSubMenu from './HeaderSubMenu.vue'
+
+const meta = {
+	title: 'Composants/Structure/HeaderBar/HeaderBurgerMenu/HeaderSubMenu',
+	component: HeaderSubMenu,
+	argTypes: {
+		title: {
+			control: { type: 'text' },
+			description: 'Titre du sous-menu',
+			table: {
+				type: { summary: '{}' },
+			},
+		},
+		default: {
+			control: { type: 'text' },
+			description: 'Contenu du sous-menu, construit avec des composants `HeaderMenuSection`',
+			table: {
+				type: { summary: '{}' },
+			},
+		},
+	},
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof HeaderSubMenu>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		title: 'Menu de premier niveau',
+	},
+	render: (args) => {
+		return {
+			components: { HeaderMenuItem, HeaderBurgerMenu, HeaderBar, HeaderSubMenu, HeaderMenuSection },
+			setup() {
+				return { args }
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderBurgerMenu>
+							<HeaderMenuSection>
+								<HeaderMenuItem>
+									<a>Item</a>
+								</HeaderMenuItem>
+								<HeaderMenuItem>
+									<a>Item</a>
+								</HeaderMenuItem>
+								<headerMenuItem>
+									<HeaderSubMenu v-bind="args">
+										<template #title>
+											{{ args.title }}
+										</template>
+										<HeaderMenuItem>
+											<a>Item</a>
+										</HeaderMenuItem>
+									</HeaderSubMenu>
+								</headerMenuItem>
+								<HeaderMenuItem>
+									<a>Item</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+						</HeaderBurgerMenu>
+					</template>
+				</HeaderBar>
+			`,
+		}
+	},
+	play: async ({ canvasElement }) => {
+		const menuBtn = canvasElement.querySelector('button')
+		setTimeout(() => {
+			menuBtn!.click()
+		}, 1000)
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderBurgerMenu>
+							<HeaderMenuSection>
+								<HeaderMenuItem>
+									<a>Item</a>
+								</HeaderMenuItem>
+								<HeaderMenuItem>
+									<a>Item</a>
+								</HeaderMenuItem>
+								<headerMenuItem>
+									<HeaderSubMenu>
+										<template #title>
+											Menu de premier niveau
+										</template>
+										<HeaderMenuItem>
+											<a>Item</a>
+										</HeaderMenuItem>
+									</HeaderSubMenu>
+								</headerMenuItem>
+								<HeaderMenuItem>
+									<a>Item</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+						</HeaderBurgerMenu>
+					</template>
+				</HeaderBar>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup>
+					import { HeaderBurgerMenu, HeaderBar, HeaderMenuSection, HeaderMenuItem, HeaderSubMenu } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+}
+
+export const Deep: Story = {
+	args: {
+		title: 'Menu de deuxième niveau',
+	},
+	render: (args) => {
+		return {
+			components: { HeaderMenuItem, HeaderBurgerMenu, HeaderBar, HeaderSubMenu, HeaderMenuSection },
+			setup() {
+				return { args }
+			},
+			template: `
+			<Template>
+				<HeaderBar>
+					<template #menu>
+						<HeaderBurgerMenu>
+							<HeaderMenuSection>
+								<HeaderMenuItem>
+									<a>Item 1</a>
+								</HeaderMenuItem>
+								<HeaderMenuItem>
+									<a>Item 2</a>
+								</HeaderMenuItem>
+								<headerMenuItem>
+									<HeaderSubMenu>
+										<template #title>
+											Menu de premier niveau
+										</template>
+										<HeaderMenuItem>
+											<a>Item 2.1</a>
+										</HeaderMenuItem>
+										<HeaderMenuItem>
+											<a>Item 2.2</a>
+										</HeaderMenuItem>
+										<HeaderMenuItem>
+											<HeaderSubMenu v-bind="args">
+												<template #title>
+													{{ args.title }}
+												</template>
+												<HeaderMenuItem>
+													<a>Item 3.1</a>
+												</HeaderMenuItem>
+												<HeaderMenuItem>
+													<a>Item 3.2</a>
+												</HeaderMenuItem>
+											</HeaderSubMenu>
+										</HeaderMenuItem>
+									</HeaderSubMenu>
+								</headerMenuItem>
+								<HeaderMenuItem>
+									<a>Item 3</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+						</HeaderBurgerMenu>
+					</template>
+				</HeaderBar>
+			</Template>
+			`,
+		}
+	},
+	play: async ({ canvasElement }) => {
+		const menuBtn = canvasElement.querySelector('button')
+		await new Promise(resolve => setTimeout(resolve, 1000))
+		await menuBtn!.click()
+		await new Promise(resolve => setTimeout(resolve, 500))
+		const subMenuBtn = document.querySelector<HTMLElement>('.sub-menu-btn')
+		await subMenuBtn!.click()
+		await new Promise(resolve => setTimeout(resolve, 500))
+		const subMenuBtn2 = document.querySelector<HTMLElement>('.sub-menu .sub-menu .sub-menu-btn')
+		await subMenuBtn2!.click()
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<Template>
+					<HeaderBar>
+						<template #menu>
+							<HeaderBurgerMenu>
+								<HeaderMenuSection>
+									<HeaderMenuItem>
+										<a>Item 1</a>
+									</HeaderMenuItem>
+									<HeaderMenuItem>
+										<a>Item 2</a>
+									</HeaderMenuItem>
+									<headerMenuItem>
+										<HeaderSubMenu>
+											<template #title>
+												Menu de premier niveau
+											</template>
+											<HeaderMenuItem>
+												<a>Item 2.1</a>
+											</HeaderMenuItem>
+											<HeaderMenuItem>
+												<a>Item 2.2</a>
+											</HeaderMenuItem>
+											<HeaderMenuItem>
+												<HeaderSubMenu>
+													<template #title>
+														Menu de deuxième niveau
+													</template>
+													<HeaderMenuItem>
+														<a>Item 3.1</a>
+													</HeaderMenuItem>
+													<HeaderMenuItem>
+														<a>Item 3.2</a>
+													</HeaderMenuItem>
+												</HeaderSubMenu>
+											</HeaderMenuItem>
+										</HeaderSubMenu>
+									</headerMenuItem>
+									<HeaderMenuItem>
+										<a>Item 3</a>
+									</HeaderMenuItem>
+								</HeaderMenuSection>
+							</HeaderBurgerMenu>
+						</template>
+					</HeaderBar>
+				</Template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup>
+					import { HeaderBurgerMenu, HeaderBar, HeaderMenuSection, HeaderMenuItem, HeaderSubMenu } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+}

package/src/components/HeaderBar/{HeaderComplexMenu → HeaderBurgerMenu}/HeaderSubMenu/HeaderSubMenu.vue

@@ -8,8 +8,10 @@
 	const submenuId = useId()
 	const btnId = `${submenuId}-btn`
 
-	const registerSubMenu = inject<((r: DeepReadonly<Ref<boolean>>, c: () => void) => void) | undefined>(registerSubMenuKey, undefined)
-	if (!registerSubMenu) throw new Error('The HeaderSubMenu component must be used inside a HeaderComplexMenu component')
+	const registerSubMenu = inject<
+		((r: DeepReadonly<Ref<boolean>>, c: () => void) => void) | undefined
+	>(registerSubMenuKey, undefined)
+	if (!registerSubMenu) throw new Error('The HeaderSubMenu component must be used inside a HeaderBurgerMenu component')
 	registerSubMenu(menuOpen, () => {
 		menuOpen.value = false
 	})
@@ -114,6 +116,13 @@
 			border-bottom: 1px solid $menu-border-color;
 			color: #000;
 			background-color: transparent;
+
+			&:hover {
+				color: #000;
+				> :deep(*) {
+					color: #000 !important;
+				}
+			}
 		}
 
 		.sub-menu--open > .sub-menu-btn > :deep(.sub-menu-btn__icon) {
@@ -131,17 +140,22 @@
 			background-color: $primary-base;
 			color: $neutral-white;
 			transition: color 0.15s linear, background-color 0.15s linear;
+
+			> :deep(*) {
+				color: $neutral-white !important;
+			}
 		}
 
 		.sub-menu-content-wrapper {
 			position: absolute;
 			top: 0;
+			bottom: 0;
 			left: $menu-width;
 		}
 
 		.sub-menu-content {
 			width: $menu-width + 1px;
-			height: $menu-height;
+			height: 100%;
 			background: #f9f9f9;
 			border-left: 1px solid $menu-border-color;
 			overflow-y: auto;

package/src/components/HeaderBar/{HeaderComplexMenu → HeaderBurgerMenu}/HeaderSubMenu/tests/HeaderSubMenu.spec.ts

@@ -58,6 +58,6 @@ describe('HeaderSubMenu', () => {
 			},
 		})
 
-		expect(mountWithoutInject).toThrowError('The HeaderSubMenu component must be used inside a HeaderComplexMenu component')
+		expect(mountWithoutInject).toThrowError('The HeaderSubMenu component must be used inside a HeaderBurgerMenu component')
 	})
 })

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

@@ -0,0 +1,180 @@
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi, afterAll } from 'vitest'
+import { registerHeaderMenuKey } from '../../consts'
+import HeaderBurgerMenu from '../HeaderBurgerMenu.vue'
+import { defineComponent, toRef } from 'vue'
+
+describe('HeaderBurgerMenu', () => {
+	const BtnTestComponent = defineComponent({
+		props: {
+			modelValue: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		setup(props) {
+			return { open: toRef(props, 'modelValue'), focus: () => {} }
+		},
+		template: `<button @click="$emit('update:modelValue', !open)">Test</button>`,
+	})
+
+	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(HeaderBurgerMenu, {
+			global: {
+				plugins: [vuetify],
+				provide: {
+					[registerHeaderMenuKey]: () => {},
+				},
+				stubs: {
+					teleport: true,
+					HeaderMenuBtn: BtnTestComponent,
+				},
+			},
+			slots: {
+				default: '<div>Default slot</div>',
+			},
+			attachTo: document.body,
+		})
+
+		expect(wrapper.find('.overlay').exists()).toBe(false)
+		const btn = wrapper.find('button')
+		await btn.trigger('click')
+		expect(wrapper.find('.overlay').exists()).toBe(true)
+		expect(wrapper.find('.overlay').html()).toMatchSnapshot()
+
+		wrapper.unmount()
+	})
+
+	it('should close the menu when clicking outside', async () => {
+		const wrapper = mount(HeaderBurgerMenu, {
+			global: {
+				plugins: [vuetify],
+				provide: {
+					[registerHeaderMenuKey]: () => {},
+				},
+				stubs: {
+					teleport: true,
+					HeaderMenuBtn: BtnTestComponent,
+				},
+			},
+			slots: {
+				default: '<div>Default slot</div>',
+			},
+			attachTo: document.body,
+		})
+
+		const btn = wrapper.find('button')
+
+		await btn.trigger('click')
+		expect(wrapper.find('.overlay').exists()).toBe(true)
+
+		await wrapper.find('.overlay').trigger('click')
+		expect(wrapper.find('.overlay').exists()).toBe(false)
+
+		wrapper.unmount()
+	})
+
+	it('should not close the menu when clicking inside', async () => {
+		const wrapper = mount(HeaderBurgerMenu, {
+			global: {
+				plugins: [vuetify],
+				provide: {
+					[registerHeaderMenuKey]: () => {},
+				},
+				stubs: {
+					teleport: true,
+					HeaderMenuBtn: BtnTestComponent,
+				},
+			},
+			slots: {
+				default: '<div>Default slot</div>',
+			},
+			attachTo: document.body,
+		})
+
+		const btn = wrapper.find('button')
+		await btn.trigger('click')
+		expect(wrapper.find('.overlay').exists()).toBe(true)
+
+		await wrapper.find('.header-menu').trigger('click')
+		expect(wrapper.find('.overlay').exists()).toBe(true)
+
+		wrapper.unmount()
+	})
+
+	it('should listen to the button to open and close the menu', async () => {
+		const wrapper = mount(HeaderBurgerMenu, {
+			global: {
+				plugins: [vuetify],
+				provide: {
+					[registerHeaderMenuKey]: () => {},
+				},
+				stubs: {
+					Teleport: true,
+					HeaderMenuBtn: BtnTestComponent,
+				},
+			},
+			slots: {
+				default: '<div>Default slot</div>',
+			},
+			attachTo: document.body,
+		})
+
+		const btn = wrapper.find('button')
+		await btn.trigger('click')
+		expect(wrapper.find('.overlay').exists()).toBe(true)
+
+		await btn.trigger('click')
+		expect(wrapper.find('.overlay').exists()).toBe(false)
+
+		wrapper.unmount()
+	})
+
+	it('reposition the menu when the size of the window changes', async () => {
+		const wrapper = mount(HeaderBurgerMenu, {
+			global: {
+				plugins: [vuetify],
+				provide: {
+					[registerHeaderMenuKey]: () => {},
+				},
+				stubs: {
+					Teleport: true,
+					HeaderMenuBtn: BtnTestComponent,
+				},
+			},
+			attachTo: document.body,
+		})
+
+		const btn = wrapper.find('button')
+		await btn.trigger('click')
+		const menuBtnWrapper = wrapper.find('[role="dialog"]>div')
+
+		vi.spyOn(menuBtnWrapper.element, 'getBoundingClientRect').mockReturnValue(new DOMRect(50, 50, 0, 0))
+
+		window.dispatchEvent(new Event('resize'))
+		await wrapper.vm.$nextTick()
+
+		let renderStyle = wrapper.find('.menu-wrapper').attributes('style')
+		expect(renderStyle).toContain('left: 50px; top: 50px;')
+
+		vi.spyOn(menuBtnWrapper.element, 'getBoundingClientRect').mockReturnValue(new DOMRect(40, 60, 0, 0))
+
+		window.dispatchEvent(new Event('resize'))
+		await wrapper.vm.$nextTick()
+
+		renderStyle = wrapper.find('.menu-wrapper').attributes('style')
+		expect(renderStyle).toContain('left: 40px; top: 60px;')
+
+		wrapper.unmount()
+	})
+})

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

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HeaderBurgerMenu > should render the component 1`] = `
+"<div data-v-18e6540e="" class="overlay">
+  <div data-v-18e6540e="" role="menu" class="menu-wrapper" style="left: 0px; top: 0px; height: calc(100vh - 0px - 48px);"><button data-v-18e6540e="">Test</button>
+    <nav data-v-18e6540e="" id="header-menu-wrapper" class="header-menu-wrapper" role="navigation" aria-label="Menu public">
+      <div data-v-18e6540e="" class="header-menu">
+        <div>Default slot</div>
+      </div>
+    </nav>
+  </div>
+</div>"
+`;

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

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HeaderBurgerMenu > should render the component 1`] = `
+"<div data-v-18e6540e="" class="overlay">
+  <div data-v-18e6540e="" role="menu" class="menu-wrapper" style="left: 0px; top: 0px; height: calc(100vh - 0px - 48px);"><button data-v-18e6540e="">Test</button>
+    <nav data-v-18e6540e="" id="header-menu-wrapper" class="header-menu-wrapper" role="navigation" aria-label="Menu public">
+      <div data-v-18e6540e="" class="header-menu">
+        <div>Default slot</div>
+      </div>
+    </nav>
+  </div>
+</div>"
+`;

package/src/components/HeaderBar/HeaderLogo/HeaderLogo.vue

@@ -1,59 +1,92 @@
 <script lang="ts" setup>
+	import { computed, getCurrentInstance } from 'vue'
+	import type { RouteLocationRaw } from 'vue-router'
 	import { useTheme } from 'vuetify'
 	import useHeaderResponsiveMode from '../useHeaderResponsiveMode'
 	import { locales } from './locales'
 	import LogoMobile from './logos/Logo-mobile.vue'
 	import Logo from './logos/Logo.vue'
 
-	withDefaults(defineProps<{
+	const props = withDefaults(defineProps<{
 		ariaLabel?: string
 		serviceTitle?: string
 		serviceSubtitle?: string
+		homeLink?: {
+			ariaLabel?: string
+			to?: RouteLocationRaw
+			href?: string
+		}
 	}>(), {
 		ariaLabel: locales.ariaLabel,
 		serviceTitle: undefined,
 		serviceSubtitle: undefined,
+		homeLink: () => ({
+			href: '/',
+		}),
 	})
 
-	const slot = defineSlots<{
-		serviceTitle?(): void
+	defineSlots<{
+		'brand-content'?(): void
 	}>()
 
 	const theme = useTheme()
 	const primary = theme.current.value.colors.primary
 	const { isDesktop } = useHeaderResponsiveMode()
+
+	const routeType = computed(() => {
+		if (props.homeLink?.to) {
+			const componentsRegistered = getCurrentInstance()?.appContext?.components
+			const hasRouterLink = componentsRegistered && 'RouterLink' in componentsRegistered
+			if (hasRouterLink) {
+				return 'router-link'
+			}
+			return 'div'
+		}
+		if (props.homeLink?.href) {
+			return 'a'
+		}
+		return 'div'
+	})
 </script>
 
 <template>
-	<div class="logo">
+	<component
+		:is="routeType"
+		v-bind="{
+			to: 'to' in homeLink ? homeLink?.to : undefined,
+			href: 'href' in homeLink ? homeLink?.href : undefined,
+			'aria-label': 'aria-label' in homeLink ? homeLink?.['aria-label'] : undefined,
+		}"
+		class="logo"
+	>
 		<Logo
 			v-if="isDesktop"
-			:aria-label
+			:aria-label="props.ariaLabel"
 		/>
 		<LogoMobile
 			v-else
-			:aria-label
+			:aria-label="props.ariaLabel"
 		/>
 
-		<svg
-			v-if="slot?.serviceTitle || serviceTitle"
-			:width="22"
-			:height="64"
-			:fill="primary"
-			role="img"
-			focusable="false"
-			aria-hidden="true"
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 22 64"
-			class="vd-divider"
-		>
-			<path d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z" />
-		</svg>
-
 		<slot
-			name="serviceTitle"
+			name="brand-content"
 		>
-			<div if="serviceTitle">
+			<svg
+				v-if="serviceTitle"
+				:width="22"
+				:height="64"
+				:fill="primary"
+				role="img"
+				focusable="false"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 22 64"
+				class="vd-divider"
+			>
+				<path d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z" />
+			</svg>
+
+			<div v-if="serviceTitle">
 				<div class="service-title">
 					{{ serviceTitle }}
 				</div>
@@ -65,18 +98,22 @@
 				</div>
 			</div>
 		</slot>
-	</div>
+	</component>
 </template>
 
 <style scoped lang="scss">
 @use '../consts' as *;
+@use '@/assets/tokens.scss' as *;
 
 .logo {
 	display: flex;
 	height: 52px;
 	align-items: center;
-	color: v-bind(primary);
+	color: $primary-base;
 	line-height: 1.45;
+	font-family: 'Cabin', 'Arial', 'Helvetica', sans-serif;
+	text-decoration: none;
+	cursor: pointer;
 }
 
 .logo :deep(svg) {