@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/SubHeader/SubHeader.stories.ts

@@ -11,6 +11,10 @@ const meta = {
 		layout: 'fullscreen',
 	},
 	argTypes: {
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
 		'hideBackBtn': {
 			type: 'boolean',
 			control: { type: 'boolean' },
@@ -160,6 +164,7 @@ export const Default: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -222,6 +227,7 @@ export const BackgroundCustom: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -303,6 +309,7 @@ export const DataList: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -399,6 +406,7 @@ export const DataListFixedHeight: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -503,6 +511,7 @@ export const ActionBtn: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -718,6 +727,7 @@ export const Loading: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -803,6 +813,7 @@ export const SlotAdditionalInformations: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -898,6 +909,7 @@ export const SlotBackBtn: Story = {
 		'subTitleText': '1 69 08 75 125 456 75',
 		'subTitleAccessibleName': 'Numéro de sécurité sociale de Paul Dupont : 1 69 08 75 125 456 75',
 		'loading': false,
+		'headingLevel': 2,
 		'back-btn': `<template #back-btn>
 	<VBtn
 		color="white"
@@ -970,6 +982,7 @@ export const SlotBackBtnIcon: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -1037,6 +1050,7 @@ export const SlotTitle: Story = {
 		],
 	},
 	args: {
+		headingLevel: 2,
 		backBtnText: 'Retour',
 		hideBackBtn: false,
 		titleText: 'Paul Dupont',
@@ -1102,6 +1116,7 @@ export const SlotSubTitle: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',
@@ -1171,6 +1186,7 @@ export const SlotRightContent: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 2,
 		'backBtnText': 'Retour',
 		'hideBackBtn': false,
 		'titleText': 'Paul Dupont',

package/src/components/SubHeader/SubHeader.vue

@@ -13,6 +13,7 @@
 	import HeaderLoading from '../HeaderLoading/HeaderLoading.vue'
 	import type { DataListActionEvent, DataListGroupItems } from '../DataListGroup/types'
 	import { VThemeProvider } from 'vuetify/components'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const props = withDefaults(defineProps<CustomizableOptions & Widthable & {
 		hideBackBtn?: boolean
@@ -25,6 +26,7 @@
 		dataListGroupItems?: DataListGroupItems | undefined
 		loading?: boolean
 		renderFixedHeight?: boolean
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		hideBackBtn: false,
 		backBtnText: locales.backBtnText,
@@ -36,6 +38,7 @@
 		dataListGroupItems: undefined,
 		loading: false,
 		renderFixedHeight: false,
+		headingLevel: 1,
 	})
 
 	const options = useCustomizableOptions(config, props)
@@ -118,13 +121,14 @@
 								theme="dark"
 								height="2rem"
 							/>
-							<h2
+							<SyHeading
 								v-else-if="titleText"
 								class="text-h5 font-weight-bold"
 								:aria-label="titleAccessibleName"
+								:level="headingLevel"
 							>
 								{{ titleText }}
-							</h2>
+							</SyHeading>
 						</VFadeTransition>
 					</slot>
 
@@ -230,5 +234,4 @@
 		background-color: #e6e6e6 !important;
 	}
 }
-
 </style>

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

@@ -1,15 +1,36 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as SubHeaderStories from '../SubHeader.stories.ts';
 import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={SubHeaderStories} />
-
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-
+<AccessibilityGuideLayout
+	componentName="SubHeader"
+	iconSrc={AccessibilityIcon}
+>
 <div class="mt-2">
 <p>Rapport d’audit manuel : <a href="/audits/SubHeader.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/942" target="_blank" style={{color:'#0C41BD'}}>issue #942</a>)</p>
 	</div>
+<CriteriaSection>
+<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+  <ul>
+    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h4, défini dans l’implémentation du composant.</li>
+      <code>&lt;SubHeader :heading-level="4" /&gt; </code>
+    
+    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
+  </ul>
+</CriteriaCard>
+</CriteriaSection>
+
+
+
+</AccessibilityGuideLayout>

package/src/components/SyAlert/SyAlert.vue

@@ -119,6 +119,7 @@
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
+@use '@/assets/apTokens';
 @use 'sass:map';
 
 .sy-alert {
@@ -256,41 +257,41 @@
 	@include redesign(
 		'warning',
 		(
-			'background': tokens.$colors-background-warning,
-			'accent': tokens.$colors-border-warning,
-			'border': tokens.$colors-border-warning,
-			'icon':tokens.$colors-icon-warning,
-			'icon-bg': tokens.$colors-background-warning-subdued,
+			'background': var(--alert-warning-background),
+			'accent': var(--alert-warning-accent),
+			'border': var(--alert-warning-border),
+			'icon':var(--alert-warning-icon),
+			'icon-bg': var(--alert-warning-icon-bg),
 		)
 	);
 	@include redesign(
 		'success',
 		(
-			'background': tokens.$colors-background-success,
-			'accent': tokens.$colors-border-success,
-			'border': tokens.$colors-border-success,
-			'icon':tokens.$colors-icon-success,
-			'icon-bg': tokens.$colors-background-success-subdued,
+			'background': var(--alert-success-background),
+			'accent': var(--alert-success-accent),
+			'border': var(--alert-success-border),
+			'icon':var(--alert-success-icon),
+			'icon-bg': var(--alert-success-icon-bg),
 		)
 	);
 	@include redesign(
 		'error',
 		(
-			'background': tokens.$colors-background-error,
-			'accent': tokens.$colors-border-error,
-			'border': tokens.$colors-border-error,
-			'icon':tokens.$colors-icon-error,
-			'icon-bg': tokens.$colors-background-error-subdued,
+			'background': var(--alert-error-background),
+			'accent': var(--alert-error-accent),
+			'border': var(--alert-error-border),
+			'icon':var(--alert-error-icon),
+			'icon-bg': var(--alert-error-icon-bg),
 		)
 	);
 	@include redesign(
 		'info',
 		(
-			'background': tokens.$colors-background-info,
-			'accent': tokens.$colors-border-info,
-			'border': tokens.$colors-border-info,
-			'icon':tokens.$colors-icon-info,
-			'icon-bg': tokens.$colors-background-info-subdued,
+			'background': var(--alert-info-background),
+			'accent': var(--alert-info-accent),
+			'border': var(--alert-info-border),
+			'icon':var(--alert-info-icon),
+			'icon-bg': var(--alert-info-icon-bg),
 		)
 	);
 }

package/src/components/SyBtnMenu/SyBtnMenu.vue

@@ -2,6 +2,7 @@
 	import { ref, watch, computed, onMounted, useSlots, type PropType, nextTick } from 'vue'
 	import { useDisplay } from 'vuetify'
 	import slugify from 'slugify'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	type Item = string | Record<string, unknown>
 
@@ -34,6 +35,10 @@
 			type: String,
 			default: 'value',
 		},
+		iconKey: {
+			type: String,
+			default: 'icon',
+		},
 		primaryInfo: {
 			type: String,
 			default: 'Information principale',
@@ -217,28 +222,35 @@
 					:aria-labelledby="generatedId"
 					:aria-activedescendant="getSelectedValue() ? `item-${slugify(getSelectedValue()!)}` : undefined"
 				>
-					<li
+					<VListItem
 						v-for="(item, index) in formattedItems"
 						:id="`item-${slugify(item[props.textKey] as string)}`"
 						:key="index"
+						tag="li"
+						:class="`text-${props?.options['list']?.textColor}`"
+						v-bind="props.options['list']"
+						:href="item.link"
+						:to="item.to"
+						:tabindex="0"
+						role="menuitem"
+						:aria-current="selectedItem === item ? 'page' : undefined"
+						@click="selectItem(item)"
 					>
-						<VListItem
-							:class="`text-${props?.options['list']?.textColor}`"
-							v-bind="props.options['list']"
-							:href="item.link"
-							:to="item.to"
-							:tabindex="0"
-							role="menuitem"
-							:aria-current="selectedItem === item ? 'page' : undefined"
-							@click="selectItem(item)"
+						<template
+							v-if="item[props.iconKey]"
+							#prepend
 						>
-							<VListItemTitle
-								class="item-title"
-							>
-								{{ item[props.textKey] }}
-							</VListItemTitle>
-						</VListItem>
-					</li>
+							<SyIcon
+								:icon="item[props.iconKey] as string"
+								decorative
+							/>
+						</template>
+						<VListItemTitle
+							class="item-title"
+						>
+							{{ item[props.textKey] }}
+						</VListItemTitle>
+					</VListItem>
 					<slot />
 					<slot name="footer-list-item" />
 				</VList>
@@ -312,4 +324,8 @@
 .item-title {
 	white-space: wrap;
 }
+
+:deep(.v-list-item__prepend) {
+	display: unset !important;
+}
 </style>

package/src/components/SyBtnMenu/tests/SyBtnMenu.a11y.spec.ts

@@ -0,0 +1,38 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyBtnMenu from '../SyBtnMenu.vue'
+
+// Scénario d’accessibilité : menu utilisateur desktop avec une option et déploiement du menu.
+
+describe('SyBtnMenu – accessibility (axe)', () => {
+	it('has no obvious axe violations with menu open', async () => {
+		const wrapper = mount(SyBtnMenu, {
+			props: {
+				primaryInfo: 'John Doe',
+				secondaryInfo: 'Additional Info',
+				menuItems: [
+					{ text: 'Profil', value: 'profile' },
+				],
+				isMobileView: false,
+			},
+			attachTo: document.body,
+		})
+
+		// Ouvrir le menu pour inclure la liste dans l’analyse axe
+		const activator = wrapper.find('.sy-user-menu-btn')
+		if (activator.exists()) {
+			await activator.trigger('click')
+		}
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'SyBtnMenu – menu open', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+})

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

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 import SyBtnMenu from '../SyBtnMenu.vue'
 
 describe('SyBtnMenu', () => {
@@ -164,4 +165,44 @@ describe('SyBtnMenu', () => {
 
 		wrapper.unmount()
 	})
+
+	it('renders a prepend icon when menu item provides icon', async () => {
+		const wrapper = mount(SyBtnMenu, {
+			props: {
+				primaryInfo: 'John Doe',
+				menuItems: [
+					{ text: 'Administration', value: 'admin', icon: 'mdi-account' },
+				],
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.find('.sy-user-menu-btn').trigger('click')
+		await nextTick()
+
+		const prependIcon = document.body.querySelector('.v-list-item__prepend .v-icon') as HTMLElement | null
+		expect(prependIcon).not.toBeNull()
+		expect(prependIcon?.classList.contains('mdi-account')).toBe(true)
+
+		wrapper.unmount()
+	})
+
+	it('does not render a prepend icon when menu item has no icon', async () => {
+		const wrapper = mount(SyBtnMenu, {
+			props: {
+				primaryInfo: 'John Doe',
+				menuItems: [
+					{ text: 'Administration', value: 'admin' },
+				],
+			},
+			attachTo: document.body,
+		})
+
+		await wrapper.find('.sy-user-menu-btn').trigger('click')
+
+		const prependIcon = wrapper.find('.v-list-item__prepend .v-icon')
+		expect(prependIcon.exists()).toBe(false)
+
+		wrapper.unmount()
+	})
 })

package/src/components/SyHeading/SyHeading.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+
+	const props = defineProps<{
+		level: 1 | 2 | 3 | 4 | 5 | 6
+	}>()
+
+	const tag = computed(() => `h${props.level}`)
+</script>
+
+<template>
+	<component
+		:is="tag"
+		class="sy-heading"
+	>
+		<slot />
+	</component>
+</template>

package/src/components/TableToolbar/TableToolbar.stories.ts

@@ -878,7 +878,7 @@ export const SlotFilters: Story = {
 					},
 				]
 
-				const search = ref('')
+				const search = ref(undefined)
 
 				const filterItems = ref<{ text: string, value: string }[]>([])
 
@@ -902,16 +902,16 @@ export const SlotFilters: Story = {
 					<template #top>
 						<TableToolbar
 							v-bind="args"
-							v-model:search="args.search"
+							v-model:search="search"
 						>
 							<template #filters>
-								<div class="py-1">
+								<div class="px-4 py-4 py-sm-1">
 									<SySelect
 										v-model="search"
 										:items="filterItems"
 										label="Nom"
 										density="compact"
-										width="100"
+										width="150"
 										hide-messages
 										clearable
 									/>
@@ -942,13 +942,13 @@ export const SlotFilters: Story = {
 								:nb-total="items.length"
 							>
 								<template #filters>
-									<div class="py-4">
+									<div class="px-4 py-4 py-sm-1">
 										<SySelect 
 											v-model="search" 
 											:items="filterItems" 
 											label="Nom" 
 											density="compact" 
-											width="100"
+											width="150"
 											hide-messages
 											clearable 
 										/>

package/src/components/TableToolbar/TableToolbar.vue

@@ -66,7 +66,7 @@
 	>
 		<p
 			v-if="nbTotal > 0"
-			class="mb-0 font-weight-bold mr-4 mr-sm-0 my-3"
+			class="mb-0 font-weight-bold mr-4 mr-sm-0"
 			data-test-id="nb-rows"
 		>
 			{{ displayNbRows }}