@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

package/src/stories/Accessibilite/KitDePreAudit/Preaudit.mdx

@@ -4,7 +4,7 @@ import {Meta} from '@storybook/addon-docs/blocks';
 
 # Pré-audit
 
-L’objectif du pré-audit est d'atteindre en semi-autonomie un premier palier de conformité de votre service web avant de convenir d’un réel audit RGAA. Pour prouver ce palier et être éligible à la demande d'audit complet vous devez compléter <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">ce fichier</a> qui mentionne les exigences requises par la vérification assistée des outils automatisés et la vérification manuelle. Dans le cas où vous rencontrez une difficulté avec un test, un critère ou un outil n'hésitez pas à nous contacter via l'adresse [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr) (cette adresse évoluera prochainement).
+L’objectif du pré-audit est d'atteindre en semi-autonomie un premier palier de conformité de votre service web avant de convenir d’un réel audit <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. Pour prouver ce palier et être éligible à la demande d'audit complet vous devez compléter <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">ce fichier</a> qui mentionne les exigences requises par la vérification assistée des outils automatisés et la vérification manuelle. Dans le cas où vous rencontrez une difficulté avec un test, un critère ou un outil n'hésitez pas à nous contacter via l'adresse [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr) (cette adresse évoluera prochainement).
 
 Pour demander un audit merci de contacter [valentin.becquet@assurance-maladie.fr](mailto:valentin.becquet@assurance-maladie.fr). L'acceptance de la demande est soumise à la démonstration de l'effort engagé par l'équipe-produit. Cette appréciation fera l'objet d'une discussion.
 
@@ -14,7 +14,7 @@ Pour rappel, avant de lancer votre pré-audit vous devez définir l'échantillon
 
 Lancer Tanaguru sur chaque page de l’échantillon de test. Vous pouvez retrouver une documentation d’utilisation de Tanaguru [ici](/docs/accessibilit%C3%A9-kit-de-pr%C3%A9-audit-outils-tanaguru--docs).
 
-L'outil Tanaguru a la capacité de contrôler 158 tests sur les 258 du RGAA. Les exigences du pré-audit sont respectées dès lors que vous atteignez un minimum d’erreur en lançant les tests automatisés avec Tanaguru. Ce seuil est volontairement sujet à discussion pour ne pas bloquer les produits en cas de grande complexité. Dans le cas où un test est présenté en résultat "non conforme" pour la demande d'audit, une justification devra être apportée pour motiver l'éligibilité du produit. Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités relevées par Tanaguru.
+L'outil Tanaguru a la capacité de contrôler 158 tests sur les 258 du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr>. Les exigences du pré-audit sont respectées dès lors que vous atteignez un minimum d’erreur en lançant les tests automatisés avec Tanaguru. Ce seuil est volontairement sujet à discussion pour ne pas bloquer les produits en cas de grande complexité. Dans le cas où un test est présenté en résultat "non conforme" pour la demande d'audit, une justification devra être apportée pour motiver l'éligibilité du produit. Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités relevées par Tanaguru.
 
 ## Vérification manuelle
 

package/src/stories/Demarrer/Accueil.mdx

@@ -4,7 +4,7 @@ import { css } from '@emotion/css';
 
 <Meta of={AccueilStories} />
 
-<div class={css`position: relative; padding: 4rem; margin: -4rem -4rem 1rem !important;`}>
+<div className={css`position: relative; padding: 4rem; margin: -4rem -4rem 1rem !important;`}>
     <Story of={AccueilStories.Header} />
 </div>
 

package/src/stories/Demarrer/Introduction.stories.ts

@@ -104,7 +104,7 @@ export const Panels: StoryObj = {
 			template: `
               <div>
                <v-expansion-panels>
-                    <v-expansion-panel>     
+                    <v-expansion-panel>
                       <v-expansion-panel-title style="display: inline-grid;">
                       <p style="font-weight:bold;"><VIcon :icon="arrowIcon"/>Le design system CNAM</p> 
                       <p>Un référentiel centralisé de nos styles et composants pour garantir une expérience utilisateur cohérente et harmonieuse sur toutes nos plateformes.</p>
@@ -120,12 +120,12 @@ export const Panels: StoryObj = {
 						<p style="margin-bottom:10px;">Lorsqu'une nouvelle fonctionnalité ou un nouveau produit est ajouté, l'équipe produit peut facilement l'intégrer au système existant, en utilisant les composants et règles déjà en place. Cela garantit une croissance rapide sans sacrifier la qualité ou la cohérence.</p>
 						<p style="margin-bottom:5px;font-weight:bold;">→ Profiter de standards de qualité et d’accessibilité.</p>
 						<p style="margin-bottom:10px;">Standards de qualité : Avec ses composants validés et testés, le design system vous assure que la qualité soit maintenue à travers toutes les interfaces, qu'il s'agisse d'éléments visuels, d'interactions ou de fonctionnalités.</p>
-						<p style="margin-bottom:20px;">Standards d’accessibilité : </p>
+						<p style="margin-bottom:20px;">Standards d’accessibilité : Grâce à des audits et à des bonnes pratiques intégrées, le design system garantit que chaque composant respecte les critères d'accessibilité, offrant ainsi une expérience inclusive pour tous les utilisateurs, y compris ceux en situation de handicap.</p>
         				 </v-expansion-panel-text>
                     </v-expansion-panel>
 			   </v-expansion-panels>
 				<v-expansion-panels style="margin-top:20px;">
-                    <v-expansion-panel>     
+                    <v-expansion-panel>
                       <v-expansion-panel-title>
                       <p style="font-weight:bold;"><VIcon :icon="arrowIcon"/>Pour aller plus loin sur le fonctionnement et l’utilisation du design system</p>
                       </v-expansion-panel-title>

package/src/stories/Demarrer/Releases.mdx

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import * as ReleasesStories from './Releases.stories.ts';
+
+<Meta of={ReleasesStories}/>
+
+# Releases
+
+<Story of={ReleasesStories.List}/>

package/src/stories/Demarrer/Releases.stories.ts

@@ -0,0 +1,66 @@
+import axios from 'axios'
+import { onMounted, ref } from 'vue'
+import * as marked from 'marked'
+import SyAlert from '../../components/SyAlert/SyAlert.vue'
+
+export default {
+	title: 'Démarrer/Releases',
+	component: SyAlert,
+}
+export const List = {
+	render: () => {
+		return {
+			components: { SyAlert },
+			setup() {
+				const releases = ref([])
+				const errorMessage = ref('')
+
+				const fetchReleases = async () => {
+					try {
+						const { data } = await axios.get('https://api.github.com/repos/assurance-maladie-digital/design-system-v3/releases')
+						releases.value = data
+					}
+					// eslint-disable-next-line @typescript-eslint/no-unused-vars
+					catch (error) {
+						errorMessage.value = 'Une erreur est survenue lors de la récupération des releases.'
+					}
+				}
+
+				const formatDate = (date: string | number | Date) => {
+					return new Date(date).toLocaleDateString()
+				}
+
+				const formatMarkdown = (markdown: string) => {
+					return marked.parse(markdown)
+				}
+
+				onMounted(() => {
+					fetchReleases().then(r => r)
+				})
+
+				return {
+					releases,
+					errorMessage,
+					formatDate,
+					formatMarkdown,
+				}
+			},
+			template: `
+				<div class="releases">
+					<SyAlert type="info" variant="tonal" :closable="false">
+						<template #default>Nous faisons des nouvelles release (correction de bugs ou nouvelles fonctionnalités) régulièrement. Vous pouvez retrouver la liste des dernières releases ci-dessous.</template>
+					</SyAlert>
+					<div v-if="errorMessage" class="error">{{ errorMessage }}</div>
+					<div v-else>
+						<div v-for="release in releases" :key="release.id">
+							<h2>{{ release.name }} ({{ formatDate(release.published_at) }})</h2>
+							<div v-html="formatMarkdown(release.body)"></div>
+							<hr>
+						</div>
+					</div>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/DesignTokens/Conteneurs.stories.ts

@@ -34,7 +34,7 @@ export const Desktop: StoryObj = {
 						  max width = 1600 px
 					  </VCol>
 				  </VRow>
-				  <img src="/.storybook/public/conteneur-desktop.svg" alt="Tablet" class="w-100 mt-4" />
+				  <img src="/conteneur-desktop.svg" alt="Tablet" class="w-100 mt-4" />
               </div>
             `,
 		}
@@ -62,7 +62,7 @@ export const Tablet: StoryObj = {
 						  Gutter : 24px
 					  </VCol>
 					  <VCol md="6" sm="12">
-						  <img src="/.storybook/public/conteneur-tablet.svg" alt="Tablet" class="w-100" />
+						  <img src="/conteneur-tablet.svg" alt="Tablet" class="w-100" />
 					  </VCol>
 				  </VRow>
               </div>
@@ -92,7 +92,7 @@ export const Mobile: StoryObj = {
 						  Gutter : 24px
 					  </VCol>
 					  <VCol md="6" sm="12">
-						  <img src="/.storybook/public/conteneur-mobile.svg" alt="Mobile" class="w-50" />
+						  <img src="/conteneur-mobile.svg" alt="Mobile" class="w-50" />
 					  </VCol>
 				  </VRow>
               </div>

package/src/stories/DesignTokens/ThemePA.mdx

@@ -4,44 +4,18 @@ import {Meta, Source} from '@storybook/addon-docs/blocks';
 
 # Thème Portail Agent
 
-Pour des raisons techniques, la documentation ne permet pas encore l'affichage des composants aux couleurs du Portail Agent.<br/>
-Cependant, il est possible de changer le thème du Design System pour qu'il corresponde aux couleurs du PA.
-#
-
 ## Étapes pour changer le thème du Design System aux couleurs Portail Agent
 
 ### 1. Modification du fichier nuxt.config.ts
 
 1.	Ouvrez le fichier nuxt.config.ts dans votre éditeur de code.
-2.	Remplacer les valeurs des thèmes `cnamLightTheme` et `cnamDarkTheme` par les valeurs de la charte PA : `paLightTheme` et `paDarkTheme`.
-
-<Source dark code={`
-import {paLightTheme} from '@cnamts/synapse/designTokens/tokens/pa/paLightTheme'
-import {paDarkTheme} from '@cnamts/synapse/designTokens/tokens/pa/paDarkTheme'
-`}
-/>
-
-3.	Localisez la configuration de base de Vuetify (ligne 31 dans le fichier `nuxt.config.ts`).
-4.	Mettez à jour le thème en configurant les couleurs selon la charte PA si nécessaire :
+2.	Remplacer la valeur du thème par défaut`defaultTheme` par le thème PA : `pa`.
 
 <Source dark code={`
 theme: {
-    defaultTheme: 'light',
-    themes: {
-        light: {
-            colors: {
-                ...paLightTheme,
-                // ...customLightTheme
-            },
-        },
-        dark: {
-            colors: {
-                ...paDarkTheme,
-                //...customDarkTheme,
-            },
-        },
-    },
-},
+	defaultTheme: 'pa',
+	...
+}
 `}
 />
 

package/src/stories/GuideDuDev/LesBreackingChanges.mdx

@@ -0,0 +1,36 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Guide Du Dev/Breaking changes"/>
+
+# Les breaking changes
+
+## Stores
+
+Les librairies `vue-dot` et `synapse-bridge` utilisaient en interne la librairie `vuex`. Cette dépendance a été supprimée dans `synapse`. Plus aucune librairie de gestion d'état n'est donc imposée par le design system.
+
+## Form builder
+
+Le form builder n'est plus maintenu par le design system dans sa version synapse. Vous pouvez trouvez le code source dans sa version vue2 [ici](https://github.com/assurance-maladie-digital/design-system/tree/v2/packages/form-builder) et sa version vue3 [ici](https://github.com/assurance-maladie-digital/design-system/tree/v2/packages/form-builder).
+
+## Les composants
+
+### CustomIcon
+
+Le composant `CustomIcon` a été retiré du design system.
+
+Vous devez désormais utiliser le composant [VIcon](https://vuetifyjs.com/en/components/icons/) de Vuetify avec les icônes material du package[ @mdi/js](https://www.npmjs.com/package/@mdi/js). Pour des icônes personnalisés, importez les sous forme de composant.
+
+<Source dark code={`
+<script setup>
+	import { VIcon } from 'vuetify/components'
+	import { mdiAccount } from '@mdi/js'
+</script>
+
+<template>
+	<VIcon> {{ mdiAccount }} </VIcon>
+</template>
+`} />
+
+### FilterModule
+
+Le composant `FilterModule` n'était pas optimisé du point de vue expérience utilisateur, le nombre de clics pour accéder à un filtre était trop important. Il a été remplacé par le composant [FilterInline](/docs/composants-filtres-filterssidebar--docs) et [FilterSideBar](/docs/composants-filtres-filterinline--docs).