@cnamts/synapse 1.0.16 → 1.0.18

package/src/components/Customs/Selects/SySelect/Accessibilite.stories.ts

@@ -1,11 +1,9 @@
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, VTable } from 'vuetify/components'
+import { VIcon, VTable } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
-import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
-import { mdiCheckboxMarkedCircle, mdiLink, mdiEye, mdiKeyboard } from '@mdi/js'
+import { mdiCheckboxMarkedCircle, mdiKeyboard } from '@mdi/js'
 
 const checkIcon = mdiCheckboxMarkedCircle
-const iconEye = mdiEye
-const linkICon = mdiLink
+
 const keyboardIcon = mdiKeyboard
 
 export default {
@@ -72,174 +70,6 @@ export const ComboboxKeyboardNavigation: StoryObj = {
 	},
 }
 
-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>
-                                </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 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-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>
-                                </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>
-              </div>
-            `,
-		}
-	},
-	tags: ['!dev'],
-}
-
 export const Legende: StoryObj = {
 	args: {
 		icon: checkIcon,
@@ -251,26 +81,8 @@ export const Legende: StoryObj = {
 				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 class="mt-4">
 					  <p>Rapport d’audit manuel : <a href="/audits/SySelect.xlsx" style="color:#0C41BD;">Voir le
 						  rapport</a></p>
@@ -282,7 +94,6 @@ export const Legende: StoryObj = {
 						  style="color:#0C41BD;"
 					  >issue #931</a>)</p>
 				  </div>
-			  </div>
             `,
 		}
 	},

package/src/components/Customs/Selects/SySelect/SySelect.stories.ts

@@ -54,6 +54,15 @@ const meta: Meta<typeof SySelect> = {
 			control: 'boolean',
 			description: 'Masque les messages d\'erreur',
 		},
+		variantStyle: {
+			control: 'select',
+			options: ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled'],
+		},
+		color: {
+			control: 'select',
+			options: ['primary', 'secondary', 'success', 'error', 'warning'],
+			description: 'Couleur du champ',
+		},
 		density: {
 			control: 'select',
 			options: ['default', 'comfortable', 'compact'],
@@ -67,6 +76,36 @@ const meta: Meta<typeof SySelect> = {
 			control: 'text',
 			description: 'Texte d\'aide à la saisie',
 		},
+		prependTooltip: {
+			description: 'Si le texte du prepend tooltip est renseigné alors l\'icône du  tooltip s\'affiche',
+			control: 'text',
+		},
+		appendTooltip: {
+			description: 'Si le texte du append tooltip est renseigné alors l\'icône du  tooltip s\'affiche',
+			control: 'text',
+		},
+		tooltipLocation: {
+			description: 'Position des tooltips',
+			control: 'select',
+			options: ['top', 'bottom', 'start', 'end'],
+			default: 'top',
+		},
+		append: {
+			description: 'Slot pour ajouter du contenu à droite du champ',
+			control: false,
+			table: {
+				type: { summary: 'VNode' },
+				category: 'slots',
+			},
+		},
+		prepend: {
+			description: 'Slot pour ajouter du contenu à gauche du champ',
+			control: false,
+			table: {
+				type: { summary: 'VNode' },
+				category: 'slots',
+			},
+		},
 	},
 } as Meta<typeof SySelect>
 
@@ -75,6 +114,9 @@ export default meta
 type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -145,6 +187,9 @@ export const Default: Story = {
 
 export const HelpText: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -219,6 +264,9 @@ export const HelpText: Story = {
 
 export const Required: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -277,6 +325,9 @@ export const Required: Story = {
 
 export const RequiredWithAsterisk: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		docs: {
 			description: {
 				story: 'Version du champ de sélection requis avec un astérisque visuel.',
@@ -340,8 +391,223 @@ const items = [
 	},
 }
 
+export const SlotPrepend: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SySelect
+						v-model="value"
+						:items="items"
+						prepend-icon="success"
+					>
+					</SySelect>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SySelect } from '@cnamts/synapse'
+
+					const value = ref(null)
+					const items = [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					]
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		'items': [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+		'prependIcon': 'success',
+		'disableClickButton': false,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SySelect },
+			setup() {
+				const value = ref(null)
+				const onPrependIconClick = fn()
+				return { args, value, onPrependIconClick }
+			},
+			template: `
+				<div class="pa-4">
+					<SySelect
+						v-bind="args"
+						v-model="value"
+						@prepend-icon-click="onPrependIconClick"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotAppend: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SySelect
+						v-model="value"
+						:items="items"
+						append-icon="success"
+					>
+					</SySelect>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { SySelect } from '@cnamts/synapse'
+
+					const value = ref(null)
+					const items = [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					]
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		'items': [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+		'appendIcon': 'success',
+		'disableClickButton': false,
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SySelect },
+			setup() {
+				const value = ref(null)
+				const onAppendIconClick = fn()
+				return { args, value, onAppendIconClick }
+			},
+			template: `
+				<div class="pa-4">
+					<SySelect
+						v-bind="args"
+						v-model="value"
+						@append-icon-click="onAppendIconClick"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const WithTooltips: Story = {
+	args: {
+		...Default.args,
+		'items': [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		],
+		'label': 'Champ avec tooltips',
+		'prependTooltip': 'Information à gauche du champ',
+		'appendTooltip': 'Information à droite du champ',
+		'tooltipLocation': 'top',
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { SySelect },
+			setup() {
+				const value = ref(null)
+				return { args, value }
+			},
+			template: `
+				<div class="pa-4">
+					<p class="mb-4">
+						Des icônes d'information avec tooltips sont affichées de chaque côté du champ.
+						Survolez-les pour voir les messages d'aide qui apparaissent en haut grâce à la prop tooltipLocation="top".
+					</p>
+					<SySelect
+						v-bind="args"
+						v-model="value"
+					/>
+				</div>
+			`,
+		}
+	},
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		docs: {
+			description: {
+				story: 'Exemple de champ avec des tooltips d\'information. Les icônes d\'information apparaissent automatiquement lorsque les props prependTooltip et/ou appendTooltip sont renseignées. La position des tooltips peut être contrôlée avec la prop tooltipLocation.',
+			},
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<SySelect
+		v-model="value"
+		:items="items"
+		label="Champ avec tooltips"
+		prependTooltip="Information à gauche du champ"
+		appendTooltip="Information à droite du champ"
+		tooltipLocation="top"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { SySelect } from '@cnamts/synapse'
+
+	const value = ref(null)
+	const items = [
+		{ text: 'Option 1', value: '1' },
+		{ text: 'Option 2', value: '2' },
+	]
+</script>
+				`,
+			},
+		],
+	},
+}
+
 export const MultipleSelection: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		docs: {
 			description: {
 				story: 'Exemple de sélection multiple avec SySelect. Les options dans le menu déroulant sont affichées avec des cases à cocher pour faciliter la sélection multiple.',
@@ -432,6 +698,9 @@ const options = [
 
 export const ChipsDisplay: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		docs: {
 			description: {
 				story: 'Exemple de sélection multiple avec affichage en chips. Les options sélectionnées sont affichées sous forme de chips dans le champ, et les options dans le menu déroulant sont affichées avec des cases à cocher.',
@@ -506,6 +775,9 @@ const options = [
 
 export const withCustomError: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -581,6 +853,9 @@ export const withCustomError: Story = {
 
 export const withCustomKey: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -659,6 +934,9 @@ export const Info: Story = {
 
 export const FormValidation: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		docs: {
 			description: {
 				story: 'Exemple d\'utilisation du SySelect dans un formulaire.',