@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

package/src/components/DownloadBtn/AccessibiliteItems.ts

@@ -0,0 +1,129 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.4 Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?',
+		items: [
+			{
+
+				precision: '1.4.1 Pour chaque image (balise <img>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les images structurées au moyen d’un élément <img> pourvues d’une alternative textuelle et utilisées comme CAPTCHA ou comme image-test',
+					info2: '2. Pour chaque image, vérifier que l’alternative textuelle est pertinente',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+
+				precision: ' 1.4.6 Pour chaque image vectorielle (balise <svg>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4.6',
+				solution: [{
+					info1: '1. Retrouver dans le document les éléments <svg> pourvus d’une alternative textuelle et utilisés comme CAPTCHA ou comme image-test;',
+					info2: '2. Pour chaque élément <svg>, vérifier que l’alternative textuelle est pertinente',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 10 : Présentation de l’information',
+		subtitle: '10.8 Pour chaque page Web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: '10.8.1 Dans chaque page web, chaque contenu caché vérifie-t-il une de ces conditions ? - le contenu caché a vocation à être ignoré par les technologies d’assistance ;Le contenu caché n’a pas vocation à être ignoré par les technologies d’assistance et est rendu restituable par les technologies d’assistance suite à une action de l’utilisateur réalisable au clavier ou par tout dispositif de pointage sur un élément précédent le contenu caché ou suite à un repositionnement du focus dessus.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.8.1',
+				solution: [{
+					info1: '1. Retrouver les contenus cachés (éléments pourvus de l’attribut hidden ou de l’attribut WAI-ARIA aria-hidden, ou bien d’une classe ou d’un ensemble de styles CSS susceptibles de masquer le contenu)',
+					info2: '2. Pour chaque contenu caché, vérifier que :Soit le contenu caché a vocation à être ignoré par les technologies d’assistance (un élément statistique de visites par exemple) ; Soit le contenu caché n’a pas vocation à être ignoré par les technologies d’assistance, et dans ce cas il est rendu restituable par les technologies d’assistance au moyen : Soit d’une action de l’utilisateur réalisable au clavier ou par tout dispositif de pointage sur un élément précédent le contenu caché ; Soit d’une fonction de programmation qui repositionne le focus sur le contenu.',
+					info3: '3. Si c’est le cas pour chaque contenu caché, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: 'Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ?'
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <svg> ;',
+					info2: '2. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+
+				precision: 'Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 7 : Scripts',
+		subtitle: '7.1 Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?',
+		items: [
+			{
+
+				precision: ' 7.1.1 Chaque script qui génère ou contrôle un composant d’interface vérifie-t-il, si nécessaire, une de ces conditions ? '
+					+ ' Le nom, le rôle, la valeur, le paramétrage et les changements d’états sont accessibles aux technologies d’assistance via une API d’accessibilité ;'
+					+ ' Un composant d’interface accessible permettant d’accéder aux mêmes fonctionnalités est présent dans la page ;'
+					+ ' Une alternative accessible permet d’accéder aux mêmes fonctionnalités.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#7.1.1',
+				solution: [{
+					info1: '1. Vérifier que : Le composant possède un rôle cohérent avec son usage (généralement un bouton ou un lien) ;'
+						+ ' Le composant possède un nom explicite ;'
+						+ ' Le nom du composant est cohérent avec l’état de la fonctionnalité ou des contenus contrôlés (par exemple pour une fonctionnalité permettant d’afficher ou de masquer une zone de contenu).',
+					info2: '2. Sinon, vérifier la présence d’un composant d’interface accessible permettant d’accéder aux mêmes fonctionnalités',
+					info3: '3. Si c’est le cas le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+]

package/src/components/DownloadBtn/DownloadBtn.mdx

@@ -4,7 +4,6 @@ import * as DownloadBtnStories from './DownloadBtn.stories';
 
 <Meta of={DownloadBtnStories} />
 
-
 # DownloadBtn
 
 L'élément `DownloadBtn` est utilisé pour permettre à l'utilisateur de télécharger un document provenant d'une API.
@@ -19,7 +18,7 @@ L'élément `DownloadBtn` est utilisé pour permettre à l'utilisateur de télé
 
 <Source dark code={`
 <script setup lang="ts">
-	import DownloadBtn from '@/components/DownloadBtn/DownloadBtn.vue'
+	import DownloadBtn from '@cnamts/synapse'
 	import axios from 'axios'
 
 	function download() {
@@ -52,11 +51,11 @@ Exemple :
 
 <Source dark code={`
 <script setup lang="ts">
-	import DownloadBtn from '@/components/DownloadBtn/DownloadBtn.vue'
-	import NotificationBar from '@/components/NotificationBar/NotificationBar.vue'
+	import DownloadBtn from '@cnamts/synapse'
+	import NotificationBar from '@cnamts/synapse'
 	import axios from 'axios'
-	import { useNotificationService } from '@/services/NotificationService'
-	import type { Notification } from '@/components/NotificationBar/types'
+	import { useNotificationService } from '@cnamts/synapse/src/services/NotificationService'
+	import type { Notification } from '@cnamts/synapse/src/components/NotificationBar/types'
 
 	function download() {
 		return axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124')

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

@@ -7,7 +7,7 @@ import NotificationBar from '../NotificationBar/NotificationBar.vue'
 import { useNotificationService } from '@/services/NotificationService'
 
 const meta = {
-	title: 'Components/DownloadBtn',
+	title: 'Composants/Boutons/DownloadBtn',
 	component: DownloadBtn,
 	parameters: {
 		layout: 'fullscreen',
@@ -92,6 +92,35 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<DownloadBtn
+		:file-promise="download"
+		@error="onError"
+		@success="onSuccess"
+	>
+		Télécharger
+	</DownloadBtn>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import DownloadBtn from '@cnamts/synapse'
+	import axios from 'axios'
+	
+	const download = () => {
+        return axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124')
+	}
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
 		default: 'Télécharger',
@@ -102,6 +131,35 @@ export const Default: Story = {
 
 export const Error: Story = {
 	name: 'Error',
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<DownloadBtn
+		:file-promise="download"
+		@error="onError"
+		@success="onSuccess"
+	>
+		Télécharger
+	</DownloadBtn>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import DownloadBtn from '@cnamts/synapse'
+	import axios from 'axios'
+	
+	const download = () => {
+        return axios.get('https://')
+	}
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		filePromise: () => axios.get('https://'),
 		default: 'Télécharger',
@@ -112,6 +170,35 @@ export const Error: Story = {
 
 export const Loading: Story = {
 	name: 'Loading',
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<DownloadBtn
+		:file-promise="download"
+		@error="onError"
+		@success="onSuccess"
+	>
+		Télécharger
+	</DownloadBtn>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import DownloadBtn from '@cnamts/synapse'
+	import axios from 'axios'
+	
+	const download = () => {
+        return new Promise(() => { setTimeout(() => {}, 100000) })
+	}
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		filePromise: () => new Promise(() => { setTimeout(() => {}, 100000) }),
 		default: 'Télécharger',
@@ -127,6 +214,37 @@ export const Loading: Story = {
 
 export const Dark: Story = {
 	name: 'Dark theme',
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<VThemeProvider theme="dark" with-background class="pa-4">
+		<DownloadBtn
+			:file-promise="download"
+			@error="onError"
+			@success="onSuccess"
+		>
+			Télécharger
+		</DownloadBtn>
+	</VThemeProvider>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import DownloadBtn from '@cnamts/synapse'
+	import axios from 'axios'
+	
+	const download = () => {
+        return new Promise(() => { setTimeout(() => {}, 100000) })
+	}
+</script>
+				`,
+			},
+		],
+	},
 	render: args => ({
 		components: { VThemeProvider, DownloadBtn },
 		setup() {
@@ -138,7 +256,6 @@ export const Dark: Story = {
 			</VThemeProvider>
 		`,
 	}),
-
 	args: {
 		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
 		default: 'Télécharger',
@@ -148,6 +265,52 @@ export const Dark: Story = {
 }
 
 export const Notify: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div>
+		<NotificationBar />
+		<DownloadBtn
+			:file-promise="download"
+			@error="onError"
+			@success="onSuccess"
+		>
+			Télécharger
+		</DownloadBtn>
+	</div>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import DownloadBtn from '@cnamts/synapse'
+	import NotificationBar from '@cnamts/synapse'
+	
+	import axios from 'axios'
+	
+	const download = () => {
+        return new Promise(() => { setTimeout(() => {}, 100000) })
+	}
+    
+    const { addNotification } = useNotificationService()
+    
+    const notify = (message: string, type: 'error' | 'success') => {
+		const notification = {
+			id: Date.now().toString(),
+			message,
+			type,
+			timeout: -1,
+		}
+		addNotification(notification)
+	}
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
 		default: 'Télécharger',
@@ -191,6 +354,48 @@ export const Notify: Story = {
 
 export const Customization: Story = {
 	name: 'Customisation',
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<DownloadBtn
+		:file-promise="download"
+		:vuetify-options="vuetifyOptions"
+		@error="onError"
+		@success="onSuccess"
+	>
+		Télécharger
+	</DownloadBtn>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import DownloadBtn from '@cnamts/synapse'
+	import axios from 'axios'
+	
+	const download = () => {
+        return axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124')
+	}
+    
+    const vuetifyOptions = {
+		btn: {
+			variant: 'plain',
+			ripple: true,
+			color: 'secondary',
+		},
+		icon: {
+			class: 'ml-2 mr-2',
+			color: 'secondary',
+		},
+	}
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		filePromise: () => axios.get('https://run.mocky.io/v3/63e571d5-1134-4f51-82ac-fa7cc8045124'),
 		default: 'Télécharger',

package/src/components/DownloadBtn/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/FooterBar/FooterBar.mdx

@@ -17,8 +17,8 @@ Le composant `FooterBar` est utilisé pour afficher une barre de pied de page av
 
 <Source dark code={`
     <script setup lang="ts">
-	import FooterBar from '@/components/FooterBar/FooterBar.vue'
-	import CollapsibleList from '@/components/CollapsibleList/CollapsibleList.vue'
+	import FooterBar from '@cnamts/synapse'
+	import CollapsibleList from '@cnamts/synapse'
 	import { computed } from 'vue'
 	import { useDisplay } from 'vuetify'
 

package/src/components/FooterBar/FooterBar.stories.ts

@@ -60,7 +60,7 @@ const healthItems = [
 const currentYear = new Date().getFullYear()
 
 const meta = {
-	title: 'Components/FooterBar',
+	title: 'Composants/Structure/FooterBar',
 	component: FooterBar,
 	parameters: {
 		layout: 'fullscreen',

package/src/components/FranceConnectBtn/FranceConnectBtn.mdx

@@ -18,7 +18,7 @@ Le composant `FranceConnectBtn` est utilisé pour afficher un bouton permettant
 
 <Source dark code={`
 <script setup lang="ts">
-	import FranceConnectBtn from '@/components/FranceConnectBtn/FranceConnectBtn.vue'
+	import FranceConnectBtn from '@cnamts/synapse'
 </script>
 
 <template>

package/src/components/FranceConnectBtn/FranceConnectBtn.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import FranceConnectBtn from './FranceConnectBtn.vue'
 
 const meta = {
-	title: 'Components/FranceConnectBtn',
+	title: 'Composants/Boutons/FranceConnectBtn',
 	component: FranceConnectBtn,
 	parameters: {
 		layout: 'fullscreen',
@@ -14,6 +14,24 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<FranceConnectBtn />
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import FranceConnectBtn from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		href: 'https://app.franceconnect.gouv.fr/',
 		isConnectPlus: false,
@@ -39,6 +57,24 @@ export const Default: Story = {
 }
 
 export const FranceConnectPlus: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<FranceConnectBtn is-connect-plus />
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import FranceConnectBtn from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		href: 'https://app.franceconnect.gouv.fr/',
 		isConnectPlus: true,
@@ -64,6 +100,27 @@ export const FranceConnectPlus: Story = {
 }
 
 export const DarkTheme: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<FranceConnectBtn 
+		is-connect-plus 
+		dark
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import FranceConnectBtn from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		href: 'https://app.franceconnect.gouv.fr/',
 		isConnectPlus: true,