@cnamts/synapse 1.0.13 → 1.0.15

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

@@ -55,8 +55,9 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
           w-100
         ">
           <div class="
-            align-start
+            align-baseline
             d-inline-flex
+            mb-1
           ">
             <label
               class="
@@ -300,7 +301,10 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="accordion-result-0-header-btn-open-close-btn-label"
                 >
                   Déplier
@@ -424,7 +428,10 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="accordion-result-1-header-btn-open-close-btn-label"
                 >
                   Déplier
@@ -548,7 +555,10 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="accordion-result-2-header-btn-open-close-btn-label"
                 >
                   Déplier
@@ -672,7 +682,10 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="accordion-result-3-header-btn-open-close-btn-label"
                 >
                   Déplier
@@ -796,7 +809,10 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="accordion-result-4-header-btn-open-close-btn-label"
                 >
                   Déplier
@@ -920,7 +936,10 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="accordion-result-5-header-btn-open-close-btn-label"
                 >
                   Déplier
@@ -1044,7 +1063,10 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="accordion-result-6-header-btn-open-close-btn-label"
                 >
                   Déplier
@@ -1168,7 +1190,10 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="accordion-result-7-header-btn-open-close-btn-label"
                 >
                   Déplier
@@ -1292,7 +1317,10 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="accordion-result-8-header-btn-open-close-btn-label"
                 >
                   Déplier
@@ -1416,7 +1444,10 @@ exports[`AmeliproAccordionResultList > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="accordion-result-9-header-btn-open-close-btn-label"
                 >
                   Déplier

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

@@ -226,7 +226,7 @@ export const MasquerErreur: Story = {
 		items,
 		label: 'Masquage du message d’erreur',
 		uniqueId: 'amelipro-auto-complete-field-hide-error',
-		rules: [v => !!v || 'Ce champ est obligatoire'],
+		ariaRequired: true,
 		hideErrorMessage: true,
 	},
 	parameters: {
@@ -240,7 +240,7 @@ export const MasquerErreur: Story = {
 		:items="items"
 		unique-id="amelipro-auto-complete-field-hide-error"
 		label="Masquage du message d’erreur"
-		:rules="[v => !!v || 'Ce champ est obligatoire']"
+		ariaRequired: true,
 		hide-error-message
 	/>
 </template>`,
@@ -594,8 +594,8 @@ export const Validation: Story = {
 		items,
 		label: 'Validation personnalisée',
 		uniqueId: 'amelipro-auto-complete-field-validation',
+		ariaRequired: true,
 		rules: [
-			v => !!v || 'Ce champ est obligatoire',
 			v => (v ? typeof v === 'string' && v.startsWith('B') : true) || 'La valeur doit commencer par "B"',
 		],
 	},
@@ -610,8 +610,8 @@ export const Validation: Story = {
 		:items="items"
 		unique-id="amelipro-auto-complete-field-validation"
 		label="Validation personnalisée"
+		ariaRequired: true,
 		:rules="[
-			v => !!v || 'Ce champ est obligatoire',
 			v => (v ? v.startsWith('B') : true) || 'La valeur doit commencer par "B"',
 		]"
 	/>

package/src/components/Amelipro/AmeliproAutoCompleteField/AmeliproAutoCompleteField.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-	/* eslint-disable vuejs-accessibility/label-has-for */
+/* eslint-disable vuejs-accessibility/label-has-for */
 	import type { AutoCompleteItem, InputAutoCompleteField } from './types'
 	import type { IndexedObject, ValidateOnType } from '../types'
-	import { type PropType, computed, onMounted, ref } from 'vue'
+	import { computed, onMounted, type PropType, ref } from 'vue'
 	import { mdiMenuDown, mdiMenuUp } from '@mdi/js'
 	import AmeliproIconBtn from '../AmeliproIconBtn/AmeliproIconBtn.vue'
 	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
@@ -267,7 +267,7 @@
 		:style="globalFieldStyles"
 	>
 		<div
-			class="d-inline-flex align-start amelipro-autocomplete__label-wrapper"
+			class="d-inline-flex align-baseline mb-1 amelipro-autocomplete__label-wrapper"
 			:class="horizontal ? 'mt-md-2 mr-md-2' : undefined"
 		>
 			<label
@@ -290,7 +290,10 @@
 				</span>
 			</label>
 
-			<slot name="labelInfo" />
+			<slot
+				class="mb-1"
+				name="labelInfo"
+			/>
 		</div>
 
 		<VAutocomplete
@@ -375,7 +378,6 @@
 	}
 
 	.amelipro-autocomplete__label {
-		margin-bottom: 4px;
 		font-size: apTokens.$font-size-xs;
 		font-weight: apTokens.$label-font-weight;
 	}

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

@@ -17,9 +17,10 @@ exports[`AmeliproAutoCompleteField > Snapshots > renders the component with all
   "
 >
   <div class="
-    align-start
+    align-baseline
     amelipro-autocomplete__label-wrapper
     d-inline-flex
+    mb-1
     mr-md-2
     mt-md-2
   ">
@@ -99,9 +100,10 @@ exports[`AmeliproAutoCompleteField > Snapshots > renders the component with only
   id="required-unique-id-container"
 >
   <div class="
-    align-start
+    align-baseline
     amelipro-autocomplete__label-wrapper
     d-inline-flex
+    mb-1
   ">
     <label
       class="amelipro-autocomplete__label"

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

@@ -86,7 +86,7 @@ export const Default: Story = {
 	},
 }
 
-export const Badge: Story = {
+export const AvecBadge: Story = {
 	args: {
 		badge: 1,
 		badgeBgColor: 'ap-pink',
@@ -323,42 +323,3 @@ export const TexteSeul: Story = {
         `,
 	}),
 }
-
-export const AvecBadge: Story = {
-	name: 'Avec badge',
-	args: {
-		default: 'Bouton avec badge',
-		badge: 3,
-		badgeBgColor: 'ap-pink',
-		badgeColor: 'ap-white',
-		uniqueId: 'btn-badge',
-	},
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `<template>
-    <AmeliproBtn
-        badge="3"
-        badge-bg-color="ap-pink"
-        badge-color="ap-white"
-        unique-id="btn-badge"
-    >
-        Bouton avec badge
-    </AmeliproBtn>
-</template>
-                `,
-			},
-		],
-	},
-	render: args => ({
-		components: { AmeliproBtn },
-		setup() { return { args } },
-		template: `
-<p class="mb-2">Bouton avec badge (<code>badge</code>, <code>badgeBgColor</code>, <code>badgeColor</code>).</p>
-<AmeliproBtn v-bind="args">
-    {{ args.default }}
-</AmeliproBtn>
-        `,
-	}),
-}

package/src/components/Amelipro/AmeliproBtn/AmeliproBtn.vue

@@ -378,5 +378,9 @@
 			margin-top: 2px;
 		}
 	}
+
+	& .amelipro-custom-btn {
+		white-space: normal;
+	}
 }
 </style>

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

@@ -221,7 +221,7 @@ export const AvecSlotDefaultContent: Story = {
     unique-id="amelipro-callback-slot"
   >
     <template #defaultContent>
-      <div style="color: #1976d2;">Contenu personnalisé via le slot <code>defaultContent</code>.</div>
+      <div style="color: #1976d2;" class="d-flex align-center">Contenu personnalisé via le slot <code>defaultContent</code>.</div>
     </template>
   </AmeliproCallback>
 </template>`,
@@ -241,7 +241,9 @@ export const AvecSlotDefaultContent: Story = {
 <p class="mb-2">Le slot <code>defaultContent</code> permet de personnaliser le contenu central de la carte.</p>
 <AmeliproCallback v-bind="args">
   <template #defaultContent>
-    <div style="color: #1976d2;">Contenu personnalisé via le slot <code>defaultContent</code>.</div>
+    <div style="color: #1976d2;" class="d-flex align-center">Contenu personnalisé via le slot
+      <code>defaultContent</code>.
+    </div>
   </template>
 </AmeliproCallback>
 `,

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

@@ -118,8 +118,9 @@ exports[`AmeliproCaptcha > render correctly 1`] = `
             w-100
           ">
             <div class="
-              align-start
+              align-baseline
               d-inline-flex
+              mb-1
             ">
               <label
                 class="

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

@@ -60,9 +60,9 @@ export const Default: Story = {
 			return { args }
 		},
 		template: `
-	<AmeliproClickableTile
-		v-bind="args"
-	/>`,
+          <AmeliproClickableTile
+              v-bind="args"
+          />`,
 	}),
 }
 
@@ -70,7 +70,7 @@ export const Default: Story = {
 export const AvecImage: Story = {
 	name: 'Avec image',
 	args: {
-		imgSrc: '.storybook/public/logos/logo-assurance-maladie.svg',
+		imgSrc: '/logos/logo-assurance-maladie.svg',
 		tileTitle: 'Tuile avec image',
 		uniqueId: 'amelipro-tile-img',
 		imgWidth: '40px',
@@ -83,7 +83,7 @@ export const AvecImage: Story = {
 				name: 'Template',
 				code: `
 <AmeliproClickableTile
-  img-src=".storybook/public/logos/logo-assurance-maladie.svg"
+  img-src="/logos/logo-assurance-maladie.svg"
   tile-title="Tuile avec image"
   unique-id="amelipro-tile-img"
   img-width="40px"
@@ -95,11 +95,13 @@ export const AvecImage: Story = {
 	},
 	render: args => ({
 		components: { AmeliproClickableTile },
-		setup() { return { args } },
+		setup() {
+			return { args }
+		},
 		template: `
-<p class="mb-2">Affichage d’une image à la place de l’icône grâce à la prop <code>imgSrc</code>.</p>
-<AmeliproClickableTile v-bind="args" />
-`,
+          <p class="mb-2">Affichage d’une image à la place de l’icône grâce à la prop <code>imgSrc</code>.</p>
+          <AmeliproClickableTile v-bind="args"/>
+        `,
 	}),
 }
 
@@ -128,11 +130,13 @@ export const Desactivee: Story = {
 	},
 	render: args => ({
 		components: { AmeliproClickableTile },
-		setup() { return { args } },
+		setup() {
+			return { args }
+		},
 		template: `
-<p class="mb-2">La tuile est désactivée grâce à la prop <code>disabled</code>.</p>
-<AmeliproClickableTile v-bind="args" />
-`,
+          <p class="mb-2">La tuile est désactivée grâce à la prop <code>disabled</code>.</p>
+          <AmeliproClickableTile v-bind="args"/>
+        `,
 	}),
 }
 
@@ -161,11 +165,13 @@ export const IconeAvecBordure: Story = {
 	},
 	render: args => ({
 		components: { AmeliproClickableTile },
-		setup() { return { args } },
+		setup() {
+			return { args }
+		},
 		template: `
-<p class="mb-2">L’icône est affichée avec une bordure grâce à la prop <code>borderedIcon</code>.</p>
-<AmeliproClickableTile v-bind="args" />
-`,
+          <p class="mb-2">L’icône est affichée avec une bordure grâce à la prop <code>borderedIcon</code>.</p>
+          <AmeliproClickableTile v-bind="args"/>
+        `,
 	}),
 }
 
@@ -194,11 +200,13 @@ export const AvecLien: Story = {
 	},
 	render: args => ({
 		components: { AmeliproClickableTile },
-		setup() { return { args } },
+		setup() {
+			return { args }
+		},
 		template: `
-<p class="mb-2">La tuile agit comme un lien grâce à la prop <code>href</code>.</p>
-<AmeliproClickableTile v-bind="args" />
-`,
+          <p class="mb-2">La tuile agit comme un lien grâce à la prop <code>href</code>.</p>
+          <AmeliproClickableTile v-bind="args"/>
+        `,
 	}),
 }
 
@@ -227,14 +235,16 @@ export const TitrePersonnalise: Story = {
 	},
 	render: args => ({
 		components: { AmeliproClickableTile },
-		setup() { return { args } },
+		setup() {
+			return { args }
+		},
 		template: `
-<p class="mb-2">Le titre de la tuile est personnalisé via le slot <code>default</code>.</p>
-<AmeliproClickableTile v-bind="args">
-  <template #default>
-    <span style="color: #1976d2;">Titre <strong>personnalisé</strong></span>
-  </template>
-</AmeliproClickableTile>
-`,
+          <p class="mb-2">Le titre de la tuile est personnalisé via le slot <code>default</code>.</p>
+          <AmeliproClickableTile v-bind="args">
+            <template #default>
+              <span style="color: #1976d2;">Titre <strong>personnalisé</strong></span>
+            </template>
+          </AmeliproClickableTile>
+        `,
 	}),
 }

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

@@ -37,7 +37,10 @@ exports[`AmeliproCopyBtn > render correctly 1`] = `
       data-no-activator=""
     >
       <span
-        class="d-sr-only"
+        class="
+          amelipro-btn__label
+          d-sr-only
+        "
         id="my-btn-id-copy-btn-btn-label"
       >
         Copier le texte

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { type PropType, computed, onUpdated, ref } from 'vue'
+	import { computed, onUpdated, type PropType, ref } from 'vue'
 	import type { AmeliproCustomSelectorItem } from './types'
 	import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
 	import type { IndexedObject } from '../types'
@@ -123,7 +123,7 @@
 		return false
 	})
 
-	const labelMarginBottomValue = computed<IndexedObject | undefined>(() => (props.labelMarginBottom ? { marginBottom: props.labelMarginBottom } : undefined))
+	const labelMarginBottomValue = computed<IndexedObject | undefined>(() => (props.labelMarginBottom ? { marginBottom: props.labelMarginBottom } : { marginBottom: '4px' }))
 
 	onUpdated(() => {
 		isAlreadyCheckedOnce.value = true
@@ -145,7 +145,7 @@
 			<p
 				:id="uniqueId"
 				:aria-describedby="labelDescription"
-				class="mb-1 text-ap-grey-darken-1 amelipro-custom-selector__label"
+				class="text-ap-grey-darken-1 amelipro-custom-selector__label"
 			>
 				{{ groupLabel }}
 

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

@@ -5,15 +5,17 @@ exports[`AmeliproCustomSelector > render correctly 1`] = `
   class="amelipro-custom-selector"
   id="my-custom-selector-group-id-container"
 >
-  <div class="
-    align-center
-    amelipro-custom-selector__label-wrapper
-    d-flex
-  ">
+  <div
+    class="
+      align-center
+      amelipro-custom-selector__label-wrapper
+      d-flex
+    "
+    style="margin-bottom: 4px;"
+  >
     <p
       class="
         amelipro-custom-selector__label
-        mb-1
         text-ap-grey-darken-1
       "
       id="my-custom-selector-group-id"

package/src/components/Amelipro/AmeliproFilePreview/AmeliproFilePreview.mdx

@@ -1,4 +1,4 @@
-import { Controls, Canvas, Meta } from '@storybook/blocks';
+import {Canvas, Controls, Meta, Story} from '@storybook/blocks';
 
 import * as AmeliproFilePreviewStories from './AmeliproFilePreview.stories';
 
@@ -8,6 +8,8 @@ import * as AmeliproFilePreviewStories from './AmeliproFilePreview.stories';
 
 L’élément `AmeliproFilePreview` est utilisé pour afficher un aperçu de fichier dans Amelipro
 
+<Story of={AmeliproFilePreviewStories.Info}/>
+
 <Canvas of={AmeliproFilePreviewStories.Default} />
 
 ## API

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import AmeliproFilePreview from './AmeliproFilePreview.vue'
+import AmeliproMessage from '../AmeliproMessage/AmeliproMessage.vue'
 
 const meta = {
 	argTypes: {
@@ -8,10 +9,10 @@ const meta = {
 		fileName: { description: 'Nom du fichier PDF' },
 		fileSrc: { description: 'Url du fichier PDF' },
 		foldable: { description: 'Transforme la carte en carte dépliante' },
-		iframeTitle: { description: 'Titre de l’iframe contenant l’aperçu du fichier' },
+		pdfDisplayTitle: { description: 'Titre pour l’élément <object> affichant l’aperçu du fichier PDF' },
 		isOpen: { description: 'Statut par défaut de la carte dépliante' },
 		linkTitle: { description: 'Titre du lien de téléchargement du fichier, il doit reprendre l’intitulé du bouton et informer si possible sur le format du fichier à télécharger ainsi que sur sa taille (exemple : Télécharger le fichier au format PDF - 3Mo)' },
-		previewHeight: { description: 'Hauteur de l’iframe' },
+		previewHeight: { description: `Hauteur de l'aperçu PDF` },
 		uniqueId: { description: 'Identifiant unique' },
 	},
 	component: AmeliproFilePreview,
@@ -28,7 +29,7 @@ export const Default: Story = {
 		fileName: 'Nom du fichier',
 		fileSrc: '/amelipro/pdf/charte-pour-pdf.pdf',
 		foldable: false,
-		iframeTitle: 'Aperçu du fichier PDF',
+		pdfDisplayTitle: 'Aperçu du fichier PDF',
 		isOpen: false,
 		linkTitle: 'Télécharger le fichier au Format PDF',
 		previewHeight: 550,
@@ -45,7 +46,7 @@ export const Default: Story = {
 		file-name="Nom du fichier"
 		file-src="/amelipro/pdf/charte-pour-pdf.pdf"
 		:foldable="false"
-		iframe-title="Aperçu du fichier PDF"
+		pdfDisplayTitle="Aperçu du fichier PDF"
 		:is-open="false"
 		link-title="Télécharger le fichier au Format PDF"
 		:preview-height="550"
@@ -62,10 +63,27 @@ export const Default: Story = {
 			return { args }
 		},
 		template: `
-<AmeliproFilePreview
+          <AmeliproFilePreview
 	v-bind="args"
 />
 		`,
 	}),
 
 }
+
+export const Info: Story = {
+	render: (args) => {
+		return {
+			components: { AmeliproMessage },
+			setup() {
+				return { args }
+			},
+			template: `
+              <AmeliproMessage>
+                La prop <strong>iframeTitle</strong> a été remplacée par <strong>pdfDisplayTitle</strong>.
+              </AmeliproMessage>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/Amelipro/AmeliproFilePreview/AmeliproFilePreview.vue

@@ -26,7 +26,7 @@
 			type: Boolean,
 			default: false,
 		},
-		iframeTitle: {
+		pdfDisplayTitle: {
 			type: String,
 			default: 'Aperçu du fichier PDF',
 		},
@@ -100,13 +100,12 @@
 			</template>
 
 			<template #default>
-				<iframe
+				<object
 					v-if="mdAndUp"
-					:id="`${uniqueId}-iframe`"
-					class="amelipro-file-preview__iframe"
+					:id="`${uniqueId}-pdf-display`"
+					:aria-label="pdfDisplayTitle"
 					:height="previewHeight"
-					:src="fileSrc"
-					:title="iframeTitle"
+					:data="fileSrc"
 					type="application/pdf"
 					width="100%"
 				/>

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import AmeliproFilePreview from '../AmeliproFilePreview.vue'
 
 describe('AmeliproFilePreview', () => {
@@ -11,7 +11,7 @@ describe('AmeliproFilePreview', () => {
 				fileName: 'file name',
 				fileSrc: 'file-src',
 				foldable: true,
-				iframeTitle: 'Modified iframe title',
+				pdfDisplayTitle: 'Modified pdf display title',
 				isOpen: true,
 				linkTitle: 'Modified link title',
 				previewHeight: 400,

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

@@ -193,15 +193,14 @@ exports[`AmeliproFilePreview > render correctly 1`] = `
           border-top-color: #DDDEDE;
         "
       >
-        <iframe
-          class="amelipro-file-preview__iframe"
+        <object
+          aria-label="Modified pdf display title"
+          data="file-src"
           height="400"
-          id="pdf-preview-unique-id-iframe"
-          src="file-src"
-          title="Modified iframe title"
+          id="pdf-preview-unique-id-pdf-display"
           type="application/pdf"
           width="100%"
-        ></iframe>
+        ></object>
       </div>
     </div>
   </div>