@cnamts/synapse 0.0.0-alpha.0 → 0.0.3-alpha

package/src/components/HeaderBar/HeaderBar.mdx

@@ -0,0 +1,137 @@
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+import * as HeaderBarStories from "./HeaderBar.stories";
+
+Work in progress
+===
+
+Pour voir l'utilisation du menu, veuillez consulter le composant `HeaderComplexMenu` dans le menu de gauche.
+
+# HeaderBar
+
+<Canvas of={HeaderBarStories.Default} />
+
+## API
+
+<Controls of={HeaderBarStories.Default} />
+
+## Les slots
+
+Le composant `HeaderBar` possède les slots suivants :
+
+### Prepend
+
+Le slot `prepend` permet d'ajouter du contenu en haut du header, il suivra le comportement du header au scroll.
+Il est possible de récuperer le status du Menu de header en utilisant la prop `isMenuOpen` du slot `prepend`. (Fonctionne uniquement pour les menu s'enregistrant via la fonction injectée `registerHeaderMenu`, ce qui est le cas pour le composant `HeaderComplexMenu`)
+
+<Source
+  dark
+  code={`
+<template>
+  <HeaderBar>
+	<template #menu>
+	  <HeaderComplexMenu>
+		...
+	  </HeaderComplexMenu>
+	</template>
+	<template #prepend="{ isMenuOpen }">
+	  <div v-if="isMenuOpen">Menu ouvert</div>
+	  <div v-else>Menu fermé</div>
+	</template>
+  </HeaderBar>
+</template>
+`}
+/>
+
+### Append
+
+Le slot `append` permet d'ajouter du contenu en bas du header, il suivra le comportement du header au scroll.
+Il est également possible de récuperer le status du Menu de header en utilisant la prop `isMenuOpen` du slot `append`.
+
+<Source
+  dark
+  code={`
+<template>
+  <HeaderBar>
+	<template #menu>
+	  <HeaderComplexMenu>
+		...
+	  </HeaderComplexMenu>
+	</template>
+	<template #append="{ isMenuOpen }">
+	  <div v-if="isMenuOpen">Menu ouvert</div>
+	  <div v-else>Menu fermé</div>
+	</template>
+  </HeaderBar>
+</template>
+`}
+/>
+
+### Menu
+
+Le slot `menu` permet d'ajouter un menu au header. Il est recommandé d'utiliser le composant `HeaderComplexMenu` du design system Pour tout menu contenant plus de 5 éléments.
+
+<Source
+  dark
+  code={`
+<template>
+  <HeaderBar>
+	<template #menu>
+	  <HeaderComplexMenu>
+		...
+	  </HeaderComplexMenu>
+	</template>
+  </HeaderBar>
+</template>
+`}
+/>
+
+### Logo
+
+Le slot `logo` permet d'ecraser le logo par défaut du header. Il est déconseillé de l'utiliser. Si cela n'est pas possible l'intégration d'un nouveau logo doit se faire en respectant les guidelines de la charte graphique.
+
+<Source
+  dark
+  code={`
+<template>
+  <HeaderBar>
+	<template #logo>
+	  <img src="https://via.placeholder.com/150" alt="Logo" />
+	</template>
+  </HeaderBar>
+</template>
+`}
+/>
+
+### 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 boutton de connexion, d'accès à un compte ou de recherche.
+Il est necessaire 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>
+  <HeaderBar>
+	<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>
+  </HeaderBar>
+</template>
+`} />

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

@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import HeaderBar from './HeaderBar.vue'
+
+const meta = {
+	title: 'Components/HeaderBar',
+	component: HeaderBar,
+	argTypes: {
+		'serviceTitle': {
+			control: { type: 'text' },
+			description: 'Le nom du service tel qu\'il sera affiché a coté du logo.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		'serviceSubtitle': {
+			control: { type: 'text' },
+			description: 'Le sous-titre du service.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		'homeAriaLabel': {
+			control: { type: 'text' },
+			description: 'Le texte de l\'attribut aria-label pour le logo du header.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary:
+						'Logo de l\'Assurance Maladie, cliquez pour revenir à l\'accueil',
+				},
+			},
+		},
+		'sticky': {
+			control: { type: 'boolean' },
+			description:
+				'Si le header doit rester collé en haut de la page lors du scroll.',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		'hideWhenDown': {
+			control: { type: 'boolean' },
+			description:
+				'Si le header doit se cacher lors du scroll vers le bas en mode mobile. \n Cette propriété est ignorée en mode desktop. \n Présuppose que le header est en mode sticky.',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		'prepend': {
+			control: { type: 'text' },
+			table: {
+				type: {
+					summary: '{ menu-open: boolean }',
+				},
+			},
+		},
+		'append': {
+			control: { type: 'text' },
+			table: {
+				type: {
+					summary: '{ menu-open: boolean }',
+				},
+			},
+		},
+		'menu': {
+			control: { type: 'text' },
+			table: {
+				type: {
+					summary: '{ menu-open: boolean }',
+				},
+			},
+		},
+		'logo': {
+			control: { type: 'text' },
+			table: {
+				type: {
+					summary: `{ 
+						menu-open: boolean,
+						home-aria-label: string,
+						service-title: string,
+						service-subtitle: string,
+					}`,
+				},
+			},
+		},
+		'header-side': {
+			control: { type: 'text' },
+			table: {
+				type: {
+					summary: '{ menu-open: boolean }',
+				},
+			},
+		},
+	},
+} satisfies Meta<typeof HeaderBar>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		serviceTitle: 'Synapse',
+		serviceSubtitle: 'Design System',
+	},
+	decorators: [
+		() => ({
+			template: `<div class="position: relative"><story/></div>`,
+		}),
+	],
+}
+
+export const Sticky: Story = {
+	args: {
+		serviceTitle: 'Synapse',
+		serviceSubtitle: 'Design System',
+	},
+	decorators: [
+		() => ({
+			template: `<div class="position: relative">
+			<story/>
+			<div
+				style="height: 200vh; background-color: #f5f5f5; margin: auto; margin-top: 2rem; max-width: 1200px; padding: 1em;"
+			>Contenu de la page</div>
+	</div>`,
+		}),
+	],
+}
+
+export const WithExternalTopMenu: Story = {
+	args: {
+		serviceTitle: 'Synapse',
+		serviceSubtitle: 'Design System',
+	},
+	decorators: [
+		() => ({
+			template: `<div class="position: relative">
+			<div style="background-color: orange; margin:auto; max-width: 1712px; padding: 1rem 4rem">
+				Menu supèrieur externe au composant
+			</div>
+			<story/>
+			<div
+				style="height: 200vh; background-color: #f5f5f5; margin: auto; margin-top: 2rem; max-width: 1200px; padding: 1em;"
+			>Contenu de la page</div>
+	</div>`,
+		}),
+	],
+}

package/src/components/HeaderBar/HeaderBar.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+	import { computed, onMounted, onUnmounted, provide, ref, watch, type CSSProperties, type Ref } from 'vue'
+	import HeaderLogo from './HeaderLogo/HeaderLogo.vue'
+	import { registerHeaderMenuKey } from './consts'
+	import { locales } from './locales'
+	import useHeaderResponsiveMode from './useHeaderResponsiveMode'
+	import useScrollDirection from './useScrollDirection'
+
+	const menuOpen = ref<boolean>()
+
+	type SlotProps = {
+		menuOpen: boolean | undefined
+	}
+
+	type LogoProps = {
+		homeAriaLabel?: string
+		serviceTitle?: string
+		serviceSubtitle?: string
+	}
+
+	defineSlots<{
+		'prepend': (props: SlotProps) => unknown
+		'append': (props: SlotProps) => unknown
+		'menu': (props: SlotProps) => unknown
+		'logo': (props: SlotProps & LogoProps) => unknown
+		'header-side': (props: SlotProps) => unknown
+	}>()
+
+	const props = withDefaults(defineProps<{
+			/** 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
+		} & LogoProps>(),
+		{
+			sticky: true,
+			hideWhenDown: false,
+			homeAriaLabel: locales.homeAriaLabel,
+			serviceTitle: undefined,
+			serviceSubtitle: undefined,
+		})
+
+	function registerHeaderMenu(childMenuStatus: Ref<boolean>) {
+		watch(childMenuStatus, (newVal) => {
+			menuOpen.value = newVal
+		})
+	}
+	provide(registerHeaderMenuKey, registerHeaderMenu)
+
+	const header = ref<HTMLElement | null>(null)
+	const headerSticky = ref<HTMLElement | null>(null)
+
+	/** The height of the header to reserve */
+	const headerMinHeight = ref('auto')
+	/** The position of the header (when static) from the top of the page */
+	const headerOffset = ref(0)
+	/** Is the top of the header visible in the viewport when static */
+	const isTopOfHeaderVisible = ref(true)
+	/** Is the header out of the viewport */
+	const isScrollBelowHeader = ref(false)
+	/** Activate the hide animation */
+	const shouldAnimateHideHeader = ref(false)
+
+	function handleScroll() {
+		const headerRec = header.value!.getBoundingClientRect()
+		headerOffset.value = headerRec.top + window.scrollY
+		headerMinHeight.value = isTopOfHeaderVisible.value ? 'auto' : `${header.value!.offsetHeight}px`
+		isTopOfHeaderVisible.value = window.scrollY <= headerOffset.value
+		isScrollBelowHeader.value = window.scrollY > headerOffset.value + headerRec.height
+
+		// activate the header animation with a delay to avoid a flicker effect when the user scroll down
+		shouldAnimateHideHeader.value = window.scrollY > headerOffset.value + (headerRec.height * 2)
+	}
+
+	onMounted(() => {
+		handleScroll()
+		window.addEventListener('scroll', handleScroll)
+		window.addEventListener('resize', handleScroll)
+	})
+
+	onUnmounted(() => {
+		window.removeEventListener('scroll', handleScroll)
+		window.removeEventListener('resize', handleScroll)
+	})
+
+	const headerStyle = computed<CSSProperties>(() => {
+		return {
+			minHeight: headerMinHeight.value,
+		}
+	})
+
+	const { scrollDirection } = useScrollDirection()
+	const { isDesktop } = useHeaderResponsiveMode()
+
+	const headerStickyStyle = computed<CSSProperties>(() => {
+		if (
+			props.hideWhenDown
+			&& !isDesktop.value
+			&& !menuOpen.value
+		) {
+			const staticHeader = (
+				(scrollDirection.value === '' && isTopOfHeaderVisible.value)
+				|| (scrollDirection.value === 'bottom' && !isScrollBelowHeader.value)
+				|| (scrollDirection.value === 'top' && isTopOfHeaderVisible.value)
+			)
+
+			const hide = (
+				scrollDirection.value === 'bottom'
+				&& isScrollBelowHeader.value
+			)
+
+			return {
+				position: staticHeader ? 'relative' : 'fixed',
+				top: staticHeader ? 'auto' : '0',
+				transform: hide ? 'translateY(-100%)' : 'none',
+				transition: shouldAnimateHideHeader.value ? 'transform 0.3s ease' : 'none',
+			}
+		}
+
+		return {
+			position: !isTopOfHeaderVisible.value && props.sticky ? 'fixed' : 'relative',
+			top: !isTopOfHeaderVisible.value && props.sticky ? '0' : 'auto',
+			transform: 'none',
+			transition: 'none',
+		}
+	})
+</script>
+
+<template>
+	<header
+		ref="header"
+		class="header"
+		:style="headerStyle"
+	>
+		<div
+			ref="headerSticky"
+			class="sticky-header"
+			:style="headerStickyStyle"
+		>
+			<div
+				v-if="$slots.prepend"
+				class="header-prepend"
+			>
+				<slot
+					name="prepend"
+					:menu-open
+				/>
+			</div>
+			<div class="inner-header d-flex">
+				<slot
+					name="menu"
+					:menu-open
+				/>
+
+				<div class="header-logo">
+					<slot
+						name="logo"
+						:menu-open
+						:home-aria-label
+						:service-title
+						:service-subtitle
+					>
+						<HeaderLogo
+							:aria-label="homeAriaLabel"
+							:service-title="serviceTitle"
+							:service-subtitle="serviceSubtitle"
+						/>
+					</slot>
+				</div>
+				<div
+					v-if="$slots['header-side']"
+					class="header-side"
+				>
+					<slot
+						name="header-side"
+						:menu-open
+					/>
+				</div>
+			</div>
+			<div
+				v-if="$slots.append"
+				class="header-append"
+			>
+				<slot
+					name="append"
+					:menu-open
+				/>
+			</div>
+		</div>
+	</header>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens.scss' as *;
+@use './consts' as *;
+
+.header {
+	top: 0;
+	width: 100%;
+	height: $header-height;
+	max-width: $header-max-width;
+	margin: 0 auto;
+}
+
+.sticky-header {
+	background-color: $neutral-white;
+	border-bottom: solid 1px $blue-lighten-80;
+	width: 100%;
+	height: $header-height;
+	max-width: $header-max-width;
+	z-index: 1000;
+}
+
+.inner-header {
+	display: flex;
+	align-items: center;
+	height: 100%;
+}
+
+.header-logo {
+	margin-left: 2rem;
+}
+
+.header-side {
+	display: flex;
+	align-items: center;
+	margin-left: auto;
+}
+
+@media screen and (min-width: $header-breakpoint) {
+	.header, .sticky-header {
+		height: $header-height-desktop;
+	}
+}
+</style>