@cnamts/synapse 1.0.14 → 1.0.16

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

@@ -1,393 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AmeliproCaptcha > render correctly 1`] = `
-<div
-  class="
-    amelipro-card
-    d-flex
-    flex-column
-    flex-md-row
-    w-100
-  "
-  id="my-captcha-id-container"
-  style="
-    background-color: #FAFAFA;
-    border: 1px solid #DDDEDE;
-  "
->
-  <div
-    class="amelipro-card__left-part"
-    id="my-captcha-id-left-part"
-    style="width: 100%;"
-  >
-    <!-- v-if -->
-    <div
-      class="amelipro-card__content"
-      id="my-captcha-id-content"
-    >
-      <p
-        class="
-          amelipro-captcha__title
-          font-weight-bold
-          mb-4
-          text-h4
-        "
-        id="my-captcha-id-title"
-      >
-        Code de sécurité
-      </p>
-      <div
-        class="captcha__wrapper"
-        id="my-captcha-id-captcha"
-      >
-        <div style="display: none;">
-          <button
-            class="
-              amelipro-btn
-              amelipro-btn--style
-              bg-ap-blue-darken-1
-              btn
-              btn
-              btn-primary
-              btn-primary
-              captcha-audio-btn
-              captcha-audio-btn
-              elevation-0
-              small-spacer
-              small-spacer
-              v-btn
-              v-btn--density-default
-              v-btn--flat
-              v-btn--size-default
-              v-btn--variant-flat
-              v-theme--light
-            "
-            id="my-captcha-id-launch-btn"
-            style="
-              height: auto;
-              min-height: 2.5rem;
-              color: #FFFFFF !important;
-            "
-            type="button"
-          >
-            <span class="v-btn__overlay"></span>
-            <span class="v-btn__underlay"></span>
-            <!---->
-            <span
-              class="v-btn__content"
-              data-no-activator=""
-            >
-              <span class="
-                align-center
-                amelipro-custom-btn
-                d-flex
-                flex-row
-              ">
-                Lecture
-                <!-- v-if -->
-                <!-- v-if -->
-              </span>
-            </span>
-            <!---->
-            <!---->
-          </button>
-          <audio
-            id="my-captcha-id-player"
-            src="myAudioFile"
-          ></audio>
-        </div>
-        <img
-          alt="liste de caractères"
-          class="captcha-img"
-          id="my-captcha-id-captcha-img"
-          src="myImgFile"
-          style="
-            width: 320px;
-            max-width: 100%;
-          "
-        />
-        <div
-          class="mt-4"
-          id="my-captcha-id-input-container"
-          style="margin-bottom: 12px;"
-        >
-          <div class="
-            amelipro-text-field__wrapper
-            d-flex
-            flex-column
-            w-100
-          ">
-            <div class="
-              align-baseline
-              d-inline-flex
-              mb-1
-            ">
-              <label
-                class="
-                  amelipro-text-field__label
-                  mr-2
-                "
-                for="my-captcha-id-input"
-                id="my-captcha-id-input-label"
-              >
-                Caractères de l’image :
-                <span>
-                  <span aria-hidden="true">
-                    &nbsp;*
-                  </span>
-                  <span class="d-sr-only">
-                    &nbsp;Champ obligatoire
-                  </span>
-                </span>
-              </label>
-            </div>
-            <div
-              class="
-                amelipro-text-field
-                pt-0
-                v-input
-                v-input--center-affix
-                v-input--density-compact
-                v-input--dirty
-                v-input--horizontal
-                v-locale--is-ltr
-                v-text-field
-                v-theme--light
-              "
-              style="max-width: 320px;"
-            >
-              <!---->
-              <div class="v-input__control">
-                <div class="
-                  bg-ap-white
-                  v-field
-                  v-field--active
-                  v-field--center-affix
-                  v-field--dirty
-                  v-field--has-background
-                  v-field--no-label
-                  v-field--variant-outlined
-                  v-locale--is-ltr
-                  v-theme--light
-                ">
-                  <div class="v-field__overlay"></div>
-                  <div class="v-field__loader">
-                    <div
-                      aria-hidden="true"
-                      aria-valuemax="100"
-                      aria-valuemin="0"
-                      class="
-                        v-locale--is-ltr
-                        v-progress-linear
-                        v-theme--light
-                      "
-                      role="progressbar"
-                      style="
-                        top: 0px;
-                        height: 0px;
-                        --v-progress-linear-height: 2px;
-                      "
-                    >
-                      <!---->
-                      <div
-                        class="
-                          bg-ap-blue-darken-1
-                          v-progress-linear__background
-                        "
-                        style="opacity: NaN;"
-                      ></div>
-                      <div
-                        class="
-                          bg-ap-blue-darken-1
-                          v-progress-linear__buffer
-                        "
-                        style="
-                          opacity: NaN;
-                          width: 0%;
-                        "
-                      ></div>
-                      <transition-stub
-                        appear="false"
-                        css="true"
-                        name="fade-transition"
-                        persisted="false"
-                      >
-                        <div class="v-progress-linear__indeterminate">
-                          <div class="
-                            bg-ap-blue-darken-1
-                            long
-                            v-progress-linear__indeterminate
-                          "></div>
-                          <div class="
-                            bg-ap-blue-darken-1
-                            short
-                            v-progress-linear__indeterminate
-                          "></div>
-                        </div>
-                      </transition-stub>
-                      <!---->
-                    </div>
-                  </div>
-                  <!---->
-                  <div
-                    class="v-field__field"
-                    data-no-activator=""
-                  >
-                    <!---->
-                    <!---->
-                    <!---->
-                    <input
-                      aria-required="true"
-                      class="v-field__input"
-                      id="my-captcha-id-input"
-                      size="1"
-                      type="text"
-                      value="input value"
-                    />
-                    <!---->
-                  </div>
-                  <!---->
-                  <!---->
-                  <div class="v-field__outline">
-                    <div class="v-field__outline__start"></div>
-                    <!---->
-                    <div class="v-field__outline__end"></div>
-                    <!---->
-                  </div>
-                </div>
-              </div>
-              <!---->
-              <div
-                aria-live="polite"
-                class="v-input__details"
-                id="my-captcha-id-input-messages"
-                role="alert"
-              >
-                <transition-group-stub
-                  appear="false"
-                  class="v-messages"
-                  css="true"
-                  name="slide-y-transition"
-                  persisted="false"
-                  tag="div"
-                >
-                  <!---->
-                </transition-group-stub>
-                <!---->
-              </div>
-            </div>
-          </div>
-          <!-- v-if -->
-        </div>
-        <p
-          class="captcha-text"
-          id="my-captcha-id-captcha-text"
-        >
-          <span>
-            Vous n'arrivez pas à lire ?
-          </span>
-          <br />
-          <button
-            class="
-              amelipro-btn
-              captcha-update-btn
-              captcha-update-btn
-              elevation-0
-              text-ap-blue-darken-1
-              text-decoration-underline
-              text-none
-              text-none
-              v-btn
-              v-btn--density-default
-              v-btn--flat
-              v-btn--size-default
-              v-btn--variant-text
-              v-theme--light
-            "
-            id="my-captcha-id-update-btn"
-            style="
-              height: auto;
-              min-height: auto;
-              padding: 0px;
-            "
-            type="button"
-          >
-            <span class="v-btn__overlay"></span>
-            <span class="v-btn__underlay"></span>
-            <!---->
-            <span
-              class="v-btn__content"
-              data-no-activator=""
-            >
-              <span class="
-                align-center
-                amelipro-custom-btn
-                d-flex
-                flex-row
-              ">
-                <span>
-                  Changer d’image
-                </span>
-                <!-- v-if -->
-                <!-- v-if -->
-              </span>
-            </span>
-            <!---->
-            <!---->
-          </button>
-          ou
-          <button
-            class="
-              amelipro-btn
-              captcha-switch-btn
-              captcha-switch-btn
-              elevation-0
-              text-ap-blue-darken-1
-              text-decoration-underline
-              text-none
-              text-none
-              v-btn
-              v-btn--density-default
-              v-btn--flat
-              v-btn--size-default
-              v-btn--variant-text
-              v-theme--light
-            "
-            id="my-captcha-id-switch-type-btn"
-            style="
-              height: auto;
-              min-height: auto;
-              padding: 0px;
-            "
-            type="button"
-          >
-            <span class="v-btn__overlay"></span>
-            <span class="v-btn__underlay"></span>
-            <!---->
-            <span
-              class="v-btn__content"
-              data-no-activator=""
-            >
-              <span class="
-                align-center
-                amelipro-custom-btn
-                d-flex
-                flex-row
-              ">
-                <span>
-                  Utiliser un captcha audio
-                </span>
-                <!-- v-if -->
-                <!-- v-if -->
-              </span>
-            </span>
-            <!---->
-            <!---->
-          </button>
-        </p>
-      </div>
-    </div>
-  </div>
-  <!-- v-if -->
-</div>
+exports[`AmeliproCaptcha > Snapshots > renders the component with all properties filled in 1`] = `
+<amelipro-card-stub
+  bordercolor="ap-grey-lighten-2"
+  bordered="true"
+  cardcolor="ap-grey-lighten-5"
+  divider="true"
+  headerrightwidth="50%"
+  nocardheader="true"
+  rightpart="false"
+  rightpartwidth="25%"
+  titlecolor="ap-grey-darken-1"
+  titlelevel="2"
+  uniqueid="modified-unique-id"
+></amelipro-card-stub>
+`;
+
+exports[`AmeliproCaptcha > Snapshots > renders the component with only required properties filled in 1`] = `
+<amelipro-card-stub
+  bordercolor="ap-grey-lighten-2"
+  bordered="true"
+  cardcolor="ap-grey-lighten-5"
+  divider="true"
+  headerrightwidth="50%"
+  nocardheader="true"
+  rightpart="false"
+  rightpartwidth="25%"
+  titlecolor="ap-grey-darken-1"
+  titlelevel="2"
+  uniqueid="required-unique-id"
+></amelipro-card-stub>
 `;

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

@@ -58,24 +58,7 @@ exports[`AmeliproCarousel > render correctly 1`] = `
           role="img"
           style="color: #00749C;"
         >
-          <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="M14.8,21.2L5.7,12l9.2-9.2L12,0L0,12l12,12L14.8,21.2z"
-              />
-            </svg>
-          </span>
+          <span></span>
         </span>
       </span>
     </span>
@@ -132,24 +115,7 @@ exports[`AmeliproCarousel > render correctly 1`] = `
           role="img"
           style="color: #00749C;"
         >
-          <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>
@@ -237,6 +203,7 @@ exports[`AmeliproCarousel > render correctly 1`] = `
               v-btn--variant-elevated
               v-theme--light
             "
+            disabled="true"
             href="href item 2"
             id="carousel-unique-id-item-1-btn"
             tabindex="-1"
@@ -281,6 +248,7 @@ exports[`AmeliproCarousel > render correctly 1`] = `
               v-btn--variant-elevated
               v-theme--light
             "
+            disabled="true"
             href="href item 3"
             id="carousel-unique-id-item-2-btn"
             tabindex="-1"

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

@@ -5,7 +5,7 @@ import AmeliproCheckbox from './AmeliproCheckbox.vue'
 const meta = {
 	argTypes: {
 		'append': { description: 'Permet de rajouter un élément après le label' },
-		'ariaRequired': { description: 'Permet de rendre la selection obligatoire' },
+		'required': { description: 'Permet de rendre la selection obligatoire' },
 		'checkbox': {
 			description: 'Objet qui permet de générer la checkbox',
 			table: {
@@ -25,7 +25,7 @@ const meta = {
 		'label': { description: 'Permet de renseigner un label personnalisé' },
 		'labelLeft': { description: 'Positionne le label à gauche de la case à cocher' },
 		'modelValue': { description: 'Etat de la 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' },
 		'uniqueId': { description: 'Id unique de la checkbox' },
 		'update:model-value': { description: 'Événement émit au changement de la valeur de la checkbox' },
 	},
@@ -225,19 +225,19 @@ export const Required: Story = {
 			value: 'required',
 		},
 		uniqueId: 'checkbox-required',
-		ariaRequired: true,
+		required: true,
 	},
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `<template>
-	<p>La sélection est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+	<p>La sélection est obligatoire grâce à la prop <code>required</code>.</p>
 	<AmeliproCheckbox
 		v-model="isChecked"
 		:checkbox="checkbox"
 		unique-id="checkbox-required"
-		aria-required
+		required
 	/>
 </template>`,
 			},
@@ -252,7 +252,7 @@ export const Required: Story = {
 			})
 			return { args, model }
 		},
-		template: `<p class="mb-2">La sélection est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+		template: `<p class="mb-2">La sélection est obligatoire grâce à la prop <code>required</code>.</p>
 <AmeliproCheckbox v-bind="args" v-model="model" />`,
 	}),
 }
@@ -264,7 +264,7 @@ export const ErrorDefault: Story = {
 			value: 'error-default',
 		},
 		uniqueId: 'checkbox-error-default',
-		ariaRequired: true,
+		required: true,
 		errorDefault: true,
 	},
 	parameters: {
@@ -277,7 +277,7 @@ export const ErrorDefault: Story = {
 		v-model="isChecked"
 		:checkbox="checkbox"
 		unique-id="checkbox-error-default"
-		aria-required
+		required
 		error-default
 	/>
 </template>`,
@@ -305,7 +305,7 @@ export const CustomErrorMessage: Story = {
 			value: 'custom-error',
 		},
 		uniqueId: 'checkbox-custom-error',
-		ariaRequired: true,
+		required: true,
 		requiredErrorMessage: 'Veuillez cocher cette case pour continuer',
 	},
 	parameters: {
@@ -318,7 +318,7 @@ export const CustomErrorMessage: Story = {
 		v-model="isChecked"
 		:checkbox="checkbox"
 		unique-id="checkbox-custom-error"
-		aria-required
+		required
 		required-error-message="Veuillez cocher cette case pour continuer"
 	/>
 </template>`,

package/src/components/Amelipro/AmeliproCheckbox/AmeliproCheckbox.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-	import { type PropType, computed, ref, watch } from 'vue'
+	import { computed, type PropType, ref, watch } from 'vue'
 	import type { AmeliproCheckboxItem } from './types'
 	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
 
 	const props = defineProps({
-		ariaRequired: {
+		required: {
 			type: Boolean,
 			default: false,
 		},
@@ -72,8 +72,8 @@
 		}
 	}
 
-	const error = computed<string>(() => (isAlreadyCheckedOnce.value === true && props.ariaRequired === true && currentValue.value === false ? props.requiredErrorMessage : ''))
-	const checkErrorCondition = computed<boolean>(() => (isAlreadyCheckedOnce.value === true && props.ariaRequired === true && currentValue.value === false))
+	const error = computed<string>(() => (isAlreadyCheckedOnce.value === true && props.required === true && currentValue.value === false ? props.requiredErrorMessage : ''))
+	const checkErrorCondition = computed<boolean>(() => (isAlreadyCheckedOnce.value === true && props.required === true && currentValue.value === false))
 
 	watch(() => props.errorDefault, (newErrorDefaultValue: boolean) => {
 		isAlreadyCheckedOnce.value = newErrorDefaultValue
@@ -89,7 +89,7 @@
 				:aria-describedby="checkErrorCondition ? `${uniqueId}-error ` + checkbox.description : checkbox.description"
 				:aria-disabled="disabled"
 				:aria-invalid="checkErrorCondition ? 'true' : undefined"
-				:aria-required="ariaRequired ? 'true' : undefined"
+				:required="required ? 'true' : undefined"
 				class="mr-0 d-inline-flex flex-row align-center text-body-1 amelipro-checkbox-input"
 				:class="{
 					'amelipro-switch': isSwitch,
@@ -110,14 +110,14 @@
 					</slot>
 
 					<span
-						v-if="ariaRequired"
+						v-if="required"
 						aria-hidden="true"
 						class="d-inline-flex"
 					>
 						&nbsp;*
 					</span>
 					<span
-						v-if="ariaRequired"
+						v-if="required"
 						class="d-sr-only"
 					>
 						&nbsp;Champ obligatoire

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

@@ -1,4 +1,4 @@
-import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { mount, shallowMount, VueWrapper } from '@vue/test-utils'
 import { beforeEach, describe, expect, it } from 'vitest'
 import AmeliproCheckbox from '../AmeliproCheckbox.vue'
 import type { AmeliproCheckboxItem } from '../types'
@@ -10,7 +10,7 @@ import TestHelper from '@tests/helpers/TestHelper'
 import { attachToApp } from '@tests/helpers/utils'
 
 const expectedPropOptions: ExpectedPropOptions<typeof AmeliproCheckbox> = {
-	ariaRequired: {
+	required: {
 		type: Boolean,
 		default: false,
 	},
@@ -59,7 +59,7 @@ const requiredPropValues = (): ComponentProps<typeof AmeliproCheckbox> => ({
 
 // Valeurs pour les props "modified"
 const modifiedPropValues = (): ComponentProps<typeof AmeliproCheckbox> => ({
-	ariaRequired: true,
+	required: true,
 	checkbox: {
 		description: 'Modified checkbox description',
 		label: 'Modified checkbox label',
@@ -146,7 +146,7 @@ describe('AmeliproCheckbox', () => {
 			let componentWrapper = wrapper.findComponent(AmeliproMessage)
 			expect(componentWrapper.exists()).toBe(false)
 
-			await wrapper.setProps({ ariaRequired: true })
+			await wrapper.setProps({ required: true })
 			await wrapper.find('[role="checkbox"]').trigger('click')
 			await wrapper.find('[role="checkbox"]').trigger('click')
 			componentWrapper = wrapper.findComponent(AmeliproMessage)
@@ -165,7 +165,7 @@ describe('AmeliproCheckbox', () => {
 			expect(elementWrapper.exists()).toBe(true)
 			expect(elementWrapper.attributes('class')).toContain('text-ap-grey')
 
-			await wrapper.setProps({ disabled: false, ariaRequired: true })
+			await wrapper.setProps({ disabled: false, required: true })
 			await wrapper.find('[role="checkbox"]').trigger('click')
 			await wrapper.find('[role="checkbox"]').trigger('click')
 			expect(elementWrapper.exists()).toBe(true)

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

@@ -11,7 +11,6 @@ exports[`AmeliproCheckbox > Snapshots > renders the component with all propertie
       aria-checked="true"
       aria-describedby="Modified checkbox description"
       aria-disabled="true"
-      aria-required="true"
       class="
         align-center
         amelipro-checkbox-input
@@ -21,6 +20,7 @@ exports[`AmeliproCheckbox > Snapshots > renders the component with all propertie
         text-body-1
       "
       id="modified-unique-id"
+      required="true"
       role="checkbox"
       tabindex="-1"
     >