@cnamts/synapse 1.0.14 → 1.0.16

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

@@ -8,7 +8,7 @@ const meta = {
 		'`append-${index}`': { description: 'Permet de rajouter un élément après le label des checkbox, il y a un slot par item de la liste' },
 		'`subItem-${index}`': { description: 'Permet de rajouter un élément sous une checkbox seulement lorsqu’elle est cochée (existe seulement si les props horizontal et fullHorizontal sont à false)' },
 		'append': { description: 'Permet de rajouter un élément après les label de toutes les checkbox' },
-		'ariaRequired': { description: 'Permet de rendre la selection obligatoire' },
+		'required': { description: 'Permet de rendre la selection obligatoire' },
 		'change:selected': { description: 'Événement émis au click sur une checkbox retourne les items sélectionnés' },
 		'disabled': { description: 'Permet de désactiver la CheckboxGroup' },
 		'fullHorizontal': { description: 'Permet d’afficher le checkboxGroup ainsi que le label à l’horizontal' },
@@ -35,7 +35,7 @@ const meta = {
 		'multipleRequired': { description: 'Permet de rendre la selection multiple obligatoire' },
 		'multipleRequiredErrorMessage': { description: 'Message d’erreur affiché lorsque la props multipleRequired est active' },
 		'pills': { description: 'Change le style du groupe de checkbox ' },
-		'requiredErrorMessage': { description: 'Message d’erreur affiché lorsque la props ariaRequired est active' },
+		'requiredErrorMessage': { description: 'Message d’erreur affiché lorsque la props required est active' },
 		'subItem': { description: 'Permet de rajouter un élément sous toutes checkbox seulement lorsqu’elle sont cochées (existe seulement si les props horizontal et fullHorizontal sont à false)' },
 		'uniqueId': { description: 'Id unique du groupe de checkbox' },
 		'update:model-value': { description: 'Événement émis au changement du v-model' },
@@ -236,20 +236,20 @@ export const Required: Story = {
 		groupLabel: 'Groupe obligatoire',
 		modelValue: baseItems,
 		uniqueId: 'checkbox-group-required',
-		ariaRequired: true,
+		required: true,
 	},
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `<template>
-	<p>La sélection d’au moins une option est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+	<p>La sélection d’au moins une option est obligatoire grâce à la prop <code>required</code>.</p>
 	<AmeliproCheckboxGroup
 		v-model="value"
 		group-label="Groupe obligatoire"
 		unique-id="checkbox-group-required"
 		:model-value="items"
-		aria-required
+		required
 	/>
 </template>`,
 			},
@@ -276,7 +276,8 @@ export const Required: Story = {
 			})
 			return { args, model }
 		},
-		template: `<p class="mb-2">La sélection d’au moins une option est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+		template: `<p class="mb-2">La sélection d’au moins une option est obligatoire grâce à la prop
+          <code>required</code>.</p>
 <AmeliproCheckboxGroup 
 	v-bind="args" 
 	v-model="model" 

package/src/components/Amelipro/AmeliproCheckboxGroup/AmeliproCheckboxGroup.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-	import { type PropType, computed, onUpdated, ref, useSlots } from 'vue'
+	import { computed, onUpdated, type PropType, ref, useSlots } from 'vue'
 	import type { AmeliproCheckboxGroupItem } from './types'
 	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
 
 	const props = defineProps({
-		ariaRequired: {
+		required: {
 			type: Boolean,
 			default: false,
 		},
@@ -97,7 +97,7 @@
 		return undefined
 	}
 
-	const isSingleRequiredErrorMessage = () => props.ariaRequired === true && currentValue.value.filter(item => item.isChecked).length < 1
+	const isSingleRequiredErrorMessage = () => props.required === true && currentValue.value.filter(item => item.isChecked).length < 1
 	const isMultipleRequiredErrorMessage = () => props.multipleRequired === true && currentValue.value.filter(item => item.isChecked).length < 2
 
 	const error = computed<string>(() => {
@@ -149,14 +149,14 @@
 					</slot>
 
 					<span
-						v-if="ariaRequired || multipleRequired"
+						v-if="required || multipleRequired"
 						aria-hidden="true"
 						class="d-inline-flex"
 					>
 						&nbsp;*
 					</span>
 					<span
-						v-if="ariaRequired || multipleRequired"
+						v-if="required || multipleRequired"
 						class="d-sr-only"
 					>
 						&nbsp;Champ obligatoire
@@ -171,7 +171,7 @@
 				:aria-disabled="disabled ? true : undefined"
 				:aria-invalid="checkErrorCondition ? true : undefined"
 				:aria-labelledby="uniqueId"
-				:aria-required="ariaRequired"
+				:required="required"
 				class="amelipro-checkbox-group__wrapper"
 				:class="{
 					'mt-1 mt-md-0': fullHorizontal && !pills,

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

@@ -1,4 +1,4 @@
-import { DOMWrapper, type VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { DOMWrapper, mount, shallowMount, type VueWrapper } from '@vue/test-utils'
 import { beforeEach, describe, expect, it } from 'vitest'
 import AmeliproCheckboxGroup from '../AmeliproCheckboxGroup.vue'
 import type { AmeliproCheckboxGroupItem } from '../types'
@@ -10,7 +10,7 @@ import TestHelper from '@tests/helpers/TestHelper'
 import { attachToApp } from '@tests/helpers/utils'
 
 const expectedPropOptions: ExpectedPropOptions<typeof AmeliproCheckboxGroup> = {
-	ariaRequired: {
+	required: {
 		type: Boolean,
 		default: false,
 	},
@@ -78,7 +78,7 @@ const requiredPropValues = (): ComponentProps<typeof AmeliproCheckboxGroup> => (
 
 // Valeurs pour les props "modified"
 const modifiedPropValues = (): ComponentProps<typeof AmeliproCheckboxGroup> => ({
-	ariaRequired: true,
+	required: true,
 	disabled: true,
 	fullHorizontal: true,
 	groupLabel: 'Modified group label',
@@ -266,7 +266,7 @@ describe('AmeliproCheckboxGroup', () => {
 			await vueWrapper.setProps({ disabled: true })
 			expect(labelWrappers.at(0)?.attributes('class')).toContain('text-ap-grey')
 
-			await vueWrapper.setProps({ disabled: false, ariaRequired: true })
+			await vueWrapper.setProps({ disabled: false, required: true })
 			await vueWrapper.findAll('.amelipro-checkbox-group__item-input').at(1)?.trigger('click')
 			await vueWrapper.findAll('.amelipro-checkbox-group__item-input').at(2)?.trigger('click')
 			expect(labelWrappers.at(1)?.attributes('class')).toContain('checkbox-label text-ap-red amelipro-checkbox-group__item-label-span-error')
@@ -280,7 +280,7 @@ describe('AmeliproCheckboxGroup', () => {
 			await vueWrapper.setProps({ disabled: true })
 			expect(labelWrappers.at(0)?.attributes('class')).toContain('text-ap-grey-darken-1')
 
-			await vueWrapper.setProps({ disabled: false, ariaRequired: true })
+			await vueWrapper.setProps({ disabled: false, required: true })
 			await vueWrapper.findAll('.amelipro-checkbox-group__item-input').at(1)?.trigger('click')
 			await vueWrapper.findAll('.amelipro-checkbox-group__item-input').at(2)?.trigger('click')
 			expect(labelWrappers.at(0)?.attributes('class')).toContain('checkbox-label text-ap-red amelipro-checkbox-group__item-label-span-error')
@@ -371,7 +371,7 @@ describe('AmeliproCheckboxGroup', () => {
 			let componentWrapper = vueWrapper.findComponent(AmeliproMessage)
 			expect(componentWrapper.exists()).toBe(false)
 
-			await vueWrapper.setProps({ ariaRequired: true })
+			await vueWrapper.setProps({ required: true })
 
 			inputWrappers.at(1)?.trigger('input')
 			inputWrappers.at(2)?.trigger('input')

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

@@ -41,11 +41,11 @@ exports[`AmeliproCheckboxGroup > Snapshots > renders the component with all prop
     <div
       aria-disabled="true"
       aria-labelledby="modified-unique-id"
-      aria-required="true"
       class="
         amelipro-checkbox-group__wrapper
         mt-2
       "
+      required="true"
       role="group"
     >
       <ul
@@ -222,8 +222,8 @@ exports[`AmeliproCheckboxGroup > Snapshots > renders the component with only req
     </div>
     <div
       aria-labelledby="required-unique-id"
-      aria-required="false"
       class="amelipro-checkbox-group__wrapper"
+      required="false"
       role="group"
     >
       <ul

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

@@ -57,31 +57,7 @@ exports[`AmeliproClickableTile > render correctly 1`] = `
             width: 32px;
           "
         >
-          <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>
       </span>
       <span class="
@@ -113,24 +89,7 @@ exports[`AmeliproClickableTile > render correctly 1`] = `
           width: 16px;
         "
       >
-        <span>
-          <svg
-            aria-hidden="true"
-            style="enable-background:new 0 0 14.8 24;"
-            version="1.1"
-            viewBox="0 0 14.8 24"
-            x="0px"
-            xml:space="preserve"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            y="0px"
-          >
-            <path
-              class="shape-color"
-              d="M0,2.8L9.2,12L0,21.2L2.8,24l12-12L2.8,0L0,2.8z"
-            />
-          </svg>
-        </span>
+        <span></span>
       </span>
     </span>
   </span>

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

@@ -1,16 +1,87 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
+import { shallowMount, VueWrapper } from '@vue/test-utils'
+import { beforeEach, describe, it, expect } from 'vitest'
 import AmeliproContentLayout from '../AmeliproContentLayout.vue'
+import TestHelper from '@tests/helpers/TestHelper'
+import { convertToHex } from '@/utils/functions/convertToHex'
+
+const expectedPropOptions = {
+	bgColor: {
+		type: String,
+		default: 'ap-white',
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+const requiredPropValues = () => ({})
+
+const modifiedPropValues = () => ({
+	bgColor: '#123456',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproContentLayout)
+testHelper
+	.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
 
 describe('AmeliproContentLayout', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproContentLayout, {
-			props: {
-				bgColor: 'ap-blue',
-				uniqueId: 'my-content-layout-id',
-			},
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let wrapper: VueWrapper<InstanceType<typeof AmeliproContentLayout>>
+
+		beforeEach(() => {
+			wrapper = shallowMount(AmeliproContentLayout, { props: requiredPropValues() })
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
+		describe('main container', () => {
+			it('prop uniqueId sets id attribute', async () => {
+				expect(wrapper.attributes('id')).toBeUndefined()
+
+				const { uniqueId } = modifiedPropValues()
+				await wrapper.setProps({ uniqueId })
+				expect(wrapper.attributes('id')).toBe(`${testHelper.modified('uniqueId')}-container`)
+			})
+			it('prop bgColor sets backgroundColor style', async () => {
+				const expectedDefault = `background-color: ${convertToHex(testHelper.default('bgColor'))};`
+				expect(wrapper.attributes('style')).toContain(expectedDefault)
+
+				const { bgColor } = modifiedPropValues()
+				await wrapper.setProps({ bgColor })
+				const expectedModified = `background-color: ${convertToHex(testHelper.modified('bgColor'))};`
+				expect(wrapper.attributes('style')).toContain(expectedModified)
+			})
+		})
+
+		describe('main content', () => {
+			it('prop uniqueId sets id attribute', async () => {
+				const contentDiv = wrapper.find('.amelipro-content-layout__content')
+				expect(contentDiv.attributes('id')).toBeUndefined()
+
+				const { uniqueId } = modifiedPropValues()
+				await wrapper.setProps({ uniqueId })
+				expect(contentDiv.attributes('id')).toBe(`${testHelper.modified('uniqueId')}-content`)
+			})
+		})
+	})
+
+	describe('Slots', () => {
+		it('displays slot content', () => {
+			const wrapper = shallowMount(AmeliproContentLayout, {
+				props: requiredPropValues(),
+				slots: { default: '<div id="slot-content">Slot Content</div>' },
+			})
+			expect(wrapper.find('#slot-content').text()).toBe('Slot Content')
+		})
 	})
 })

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

@@ -1,20 +1,41 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AmeliproContentLayout > render correctly 1`] = `
+exports[`AmeliproContentLayout > Snapshots > renders the component with all properties filled in 1`] = `
 <div
   class="
     amelipro-content-layout
     w-100
   "
-  id="my-content-layout-id-container"
-  style="background-color: #0C419A;"
+  id="modified-unique-id-container"
+  style="background-color: #123456;"
+>
+  <div
+    class="
+      amelipro-content-layout__content
+      mx-auto
+    "
+    id="modified-unique-id-content"
+    style="
+      max-width: 100%;
+      padding: 24px 10px;
+    "
+  ></div>
+</div>
+`;
+
+exports[`AmeliproContentLayout > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="
+    amelipro-content-layout
+    w-100
+  "
+  style="background-color: #FFFFFF;"
 >
   <div
     class="
       amelipro-content-layout__content
       mx-auto
     "
-    id="my-content-layout-id-content"
     style="
       max-width: 100%;
       padding: 24px 10px;

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

@@ -63,19 +63,7 @@ exports[`AmeliproCopyBtn > render correctly 1`] = `
           role="img"
           style="color: #00749C;"
         >
-          <span>
-            <svg
-              aria-hidden="true"
-              version="1.1"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                class="shape-color"
-                d="M8.4,0c-.6,0-1.2.3-1.7.7-.5.5-.7,1.1-.7,1.7v2.4h2.4v-2.4h13.2v13.2h-2.4v2.4h2.4c.6,0,1.2-.3,1.7-.7.5-.5.7-1.1.7-1.7V2.4c0-.6-.3-1.2-.7-1.7-.5-.5-1.1-.7-1.7-.7h-13.2ZM2.4,6c-.6,0-1.2.3-1.7.7C.3,7.2,0,7.8,0,8.4v13.2C0,22.2.3,22.8.7,23.3c.5.5,1.1.7,1.7.7h13.2c.6,0,1.2-.3,1.7-.7.5-.5.7-1.1.7-1.7v-13.2c0-.6-.3-1.2-.7-1.7-.5-.5-1.1-.7-1.7-.7H2.4Z"
-              />
-            </svg>
-          </span>
+          <span></span>
         </span>
       </span>
     </span>

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

@@ -5,7 +5,7 @@ import AmeliproTooltips from '../AmeliproTooltips/AmeliproTooltips.vue'
 
 const meta = {
 	argTypes: {
-		'ariaRequired': { description: 'Permet de rendre la selection obligatoire d’au moins une option' },
+		'required': { description: 'Permet de rendre la selection obligatoire d’au moins une option' },
 		'change:selected': { description: 'Événement émis au click sur une checkbox/bouton radio retourne le ou les éléments sélectionnés selon si la property unique est activé ou non et un identifiant pour le groupe' },
 		'disabled': { description: 'Permet de désactiver le CustomSelector' },
 		'groupLabel': { description: 'Label du groupe de checkbox/boutons radios' },
@@ -29,7 +29,7 @@ const meta = {
 		},
 		'multipleRequired': { description: 'Permet de rendre la selection multiple obligatoire' },
 		'multipleRequiredErrorMessage': { description: 'Message d’erreur affiché lorsque la props multipleRequired est active' },
-		'requiredErrorMessage': { description: 'Message d’erreur affiché lorsque la props ariaRequired est active' },
+		'requiredErrorMessage': { description: 'Message d’erreur affiché lorsque la props required est active' },
 		'unique': { description: 'Pour avoir seulement un item sélectionnable ' },
 		'uniqueId': { description: 'Id unique du groupe de checkbox/boutons radios' },
 		'update:model-value': { description: 'Événement émis au changement du v-model' },
@@ -281,7 +281,7 @@ export const Required: Story = {
 		groupLabel: 'Sélection obligatoire',
 		modelValue: items,
 		uniqueId: 'custom-selector-required',
-		ariaRequired: true,
+		required: true,
 		requiredErrorMessage: 'Veuillez sélectionner au moins une option.',
 	},
 	parameters: {
@@ -289,12 +289,12 @@ export const Required: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-  <p>La sélection d’au moins une option est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+  <p>La sélection d’au moins une option est obligatoire grâce à la prop <code>required</code>.</p>
   <AmeliproCustomSelector
     v-model="value"
     group-label="Sélection obligatoire"
     unique-id="custom-selector-required"
-    aria-required
+    required
     required-error-message="Veuillez sélectionner au moins une option."
   />
 </template>`,
@@ -318,7 +318,8 @@ export const Required: Story = {
 			})
 			return { args, model }
 		},
-		template: `<p class="mb-2">La sélection d’au moins une option est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+		template: `<p class="mb-2">La sélection d’au moins une option est obligatoire grâce à la prop
+          <code>required</code>.</p>
 <AmeliproCustomSelector v-bind="args" v-model="model" />`,
 	}),
 }

package/src/components/Amelipro/AmeliproCustomSelector/AmeliproCustomSelector.vue

@@ -5,7 +5,7 @@
 	import type { IndexedObject } from '../types'
 
 	const props = defineProps({
-		ariaRequired: {
+		required: {
 			type: Boolean,
 			default: false,
 		},
@@ -98,7 +98,7 @@
 		}
 	}
 
-	const isSingleRequiredErrorMessage = computed(() => props.ariaRequired === true && (currentValue.value.filter(item => item.isChecked).length < 1))
+	const isSingleRequiredErrorMessage = computed(() => props.required === true && (currentValue.value.filter(item => item.isChecked).length < 1))
 	const isMultipleRequiredErrorMessage = computed(() => props.multipleRequired === true && !props.unique && (currentValue.value.filter(item => item.isChecked).length < 2))
 	const error = computed<string>(() => {
 		if (isAlreadyCheckedOnce.value === true) {
@@ -150,7 +150,7 @@
 				{{ groupLabel }}
 
 				<span
-					v-if="ariaRequired || multipleRequired"
+					v-if="required || multipleRequired"
 					aria-hidden="true"
 					class="d-inline-flex"
 				>
@@ -158,7 +158,7 @@
 				</span>
 
 				<span
-					v-if="ariaRequired || multipleRequired"
+					v-if="required || multipleRequired"
 					class="d-sr-only"
 				>
 					&nbsp;Champ obligatoire
@@ -213,7 +213,7 @@
 			:aria-disabled="disabled ? true : undefined"
 			:aria-invalid="checkErrorCondition ? true : undefined"
 			:aria-labelledby="uniqueId"
-			:aria-required="ariaRequired || multipleRequired ? true : undefined"
+			:required="required || multipleRequired ? true : undefined"
 			class="amelipro-custom-selector__group"
 			role="group"
 		>