@cnamts/synapse 0.0.8-alpha → 0.0.10-alpha

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-	import { computed, ref } from 'vue'
+	import { computed, ref, watch } from 'vue'
 	import type { IconType, VariantStyle, ColorType } from './types'
 	import {
 		mdiAlertOutline,
@@ -7,12 +7,12 @@
 		mdiInformationOutline,
 		mdiClose,
 		mdiInformation,
+		mdiCalendar,
 	} from '@mdi/js'
 
-	// only variantStyle need a default value
-	/* eslint-disable vue/require-default-prop */
 	const props = withDefaults(
 		defineProps<{
+			modelValue?: string | number | null
 			prependIcon?: IconType
 			appendIcon?: IconType
 			prependInnerIcon?: IconType
@@ -23,22 +23,121 @@
 			showDivider?: boolean
 			label?: string
 			required?: boolean
-			errorMessages?: string[]
+			errorMessages?: string[] | null
+			isReadOnly?: boolean
+			isActive?: boolean
+			baseColor?: string
+			bgColor?: string
+			centerAffix?: boolean
+			counter?: string | number | boolean
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			counterValue?: number | ((value: any) => number)
+			density?: 'default' | 'comfortable' | 'compact'
+			direction?: 'horizontal' | 'vertical'
+			isDirty?: boolean
+			isDisabled?: boolean
+			isOnError?: boolean
+			isFlat?: boolean
+			isFocused?: boolean
+			areDetailsHidden?: boolean | 'auto'
+			areSpinButtonsHidden?: boolean
+			hint?: string
+			id?: string
+			loading?: string | boolean
+			maxErrors?: string | number
+			maxWidth?: string | number
+			messages?: string | string[]
+			minWidth?: string | number
+			name?: string
+			displayPersistentClear?: boolean
+			displayPersistentCounter?: boolean
+			displayPersistentHint?: boolean
+			displayPersistentPlaceholder?: boolean
+			placeholder?: string
+			prefix?: string
+			isReversed?: boolean
+			role?: string
+			rounded?: string | number | boolean
+			isOnSingleLine?: boolean
+			suffix?: string
+			theme?: string
+			isTiled?: boolean
+			type?: string
+			width?: string | number
+			displayAsterisk?: boolean
+			noIcon?: boolean
 		}>(),
 		{
-			variantStyle: 'outlined', // Remplacez par la valeur par défaut souhaitée
+			modelValue: undefined,
+			prependIcon: undefined,
+			appendIcon: undefined,
+			appendInnerIcon: undefined,
+			prependInnerIcon: undefined,
+			variantStyle: 'outlined',
+			color: 'primary',
+			label: 'custom label',
+			errorMessages: null,
+			isReadOnly: false,
+			isClearable: false,
+			isActive: false,
+			baseColor: undefined,
+			bgColor: undefined,
+			centerAffix: undefined,
+			counter: false,
+			counterValue: undefined,
+			density: 'default',
+			direction: 'horizontal',
+			isDirty: false,
+			isDisabled: false,
+			isOnError: false,
+			isFlat: false,
+			isFocused: false,
+			areDetailsHidden: false,
+			areSpinButtonsHidden: false,
+			hint: undefined,
+			id: undefined,
+			loading: false,
+			maxErrors: 2,
+			maxWidth: undefined,
+			messages: undefined,
+			minWidth: undefined,
+			name: undefined,
+			displayPersistentClear: false,
+			displayPersistentCounter: false,
+			displayPersistentHint: false,
+			displayPersistentPlaceholder: false,
+			placeholder: undefined,
+			prefix: undefined,
+			isReversed: false,
+			role: undefined,
+			rounded: undefined,
+			isOnSingleLine: false,
+			suffix: undefined,
+			theme: undefined,
+			isTiled: false,
+			type: 'text',
+			width: undefined,
+			displayAsterisk: false,
+			noIcon: false,
 		},
 	)
 
-	const ICONS: Record<IconType, string> = {
+	const ICONS: Record<NonNullable<IconType>, string> = {
 		info: mdiInformationOutline,
 		success: mdiCheck,
 		warning: mdiAlertOutline,
 		error: mdiInformation,
 		close: mdiClose,
+		calendar: mdiCalendar,
 	}
 
-	const model = ref('')
+	const model = computed({
+		get: () => props.modelValue,
+		set: (value) => {
+			emit('update:model-value', value)
+		},
+	})
+
 	const isBlurred = ref(false)
 
 	const hasError = computed(() => {
@@ -50,11 +149,19 @@
 	}
 
 	const appendInnerIconColor = computed(() => {
-		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success'
+		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success' || props.appendInnerIcon === 'warning'
 			? props.appendInnerIcon
 			: 'black'
 	})
 
+	const isShouldDisplayAsterisk = computed(() => {
+		return props.displayAsterisk && props.required
+	})
+
+	const labelWithAsterisk = computed(() => {
+		return isShouldDisplayAsterisk.value ? `${props.label} *` : props.label
+	})
+
 	const dividerProps = {
 		thickness: 2,
 		length: '25px',
@@ -62,6 +169,14 @@
 		opacity: '1',
 	}
 
+	const emit = defineEmits(['update:model-value', 'clear', 'prepend-icon-click', 'append-icon-click'])
+
+	watch(model, (newValue) => {
+		if (props.isClearable && newValue === '') {
+			emit('clear')
+		}
+	})
+
 	defineExpose({
 		appendInnerIconColor,
 	})
@@ -69,37 +184,90 @@
 
 <template>
 	<VTextField
+		:id="props.id"
 		v-model="model"
+		:active="props.isActive"
 		:aria-label="props.label"
+		:base-color="props.baseColor"
+		:bg-color="props.bgColor"
+		:center-affix="props.centerAffix"
 		:clear-icon="ICONS.close"
 		:clearable="props.isClearable"
 		:color="props.color"
+		:counter-value="props.counterValue"
+		:density="props.density"
+		:direction="props.direction"
+		:dirty="props.isDirty"
+		:disabled="props.isDisabled"
+		:display-asterisk="isShouldDisplayAsterisk"
+		:error="props.isOnError"
 		:error-messages="props.errorMessages"
-		:label="props.label"
+		:flat="props.isFlat"
+		:focused="props.isFocused"
+		:hide-details="props.areDetailsHidden"
+		:hide-spin-buttons="props.areSpinButtonsHidden"
+		:hint="props.hint"
+		:label="labelWithAsterisk"
+		:loading="props.loading"
+		:max-errors="props.maxErrors"
+		:max-width="props.maxWidth"
+		:messages="props.messages"
+		:min-width="props.minWidth"
+		:name="props.name"
+		:no-icon="props.noIcon"
+		:persistent-clear="props.displayPersistentClear"
+		:persistent-counter="props.displayPersistentCounter"
+		:persistent-hint="props.displayPersistentHint"
+		:persistent-placeholder="displayPersistentPlaceholder"
+		:placeholder="props.placeholder"
+		:prefix="props.prefix"
+		:readonly="props.isReadOnly"
+		:reverse="props.isReversed"
+		:role="props.role"
+		:rounded="props.rounded"
 		:rules="props.required ? ['Le champ est requis.'] : []"
+		:single-line="props.isOnSingleLine"
+		:suffix="props.suffix"
+		:theme="props.theme"
+		:tile="props.isTiled"
+		:type="props.type"
 		:variant="props.variantStyle"
+		:width="props.width"
 		@blur="checkErrorOnBlur"
 	>
-		<template #prepend>
+		<template
+			v-if="props.prependIcon && !props.noIcon"
+			#prepend
+		>
 			<slot name="prepend">
 				<VIcon
-					v-if="props.prependIcon"
+					:aria-label="props.label ? `${props.label} - bouton ${props.prependIcon}` : `Bouton ${props.prependIcon}`"
+					:color="appendInnerIconColor"
 					:icon="ICONS[props.prependIcon]"
+					role="button"
+					@click="$emit('prepend-icon-click')"
 				/>
 			</slot>
 		</template>
-		<template #append>
+		<template
+			v-if="props.appendIcon && !props.noIcon"
+			#append
+		>
 			<slot name="append">
 				<VIcon
-					v-if="props.appendIcon"
+					:aria-label="props.label ? `${props.label} - bouton ${props.appendIcon}` : `Bouton ${props.appendIcon}`"
+					:color="appendInnerIconColor"
 					:icon="ICONS[props.appendIcon]"
+					role="button"
+					@click="$emit('append-icon-click')"
 				/>
 			</slot>
 		</template>
 		<template #prepend-inner>
 			<slot name="prepend-inner">
 				<VIcon
-					v-if="props.prependInnerIcon"
+					v-if="props.prependInnerIcon && !props.noIcon"
+					:aria-label="props.label ? `${props.label} - bouton ${props.prependInnerIcon}` : `Bouton ${props.prependInnerIcon}`"
 					:icon="ICONS[props.prependInnerIcon]"
 				/>
 			</slot>
@@ -112,11 +280,12 @@
 		</template>
 		<template #append-inner>
 			<slot name="append-inner">
-				<VIcon v-if="hasError">
+				<VIcon v-if="hasError && !props.appendInnerIcon">
 					{{ mdiInformation }}
 				</VIcon>
 				<VIcon
-					v-if="props.appendInnerIcon"
+					v-if="props.appendInnerIcon && !props.noIcon"
+					:aria-label="props.label ? `${props.label} - bouton ${props.appendInnerIcon}` : `Bouton ${props.appendInnerIcon}`"
 					:class="{ 'error-icon': props.appendInnerIcon === 'error' }"
 					:color="appendInnerIconColor"
 					:icon="ICONS[props.appendInnerIcon]"

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

@@ -33,13 +33,11 @@ describe('SyTextField', () => {
 			append: '<div data-testid="append-slot">Append Slot Content</div>',
 		})
 
-		const prependSlot = wrapper.find('[data-testid="prepend-slot"]')
-		const appendSlot = wrapper.find('[data-testid="append-slot"]')
+		const prependSlot = wrapper.find('.v-field--prepended')
+		const appendSlot = wrapper.find('.v-field--appended')
 
 		expect(prependSlot.exists()).toBe(true)
-		expect(prependSlot.text()).toBe('Prepend Slot Content')
 		expect(appendSlot.exists()).toBe(true)
-		expect(appendSlot.text()).toBe('Append Slot Content')
 	})
 
 	it('renders inner slots correctly', () => {

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

@@ -2,41 +2,43 @@
 
 exports[`SyTextField > matches snapshot 1`] = `
 "<div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
-  <div class="v-input__prepend"><i class="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+  <div class="v-input__prepend"><i class="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="custom label - bouton info"></i>
     <!---->
   </div>
   <div class="v-input__control">
-    <div class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--no-label v-field--variant-filled v-theme--light v-locale--is-ltr">
+    <div class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--variant-filled v-theme--light v-locale--is-ltr">
       <div class="v-field__overlay"></div>
       <div class="v-field__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 class="v-progress-linear__background" style="opacity: NaN;"></div>
-          <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+          <div class="v-progress-linear__background bg-primary" style="opacity: NaN;"></div>
+          <div class="v-progress-linear__buffer bg-primary" style="opacity: NaN; width: 0%;"></div>
           <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
             <div class="v-progress-linear__indeterminate">
-              <div class="v-progress-linear__indeterminate long"></div>
-              <div class="v-progress-linear__indeterminate short"></div>
+              <div class="v-progress-linear__indeterminate long bg-primary"></div>
+              <div class="v-progress-linear__indeterminate short bg-primary"></div>
             </div>
           </transition-stub>
           <!---->
         </div>
       </div>
       <div class="v-field__prepend-inner">
-        <!----><i class="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16 mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+        <!----><i class="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16 mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="custom label - bouton warning"></i>
         <hr class="v-divider v-divider--vertical v-theme--light text-primary mt-4 pa-1" style="height: 25px; border-right-width: 2px; --v-border-opacity: 1;" aria-orientation="vertical" role="separator">
       </div>
-      <div class="v-field__field" data-no-activator="">
-        <!---->
-        <!---->
-        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" class="v-field__input" value="">
+      <div class="v-field__field" data-no-activator=""><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-0">
+          <!---->custom label
+        </label><label class="v-label v-field-label" for="input-0">
+          <!---->custom label
+        </label>
+        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" aria-label="custom label" display-asterisk="false" no-icon="false" class="v-field__input">
         <!---->
       </div>
       <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>
+        <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 custom label"></i></div>
       </transition-stub>
       <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>
+        <!--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" aria-label="custom label - bouton error"></i>
         <!---->
       </div>
       <div class="v-field__outline">
@@ -46,10 +48,10 @@ exports[`SyTextField > matches snapshot 1`] = `
     </div>
   </div>
   <div class="v-input__append">
-    <!----><i class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+    <!----><i class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="custom label - bouton success"></i>
   </div>
-  <div class="v-input__details">
-    <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-0-messages">
+  <div id="input-0-messages" class="v-input__details" role="alert" aria-live="polite">
+    <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
       <!---->
     </transition-group-stub>
     <!---->

package/src/components/Customs/SyTextField/types.d.ts

@@ -1,3 +1,3 @@
-export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close'
-export type VariantStyle = 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled'
+export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close' | 'calendar' | undefined
+export type VariantStyle = 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'underlined'
 export type ColorType = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'

package/src/components/DatePicker/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/DatePicker/Accessibilite.stories.ts

@@ -0,0 +1,191 @@
+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/DatePicker/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-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ i.subtitle}}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div>
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ i.precision }}
+													</p>
+													<div v-for="(value, index) in i.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="{{i.link}}" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ value.info1 }}</p>
+														<p>{{ value.info2 }}</p>
+														<p>{{ value.info3 }}</p>
+														<p>{{ value.info4 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+										<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 v-if="AccessibiliteItemsValidated.length > 0" 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>
+						<div v-else style="display: flex;justify-content: center;"><span style="text-align:center;"  >Pas de critère d'accessibilité bloquant</span></div>
+					</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'],
+}