@cnamts/synapse 1.0.16 → 1.0.17

package/src/components/Accordion/Accordion.vue

@@ -7,16 +7,12 @@
 	import useAccordionState from './composables/useAccordionState'
 	import useAccordionGroupCommunication from './composables/useAccordionGroupCommunication'
 	import useAccordionKeyboardNavigation, { type AccordionItem as KeyboardNavigationItem } from './composables/useAccordionKeyboardNavigation'
-
-	interface ContentObject {
-		title: string
-		content: string
-	}
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	interface AccordionItem {
 		id: string
 		title: string
-		content: string | ContentObject
+		content: string | Record<string, unknown>
 		headingLevel?: number
 		disabled?: boolean
 	}
@@ -117,7 +113,7 @@
 					:is="getHeadingTag(item)"
 					class="sy-accordion-heading"
 				>
-					<div
+					<span
 						class="sy-accordion-title"
 						:class="isItemOpen(item.id) ? `text-${options.accordion.activeColor}` : `text-${options.accordion.titleColor}`"
 					>
@@ -125,10 +121,29 @@
 							class="sy-accordion-icon"
 							:class="{ 'sy-accordion-icon--open': isItemOpen(item.id) }"
 						>
-							<v-icon :icon="mdiChevronRight" />
+							<SyIcon
+								:icon="mdiChevronRight"
+								decorative
+							/>
 						</span>
-						<span>{{ item.title }}</span>
-					</div>
+						<slot
+							name="title"
+							:item="item"
+							:index="index"
+						>
+							<span>{{ item.title }}</span>
+						</slot>
+					</span>
+					<span
+						v-if="$slots['right-content']"
+						class="sy-accordion-right-content"
+					>
+						<slot
+							name="right-content"
+							:item="item"
+							:index="index"
+						/>
+					</span>
 				</component>
 			</div>
 
@@ -141,20 +156,28 @@
 				:tabindex="isItemOpen(item.id) ? 0 : -1"
 			>
 				<div class="sy-accordion-content-inner">
-					<template v-if="typeof item.content === 'string'">
-						<p class="sy-accordion-content-text">
-							{{ item.content }}
-						</p>
-					</template>
-					<template v-else>
-						<div class="sy-accordion-content-item">
-							<div class="sy-accordion-content-line">
-								<strong>
-									{{ item.content.title }}
-								</strong>: {{ item.content.content }}
+					<slot
+						name="content"
+						:item="item"
+						:index="index"
+						:is-open="isItemOpen(item.id)"
+					>
+						<template v-if="typeof item.content === 'string'">
+							<p class="sy-accordion-content-text">
+								{{ item.content }}
+							</p>
+						</template>
+						<template v-else>
+							<div class="sy-accordion-content-item">
+								<p class="sy-accordion-content-text">
+									<strong>{{ (item.content as any).title }}</strong>
+								</p>
+								<p class="sy-accordion-content-text">
+									{{ (item.content as any).content }}
+								</p>
 							</div>
-						</div>
-					</template>
+						</template>
+					</slot>
 				</div>
 			</div>
 		</div>
@@ -175,6 +198,10 @@
 
 .sy-accordion-heading {
 	margin: 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
 }
 
 .sy-accordion-button {
@@ -197,6 +224,12 @@
 	display: flex;
 }
 
+.sy-accordion-right-content {
+	display: flex;
+	align-items: center;
+	margin-left: 16px;
+}
+
 .sy-accordion-button:hover,
 .sy-accordion-content--open + .sy-accordion-button,
 .sy-accordion-item:has(.sy-accordion-content--open) .sy-accordion-button {
@@ -266,7 +299,6 @@
 }
 
 .sy-accordion-content-line {
-	margin-bottom: 8px;
 	line-height: 1.5;
 }
 

package/src/components/Accordion/tests/Accordion.a11y.spec.ts

@@ -0,0 +1,46 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import Accordion from '../Accordion.vue'
+
+const defaultItems = [
+	{ id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
+	{
+		id: 'item2',
+		title: 'Section 2',
+		content: {
+			title: 'Sous-titre de la section 2',
+			content: 'Contenu détaillé de la section 2',
+		},
+	},
+]
+
+// Test d'accessibilité dédié à Accordion, basé sur un scénario réaliste :
+// - plusieurs items
+// - ouvertures successives pour vérifier l'état ouvert/fermé et les attributs ARIA
+
+describe('Accordion – accessibility (axe)', () => {
+	it('has no obvious axe violations when sections are opened', async () => {
+		const wrapper = mount(Accordion, {
+			props: {
+				items: defaultItems,
+				headingLevel: 2,
+			},
+		})
+
+		// Ouvrir les deux sections pour inclure le contenu dans l’audit axe
+		const buttons = wrapper.findAll('.sy-accordion-button')
+		if (buttons.length > 0) {
+			await buttons[0].trigger('click')
+		}
+		if (buttons.length > 1) {
+			await buttons[1].trigger('click')
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'Accordion – sections opened')
+	})
+})

package/src/components/Accordion/tests/__snapshots__/accordion.spec.ts.snap

@@ -23,24 +23,22 @@ exports[`Accordion > renders correctly 1`] = `
       tabindex="0"
     >
       <h2 class="sy-accordion-heading">
-        <div class="
+        <span class="
           sy-accordion-title
           text-primary
         ">
           <span class="sy-accordion-icon">
-            <v-icon-stub
-              disabled="false"
-              end="false"
+            <sy-icon-stub
+              autodetectbutton="false"
+              decorative="true"
               icon="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-              size="default"
-              start="false"
-              tag="i"
-            ></v-icon-stub>
+            ></sy-icon-stub>
           </span>
           <span>
             Section 1
           </span>
-        </div>
+        </span>
+        <!-- v-if -->
       </h2>
     </div>
     <div
@@ -71,24 +69,22 @@ exports[`Accordion > renders correctly 1`] = `
       tabindex="0"
     >
       <h2 class="sy-accordion-heading">
-        <div class="
+        <span class="
           sy-accordion-title
           text-primary
         ">
           <span class="sy-accordion-icon">
-            <v-icon-stub
-              disabled="false"
-              end="false"
+            <sy-icon-stub
+              autodetectbutton="false"
+              decorative="true"
               icon="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-              size="default"
-              start="false"
-              tag="i"
-            ></v-icon-stub>
+            ></sy-icon-stub>
           </span>
           <span>
             Section 2
           </span>
-        </div>
+        </span>
+        <!-- v-if -->
       </h2>
     </div>
     <div
@@ -119,24 +115,22 @@ exports[`Accordion > renders correctly 1`] = `
       tabindex="0"
     >
       <h2 class="sy-accordion-heading">
-        <div class="
+        <span class="
           sy-accordion-title
           text-primary
         ">
           <span class="sy-accordion-icon">
-            <v-icon-stub
-              disabled="false"
-              end="false"
+            <sy-icon-stub
+              autodetectbutton="false"
+              decorative="true"
               icon="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-              size="default"
-              start="false"
-              tag="i"
-            ></v-icon-stub>
+            ></sy-icon-stub>
           </span>
           <span>
             Section 3
           </span>
-        </div>
+        </span>
+        <!-- v-if -->
       </h2>
     </div>
     <div
@@ -148,12 +142,14 @@ exports[`Accordion > renders correctly 1`] = `
     >
       <div class="sy-accordion-content-inner">
         <div class="sy-accordion-content-item">
-          <div class="sy-accordion-content-line">
+          <p class="sy-accordion-content-text">
             <strong>
               Sous-titre de la section 3
             </strong>
-            : Contenu détaillé de la section 3
-          </div>
+          </p>
+          <p class="sy-accordion-content-text">
+            Contenu détaillé de la section 3
+          </p>
         </div>
       </div>
     </div>

package/src/components/Accordion/tests/accordion.spec.ts

@@ -83,7 +83,7 @@ describe('Accordion', () => {
 	it('renders string content correctly', () => {
 		const wrapper = mount(Accordion, {
 			propsData: {
-				items: [defaultItems[0]],
+				items: [defaultItems[0]!],
 				headingLevel: 2,
 			},
 		})
@@ -92,13 +92,13 @@ describe('Accordion', () => {
 		button.trigger('click')
 
 		const content = wrapper.find('.sy-accordion-content-inner')
-		expect(content.text()).toContain(defaultItems[0].content)
+		expect(content.text()).toContain(defaultItems[0]!.content)
 	})
 
 	it('renders object content correctly', async () => {
 		const wrapper = mount(Accordion, {
 			propsData: {
-				items: [defaultItems[2]],
+				items: [defaultItems[2]!],
 				headingLevel: 2,
 			},
 		})
@@ -106,10 +106,10 @@ describe('Accordion', () => {
 		const button = wrapper.find('.sy-accordion-button')
 		await button.trigger('click')
 
-		const contentLine = wrapper.find('.sy-accordion-content-line')
-		const objectContent = defaultItems[2].content as { title: string, content: string }
-		expect(contentLine.text()).toContain(objectContent.title)
-		expect(contentLine.text()).toContain(objectContent.content)
+		const objectContent = defaultItems[2]!.content as { title: string, content: string }
+		const content = wrapper.find('.sy-accordion-content-inner')
+		expect(content.text()).toContain(objectContent.title)
+		expect(content.text()).toContain(objectContent.content)
 	})
 
 	it('has correct accessibility attributes', () => {
@@ -263,26 +263,27 @@ describe('Accordion', () => {
 		})
 
 		// Ouvrir le premier accordéon (contenu string)
-		const firstButton = wrapper.findAll('.sy-accordion-button')[0]
+		const firstButton = wrapper.findAll('.sy-accordion-button')[0]!
 		await firstButton.trigger('click')
 
 		// Vérifier que le contenu string est rendu dans un élément p
-		const firstContent = wrapper.findAll('.sy-accordion-content-inner')[0]
+		const firstContent = wrapper.findAll('.sy-accordion-content-inner')[0]!
 		const paragraph = firstContent.find('p.sy-accordion-content-text')
 		expect(paragraph.exists()).toBe(true)
 		expect(paragraph.text()).toBe('Contenu de la section 1')
 
 		// Ouvrir le deuxième accordéon (contenu objet)
-		const secondButton = wrapper.findAll('.sy-accordion-button')[1]
+		const secondButton = wrapper.findAll('.sy-accordion-button')[1]!
 		await secondButton.trigger('click')
 
 		// Vérifier que le contenu objet est rendu avec la structure appropriée
-		const secondContent = wrapper.findAll('.sy-accordion-content-inner')[1]
-		const contentLine = secondContent.find('.sy-accordion-content-line')
-		expect(contentLine.exists()).toBe(true)
-		expect(contentLine.find('strong').exists()).toBe(true)
-		expect(contentLine.find('strong').text()).toBe('Sous-titre')
-		expect(contentLine.text()).toContain('Contenu détaillé')
+		const secondContent = wrapper.findAll('.sy-accordion-content-inner')[1]!
+		const paragraphs = secondContent.findAll('p.sy-accordion-content-text')
+		expect(paragraphs.length).toBe(2)
+		expect(paragraphs[0]!.text()).toContain('Sous-titre')
+		expect(paragraphs[1]!.text()).toContain('Contenu détaillé')
+		// Le titre est affiché en gras
+		expect(paragraphs[0]!.find('strong').exists()).toBe(true)
 	})
 
 	it('applies custom colors from options', async () => {
@@ -372,11 +373,11 @@ describe('Accordion', () => {
 		expect(buttons.length).toBeGreaterThan(1) // S'assurer qu'il y a plusieurs boutons
 
 		// Ouvrir le premier accordéon
-		await buttons[0].trigger('click')
+		await buttons[0]!.trigger('click')
 		expect(wrapper.findAll('.sy-accordion-content--open').length).toBe(1)
 
 		// Ouvrir le deuxième accordéon
-		await buttons[1].trigger('click')
+		await buttons[1]!.trigger('click')
 		expect(wrapper.findAll('.sy-accordion-content--open').length).toBe(2)
 
 		// Vérifier que les deux accordéons sont ouverts
@@ -396,18 +397,18 @@ describe('Accordion', () => {
 		expect(buttons.length).toBeGreaterThan(1) // S'assurer qu'il y a plusieurs boutons
 
 		// Ouvrir le premier accordéon - il devrait avoir le focus
-		await buttons[0].trigger('click')
-		expect(buttons[0].classes()).toContain('sy-accordion-button--focused')
-		expect(buttons[1].classes()).not.toContain('sy-accordion-button--focused')
+		await buttons[0]!.trigger('click')
+		expect(buttons[0]!.classes()).toContain('sy-accordion-button--focused')
+		expect(buttons[1]!.classes()).not.toContain('sy-accordion-button--focused')
 
 		// Ouvrir le deuxième accordéon - le focus devrait être transféré
-		await buttons[1].trigger('click')
-		expect(buttons[0].classes()).not.toContain('sy-accordion-button--focused')
-		expect(buttons[1].classes()).toContain('sy-accordion-button--focused')
+		await buttons[1]!.trigger('click')
+		expect(buttons[0]!.classes()).not.toContain('sy-accordion-button--focused')
+		expect(buttons[1]!.classes()).toContain('sy-accordion-button--focused')
 
 		// Fermer le deuxième accordéon - le focus devrait être supprimé
-		await buttons[1].trigger('click')
-		expect(buttons[1].classes()).not.toContain('sy-accordion-button--focused')
+		await buttons[1]!.trigger('click')
+		expect(buttons[1]!.classes()).not.toContain('sy-accordion-button--focused')
 	})
 
 	it('removes event listener on component unmount', async () => {

package/src/components/Amelipro/AmeliproPatientLogged/AmeliproPatientLogged.stories.ts

@@ -4,12 +4,35 @@ import AmeliproPatientLogged from './AmeliproPatientLogged.vue'
 import { ref, watch } from 'vue'
 
 const meta = {
+	title: 'Composants/Amelipro/IDPA/AmeliproPatientLogged',
+	component: AmeliproPatientLogged,
+	parameters: {
+		controls: {
+			exclude: [
+				'onClick:info',
+				'onClick:copy',
+				'onClick:pdf',
+				'onClick:postal-address',
+				'onClick:prevention',
+				'onClick:fund-dialog',
+				'onClick:doctor-dialog',
+				'onClick:beneficiary-change',
+				'onClick:patient-change',
+			],
+		},
+	},
 	argTypes: {
-		'btnMoreInfo': { description: 'Affiche le bouton plus d\'informations' },
+		'btnPostalAddress': { description: 'Affiche le bouton adresse postale' },
+		'btnPrevention': { description: 'Affiche le bouton prévention' },
 		'isRestrictedData': { description: 'affiche la liste des bénéficiaires sans séléction possible' },
-		'click': { description: 'Evénement émis au click sur le bouton changer de patient' },
 		'click:info': { description: 'Evénement émis au click sur le bouton informations' },
-		'click:more-info': { description: 'Evénement émis au click sur le bouton plus d\'informations' },
+		'click:copy': { description: 'Evénement émis au click sur le bouton copier le texte' },
+		'click:postal-address': { description: 'Evénement émis au click sur le bouton adresse postale' },
+		'click:prevention': { description: 'Evénement émis au click sur le bouton prévention' },
+		'click:fund-dialog': { description: 'Evénement émis au click sur le bouton caisse' },
+		'click:doctor-dialog': { description: 'Evénement émis au click sur le bouton MT' },
+		'click:beneficiary-change': { description: 'Evénement émis au changement de bénéficiaire' },
+		'click:patient-change': { description: 'Evénement émis au click sur le bouton changement de patient' },
 		'click:pdf': { description: 'Evénement émis au click sur le bouton pdf' },
 		'default': { description: 'Espace libre avant le bouton informations supplémentaire au cas où il y aurait besoin de lignes supplémentaires' },
 		'doctor': { description: 'Slot permettant de remplacer le contenu de la ligne médecin traitant au besoin' },
@@ -38,7 +61,7 @@ const meta = {
 						firstName: string
 						fund: string
 						fundDialogTitle: string
-						moreInfo: string
+						postalAddress: string
 						mtm: string
 						name: string
 						nir: string
@@ -87,8 +110,6 @@ const meta = {
 		'uniqueId': { description: 'Identifiant unique du composant' },
 		'update:model-value': { description: 'Evénement émis à la mise à jour du v-model' },
 	},
-	component: AmeliproPatientLogged,
-	title: 'Composants/Amelipro/IDPA/AmeliproPatientLogged',
 } as Meta<typeof AmeliproPatientLogged>
 
 export default meta
@@ -97,7 +118,8 @@ type Story = StoryObj<typeof AmeliproPatientLogged>
 
 export const Default: Story = {
 	args: {
-		'btnMoreInfo': true,
+		'btnPostalAddress': true,
+		'btnPrevention': true,
 		'doctorTooltipRed': true,
 		'isRestrictedData': false,
 		'patientInfos': {
@@ -133,9 +155,14 @@ export const Default: Story = {
 			],
 		},
 		'uniqueId': 'test-id',
-		'onClick': fn(),
 		'onClick:info': fn(),
-		'onClick:more-info': fn(),
+		'onClick:copy': fn(),
+		'onClick:postal-address': fn(),
+		'onClick:prevention': fn(),
+		'onClick:fund-dialog': fn(),
+		'onClick:doctor-dialog': fn(),
+		'onClick:beneficiary-change': fn(),
+		'onClick:patient-change': fn(),
 		'onClick:pdf': fn(),
 	},
 	parameters: {
@@ -144,7 +171,7 @@ export const Default: Story = {
 				name: 'Template',
 				code: `<AmeliproPatientLogged
 	v-model="myModel"
-	:btn-more-info="true"
+	:postal-address-info="true"
 	:doctor-tooltip-red="true"
 	:patient-infos="{
 		ame: 'oui',
@@ -222,31 +249,32 @@ export const Default: Story = {
 			})
 			return { args, model }
 		},
-		template: `<AmeliproPatientLogged
-	v-bind="args"
-	v-model="model"
-	@click="args['onClick']"
-	@click:infos="args['onClick:infos']"
-	@click:more-infos="args['onClick:more-infos']"
-	@click:pdf="args['onClick:pdf']"
->
-	<template #doctorDialog>
-		<p>
-			Contenu du slot "doctorDialog"
-		</p>
-	</template>
+		template: `
+          <div style="display: flex; justify-content: center;">
 
-	<template #doctorDialogFooter>
-		<p>
-			Contenu du slot "doctorDialogFooter"
-		</p>
-	</template>
+            <AmeliproPatientLogged
+                v-bind="args"
+                v-model="model"
+                style="width: 350px !important;"
+            >
+              <template #doctorDialog>
+                <p>
+                  Contenu du slot "doctorDialog"
+                </p>
+              </template>
 
-	<template #fundDialog>
-		<p>
-			Contenu du slot "fundDialog"
-		</p>
-	</template>
-</AmeliproPatientLogged>`,
+              <template #doctorDialogFooter>
+                <p>
+                  Contenu du slot "doctorDialogFooter"
+                </p>
+              </template>
+
+              <template #fundDialog>
+                <p>
+                  Contenu du slot "fundDialog"
+                </p>
+              </template>
+            </AmeliproPatientLogged>
+          </div>`,
 	}),
 }