@cnamts/synapse 1.0.19 → 1.0.21

package/src/components/ErrorPage/locales.ts

@@ -1,5 +1,23 @@
+import imgUrlAp from './assets/error-ap.svg'
+
 export const locales = {
-	errorCodeText: 'Code d\'erreur\xa0: ',
-	supportIdMessage: 'Votre identifiant de support\xa0:',
-	btnText: 'Retour à l’accueil',
+	default: {
+		pageTitle: 'Une erreur est survenue',
+		message: 'Une erreur est survenue de notre côté, veuillez réessayer plus tard.',
+		src: undefined,
+		code: '500',
+	},
+	cnam: {
+		pageTitle: 'Une erreur est survenue',
+		message: 'Une erreur est survenue de notre côté, veuillez réessayer plus tard. Si le problème persiste veuillez nous contacter par téléphone au 3646',
+		src: undefined,
+		code: '500',
+	},
+	ap: {
+		pageTitle: 'Les services amelipro sont indisponibles !',
+		message:
+      'Nous mettons en œuvre les mesures nécessaires pour rétablir rapidement votre accès. Veuillez nous excuser pour la gêne occasionnée.',
+		src: imgUrlAp,
+		code: '500',
+	},
 }

package/src/components/ErrorPage/tests/ErrorPage.a11y.spec.ts

@@ -6,23 +6,15 @@ import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
 import ErrorPage from '../ErrorPage.vue'
 
-// Scénario d’accessibilité : page d’erreur avec titre, message, code
-// et bouton de retour vers la page d’accueil.
+// Scénario d’accessibilité : page d'erreur basée sur StatusPage,
+// sans bouton d’action, avec illustration décorative masquée.
 
 describe('ErrorPage – accessibility (axe)', () => {
-	it('has no obvious axe violations with title, message and action button', async () => {
-		const wrapper = mount(ErrorPage, {
-			props: {
-				pageTitle: 'Une erreur est survenue',
-				message: 'Un problème technique est survenu. Merci de réessayer plus tard.',
-				code: '500',
-				btnText: 'Retour à l\'accueil',
-				btnHref: 'https://www.ameli.fr',
-			},
-		})
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(ErrorPage)
 
 		const results = await axe(wrapper.element as HTMLElement)
-		assertNoA11yViolations(results, 'ErrorPage – default error page', {
+		assertNoA11yViolations(results, 'ErrorPage – default state', {
 			ignoreRules: ['region'],
 		})
 	})

package/src/components/ErrorPage/tests/ErrorPage.spec.ts

@@ -1,50 +1,11 @@
 import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import ErrorPage from '../ErrorPage.vue'
 
 describe('ErrorPage', () => {
 	it('renders correctly', () => {
-		const wrapper = mount(ErrorPage, {
-			props: {
-				pageTitle: 'Something went wrong',
-				message: 'Error message',
-			},
-		})
+		const wrapper = shallowMount(ErrorPage)
 
-		expect(wrapper.text()).toContain('Something went wrong')
-		expect(wrapper.text()).toContain('Error message')
 		expect(wrapper.html()).toMatchSnapshot()
 	})
-
-	it('renders correctly with undefined route', () => {
-		const wrapper = mount(ErrorPage, {
-			props: {
-				code: '501',
-				pageTitle: 'Error',
-				message: 'Error message',
-				btnText: 'Go to...',
-				btnHref: 'https://google.com',
-			},
-		})
-
-		expect(wrapper.find('a').exists()).toBe(true)
-		expect(wrapper.html()).toMatchSnapshot()
-	})
-
-	it('uses href without router navigation when only btnHref is provided', () => {
-		const wrapper = mount(ErrorPage, {
-			props: {
-				code: '401',
-				pageTitle: 'Auth error',
-				message: 'You are not authorized',
-				btnText: 'Logout',
-				btnHref: 'https://google.com',
-			},
-		})
-
-		const link = wrapper.find('a')
-		expect(link.exists()).toBe(true)
-		expect(link.attributes('href')).toBe('https://google.com')
-		expect(link.attributes('to')).toBeUndefined()
-	})
 })

package/src/components/ErrorPage/tests/__snapshots__/ErrorPage.spec.ts.snap

@@ -1,270 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ErrorPage > renders correctly 1`] = `
-<div class="
-  d-flex
-  justify-center
-  px-14
-  py-10
-  vd-page-container
-">
-  <div
-    class="
-      bg-transparent
-      v-sheet
-      v-theme--light
-    "
-    style="width: 800px;"
-  >
-    <div class="
-      elevation-0
-      pa-6
-      pa-sm-16
-      v-card
-      v-card--density-default
-      v-card--variant-elevated
-      v-theme--light
-    ">
-      <!---->
-      <div class="v-card__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="v-progress-linear__background"
-            style="opacity: NaN;"
-          ></div>
-          <div
-            class="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="
-                long
-                v-progress-linear__indeterminate
-              "></div>
-              <div class="
-                short
-                v-progress-linear__indeterminate
-              "></div>
-            </div>
-          </transition-stub>
-          <!---->
-        </div>
-      </div>
-      <!---->
-      <!---->
-      <div class="
-        max-width-none
-        v-row
-      ">
-        <div class="
-          align-sm-start
-          d-flex
-          flex-column
-          justify-center
-          order-last
-          order-sm-first
-          text-center
-          text-sm-left
-          v-col-12
-          v-col-sm-12
-        ">
-          <!-- v-if -->
-          <h1 class="
-            font-weight-bold
-            mb-2
-            mb-4
-            text-h5
-          ">
-            Something went wrong
-          </h1>
-          <p>
-            <span>
-              Error message
-            </span>
-          </p>
-          <!-- v-if -->
-        </div>
-        <!-- v-if -->
-      </div>
-      <!---->
-      <!---->
-      <span class="v-card__underlay"></span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`ErrorPage > renders correctly with undefined route 1`] = `
-<div class="
-  d-flex
-  justify-center
-  px-14
-  py-10
-  vd-page-container
-">
-  <div
-    class="
-      bg-transparent
-      v-sheet
-      v-theme--light
-    "
-    style="width: 800px;"
-  >
-    <div class="
-      elevation-0
-      pa-6
-      pa-sm-16
-      v-card
-      v-card--density-default
-      v-card--variant-elevated
-      v-theme--light
-    ">
-      <!---->
-      <div class="v-card__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="v-progress-linear__background"
-            style="opacity: NaN;"
-          ></div>
-          <div
-            class="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="
-                long
-                v-progress-linear__indeterminate
-              "></div>
-              <div class="
-                short
-                v-progress-linear__indeterminate
-              "></div>
-            </div>
-          </transition-stub>
-          <!---->
-        </div>
-      </div>
-      <!---->
-      <!---->
-      <div class="
-        max-width-none
-        v-row
-      ">
-        <div class="
-          align-sm-start
-          d-flex
-          flex-column
-          justify-center
-          order-last
-          order-sm-first
-          text-center
-          text-sm-left
-          v-col-12
-          v-col-sm-12
-        ">
-          <div class="
-            mb-4
-            sy-code
-            text-primary
-          ">
-            <span class="d-sr-only">
-              Code d'erreur&nbsp;:
-            </span>
-            501
-          </div>
-          <h1 class="
-            font-weight-bold
-            mb-2
-            mb-4
-            text-h5
-          ">
-            Error
-          </h1>
-          <p>
-            <span>
-              Error message
-            </span>
-          </p>
-          <a
-            class="
-              bg-primary
-              mt-6
-              v-btn
-              v-btn--density-default
-              v-btn--elevated
-              v-btn--size-default
-              v-btn--variant-elevated
-              v-theme--light
-            "
-            href="https://google.com"
-          ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-            
-          <!----><span
-            class="v-btn__content"
-            data-no-activator=""
-          >Go to...</span>
-            
-          <!---->
-            
-          <!---->
-          </a>
-        </div>
-        <!-- v-if -->
-      </div>
-      <!---->
-      <!---->
-      <span class="v-card__underlay"></span>
-    </div>
-  </div>
-</div>
+<status-page-stub
+  btnlink="/"
+  code="500"
+  codeerrortext="Code d'erreur : "
+  hidebtn="false"
+  message="Une erreur est survenue de notre côté, veuillez réessayer plus tard."
+  pagetitle="Une erreur est survenue"
+></status-page-stub>
 `;

package/src/components/ExternalLinks/accessibilite/Accessibility.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../ExternalLinks.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/ExternalLinks.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/808" target="_blank" style={{color:'#0C41BD'}}>issue #808</a>)</p>
+	</div>

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -9,6 +9,7 @@
 	} from '@mdi/js'
 	import { cnamContextualTokens } from '@/designTokens/tokens/cnam/cnamContextual'
 	import { locales as defaultLocales } from './locales'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	type FileState = 'initial' | 'success' | 'error' | 'loading'
 
@@ -78,25 +79,29 @@
 							{{ locales.error }}
 						</span>
 
-						<VIcon
+						<SyIcon
 							v-if="state === 'error'"
+							:icon="mdiAlertCircle"
 							:size="cnamContextualTokens.iconSize.default"
-							:aria-label="locales.error"
 							color="error"
-						>{{ mdiAlertCircle }}</VIcon>
+							decorative
+						/>
 
-						<VIcon
+						<SyIcon
 							v-else-if="state === 'success'"
+							:icon="mdiCheckCircle"
 							:size="cnamContextualTokens.iconSize.default"
-							:aria-label="locales.success"
 							color="success"
-						>{{ mdiCheckCircle }}</VIcon>
+							decorative
+						/>
 
-						<VIcon
+						<SyIcon
 							v-else
 							:size="cnamContextualTokens.iconSize.default"
 							color="primary"
-						>{{ mdiFile }}</VIcon>
+							:icon="mdiFile"
+							decorative
+						/>
 					</slot>
 				</span>
 				<div>
@@ -129,11 +134,11 @@
 				>
 					<span>Importer</span>
 					<template #prepend>
-						<VIcon
+						<SyIcon
 							color="primary"
-						>
-							{{ mdiTrayArrowUp }}
-						</VIcon>
+							:icon="mdiTrayArrowUp"
+							decorative
+						/>
 					</template>
 				</VBtn>
 				<VBtn
@@ -144,11 +149,11 @@
 				>
 					<span>{{ locales.see }}</span>
 					<template #prepend>
-						<VIcon
+						<SyIcon
 							color="primary"
-						>
-							{{ mdiEyeOutline }}
-						</VIcon>
+							:icon="mdiEyeOutline"
+							decorative
+						/>
 					</template>
 				</VBtn>
 				<VBtn
@@ -159,11 +164,11 @@
 				>
 					<span>{{ locales.delete }}</span>
 					<template #prepend>
-						<VIcon
+						<SyIcon
 							color="error"
-						>
-							{{ mdiDeleteOutline }}
-						</VIcon>
+							:icon="mdiDeleteOutline"
+							decorative
+						/>
 					</template>
 				</VBtn>
 			</div>

package/src/components/FileList/accessibilite/Accessibility.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../FileList.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+<br />

package/src/components/FilePreview/accessibilite/Accessibility.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../FilePreview.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+<br />

package/src/components/FileUpload/FileUpload.vue

@@ -40,8 +40,13 @@
 	const fileList = ref<File[]>([])
 	const isDarkMode = useTheme().current.value.dark
 
+	function openFileDialog() {
+		fileInput.value?.click()
+	}
+
 	defineExpose({
 		fileInput,
+		openFileDialog,
 	})
 
 	watch(() => props.modelValue, (value) => {

package/src/components/FileUpload/FileUploadContent.vue

@@ -3,6 +3,7 @@
 	import { locales } from './locales'
 	import { mdiCloudUpload } from '@mdi/js'
 	import { computed } from 'vue'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = defineProps<{
 		allowedExtensions: string[]
@@ -31,12 +32,12 @@
 		<slot
 			name="icon"
 		>
-			<VIcon
+			<SyIcon
 				size="40"
 				color="primary"
-			>
-				{{ mdiCloudUpload }}
-			</VIcon>
+				:icon="mdiCloudUpload"
+				decorative
+			/>
 		</slot>
 
 		<span

package/src/components/FileUpload/accessibilite/Accessibility.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../FileUpload.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+

package/src/components/FilterInline/FilterInline.vue

@@ -4,6 +4,7 @@
 	import { toRef } from 'vue'
 	import ChipList from '../ChipList/ChipList.vue'
 	import { locales as defaultLocales } from './locales'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: FilterProp
@@ -59,12 +60,12 @@
 
 					{{ filter.title }}
 
-					<VIcon
+					<SyIcon
 						size="small"
 						class="ml-1"
-					>
-						{{ isActive ? mdiChevronUp : mdiChevronDown }}
-					</VIcon>
+						:icon="isActive ? mdiChevronUp : mdiChevronDown"
+						decorative
+					/>
 				</VBtn>
 			</template>
 

package/src/components/FilterInline/accessibilite/Accessibility.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../FilterInline.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+<br />

package/src/components/FilterSideBar/accessibilite/Accessibility.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../FilterSideBar.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/FilterSideBar.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/913" target="_blank" style={{color:'#0C41BD'}}>issue #913</a>)</p>
+	</div>