@cnamts/synapse 1.0.9 → 1.0.11

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

@@ -1,14 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { expect, describe, it } from 'vitest'
-import { vuetify } from '@tests/unit/setup'
 import AmeliproResultList from '../AmeliproResultList.vue'
 
 describe('AmeliproResultList', () => {
 	it('render correctly', async () => {
 		const wrapper = mount(AmeliproResultList, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				items: [
 					{ id: 0 },

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

@@ -72,11 +72,7 @@ exports[`AmeliproResultList > render correctly 1`] = `
             </label>
           </div>
           <div class="
-            amelipro-result-list__pagination-select
             amelipro-select
-            mb-0
-            ml-2
-            pt-0
             pt-0
             v-input
             v-input--center-affix
@@ -128,11 +124,17 @@ exports[`AmeliproResultList > render correctly 1`] = `
                   >
                     <!---->
                     <div
-                      class="v-progress-linear__background"
+                      class="
+                        bg-ap-blue-darken-1
+                        v-progress-linear__background
+                      "
                       style="opacity: NaN;"
                     ></div>
                     <div
-                      class="v-progress-linear__buffer"
+                      class="
+                        bg-ap-blue-darken-1
+                        v-progress-linear__buffer
+                      "
                       style="
                         opacity: NaN;
                         width: 0%;
@@ -146,10 +148,12 @@ exports[`AmeliproResultList > render correctly 1`] = `
                     >
                       <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>
@@ -179,10 +183,13 @@ exports[`AmeliproResultList > render correctly 1`] = `
                       </span>
                     </div>
                     <input
+                      aria-controls="menu-v-0"
+                      aria-expanded="false"
                       aria-label="Open"
                       aria-required="false"
                       id="amelipro-result-unique-id-pagination-select"
                       inputmode="none"
+                      role="combobox"
                       size="1"
                       title="Open"
                       type="text"

package/src/components/Amelipro/AmeliproSelect/tests/AmeliproSelect.spec.ts

@@ -1,14 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { expect, describe, it } from 'vitest'
 import AmeliproSelect from '../AmeliproSelect.vue'
-import { vuetify } from '@tests/unit/setup'
 
 describe('AmeliproSelect', () => {
 	it('render correctly', async () => {
 		const wrapper = mount(AmeliproSelect, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				items: [
 					{

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

@@ -77,11 +77,17 @@ exports[`AmeliproSelect > render correctly 1`] = `
             >
               <!---->
               <div
-                class="v-progress-linear__background"
+                class="
+                  bg-ap-blue-darken-1
+                  v-progress-linear__background
+                "
                 style="opacity: NaN;"
               ></div>
               <div
-                class="v-progress-linear__buffer"
+                class="
+                  bg-ap-blue-darken-1
+                  v-progress-linear__buffer
+                "
                 style="
                   opacity: NaN;
                   width: 0%;
@@ -95,10 +101,12 @@ exports[`AmeliproSelect > render correctly 1`] = `
               >
                 <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>
@@ -122,10 +130,13 @@ exports[`AmeliproSelect > render correctly 1`] = `
               <!---->
               <!---->
               <input
+                aria-controls="menu-v-0"
+                aria-expanded="false"
                 aria-label="Open"
                 aria-required="false"
                 id="my-select-id"
                 inputmode="none"
+                role="combobox"
                 size="1"
                 title="Open"
                 type="text"

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

@@ -86,3 +86,213 @@ export const Default: Story = {
 />`,
 	}),
 }
+
+// --- Tuile désactivée ---
+export const Desactivee: Story = {
+	name: 'Désactivée',
+	args: {
+		btnStyledText: 'Action désactivée',
+		labelFirstLine: 'Tuile',
+		labelSecondLine: 'désactivée',
+		tileType: 'toDo',
+		tileWidth: '300px',
+		tileMinHeight: '100%',
+		disabled: true,
+		uniqueId: 'amelipro-state-tile-disabled',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <AmeliproStateTile
+    btn-styled-text="Action désactivée"
+    label-first-line="Tuile"
+    label-second-line="désactivée"
+    tile-type="toDo"
+    tile-width="300px"
+    tile-min-height="100%"
+    :disabled="true"
+    unique-id="amelipro-state-tile-disabled"
+  />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">La tuile est désactivée grâce à la prop <code>disabled</code>.</p>
+<AmeliproStateTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile avec lien externe (href) ---
+export const AvecLien: Story = {
+	name: 'Avec lien',
+	args: {
+		btnStyledText: 'Voir le détail',
+		labelFirstLine: 'Lien externe',
+		labelSecondLine: 'vers ameli pro',
+		tileType: 'done',
+		tileWidth: '300px',
+		tileMinHeight: '100%',
+		href: 'https://espacepro.ameli.fr',
+		uniqueId: 'amelipro-state-tile-href',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <AmeliproStateTile
+    btn-styled-text="Voir le détail"
+    label-first-line="Lien externe"
+    label-second-line="vers ameli pro"
+    tile-type="done"
+    tile-width="300px"
+    tile-min-height="100%"
+    href="https://espacepro.ameli.fr"
+    unique-id="amelipro-state-tile-href"
+  />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">La tuile agit comme un lien externe grâce à la prop <code>href</code>.</p>
+<AmeliproStateTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile avec route interne (to) ---
+export const AvecRouteInterne: Story = {
+	name: 'Avec route interne',
+	args: {
+		btnStyledText: 'Accéder à la page',
+		labelFirstLine: 'Navigation interne',
+		labelSecondLine: 'avec "to"',
+		tileType: 'doneNoCertificate',
+		tileWidth: '300px',
+		tileMinHeight: '100%',
+		to: '/ma-route-interne',
+		uniqueId: 'amelipro-state-tile-to',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <AmeliproStateTile
+    btn-styled-text="Accéder à la page"
+    label-first-line="Navigation interne"
+    label-second-line="avec \\"to\\""
+    tile-type="doneNoCertificate"
+    tile-width="300px"
+    tile-min-height="100%"
+    to="/ma-route-interne"
+    unique-id="amelipro-state-tile-to"
+  />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">La tuile utilise la navigation interne grâce à la prop <code>to</code>.</p>
+<AmeliproStateTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile avec 3 lignes de texte ---
+export const TroisLignes: Story = {
+	name: 'Trois lignes de texte',
+	args: {
+		btnStyledText: 'Action',
+		labelFirstLine: 'Première ligne',
+		labelSecondLine: 'Deuxième ligne',
+		labelThirdLine: 'Troisième ligne',
+		tileType: 'optionnal',
+		tileWidth: '300px',
+		tileMinHeight: '100%',
+		uniqueId: 'amelipro-state-tile-3lignes',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <AmeliproStateTile
+    btn-styled-text="Action"
+    label-first-line="Première ligne"
+    label-second-line="Deuxième ligne"
+    label-third-line="Troisième ligne"
+    tile-type="optionnal"
+    tile-width="300px"
+    tile-min-height="100%"
+    unique-id="amelipro-state-tile-3lignes"
+  />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Affichage d’une tuile avec trois lignes de texte.</p>
+<AmeliproStateTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile sans icône PDF ---
+export const SansIconePdf: Story = {
+	name: 'Sans icône PDF',
+	args: {
+		btnStyledText: 'Télécharger',
+		labelFirstLine: 'Sans PDF',
+		labelSecondLine: 'Icône masquée',
+		tileType: 'doneNoCertificateBlue',
+		tileWidth: '300px',
+		tileMinHeight: '100%',
+		noPdfIcon: true,
+		uniqueId: 'amelipro-state-tile-no-pdf',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <AmeliproStateTile
+    btn-styled-text="Télécharger"
+    label-first-line="Sans PDF"
+    label-second-line="Icône masquée"
+    tile-type="doneNoCertificateBlue"
+    tile-width="300px"
+    tile-min-height="100%"
+    :no-pdf-icon="true"
+    unique-id="amelipro-state-tile-no-pdf"
+  />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">La tuile est affichée sans l’icône PDF grâce à la prop <code>noPdfIcon</code>.</p>
+<AmeliproStateTile v-bind="args" />
+`,
+	}),
+}

package/src/components/Amelipro/AmeliproStateTile/tests/AmeliproStateTile.spec.ts

@@ -1,14 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { expect, describe, it } from 'vitest'
 import AmeliproStateTile from '../AmeliproStateTile.vue'
-import { vuetify } from '@tests/unit/setup'
 
 describe('AmeliproStateTile', () => {
 	it('render correctly', async () => {
 		const wrapper = mount(AmeliproStateTile, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				labelFirstLine: 'Ligne 1',
 				labelSecondLine: 'Ligne 2',

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

@@ -54,3 +54,329 @@ export const Default: Story = {
 		`,
 	}),
 }
+
+export const TypeSuccess: Story = {
+	name: 'Succès',
+	args: {
+		type: 'success',
+		label: 'Succès',
+		uniqueId: 'status-success',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>success</code> (vert) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="success"
+        label="Succès"
+        unique-id="status-success"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>success</code> (vert) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeErreur: Story = {
+	name: 'Erreur',
+	args: {
+		type: 'failure',
+		label: 'Erreur détectée',
+		uniqueId: 'status-error',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>failure</code> (rouge) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="failure"
+        label="Erreur détectée"
+        unique-id="status-error"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>failure</code> (rouge) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeArchive: Story = {
+	name: 'Archivé',
+	args: {
+		type: 'archive',
+		label: 'Archivé',
+		uniqueId: 'status-archive',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>archive</code> (gris) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="archive"
+        label="Archivé"
+        unique-id="status-archive"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>archive</code> (gris) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeEnCours: Story = {
+	name: 'En cours',
+	args: {
+		type: 'progress',
+		label: 'Traitement en cours',
+		uniqueId: 'status-progress',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>progress</code> (bleu) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="progress"
+        label="Traitement en cours"
+        unique-id="status-progress"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>progress</code> (bleu) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeBrouillon: Story = {
+	name: 'Brouillon',
+	args: {
+		type: 'draft',
+		label: 'Brouillon',
+		uniqueId: 'status-draft',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>draft</code> (jaune) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="draft"
+        label="Brouillon"
+        unique-id="status-draft"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>draft</code> (jaune) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeFerme: Story = {
+	name: 'Fermé',
+	args: {
+		type: 'closed',
+		label: 'Fermé',
+		uniqueId: 'status-closed',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>closed</code> (violet) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="closed"
+        label="Fermé"
+        unique-id="status-closed"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>closed</code> (violet) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeAction: Story = {
+	name: 'Action',
+	args: {
+		type: 'action',
+		label: 'Action requise',
+		uniqueId: 'status-action',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>action</code> (bleu foncé) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="action"
+        label="Action requise"
+        unique-id="status-action"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>action</code> (bleu foncé) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeAnnule: Story = {
+	name: 'Annulé',
+	args: {
+		type: 'canceled',
+		label: 'Annulé',
+		uniqueId: 'status-canceled',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>canceled</code> (rouge clair) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="canceled"
+        label="Annulé"
+        unique-id="status-canceled"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>canceled</code> (rouge clair) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const BaliseSpan: Story = {
+	name: 'Balise span',
+	args: {
+		type: 'success',
+		label: 'Statut en span',
+		isSpan: true,
+		uniqueId: 'status-span',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut affiché dans une balise <code>span</code> (<code>isSpan</code>).</p>
+    <AmeliproStatus
+        type="success"
+        label="Statut en span"
+        is-span
+        unique-id="status-span"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut affiché dans une balise <code>span</code> (<code>isSpan</code>).</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const PaddingPersonnalise: Story = {
+	name: 'Padding personnalisé',
+	args: {
+		type: 'draft',
+		label: 'Padding personnalisé',
+		paddingX: '32px',
+		paddingY: '12px',
+		uniqueId: 'status-padding',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut avec padding horizontal et vertical personnalisé (<code>paddingX</code> et <code>paddingY</code>).</p>
+    <AmeliproStatus
+        type="draft"
+        label="Padding personnalisé"
+        padding-x="32px"
+        padding-y="12px"
+        unique-id="status-padding"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut avec padding horizontal et vertical personnalisé (<code>paddingX</code> et <code>paddingY</code>).</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}

package/src/components/Amelipro/AmeliproStatus/tests/AmeliproStatus.spec.ts

@@ -1,14 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { expect, describe, it } from 'vitest'
 import AmeliproStatus from '../AmeliproStatus.vue'
-import { vuetify } from '@tests/unit/setup'
 
 describe('AmeliproStatus', () => {
 	it('render correctly', async () => {
 		const wrapper = mount(AmeliproStatus, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				label: 'texte du statut',
 				uniqueId: 'my-status-id',