@cnamts/synapse 1.0.4 → 1.0.6

package/src/components/HeaderBar/HeaderBar.mdx

@@ -18,24 +18,39 @@ Pour voir l'utilisation du menu, veuillez consulter le composant `HeaderBurgerMe
 ### 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écupérer 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 `HeaderBurgerMenu`)
+Il est possible de récupérer le status du Menu de header en utilisant la prop `menuOpen` du slot `prepend`. (Fonctionne uniquement pour les menus s'enregistrant via la fonction injectée `registerHeaderMenu`, ce qui est le cas pour le composant `HeaderBurgerMenu`).
+Le contenu du slot prend tout l'espace disponible en largeur. Pour que le contenu soit de même dimension que le header, il faut lui appliquer une largeur maximale de `1712px`.
 
 <Source
   dark
   code={`
 <template>
-  <HeaderBar>
-	<template #menu>
-	  <HeaderBurgerMenu>
-		...
-	  </HeaderBurgerMenu>
-	</template>
-	<template #prepend="{ isMenuOpen }">
-	  <div v-if="isMenuOpen">Menu ouvert</div>
-	  <div v-else>Menu fermé</div>
-	</template>
-  </HeaderBar>
+	<HeaderBar>
+		<template #menu>
+			<HeaderBurgerMenu>
+				...
+			</HeaderBurgerMenu>
+		</template>
+		<template #prepend="{ menuOpen }">
+			<div class="header-prepend-content">
+				<div v-if="menuOpen">
+					Menu ouvert
+				</div>
+				<div v-else>
+					Menu fermé
+				</div>
+			</div>
+		</template>
+	</HeaderBar>
 </template>
+
+<style lang="scss" scoped>
+.header-prepend-content {
+	width: 100%;
+	max-width: 1712px;
+	margin: 0 auto;
+}
+</style>
 `}
 />
 
@@ -47,7 +62,11 @@ code:`
 <template>
 	<HeaderBar>
 		<template #prepend>
-			<div style="height: 26px; background-color: RebeccaPurple;"></div>
+			<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+				<div>
+					Contenu
+				</div>
+			</div>
 		</template>
 	</HeaderBar>
 </template>
@@ -57,24 +76,28 @@ code:`
 ### 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écupérer le status du Menu de header en utilisant la prop `isMenuOpen` du slot `append`.
+Il est également possible de récupérer le status du Menu de header en utilisant la prop `menuOpen` du slot `append`.
+Le contenu du slot prend tout l'espace disponible en largeur. Pour que le contenu soit de même dimension que le header, il faut lui appliquer une largeur maximale de `1712px`.
 
 <Source
 	dark
 	code={`
 <template>
   <HeaderBar>
-	<template #menu>
-	  <HeaderBurgerMenu>
-		...
-	  </HeaderBurgerMenu>
-	</template>
-	<template #append="{ isMenuOpen }">
-	  <div v-if="isMenuOpen">Menu ouvert</div>
+	<template #append="{ menuOpen }">
+	  <div v-if="menuOpen">Menu ouvert</div>
 	  <div v-else>Menu fermé</div>
 	</template>
   </HeaderBar>
 </template>
+
+<style lang="scss" scoped>
+.header-append-content {
+	width: 100%;
+	max-width: 1712px;
+	margin: 0 auto;
+}
+</style>
 `}
 />
 
@@ -86,7 +109,9 @@ Il est également possible de récupérer le status du Menu de header en utilisa
 <template>
 	<HeaderBar>
 		<template #append>
-			<div style="height: 26px; background-color: RebeccaPurple;"></div>
+			<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+				<div>contenu</div>
+			</div>
 		</template>
 	</HeaderBar>
 </template>

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

@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import { mdiAccountCircleOutline, mdiMagnify } from '@mdi/js'
+import { mdiAccountCircleOutline, mdiMagnify, mdiMenu } from '@mdi/js'
 import { VBtn, VListItem, VListItemTitle } from 'vuetify/components'
 import HeaderToolbar from '../HeaderToolbar/HeaderToolbar.vue'
 import LogoBrandSection from '../LogoBrandSection/LogoBrandSection.vue'
 import SubHeader from '../SubHeader/SubHeader.vue'
 import UserMenuBtn from '../UserMenuBtn/UserMenuBtn.vue'
 import HeaderBar from './HeaderBar.vue'
+import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 
 const meta = {
 	title: 'Composants/Structure/HeaderBar',
@@ -194,20 +195,23 @@ export const WithRightMenu: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderBar, VBtn },
+			components: { HeaderBar, VBtn, SyIcon },
 			setup() {
 				const searchIcon = mdiMagnify
 				const accountIcon = mdiAccountCircleOutline
-				return { args, searchIcon, accountIcon }
+				const menuIcon = mdiMenu
+
+				return { args, searchIcon, accountIcon, menuIcon }
 			},
 			template: `<div class="position: relative">
 				<HeaderBar v-bind="args">
 					<template #header-side="{ menuOpen }">
-						<div class="d-flex justify-center h-100 ga-4 pr-4">
+						<nav class="d-none d-md-flex justify-center h-100 ga-4 pr-4">
 							<VBtn
 								variant="text"
 								:prepend-icon="searchIcon"
 								color="primary"
+								role="search"
 							>
 								Rechercher
 							</VBtn>
@@ -217,7 +221,17 @@ export const WithRightMenu: Story = {
 							>
 								Login
 							</VBtn>
-						</div>
+						</nav>
+						<VBtn
+							class="d-md-none"
+							variant="text"
+						>
+							<SyIcon
+								size="x-large"
+								:icon="menuIcon"
+								aria-label="Ouvrir le menu"
+							/>
+						</VBtn>
 					</template>
 				</HeaderBar>
 			</div>`,
@@ -234,11 +248,12 @@ export const WithRightMenu: Story = {
 						service-subtitle="Design System"
 					>
 						<template #header-side="{ menuOpen }">
-							<div class="d-flex justify-center h-100 ga-4 pr-4">
+							<nav class="d-none d-md-flex justify-center h-100 ga-4 pr-4">
 								<VBtn
 									variant="text"
 									:prepend-icon="mdiMagnify"
 									color="primary"
+									role="search"
 								>
 									Rechercher
 								</VBtn>
@@ -248,7 +263,17 @@ export const WithRightMenu: Story = {
 								>
 									Login
 								</VBtn>
-							</div>
+							</nav>
+							<VBtn
+								class="d-md-none"
+								variant="text"
+							>
+								<SyIcon
+									size="x-large"
+									:icon="mdiMenu"
+									aria-label="Ouvrir le menu"
+								/>
+							</VBtn>
 						</template>
 					</HeaderBar>
 				</template>
@@ -258,9 +283,9 @@ export const WithRightMenu: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import { HeaderBar } from '@cnamts/synapse'
+					import { HeaderBar, SyIcon } from '@cnamts/synapse'
 					import { VBtn } from 'vuetify/components'
-					import { mdiMagnify, mdiAccountCircleOutline } from '@mdi/js'
+					import { mdiMagnify, mdiAccountCircleOutline, mdiMenu } from '@mdi/js'
 				</script>
 				`,
 			},
@@ -689,7 +714,11 @@ export const PrependSlot: Story = {
 			template: `
 				<HeaderBar v-bind="args">
 					<template #prepend>
-						<div style="height: 26px; background-color: #0c419a;"></div>
+						<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+							<div>
+								contenu
+							</div>
+						</div>
 					</template>
 				</HeaderBar>
 			`,
@@ -703,7 +732,11 @@ export const PrependSlot: Story = {
 				<template>
 					<HeaderBar>
 						<template #prepend>
-							<div style="height: 26px; background-color: #0c419a;"></div>
+							<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+								<div>
+									contenu
+								</div>
+							</div>
 						</template>
 					</HeaderBar>
 				</template>
@@ -735,7 +768,11 @@ export const AppendSlot: Story = {
 			template: `
 				<HeaderBar v-bind="args">
 					<template #append>
-						<div style="height: 26px; background-color: #0c419a;"></div>
+						<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+							<div>
+								contenu
+							</div>
+						</div>
 					</template>
 				</HeaderBar>
 			`,
@@ -749,7 +786,11 @@ export const AppendSlot: Story = {
 				<template>
 					<HeaderBar>
 						<template #append>
-							<div style="height: 26px; background-color: #0c419a;"></div>
+							<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+								<div>
+									contenu
+								</div>
+							</div>
 						</template>
 					</HeaderBar>
 				</template>

package/src/components/HeaderBar/HeaderBar.vue

@@ -151,11 +151,12 @@
 	})
 
 </script>
-
+<!-- eslint-disable vuejs-accessibility/no-redundant-roles -->
 <template>
 	<header
 		ref="header"
 		class="header"
+		role="banner"
 		:style="headerStyle"
 	>
 		<div

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

@@ -216,6 +216,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/HeaderBurgerMenu.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/646" target="_blank" style="color:#0C41BD;">issue #646</a>)</p>
+			  </div>
             `,
 		}
 	},