@cnamts/synapse 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -126,7 +126,10 @@
   },
   "pnpm": {
     "overrides": {
-      "undici": "7.15.0"
+      "esbuild": "^0.25.0",
+      "undici": "7.15.0",
+      "glob": ">=10.5.0",
+      "js-yaml": ">=4.1.1"
     },
     "patchedDependencies": {
       "undici@7.15.0": "patches/undici@7.15.0.patch"

package/src/assets/amelipro/icons.ts

@@ -1165,4 +1165,21 @@ export const icons: Icons = {
 			<path d="M25.4,18l-.9-.8,1.1-1.1h-4.6v-1.2h4.6l-1.1-1.1.9-.8,2.6,2.5-2.6,2.5Z"/>
 		</g>
 	</svg>`,
+	attele: `
+	<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 34 34">
+		 <path class="${CIRCLE_COLOR}" d="M16,0c-3.2,0-6.3.9-8.9,2.7-2.6,1.8-4.7,4.3-5.9,7.2C0,12.8-.3,16,.3,19.1c.6,3.1,2.1,6,4.4,8.2,2.2,2.2,5.1,3.8,8.2,4.4,3.1.6,6.3.3,9.2-.9s5.4-3.3,7.2-5.9c1.8-2.6,2.7-5.7,2.7-8.9,0-2.1-.4-4.2-1.2-6.1-.8-1.9-2-3.7-3.5-5.2-1.5-1.5-3.3-2.7-5.2-3.5C20.2.4,18.1,0,16,0Z"/>
+		 <g class="${SHAPE_COLOR}">
+			<path  d="M6.4,6.4c0,0,0,.3,0,1,0,.5,0,1,0,1.1v.3h2.7v-.3c0-.3.2-.7.5-.8.2-.1.4-.1,1.4-.2,1.6,0,1.9,0,2.2.3.2.2.3.3.3.6v.3h1.2c1.1,0,1.2,0,1.2-.1s0-.6.1-1.1c0-.8,0-1,0-1.1-.1-.2-9.4-.1-9.5,0Z"/>
+			<path  d="M9.8,8.3c0,0,0,.3,0,.5,0,.6,0,.6,1.6.6s1.6,0,1.6-.7,0-.5,0-.5c0,0-.5,0-1.5,0s-1.4,0-1.5.1Z"/>
+			<path  d="M6.2,9.7l-.2.2v2c0,2.3,0,2.3.4,2.5.1,0,.7,0,1.5,0h1.2l.2-.3c.1-.2.3-.3.5-.3h.3v-3.8h-.3c-.2-.1-.3-.2-.4-.4l-.2-.2h-2.8l-.2.2Z"/>
+			<path  d="M10.7,11.9v1.9h1.3v-3.7h-1.3v1.9Z"/>
+			<path  d="M9.8,14.6c0,0,0,.3,0,.5,0,.6,0,.6,1.6.6s1.4,0,1.5,0c.1-.1.1-.9,0-1,0,0-.5,0-1.5,0s-1.4,0-1.5.1Z"/>
+			<path  d="M6.9,15.8c0,.6,0,.9-.1,1.3,0,.3-.1.6-.1.6,0,0,.2.1.4.2,2.3,1.2,4.1,3.3,4.6,5.4,0,.2.1.4.1.4s.6-.9,1.2-1.9l1.2-1.9v-.2c-.2-.1-.3-.3-.3-.5,0-.3,0-.4.9-1.7l.9-1.4v-.3c-.1-.1-.2-.4-.2-.6v-.3h-2v.3c0,.3,0,.4-.2.6-.3.3-.5.4-2.1.4-1.3,0-1.4,0-1.6-.2-.3-.2-.4-.5-.4-.8v-.3h-2.3v.7Z"/>
+			<path  d="M15.2,18c-.5.8-.8,1.2-.8,1.3,0,.1.2.3.8.6,1.4.9,1.6,1,1.8,1,0,0,.4-.5.7-1l.6-.9-.4-.2c-.5-.3-1.4-1.1-1.7-1.6-.1-.2-.2-.3-.2-.3,0,0-.4.5-.8,1.1Z"/>
+			<path  d="M6.2,19.3c-.3,1.2-.3,2.2,0,3,.4,1.3,1.3,2.3,2.5,2.9.7.3,1.3.5,1.9.5h.4v-.3c.1-.6,0-1.8-.4-2.7-.4-1.1-1.6-2.5-2.7-3.3-.6-.4-1.3-.9-1.4-.9s-.2.4-.3.8Z"/>
+			<path  d="M18.2,20.3c-.8,1.2-1.1,1.4-1.7,1.1-.2,0-.3,0-.3,0,0,0-.6.9-1.2,1.9l-1.1,1.8h.3c.2,0,.6,0,.8.1.7.1,2.5.4,3.4.4h.8s0-.3,0-.3c.2-1.4.8-3,1.6-4.2.1-.2.3-.4.2-.4-.1-.1-2.2-1.4-2.2-1.4s-.3.4-.7.9Z"/>
+			<path  d="M13.2,22.6c-1.4,2.2-1.4,2.3-1.4,2.6s0,.4.7.2h.5c0-.1,1.3-2.2,1.3-2.2.7-1.2,1.4-2.2,1.4-2.2,0,0-.8-.7-1-.7s-.7,1-1.5,2.3Z"/>
+			<path  d="M21.5,21.3c-.3.4-.8,1.4-1,1.9-.2.6-.5,1.5-.6,2v.4c0,0,1.8,0,1.8,0,1.7,0,1.9,0,2.3-.1,1.3-.4,2.1-1.6,2.1-2.9s0-.7-1.4-.7-1.9-.1-2.8-.7h-.2c0-.1-.2,0-.2,0Z"/>
+		  </g>
+	</svg>`,
 }

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

@@ -11,7 +11,6 @@ const meta = {
 		'defaultSlide': { description: 'numéro de la slide affichée par défaut' },
 		'duration': { description: 'Durée de transition entre les slides du carrousel en secondes' },
 		'fillSlideOrientation': { description: 'Définit dans quel sens doivent être remplies les slide prend les valeur `left` ou `right`' },
-		'infiniteRotation': { description: 'Booléen permettant de faire boucler les slides du carrousel' },
 		'item': { description: 'Slots générés automatiquement pour chaque item, afin de donner le même aspect à tous les items' },
 		'items': {
 			description: 'Tableau comprenant la liste des blocs dépliants à afficher dans le carrousel',
@@ -127,22 +126,18 @@ export const Default: Story = {
 		title="Titre du carrousel"
 		unique-id="amelipro-accordion-frieze-id"
 	>
-		<template #item>
-			<div class="d-flex">
+		<template 
+		  v-for="(item, index) in items"
+		  :key="item.uniqueId"
+		  #[slotNames[index]]
+		  >
 				<AmeliproCard 
-					card-title="Contenu dépliant"
+					card-title="'Contenu ' + item.uniqueId"
 					class="mt-4"				
 				>
-					<template #default>
-						<p class="mb-0">
-							Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
-							à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
-							faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
-							un texte en faux latin, le Lorem ipsum ou Lipsum.
-						</p>
-					</template>
+					Le contenu est libre ici, par exemple je reprends le numéro du bloc déplié :
+                    {{ item.uniqueId }}
 				</AmeliproCard>
-			</div>
 		</template>
 	</AmeliproAccordionFrieze>
 </template>
@@ -225,6 +220,11 @@ export const Default: Story = {
 			uniqueId: '14',
 		},
 	]
+	
+	const slotNames = items.map((item, index) =>
+	\`amelipro-accordion-frieze-id-slot-slide-\${index}-item-\${item.uniqueId}\`
+	)
+
 </script>`,
 			},
 		],
@@ -232,30 +232,34 @@ export const Default: Story = {
 	render: args => ({
 		components: { AmeliproCard, AmeliproAccordionFrieze },
 		setup() {
-			return { args }
+			const items = args.items ?? []
+
+			const slotNames = items.map((item, index) =>
+				`amelipro-accordion-frieze-id-slot-slide-${index}-item-${item.uniqueId}`,
+			)
+
+			return { slotNames, args }
 		},
 		template: `
-<AmeliproAccordionFrieze
-	v-bind="args"
->
-	<template #item>
-		<div class="d-flex">
-			<AmeliproCard 
-				card-title="Contenu dépliant"
-				class="mt-4"
-			>
-				<template #default>
-					<p class="mb-0">
-						Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
-						à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
-						faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
-						un texte en faux latin, le Lorem ipsum ou Lipsum.
-					</p>
-				</template>
-			</AmeliproCard>
-		</div>
-	</template>
-</AmeliproAccordionFrieze>
-		`,
+          <AmeliproAccordionFrieze
+              v-bind="args"
+              :items="args.items"
+              title="Titre du carrousel"
+              unique-id="amelipro-accordion-frieze-id"
+          >
+            <template
+                v-for="(item, index) in args.items"
+                :key="item.uniqueId"
+                v-slot:[slotNames[index]]
+            >
+              <AmeliproCard
+                  :card-title="\`Contenu \${item.uniqueId}\`"
+                  class="mt-4"
+              >
+                Le contenu est libre ici, par exemple je reprends le numéro du bloc déplié : {{ item.uniqueId }}
+              </AmeliproCard>
+            </template>
+          </AmeliproAccordionFrieze>
+        `,
 	}),
 }

package/src/components/Amelipro/AmeliproAccordionGroup/__tests__/AmeliproAccordionGroup.spec.ts

@@ -1,33 +1,233 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
+import type { ExpectedPropOptions } from '@tests/types'
 import AmeliproAccordionGroup from '../AmeliproAccordionGroup.vue'
+import TestHelper from '@tests/helpers/TestHelper'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { beforeEach, describe, expect, it } from 'vitest'
+import type { PropType } from 'vue'
+import type { AmeliproAccordionGroupItem } from '../types'
+import { VueWrapper, shallowMount } from '@vue/test-utils'
+import AmeliproAccordionTemplate from '../../AmeliproAccordion/AmeliproAccordionTemplate/AmeliproAccordionTemplate.vue'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproAccordionGroup> = {
+	defaultItemOpened: {
+		type: [Number, null] as PropType<number | null>,
+		default: null,
+	},
+	groupBorderColor: {
+		type: String,
+		default: 'ap-grey-lighten-2',
+	},
+	groupBordered: {
+		type: Boolean,
+		default: true,
+	},
+	groupColor: {
+		type: String,
+		default: 'ap-white',
+	},
+	groupTitleLevel: {
+		type: Number,
+		default: 2,
+	},
+	groupTitleUppercase: {
+		type: Boolean,
+		default: false,
+	},
+	headerRightWidth: {
+		type: String,
+		default: '50%',
+	},
+	hideSeparator: {
+		type: Boolean,
+		default: false,
+	},
+	items: {
+		type: Array as PropType<AmeliproAccordionGroupItem[]>,
+		required: true,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+const requiredPropValues = (): ComponentProps<typeof AmeliproAccordionGroup> => ({
+	items: [
+		{
+			title: 'Accordion 1',
+			id: 'accordion-1-id',
+		},
+		{
+			title: 'Accordion 2',
+			id: 'accordion-2-id',
+		},
+	],
+})
+const modifiedPropValues = (): ComponentProps<typeof AmeliproAccordionGroup> => ({
+	defaultItemOpened: 1,
+	groupBorderColor: 'ap-red-lighten-2',
+	groupBordered: false,
+	groupColor: 'ap-red',
+	groupTitleLevel: 3,
+	groupTitleUppercase: true,
+	headerRightWidth: '100px',
+	hideSeparator: true,
+	items: [
+		{
+			title: 'Modified accordion 1',
+			id: 'modified-accordion-1-id',
+		},
+		{
+			title: 'Modified accordion 2',
+			id: 'modified-accordion-2-id',
+		},
+	],
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproAccordionGroup)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
 
 describe('AmeliproAccordionGroup', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproAccordionGroup, {
-			props: {
-				items: [
-					{
-						id: 'test-1',
-						title: 'Exemple 1',
-					},
-					{
-						id: 'test-2',
-						title: 'Exemple 2',
-					},
-					{
-						id: 'test-3',
-						title: 'Exemple 3',
-					},
-					{
-						id: 'test-4',
-						title: 'Exemple 4',
-					},
-				],
-				uniqueId: 'amelipro-accordion-group-unique-id',
-			},
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let wrapper: VueWrapper<InstanceType<typeof AmeliproAccordionGroup>>
+
+		beforeEach(() => {
+			wrapper = shallowMount(AmeliproAccordionGroup, { props: requiredPropValues() })
+		})
+
+		describe('main div', () => {
+			it('prop uniqueId sets attribute id', async () => {
+			// assertion par défaut
+				expect(wrapper.attributes('id')).toBe(testHelper.default('uniqueId'))
+
+				// assertion modifiée
+				const { uniqueId } = modifiedPropValues()
+				await wrapper.setProps({ uniqueId })
+				expect(wrapper.attributes('id')).toBe(testHelper.modified('uniqueId'))
+			})
+		})
+	})
+
+	describe('Setting props should update props or attributes of inner components', () => {
+		let wrapper: VueWrapper<InstanceType<typeof AmeliproAccordionGroup>>
+
+		beforeEach(() => {
+			wrapper = shallowMount(AmeliproAccordionGroup, { props: requiredPropValues() })
+		})
+
+		describe('AmeliproAccordionTemplate', () => {
+			it('prop groupBorderColor sets prop borderColor', async () => {
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('borderColor')).toBe(testHelper.default('groupBorderColor'))
+
+				const { groupBorderColor } = modifiedPropValues()
+				await wrapper.setProps({ groupBorderColor })
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('borderColor')).toBe(testHelper.modified('groupBorderColor'))
+			})
+
+			it('prop groupBordered sets prop bordered', async () => {
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('bordered')).toBe(testHelper.default('groupBordered'))
+				const { groupBordered } = modifiedPropValues()
+				await wrapper.setProps({ groupBordered })
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('bordered')).toBe(testHelper.modified('groupBordered'))
+			})
+
+			it('prop groupColor sets prop cardColor', async () => {
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('cardColor')).toBe(testHelper.default('groupColor'))
+				const { groupColor } = modifiedPropValues()
+				await wrapper.setProps({ groupColor })
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('cardColor')).toBe(testHelper.modified('groupColor'))
+			})
+
+			it('prop headerRightWidth sets prop headerRightWidth', async () => {
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('headerRightWidth')).toBe(testHelper.default('headerRightWidth'))
+				const { headerRightWidth } = modifiedPropValues()
+				await wrapper.setProps({ headerRightWidth })
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('headerRightWidth')).toBe(testHelper.modified('headerRightWidth'))
+			})
+
+			it('prop hideSeparator sets prop hideSeparator', async () => {
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('hideSeparator')).toBe(testHelper.default('hideSeparator'))
+				const { hideSeparator } = modifiedPropValues()
+				await wrapper.setProps({ hideSeparator })
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('hideSeparator')).toBe(testHelper.modified('hideSeparator'))
+			})
+
+			it('prop groupTitleLevel sets prop titleLevel', async () => {
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('titleLevel')).toBe(testHelper.default('groupTitleLevel'))
+				const { groupTitleLevel } = modifiedPropValues()
+				await wrapper.setProps({ groupTitleLevel })
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('titleLevel')).toBe(testHelper.modified('groupTitleLevel'))
+			})
+
+			it('prop groupTitleUppercase sets prop titleUppercase', async () => {
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('titleUppercase')).toBe(testHelper.default('groupTitleUppercase'))
+				const { groupTitleUppercase } = modifiedPropValues()
+				await wrapper.setProps({ groupTitleUppercase })
+				expect(wrapper.findComponent(AmeliproAccordionTemplate).props('titleUppercase')).toBe(testHelper.modified('groupTitleUppercase'))
+			})
+
+			it('prop items sets accordion-title and unique-id for each item', async () => {
+				const defaultItems = testHelper.default('items')
+				const templates = wrapper.findAllComponents(AmeliproAccordionTemplate)
+				expect(templates.length).toBe(defaultItems.length)
+				for (let i = 0; i < templates.length; i++) {
+					expect(templates[i].props('accordionTitle')).toBe(defaultItems[i].title)
+					expect(templates[i].props('uniqueId')).toBe(defaultItems[i].id)
+				}
+
+				const { items } = modifiedPropValues()
+				await wrapper.setProps({ items })
+				const modTemplates = wrapper.findAllComponents(AmeliproAccordionTemplate)
+				expect(modTemplates.length).toBe(items.length)
+				for (let i = 0; i < modTemplates.length; i++) {
+					expect(modTemplates[i].props('accordionTitle')).toBe(items[i].title)
+					expect(modTemplates[i].props('uniqueId')).toBe(items[i].id)
+				}
+			})
+		})
+	})
+
+	describe('Events', () => {
+		let wrapper: VueWrapper<InstanceType<typeof AmeliproAccordionGroup>>
+
+		beforeEach(() => {
+			wrapper = shallowMount(AmeliproAccordionGroup, {
+				props: requiredPropValues(),
+			})
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
+		it('emit \'change\' with correct id when openClose is called', async () => {
+			const items = testHelper.default('items')
+			await wrapper.vm.openClose(items[0].id)
+			// L'accordéon s'ouvre, l'id est celui de l'item
+			const emitted = wrapper.emitted('change')
+			expect(emitted).toBeTruthy()
+			expect(emitted![0][0]).toBe(items[0].id)
+
+			// On referme le même accordéon, l'id devient null
+			await wrapper.vm.openClose(items[0].id)
+			const emitted2 = wrapper.emitted('change')
+			expect(emitted2![1][0]).toBe(null)
+		})
+
+		it('emit \'change\' with correct id when clicking on accordion', async () => {
+			const items = testHelper.default('items')
+			const templates = wrapper.findAllComponents(AmeliproAccordionTemplate)
+			await templates[1].vm.$emit('open-close')
+			const emitted = wrapper.emitted('change')
+			expect(emitted).toBeTruthy()
+			expect(emitted![0][0]).toBe(items[1].id)
+		})
 	})
 })