@cnamts/synapse 0.0.5-alpha → 0.0.6-alpha

package/src/components/Customs/SyBtnSelect/SyBtnSelect.mdx

@@ -5,7 +5,8 @@ import * as SyBtnSelectStories from "./SyBtnSelect.stories";
 
 # SyBtnSelect
 
-Le composant `SyBtnSelect` est utilisé pour proposer une sélection d'options avec un bouton personnalisé, conforme au style du design-system et qui respecte les règles d'accessibilité RGAA.
+Le composant `SyBtnSelect` est utilisé pour proposer une sélection d'options avec un bouton personnalisé, conforme au style du Design System et qui respecte les règles d'accessibilité RGAA.<br/>
+Il est basé sur un `v-btn`.
 
 <Canvas of={SyBtnSelectStories.Default}/>
 
@@ -19,7 +20,7 @@ Le composant `SyBtnSelect` est utilisé pour proposer une sélection d'options a
     dark code={`
 <script setup lang="ts">
   import { ref } from 'vue'
-  import SyBtnSelect from '@cnamts/synapse'
+  import { SyBtnSelect } from '@cnamts/synapse'
 
   const model = ref(null)
   const menuItems = ['Option 1', 'Option 2', 'Option 3']

package/src/components/Customs/SyBtnSelect/SyBtnSelect.stories.ts

@@ -50,6 +50,62 @@ export const Default: Story = {
 <script setup lang="ts">
 import SyBtnSelect from './SyBtnSelect.vue'
 
+const primaryInfo = 'Mes options'
+const items = [
+		{ text: 'Administration', value: 'Administration', link: '/admin' },
+		{ text: 'Profil', value: 'Profil', link: '/profile' },
+		{ text: 'Paramètres', value: 'Paramètres', link: '/settings' },
+		{ text: 'Profil', value: 'Profil', link: '/profile' },
+	]
+</script>
+				`,
+			},
+		],
+	},
+	args: {
+		primaryInfo: 'Mes options',
+		menuItems: [
+			{ text: 'Administration', value: 'Administration', link: '/admin' },
+			{ text: 'Profil', value: 'Profil', link: '/profile' },
+			{ text: 'Paramètres', value: 'Paramètres', link: '/settings' },
+			{ text: 'Profil', value: 'Profil', link: '/profile' },
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SyBtnSelect },
+			setup() {
+				return { args }
+			},
+			template: `
+              <div class="d-flex flex-wrap align-center pa-4">
+                <SyBtnSelect v-bind="args"/>
+              </div>
+            `,
+		}
+	},
+}
+
+export const withLink: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <SyBtnSelect 
+  	:primary-info="primaryInfo" 
+  	:menu-items="items" 
+  />
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import SyBtnSelect from './SyBtnSelect.vue'
+
 const primaryInfo = 'Mes options'
 const items = ['Option 1', 'Option 2']
 </script>
@@ -69,7 +125,7 @@ const items = ['Option 1', 'Option 2']
 			},
 			template: `
               <div class="d-flex flex-wrap align-center pa-4">
-                <SyBtnSelect v-bind="args" />
+                <SyBtnSelect v-bind="args"/>
               </div>
             `,
 		}
@@ -117,7 +173,7 @@ const items = ['Option 1', 'Option 2']
 			},
 			template: `
               <div class="d-flex flex-wrap align-center pa-4">
-                <SyBtnSelect v-bind="args" />
+                <SyBtnSelect v-bind="args"/>
               </div>
             `,
 		}
@@ -526,11 +582,11 @@ const items = ['Option 1', 'Option 2']
               <div class="d-flex flex-wrap align-center pa-4">
                 <SyBtnSelect v-bind="args">
                   <template #prepend-icon>
-                    <VIcon 
-						:icon="mdiAccount" 
-						class="mr-2" 
-						color="red"
-					/>
+                    <VIcon
+                        :icon="mdiAccount"
+                        class="mr-2"
+                        color="red"
+                    />
                   </template>
                 </SyBtnSelect>
               </div>

package/src/components/Customs/SyBtnSelect/SyBtnSelect.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
-	import { ref, watch, computed, onMounted, useSlots } from 'vue'
+	import { ref, watch, computed, onMounted, useSlots, type PropType } from 'vue'
 	import { useDisplay } from 'vuetify'
 
+	type Item = string | Record<string, unknown>
+
 	const props = defineProps({
 		modelValue: {
 			type: [Object, String, null],
 			default: null,
 		},
 		menuItems: {
-			type: Array,
+			type: Array as PropType<Item[]>,
 			default: () => [],
 		},
 		label: {
@@ -80,16 +82,12 @@
 		}
 	})
 
-	const selectItem = (item: unknown) => {
-		selectedItem.value = item as string | Record<string, unknown> | null
+	const selectItem = (item: Item | null) => {
+		selectedItem.value = item
 		emit('update:modelValue', item)
 		isOpen.value = false
 	}
 
-	const getItemText = (item: unknown) => {
-		return (item as Record<string, unknown>)[props.textKey]
-	}
-
 	const formattedItems = computed(() => {
 		return props.menuItems.map((item) => {
 			if (typeof item === 'string') {
@@ -145,9 +143,9 @@
 					:id="generatedId"
 					:class="btnPadding"
 					:height="iconOnly ? 'auto' : undefined"
-					:width="iconOnly ? 'auto' : undefined"
 					:icon="iconOnly"
 					:size="iconOnly ? 'x-large' : 'default'"
+					:width="iconOnly ? 'auto' : undefined"
 					class="vd-user-menu-btn"
 					v-bind="{
 						...menuProps,
@@ -168,19 +166,23 @@
 							<span
 								:class="`text-${props?.options['btn']?.textColor}`"
 								class="font-weight-bold"
-							>{{ props.primaryInfo }}
+							>
+								{{ props.primaryInfo }}
 							</span>
 							<span
 								:class="`text-${props?.options['btn']?.textColor}`"
 								class="text-grey text-darken-2 font-weight-medium"
-							>{{ props.secondaryInfo }}
+							>
+								{{ props.secondaryInfo }}
 							</span>
 						</span>
 						<span
 							v-if="isMobileVersion && !iconOnly"
 							:class="`text-${props?.options['btn']?.textColor}`"
 							class="font-weight-bold text-caption"
-						>{{ props.primaryInfo }}</span>
+						>
+							{{ props.primaryInfo }}
+						</span>
 						<slot name="append-icon" />
 					</div>
 				</VBtn>
@@ -195,10 +197,11 @@
 						:key="index"
 						:class="`text-${props?.options['list']?.textColor}`"
 						v-bind="props.options['list']"
+						:href="item.link"
 						@click="selectItem(item)"
 					>
 						<VListItemTitle v-bind="props.options['list']">
-							{{ getItemText(item) }}
+							{{ item[props.textKey] }}
 						</VListItemTitle>
 					</VListItem>
 					<slot />
@@ -211,6 +214,7 @@
 
 <style lang="scss" scoped>
 @use '@/assets/tokens.scss';
+@use '@/assets/tokens' as *;
 
 .vd-user-menu-btn-ctn {
   position: relative;
@@ -219,6 +223,10 @@
   .v-btn.v-btn--density-default {
     height: auto !important;
   }
+
+  .v-btn {
+    text-transform: none !important;
+  }
 }
 
 .vd-user-menu-btn {

package/src/components/Customs/SyBtnSelect/constants/ExpertiseLevelEnum.ts

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

package/src/components/Customs/SyInputSelect/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />

package/src/components/Customs/SyInputSelect/Accessibilite.stories.ts

@@ -0,0 +1,166 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Formulaires/SyInputSelect/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+										<v-expansion-panel>
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel
+								v-for="(item, index) in AccessibiliteItemsValidated"
+								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+										<v-expansion-panel>
+											<v-expansion-panel-title style="font-weight: bold;font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/Customs/SyInputSelect/AccessibiliteItems.ts

@@ -0,0 +1,96 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 10 : Présentation de l’information',
+		subtitle: '10.1 Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ? ?',
+		items: [
+
+			{
+				precision: '10.1.1 Dans chaque page web, les balises servant à la présentation de l’information ne doivent pas être présentes dans le code source généré des pages. Cette règle est-elle respectée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1.1',
+				solution: [{
+					info1: '1. Vérifier l’absence des éléments de présentation <basefont>, <big>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> ; ',
+					info2: '2. Vérifier l’absence de l’élément <u> uniquement si le DOCTYPE du document ne correspond pas à HTML 5 ; ',
+					info3: '3. Si c’est le cas, 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: '1.2.4 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: '3.2.1 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 8 : Eléments Obligatoires',
+		subtitle: '8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation',
+		items: [
+
+			{
+				precision: ' 8.9.1 Dans chaque page web les balises (à l’exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments sémantiques utilisés à des fins de présentation ;',
+					info2: '2. Pour chacun de ces éléments, vérifier que :'
+						+ 'L’élément est pourvu d’un attribut role=“presentation” ;'
+						+ 'L’utilisation de cet élément à des fins de présentation reste justifée',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+]

package/src/components/Customs/SyInputSelect/SyInputSelect.mdx

@@ -5,7 +5,8 @@ import * as SyInputSelectStories from "./SyInputSelect.stories";
 
 # SyInputSelect
 
-Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.
+Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.<br/>
+Il est basé sur un `v-input`.
 
 <Canvas of={SyInputSelectStories.Default} />
 
@@ -19,7 +20,7 @@ Le composant `SyInputSelect` est utilisé pour proposer une alternative au `v-se
 
 <Source dark code={`
 <script setup lang="ts">
-	import SyInputSelect from '@cnamts/synapse'
+	import { SyInputSelect } from '@cnamts/synapse'
 
 	const items = [
         { text: 'Option 1', value: '1' },

package/src/components/Customs/SyInputSelect/SyInputSelect.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import SyInputSelect from './SyInputSelect.vue'
 import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
 import { ref } from 'vue'
-import Alert from '../../Alert/Alert.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 
 const meta = {
 	title: 'Composants/Formulaires/SyInputSelect',
@@ -16,6 +16,7 @@ const meta = {
 		items: { control: 'object' },
 		errorMessages: { control: 'object' },
 		required: { control: 'boolean' },
+		outlined: { control: 'boolean' },
 		textKey: { control: 'text' },
 		valueKey: { control: 'text' },
 		vuetifyOptions: { control: 'object' },
@@ -87,60 +88,6 @@ export const Default: Story = {
 	},
 }
 
-export const Outlined: Story = {
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-				<template>
-					<SyInputSelect
-						v-model="value"
-						:items="items"
-						outlined
-					/>
-				</template>
-				`,
-			},
-			{
-				name: 'Script',
-				code: `
-				<script setup lang="ts">
-					import SyInputSelect from '@cnamts/SyInputSelect'
-					
-					const items =  [
-						{ text: 'Option 1', value: '1' },
-						{ text: 'Option 2', value: '2' },
-					],
-				</script>
-				`,
-			},
-		],
-	},
-	args: {
-		items: [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { SyInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<SyInputSelect
-						v-bind="args"
-						outlined
-					/>
-				</div>
-			`,
-		}
-	},
-}
-
 export const Required: Story = {
 	parameters: {
 		sourceCode: [
@@ -399,12 +346,12 @@ export const withCustomStyles: Story = {
 export const Info: Story = {
 	render: (args) => {
 		return {
-			components: { Alert },
+			components: { SyAlert },
 			setup() {
 				return { args }
 			},
 			template: `
-				<Alert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false">
+				<SyAlert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false">
 					<template #default>
 						<b>Format des items :</b>
 						<ul>
@@ -412,7 +359,7 @@ export const Info: Story = {
 							<li>- Si les items sont un tableau de string, le composant les utilisera directement.</li>
 						</ul>
 					</template>
-				</Alert>
+				</SyAlert>
 			`,
 		}
 	},