@cnamts/synapse 1.0.26 → 1.1.0

package/src/stories/Components/Components.stories.ts

@@ -84,6 +84,13 @@ export const ComponentsList: StoryObj = {
 						img: `/components/card${isAp ? '-ap' : ''}.svg`,
 						category: 'Layout',
 					},
+					{
+						title: 'Stepper',
+						description: 'Affiche la progression par étapes numérotées.',
+						link: '/?path=/docs/composants-composants-vuetify-vstepper--docs',
+						img: `/components/stepper${isAp ? '-ap' : ''}.svg`,
+						category: 'Navigation',
+					},
 					{
 						title: 'SyTabs',
 						description: 'Permet de masquer du contenu derrière un élément sélectionnable.',
@@ -151,7 +158,7 @@ export const ComponentsList: StoryObj = {
 						title: 'BackToTopBtn',
 						description: 'Utilisé pour afficher un bouton permettant à l’utilisateur de remonter en haut de la page.',
 						link: '/?path=/docs/composants-boutons-backtotopbtn--docs',
-						img: '/components/back-to-top-btn.svg',
+						img: `/components/back-to-top-btn${isAp ? '-ap' : ''}.svg`,
 						category: 'Boutons',
 					},
 					{
@@ -203,6 +210,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/sy-text-field.svg',
 						category: 'Formulaires',
 					},
+					{
+						title: 'SyTextArea',
+						description: 'Utilisé pour la collecte de grandes quantités de données textuelles.',
+						link: '/?path=/docs/composants-formulaires-sytextarea--docs',
+						img: `/components/sy-text-area${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
 					{
 						title: 'SyAutocomplete',
 						description: 'Utilisé pour permettre à l’utilisateur de rechercher et sélectionner une valeur dans une liste d\'options (alternative au v-autocomplete de Vuetify).',
@@ -248,8 +262,8 @@ export const ComponentsList: StoryObj = {
 					{
 						title: 'DatePicker',
 						description: 'Utilisé pour permettre à l’utilisateur de sélectionner ou de saisir une date.',
-						link: '/?path=/docs/composants-formulaires-datepicker--docs',
-						img: '/components/date-picker.svg',
+						link: '/?path=/docs/composants-formulaires-datepicker-introduction--docs',
+						img: `/components/date-picker${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
 					{
@@ -263,14 +277,14 @@ export const ComponentsList: StoryObj = {
 						title: 'NirField',
 						description: 'Utilisé pour permettre à l’utilisateur de saisir un numéro de Sécurité sociale (NIR).',
 						link: '/?path=/docs/composants-formulaires-nirfield--docs',
-						img: '/components/nir-field.svg',
+						img: `/components/nir-field${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
 					{
 						title: 'PasswordField',
 						description: 'Utilisé pour afficher un champ de saisie de mot de passe et gérer sa validation.',
 						link: '/?path=/docs/composants-formulaires-passwordfield--docs',
-						img: '/components/password-field.svg',
+						img: `/components/password-field${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
 					{
@@ -297,15 +311,15 @@ export const ComponentsList: StoryObj = {
 					{
 						title: 'SearchListField',
 						description: 'Utilisé pour permettre à l’utilisateur de sélectionner des valeurs dans une liste.',
-						link: '/?path=/docs/composants-formulaires-searchlistfield--docs',
-						img: '/components/search-list-field.svg',
-						category: 'Formulaires',
+						link: '/?path=/docs/composants-filtres-searchlistfield--docs',
+						img: `/components/search-list-field${isAp ? '-ap' : ''}.svg`,
+						category: 'Filtres',
 					},
 					{
 						title: 'SelectBtnField',
 						description: 'Utilisé pour permettre à l’utilisateur de sélectionner une valeur dans une liste.',
 						link: '/?path=/docs/composants-formulaires-selectbtnfield--docs',
-						img: '/components/select-btn-field.svg',
+						img: `/components/select-btn-field${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
 					{
@@ -329,18 +343,39 @@ export const ComponentsList: StoryObj = {
 						img: `/components/sy-radiogroup${isAp ? '-ap' : ''}.svg`,
 						category: 'Formulaires',
 					},
+					{
+						title: 'Captcha',
+						description: 'Utilisé pour confirmer que les interactions des utilisateurs sont effectuées par des humains et non par des robots.',
+						link: '/?path=/docs/composants-formulaires-captcha--docs',
+						img: `/components/captcha${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
+					{
+						title: 'SyTable',
+						description: 'Utilisé pour afficher une VDataTable de Vuetify',
+						link: '/?path=/docs/composants-tableaux-sytable--docs',
+						img: `/components/sy-table${isAp ? '-ap' : ''}.svg`,
+						category: 'Tableaux',
+					},
+					{
+						title: 'SyServerTable',
+						description: 'Utilisé pour afficher une VDataTable Vuetify avec gestion des données côté serveur',
+						link: '/?path=/docs/composants-tableaux-syservertable--docs',
+						img: `/components/sy-server-table${isAp ? '-ap' : ''}.svg`,
+						category: 'Tableaux',
+					},
 					{
 						title: 'PaginatedTable',
 						description: 'Utilisé pour afficher une VDataTable de Vuetify avec une pagination persistante.',
 						link: '/?path=/docs/composants-tableaux-paginatedtable--docs',
-						img: '/components/paginated-table.svg',
+						img: `/components/paginated-table${isAp ? '-ap' : ''}.svg`,
 						category: 'Tableaux',
 					},
 					{
 						title: 'TableToolbar',
 						description: 'Utilisé pour afficher une barre d\'outils pour les tableaux.',
 						link: '/?path=/docs/composants-tableaux-tabletoolbar--docs',
-						img: '/components/table-toolbar.svg',
+						img: `/components/table-toolbar${isAp ? '-ap' : ''}.svg`,
 						category: 'Tableaux',
 					},
 					{
@@ -396,7 +431,7 @@ export const ComponentsList: StoryObj = {
 						title: 'FilePreview',
 						description: 'Utilisé pour afficher l\'aperçu d\'un fichier.',
 						link: '/?path=/docs/composants-donn%C3%A9es-filepreview--docs',
-						img: '/components/file-preview.svg',
+						img: `/components/file-preview${isAp ? '-ap' : ''}.svg`,
 						category: 'Données',
 					},
 					{
@@ -444,10 +479,17 @@ export const ComponentsList: StoryObj = {
 					{
 						title: 'FilterSideBar',
 						description: 'Permet de filtrer rapidement les contenus selon plusieurs critères.',
-						link: '/?path=/docs/composants-filtres-filterssidebar--docs',
+						link: '/?path=/docs/composants-filtres-filtersidebar--docs',
 						img: `/components/filter-side-bar${isAp ? '-ap' : ''}.svg`,
 						category: 'Filtres',
 					},
+					{
+						title: 'FilterInline',
+						description: 'Permet de filtrer rapidement les contenus selon plusieurs critères.',
+						link: '/?path=/docs/composants-filtres-filterinline--docs',
+						img: `/components/filters-inline${isAp ? '-ap' : ''}.svg`,
+						category: 'Filtres',
+					},
 				]
 
 				const categoryOrder = [
@@ -481,6 +523,7 @@ export const ComponentsList: StoryObj = {
 					'NirField',
 					'Card',
 					'FilterSideBar',
+					'SearchListField',
 					'SyTextField',
 					'Switch',
 					'Tooltip',
@@ -491,6 +534,18 @@ export const ComponentsList: StoryObj = {
 					'Accordion',
 					'ChipList',
 					'SyTabs',
+					'SelectBtnField',
+					'BackToTopBtn',
+					'TableToolbar',
+					'PhoneField',
+					'SyTextArea',
+					'PaginatedTable',
+					'SyTable',
+					'SyServerTable',
+					'DatePicker',
+					'PasswordField',
+					'Stepper',
+					'Captcha',
 				]
 
 				const shouldDisplayComponent = (component: { category: string, title: string }, category: string) => {

package/src/stories/Demarrer/Releases.stories.ts

@@ -17,9 +17,51 @@ type ReleaseAlert = {
 	message: string
 	type: 'success' | 'info' | 'warning' | 'error'
 	variant: 'tonal' | 'outlined'
+	link?: { href: string, text: string }
+	components?: string[]
 }
 
 const releaseAlerts: ReleaseAlert[] = [
+	{
+		id: 'form-success-messages-hidden',
+		releaseVersion: 'v1.1.0',
+		message: 'Cette version modifie le comportement des composants de formulaire, les messages de succès sont désormais masqués par défaut. Cette modification répond à la fois à des besoins projets et à l\'harmonisation des différents thèmes (CNAM, PAG, Amelipro). Pour les projets souhaitant afficher les messages de succès vous pouvez simplement le faire via la prop `showSuccessMessages`. Les composants concernés sont :',
+		type: 'warning',
+		variant: 'tonal',
+		components: [
+			'SyTextField',
+			'SyTextArea',
+			'SyAutocomplete',
+			'SySelect',
+			'SyCheckbox',
+			'SyCheckBoxGroup',
+			'SyRadioGroup',
+			'DatePicker',
+			'PeriodField',
+			'MonthPicker',
+			'LunarCalendar',
+			'PeriodField',
+			'NirField',
+			'PasswordField',
+			'PhoneField',
+			'Captcha',
+		],
+	},
+	{
+		id: 'node-18-decommission',
+		releaseVersion: 'v1.1.0',
+		message: 'En lien avec le Starter Kit, fin de support de Node 18.',
+		type: 'warning',
+		variant: 'tonal',
+	},
+	{
+		id: 'tokens-simplification',
+		releaseVersion: 'v1.0.27',
+		message: 'Nous avons procédé à une simplification des tokens contraint par l\'ajout du thème Amelipro, merci de vous référer à la page des ',
+		type: 'warning',
+		variant: 'tonal',
+		link: { href: '/?path=/docs/design-tokens-couleurs--docs', text: 'couleurs' },
+	},
 	{
 		id: 'starter-kit-2-0-32',
 		releaseVersion: 'v1.0.24',
@@ -57,7 +99,8 @@ export const List = {
 				}
 
 				const formatMarkdown = (markdown?: string | null) => {
-					return marked.parse(markdown ?? '')
+					const html = marked.parse(markdown ?? '') as string
+					return html.replace(/<blockquote>[\s\S]*?<\/blockquote>/g, '')
 				}
 
 				const getReleaseAlerts = (release: GitHubRelease) => {
@@ -101,7 +144,7 @@ export const List = {
 								:closable="false"
 								class="mt-2 mb-4"
 							>
-								<template #default>{{ alert.message }}</template>
+								<template #default>{{ alert.message }}<template v-if="alert.link"> <a :href="alert.link.href">{{ alert.link.text }}</a>.</template><ul v-if="alert.components" class="mt-2 ml-4"><li v-for="component in alert.components" :key="component">{{ component }}</li></ul></template>
 							</SyAlert>
 							<div v-html="formatMarkdown(release.body)"></div>
 							<hr>

package/src/stories/DesignTokens/ColorIntegrationExample.vue

@@ -23,10 +23,9 @@
 				<pre style="margin: 0; font-size: 12px; color: #333;"><code>&lt;h1 class="text-secondary myColor"&gt;Playground&lt;/h1&gt;</code></pre>
 			</div>
 			<div style="margin-top: 16px; padding: 12px; background-color: #f5f5f5; border-radius: 4px;">
-				<pre style="margin: 0; font-size: 12px; color: #333;"><code>@use '@cnamts/synapse/assets/tokens' as tokens;
-
+				<pre style="margin: 0; font-size: 12px; color: #333;"><code>
 .my-color {
-    color: rgb(var(--v-theme-yellow-lighten40)) !important;
+    color: rgb(var(--v-theme-primary)) !important;
  }</code></pre>
 			</div>
 		</div>

package/src/stories/DesignTokens/Colors.mdx

@@ -12,20 +12,20 @@ import '../styles/shared.css';
 
 <Story of={ColorsStories.Theme} />
 
-<Story of={ColorsStories.ColorIntegration} />
+<Story of={ColorsStories.TokenOptimisationWarning} />
 
-<Story of={ColorsStories.ColorBaseSection}/>
+<Story of={ColorsStories.ColorIntegration} />
 
-<Story of={ColorsStories.AccentSection}/>
+<Story of={ColorsStories.mainColors}/>
 
-<Story of={ColorsStories.InteractiveSection}/>
+<Story of={ColorsStories.BackgroundSection}/>
 
 <Story of={ColorsStories.BorderSection}/>
 
-<Story of={ColorsStories.TextSection}/>
+<Story of={ColorsStories.OverlaySection}/>
 
-<Story of={ColorsStories.IconSection}/>
+<Story of={ColorsStories.InteractionSection}/>
 
-<Story of={ColorsStories.BackgroundSection}/>
+<Story of={ColorsStories.DisabledSection}/>
 
-<Story of={ColorsStories.PaletteSection}/>
+<Story of={ColorsStories.FeedbackSection}/>