@cnamts/synapse 0.0.5-alpha → 0.0.6-alpha

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

@@ -59,7 +59,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -87,6 +87,117 @@ export const Default: Story = {
 	},
 }
 
+export const Required: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField 
+						v-model="value" 
+						required
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { SyTextField } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		showDivider: false,
+		variantStyle: 'outlined',
+		color: 'primary',
+		isClearable: true,
+		label: 'Label',
+		required: true,
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField v-bind="args" />
+				</div>
+			`,
+		}
+	},
+}
+
+export const WithCustomError: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField 
+						v-model="value" 
+						:error-messages="errorMessages"
+					/>
+					<VBtn @click="triggerError">
+						Trigger Error
+					</VBtn>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { SyTextField } from '@cnamts/synapse'
+					
+					const errorMessages = ref([])
+					
+					const triggerError = () => {
+						errorMessages.value = ['This is a test error message']
+					}
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		showDivider: false,
+		variantStyle: 'outlined',
+		color: 'primary',
+		isClearable: true,
+		label: 'Label',
+		required: false,
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				const errorMessages = ref([])
+				const triggerError = () => {
+					// @ts-expect-error test error message
+					errorMessages.value = ['This is a test error message']
+				}
+				return { args, errorMessages, triggerError }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<SyTextField v-bind="args" :error-messages="errorMessages" />
+				</div>
+				<VBtn class="ml-8" @click="triggerError">
+					Trigger Error
+				</VBtn>
+			`,
+		}
+	},
+}
+
 export const SlotPrepend: Story = {
 	parameters: {
 		sourceCode: [
@@ -105,7 +216,7 @@ export const SlotPrepend: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -156,7 +267,7 @@ export const SlotAppend: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -206,7 +317,7 @@ export const SlotPrependInner: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -257,7 +368,7 @@ export const SlotPrependInnerDivider: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -308,7 +419,7 @@ export const SlotAppendInner: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -361,7 +472,7 @@ export const SlotCustomIcon: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SyTextField from '@cnamts/synapse'
+					import { SyTextField } from '@cnamts/synapse'
 					import { mdiAccountBox } from '@mdi/js'
 					
 					const iconName = mdiAccountBox

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 	import { computed, ref } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from './types'
 	import {
@@ -22,6 +22,8 @@
 			isClearable?: boolean
 			showDivider?: boolean
 			label?: string
+			required?: boolean
+			errorMessages?: string[]
 		}>(),
 		{
 			variantStyle: 'outlined', // Remplacez par la valeur par défaut souhaitée
@@ -37,6 +39,15 @@
 	}
 
 	const model = ref('')
+	const isBlurred = ref(false)
+
+	const hasError = computed(() => {
+		return (props.required && isBlurred.value && !model.value) || (props.errorMessages && props.errorMessages.length > 0)
+	})
+
+	const checkErrorOnBlur = () => {
+		isBlurred.value = true
+	}
 
 	const appendInnerIconColor = computed(() => {
 		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success'
@@ -59,12 +70,15 @@
 <template>
 	<VTextField
 		v-model="model"
-		:variant="props.variantStyle"
-		:color="props.color"
-		:clearable="props.isClearable"
-		:clear-icon="ICONS.close"
 		:aria-label="props.label"
+		:clear-icon="ICONS.close"
+		:clearable="props.isClearable"
+		:color="props.color"
+		:error-messages="props.errorMessages"
 		:label="props.label"
+		:rules="props.required ? ['Le champ est requis.'] : []"
+		:variant="props.variantStyle"
+		@blur="checkErrorOnBlur"
 	>
 		<template #prepend>
 			<slot name="prepend">
@@ -91,20 +105,26 @@
 			</slot>
 			<VDivider
 				v-if="props.showDivider"
-				v-bind="dividerProps"
 				class="mt-4 pa-1"
+				v-bind="dividerProps"
 				vertical
 			/>
 		</template>
 		<template #append-inner>
 			<slot name="append-inner">
+				<VIcon v-if="hasError">
+					{{ mdiInformation }}
+				</VIcon>
 				<VIcon
 					v-if="props.appendInnerIcon"
-					:icon="ICONS[props.appendInnerIcon]"
 					:class="{ 'error-icon': props.appendInnerIcon === 'error' }"
 					:color="appendInnerIconColor"
+					:icon="ICONS[props.appendInnerIcon]"
 				/>
 			</slot>
 		</template>
+		<template #details>
+			<slot name="details" />
+		</template>
 	</VTextField>
 </template>

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

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

package/src/components/Customs/SyTextField/tests/__snapshots__/SyTextField.spec.ts.snap

@@ -35,7 +35,8 @@ exports[`SyTextField > matches snapshot 1`] = `
       <transition-stub name="expand-x-transition" appear="false" persisted="false" css="true">
         <div class="v-field__clearable" style="display: none;"><i 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 v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Clear "></i></div>
       </transition-stub>
-      <div class="v-field__append-inner"><i class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error error-icon" aria-hidden="true"></i>
+      <div class="v-field__append-inner">
+        <!--v-if--><i class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error error-icon" aria-hidden="true"></i>
         <!---->
       </div>
       <div class="v-field__outline">

package/src/components/DataList/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/DataList/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/Données/DataList/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/DataList/AccessibiliteItems.ts

@@ -0,0 +1,47 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.1 Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+		items: [
+			{
+				precision: '3.1.2 Pour chaque indication de couleur donnée par un texte, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.1.2',
+				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.DEV,
+
+			},
+
+		],
+	},
+
+]
+
+export const AccessibiliteItemsValidated = [
+
+	{
+		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,
+
+			},
+
+		],
+	},
+
+]

package/src/components/DataList/DataList.mdx

@@ -17,7 +17,7 @@ L’élément `DataList` est utilisé pour afficher une liste d’informations.
 
 <Source dark code={`
 <script setup lang="ts">
-	import DataList from '@cnamts/synapse'
+	import { DataList } from '@cnamts/synapse'
 
 	const items = [
 		{

package/src/components/DataList/DataList.stories.ts

@@ -42,7 +42,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import DataList from '@cnamts/synapse'
+					import { DataList } from '@cnamts/synapse'
 										
 					const items = [
 						{
@@ -145,7 +145,7 @@ export const Row: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import DataList from '@cnamts/synapse'
+					import { DataList } from '@cnamts/synapse'
 										
 					const items = [
 						{
@@ -236,7 +236,7 @@ export const Title: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import DataList from '@cnamts/synapse'
+					import { DataList } from '@cnamts/synapse'
 										
 					const items = [
 						{
@@ -327,7 +327,7 @@ export const Icons: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import DataList from '@cnamts/synapse'
+					import { DataList } from '@cnamts/synapse'
 					import { mdiCalendar, mdiAccount, mdiInformationOutline } from '@mdi/js'
 					
 					const icons = {
@@ -420,7 +420,7 @@ export const ActionBtn: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import DataList from '@cnamts/synapse'
+					import { DataList } from '@cnamts/synapse'
 							
 					const items = [
 						{
@@ -501,7 +501,7 @@ export const Chips: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import DataList from '@cnamts/synapse'
+					import { DataList } from '@cnamts/synapse'
 										
 					const items = [
 						{
@@ -602,7 +602,7 @@ export const HtmlValue: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import DataList from '@cnamts/synapse'
+					import { DataList } from '@cnamts/synapse'
 										
 					const items = [
 						{
@@ -681,7 +681,7 @@ export const Loading: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import DataList from '@cnamts/synapse'
+					import { DataList } from '@cnamts/synapse'
 										
 					const items = [
 						{
@@ -770,7 +770,7 @@ export const SlotTitle: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import DataList from '@cnamts/synapse'
+					import { DataList } from '@cnamts/synapse'
 										
 					const items = [
 						{
@@ -858,7 +858,7 @@ export const Customisation: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import DataList from '@cnamts/synapse'
+					import { DataList } from '@cnamts/synapse'
 					import { mdiAccount, mdiCalendar, mdiInformationOutline } from '@mdi/js'
 										
 					const items = [

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

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

package/src/components/DataListGroup/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 />