@cnamts/synapse 1.0.19 → 1.0.21

package/src/components/Accordion/Accordion.mdx

@@ -1,4 +1,5 @@
 import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import '@/stories/styles/shared.css';
 
 import * as AccordionStories from './Accordion.stories';
 
@@ -33,7 +34,9 @@ Vous pouvez également utiliser des slots pour personnaliser le rendu des titres
 
 <Canvas of={AccordionStories.WithSlots} />
 
-## Accessibilité
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
 
 Le composant Accordion respecte les normes d'accessibilité ARIA :
 

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

@@ -1,5 +1,5 @@
 import { Meta, Primary } from '@storybook/blocks';
-import * as AccordionStories from '../Accordion.stories';
+import * as AccordionStories from '../Accordion.stories.ts';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import {
 	AccessibilityGuideLayout,
@@ -10,7 +10,7 @@ import {
 	ResourcesSection,
 } from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={AccordionStories}  name="Accessibilité" />
+<Meta of={AccordionStories}/>
 
 <AccessibilityGuideLayout
 	componentName="Accordion"

package/src/components/Amelipro/AmeliproClickableTile/AmeliproClickableTile.stories.ts

@@ -1,25 +1,43 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import AmeliproClickableTile from './AmeliproClickableTile.vue'
+import { fn } from '@storybook/test'
 
 const meta = {
+	parameters: {
+		controls: {
+			exclude: [
+				'onClick',
+				'click:clickable-tile',
+			],
+		},
+	},
 	argTypes: {
-		borderedIcon: { description: 'change le style du pictogramme à gauche de la tuile' },
-		click: {
+		'borderedIcon': {
+			description: 'change le style du pictogramme à gauche de la tuile',
+		},
+		'click': {
 			table: { category: 'events' },
 			description: 'Événement émis au click sur le bouton',
 		},
-		default: { description: 'slot permettant de remplacer la property `tileTitle`, ce slot ne doit contenir que des balises span' },
-		disabled: { description: 'désactive la tuile' },
-		href: { description: 'Url de destination du lien' },
-		icon: { description: 'Nom de l\'icone à afficher' },
-		imgMaxWidth: { description: 'Taille maximale de l’image du bouton' },
-		imgMinWidth: { description: 'Taille minimale de l’image du bouton' },
-		imgSrc: { description: 'Url de l’image du bouton' },
-		imgWidth: { description: 'Taille de l’image du bouton' },
-		tileTitle: { description: 'Texte à afficher sur la tuile' },
-		tileWidth: { description: 'La largeur du bouton/lien' },
-		to: { description: 'Route de destination du lien' },
-		uniqueId: { description: 'Ajoute un id au bouton' },
+		'default': {
+			description:
+        'slot permettant de remplacer la property `tileTitle`, ce slot ne doit contenir que des balises span',
+		},
+		'disabled': { description: 'désactive la tuile' },
+		'href': { description: 'Url de destination du lien' },
+		'icon': { description: 'Nom de l\'icone à afficher' },
+		'imgMaxWidth': { description: 'Taille maximale de l’image du bouton' },
+		'imgMinWidth': { description: 'Taille minimale de l’image du bouton' },
+		'imgSrc': { description: 'Url de l’image du bouton' },
+		'imgWidth': { description: 'Taille de l’image du bouton' },
+		'tileTitle': { description: 'Texte à afficher sur la tuile' },
+		'tileWidth': { description: 'La largeur du bouton/lien' },
+		'to': { description: 'Route de destination du lien' },
+		'uniqueId': { description: 'Ajoute un id au bouton' },
+		'onlyIconIsClickable': {
+			description: 'Si true, seule l\'icône avec la flèche est cliquable',
+		},
+		'click:clickable-tile': { description: 'Evénement émis au click sur la tuile cliquable' },
 	},
 	component: AmeliproClickableTile,
 	title: 'Composants/Amelipro/Tuiles/AmeliproClickableTile',
@@ -34,6 +52,7 @@ export const Default: Story = {
 		icon: 'utilisateur',
 		tileTitle: 'Titre de la tuile',
 		uniqueId: 'amelipro-tile-btn-unique-id',
+		onClick: fn(),
 	},
 	parameters: {
 		sourceCode: [
@@ -50,6 +69,7 @@ export const Default: Story = {
 				name: 'Scripts',
 				code: `<script setup lang="ts">
 	import { AmeliproClickableTile } from '@cnamts/synapse'
+	}
 </script>`,
 			},
 		],
@@ -76,6 +96,7 @@ export const AvecImage: Story = {
 		imgWidth: '40px',
 		imgMinWidth: '40px',
 		imgMaxWidth: '40px',
+		onClick: fn(),
 	},
 	parameters: {
 		sourceCode: [
@@ -148,6 +169,7 @@ export const IconeAvecBordure: Story = {
 		tileTitle: 'Icône avec bordure',
 		uniqueId: 'amelipro-tile-bordered-icon',
 		borderedIcon: true,
+		onClick: fn(),
 	},
 	parameters: {
 		sourceCode: [
@@ -216,6 +238,7 @@ export const TitrePersonnalise: Story = {
 	args: {
 		icon: 'utilisateur',
 		uniqueId: 'amelipro-tile-slot-title',
+		onClick: fn(),
 	},
 	parameters: {
 		sourceCode: [
@@ -248,3 +271,39 @@ export const TitrePersonnalise: Story = {
         `,
 	}),
 }
+
+// --- Tuile avec seule l’icône cliquable ---
+export const SeuleIconeCliquable: Story = {
+	name: 'Seule icône cliquable',
+	args: {
+		icon: 'utilisateur',
+		tileTitle: 'Tuile avec seule l’icône cliquable',
+		uniqueId: 'amelipro-tile-only-icon-clickable',
+		onlyIconIsClickable: true,
+		onClick: fn(),
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<AmeliproClickableTile
+  icon="utilisateur"
+  tile-title="Tuile avec seule l’icône cliquable"
+  unique-id="amelipro-tile-only-icon-clickable"
+  :only-icon-is-clickable="true"
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproClickableTile },
+		setup() {
+			return { args }
+		},
+		template: `
+		  <p class="mb-2">Seule l’icône avec la flèche est cliquable grâce à la prop <code>onlyIconIsClickable</code>.</p>	
+		  <AmeliproClickableTile v-bind="args"/>
+		  `,
+	}),
+}

package/src/components/Amelipro/AmeliproClickableTile/AmeliproClickableTile.vue

@@ -2,8 +2,7 @@
 	import { type PropType, computed, ref } from 'vue'
 	import AmeliproIcon from '../AmeliproIcon/AmeliproIcon.vue'
 	import type { IndexedObject } from '../types'
-	import type { RouteLocationRaw } from 'vue-router'
-	import { convertToHex } from '@/utils/functions/convertToHex'
+	import type { NavigationProps } from '@/components/types'
 
 	const props = defineProps({
 		borderedIcon: {
@@ -15,7 +14,7 @@
 			default: false,
 		},
 		href: {
-			type: String,
+			type: String as PropType<NavigationProps['href']>,
 			default: undefined,
 		},
 		icon: {
@@ -47,36 +46,33 @@
 			default: '100%',
 		},
 		to: {
-			type: [Array, Object, String] as PropType<RouteLocationRaw>,
+			type: [Array, Object, String] as PropType<NavigationProps['to']>,
 			default: undefined,
 		},
 		uniqueId: {
 			type: String,
 			default: undefined,
 		},
+		onlyIconIsClickable: {
+			type: Boolean,
+			default: false,
+		},
 	})
 
 	const hover = ref(false)
 	const focus = ref(false)
 
-	const tileStyles = computed<IndexedObject>(() => {
-		const btnStyles: IndexedObject = {
-			backgroundColor: convertToHex('ap-white'),
-			border: `1px solid ${convertToHex('ap-blue-darken-1')} !important`,
-			color: convertToHex('ap-grey-darken-1'),
-			padding: '1rem',
-		}
-		if ((hover.value || focus.value) && !props.disabled) {
-			btnStyles.border = `1px solid ${convertToHex('ap-blue-darken-2')} !important`
-		}
-		if (props.disabled) {
-			btnStyles.color = `${convertToHex('ap-grey-darken-1')} !important`
-			btnStyles.backgroundColor = `${convertToHex('ap-grey-lighten-2')} !important`
-			btnStyles.border = `1px solid ${convertToHex('ap-grey-lighten-2')} !important`
-		}
+	const tileClasses = computed(() => ({
+		'amelipro-clickable-tile--hover': (hover.value || focus.value) && !props.disabled && !props.onlyIconIsClickable,
+		'amelipro-clickable-tile--disabled': props.disabled,
+		'amelipro-clickable-tile--only-icon-clickable': props.onlyIconIsClickable,
+	}))
 
-		return btnStyles
-	})
+	const containerClasses = computed(() => [
+		'amelipro-clickable-tile',
+		'text-none',
+		tileClasses.value,
+	])
 
 	const imgStyles = computed((): IndexedObject => {
 		const styles: IndexedObject = { width: props.imgWidth }
@@ -131,14 +127,14 @@
 
 <template>
 	<VBtn
+		v-if="!onlyIconIsClickable"
 		:id="uniqueId"
-		class="amelipro-clickable-tile text-none"
+		:class="containerClasses"
 		:disabled="disabled"
 		:elevation="0"
 		height="auto"
 		:href="href"
 		:ripple="false"
-		:style="tileStyles"
 		:to="to"
 		:width="tileWidth"
 		@blur="focus = false"
@@ -168,9 +164,7 @@
 				size="32px"
 			/>
 
-			<span
-				class="d-block ml-3 mr-6"
-			>
+			<span class="d-block ml-3 mr-6">
 				<slot name="default">
 					{{ tileTitle }}
 				</slot>
@@ -186,6 +180,65 @@
 			size="16px"
 		/>
 	</VBtn>
+	<span
+		v-else
+		:id="uniqueId"
+		:class="containerClasses"
+	>
+		<span class="d-flex align-center flex-grow-1">
+			<img
+				v-if="imgSrc && !icon"
+				:id="uniqueId ? `${uniqueId}-img` : undefined"
+				alt=""
+				class="amelipro-clickable-tile__img"
+				:src="imgSrc"
+				:style="imgStyles"
+			>
+
+			<AmeliproIcon
+				v-if="icon && !imgSrc"
+				:id="uniqueId ? `${uniqueId}-icon` : undefined"
+				:bordered="borderedIcon"
+				class="amelipro-clickable-tile__icon"
+				:icon="icon"
+				:icon-bg-color="iconBgColorValue"
+				:icon-color="iconColorValue"
+				size="32px"
+			/>
+
+			<span class="d-block ml-3 mr-6">
+				<slot name="default">
+					{{ tileTitle }}
+				</slot>
+			</span>
+		</span>
+		<VBtn
+			:id="uniqueId ? `${uniqueId}-icon-button` : undefined"
+			:disabled="disabled"
+			class="amelipro-clickable-tile__icon-button no-padding"
+			:elevation="0"
+			height="auto"
+			:href="href"
+			:ripple="false"
+			padding="0.5rem"
+			:to="to"
+			:aria-label="`Ouvrir ${tileTitle}`"
+			@blur="focus = false"
+			@click="emitClickEvent"
+			@focus="focus = true"
+			@mouseenter="hover = true"
+			@mouseleave="hover = false"
+		>
+			<AmeliproIcon
+				:id="uniqueId ? `${uniqueId}-icon-arrow` : undefined"
+				class="amelipro-clickable-tile__icon-arrow"
+				icon="chevronRight"
+				icon-bg-color="transparent"
+				:icon-color="iconArrowColorValue"
+				size="16px"
+			/>
+		</VBtn>
+	</span>
 </template>
 
 <style lang="scss" scoped>
@@ -195,11 +248,46 @@
 	position: relative;
 	display: flex;
 	background-color: apTokens.$ap-white;
-	border-radius: 0.5rem;
+	border: 1px solid apTokens.$ap-blue-darken1 !important;
+	border-radius: var(--radius-md) !important;
 	white-space: normal;
 	font-size: 1rem;
 	font-weight: 600;
 	text-align: left;
+	align-items: center;
+	justify-content: space-between;
+	color: apTokens.$ap-grey-darken1;
+	padding: 1rem;
+
+	&--hover {
+		border-color: apTokens.$ap-blue-darken2 !important;
+	}
+
+	&--disabled {
+		color: apTokens.$ap-grey-darken1 !important;
+		background-color: apTokens.$ap-grey-lighten2 !important;
+		border-color: apTokens.$ap-grey-lighten2 !important;
+	}
+
+	&__icon-button {
+		flex-shrink: 0;
+		padding: 0.5rem !important;
+		min-width: auto !important;
+		width: auto !important;
+		height: auto !important;
+		background-color: transparent !important;
+		border: none !important;
+
+		&:hover,
+		&:focus {
+			background-color: transparent !important;
+			border: none !important;
+		}
+
+		:deep(.v-btn__content) {
+			width: auto !important;
+		}
+	}
 }
 
 .v-btn {
@@ -230,4 +318,8 @@
 		width: 100%;
 	}
 }
+
+.no-padding {
+	padding: 0 !important;
+}
 </style>

package/src/components/Amelipro/AmeliproClickableTile/tests/AmeliproClickableTile.a11y.spec.ts

@@ -0,0 +1,304 @@
+// @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 AmeliproClickableTile from '../AmeliproClickableTile.vue'
+
+describe('AmeliproClickableTile – accessibility (axe)', () => {
+	describe('default state', () => {
+		it('has no obvious axe violations with icon in default state', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Mon profil',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – icon default state')
+
+			wrapper.unmount()
+		})
+
+		it('has no obvious axe violations with image in default state', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					imgSrc: 'https://via.placeholder.com/100',
+					tileTitle: 'Documents',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – image default state')
+
+			wrapper.unmount()
+		})
+
+		it('has no obvious axe violations with href', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Lien externe',
+					href: 'https://example.com',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – with href')
+
+			wrapper.unmount()
+		})
+
+		it('has no obvious axe violations with to (router link)', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'document',
+					tileTitle: 'Navigation interne',
+					to: '/dashboard',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – with to')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('disabled state', () => {
+		it('has no obvious axe violations when disabled', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Tuile désactivée',
+					disabled: true,
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – disabled state')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('bordered icon state', () => {
+		it('has no obvious axe violations with bordered icon', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Icône bordée',
+					borderedIcon: true,
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – bordered icon')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('onlyIconIsClickable mode', () => {
+		it('has no obvious axe violations when onlyIconIsClickable is true', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Seule icône cliquable',
+					onlyIconIsClickable: true,
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – onlyIconIsClickable mode')
+
+			wrapper.unmount()
+		})
+
+		it('has no obvious axe violations when onlyIconIsClickable with href', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'document',
+					tileTitle: 'Mode spécial avec lien',
+					onlyIconIsClickable: true,
+					href: 'https://example.com',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – onlyIconIsClickable with href')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('with uniqueId', () => {
+		it('has no obvious axe violations with uniqueId', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Avec ID unique',
+					uniqueId: 'profile-tile',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – with uniqueId')
+
+			wrapper.unmount()
+		})
+
+		it('has no obvious axe violations with uniqueId in onlyIconIsClickable mode', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Avec ID unique en mode spécial',
+					uniqueId: 'special-tile',
+					onlyIconIsClickable: true,
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – uniqueId with onlyIconIsClickable')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('image sizing', () => {
+		it('has no obvious axe violations with image sizing props', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					imgSrc: 'https://via.placeholder.com/100',
+					tileTitle: 'Image avec tailles',
+					imgWidth: '80px',
+					imgMaxWidth: '150px',
+					imgMinWidth: '50px',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – image with sizing')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('with custom width', () => {
+		it('has no obvious axe violations with custom tileWidth', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Largeur personnalisée',
+					tileWidth: '50%',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – custom width')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('with slot content', () => {
+		it('has no obvious axe violations with slot content', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+				},
+				slots: {
+					default: '<span>Contenu du slot</span>',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – with slot content')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('multiple instances', () => {
+		it('has no obvious axe violations with multiple instances on same page', async () => {
+			const container = document.createElement('div')
+			container.id = 'test-container'
+			document.body.appendChild(container)
+
+			const wrapper1 = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Tuile 1',
+					uniqueId: 'tile-1',
+				},
+				attachTo: container,
+			})
+
+			const wrapper2 = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'document',
+					tileTitle: 'Tuile 2',
+					uniqueId: 'tile-2',
+				},
+				attachTo: container,
+			})
+
+			const results = await axe(container as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – multiple instances')
+
+			wrapper1.unmount()
+			wrapper2.unmount()
+			document.body.removeChild(container)
+		})
+	})
+
+	describe('color contrast', () => {
+		it('has no obvious axe violations with default colors', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Contraste de couleur par défaut',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – color contrast default')
+
+			wrapper.unmount()
+		})
+	})
+
+	describe('keyboard navigation', () => {
+		it('has no obvious axe violations for keyboard navigation', async () => {
+			const wrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Navigation au clavier',
+					uniqueId: 'keyboard-test',
+				},
+				attachTo: document.body,
+			})
+
+			const results = await axe(wrapper.element as HTMLElement)
+			assertNoA11yViolations(results, 'AmeliproClickableTile – keyboard navigation')
+
+			wrapper.unmount()
+		})
+	})
+})