@cnamts/synapse 1.0.2 → 1.0.3

package/src/components/Amelipro/UserMenu/UserMenuDetails/types.d.ts

@@ -0,0 +1,20 @@
+export interface UserMenuDetailsInfos {
+	userName?: string
+	profil?: string
+	denomination?: string
+	rpps?: string
+	adeli?: string
+	am?: string
+	finess?: string
+	email?: string
+	adresse?: IAdresse
+}
+
+export interface IAdresse {
+	numero?: string
+	complement?: string
+	type?: string
+	nom?: string
+	codePostal?: string
+	commune?: string
+}

package/src/components/Amelipro/UserMenu/tests/UserMenu.spec.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import UserMenu from '../UserMenu.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('UserMenu', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(UserMenu, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				lastConnexion: '24/04/2025',
+				uniqueId: 'user-information-summary-id',
+				UserMenuInfos: {
+					userName: 'nom utilisateur',
+					profil: 'profil',
+					denomination: 'dénomination',
+					rpps: 'Numéro RPPS',
+					adeli: 'Numéro Adeli',
+					am: 'Numéro AM',
+					finess: 'Numéro Finess',
+					email: 'email',
+					adresse: {
+						numero: 'numéro',
+						complement: 'complément',
+						type: 'type',
+						nom: 'nom',
+						codePostal: 'code postal',
+						commune: 'commune',
+					},
+				},
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/UserMenu/tests/__snapshots__/UserMenu.spec.ts.snap

@@ -0,0 +1,91 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UserMenu > render correctly 1`] = `
+<div
+  class="user-menu"
+  id="user-information-summary-id"
+  usermenuinfos="[object Object]"
+>
+  <button
+    class="
+      btn--icon
+      elevation-0
+      rounded-0
+      v-btn
+      v-btn--density-default
+      v-btn--elevated
+      v-btn--icon
+      v-btn--size-default
+      v-btn--variant-elevated
+      v-theme--light
+    "
+    id="user-information-summary-id-open-btn"
+    plain=""
+    style="height: auto; width: auto;"
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <span
+        class="d-sr-only"
+        id="user-information-summary-id-open-btn-btn-label"
+      >
+        infos utilisateur
+      </span>
+      <span
+        class="
+          amelipro-icon
+          icon-custom
+        "
+        id="user-information-summary-id-open-btn-icon"
+      >
+        <span
+          aria-hidden="true"
+          class="
+            amelipro-custom-icon
+            custom-color
+          "
+          focusable="false"
+          role="img"
+          style="color: #FFFFFF; height: 2rem; width: 2rem;"
+        >
+          <span>
+            <svg
+              aria-hidden="true"
+              clip-rule="evenodd"
+              fill-rule="evenodd"
+              height="34"
+              image-rendering="optimizeQuality"
+              shape-rendering="geometricPrecision"
+              text-rendering="geometricPrecision"
+              viewBox="0 0 1823 1823"
+              width="34"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                class="circle-color"
+                cx="912"
+                cy="912"
+                r="912"
+              />
+              <path
+                class="shape-color"
+                d="M962 454c117 0 125 154 125 154v145s1 111-73 152c-2 10-3 20-1 30 4-2-21 146 106 165 92 15 178 57 247 120 23 23 40 186 40 186H418s-2-132 40-186c73-62 162-104 257-120 128-19 85-160 89-158 2-10 1-21-1-31 0 0-69-89-68-169 1-81 0-134 0-134s-4-190 126-190l101 36z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+    </span>
+    <!---->
+    <!---->
+  </button>
+  <!---->
+  <!---->
+</div>
+`;

package/src/components/Amelipro/UserMenu/types.d.ts

@@ -0,0 +1,9 @@
+import type { UserMenuDetailsInfos } from './UserMenuDetails/types'
+
+export interface UserMenuInfos {
+	lastConnexion?: string
+	logout?: CallableFunction
+	account?: CallableFunction
+	updateSelectionStructure?: CallableFunction
+	userMenuDetailsInfos?: UserMenuDetailsInfos
+}

package/src/components/Amelipro/types.ts

@@ -0,0 +1,5 @@
+export interface IndexedObject<T = string> {
+	[key: string]: T
+}
+
+export type ValidateOnType = 'lazy' | ('input' | 'blur' | 'submit') | 'input lazy' | 'blur lazy' | 'submit lazy' | 'lazy input' | 'lazy blur' | 'lazy submit' | undefined

package/src/components/CollapsibleList/Accessibilite.stories.ts

@@ -163,6 +163,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/CollapsibleList.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/issues/792" target="_blank" style="color:#0C41BD;">issue #792</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/CollapsibleList/CollapsibleList.vue

@@ -41,7 +41,7 @@
 						<a
 							:href="item.href"
 							:aria-label="item.text"
-							class="text-body-2 text-decoration-none"
+							class="text-body-2 text-decoration-none text--primary"
 						>
 							{{ item.text }}
 						</a>
@@ -111,7 +111,7 @@ a {
 }
 
 .vd-collapse-list a {
-	color: black;
+	color: rgb(var(--v-theme-text-base));
 }
 
 .vd-collapse-list :deep() {
@@ -122,7 +122,7 @@ a {
 	}
 }
 
-.vd-collapse-list.theme--dark :deep() {
+.v-theme--dark .vd-collapse-list :deep() {
 	h4,
 	ul,
 	a,
@@ -132,6 +132,16 @@ a {
 }
 
 .vd-collapse-list-mobile :deep() {
+	.v-expansion-panel-title {
+		font-weight: 700 !important;
+
+		&:focus-visible {
+			outline: 2px solid rgb(var(--v-theme-primary));
+			outline-offset: 2px;
+			border-radius: 4px;
+		}
+	}
+
 	.text-subtitle-2 {
 		font-size: 1rem !important;
 		letter-spacing: 0.001em !important;
@@ -139,16 +149,21 @@ a {
 		font-weight: 600;
 	}
 
-	button {
-		color: red !important;
-	}
-
 	.v-icon {
 		color: rgb(0 0 0 / 54%) !important;
 	}
+
+	// Ensure focus is visible on the disclosure button
+	.v-expansion-panel-title__overlay {
+		background-color: transparent;
+
+		&:focus-visible {
+			background-color: rgba(var(--v-theme-primary), 0.08);
+		}
+	}
 }
 
-.vd-collapse-list-mobile.theme--dark :deep() {
+.v-theme--dark .vd-collapse-list-mobile :deep() {
 	button {
 		color: white !important;
 	}

package/src/components/ContextualMenu/Accessibilite.stories.ts

@@ -184,6 +184,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/ContextualMenu.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/658" target="_blank" style="color:#0C41BD;">issue #658</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/ContextualMenu/ContextualMenu.stories.ts

@@ -44,6 +44,9 @@ const meta = {
 				category: 'events',
 			},
 		},
+		'ariaLabel': {
+			description: 'Label pour l’accessibilité du menu',
+		},
 	},
 } satisfies Meta<typeof ContextualMenu>
 
@@ -53,6 +56,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	args: {
+		'ariaLabel': 'Menu contextuel',
 		'items': [
 			{
 				text: 'Titre 1',
@@ -94,7 +98,8 @@ export const Default: Story = {
 				name: 'Template',
 				code: `<template>
 		<ContextualMenu 
-			:items="items" 
+			:items="items"
+			aria-label="Menu contextuel"
 		/>
 	</template>
 	`,
@@ -127,6 +132,7 @@ export const Default: Story = {
 
 export const WithAnchors: Story = {
 	args: {
+		'ariaLabel': 'Menu contextuel',
 		'items': [{
 			text: 'section 1',
 			hash: '#section-1',
@@ -162,39 +168,50 @@ export const WithAnchors: Story = {
 			<ContextualMenu
 				v-bind="args"
 				v-model="hash"
+				aria-label="Menu contextuel"
 			/>
 		</div>
 		<div style="border: 1px solid black; max-height: 500px; overflow-y: auto; scroll-behavior: smooth;">
-			<section id="section-1" style="padding: 20px">
-				<h2>section 1</h2>
+			<section id="section-1" style="padding: 20px" aria-labelledby="section-1-title" tabindex="-1">
+				<h2
+					id="section-1-title"
+				>section 1</h2>
 				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-2" style="padding: 20px">
-				<h2>section 2</h2>
+			<section id="section-2" style="padding: 20px" aria-labelledby="section-2-title" tabindex="-1">
+				<h2
+					id="section-2-title"
+				>section 2</h2>
 				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-3" style="padding: 20px">
-				<h2>section 3</h2>
+			<section id="section-3" style="padding: 20px" aria-labelledby="section-3-title" tabindex="-1">
+				<h2
+					id="section-3-title"
+				>section 3</h2>
 				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-4" style="padding: 20px">
-				<h2>section 4</h2>
+			<section id="section-4" style="padding: 20px" aria-labelledby="section-4-title" tabindex="-1">
+				<h2
+					id="section-4-title"
+				>section 4</h2>
 				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-5" style="padding: 20px">
-				<h2>section 5</h2>
+			<section id="section-5" style="padding: 20px" aria-labelledby="section-5-title" tabindex="-1">
+				<h2
+					id="section-5-title"
+				>section 5</h2>
 				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
@@ -215,40 +232,51 @@ export const WithAnchors: Story = {
 			<ContextualMenu
 				v-model="hash"
 				:items
+				aria-label="Menu contextuel"
 			/>
 		</div>
-		<div class="content">
-			<section id="section-1">
-				<h2>section 1</h2>
-				<p>
+		<div style="border: 1px solid black; max-height: 500px; overflow-y: auto; scroll-behavior: smooth;">
+			<section id="section-1" style="padding: 20px" aria-labelledby="section-1-title" tabindex="-1">
+				<h2
+					id="section-1-title"
+				>section 1</h2>
+				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-2">
-				<h2>section 2</h2>
-				<p>
+			<section id="section-2" style="padding: 20px" aria-labelledby="section-2-title" tabindex="-1">
+				<h2
+					id="section-2-title"
+				>section 2</h2>
+				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-3">
-				<h2>section 3</h2>
-				<p>
+			<section id="section-3" style="padding: 20px" aria-labelledby="section-3-title" tabindex="-1">
+				<h2
+					id="section-3-title"
+				>section 3</h2>
+				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-4">
-				<h2>section 4</h2>
-				<p>
+			<section id="section-4" style="padding: 20px" aria-labelledby="section-4-title" tabindex="-1">
+				<h2
+					id="section-4-title"
+				>section 4</h2>
+				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-5">
-				<h2>section 5</h2>
-				<p>
+			<section id="section-5" style="padding: 20px" aria-labelledby="section-5-title" tabindex="-1">
+				<h2
+					id="section-5-title"
+				>section 5</h2>
+				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
@@ -323,6 +351,7 @@ section p {
 
 export const levels: Story = {
 	args: {
+		'ariaLabel': 'Menu contextuel',
 		'items': [
 			{
 				text: 'Level 1',
@@ -381,7 +410,8 @@ export const levels: Story = {
 				name: 'Template',
 				code: `<template>
 		<ContextualMenu 
-			:items="items" 
+			:items="items"
+			aria-label="Menu contextuel"
 		/>
 	</template>
 	`,

package/src/components/ContextualMenu/ContextualMenu.vue

@@ -1,13 +1,84 @@
 <script setup lang="ts">
-	import { type MenuItem } from './types'
-	import { onMounted, watch } from 'vue'
+	import DeepMenu from './DeepMenu.vue'
+	import { type DeepMenuItem, type MenuItem } from './types'
+	import { computed, onMounted, watch } from 'vue'
 
 	const model = defineModel<string | null>()
 
-	defineProps<{
+	const props = defineProps<{
+		ariaLabel: string
 		items: MenuItem[]
 	}>()
 
+	const organisedItems = computed<DeepMenuItem[]>(() => {
+		const newItems: DeepMenuItem[] = []
+		let oldCopieItem: DeepMenuItem | undefined = undefined
+		for (const item of props.items) {
+			const currentDeep = oldCopieItem?.level || 1
+			const copieItem: DeepMenuItem = JSON.parse(JSON.stringify(item))
+			const level = copieItem.level || 1
+
+			if (level > currentDeep) {
+				const diff = level - currentDeep
+				if (oldCopieItem && !oldCopieItem.children) {
+					oldCopieItem.children = []
+				}
+				let parent = oldCopieItem
+
+				for (let i = 1; i < diff; i++) {
+					const newChild: DeepMenuItem = {
+						level: level + i,
+						children: [],
+					}
+					if (parent) {
+						newChild.parent = parent
+						parent.children!.push(newChild)
+					}
+					else {
+						newItems.push(newChild)
+					}
+					parent = newChild
+				}
+
+				if (parent) {
+					copieItem.parent = parent
+					parent.children!.push(copieItem)
+				}
+				else {
+					newItems.push(copieItem)
+				}
+			}
+			else if (level === currentDeep) {
+				if (level < 2) {
+					newItems.push(copieItem)
+				}
+				else {
+					oldCopieItem!.parent!.children!.push(copieItem)
+					copieItem.parent = oldCopieItem!.parent
+				}
+			}
+			else if (level < currentDeep) {
+				if (level < 2) {
+					newItems.push(copieItem)
+				}
+				else {
+					const diff = currentDeep - level
+					let parent = oldCopieItem!
+					for (let i = 0; i < diff; i++) {
+						parent = parent!.parent!
+					}
+
+					parent!.children!.push(copieItem)
+					copieItem.parent = parent
+				}
+			}
+
+			oldCopieItem = copieItem
+		}
+
+		return newItems
+	})
+
 	onMounted(() => {
 		if (!model.value && window.location.hash) {
 			model.value = window.location.hash
@@ -38,64 +109,26 @@
 </script>
 
 <template>
-	<ul
-		v-if="items.length"
-		class="vd-contextual-menu"
+	<nav
+		:aria-label="ariaLabel"
+		class="vd-contextual-menu-container"
 	>
-		<li
-			v-for="{ text, hash, level } in items"
-			:key="hash"
+		<ul
+			v-if="items.length"
+			class="vd-contextual-menu"
 		>
-			<a
-				:href="hash"
-				:class="{
-					'text-primary active': model === hash,
-					'text-medium-emphasis': model !== hash,
-					'ps-4': level === 2,
-					'ps-6': level === 3,
-					'ps-9': level === 4,
-					'ps-12': level === 5,
-					'ps-14': level === 6,
-				}"
-				class="d-flex align-center text-decoration-none text-body-1 px-4 py-2"
-				@click.prevent.stop="setHash(hash)"
-				v-text="text"
+			<DeepMenu
+				:items="organisedItems"
+				:current-active-hash="model"
+				:current-deepth="1"
+				@click="setHash"
 			/>
-		</li>
-	</ul>
+		</ul>
+	</nav>
 </template>
 
 <style lang="scss" scoped>
 ul {
 	list-style: none;
 }
-
-a {
-	position: relative;
-	transition: none;
-
-	&::before {
-		content: '';
-		width: 2px;
-		background: rgb(0 0 0 / 60%);
-		position: absolute;
-		left: 0;
-		height: 100%;
-	}
-
-	&::after {
-		content: '';
-		width: 4px;
-		border-radius: 0 2px 2px 0;
-		background: currentcolor;
-		position: absolute;
-		left: 0;
-		height: 100%;
-		opacity: 0;
-	}
-
-	&.active::after {
-		opacity: 1;
-	}
-}
 </style>