@cnamts/synapse 1.0.12 → 1.0.14

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

@@ -0,0 +1,155 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproTransmission from '../AmeliproTransmission.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproTransmission> = {
+	alternateButtonLabel: {
+		type: String,
+		default: 'Modifier',
+	},
+	confirmButtonLabel: {
+		type: String,
+		default: 'Transmettre',
+	},
+	confirmHref: {
+		type: String,
+		default: undefined,
+	},
+	confirmTo: {
+		type: [Array, Object, String] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	modifyHref: {
+		type: String,
+		default: undefined,
+	},
+	modifyTo: {
+		type: [Array, Object, String] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	printHref: {
+		type: String,
+		default: undefined,
+	},
+	printTo: {
+		type: [Array, Object, String] as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	transmissionActions: {
+		type: Boolean,
+		default: true,
+	},
+	transmissionCardTitle: {
+		type: String,
+		default: undefined,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproTransmission> => ({})
+
+const modifiedPropValues = (): ComponentProps<typeof AmeliproTransmission> => ({
+	alternateButtonLabel: 'Modified alternate button label',
+	confirmButtonLabel: 'Modified confirm button label',
+	confirmHref: '/modified-confirm-href',
+	confirmTo: '/modified-confirm-to',
+	modifyHref: '/modified-modify-href',
+	modifyTo: '/modified-modify-to',
+	printHref: '/modified-print-href',
+	printTo: '/modified-print-to',
+	transmissionActions: false,
+	transmissionCardTitle: 'Modified transmission card title',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproTransmission)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproTransmission', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTransmission>>
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproTransmission, { props: requiredPropValues() })
+		})
+
+		it('prop uniqueId sets attribute id on .amelipro-transmission', async () => {
+			expect(vueWrapper.find('.amelipro-transmission').attributes('id')).toBe(testHelper.default('uniqueId'))
+			const { uniqueId } = modifiedPropValues()
+			await vueWrapper.setProps({ uniqueId })
+			expect(vueWrapper.find('.amelipro-transmission').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-container`)
+		})
+	})
+
+	describe.skip('Setting props should update props or attributes of inner components', () => {
+		// À compléter selon la structure interne du composant si besoin
+	})
+
+	describe('Setting props should update visibility of actions', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTransmission>>
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproTransmission, { props: requiredPropValues() })
+		})
+
+		it('prop transmissionActions sets .amelipro-transmission__actions visibility', async () => {
+			// À revoir, son affichage dépend aussi du slot actions
+			expect(vueWrapper.find('.amelipro-transmission__actions').exists()).toBe(true)
+			const { transmissionActions } = modifiedPropValues()
+			await vueWrapper.setProps({ transmissionActions })
+			expect(vueWrapper.find('.amelipro-transmission__actions').exists()).toBe(true)
+		})
+	})
+
+	describe('Slots', () => {
+		it('displays slot content in actions', () => {
+			const vueWrapper = shallowMount(AmeliproTransmission, {
+				props: { ...requiredPropValues(), transmissionActions: false },
+				slots: { actions: '<div id="slot-content">Slot Content</div>' },
+			})
+			expect(vueWrapper.find('#slot-content').text()).toBe('Slot Content')
+		})
+	})
+
+	describe('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproTransmission>>
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproTransmission, { props: modifiedPropValues() })
+		})
+
+		it('click on .amelipro-transmission__print-btn emits click:print', async () => {
+			expect(vueWrapper.emitted('click:print')).toBeUndefined()
+			await vueWrapper.find('.amelipro-transmission__print-btn').trigger('click')
+			expect(vueWrapper.emitted('click:print')).toStrictEqual([[]])
+		})
+
+		it('click on .amelipro-transmission__alternate-btn emits click:modify', async () => {
+			expect(vueWrapper.emitted('click:modify')).toBeUndefined()
+			await vueWrapper.find('.amelipro-transmission__alternate-btn').trigger('click')
+			expect(vueWrapper.emitted('click:modify')).toStrictEqual([[]])
+		})
+
+		it('click on .amelipro-transmission__confirm-btn emits click:confirm', async () => {
+			expect(vueWrapper.emitted('click:confirm')).toBeUndefined()
+			await vueWrapper.find('.amelipro-transmission__confirm-btn').trigger('click')
+			expect(vueWrapper.emitted('click:confirm')).toStrictEqual([[]])
+		})
+	})
+})

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

@@ -0,0 +1,240 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTransmission > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="
+    amelipro-transmission
+    w-100
+  "
+  id="modified-unique-id-container"
+>
+  <div class="
+    amelipro-transmission__wrapper
+    w-100
+  ">
+    <amelipro-card-stub
+      bordercolor="ap-grey-lighten-2"
+      bordered="true"
+      cardcolor="ap-white"
+      cardtitle="Modified transmission card title"
+      classes="mb-6 amelipro-transmission__card"
+      divider="true"
+      headerrightwidth="50%"
+      nocardheader="false"
+      rightpart="false"
+      rightpartwidth="25%"
+      titlecolor="ap-grey-darken-1"
+      titlelevel="2"
+      uniqueid="modified-unique-id-card"
+    ></amelipro-card-stub>
+  </div>
+  <div
+    class="
+      align-center
+      amelipro-transmission__actions
+      d-flex
+      justify-space-between
+    "
+    id="modified-unique-id-action-wrapper"
+  >
+    <div class="amelipro-transmission__actions__left">
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="false"
+        class="
+          amelipro-transmission__print-btn
+          mb-4
+          text-none
+        "
+        color="ap-blue-darken-1"
+        disabled="false"
+        hovercolor="ap-blue-darken-2"
+        hoverunderline="true"
+        href="/modified-print-href"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconleft="false"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="true"
+        textcolor="ap-white"
+        to="/modified-print-to"
+        type="button"
+        underline="false"
+        uniqueid="modified-unique-id-print-btn"
+      ></amelipro-btn-stub>
+    </div>
+    <div class="
+      amelipro-transmission__actions__right
+      d-flex
+      justify-end
+    ">
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="true"
+        class="
+          amelipro-transmission__alternate-btn
+          mr-2
+        "
+        color="ap-white"
+        disabled="false"
+        hovercolor="ap-blue-lighten-3"
+        hoverunderline="false"
+        href="/modified-modify-href"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconleft="false"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="false"
+        textcolor="ap-blue-darken-1"
+        to="/modified-modify-to"
+        type="button"
+        underline="false"
+        uniqueid="modified-unique-id-alternate-btn"
+      ></amelipro-btn-stub>
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="false"
+        class="amelipro-transmission__confirm-btn"
+        color="ap-blue-darken-1"
+        disabled="false"
+        hovercolor="ap-blue-darken-2"
+        hoverunderline="false"
+        href="/modified-confirm-href"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconleft="false"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="false"
+        textcolor="ap-white"
+        to="/modified-confirm-to"
+        type="button"
+        underline="false"
+        uniqueid="modified-unique-id-confirm-btn"
+      ></amelipro-btn-stub>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AmeliproTransmission > Snapshots > renders the component with only required properties filled in 1`] = `
+<div class="
+  amelipro-transmission
+  w-100
+">
+  <div class="
+    amelipro-transmission__wrapper
+    w-100
+  ">
+    <amelipro-card-stub
+      bordercolor="ap-grey-lighten-2"
+      bordered="true"
+      cardcolor="ap-white"
+      classes="mb-6 amelipro-transmission__card"
+      divider="true"
+      headerrightwidth="50%"
+      nocardheader="false"
+      rightpart="false"
+      rightpartwidth="25%"
+      titlecolor="ap-grey-darken-1"
+      titlelevel="2"
+    ></amelipro-card-stub>
+  </div>
+  <div class="
+    align-center
+    amelipro-transmission__actions
+    d-flex
+    justify-space-between
+  ">
+    <div class="amelipro-transmission__actions__left">
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="false"
+        class="
+          amelipro-transmission__print-btn
+          mb-4
+          text-none
+        "
+        color="ap-blue-darken-1"
+        disabled="false"
+        hovercolor="ap-blue-darken-2"
+        hoverunderline="true"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconleft="false"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="true"
+        textcolor="ap-white"
+        type="button"
+        underline="false"
+      ></amelipro-btn-stub>
+    </div>
+    <div class="
+      amelipro-transmission__actions__right
+      d-flex
+      justify-end
+    ">
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="true"
+        class="
+          amelipro-transmission__alternate-btn
+          mr-2
+        "
+        color="ap-white"
+        disabled="false"
+        hovercolor="ap-blue-lighten-3"
+        hoverunderline="false"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconleft="false"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="false"
+        textcolor="ap-blue-darken-1"
+        type="button"
+        underline="false"
+      ></amelipro-btn-stub>
+      <amelipro-btn-stub
+        badge="false"
+        badgebgcolor="ap-pink"
+        badgecolor="ap-white"
+        bordered="false"
+        class="amelipro-transmission__confirm-btn"
+        color="ap-blue-darken-1"
+        disabled="false"
+        hovercolor="ap-blue-darken-2"
+        hoverunderline="false"
+        iconbgcolor="transparent"
+        iconbordered="false"
+        iconleft="false"
+        infoblock="false"
+        minheight="2.5rem"
+        size="60px"
+        text="false"
+        textcolor="ap-white"
+        type="button"
+        underline="false"
+      ></amelipro-btn-stub>
+    </div>
+  </div>
+</div>
+`;

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

@@ -92,7 +92,6 @@ export const Default: Story = {
 				:file-type-accepted="args.fileTypeAccepted"
 				:max-file-number="args.maxFileNumber"
 				:unique-id="args.uniqueId"
-				v-bind="args"
 			/>
 		`,
 	}),

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

@@ -35,7 +35,10 @@ exports[`ServiceMenu > render correctly 1`] = `
       data-no-activator=""
     >
       <span
-        class="d-sr-only"
+        class="
+          amelipro-btn__label
+          d-sr-only
+        "
         id="service-menu-id-service-menu-btn-btn-label"
       >
         Bouquet de services

package/src/components/Amelipro/StructureMenu/StructureBtn/StructureBtn.vue

@@ -52,6 +52,10 @@
 .v-btn {
 	letter-spacing: unset;
 
+	& :deep(.v-btn__content) {
+		white-space: normal !important;
+	}
+
 	& :deep(.v-btn__overlay),
 	& :deep(.v-btn__underlay) {
 		display: none !important;

package/src/components/Amelipro/StructureMenu/StructureTabs/StructureTabs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import type { IStructureTabs, StructureTab } from './types'
-	import { type PropType, computed, nextTick, ref } from 'vue'
+	import { computed, nextTick, type PropType, ref } from 'vue'
 	import StructureBtn from '../StructureBtn/StructureBtn.vue'
 	import StructureList from '../StructureList/StructureList.vue'
 	import { locales } from './locales'
@@ -109,14 +109,13 @@
 			>
 				{{ locales.label }}
 			</p>
-
-			<div class="d-flex flex-column flex-sm-row">
+			<div class="d-flex flex-column flex-sm-row flex-sm-wrap">
 				<StructureBtn
 					v-for="(item, index) in tabs"
 					:key="index"
 					ref="structureBtns"
 					:aria-selected="selected === index ? 'true' : 'false'"
-					class="mr-0 mr-sm-3 mb-2 mb-sm-0"
+					class="mr-0 mr-sm-3 mb-2 mb-sm-1"
 					:controls="`structure-panel-${index}`"
 					role="tab"
 					:selected="index === selected"
@@ -135,7 +134,7 @@
 			v-for="(tab, index) in tabs"
 			:id="`structure-panel-${index}`"
 			:key="index"
-			class="mt-4"
+			class="mt-3"
 			:role="tabs.length > 1 ? 'tabpanel' : undefined"
 			:tabindex="selected === index && tabs.length > 1 ? 0 : -1"
 		>

package/src/components/Amelipro/StructureMenu/StructureTabs/tests/__snapshots__/StructureTabs.spec.ts.snap

@@ -27,6 +27,7 @@ exports[`StructureTabs > render correctly 1`] = `
       d-flex
       flex-column
       flex-sm-row
+      flex-sm-wrap
     ">
       <button
         aria-controls="structure-panel-0"
@@ -35,7 +36,7 @@ exports[`StructureTabs > render correctly 1`] = `
           bg-ap-blue-darken-2
           elevation-0
           mb-2
-          mb-sm-0
+          mb-sm-1
           mr-0
           mr-sm-3
           structure-btn
@@ -71,7 +72,7 @@ exports[`StructureTabs > render correctly 1`] = `
           bg-ap-grey-lighten-3
           elevation-0
           mb-2
-          mb-sm-0
+          mb-sm-1
           mr-0
           mr-sm-3
           structure-btn
@@ -103,7 +104,7 @@ exports[`StructureTabs > render correctly 1`] = `
     </div>
   </div>
   <div
-    class="mt-4"
+    class="mt-3"
     id="structure-panel-0"
     role="tabpanel"
     tabindex="0"
@@ -461,7 +462,7 @@ exports[`StructureTabs > render correctly 1`] = `
     </div>
   </div>
   <div
-    class="mt-4"
+    class="mt-3"
     id="structure-panel-1"
     role="tabpanel"
     tabindex="-1"

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

@@ -71,7 +71,10 @@ exports[`StructureMenu > render correctly 1`] = `
           data-no-activator=""
         >
           <span
-            class="d-sr-only"
+            class="
+              amelipro-btn__label
+              d-sr-only
+            "
             id="my-structure-menu-id-structure-menu-close-btn-btn-label"
           >
             Fermer la fenêtre modale
@@ -309,6 +312,7 @@ exports[`StructureMenu > render correctly 1`] = `
               d-flex
               flex-column
               flex-sm-row
+              flex-sm-wrap
             ">
               <button
                 aria-controls="structure-panel-0"
@@ -317,7 +321,7 @@ exports[`StructureMenu > render correctly 1`] = `
                   bg-ap-blue-darken-2
                   elevation-0
                   mb-2
-                  mb-sm-0
+                  mb-sm-1
                   mr-0
                   mr-sm-3
                   structure-btn
@@ -353,7 +357,7 @@ exports[`StructureMenu > render correctly 1`] = `
                   bg-ap-grey-lighten-3
                   elevation-0
                   mb-2
-                  mb-sm-0
+                  mb-sm-1
                   mr-0
                   mr-sm-3
                   structure-btn
@@ -385,7 +389,7 @@ exports[`StructureMenu > render correctly 1`] = `
             </div>
           </div>
           <div
-            class="mt-4"
+            class="mt-3"
             id="structure-panel-0"
             role="tabpanel"
             tabindex="0"
@@ -743,7 +747,7 @@ exports[`StructureMenu > render correctly 1`] = `
             </div>
           </div>
           <div
-            class="mt-4"
+            class="mt-3"
             id="structure-panel-1"
             role="tabpanel"
             tabindex="-1"
@@ -1189,7 +1193,10 @@ exports[`StructureMenu > render correctly 1`] = `
                 data-no-activator=""
               >
                 <span
-                  class="d-sr-only"
+                  class="
+                    amelipro-btn__label
+                    d-sr-only
+                  "
                   id="my-structure-menu-id-default-structure-switch-description-btn-btn-label"
                 >
                   plus d’informations

package/src/components/Amelipro/UserMenu/UserMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { type PropType, computed, ref } from 'vue'
+	import { computed, type PropType, ref } from 'vue'
 	import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
 	import AmeliproIconBtn from '../AmeliproIconBtn/AmeliproIconBtn.vue'
 	import UserMenuDetails from './UserMenuDetails/UserMenuDetails.vue'
@@ -146,6 +146,7 @@
 
 	.user-menu {
 		position: relative;
+		overflow-wrap: break-word;
 	}
 
 	.user-menu-popover {

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

@@ -35,7 +35,10 @@ exports[`UserMenu > render correctly 1`] = `
       data-no-activator=""
     >
       <span
-        class="d-sr-only"
+        class="
+          amelipro-btn__label
+          d-sr-only
+        "
         id="user-information-summary-id-open-btn-btn-label"
       >
         infos utilisateur

package/src/components/Captcha/Captcha.mdx

@@ -0,0 +1,72 @@
+import {Controls, Canvas, Meta, Story} from '@storybook/blocks';
+import * as CaptchaStories from './Captcha.stories';
+
+<Meta of={CaptchaStories} />
+
+<div className="header">
+  <h1>Captcha</h1>
+  <p>Le composant `Captcha` est utilisé pour afficher un captcha à l’utilisateur. </p>
+</div>
+
+<Canvas
+  of={CaptchaStories.Default}
+  	source={{
+		language: 'html',
+		format: 'dedent',
+		code: `
+		<script lang="ts" setup>
+			import { captcha } from '@cnamts/synapse'
+		</script>
+
+		<template>
+			<VCard class="pa-8" width="400">
+        <Captcha 
+          url-create="..."
+          url-get-image="..."
+          url-get-audio="/..."
+          service="(e) => {
+            // call the API to verify the captcha and return the response
+          }"
+          @validation:success="(e) => { ... }"
+          @validation:error="(e) => { ... }"
+        />
+      </VCard>
+		</template>
+		`
+	}}
+/>
+
+<Story
+  of={CaptchaStories.WarningDocProps}
+/>
+
+## API
+
+<Controls of={CaptchaStories.Default} />
+
+## Context d'utilisation
+
+Le composant Captcha permet d'interagir avec l'api d'OBS <a href="https://www.orange-business.com/fr/solutions/securite/live-identity-captcha" target="_blank" rel="noopener noreferrer">Live Identity Captcha</a>.
+
+Pour implémenter le composant avec l'api OBS, se référer à <a href="http://pad-st.cnamts.fr/pad-ddst/catalogue/products.html?product=captcha&division=dait" target="_blank" rel="noopener noreferrer">la documentation DDST</a>.
+
+### Détails d'implementation
+
+Les api Captcha d'OBS sont exposées en https.
+
+Pour les appels réalisés depuis un back-end, il est nécessaire d'ajouter le root CA (autorité de certifications racine) au niveau du truststore du serveur hébergeant ce back-end.
+Pour la production et la pré-production, le root CA "DigiCert Global Root CA" est accessible (voir informations de sécurité) depuis le site : <a href="https://captcha.liveidentity.com/documentation" target="_blank" rel="noopener noreferrer">https://captcha.liveidentity.com/documentation</a>.
+
+De plus, les api Captcha d'OBS sont externes / non hébergées par la CNAM.
+Il est donc nécessaire :
+- d'autoriser ces appels sortant dans la liste blanche du firewall Cnam pour la production et le hors prod
+- de réaliser l'ouverture des flux depuis la plateforme d'hébergement (ex : csh-dijon.cnamts.fr)
+Logiquement, ces deux points ont été déjà réalisés.
+
+## Précautions d'utilisation
+
+Pour permettre une bonne expérience utilisateur et éviter de bloquer des utilisateurs légitimes potentiellement en situation de handicap, il est recommandé de suivre les bonnes pratiques suivantes :
+
+ - Ne pas utiliser de captcha lorsque l'utilisateur est déjà authentifié.
+ - Préférer l'utilisation de captcha invisible (API scoring) lorsque c'est possible.
+ - Préferer l'utilisation de captcha uniquement lorsqu'un comportement suspect est détecté (ex : trop de tentatives de connexion échouées).