@cnamts/synapse 0.0.2-alpha → 0.0.3-alpha

package/src/components/HeaderBar/HeaderComplexMenu/HeaderComplexMenu.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+	import { computed, inject, nextTick, onMounted, onUnmounted, readonly, ref, watch, type CSSProperties, type Ref } from 'vue'
+	import HeaderMenuBtn from '../HeaderMenuBtn/HeaderMenuBtn.vue'
+	import { registerHeaderMenuKey } from '../consts'
+	import locals from './locals'
+	import useHandleSubMenus from './useHandleSubMenus'
+
+	const menuWrapper = ref<HTMLElement | null>(null)
+	const menuBtnWrapper = ref<HTMLDivElement | null>(null)
+	const outerBtn = ref<HTMLElement | null>(null)
+	const innerBtn = ref<HTMLElement | null>(null)
+	const menuLeft = ref(0)
+	const menuTop = ref(0)
+
+	function positionMenu() {
+		// todo debounce
+		menuLeft.value = menuBtnWrapper.value!.getBoundingClientRect().left
+		menuTop.value = menuBtnWrapper.value!.getBoundingClientRect().top
+	}
+
+	onMounted(() => {
+		positionMenu()
+		window.addEventListener('scroll', positionMenu)
+		window.addEventListener('resize', positionMenu)
+		window.addEventListener('click', handleClickOutside, { capture: true })
+	})
+
+	onUnmounted(() => {
+		window.removeEventListener('scroll', positionMenu)
+		window.removeEventListener('resize', positionMenu)
+		window.removeEventListener('click', handleClickOutside, { capture: true })
+	})
+
+	const menuOpen = ref(false)
+
+	watch(menuOpen, async (newVal) => {
+		document.documentElement.style.overflow = newVal ? 'hidden' : 'auto'
+		document.body.style.overflow = newVal ? 'hidden' : 'auto'
+
+		if (newVal) {
+			await nextTick()
+			innerBtn.value!.focus()
+		}
+		else {
+			outerBtn.value!.focus()
+		}
+	})
+
+	const menuStyle = computed<CSSProperties>(() => ({
+		left: `${menuLeft.value}px`,
+		top: `${menuTop.value}px`,
+	}))
+
+	function handleClickOutside(event: MouseEvent | KeyboardEvent) {
+		if (!menuOpen.value) return
+
+		// do not close menu if click is inside the menu
+		let walkElement = event.target as HTMLElement | null
+		while (walkElement && walkElement !== document.body) {
+			if (walkElement === menuWrapper.value) return
+			walkElement = walkElement.parentElement
+		}
+
+		menuOpen.value = false
+	}
+
+	const { haveOpenSubMenu } = useHandleSubMenus(readonly(menuOpen))
+
+	const registerHeaderMenu = inject<(menuOpen: Ref<boolean>) => void>(registerHeaderMenuKey)
+	if (registerHeaderMenu) registerHeaderMenu(menuOpen)
+</script>
+<template>
+	<div
+		role="dialog"
+		aria-modal="true"
+		:aria-label="locals.mainMenu"
+	>
+		<div ref="menuBtnWrapper">
+			<HeaderMenuBtn
+				ref="outerBtn"
+				v-model="menuOpen"
+			/>
+		</div>
+		<Transition name="menu">
+			<div
+				v-show="menuOpen"
+				class="overlay"
+			>
+				<div
+					ref="menuWrapper"
+					role="menu"
+					class="menu-wrapper"
+					:style="menuStyle"
+				>
+					<HeaderMenuBtn
+						ref="innerBtn"
+						v-model="menuOpen"
+					/>
+					<nav
+						id="header-menu-wrapper"
+						class="header-menu-wrapper"
+						:class="{
+							'header-menu-wrapper--submenu-open': haveOpenSubMenu,
+						}"
+						role="navigation"
+						:aria-label="locals.publicMenu"
+					>
+						<div class="header-menu">
+							<slot />
+						</div>
+					</nav>
+				</div>
+			</div>
+		</Transition>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens.scss' as *;
+@use '../consts' as *;
+
+.overlay {
+	inset: 0;
+	position: fixed;
+	z-index: 1000;
+	background-color: rgba(3, 16, 37, .5);
+}
+
+.menu-wrapper {
+	height: 100dvh;
+	background-color: $neutral-white;
+	display: flex;
+	flex-direction: column;
+}
+
+.header-menu-wrapper {
+	height: calc(100% - $header-height);
+	display: grid;
+	position: relative;
+	overflow: auto;
+}
+
+.header-menu-wrapper--submenu-open {
+	overflow: clip;
+}
+
+@media screen and (min-width: $header-breakpoint) {
+	.menu-wrapper {
+		position: absolute;
+		background-color: transparent;
+	}
+
+	.header-menu-wrapper {
+		height: $menu-height;
+		width: $menu-width;
+		overflow: visible;
+	}
+
+	.header-menu {
+		background-color: $neutral-white;
+		overflow-y : auto;
+		overflow-x: hidden;
+		height: $menu-height;
+	}
+}
+
+.menu-enter-active {
+	transition: opacity 0.15s ease-in;
+
+	.header-menu-wrapper {
+		transition: transform 0.1s ease-in;
+	}
+}
+
+.menu-leave-active {
+	transition: opacity 0.15s ease-out;
+
+	.header-menu-wrapper {
+		transition: transform 0.1s ease-out;
+	}
+}
+
+.menu-enter-from, .menu-leave-to {
+	opacity: 0;
+}
+
+@media screen and (min-width: $header-breakpoint) {
+	.menu-enter-from, .menu-leave-to {
+		.header-menu-wrapper {
+			transform: translateY(10px);
+		}
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.menu-enter-active, .menu-leave-active {
+		transition: opacity 0s;
+	}
+	.menu-enter-from, .menu-leave-to {
+		.header-menu-wrapper {
+			transform: none;
+		}
+	}
+}
+</style>

package/src/components/HeaderBar/HeaderComplexMenu/HeaderMenuItem/HeaderMenuItem.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import HeaderMenuItem from './HeaderMenuItem.vue'
+import HeaderMenu from '../HeaderComplexMenu.vue'
+import HeaderBar from '../../HeaderBar.vue'
+
+const meta = {
+	title: 'Components/HeaderBar/HeaderComplexMenu/HeaderMenuItem',
+	component: HeaderMenuItem,
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof HeaderMenuItem>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		default: 'lorem ipsum',
+	},
+	render: (args) => {
+		return {
+			components: { HeaderMenuItem, HeaderMenu, HeaderBar },
+			setup() {
+				return { args }
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderMenu>
+							<HeaderMenuSection>
+								<HeaderMenuItem>
+									<a>{{ args.default }}</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+						</HeaderMenu>
+					</template>
+				</HeaderBar>
+			`,
+		}
+	},
+	play: async ({ canvasElement }) => {
+		const menuBtn = canvasElement.querySelector('button')
+		setTimeout(() => {
+			menuBtn!.click()
+		}, 1000)
+	},
+}

package/src/components/HeaderBar/HeaderComplexMenu/HeaderMenuItem/HeaderMenuItem.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+	<li class="header-menu-item">
+		<slot />
+	</li>
+</template>
+
+<style lang="scss" scoped>
+	@use "@/assets/tokens.scss" as *;
+
+	.header-menu-item {
+		color: $primary-base;
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+		min-height: 44px; // accessibility requirement
+		font-weight: 700;
+
+		> :deep(a) {
+			display: flex;
+			flex-direction: column;
+			padding: 16px 50px 16px 20px;
+			text-decoration: none;
+			color: currentColor;
+
+			&:hover {
+				text-decoration: underline;
+			}
+
+			&:visited {
+				color: currentColor;
+			}
+
+			&::first-letter {
+				text-transform: uppercase;
+			}
+		}
+	}
+
+	.header-menu-item:hover {
+		background-color: $primary-base;
+		color: $neutral-white;
+
+		> :deep(a > *) {
+			color: $neutral-white !important;
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import HeaderMenuItem from '../HeaderMenuItem.vue'
+
+describe('HeaderMenuItem', () => {
+	it('should render the component', async () => {
+		const wrapper = mount(HeaderMenuItem, {
+			slots: {
+				default: '<a>Test</a>',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.find('a').text()).toBe('Test')
+	})
+})

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

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`HeaderMenuItem > should render the component 1`] = `"<li data-v-8ba695ac="" class="header-menu-item"><a>Test</a></li>"`;

package/src/components/HeaderBar/HeaderComplexMenu/HeaderMenuSection/HeaderMenuSection.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import HeaderMenuSection from './HeaderMenuSection.vue'
+import HeaderMenuItem from '../HeaderMenuItem/HeaderMenuItem.vue'
+import HeaderMenu from '../HeaderComplexMenu.vue'
+import HeaderBar from '../../HeaderBar.vue'
+
+const meta = {
+	title: 'Components/HeaderBar/HeaderComplexMenu/HeaderMenuSection',
+	component: HeaderMenuSection,
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof HeaderMenuSection>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		title: 'section 1',
+	},
+	render: (args) => {
+		return {
+			components: { HeaderMenuItem, HeaderMenu, HeaderBar, HeaderMenuSection },
+			setup() {
+				return { args }
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderMenu>
+							<HeaderMenuSection :title="args.title">
+								<HeaderMenuItem>
+									<a>lorem ipsum</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+
+							<HeaderMenuSection title="section 2">
+								<HeaderMenuItem>
+									<a>lorem ipsum</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+						</HeaderMenu>
+					</template>
+				</HeaderBar>
+			`,
+		}
+	},
+	play: async ({ canvasElement }) => {
+		const menuBtn = canvasElement.querySelector('button')
+		setTimeout(() => {
+			menuBtn!.click()
+		}, 1000)
+	},
+}

package/src/components/HeaderBar/HeaderComplexMenu/HeaderMenuSection/HeaderMenuSection.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+	import { useId } from 'vue'
+
+	defineProps<{
+		title?: string
+	}>()
+
+	const id = useId()
+	const groupId = `${id}-group`
+	const titleId = `${id}-group-title`
+</script>
+
+<template>
+	<div class="header-menu-section">
+		<div
+			v-if="title"
+			:id="titleId"
+			class="header-menu-section-title"
+		>
+			{{ title }}
+		</div>
+		<ul
+			:id="groupId"
+			role="group"
+			class="header-menu-section-list"
+		>
+			<slot />
+		</ul>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/assets/tokens.scss" as *;
+@use "../../consts.scss" as menu;
+
+.header-menu-section {
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+}
+
+.header-menu-section-title {
+	padding: 40px 16px 8px 20px;
+	border-bottom: 1px solid menu.$menu-border-color;
+	font-size: 1.1rem;
+	margin-bottom: 8px;
+	color: #212529;
+	text-transform: capitalize;
+	font-weight: 700;
+}
+</style>

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

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import HeaderMenuSection from '../HeaderMenuSection.vue'
+
+describe('HeaderMenuSection', () => {
+	it('should render the component', async () => {
+		const wrapper = mount(HeaderMenuSection, {
+			props: {
+				title: 'Section title',
+			},
+			slots: {
+				default: [
+					'<li><a>Test 1</a></li>',
+					'<li><a>Test 2</a></li>',
+				],
+			},
+		})
+
+		expect(wrapper.find('.header-menu-section-title').text()).toBe('Section title')
+		expect(wrapper.find('.header-menu-section-list').element.children.length).toBe(2)
+	})
+
+	it('should render the component with no title', async () => {
+		const wrapper = mount(HeaderMenuSection, {
+			slots: {
+				default: '<li><a>Test 1</a></li>',
+			},
+		})
+
+		expect(wrapper.find('.header-menu-section-title').exists()).toBe(false)
+		expect(wrapper.find('.header-menu-section-list').element.children.length).toBe(1)
+	})
+})

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

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import HeaderBar from '../../HeaderBar.vue'
+import HeaderMenu from '../HeaderComplexMenu.vue'
+import HeaderMenuItem from '../HeaderMenuItem/HeaderMenuItem.vue'
+import HeaderMenuSection from '../HeaderMenuSection/HeaderMenuSection.vue'
+import HeaderSubMenu from './HeaderSubMenu.vue'
+
+const meta = {
+	title: 'Components/HeaderBar/HeaderComplexMenu/HeaderSubMenu',
+	component: HeaderSubMenu,
+	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, HeaderMenu, HeaderBar, HeaderSubMenu, HeaderMenuSection },
+			setup() {
+				return { args }
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderMenu>
+							<HeaderMenuSection>
+								<HeaderMenuItem>
+									<a>Item</a>
+								</HeaderMenuItem>
+								<HeaderMenuItem>
+									<a>Item</a>
+								</HeaderMenuItem>
+								<headerMenuItem>
+									<HeaderSubMenu>
+										<template #title>
+											{{ args.title }}
+										</template>
+										<HeaderMenuItem>
+											<a>Item</a>
+										</HeaderMenuItem>
+									</HeaderSubMenu>
+								</headerMenuItem>
+								<HeaderMenuItem>
+									<a>Item</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+						</HeaderMenu>
+					</template>
+				</HeaderBar>
+			`,
+		}
+	},
+	play: async ({ canvasElement }) => {
+		const menuBtn = canvasElement.querySelector('button')
+		setTimeout(() => {
+			menuBtn!.click()
+		}, 1000)
+	},
+}
+
+export const Deep: Story = {
+	args: {
+		title: 'Menu de deuxième niveau',
+	},
+	render: (args) => {
+		return {
+			components: { HeaderMenuItem, HeaderMenu, HeaderBar, HeaderSubMenu, HeaderMenuSection },
+			setup() {
+				return { args }
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderMenu>
+							<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>
+						</HeaderMenu>
+					</template>
+				</HeaderBar>
+			`,
+		}
+	},
+	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 = canvasElement.querySelector<HTMLElement>('.sub-menu-btn')
+		await subMenuBtn!.click()
+		await new Promise(resolve => setTimeout(resolve, 500))
+		const subMenuBtn2 = canvasElement.querySelector<HTMLElement>('.sub-menu .sub-menu .sub-menu-btn')
+		await subMenuBtn2!.click()
+	},
+}