@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

package/src/components/HeaderNavigationBar/HeaderNavigationBar.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+	import HeaderBar from '@/components/HeaderBar/HeaderBar.vue'
+	import HeaderBurgerMenu from '@/components/HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.vue'
+	import HeaderMenuItem from '@/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue'
+	import HeaderMenuSection from '@/components/HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.vue'
+	import useHeaderResponsiveMode from '@/components/HeaderBar/useHeaderResponsiveMode'
+	import type { CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { computed } from 'vue'
+	import { RouterLink, type RouteLocationRaw } from 'vue-router'
+	import HorizontalNavbar from './HorizontalNavbar/HorizontalNavbar.vue'
+	import type { NavigationItem } from './types'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+			homeAriaLabel?: string
+			serviceTitle?: string
+			serviceSubtitle?: string
+			homeLink?: {
+				ariaLabel?: string
+				to?: RouteLocationRaw
+				href?: string
+			}
+			/** Keep the header visible */
+			sticky?: boolean
+			/**
+			 * Show the header at sticky only when the user scroll up in mobile
+			 * Need 'sticky' at true,
+			 */
+			hideWhenDown?: boolean
+			/**
+			 * The number of item to shown in the horizontal menu before using
+			 * the Burger menu (default: 6)
+			 */
+			maxHorizontalMenuItems?: number
+			/**
+			 * The items to show in the horizontal menu
+			 */
+			items?: NavigationItem[]
+		}>(),
+		{
+			homeAriaLabel: undefined,
+			serviceTitle: undefined,
+			serviceSubtitle: undefined,
+			homeLink: undefined,
+			sticky: true,
+			hideWhenDown: false,
+			maxHorizontalMenuItems: 6,
+			items: undefined,
+		})
+
+	type SlotProps = {
+		menuOpen: boolean | undefined
+	}
+
+	type LogoProps = {
+		homeAriaLabel?: string
+		serviceTitle?: string
+		serviceSubtitle?: string
+	}
+
+	defineSlots<{
+		'logo': (props: SlotProps & LogoProps) => unknown
+		'logo-brand-content': (props: SlotProps & LogoProps) => unknown
+		'header-side': (props: SlotProps) => unknown
+		'navigation-bar-prepend': () => unknown
+		'navigation-bar-append': () => unknown
+		'navigation-bar-content': () => unknown
+		'navigation-menu-prepend': (props: SlotProps) => unknown
+		'navigation-menu-append': (props: SlotProps) => unknown
+		'navigation-menu-content': (props: SlotProps) => unknown
+	}>()
+
+	const menuOpen = defineModel<boolean>(
+		'burgerMenu',
+		{ default: false },
+	)
+
+	const { isDesktop } = useHeaderResponsiveMode()
+
+	const verticalMenu = computed<boolean>(() => {
+		return (
+			!isDesktop.value
+			|| (props.items !== undefined
+				&& props.items.length > 0
+				&& props.items.length > props.maxHorizontalMenuItems)
+		)
+	})
+</script>
+
+<template>
+	<HeaderBar
+		:sticky="sticky"
+		:hide-when-down="hideWhenDown"
+		:home-aria-label="homeAriaLabel"
+		:service-title="serviceTitle"
+		:service-subtitle="serviceSubtitle"
+	>
+		<template #menu>
+			<HeaderBurgerMenu
+				v-if="verticalMenu"
+				v-model="menuOpen"
+			>
+				<div class="inner-vertical-menu">
+					<slot
+						name="navigation-menu-prepend"
+						:menu-open="menuOpen"
+					/>
+					<div class="inner-vertical-menu__main-content">
+						<slot
+							name="navigation-menu-content"
+							:menu-open="menuOpen"
+						>
+							<HeaderMenuSection>
+								<HeaderMenuItem
+									v-for="item in items"
+									:key="item.label"
+								>
+									<a
+										v-if="'href' in item"
+										:href="item.href"
+									>
+										{{ item.label }}
+									</a>
+									<RouterLink
+										v-else-if="item.to"
+										:to="item.to"
+									>
+										{{ item.label }}
+									</RouterLink>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+						</slot>
+					</div>
+					<slot
+						name="navigation-menu-append"
+						:menu-open="menuOpen"
+					/>
+				</div>
+			</HeaderBurgerMenu>
+		</template>
+		<template
+			#logo-brand-content
+		>
+			<slot
+				name="logo-brand-content"
+				:menu-open="menuOpen"
+				:home-aria-label="homeAriaLabel"
+				:service-title="serviceTitle"
+				:service-subtitle="serviceSubtitle"
+			/>
+		</template>
+		<template #logo>
+			<slot
+				name="logo"
+				:menu-open="menuOpen"
+				:home-aria-label="homeAriaLabel"
+				:service-title="serviceTitle"
+				:service-subtitle="serviceSubtitle"
+			/>
+		</template>
+		<template #header-side>
+			<slot
+				name="header-side"
+				:menu-open="menuOpen"
+			/>
+		</template>
+		<template #append>
+			<HorizontalNavbar
+				v-if="props.items && !verticalMenu"
+				:items="items"
+				:vuetify-options
+			>
+				<template #navigation-bar-prepend>
+					<slot name="navigation-bar-prepend" />
+				</template>
+				<slot name="navigation-bar-content" />
+				<template #navigation-bar-append>
+					<slot name="navigation-bar-append" />
+				</template>
+			</HorizontalNavbar>
+		</template>
+	</HeaderBar>
+</template>
+
+<style lang="scss" scoped>
+.inner-vertical-menu {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.inner-vertical-menu__main-content {
+	flex: 1;
+}
+</style>

package/src/components/HeaderNavigationBar/HorizontalNavbar/HorizontalNavbar.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+	import { VTabs } from 'vuetify/components'
+	import type { NavigationItem } from '../types'
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { config } from './config'
+
+	const props = defineProps<CustomizableOptions & {
+		items: NavigationItem[]
+	}>()
+
+	defineSlots<{
+		'navigation-bar-prepend': () => unknown
+		'navigation-bar-append': () => unknown
+		'default': () => unknown
+	}>()
+
+	const options = useCustomizableOptions(config, props)
+
+</script>
+
+<template>
+	<VSheet
+		class="horizontal-menu px-12"
+		v-bind="options.sheet"
+	>
+		<slot name="navigation-bar-prepend" />
+		<slot>
+			<VTabs
+				class="horizontal-menu__tabs"
+				v-bind="options.tabs"
+			>
+				<VTab
+					v-for="(item, index) in items"
+					:key="index"
+					:href="item.href"
+					:to="item.to"
+					v-bind="options.tab"
+					tabindex="0"
+					class="horizontal-menu__item"
+				>
+					<span class="horizontal-menu__item-link">
+						{{ item.label }}
+					</span>
+				</VTab>
+			</VTabs>
+		</slot>
+		<slot name="navigation-bar-append" />
+	</VSheet>
+</template>
+
+<style lang="scss" scoped>
+
+.horizontal-menu {
+	display: flex;
+	align-items: center;
+}
+
+.horizontal-menu__tabs {
+	flex: 1 1 0;
+}
+
+.horizontal-menu__item {
+	cursor: pointer;
+}
+
+.horizontal-menu__item-link {
+	font-size: 0.875rem;
+	font-weight: 700;
+}
+
+.v-tab-item--selected span {
+	color: #fff;
+}
+</style>

package/src/components/HeaderNavigationBar/HorizontalNavbar/config.ts

@@ -0,0 +1,18 @@
+import { cnamSemanticTokens } from '@/designTokens'
+
+export const config = {
+	sheet: {
+		theme: 'dark',
+		dense: true,
+		color: cnamSemanticTokens.colors.background.accentContrasted,
+	},
+	tabs: {
+		'height': '53',
+		'show-arrows': true,
+	},
+	tab: {
+		'base-color': cnamSemanticTokens.colors.text.subduedOnDark,
+		'slider-color': '#fff',
+		'ripple': false,
+	},
+}

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

@@ -0,0 +1,127 @@
+import HeaderBurgerMenu from '@/components/HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.vue'
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { afterAll, describe, expect, it, vi } from 'vitest'
+import HeaderNavbar from '../HeaderNavigationBar.vue'
+import HorizontalNavbar from '../HorizontalNavbar/HorizontalNavbar.vue'
+
+describe('HeaderNavbar', () => {
+	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 () => {
+		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
+		window.window.happyDOM.setInnerWidth(1200)
+
+		const wrapper = mount(HeaderNavbar, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
+			},
+			props: {
+				items: [
+					{
+						label: 'Home',
+						to: '/',
+					},
+					{
+						label: 'About',
+						to: '/about',
+					},
+				],
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.html()).toContain('Home')
+		expect(wrapper.findComponent(HeaderBurgerMenu).exists()).toBe(false)
+		expect(wrapper.findComponent(HorizontalNavbar).exists()).toBe(true)
+
+		await wrapper.setProps({
+			maxHorizontalMenuItems: 1,
+		})
+
+		expect(wrapper.findComponent(HeaderBurgerMenu).exists()).toBe(true)
+		expect(wrapper.findComponent(HorizontalNavbar).exists()).toBe(false)
+
+		wrapper.unmount()
+	})
+
+	it('transform the menu on resize', async () => {
+		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
+		window.window.happyDOM.setInnerWidth(600)
+
+		const wrapper = mount(HeaderNavbar, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
+			},
+			props: {
+				items: [
+					{
+						label: 'Home',
+						to: '/',
+					},
+					{
+						label: 'About',
+						to: '/about',
+					},
+				],
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.findComponent(HeaderBurgerMenu).exists()).toBe(true)
+		expect(wrapper.findComponent(HorizontalNavbar).exists()).toBe(false)
+
+		wrapper.unmount()
+	})
+
+	it('should toggle the burger menu', async () => {
+		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
+		window.window.happyDOM.setInnerWidth(600)
+
+		const wrapper = mount(HeaderNavbar, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+					RouterLink: true,
+				},
+			},
+			props: {
+				items: [
+					{
+						label: 'Home',
+						to: '/',
+					},
+					{
+						label: 'About',
+						to: '/about',
+					},
+				],
+			},
+			attachTo: document.body,
+		})
+
+		const btn = wrapper.find('.header-menu-btn')
+		await btn.trigger('click')
+		expect(wrapper.find('.header-menu').exists()).toBe(true)
+		await btn.trigger('click')
+		expect(wrapper.find('.header-menu').exists()).toBe(false)
+	})
+})

package/src/components/HeaderNavigationBar/types.ts

@@ -0,0 +1,7 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface NavigationItem {
+	label: string
+	href?: string
+	to?: RouteLocationRaw
+}

package/src/components/HeaderToolbar/HeaderToolbar.mdx

@@ -0,0 +1,31 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import * as HeaderToolbar from './HeaderToolbar.stories';
+
+<Meta of={HeaderToolbar} />
+
+# HeaderToolbar
+
+L’élément `HeaderToolbar` est utilisé pour afficher une barre d'outils en haut de la page. Il est composé de deux zones customisables.
+
+<Canvas
+    of={HeaderToolbar.Default}
+    story={{
+        height: '500px',
+    }}
+/>
+
+# API
+
+<Controls of={HeaderToolbar.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import HeaderToolbar from '@cnamts/synapse'
+</script>
+
+<template>
+	<HeaderToolbar />
+</template>
+`} />