@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/DialogBox/DialogBox.stories.ts

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/vue3'
 import { VBtn } from 'vuetify/components'
 import DialogBox from './DialogBox.vue'
 import { fn } from '@storybook/test'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 const meta: Meta<typeof DialogBox> = {
 	title: 'Composants/Feedback/DialogBox',
@@ -199,6 +199,18 @@ const meta: Meta<typeof DialogBox> = {
 				category: 'events',
 			},
 		},
+		'scrollable': {
+			control: 'boolean',
+			description: 'Rendre le contenu de la boîte de dialogue scrollable',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: {
+					summary: 'false',
+				},
+			},
+		},
 	},
 } satisfies Meta<typeof DialogBox>
 
@@ -609,9 +621,6 @@ export const TitleSlot: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -839,6 +848,101 @@ export const VuetifyOptions: Story = {
 	},
 }
 
+export const Scrollable: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+			<template>
+				<VBtn
+					color="primary"
+					@click="dialogOpen = !dialogOpen"
+				>
+					Ouvrir la DialogBox scrollable
+				</VBtn>
+
+				<DialogBox
+					v-model="dialogOpen"
+					title="DialogBox scrollable"
+					scrollable
+					width="600px"
+					@confirm="dialogOpen = false"
+					@cancel="dialogOpen = false"
+				>
+					<p
+						v-for="index in 20"
+						:key="index"
+						class="mb-4"
+					>
+						Ligne de contenu numéro {{ index }}.
+						Ce contenu permet de vérifier que seule la zone centrale
+						de la boîte de dialogue est scrollable, tandis que les boutons
+						d’action restent visibles en bas.
+					</p>
+				</DialogBox>
+			</template>
+			`,
+			},
+			{
+				name: 'Script',
+				code: `
+			<script setup lang="ts">
+				import { DialogBox } from '@cnamts/synapse'
+				import { ref } from 'vue'
+
+				const dialogOpen = ref(false)
+			</script>
+			`,
+			},
+		],
+	},
+	args: {
+		'headingLevel': 2,
+		'modelValue': false,
+		'title': 'DialogBox scrollable',
+		'scrollable': true,
+		'width': '600px',
+		'onCancel': fn(),
+		'onConfirm': fn(),
+		'onUpdate:modelValue': fn(),
+	},
+	render: args => ({
+		components: { DialogBox, VBtn },
+		setup() {
+			return { args }
+		},
+		template: `
+			<div class="pa-4">
+				<VBtn
+					color="primary"
+					@click="args.modelValue = !args.modelValue"
+				>
+					Ouvrir la DialogBox scrollable
+				</VBtn>
+
+				<DialogBox
+					v-bind="args"
+					@update:modelValue="args.modelValue = $event"
+					@confirm="args.modelValue = false"
+					@cancel="args.modelValue = false"
+				>
+					<p
+						v-for="index in 20"
+						:key="index"
+						class="mb-4"
+					>
+						Ligne de contenu numéro {{ index }}.
+						Ce contenu permet de vérifier que seule la zone centrale
+						de la boîte de dialogue est scrollable, tandis que les boutons
+						d’action restent visibles en bas.
+					</p>
+				</DialogBox>
+			</div>
+		`,
+	}),
+}
+
 export const Draggable: Story = {
 	args: {
 		'headingLevel': 2,
@@ -910,3 +1014,294 @@ export const Draggable: Story = {
 		],
 	},
 }
+
+export const Tutoriel: Story = {
+	args: {
+		'headingLevel': 2,
+		'modelValue': false,
+		'title': 'Tutoriel',
+		'hideActions': true,
+		'width': '800px',
+		'onCancel': fn(),
+		'onConfirm': fn(),
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { DialogBox, VBtn },
+			setup() {
+				const dialogOpen = ref(false)
+				const currentStep = ref(0)
+				const steps = [
+					{
+						title: 'Étape 1 : Bienvenue',
+						content: 'Dans cet espace, vous allez pouvoir découvrir les fonctionnalités principales de l\'application. Suivez ce tutoriel pour apprendre à utiliser tous les outils disponibles.',
+						img: 'https://picsum.photos/400/300?random=1',
+					},
+					{
+						title: 'Étape 2 : Navigation',
+						content: 'Utilisez le menu de navigation pour accéder aux différentes sections. Vous pouvez également utiliser les raccourcis clavier pour une navigation plus rapide.',
+						img: 'https://picsum.photos/400/300?random=2',
+					},
+					{
+						title: 'Étape 3 : Terminé',
+						content: 'Vous êtes maintenant prêt à utiliser l\'application ! N\'hésitez pas à consulter la documentation pour plus d\'informations.',
+						img: 'https://picsum.photos/400/300?random=3',
+					},
+				]
+
+				const handleNextOrFinish = () => {
+					if (currentStep.value < steps.length - 1) {
+						currentStep.value++
+					}
+					else {
+						args.onConfirm?.()
+						closeDialog()
+					}
+				}
+
+				const closeDialog = () => {
+					dialogOpen.value = false
+					setTimeout(() => {
+						currentStep.value = 0
+					}, 300)
+				}
+
+				const skipTutorial = () => {
+					args.onCancel?.()
+					closeDialog()
+				}
+
+				const handleUpdateModelValue = (value: boolean) => {
+					dialogOpen.value = value
+					args['onUpdate:modelValue']?.(value)
+				}
+
+				const rest = computed(() => {
+					// eslint-disable-next-line @typescript-eslint/no-unused-vars
+					const { modelValue, 'onUpdate:modelValue': _, 'onCancel': __, 'onConfirm': ___, ...rest } = args
+					return rest
+				})
+
+				return { args, rest, dialogOpen, currentStep, steps, handleNextOrFinish, skipTutorial, handleUpdateModelValue }
+			},
+			template: `
+                <div class="pa-4">
+                    <VBtn
+                        @click="dialogOpen = !dialogOpen"
+                        color="primary"
+                    >Ouvrir le tutoriel</VBtn>
+                    
+                    <DialogBox
+                        v-bind="rest"
+                        v-model="dialogOpen"
+                        @update:modelValue="handleUpdateModelValue"
+                    >
+                        <div class="d-flex flex-column">
+                            <!-- Image -->
+                            <img
+                                :src="steps[currentStep].img"
+                                :alt="steps[currentStep].title"
+                                class="mb-4 mx-auto"
+                                style="max-width: 100%; height: auto; max-height: 300px;"
+                            >
+
+                            <!-- Title -->
+                            <h3 class="text-h5 font-weight-bold mb-4">
+                                {{ steps[currentStep].title }}
+                            </h3>
+
+                            <!-- Content -->
+                            <p class="mb-6">
+                                {{ steps[currentStep].content }}
+                            </p>
+
+                            <!-- Actions -->
+                            <div
+                                class="align-center mt-auto"
+                                style="display: grid; grid-template-columns: 1fr auto 1fr;"
+                            >
+                                <VBtn
+                                    variant="text"
+                                    color="primary"
+                                    style="justify-self: start;"
+                                    @click="skipTutorial"
+                                >
+                                    Passer
+                                </VBtn>
+
+                                <!-- Progress dots -->
+                                <div class="d-flex align-center justify-center">
+                                    <span
+                                        v-for="(step, index) in steps"
+                                        :key="index"
+                                        class="mx-1"
+                                        role="button"
+                                        :aria-label="'Aller à l\\'étape ' + (index + 1)"
+                                        :aria-current="currentStep === index"
+                                        @click="currentStep = index"
+                                        :style="{
+                                            width: '14px',
+                                            height: '14px',
+                                            borderRadius: '50%',
+                                            border: '2px solid rgb(var(--v-theme-primary))',
+                                            backgroundColor: currentStep === index ? 'rgb(var(--v-theme-primary))' : 'rgb(var(--v-theme-surface))',
+                                            cursor: 'pointer'
+                                        }"
+                                    />
+                                    <span class="ml-2">{{ currentStep + 1 }}/{{ steps.length }}</span>
+                                </div>
+
+                                <VBtn
+                                    color="primary"
+                                    style="justify-self: end;"
+                                    @click="handleNextOrFinish"
+                                >
+                                    {{ currentStep < steps.length - 1 ? 'Suivant' : 'Commencer' }}
+                                </VBtn>
+                            </div>
+                        </div>
+                    </DialogBox>
+                </div>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <VBtn
+        color="primary"
+        @click="dialogOpen = !dialogOpen"
+    >
+        Ouvrir le tutoriel
+    </VBtn>
+    
+    <DialogBox
+        v-model="dialogOpen"
+        title="Tutoriel"
+        hide-actions
+        width="800px"
+    >
+        <div class="d-flex flex-column">
+            <!-- Image -->
+            <img
+                :src="steps[currentStep].img"
+                :alt="steps[currentStep].title"
+                class="mb-4 mx-auto"
+                style="max-width: 100%; height: auto; max-height: 300px;"
+            >
+
+            <!-- Title -->
+            <h3 class="text-h5 font-weight-bold mb-4">
+                {{ steps[currentStep].title }}
+            </h3>
+
+            <!-- Content -->
+            <p class="mb-6">
+                {{ steps[currentStep].content }}
+            </p>
+
+            <!-- Actions -->
+            <div
+                class="align-center mt-auto"
+                style="display: grid; grid-template-columns: 1fr auto 1fr;"
+            >
+                <VBtn
+                    variant="text"
+                    color="primary"
+                    style="justify-self: start;"
+                    @click="skipTutorial"
+                >
+                    Passer
+                </VBtn>
+
+                <!-- Progress dots -->
+                <div class="d-flex align-center justify-center">
+                    <span
+                        v-for="(step, index) in steps"
+                        :key="index"
+                        class="mx-1"
+                        role="button"
+                        :aria-label="'Aller à l\\'étape ' + (index + 1)"
+                        :aria-current="currentStep === index"
+                        @click="currentStep = index"
+                        :style="{
+                            width: '14px',
+                            height: '14px',
+                            borderRadius: '50%',
+                            border: '2px solid rgb(var(--v-theme-primary))',
+                            backgroundColor: currentStep === index ? 'rgb(var(--v-theme-primary))' : 'rgb(var(--v-theme-surface))',
+                            cursor: 'pointer'
+                        }"
+                    />
+                    <span class="ml-2">{{ currentStep + 1 }}/{{ steps.length }}</span>
+                </div>
+
+                <VBtn
+                    color="primary"
+                    style="justify-self: end;"
+                    @click="handleNextOrFinish"
+                >
+                    {{ currentStep < steps.length - 1 ? 'Suivant' : 'Commencer' }}
+                </VBtn>
+            </div>
+        </div>
+    </DialogBox>
+</template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+    import { DialogBox } from '@cnamts/synapse'
+    import { VBtn } from 'vuetify/components'
+    import { ref, computed } from 'vue'
+
+    const dialogOpen = ref(false)
+    const currentStep = ref(0)
+    
+    const steps = [
+        {
+            title: 'Étape 1 : Bienvenue',
+            content: 'Dans cet espace, vous allez pouvoir découvrir les fonctionnalités principales de l\\'application. Suivez ce tutoriel pour apprendre à utiliser tous les outils disponibles.',
+            img: 'https://picsum.photos/400/300?random=1',
+        },
+        {
+            title: 'Étape 2 : Navigation',
+            content: 'Utilisez le menu de navigation pour accéder aux différentes sections. Vous pouvez également utiliser les raccourcis clavier pour une navigation plus rapide.',
+            img: 'https://picsum.photos/400/300?random=2',
+        },
+        {
+            title: 'Étape 3 : Terminé',
+            content: 'Vous êtes maintenant prêt à utiliser l\\'application ! N\\'hésitez pas à consulter la documentation pour plus d\\'informations.',
+            img: 'https://picsum.photos/400/300?random=3',
+        },
+    ]
+
+    const handleNextOrFinish = () => {
+        if (currentStep.value < steps.length - 1) {
+            currentStep.value++
+        }
+        else {
+            closeDialog()
+        }
+    }
+
+    const closeDialog = () => {
+        dialogOpen.value = false
+        setTimeout(() => {
+            currentStep.value = 0
+        }, 300)
+    }
+
+    const skipTutorial = () => {
+        closeDialog()
+    }
+</script>
+                `,
+			},
+		],
+	},
+}

package/src/components/DialogBox/DialogBox.vue

@@ -20,6 +20,7 @@
 		autofocusValidateBtn?: boolean
 		draggable?: boolean
 		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+		scrollable?: boolean
 	} & CustomizableOptions>(), {
 		title: undefined,
 		width: '800px',
@@ -29,6 +30,7 @@
 		persistent: false,
 		autofocusValidateBtn: false,
 		headingLevel: 2,
+		scrollable: false,
 	})
 
 	defineEmits(['cancel', 'confirm', 'update:modelValue'])
@@ -139,6 +141,7 @@
 			:class="{
 				'sy-dialog-box-draggable': props.draggable,
 				'sy-dialog-box-draggable--active': props.draggable && isGrabbing,
+				'sy-dialog-box--scrollable': props.scrollable,
 			}"
 			:aria-label="props.draggable ? locales.draggable : undefined"
 		>
@@ -187,6 +190,10 @@
 
 			<div
 				class="px-6"
+				:class="{ 'sy-dialog-box-content--scrollable': props.scrollable }"
+				:tabindex="props.scrollable ? 0 : undefined"
+				:role="props.scrollable ? 'region' : undefined"
+				:aria-label="props.scrollable ? (props.title || locales.scrollableContent) : undefined"
 				v-bind="options.cardText"
 			>
 				<slot />
@@ -250,6 +257,7 @@
 
 .sy-dialog-box-title {
 	line-height: normal;
+	flex-shrink: 0;
 }
 
 .v-btn--icon {
@@ -284,6 +292,7 @@ h2 {
 	flex-direction: column;
 	justify-content: stretch;
 	gap: 16px;
+	flex-shrink: 0;
 }
 
 .sy-dialog-box-draggable .sy-dialog-box-title {
@@ -301,6 +310,17 @@ h2 {
 	user-select: none;
 }
 
+.sy-dialog-box--scrollable {
+	display: flex;
+	flex-direction: column;
+	max-height: calc(100vh - 48px);
+}
+
+.sy-dialog-box-content--scrollable {
+	overflow-y: auto;
+	min-height: 0;
+}
+
 @media screen and (width >= 600px) {
 	.sy-dialog-box-actions-ctn {
 		flex-direction: row;

package/src/components/DialogBox/locales.ts

@@ -5,4 +5,5 @@ export const locales = {
 	draggable: 'Déplaçable',
 	dragInstruction: 'Déplacer la boîte de dialogue',
 	dragInstructionLabel: 'Déplacer la boîte de dialogue avec les flèches directionnelles',
+	scrollableContent: 'Contenu de la boîte de dialogue',
 }

package/src/components/DialogBox/tests/DialogBox.spec.ts

@@ -5,6 +5,7 @@ import { describe, expect, it } from 'vitest'
 import { defineComponent } from 'vue'
 import { VCard } from 'vuetify/components'
 import DialogBox from '../DialogBox.vue'
+import { locales } from '../locales'
 
 const defaultProps = {
 	modelValue: true,
@@ -642,4 +643,76 @@ describe('DialogBox', () => {
 
 		wrapper.unmount()
 	})
+
+	it('adds scrollable classes when scrollable prop is true', () => {
+		const wrapper = mount(DialogBox, {
+			props: {
+				...defaultProps,
+				scrollable: true,
+				headingLevel: 2,
+			},
+			attachTo: document.body,
+		})
+
+		const card = wrapper.getComponent(VCard)
+
+		expect(card.classes()).toContain('sy-dialog-box--scrollable')
+		expect(card.find('.sy-dialog-box-content--scrollable').exists()).toBe(true)
+
+		wrapper.unmount()
+	})
+
+	it('does not add scrollable classes when scrollable prop is false', () => {
+		const wrapper = mount(DialogBox, {
+			props: {
+				...defaultProps,
+				scrollable: false,
+				headingLevel: 2,
+			},
+			attachTo: document.body,
+		})
+
+		const card = wrapper.getComponent(VCard)
+
+		expect(card.classes()).not.toContain('sy-dialog-box--scrollable')
+		expect(card.find('.sy-dialog-box-content--scrollable').exists()).toBe(false)
+
+		wrapper.unmount()
+	})
+
+	it('exposes the scrollable content as a keyboard-focusable, named region', () => {
+		const wrapper = mount(DialogBox, {
+			props: {
+				...defaultProps,
+				scrollable: true,
+			},
+			attachTo: document.body,
+		})
+
+		const region = wrapper.getComponent(VCard).find('.sy-dialog-box-content--scrollable')
+		expect(region.attributes('role')).toBe('region')
+		expect(region.attributes('tabindex')).toBe('0')
+		// Nommée par le titre quand il est fourni
+		expect(region.attributes('aria-label')).toBe('Test title')
+
+		wrapper.unmount()
+	})
+
+	it('names the scrollable region with a default label when no title is provided', () => {
+		const wrapper = mount(DialogBox, {
+			props: {
+				...defaultProps,
+				title: undefined,
+				scrollable: true,
+			},
+			attachTo: document.body,
+		})
+
+		const region = wrapper.getComponent(VCard).find('.sy-dialog-box-content--scrollable')
+		// Une région doit toujours avoir un nom accessible (repli sur la locale)
+		expect(region.attributes('aria-label')).toBe(locales.scrollableContent)
+		expect(region.attributes('aria-label')).toBeTruthy()
+
+		wrapper.unmount()
+	})
 })

package/src/components/DialogBox/tests/DialogBox.visual.cy.ts

@@ -73,4 +73,28 @@ describe('DialogBox - Visual regression tests', () => {
 		waitForDialogTransitionEnd()
 		cy.matchImageSnapshot('dialog-box-custom-texts')
 	})
+
+	it('displays the scrollable dialog box', () => {
+		cy.mountWithVuetify(DialogBox, {
+			...dialogTransitionOptions,
+			props: {
+				'modelValue': true,
+				'title': 'Dialog scrollable',
+				'scrollable': true,
+				'onUpdate:modelValue': () => {},
+			},
+			slots: {
+				default: () => h(
+					'div',
+					Array.from({ length: 20 }, (_, index) =>
+						h('p', { class: 'mb-4' }, `Ligne de contenu numéro ${index + 1}`),
+					),
+				),
+			},
+		})
+
+		cy.get('.v-dialog').should('be.visible')
+		waitForDialogTransitionEnd()
+		cy.matchImageSnapshot('dialog-box-scrollable')
+	})
 })

package/src/components/ErrorPage/ErrorPage.mdx

@@ -1,5 +1,5 @@
 import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
-import '../../stories/styles/shared.css';
+
 import * as ErrorPageStories from "./ErrorPage.stories";
 
 <Meta of={ErrorPageStories} />

package/src/components/ExternalLinks/ExternalLinks.mdx

@@ -65,7 +65,6 @@ Vous pouvez utiliser le slot `link-icon` pour remplacer l'icône dans les liens.
 
 			const arrowIcon = mdiArrowTopRight
 		</script>
-import '../../stories/styles/shared.css';
 
 		<template>
 			<ExternalLinks

package/src/components/FileList/FileList.mdx

@@ -76,7 +76,6 @@ Il est possible de personnaliser les icônes de fichier en utilisant le slot dyn
 					state: 'initial',
 				},
 			])
-import '../../stories/styles/shared.css';
 		</script>
 
 		<FileList

package/src/components/FilterInline/FilterInline.mdx

@@ -92,7 +92,6 @@ const filters = ref([
 		title: 'Profession',
 	},
 ])
-import '../../stories/styles/shared.css';
 
 const folderTypes = [
 	{

package/src/components/FilterSideBar/FilterSideBar.mdx

@@ -93,7 +93,6 @@ const filters = ref([
 		title: 'Profession',
 	},
 ])
-import '../../stories/styles/shared.css';
 
 const folderTypes = [
 	{
@@ -237,6 +236,14 @@ const professionList = [
 	}}
 />
 
+## Titre du panneau
+
+Vous pouvez afficher un titre au-dessus des filtres via la prop `title`. C'est utile pour distinguer plusieurs `FilterSideBar` présents sur une même page (par exemple associés à des tableaux différents).
+
+Le niveau sémantique du titre est configurable via la prop `headingLevel` (`1` à `6`, défaut `2`) afin de l'intégrer correctement dans la hiérarchie de titres de la page. Le titre sert également de **nom accessible** au panneau (`aria-labelledby`).
+
+<Canvas of={FilterSideBarStories.Title} />
+
 ## Gestion du z-index
 
 Le `FilterSideBar` utilise un `VNavigationDrawer` de Vuetify dont le z-index par défaut est **1000**.