@cnamts/synapse 0.0.13-alpha → 0.0.15-alpha

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

@@ -1,18 +1,63 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
-"<div data-v-e77b7070="" modelvalue="true" width="600px" persistent="false" retain-focus="false" aria-modal="true" class="vd-dialog-box">
-  <div data-v-e77b7070="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6" id="dialogContent" aria-labelledby="Test title">
+<div
+  aria-modal="true"
+  class="sy-dialog-box"
+  modelvalue="true"
+  persistent="false"
+  retain-focus="false"
+  width="600px"
+>
+  <div
+    aria-labelledby="Test title"
+    class="
+      pa-6
+      v-card
+      v-card--density-default
+      v-card--variant-elevated
+      v-theme--light
+    "
+    id="dialogContent"
+  >
     <!---->
     <div class="v-card__loader">
-      <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+      <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 name="fade-transition" appear="false" persisted="false" css="true">
+        <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="v-progress-linear__indeterminate long"></div>
-            <div class="v-progress-linear__indeterminate short"></div>
+            <div class="
+              long
+              v-progress-linear__indeterminate
+            "></div>
+            <div class="
+              short
+              v-progress-linear__indeterminate
+            "></div>
           </div>
         </transition-stub>
         <!---->
@@ -20,27 +65,121 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
     </div>
     <!---->
     <!---->
-    <div data-v-e77b7070="" class="v-card-title d-flex align-start flex-nowrap pa-0 mb-6 mr-6">
-      <h2 data-v-e77b7070="" class="text-h6 font-weight-bold">Test title</h2>
-      <div data-v-e77b7070="" class="v-spacer"></div><button data-v-e77b7070="" type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-elevated mt-n2 mr-n2 ml-4" style="height: 32px; width: 32px;" aria-label="Fermer la boîte de dialogue"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><i data-v-e77b7070="" class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+    <div class="
+      align-start
+      d-flex
+      flex-nowrap
+      mb-6
+      mr-6
+      pa-0
+      v-card-title
+    ">
+      <h2 class="
+        font-weight-bold
+        text-h6
+      ">
+        Test title
+      </h2>
+      <div class="v-spacer"></div>
+      <button
+        aria-label="Fermer la boîte de dialogue"
+        class="
+          elevation-0
+          ml-4
+          mr-n2
+          mt-n2
+          v-btn
+          v-btn--density-default
+          v-btn--elevated
+          v-btn--icon
+          v-btn--size-default
+          v-btn--variant-elevated
+          v-theme--light
+        "
+        style="height: 32px; width: 32px;"
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          <i
+            aria-hidden="true"
+            class="
+              M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z
+              mdi
+              notranslate
+              v-icon
+              v-icon--size-default
+              v-theme--light
+            "
+          ></i>
+        </span>
         <!---->
         <!---->
       </button>
     </div>
-    <div data-v-e77b7070="" class="d-flex flex-wrap mt-6 vd-dialog-box-actions-ctn">
-      <div data-v-e77b7070="" class="v-spacer"></div><button data-v-e77b7070="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator="">Cancel</span>
+    <div class="
+      d-flex
+      flex-wrap
+      mt-6
+      sy-dialog-box-actions-ctn
+    ">
+      <div class="v-spacer"></div>
+      <button
+        class="
+          text-primary
+          v-btn
+          v-btn--density-default
+          v-btn--size-default
+          v-btn--variant-text
+          v-theme--light
+        "
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          Cancel
+        </span>
         <!---->
         <!---->
-      </button><button data-v-e77b7070="" type="button" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated" data-test-id="confirm-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator="">Confirm</span>
+      </button>
+      <button
+        class="
+          bg-primary
+          v-btn
+          v-btn--density-default
+          v-btn--elevated
+          v-btn--size-default
+          v-btn--variant-elevated
+          v-theme--light
+        "
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          Confirm
+        </span>
         <!---->
         <!---->
       </button>
     </div>
     <!---->
-    <!----><span class="v-card__underlay"></span>
+    <!---->
+    <span class="v-card__underlay"></span>
   </div>
-</div>"
+</div>
 `;

package/src/components/DownloadBtn/Accessibilite.stories.ts

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/DownloadBtn.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4007" target="_blank" style="color:#0C41BD;">issue #4007</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/DownloadBtn/DownloadBtn.stories.ts

@@ -1,7 +1,7 @@
 import { fn, userEvent, within } from '@storybook/test'
 import type { Meta, StoryObj } from '@storybook/vue3'
 import axios from 'axios'
-import { VThemeProvider } from 'vuetify/components'
+import { VSheet } from 'vuetify/components'
 import DownloadBtn from './DownloadBtn.vue'
 import NotificationBar from '../NotificationBar/NotificationBar.vue'
 import { useNotificationService } from '@/services/NotificationService'
@@ -22,6 +22,15 @@ const meta = {
 				category: 'slots',
 			},
 		},
+		dark: {
+			control: 'boolean',
+			description: 'Applique le thème sombre.',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
 		filePromise: {
 			control: false,
 			description: 'Une fonction retournant une valeur de retour de Axios `Promise<AxiosResponse>`. <br>Exemple: `() => axios.get("https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f")`',
@@ -68,6 +77,18 @@ const meta = {
 				category: 'props',
 			},
 		},
+		backgroundColor: {
+			control: { type: 'text' },
+			description: 'Couleur de fond du bouton parmi la palette du thème.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'white',
+				},
+			},
+		},
 	},
 	args: {
 		vuetifyOptions: {
@@ -219,15 +240,16 @@ export const Dark: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-	<VThemeProvider theme="dark" with-background class="pa-4">
+	<VSheet color="primary" class="pa-4">
 		<DownloadBtn
+			dark
 			:file-promise="download"
 			@error="console.log('error')"
 			@success="console.log('success')"
 		>
 			Télécharger
 		</DownloadBtn>
-	</VThemeProvider>
+	</VSheet>
 </template>
 				`,
 			},
@@ -246,17 +268,18 @@ export const Dark: Story = {
 		],
 	},
 	render: args => ({
-		components: { VThemeProvider, DownloadBtn },
+		components: { VSheet, DownloadBtn },
 		setup() {
 			return { args }
 		},
 		template: `
-			<VThemeProvider theme="dark" with-background class="pa-4">
+			<VSheet color="primary" class="pa-4">
 				<DownloadBtn v-bind="args">{{ args.default }}</DownloadBtn>
-			</VThemeProvider>
+			</VSheet>
 		`,
 	}),
 	args: {
+		dark: true,
 		filePromise: () => axios.get('https://run.mocky.io/v3/884c25f5-6dc2-4c01-b8d9-26c54042f94f'),
 		default: 'Télécharger',
 		onError: fn(),
@@ -381,13 +404,13 @@ export const Customization: Story = {
     
     const vuetifyOptions = {
 		btn: {
-			variant: 'plain',
+			variant: 'flat',
 			ripple: true,
 			color: 'secondary',
 		},
 		icon: {
 			class: 'ml-2 mr-2',
-			color: 'secondary',
+			color: 'white',
 		},
 	}
 </script>
@@ -402,13 +425,13 @@ export const Customization: Story = {
 		onSuccess: fn(),
 		vuetifyOptions: {
 			btn: {
-				variant: 'plain',
+				variant: 'flat',
 				ripple: true,
 				color: 'secondary',
 			},
 			icon: {
 				class: 'ml-2 mr-2',
-				color: 'secondary',
+				color: 'white',
 			},
 		},
 	},

package/src/components/DownloadBtn/DownloadBtn.vue

@@ -6,6 +6,7 @@
 	import deepmerge from 'deepmerge'
 	import { computed, ref, useAttrs } from 'vue'
 	import { config } from './config'
+	import { locales as defaultLocales } from './locales'
 
 	type State = 'idle' | 'loading' | 'success' | 'error'
 
@@ -17,6 +18,9 @@
 	export interface Props {
 		filePromise: () => Promise<AxiosResponse<Blob>>
 		fallbackFilename?: string
+		backgroundColor?: string
+		dark?: boolean
+		locales?: typeof defaultLocales
 	}
 
 	defineOptions({
@@ -25,12 +29,20 @@
 
 	const props = withDefaults(defineProps<Props & CustomizableOptions>(), {
 		fallbackFilename: undefined,
+		backgroundColor: 'white',
+		dark: false,
+		locales: () => defaultLocales,
 	})
+
 	const emits = defineEmits(['error', 'success'])
 	const attrs = useAttrs()
 	const state = ref<State>('idle')
 	const options = useCustomizableOptions(config, props)
 	const btnOptions = computed(() => deepmerge(options.value.btn, attrs))
+	const isDark = computed(() => props.dark ?? false)
+	const buttonColor = computed(() => isDark.value ? 'white' : options.value.btn.color)
+	const buttonBgColor = computed(() => isDark.value ? 'transparent' : props.backgroundColor)
+	const iconColor = computed(() => isDark.value ? 'white' : options.value.icon.color)
 
 	/**
 	 * Get filename and content type from headers
@@ -82,23 +94,41 @@
 	<VBtn
 		v-bind="btnOptions"
 		:loading="state === 'loading'"
-		:class="btnOptions.variant === 'outlined' ? 'outlined-style' : ''"
-		class="vd-download-btn"
+		class="sy-download-btn"
+		:color="buttonColor"
+		:class="`bg-${buttonBgColor}`"
 		data-testid="download-btn"
 		@click="download"
 	>
 		<slot name="icon">
-			<VIcon v-bind="options.icon">
+			<VIcon
+				v-bind="options.icon"
+				:color="iconColor"
+			>
 				{{ mdiDownload }}
 			</VIcon>
 		</slot>
 
 		<slot />
+
+		<template #loader>
+			<p
+				class="d-sr-only"
+				aria-live="polite"
+			>
+				{{ locales.loader }}
+			</p>
+			<VProgressCircular
+				color="currentColor"
+				indeterminate
+				width="2"
+			/>
+		</template>
 	</VBtn>
 </template>
 
 <style lang="scss" scoped>
-.vd-download-btn :deep() {
+.sy-download-btn :deep() {
 	.v-btn__content {
 		flex-wrap: wrap;
 	}
@@ -108,7 +138,18 @@
 	}
 }
 
-.outlined-style {
-	border: 1px solid currentcolor;
+.v-btn:deep() {
+	.v-btn__underlay,
+	.v-btn__overlay {
+		display: none;
+	}
+}
+
+.sy-download-btn:focus-visible {
+	outline: 0;
+}
+
+.sy-download-btn:focus-visible::after {
+	opacity: 1;
 }
 </style>

package/src/components/DownloadBtn/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	loader: 'Téléchargement en cours...',
+}

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

@@ -1,17 +1,86 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DownloadBtn > renders correctly 1`] = `
-"<button data-v-e1153e16="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap outlined-style vd-download-btn" style="height: auto; min-height: 36px;" data-testid="download-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-  <!----><span class="v-btn__content" data-no-activator=""><i data-v-e1153e16="" class="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary mr-3" aria-hidden="true"></i></span>
+<button
+  class="
+    bg-white
+    sy-download-btn
+    text-primary
+    text-wrap
+    v-btn
+    v-btn--density-default
+    v-btn--size-default
+    v-btn--variant-outlined
+    v-theme--light
+  "
+  style="height: auto; min-height: 36px;"
+  type="button"
+>
+  <span class="v-btn__overlay"></span>
+  <span class="v-btn__underlay"></span>
   <!---->
+  <span
+    class="v-btn__content"
+    data-no-activator=""
+  >
+    <i
+      aria-hidden="true"
+      class="
+        M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z
+        mdi
+        mr-3
+        notranslate
+        text-primary
+        v-icon
+        v-icon--size-default
+        v-theme--light
+      "
+    ></i>
+  </span>
   <!---->
-</button>"
+  <!---->
+</button>
 `;
 
 exports[`DownloadBtn > with slots 1`] = `
-"<button data-v-e1153e16="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap outlined-style vd-download-btn" style="height: auto; min-height: 36px;" data-testid="download-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-  <!----><span class="v-btn__content" data-no-activator=""><i data-v-e1153e16="" class="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary mr-3" aria-hidden="true"></i>Download</span>
+<button
+  class="
+    bg-white
+    sy-download-btn
+    text-primary
+    text-wrap
+    v-btn
+    v-btn--density-default
+    v-btn--size-default
+    v-btn--variant-outlined
+    v-theme--light
+  "
+  style="height: auto; min-height: 36px;"
+  type="button"
+>
+  <span class="v-btn__overlay"></span>
+  <span class="v-btn__underlay"></span>
+  <!---->
+  <span
+    class="v-btn__content"
+    data-no-activator=""
+  >
+    <i
+      aria-hidden="true"
+      class="
+        M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z
+        mdi
+        mr-3
+        notranslate
+        text-primary
+        v-icon
+        v-icon--size-default
+        v-theme--light
+      "
+    ></i>
+    Download
+  </span>
   <!---->
   <!---->
-</button>"
+</button>
 `;

package/src/components/ErrorPage/ErrorPage.vue

@@ -38,7 +38,7 @@
 				>
 					<div
 						v-if="code"
-						class="vd-code text-primary mb-4"
+						class="sy-code text-primary mb-4"
 					>
 						<span class="d-sr-only">{{ codeErrorText }}</span>
 						{{ code }}
@@ -85,7 +85,7 @@
 </template>
 
 <style lang="scss" scoped>
-.vd-code {
+.sy-code {
 	font-size: 6rem;
 	line-height: 6rem;
 	font-weight: 400;