@cnamts/synapse 1.0.19 → 1.0.20

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../ChipList.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/ChipList.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/814" target="_blank" style={{color:'#0C41BD'}}>issue #814</a>)</p>
+</div>

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

@@ -1,6 +1,5 @@
 import { Meta, Story } from '@storybook/blocks';
-import * as AccessStories from './Accessibilite.stories.ts';
-import * as CollapsibleListStories from './CollapsibleList.stories';
+import * as CollapsibleListStories from '../CollapsibleList.stories';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import {
 	AccessibilityGuideLayout,
@@ -10,9 +9,9 @@ import {
 	BestPracticesSection,
 	ResourcesSection,
 	AuditSection,
-} from '../../stories/accessibility/AccessibilityGuideLayout.mdx';
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={AccessStories} />
+<Meta of={CollapsibleListStories} />
 
 <AccessibilityGuideLayout
 	componentName="CollapsibleList"
@@ -68,7 +67,10 @@ import {
 	</ResourcesSection>
 
 <AuditSection>
-		<p>Rapport d'audit manuel : <a href="/audits/CollapsibleList.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-v3/pull/792" target="_blank" style={{color: '#0C41BD'}}>issue #792</a>)</p>
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/CollapsibleList.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/792" target="_blank" style={{color:'#0C41BD'}}>issue #792</a>)</p>
+</div>
+
 	</AuditSection>
 </AccessibilityGuideLayout>

package/src/components/Common/IconSlot/IconSlot.vue

@@ -25,7 +25,7 @@
 	const slots = useSlots()
 
 	const hasDefaultSlotContent = computed(() => {
-		const vnodes = slots.default?.() ?? []
+		const vnodes = slots.default?.({}) ?? []
 		return vnodes.some((vnode) => {
 			if (vnode.type === Comment) return false
 			if (vnode.type === Text) {

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../ContextualMenu.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/ContextualMenu.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/658" target="_blank" style={{color:'#0C41BD'}}>issue #658</a>)</p>
+</div>

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as CookiesStories from '../CookieBanner.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={CookiesStories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/Cookies.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/806" target="_blank" style={{color:'#0C41BD'}}>issue #806</a>)</p>
+</div>

package/src/components/CookiesSelection/CookiesInformation/CookiesInformation.vue

@@ -6,6 +6,7 @@
 	import CookiesTable from '../CookiesTable/CookiesTable.vue'
 	import type { CookieTypes, Cookie } from '../types'
 	import { locales } from './locales'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	defineProps<{
 		type: CookieTypes
@@ -104,12 +105,12 @@
 			<summary class="mb-1">
 				{{ open ? locales.hideInformation : locales.showInformation }}
 
-				<VIcon
+				<SyIcon
+					:icon="open ? mdiChevronUp : mdiChevronDown"
 					class="mr-2"
 					data-test="chevron"
-				>
-					{{ open ? mdiChevronUp : mdiChevronDown }}
-				</VIcon>
+					decorative
+				/>
 			</summary>
 
 			<CookiesTable

package/src/components/CopyBtn/CopyBtn.vue

@@ -7,6 +7,7 @@
 
 	import { locales } from './locales'
 	import { config } from './config'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<CustomizableOptions & {
 		ariaLabel?: string
@@ -106,9 +107,11 @@
 					@click="copy"
 				>
 					<slot name="icon">
-						<VIcon v-bind="options.icon">
-							{{ copyIcon }}
-						</VIcon>
+						<SyIcon
+							v-bind="options.icon"
+							:icon="copyIcon"
+							decorative
+						/>
 					</slot>
 				</VBtn>
 			</template>

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../CopyBtn.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/CopyBtn.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/4008" target="_blank" style={{color:'#0C41BD'}}>issue #4008</a>)</p>
+</div>

package/src/components/Customs/Selects/SelectBtnField/accessibilite/Accessibility.mdx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../SelectBtnField.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/SelectBtnField.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/916" target="_blank" style={{color:'#0C41BD'}}>issue #916</a>)</p>
+</div>

package/src/components/Customs/Selects/SelectOverview.mdx

@@ -11,7 +11,7 @@ import '../../../stories/styles/shared.css';
 
 ## Variantes disponibles
 
-Notre système propose quatre modes de sélection, chacun adapté à des besoins spécifiques :
+Notre système propose cinq modes de sélection, chacun adapté à des besoins spécifiques :
 
 <div className="sb-unstyled" style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginBottom: '30px' }}>
   <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
@@ -52,6 +52,78 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
       </span>
     </div>
   </div>
+
+  <div 
+    style={{ 
+      flex: '1 1 300px', 
+      border: '1px solid #e0e0e0', 
+      borderRadius: '8px', 
+      padding: '20px',
+      boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
+      transition: 'all 0.2s ease',
+      backgroundColor: '#fff'
+    }}
+    onClick={() => linkTo('Composants/Formulaires/Selects/SyAutocomplete')()}
+  >
+    <img style={{ width: '40%', height: 'auto', marginLeft: '35%' }} src="/components/search-list-field.svg" alt="SyAutocomplete" />
+    <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#512da8' }}>SyAutocomplete</h3>
+    <div>Champ de saisie avec suggestions filtrées, compatible simple ou multiple, avec gestion des états et des puces.</div>
+    <div style={{ marginTop: '10px', color: '#666' }}>
+      <strong>Idéal pour :</strong>
+      <ul style={{ marginLeft: '20px', marginTop: '5px' }}>
+        <li>Rechercher dans des listes longues</li>
+        <li>Filtrer côté client en temps réel</li>
+        <li>Afficher des chips pour les sélections multiples</li>
+        <li>Gérer les erreurs, avertissements et succès</li>
+      </ul>
+    </div>
+    <div style={{ marginTop: '15px' }}>
+      <span style={{
+        padding: '5px 10px',
+        color: '#512da8',
+        borderRadius: '4px',
+        fontSize: '14px',
+        cursor: 'pointer',
+      }} onClick={() => linkTo('Composants/Formulaires/Selects/SyAutocomplete')()}>
+        Voir la documentation →
+      </span>
+    </div>
+  </div>
+
+  <div
+    style={{
+      flex: '1 1 300px',
+      border: '1px solid #e0e0e0',
+      borderRadius: '8px',
+      padding: '20px',
+      boxShadow: '0 2px 5px rgba(0,0,0,0.05)',
+      transition: 'all 0.2s ease',
+      backgroundColor: '#fff'
+    }}
+  >
+    <img style={{ width: '40%', height: 'auto', marginLeft: '35%' }} src="/components/sy-btn-select.svg" alt="SySelect" />
+    <h3 style={{ marginTop: 0, marginBottom: '10px', color: '#00796b' }}>SyBtnSelect</h3>
+    <div>Un composant de sélection sous forme de bouton, idéal pour les menus utilisateur ou les sélecteurs compacts.</div>
+    <div style={{ marginTop: '10px', color: '#666' }}>
+      <strong>Idéal pour :</strong>
+      <ul style={{ marginLeft: '20px', marginTop: '5px' }}>
+        <li>Menus utilisateur</li>
+        <li>Interfaces compactes</li>
+        <li>Affichage d'informations principales et secondaires</li>
+      </ul>
+    </div>
+    <div style={{ marginTop: '15px' }}>
+      <span style={{ 
+        padding: '5px 10px', 
+        color: '#00796b', 
+        borderRadius: '4px', 
+        fontSize: '14px', 
+        cursor: 'pointer',
+      }} onClick={() => linkTo('Composants/Formulaires/Selects/SyBtnSelect')()}>
+        Voir la documentation →
+      </span>
+    </div>
+  </div>
 </div>
 
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
@@ -125,6 +197,7 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
     <thead>
       <tr style={{ backgroundColor: '#f5f5f5' }}>
         <th style={{ padding: '12px', textAlign: 'left', borderBottom: '2px solid #e0e0e0' }}>Fonctionnalité</th>
+        <th style={{ padding: '12px', textAlign: 'center', borderBottom: '2px solid #e0e0e0' }}>SyAutocomplete</th>
         <th style={{ padding: '12px', textAlign: 'center', borderBottom: '2px solid #e0e0e0' }}>SySelect</th>
         <th style={{ padding: '12px', textAlign: 'center', borderBottom: '2px solid #e0e0e0' }}>SelectBtnField</th>
       </tr>
@@ -134,45 +207,65 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
         <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Sélection multiple</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
       </tr>
       <tr>
         <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Affichage de puces (chips)</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
       </tr>
       <tr>
         <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Validation intégrée</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
       </tr>
       <tr>
         <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Apparence de bouton</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+      </tr>
+      <tr>
+        <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Mode icône uniquement</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
       </tr>
       <tr>
         <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Effaçable (clearable)</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
       </tr>
       <tr>
         <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Densité personnalisable</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
       </tr>
       <tr>
         <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Retourne l'objet complet</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
       </tr>
       <tr>
         <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Disposition en ligne/colonne</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
       </tr>
       <tr>
         <td style={{ padding: '10px', borderBottom: '1px solid #e0e0e0' }}>Options uniques</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
+        <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>❌</td>
         <td style={{ padding: '10px', textAlign: 'center', borderBottom: '1px solid #e0e0e0' }}>✅</td>
       </tr>
     </tbody>
@@ -186,6 +279,16 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
 - Vous souhaitez afficher les sélections multiples sous forme de puces (chips)
 - Vous avez besoin de personnaliser la densité d'affichage
 
+### Utilisez SyAutocomplete quand :
+- Vous voulez filtrer la liste au fil de la saisie
+- Vous manipulez des listes longues nécessitant une recherche côté client
+- Vous avez besoin d'un champ unique ou multiple avec puces et gestion des états (erreur / avertissement / succès)
+
+### Utilisez SyBtnSelect quand :
+- Vous créez un menu utilisateur ou un sélecteur compact
+- Vous souhaitez afficher des informations principales et secondaires
+- Vous avez besoin d'un mode icône uniquement pour les interfaces très compactes
+
 ### Utilisez SelectBtnField quand :
 - Vous avez besoin d'options visuellement distinctes sous forme de boutons
 - Vous souhaitez permettre la sélection multiple ou unique d'options
@@ -204,6 +307,14 @@ Notre système propose quatre modes de sélection, chacun adapté à des besoins
   required
 />
 
+// SyAutocomplete - Recherche avec suggestions
+<SyAutocomplete
+  v-model="autocompleteValue"
+  :items="options"
+  label="Rechercher une option"
+  clearable
+/>
+
 // SySelect - Sélection multiple avec puces
 <SySelect
   v-model="selectedOptions"

package/src/components/Customs/Selects/SyAutocomplete/SyAutocomplete.mdx

@@ -0,0 +1,52 @@
+import {Controls, Canvas, Meta, Source, Story} from '@storybook/blocks';
+import '../../../../stories/styles/shared.css';
+
+import SyAutocomplete from './SyAutocomplete.vue';
+import * as SyAutocompleteStories from './SyAutocomplete.stories';
+
+<Meta title="Composants/Formulaires/Selects/SyAutocomplete" component={SyAutocomplete}/>
+
+<div className="header">
+  <h1>SyAutocomplete</h1>
+  <p>Le composant `SyAutocomplete` permet à l'utilisateur de rechercher et sélectionner une valeur dans une liste d'options.</p>
+</div>
+
+<Canvas of={SyAutocompleteStories.Default}  />
+
+## API
+
+<Controls of={SyAutocompleteStories.Default} />
+
+## Exemple d'utilisation avec Vue
+
+<Source dark code={`
+<script setup lang="ts">
+    import { ref } from 'vue'
+    import { SyAutocomplete } from '@cnamts/synapse'
+
+    const items = [
+      {
+        "text": "Adrien",
+        "value": "Adrien"
+      },
+      {
+        "text": "Axel",
+        "value": "Axel"
+      },
+      {
+        "text": "Baptiste",
+        "value": "Baptiste"
+      }
+    ];
+
+    const selected = ref('')
+</script>
+
+<template>
+    <SyAutocomplete
+        v-model="selected"
+        :items="items"
+        label="Rechercher un prénom"
+    />
+</template>
+`} />