@cnamts/synapse 1.1.0 → 1.1.1

package/src/components/FilterSideBar/FilterSideBar.stories.ts

@@ -89,6 +89,37 @@ const meta = {
 				},
 			},
 		},
+		'title': {
+			description: 'Titre affiché au-dessus des filtres du panneau',
+			control: {
+				type: 'text',
+			},
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'undefined',
+				},
+			},
+		},
+		'headingLevel': {
+			description: 'Niveau sémantique du titre (balise h1 à h6), pour l’intégration dans la hiérarchie de titres de la page',
+			control: {
+				type: 'select',
+			},
+			options: [1, 2, 3, 4, 5, 6],
+			table: {
+				category: 'props',
+				type: {
+					summary: '1 | 2 | 3 | 4 | 5 | 6',
+				},
+				defaultValue: {
+					summary: '2',
+				},
+			},
+		},
 		'onUpdate:modelValue': {
 			description: 'Événement déclenché lors de la mise à jour des filtres',
 			control: {
@@ -254,7 +285,6 @@ export const Default: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
-						label="Profession"
 						v-bind="props"
 						label="Profession"
 						:items="professionList"
@@ -836,6 +866,108 @@ const professionList = [
 	},
 }
 
+export const Title: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+	<FilterSideBar
+		v-model="filters"
+		title="Filtres du tableau personnalisé"
+	>
+		<template #name="{ props }">
+			<SyTextField
+				v-bind="props"
+				label="Nom"
+				variant="outlined"
+				hide-details
+			/>
+		</template>
+
+		<template #folder="{ props }">
+			<SyTextField
+				v-bind="props"
+				label="Type de dossier"
+				variant="outlined"
+				hide-details
+			/>
+		</template>
+	</FilterSideBar>
+</template>
+			`,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FilterSideBar, SyTextField } from '@cnamts/synapse'
+
+const filters = ref([
+	{
+		name: 'name',
+		title: 'Identité',
+	},
+	{
+		name: 'folder',
+		title: 'Type de dossier',
+	},
+])
+</script>
+			`,
+			},
+		],
+	},
+	args: {
+		'onUpdate:modelValue': fn(),
+		'title': 'Filtres du tableau personnalisé',
+	},
+	decorators: Default.decorators,
+	render: args => ({
+		components: { FilterSideBar, SyTextField },
+		setup() {
+			const filters = ref([
+				{
+					name: 'name',
+					title: 'Identité',
+				},
+				{
+					name: 'folder',
+					title: 'Type de dossier',
+				},
+			])
+
+			return { args, filters }
+		},
+		template: `
+			<FilterSideBar
+				v-bind="args"
+				v-model="filters"
+			>
+				<template #name="{ props }">
+					<SyTextField
+						v-bind="props"
+						label="Nom"
+						variant="outlined"
+						hide-details
+					/>
+				</template>
+
+				<template #folder="{ props }">
+					<SyTextField
+						v-bind="props"
+						label="Type de dossier"
+						variant="outlined"
+						hide-details
+					/>
+				</template>
+			</FilterSideBar>
+		`,
+	}),
+}
+
 export const ZIndex: Story = {
 	args: {
 		'onUpdate:modelValue': fn(),

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -2,30 +2,38 @@
 	import type { FilterProp } from '@/composables/useFilterable/useFilterable'
 	import useFilterable from '@/composables/useFilterable/useFilterable'
 	import { mdiFilterVariant } from '@mdi/js'
-	import { computed, onMounted, ref, toRef, watch } from 'vue'
+	import { computed, onMounted, ref, toRef, useId, watch } from 'vue'
 	import type { VBtn } from 'vuetify/components/VBtn'
 	import type { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer'
 	import ChipList from '../ChipList/ChipList.vue'
 	import SyIcon from '../Customs/SyIcon/SyIcon.vue'
 	import { locales as defaultLocales } from './locales'
 	import vLockFocus from '@/directives/lockFocus'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: FilterProp
 		modale?: boolean
 		locales?: typeof defaultLocales
 		zIndex?: number
+		title?: string
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		modelValue: () => [],
 		modale: false,
 		locales: () => defaultLocales,
 		zIndex: undefined,
+		title: undefined,
+		headingLevel: 2,
 	})
 
 	const emits = defineEmits<{
 		(e: 'update:modelValue', value: FilterProp): void
 	}>()
 
+	// Id du titre pour lier le nom accessible du panneau au titre visible (aria-labelledby)
+	const titleId = useId()
+
 	const {
 		filters,
 		removeChip,
@@ -133,7 +141,8 @@
 				:aria-hidden="drawer ? undefined : 'true'"
 				:inert="drawer ? undefined : 'true'"
 				:aria-modal="props.modale"
-				:aria-label="locales.modaleLabel"
+				:aria-label="props.title ? undefined : locales.modaleLabel"
+				:aria-labelledby="props.title ? titleId : undefined"
 				:style="zIndexStyle"
 				@keydown.escape.prevent="drawer = false"
 			>
@@ -141,6 +150,14 @@
 					v-lock-focus="$props.modale"
 					@submit.prevent="applyFilters"
 				>
+					<SyHeading
+						v-if="props.title"
+						:id="titleId"
+						class="sy-filters-side-bar__title px-4 pt-4 pb-2 text-h6 font-weight-bold"
+						:level="props.headingLevel"
+					>
+						{{ props.title }}
+					</SyHeading>
 					<VExpansionPanels
 						variant="accordion"
 						tag="ul"

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

@@ -370,4 +370,59 @@ describe('FilterSideBar', () => {
 		const drawer = wrapper.find('.v-navigation-drawer')
 		expect(drawer.attributes('style') ?? '').not.toContain('z-index: 2401')
 	})
+
+	const mountWithTitle = (title?: string, headingLevel?: 1 | 2 | 3 | 4 | 5 | 6) =>
+		mount(
+			defineComponent({
+				components: { VApp, FiltersSideBar: FilterSideBar },
+				data: () => ({ title, headingLevel }),
+				template: `
+					<VApp>
+						<FiltersSideBar :model-value="[]" :title="title" :heading-level="headingLevel" />
+					</VApp>
+				`,
+			}),
+			{ global: { stubs: { Teleport: true } } },
+		)
+
+	it('displays the title heading above the filters when title is provided', () => {
+		const wrapper = mountWithTitle('Filtres du tableau')
+
+		const heading = wrapper.find('.sy-filters-side-bar__title')
+		expect(heading.exists()).toBe(true)
+		expect(heading.text()).toBe('Filtres du tableau')
+		// Niveau sémantique par défaut : h2
+		expect(heading.element.tagName).toBe('H2')
+	})
+
+	it('does not render the title heading when no title is provided', () => {
+		const wrapper = mountWithTitle()
+		expect(wrapper.find('.sy-filters-side-bar__title').exists()).toBe(false)
+	})
+
+	it('renders the title with the requested heading level', () => {
+		const wrapper = mountWithTitle('Filtres', 3)
+		expect(wrapper.find('.sy-filters-side-bar__title').element.tagName).toBe('H3')
+	})
+
+	it('links the drawer accessible name to the title via aria-labelledby', () => {
+		const wrapper = mountWithTitle('Filtres du tableau')
+
+		const heading = wrapper.find('.sy-filters-side-bar__title')
+		const drawer = wrapper.find('.v-navigation-drawer')
+		const titleId = heading.attributes('id')
+
+		expect(titleId).toBeTruthy()
+		expect(drawer.attributes('aria-labelledby')).toBe(titleId)
+		// aria-label retiré au profit de aria-labelledby quand un titre est fourni
+		expect(drawer.attributes('aria-label')).toBeUndefined()
+	})
+
+	it('falls back to the default aria-label when no title is provided', () => {
+		const wrapper = mountWithTitle()
+		const drawer = wrapper.find('.v-navigation-drawer')
+
+		expect(drawer.attributes('aria-label')).toBe('Filtres')
+		expect(drawer.attributes('aria-labelledby')).toBeUndefined()
+	})
 })

package/src/components/FooterBar/FooterBar.mdx

@@ -64,7 +64,6 @@ import * as FooterBarStories from './FooterBar.stories.ts';
 		},
 	]
 	const { smAndDown } = useDisplay()
-import '../../stories/styles/shared.css';
 	const isMobile = computed(() => smAndDown.value)
 </script>
 

package/src/components/FranceConnectBtn/FranceConnectBtn.mdx

@@ -21,7 +21,6 @@ import * as FranceConnectBtnStories from './FranceConnectBtn.stories';
 <script setup lang="ts">
 	import { FranceConnectBtn } from '@cnamts/synapse'
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
 	<FranceConnectBtn href="/" />

package/src/components/HeaderBar/HeaderBar.mdx

@@ -254,7 +254,6 @@ Il est nécessaire de faire attention à la place que prendront les éléments e
 	<script setup lang="ts">
 		import { mdiMagnify, mdiAccountCircleOutline } from '@mdi/js'
 	</script>
-import '../../stories/styles/shared.css';
 
 	<template>
 		<HeaderBar>

package/src/components/HeaderLoading/HeaderLoading.mdx

@@ -20,7 +20,6 @@ import * as HeaderLoading from './HeaderLoading.stories';
 <script setup lang="ts">
 	import { HeaderLoading } from '@cnamts/synapse'
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
 	<div class="pa-4">

package/src/components/LangBtn/LangBtn.mdx

@@ -22,7 +22,6 @@ import * as LangBtnStories from './LangBtn.stories';
  import { ref } from 'vue'
 
  const value = ref('fr')
-import '../../stories/styles/shared.css';
  const items = ['fr', 'en', 'co']
  const ariaLabel = 'Choix de la langue'
 </script>

package/src/components/Logo/Logo.mdx

@@ -21,7 +21,7 @@ import Logo from './Logo.vue';
 <script setup lang='ts'>
     import { Logo } from '@cnamts/synapse'
 </script>
-import '../../stories/styles/shared.css';
+
 <template>
   <Logo :hideSignature="false" :hideOrganism="false" :risquePro="false" ariaLabel="" :avatar="false" :dark="false" />
 </template>

package/src/components/LunarCalendar/LunarCalendar.mdx

@@ -17,17 +17,14 @@ import * as LunarCalendarStories from './LunarCalendar.stories';
 
 # Exemples d'utilisation
 
-## Avec contraintes d'années
+## Champ requis
 
-<Canvas of={LunarCalendarStories.WithYearConstraints} />
+<Canvas of={LunarCalendarStories.Required} />
 
-Limitation de la saisie entre deux années spécifiques.
+## Avec bouton de suppression
 
-## Avec année minimale seulement
+<Canvas of={LunarCalendarStories.WithClearable} />
 
-<Canvas of={LunarCalendarStories.WithMinYearOnly} />
-
-## Avec année maximale seulement
-
-<Canvas of={LunarCalendarStories.WithMaxYearOnly} />
+## Avec texte d'aide
 
+<Canvas of={LunarCalendarStories.HelpText} />