@cnamts/synapse 1.0.19 → 1.0.21

package/src/components/PaginatedTable/PaginatedTable.vue

@@ -2,6 +2,8 @@
 	import { ref, computed, watch, useAttrs, onMounted } from 'vue'
 	import type { DataOptions, SortOption, GroupOption } from './types'
 	import { LocalStorageUtility } from '@/utils/localStorageUtility'
+	import Pagination from './Pagination.vue'
+	import type { VDataTable } from 'vuetify/components'
 
 	const props = defineProps({
 		serverItemsLength: {
@@ -68,6 +70,7 @@
 				headerProps: {
 					'aria-label': sort ? `${title}, trier en fonction de cette colonne` : undefined,
 					'aria-sort': sort ? (sort.order === 'asc' ? 'ascending' : 'descending') : 'none',
+					'scope': 'col',
 				},
 			}
 		})
@@ -188,6 +191,18 @@
 					v-bind="slotProps ?? {}"
 				/>
 			</template>
+			<template #bottom="args">
+				<slot
+					name="bottom"
+					v-bind="args"
+				>
+					<Pagination>
+						<template #prepend>
+							<slot name="footer.prepend" />
+						</template>
+					</Pagination>
+				</slot>
+			</template>
 		</VDataTable>
 		<VDataTableServer
 			v-else
@@ -204,6 +219,18 @@
 					v-bind="slotProps ?? {}"
 				/>
 			</template>
+			<template #bottom="args">
+				<slot
+					name="bottom"
+					v-bind="args"
+				>
+					<Pagination>
+						<template #prepend>
+							<slot name="footer.prepend" />
+						</template>
+					</Pagination>
+				</slot>
+			</template>
 		</VDataTableServer>
 	</div>
 </template>
@@ -260,51 +287,4 @@
 		}
 	}
 }
-
-:global(.v-select .v-field__outline__start),
-:global(.v-select .v-field__outline__end) {
-	border-color: tokens.$colors-border-base;
-	opacity: 1;
-	transition: border-color 0.2s ease;
-}
-
-:global(.v-select:hover .v-field__outline__start),
-:global(.v-select:hover .v-field__outline__end) {
-	border-color: tokens.$colors-border-darker;
-}
-
-:global(.v-select__content .v-list-item:focus-visible) {
-	outline: 2px solid tokens.$colors-interactive;
-	outline-offset: -2px;
-}
-
-:global(.v-select__content .v-list-item:hover) {
-	background-color: tokens.$colors-interactive-hover;
-}
-
-:global(.v-select__content .v-list-item > .v-list-item__overlay) {
-	background-color: transparent;
-}
-
-:global(.v-select__content .v-list-item:hover > .v-list-item__overlay),
-:global(.v-select__content .v-list-item--active > .v-list-item__overlay) {
-	background-color: currentcolor;
-}
-
-.sy-paginated-table :deep(.v-pagination) button:focus-visible {
-	outline: 2px solid tokens.$colors-interactive;
-	outline-offset: -2px;
-}
-
-.sy-paginated-table :deep(.v-pagination) .v-pagination__list [aria-disabled='false'] svg {
-	color: tokens.$colors-icon-base;
-}
-
-.sy-paginated-table :deep(.v-pagination) .v-btn--variant-plain[aria-disabled='false'] {
-	opacity: 1;
-}
-
-.sy-paginated-table :deep(.v-pagination) .v-btn--variant-plain:hover[aria-disabled='false'] svg {
-	color: #000;
-}
 </style>

package/src/components/PaginatedTable/Pagination.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+	import { VPagination } from 'vuetify/components'
+	import { usePagination } from 'vuetify/lib/components/VDataTable/composables/paginate.mjs'
+	import SySelect from '../Customs/Selects/SySelect/SySelect.vue'
+	import { useLocale } from 'vuetify'
+
+	const { page, pageCount, startIndex, stopIndex, itemsLength, itemsPerPage, setItemsPerPage } = usePagination()
+
+	const { t } = useLocale()
+
+	const itemsPerPageOptions = [
+		{ value: 10, title: '10' },
+		{ value: 25, title: '25' },
+		{ value: 50, title: '50' },
+		{ value: 100, title: '100' },
+		{ value: -1, title: t('$vuetify.dataFooter.itemsPerPageAll') },
+	]
+
+</script>
+<template>
+	<div class="v-data-table-footer">
+		<slot name="prepend" />
+		<div class="v-data-table-footer__items-per-page d-flex">
+			<span>{{ t('$vuetify.dataFooter.itemsPerPageText') }}</span>
+			<SySelect
+				:label="t('$vuetify.dataFooter.itemsPerPageText')"
+				:items="itemsPerPageOptions"
+				text-key="title"
+				value-key="value"
+				:model-value="itemsPerPage"
+				density="compact"
+				variant="outlined"
+				hide-details
+				@update:model-value="v => setItemsPerPage(Number(v))"
+			/>
+		</div>
+
+		<div class="v-data-table-footer__info">
+			<div>
+				{{ t('$vuetify.dataFooter.pageText', !itemsLength ? 0 : startIndex + 1, stopIndex, itemsLength) }}
+			</div>
+		</div>
+		<div class="v-data-table-footer__pagination">
+			<VPagination
+				v-model="page"
+				density="comfortable"
+				first-aria-label="$vuetify.dataFooter.firstPage"
+				last-aria-label="$vuetify.dataFooter.lastPage"
+				:length="pageCount"
+				next-aria-label="$vuetify.dataFooter.nextPage"
+				previous-aria-label="$vuetify.dataFooter.prevPage"
+				rounded
+				show-first-last-page
+				:total-visible="0"
+				variant="plain"
+			/>
+		</div>
+	</div>
+</template>
+<style scoped lang="scss">
+@use '@/assets/tokens';
+
+/* stylelint-disable-next-line selector-class-pattern */
+:deep(.v-field__outline__notch, .v-field-label) {
+	width: 0;
+}
+
+:deep(.v-input) {
+	min-width: 0 !important;
+	width: 90px;
+}
+
+:deep(.sy-select-container) {
+	width: max-content;
+}
+
+:deep(.v-pagination) button:focus-visible {
+	outline: 2px solid tokens.$colors-interactive;
+	outline-offset: -2px;
+}
+
+:deep(.v-pagination) .v-pagination__list [aria-disabled='false'] svg {
+	color: tokens.$colors-icon-base;
+}
+
+:deep(.v-pagination) .v-btn--variant-plain[aria-disabled='false'] {
+	opacity: 1;
+}
+
+:deep(.v-pagination) .v-btn--variant-plain:hover[aria-disabled='false'] svg {
+	color: #000;
+}
+</style>

package/src/components/PaginatedTable/accessibilite/Accessibility.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../PaginatedTable.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+<br />

package/src/components/PasswordField/PasswordField.vue

@@ -305,10 +305,11 @@
 					@keydown.space.prevent="togglePasswordVisibility"
 					@keydown.enter.prevent="togglePasswordVisibility"
 				>
-					<VIcon
+					<SyIcon
 						:icon="showEyeIcon ? eyeIcon : eyeOffIcon"
 						color="rgb(0 0 0 / 70%)"
 						:aria-hidden="true"
+						decorative
 					/>
 				</v-button>
 			</div>

package/src/components/PasswordField/accessibilite/Accessibility.mdx

@@ -0,0 +1,108 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import * as Stories from '../PasswordField.stories.ts'
+import '@/stories/styles/shared.css'
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+Informations sur l’accessibilité du composant **PasswordField**.
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/PasswordField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/898" target="_blank" style={{color:'#0C41BD'}}>issue #898</a>)</p>
+	</div>
+
+
+                <div class="mt-6">
+                  <h3 style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>Spécificité - Source technique</h3>
+                  
+                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
+                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Les champs de formulaires doivent avoir une étiquette</p>
+                    <p style={{ marginBottom: '8px' }}>Techniquement, il est communément utilisé la balise "label" avec les attributs "for" et "id".
+                    Celle-ci doit être pertinente et accolée au champ associé.</p>
+                    <p>
+                      <a href="https://www.accede-web.com/notices/html-et-css/formulaires/utiliser-la-balise-label-ainsi-que-les-attributs-for-et-id-pour-etiqueter-les-champs-avec-intitule-visible/" 
+                         target="_blank" style={{ color:'#0C41BD' }}>
+                        Documentation accede-web
+                      </a>
+                    </p>
+                  </div>
+                  
+                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
+                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Remplissage automatique des champs</p>
+                    <p style={{ marginBottom: '8px' }}>Selon la finalité du champ, le remplissage automatique est possible (attribut "autocomplete").</p>
+                    <p style={{ fontSize: '13px', color: '#0C41BD' }}>
+                      <a href="https://www.accede-web.com/notices/html-et-css/formulaires/utiliser-lattribut-autocomplete-pour-faciliter-le-remplissage-automatique-des-champs/" 
+                         target="_blank" style={{color:'#0C41BD'}}>
+                        Documentation accede-web
+                      </a>
+                    </p>
+                  </div>
+                  
+                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
+                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Aide à la saisie</p>
+                    <p style={{ marginBottom: '8px' }}>En cas d'aide à la saisie, l'inscription est visible dans un message ou présente dans l'étiquette. Il doit être rattaché au libellé ou situé dans le passage de texte associé au champ.</p>
+                    <p style={{ fontSize: '13px', color: '#0C41BD' }}>
+                      <a href="https://www.accede-web.com/notices/html-et-css/formulaires/integrer-les-aides-a-la-saisie-directement-dans-les-balises-label/" 
+                         target="_blank" style={{color:'#0C41BD'}}>
+                        Documentation accede-web
+                      </a>
+                    </p>
+                  </div>
+                  
+                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
+                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Champs obligatoires</p>
+                    <p style={{ marginBottom: '8px' }}>Les champs obligatoires possèdent l'une et/ou l'autre condition :</p>
+                    <ul style={{ marginBottom: '8px', paddingLeft: '20px' }}>
+                      <li>un intitulé visible permettant de l'identifier comme tel</li>
+                      <li>un attribut "required" ou 'aria-required="true"'</li>
+                    </ul>
+                    <p style={{ marginBottom: '8px' }}>Il doit être rattaché au libellé ou situé dans le passage de texte associé au champ.</p>
+                    <p style={{ fontSize: '13px', color: '#0C41BD' }}>
+                      <a href="https://www.accede-web.com/notices/html-et-css/formulaires/integrer-required-ou-aria-requiredtrue-dans-les-champs-obligatoires/" 
+                         target="_blank" style={{color:'#0C41BD'}}>
+                        Documentation accede-web
+                      </a>
+                    </p>
+                  </div>
+                  
+                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
+                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Gestion des erreurs</p>
+                    <p style={{ marginBottom: '8px' }}>En cas d'erreur, le champ possède l'une et/ou l'autre condition :</p>
+                    <ul style={{ marginBottom: '8px', paddingLeft: '20px' }}>
+                      <li>un message visible permet de l'identifier comme tel</li>
+                      <li>un attribut 'aria-invalid="true"'</li>
+                    </ul>
+                    <p style={{ marginBottom: '8px' }}>Il doit être rattaché au libellé ou situé dans le passage de texte associé au champ.</p>
+                    <p style={{ marginBottom: '8px' }}>Par ailleurs, s'il s'agit d'une erreur de type ou format, l'information est retranscrite dans le message d'erreur avec des exemples de valeurs attendues autre que celle de l'aide à la saisie.</p>
+                    <p style={{ fontSize: '13px', color: '#0C41BD' }}>
+                      <a href="https://www.accede-web.com/notices/html-et-css/formulaires/integrer-les-messages-derreur-et-les-suggestions-de-correction-directement-dans-les-balises-label/" 
+                         target="_blank" style={{color:'#0C41BD'}}>
+                        Documentation accede-web
+                      </a>
+                    </p>
+                  </div>
+                  
+                  <div style={{ backgroundColor: '#f5f5f5', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
+                    <p style={{ fontWeight: 'bold', marginBottom: '8px' }}>Spécificités des champs de mot de passe</p>
+                    <p style={{ marginBottom: '8px' }}>Le copier-coller doit être possible dans un champ d'authentification. Cela permet notamment de faciliter l'utilisation d'un gestionnaire de mot de passe.</p>
+                    <p style={{ marginBottom: '16px', fontSize: '13px', color: '#0C41BD' }}>
+                      <a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html" 
+                         target="_blank" style={{color:'#0C41BD'}}>
+                        Documentation W3C
+                      </a>
+                    </p>
+                    <p style={{ marginBottom: '8px' }}>Il faut pouvoir démasquer le mot de passe lors de la saisie. Cela permet d'améliorer les chances de réussite pour certaines personnes souffrant de troubles cognitifs ou ayant des difficultés à saisir correctement un mot de passe.</p>
+                    <p style={{ fontSize: '13px', color: '#0C41BD' }}>
+                      <a href="https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html" 
+                         target="_blank" style={{color:'#0C41BD'}}>
+                        Documentation W3C
+                      </a>
+                    </p>
+                  </div>
+                </div>

package/src/components/PeriodField/accessibilite/Accessibility.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../PeriodField.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+<br />

package/src/components/PhoneField/PhoneField.stories.ts

@@ -8,47 +8,54 @@ const meta = {
 	component: PhoneField,
 	parameters: {
 		layout: 'fullscreen',
+		actions: {
+			handles: ['update:modelValue', 'update:selectedDialCode', 'update:dialCodeModel', 'change'],
+		},
 		controls: { exclude: ['computedValue', 'phoneMask', 'counter', 'hasError', 'phoneNumber', 'mergedDialCodes'] },
 	},
 	argTypes: {
-		modelValue: { control: false },
-		dialCodeModel: { control: false },
-		required: { control: 'boolean' },
-		outlined: { control: 'boolean' },
-		outlinedIndicatif: { control: 'boolean' },
-		withCountryCode: { control: 'boolean' },
-		countryCodeRequired: { control: 'boolean' },
-		displayFormat: {
+		'modelValue': { control: false },
+		'dialCodeModel': { control: false },
+		'onUpdate:modelValue': { action: 'update:modelValue' },
+		'onUpdate:selectedDialCode': { action: 'update:selectedDialCode' },
+		'onUpdate:dialCodeModel': { action: 'update:dialCodeModel' },
+		'onChange': { action: 'change' },
+		'required': { control: 'boolean' },
+		'outlined': { control: 'boolean' },
+		'outlinedIndicatif': { control: 'boolean' },
+		'withCountryCode': { control: 'boolean' },
+		'countryCodeRequired': { control: 'boolean' },
+		'displayFormat': {
 			control: { type: 'select' },
 			description: 'Format d\'affichage des items',
 			options: ['code', 'code-abbreviation', 'code-country', 'country', 'abbreviation'],
 		},
-		customIndicatifs: {
+		'customIndicatifs': {
 			control: 'object',
 			description: 'Permet d\'ajouter des indicatifs à la liste pre-existante',
 		},
-		useCustomIndicatifsOnly: {
+		'useCustomIndicatifsOnly': {
 			control: 'boolean',
 			description: 'Permet d\'utiliser uniquement les indicatifs que vous renseignez dans la props customIndicatifs',
 		},
-		helpText: {
+		'helpText': {
 			control: 'text',
 			description: 'Texte d\'aide affiché sous le champ. Lorsque présent, les messages d\'erreur incluent un exemple concret distinct du texte d\'aide.',
 		},
-		autocompleteCountryCode: {
+		'autocompleteCountryCode': {
 			control: 'text',
 			description: 'Valeur de l\'attribut autocomplete pour le champ indicatif pays (par défaut: "tel-country-code")',
 		},
-		autocompletePhone: {
+		'autocompletePhone': {
 			control: 'text',
 			description: 'Valeur de l\'attribut autocomplete pour le champ numéro de téléphone (par défaut: "tel-national")',
 		},
-		isValidatedOnBlur: { control: 'boolean' },
-		displayAsterisk: { control: 'boolean' },
-		disableErrorHandling: { control: 'boolean' },
-		disabled: { control: 'boolean' },
-		readonly: { control: 'boolean' },
-	},
+		'isValidatedOnBlur': { control: 'boolean' },
+		'displayAsterisk': { control: 'boolean' },
+		'disableErrorHandling': { control: 'boolean' },
+		'disabled': { control: 'boolean' },
+		'readonly': { control: 'boolean' },
+	} as Record<string, unknown>,
 } satisfies Meta<typeof PhoneField>
 
 export default meta
@@ -1254,7 +1261,7 @@ export const DisplayModels: Story = {
 				code: `
         <template>
         	<span>
-				{{ args.selectedDialCode }} - {{ args.modelValue }}
+				Indicatif: {{ selectedDialCode }}<br/>Numéro: {{ modelValue }}
 			</span>
           <PhoneField
             v-model="modelValue"
@@ -1305,24 +1312,25 @@ export const DisplayModels: Story = {
 		readonly: false,
 		bgColor: 'white',
 	},
-	render: (args) => {
-		return {
-			components: { PhoneField },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="pa-4">
-					<div class="pa-4">
-						{{ args.dialCodeModel }} - {{ args.modelValue }}
-					</div>
-					<PhoneField
-						v-bind="args"
-					/>
-				</div>
-			`,
-		}
-	},
+	render: args => ({
+		components: { PhoneField },
+		setup() {
+			return { args }
+		},
+		template: `
+    <div class="pa-4">
+      <div class="pa-4">
+        Indicatif: {{ args.dialCodeModel }}<br/>Numéro: {{ args.modelValue }}
+      </div>
+
+      <PhoneField
+        v-bind="args"
+        @update:modelValue="args.modelValue = $event"
+        @update:selectedDialCode="args.dialCodeModel = $event"
+      />
+    </div>
+  `,
+	}),
 }
 
 /**

package/src/components/PhoneField/accessibilite/Accessibility.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../PhoneField.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/PhoneField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/797" target="_blank" style={{color:'#0C41BD'}}>issue #797</a>)</p>
+	</div>

package/src/components/RangeField/accessibilite/Accessibility.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../RangeField.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/RangeField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/908" target="_blank" style={{color:'#0C41BD'}}>issue #908</a>)</p>
+	</div>

package/src/components/RatingPicker/accessibilite/Accessibility.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as RatingPickerStories from '../RatingPicker.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={RatingPickerStories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/RatingPicker.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/910" target="_blank" style={{color:'#0C41BD'}}>issue #910</a>)</p>
+	</div>

package/src/components/SearchListField/SearchListField.vue

@@ -7,6 +7,7 @@
 
 	import { SyTextField, SyCheckbox } from '@/components'
 	import slugify from 'slugify'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = defineProps({
 		modelValue: {
@@ -114,9 +115,11 @@
 			:bg-color="props.bgColor"
 		>
 			<template #prepend-inner>
-				<VIcon class="mr-1">
-					{{ mdiMagnify }}
-				</VIcon>
+				<SyIcon
+					:icon="mdiMagnify"
+					class="mr-1"
+					decorative
+				/>
 			</template>
 		</SyTextField>
 

package/src/components/SearchListField/accessibilite/Accessibility.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../SearchListField.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/SearchListField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/1499" target="_blank" style={{color:'#0C41BD'}}>issue #1499</a>)</p>
+	</div>

package/src/components/SkipLink/{Accessibilite.mdx → accessibilite/Accessibility.mdx}

@@ -1,5 +1,5 @@
 import { Meta, Primary } from '@storybook/blocks';
-import * as SkipLinkStories from './SkipLink.stories';
+import * as SkipLinkStories from '../SkipLink.stories';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import {
 	AccessibilityGuideLayout,
@@ -9,7 +9,7 @@ import {
 	BestPracticesSection,
 	ResourcesSection,
 	AuditSection,
-} from '../../stories/accessibility/AccessibilityGuideLayout.mdx';
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={SkipLinkStories} />
 
@@ -58,7 +58,10 @@ import {
 	</ResourcesSection>
 
 	<AuditSection>
-		<p>Rapport d'audit manuel : <a href="/audits/SkipLink.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></p>
-		<p style={{color: 'grey', fontSize: '14px'}}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4012" target="_blank" style={{color: '#0C41BD'}}>issue #4012</a>)</p>
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/SkipLink.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4012" target="_blank" style={{color:'#0C41BD'}}>issue #4012</a>)</p>
+	</div>
 	</AuditSection>
 </AccessibilityGuideLayout>

package/src/components/SocialMediaLinks/DefaultSocialMediaLinks.ts

@@ -1,7 +1,9 @@
-import { mdiTwitter, mdiFacebook, mdiLinkedin } from '@mdi/js'
+import { mdiFacebook, mdiLinkedin } from '@mdi/js'
 
 import type { SocialMediaLink } from './types'
 
+const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
+
 export const defaultSocialMediaLinks: SocialMediaLink[] = [
 	{
 		icon: mdiLinkedin,
@@ -14,8 +16,8 @@ export const defaultSocialMediaLinks: SocialMediaLink[] = [
 		href: 'https://www.facebook.com/AssurMaladie/',
 	},
 	{
-		icon: mdiTwitter,
-		name: 'Twitter',
-		href: 'https://twitter.com/Assur_Maladie',
+		icon: xIcon,
+		name: 'X',
+		href: 'https://x.com/Assur_Maladie',
 	},
 ]

package/src/components/SocialMediaLinks/SocialMediaLinks.mdx

@@ -20,7 +20,9 @@ import * as SocialMediaLinksStories from './SocialMediaLinks.stories.ts';
 <Source dark code={`
 <script setup lang="ts">
 import { SocialMediaLinks } from '@cnamts/synapse'
-import { mdiFacebook, mdiLinkedin, mdiTwitter } from '@mdi/js'
+import { mdiFacebook, mdiLinkedin } from '@mdi/js'
+
+const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
 
 const links = [
 	{
@@ -31,12 +33,12 @@ const links = [
 	{
 		icon: mdiFacebook,
 		name: 'Facebook',
-		href: 'https://twitter.com/Assur_Maladie',
+		href: 'https://www.facebook.com/AssurMaladie/',
 	},
 	{
-		icon: mdiTwitter,
-		name: 'Twitter',
-		href: 'https://twitter.com/Assur_Maladie',
+		icon: xIcon,
+		name: 'X',
+		href: 'https://x.com/Assur_Maladie',
 	},
 ]
 </script>