@cnamts/synapse 0.0.2-alpha → 0.0.3-alpha

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>

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

@@ -0,0 +1,272 @@
+import HeaderMenu from './HeaderComplexMenu.vue'
+import HeaderBar from '../HeaderBar.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import HeaderMenuSection from './HeaderMenuSection/HeaderMenuSection.vue'
+import HeaderSubMenu from './HeaderSubMenu/HeaderSubMenu.vue'
+import HeaderMenuItem from './HeaderMenuItem/HeaderMenuItem.vue'
+import { VBtn } from 'vuetify/components'
+import { mdiMapMarker } from '@mdi/js'
+
+const meta = {
+	title: 'Components/HeaderBar/HeaderComplexMenu',
+	component: HeaderMenu,
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof HeaderMenu>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {},
+	render: (args) => {
+		return {
+			components: { HeaderMenu, HeaderBar },
+			setup() {
+				return { args }
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderMenu>
+							<p>lorem ipsum</p>
+						</HeaderMenu>
+					</template>
+				</HeaderBar>
+			`,
+		}
+	},
+}
+
+export const Populated: Story = {
+	args: {},
+	render: (args) => {
+		return {
+			components: { HeaderMenuItem, HeaderMenu, HeaderBar, HeaderSubMenu, HeaderMenuSection, VBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderMenu>
+							<HeaderMenuSection title="section 1">
+								<HeaderMenuItem>
+									<a>Item 1</a>
+								</HeaderMenuItem>
+								<HeaderMenuItem>
+									<a>Item 2</a>
+								</HeaderMenuItem>
+								<headerMenuItem>
+									<HeaderSubMenu>
+										<template #title>
+											Menu de premier niveau 1
+										</template>
+										<HeaderMenuSection title="Section">
+											<HeaderMenuItem>
+												<a>Item</a>
+											</HeaderMenuItem>
+											<HeaderSubMenu>
+												<template #title>
+													Menu de deuxième niveau 1
+												</template>
+												<HeaderMenuItem>
+													<a>Item</a>
+												</HeaderMenuItem>
+											</HeaderSubMenu>
+										</HeaderMenuSection>
+									</HeaderSubMenu>
+								</headerMenuItem>
+							</HeaderMenuSection>
+							<HeaderMenuSection title="section 2">
+								<headerMenuItem>
+									<HeaderSubMenu>
+										<template #title>
+											Menu de premier niveau 2
+										</template>
+										<HeaderMenuItem>
+											<a>Item 1</a>
+										</HeaderMenuItem>
+										<HeaderMenuItem>
+											<HeaderSubMenu>
+												<template #title>
+													Menu de deuxième niveau 2
+												</template>
+												<HeaderMenuItem>
+													<a>Item 1</a>
+												</HeaderMenuItem>
+											</HeaderSubMenu>
+										</HeaderMenuItem>
+										<HeaderMenuItem>
+											<HeaderSubMenu>
+												<template #title>
+													Menu de deuxième niveau 3
+												</template>
+												<HeaderMenuSection title="section 1">
+													<HeaderMenuItem>
+														<a>Item 1</a>
+													</HeaderMenuItem>
+												</HeaderMenuSection>
+											</HeaderSubMenu>
+										</HeaderMenuItem>
+									</HeaderSubMenu>
+								</headerMenuItem>
+								<HeaderMenuItem>
+									<a>Item 3</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+							<div class="pa-4">
+								<p class="font-weight-bold">Veillez vous connecter</p>
+								<VBtn variant="tonal" class="mt-4 font-weight-medium" color="primary">Je me connecte</VBtn>
+							</div>
+						</HeaderMenu>
+					</template>
+				</HeaderBar>
+			`,
+		}
+	},
+}
+
+export const Generated: Story = {
+	args: {
+	},
+	render: (args) => {
+		return {
+			components: { HeaderMenu, HeaderBar, HeaderMenuSection, HeaderSubMenu, HeaderMenuItem },
+			setup() {
+				const menu = [
+					{
+						title: 'Vous informer',
+						items: [
+							{ title: 'Actualités', href: 'https://www.ameli.fr/assure/actualites' },
+							{
+								subMenuTitle: 'Droits et démarches',
+								subMenuSubtitle: 'selon votre situation',
+								sections: [
+									{
+										title: undefined,
+										items: [
+											{ title: 'Les essentiels de l’assuré', href: 'https://www.ameli.fr/assure/droits-demarches/principes' },
+											{ title: 'Parentalité, couple', href: 'https://www.ameli.fr/assure/droits-demarches/famille' },
+											{ title: 'Fin de vie, deuil', href: 'https://www.ameli.fr/assure/droits-demarches/fin-de-vie-deuil' },
+											{ title: 'Etudes et stages', href: 'https://www.ameli.fr/assure/droits-demarches/etudes-stages' },
+											{ title: 'Vie professionnelle, retraite', href: 'https://www.ameli.fr/assure/droits-demarches/vie-professionnelle-retraite' },
+											{ title: 'Difficultés d\'accès aux droits et aux soins', href: 'https://www.ameli.fr/assure/droits-demarches/difficultes-acces-droits-soins' },
+											{ title: 'Maladie, accident, hospitalisation', href: 'https://www.ameli.fr/assure/droits-demarches/maladie-accident-hospitalisation' },
+											{ title: 'invalidité, handicap', href: 'https://www.ameli.fr/assure/droits-demarches/invalidite-handicap' },
+											{ title: 'situations particumlières', href: 'https://www.ameli.fr/assure/droits-demarches/situations-particulieres' },
+											{ title: 'réclamation, médiation, recours', href: 'https://www.ameli.fr/assure/droits-demarches/reclamation-mediation-voies-de-recours' },
+											{ title: 'Europe, international', href: 'https://www.ameli.fr/assure/droits-demarches/europe-international' },
+										],
+									},
+								],
+							},
+							{
+								subMenuTitle: 'Remboursements',
+								subMenuSubtitle: 'prestations et aides',
+								sections: [
+									{
+										title: undefined,
+										items: [
+											{ title: 'Ce qui est remboursé', href: 'https://www.ameli.fr/assure/remboursements/rembourse' },
+											{ title: 'ce qui reste à votre charge', href: 'https://www.ameli.fr/assure/remboursements/reste-charge' },
+											{ title: 'Être bien remboursé', href: 'https://www.ameli.fr/assure/remboursements/etre-bien-rembourse' },
+											{ title: 'Indemnités journalières maladie, maternité, paternité', href: 'https://www.ameli.fr/assure/remboursements/indemnites-journalieres-maladie-maternite-paternite' },
+											{ title: 'Accident du travail : prise en charge et indemnités journalières', href: 'https://www.ameli.fr/assure/remboursements/accident-travail' },
+											{ title: 'Maladie professionnelle : prise en charge et indemnités journalières', href: 'https://www.ameli.fr/assure/remboursements/maladie-professionnelle' },
+											{ title: 'Pensions, allocations et rentes', href: 'https://www.ameli.fr/assure/remboursements/pensions-allocations-rentes' },
+											{ title: 'Incapacité permanente', href: 'https://www.ameli.fr/assure/remboursements/incapacite-permanente' },
+											{ title: 'Complémentaire santé solidaire : vous n\'avez rien à payer dans la plupart des cas ', href: 'https://www.ameli.fr/assure/remboursements/cmu-aides-financieres/complementaire-sante-solidaire' },
+											{ title: 'Aide médicale de l\'État et soins urgents', href: 'https://www.ameli.fr/assure/remboursements/aide-medicale-etat-soins-urgents' },
+											{ title: 'Compte ameli, mode d\'emploi', href: 'https://www.ameli.fr/assure/remboursements/suivre-remboursements' },
+										],
+									},
+								],
+							},
+							{
+								subMenuTitle: 'Maladies et prévention',
+								sections: [
+									{
+										title: undefined,
+										items: [
+											{ title: 'Tous les thèmes de santé', href: 'https://www.ameli.fr/assure/sante/themes' },
+											{ title: 'L\'Assurance Maladie vous accompagne', href: 'https://www.ameli.fr/assure/remboursements/reste-charge' },
+											{ title: 'Mon espace santé', href: 'https://www.ameli.fr/assure/sante/mon-espace-sante' },
+											{ title: 'Mon bilan prévention', href: 'https://www.ameli.fr/assure/sante/mon-bilan-prevention' },
+											{ title: 'Réagir en cas \'urgence ', href: 'https://www.ameli.fr/assure/sante/urgence' },
+											{ title: 'Accomplir les bons gestes ', href: 'https://www.ameli.fr/assure/sante/bons-gestes' },
+											{ title: 'Médicaments et vaccins', href: 'https://www.ameli.fr/assure/sante/medicaments' },
+											{ title: 'Déroulement d\'un examen', href: 'https://www.ameli.fr/assure/sante/examen' },
+											{ title: 'Certificat médical : dans quels cas et pour qui est-il obligatoire ?', href: 'https://www.ameli.fr/assure/sante/certificat-medical-quand-et-pour-qui' },
+											{ title: 'Devenir parent', href: 'https://www.ameli.fr/assure/sante/devenir-parent' },
+											{ title: 'Enfants', href: 'https://www.ameli.fr/assure/sante/enfants' },
+											{ title: 'Jeunes 16-25 ans', href: 'https://www.ameli.fr/assure/sante/jeunes-16-25-ans' },
+											{ title: 'Seniors', href: 'https://www.ameli.fr/assure/sante/seniors' },
+											{ title: 'Télésanté, la santé à distance', href: 'https://www.ameli.fr/assure/sante/telesante' },
+										],
+									},
+								],
+							},
+						],
+					},
+					{
+						title: 'Besoin d\'aide',
+						items: [
+							{
+								title: 'Contacter l\'Assurance Maladie',
+								subtitle: 'obtenir une attestation, envoyer une feuille de soins, contacter sa caisse, etc.',
+								href: 'https://www.ameli.fr/assure/adresses-contacts',
+							},
+							{
+								title: 'Trouver un professionnel de santé',
+								subtitle: 'médecins, infirmiers...',
+								href: 'https://www.ameli.fr/assure/adresses-contacts' },
+							{ title: 'Télécharger un formulaire (ex: cerfa)', href: 'https://www.ameli.fr/assure/droits-demarches/formulaires' },
+							{ title: 'Consulter le forum', href: 'https://forum-assures.ameli.fr/' },
+							{ title: 'Sourds et malentendants', href: 'https://elioz.fr/elioz-connect/annuaire/assurance-maladie-annuaire/' },
+						],
+					},
+				]
+				return { args, menu, marker: mdiMapMarker }
+			},
+			template: `
+				<HeaderBar>
+					<template #menu>
+						<HeaderMenu>
+							<HeaderMenuSection v-for="section in menu" :key="section.title" :title="section.title">
+								<HeaderMenuItem v-for="item in section.items" :key="item.title">
+									<HeaderSubMenu v-if="item.subMenuTitle">
+										<template #title>
+											{{ item.subMenuTitle }}
+											<em v-if="item.subMenuSubtitle" style="font-style: normal; color: #757777;">{{ item.subMenuSubtitle }}</em>
+										</template>
+										<HeaderMenuSection v-for="subSection in item.sections" :key="subSection.title"  :title="subSection.title">
+											<HeaderMenuItem v-for="subItem in subSection.items" :key="subItem.title">
+												<a :href="subItem.href">{{ subItem.title }}</a>
+											</HeaderMenuItem>
+										</HeaderMenuSection>
+									</HeaderSubMenu>
+									<a v-else :href="item.href">
+										{{ item.title }}
+										<em v-if="item.subtitle" style="font-style: normal; color: #757777;">{{ item.subtitle }}</em>
+									</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+							<h2 class="border-b-sm mb-2" style="font-size: 1.1rem; padding: 40px 16px 8px 20px;">Votre caisse</h2>
+							<div style="padding: 16px 50px 16px 20px;">
+								<div class="d-flex align-center ga-2 font-weight-bold">
+									<VIcon aria-label="Localisation" role="img" aria-hidden="false" color="primary">{{marker}}</VIcon>
+									<p>Vous n'avez pas sélectionné votre caisse</p>
+								</div>
+								<VBtn class="mt-3 mb-4 font-weight-bold text-capitalize" base-color="primary" density="comfortable" flat height="37">Sélectionner</VBtn>
+								<p class="mb-8">Les pages d'ameli seront alors enrichies des informations locales de votre caisse (contacts, événements régionaux, etc.) </p>
+							</div>
+						</HeaderMenu>
+					</template>
+				</HeaderBar>
+			`,
+		}
+	},
+}