@cnamts/synapse 1.0.21 → 1.0.23

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

@@ -1,6 +1,5 @@
 import { describe, it, expect, vi } from 'vitest'
 import { mount, shallowMount } from '@vue/test-utils'
-
 import Accordion from '../Accordion.vue'
 import { config } from '../config'
 
@@ -23,7 +22,7 @@ describe('Accordion', () => {
 
 	it('renders correctly', () => {
 		const wrapper = shallowMount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -34,7 +33,7 @@ describe('Accordion', () => {
 
 	it('renders the correct number of accordion items', () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -47,7 +46,7 @@ describe('Accordion', () => {
 	it('uses the correct heading level', () => {
 		const headingLevel = 3
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel,
 			},
@@ -59,7 +58,7 @@ describe('Accordion', () => {
 
 	it('toggles content visibility when button is clicked', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -82,7 +81,7 @@ describe('Accordion', () => {
 
 	it('renders string content correctly', () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: [defaultItems[0]!],
 				headingLevel: 2,
 			},
@@ -97,7 +96,7 @@ describe('Accordion', () => {
 
 	it('renders object content correctly', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: [defaultItems[2]!],
 				headingLevel: 2,
 			},
@@ -114,7 +113,7 @@ describe('Accordion', () => {
 
 	it('has correct accessibility attributes', () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -137,7 +136,7 @@ describe('Accordion', () => {
 
 	it('updates aria-expanded attribute when toggled', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -155,7 +154,7 @@ describe('Accordion', () => {
 
 	it('applies focus style when accordion is opened', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -185,7 +184,7 @@ describe('Accordion', () => {
 		})
 
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 				groupId: 'test-group',
@@ -209,7 +208,7 @@ describe('Accordion', () => {
 
 	it('applies primary color to the title', () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -224,7 +223,7 @@ describe('Accordion', () => {
 
 	it('updates tabindex when accordion is opened', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -246,7 +245,7 @@ describe('Accordion', () => {
 
 	it('renders semantic content structure for accessibility', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: [
 					{ id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
 					{
@@ -300,7 +299,7 @@ describe('Accordion', () => {
 		}
 
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 				...customOptions,
@@ -336,7 +335,7 @@ describe('Accordion', () => {
 
 	it('uses default colors from config when no custom options are provided', () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -363,7 +362,7 @@ describe('Accordion', () => {
 
 	it('can open multiple accordions simultaneously', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -387,7 +386,7 @@ describe('Accordion', () => {
 
 	it('transfers focus correctly when clicking on different accordion items', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -417,7 +416,7 @@ describe('Accordion', () => {
 
 		// Monter le composant
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -435,4 +434,117 @@ describe('Accordion', () => {
 		// Restaurer le spy
 		removeEventListenerSpy.mockRestore()
 	})
+
+	describe('v-model support', () => {
+		it('opens items specified in modelValue prop', () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item2'],
+				},
+			})
+
+			const contents = wrapper.findAll('.sy-accordion-content')
+			expect(contents[1]!.classes()).toContain('sy-accordion-content--open')
+			expect(contents[0]!.classes()).not.toContain('sy-accordion-content--open')
+		})
+
+		it('opens multiple items specified in modelValue', () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item1', 'item3'],
+				},
+			})
+
+			const contents = wrapper.findAll('.sy-accordion-content')
+			expect(contents[0]!.classes()).toContain('sy-accordion-content--open')
+			expect(contents[1]!.classes()).not.toContain('sy-accordion-content--open')
+			expect(contents[2]!.classes()).toContain('sy-accordion-content--open')
+		})
+
+		it('sets correct aria-expanded for pre-opened items', () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item1'],
+				},
+			})
+
+			const buttons = wrapper.findAll('.sy-accordion-button')
+			expect(buttons[0]!.attributes('aria-expanded')).toBe('true')
+			expect(buttons[1]!.attributes('aria-expanded')).toBe('false')
+		})
+
+		it('toggles an item and updates the DOM when clicked', async () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item1'],
+				},
+			})
+
+			// item1 is initially open
+			let contents = wrapper.findAll('.sy-accordion-content')
+			expect(contents[0]!.classes()).toContain('sy-accordion-content--open')
+
+			// Close item1
+			const firstButton = wrapper.find('.sy-accordion-button')
+			await firstButton.trigger('click')
+
+			contents = wrapper.findAll('.sy-accordion-content')
+			expect(contents[0]!.classes()).not.toContain('sy-accordion-content--open')
+		})
+
+		it('opens additional items while keeping existing ones open', async () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item1'],
+				},
+			})
+
+			// Open item2 as well
+			const buttons = wrapper.findAll('.sy-accordion-button')
+			await buttons[1]!.trigger('click')
+
+			const contents = wrapper.findAll('.sy-accordion-content')
+			expect(contents[0]!.classes()).toContain('sy-accordion-content--open')
+			expect(contents[1]!.classes()).toContain('sy-accordion-content--open')
+		})
+
+		it('defaults to no open items when no modelValue is provided', () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: [],
+				},
+			})
+
+			const buttons = wrapper.findAll('.sy-accordion-button')
+			buttons.forEach((button) => {
+				expect(button.attributes('aria-expanded')).toBe('false')
+			})
+		})
+
+		it('sets correct tabindex on content region for pre-opened items', () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item1'],
+				},
+			})
+
+			const regions = wrapper.findAll('[role="region"]')
+			expect(regions[0]!.attributes('tabindex')).toBe('0')
+			expect(regions[1]!.attributes('tabindex')).toBe('-1')
+		})
+	})
 })

package/src/components/Amelipro/AmeliproAccordion/AmeliproAccordionTemplate/AmeliproAccordionTemplate.vue

@@ -111,14 +111,14 @@
 				<p
 					:id="uniqueId + 'title'"
 					:aria-level="titleLevel"
-					class="font-weight-semibold text-h3 mb-0"
+					class="text-h3 mb-0"
 					role="heading"
 				>
 					<button
 						:id="`${uniqueId}-header-btn-open-close`"
 						:aria-controls="uniqueId"
 						:aria-expanded="isOpen === true ? 'true' : 'false'"
-						class="text-ap-grey-darken-1 text-left d-inline-flex align-center accordion-btn font-weight-semibold"
+						class="text-ap-grey-darken-1 text-left d-inline-flex align-center accordion-btn"
 						:class="titleUppercase ? 'text-uppercase' : undefined"
 						type="button"
 						@blur="focus = false"

package/src/components/Amelipro/AmeliproAccordion/AmeliproAccordionTemplate/__tests__/__snapshots__/AmeliproAccordionTemplate.spec.ts.snap

@@ -31,7 +31,6 @@ exports[`AmeliproAccordionTemplate > render correctly 1`] = `
       <p
         aria-level="2"
         class="
-          font-weight-semibold
           mb-0
           text-h3
         "
@@ -45,7 +44,6 @@ exports[`AmeliproAccordionTemplate > render correctly 1`] = `
             accordion-btn
             align-center
             d-inline-flex
-            font-weight-semibold
             text-ap-grey-darken-1
             text-left
           "

package/src/components/Amelipro/AmeliproAccordionFrieze/AmeliproAccordionFrieze.vue

@@ -289,7 +289,7 @@
 								:id="`${uniqueId}-btn-${item.uniqueId}`"
 								class="w-100 item-empty"
 							>
-								<span class="d-block font-weight-semibold">{{ item.title }}</span>
+								<span class="d-block">{{ item.title }}</span>
 								<span class="d-flex justify-center align-center item-btn__link-style-text">
 									{{ item.linkStyleText }}
 								</span>
@@ -304,7 +304,7 @@
 								:tabindex="currentSlide === index ? '0' : '-1'"
 								@click="emitOpenCloseEvent(item.uniqueId)"
 							>
-								<span class="d-block font-weight-semibold">{{ item.title }}</span>
+								<span class="d-block">{{ item.title }}</span>
 								<span class="d-flex justify-center align-center item-btn__link-style-text">
 									{{ item.linkStyleText }}
 

package/src/components/Amelipro/AmeliproAccordionFrieze/__tests__/__snapshots__/AmeliproAccordionFrieze.spec.ts.snap

@@ -116,10 +116,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-1"
               tabindex="0"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 1
               </span>
               <span class="
@@ -172,10 +169,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-2"
               tabindex="0"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 2
               </span>
               <span class="
@@ -243,10 +237,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-3"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 3
               </span>
               <span class="
@@ -299,10 +290,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-4"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 4
               </span>
               <span class="
@@ -355,10 +343,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-5"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 5
               </span>
               <span class="
@@ -411,10 +396,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-6"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 6
               </span>
               <span class="
@@ -467,10 +449,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-7"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 7
               </span>
               <span class="
@@ -523,10 +502,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-8"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 8
               </span>
               <span class="
@@ -594,10 +570,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-9"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 9
               </span>
               <span class="
@@ -650,10 +623,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-10"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 10
               </span>
               <span class="
@@ -706,10 +676,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-11"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 11
               </span>
               <span class="
@@ -762,10 +729,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-12"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 12
               </span>
               <span class="
@@ -818,10 +782,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-13"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 13
               </span>
               <span class="
@@ -874,10 +835,7 @@ exports[`AmeliproAccordionFrieze > render correctly 1`] = `
               id="amelipro-accordion-frieze-unique-id-btn-14"
               tabindex="-1"
             >
-              <span class="
-                d-block
-                font-weight-semibold
-              ">
+              <span class="d-block">
                 titre 14
               </span>
               <span class="

package/src/components/Amelipro/AmeliproAccordionList/AmeliproAccordionList.vue

@@ -189,7 +189,7 @@
 		>
 			<p
 				:id="`${uniqueId}-result-counter`"
-				class="d-inline-block mb-0 total-counter font-weight-semibold"
+				class="d-inline-block mb-0 total-counter"
 			>
 				<span class="d-sr-only">Nombre de lignes dans la liste ci-après :</span>
 				{{ items.length }} {{ counterLabel }}