@cnamts/synapse 1.0.19 → 1.0.21

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

@@ -1,17 +1,443 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
 import AmeliproClickableTile from '../AmeliproClickableTile.vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { PropType } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import TestHelper from '@tests/helpers/TestHelper'
+
+// Stub VBtn qui préserve les attributs comme aria-label
+const VBtnStub = {
+	template: '<button v-bind="$attrs"><slot /></button>',
+	inheritAttrs: false,
+}
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproClickableTile> = {
+	borderedIcon: {
+		type: Boolean,
+		default: false,
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	href: {
+		type: String,
+		default: undefined,
+	},
+	icon: {
+		type: String,
+		default: undefined,
+	},
+	imgMaxWidth: {
+		type: String,
+		default: undefined,
+	},
+	imgMinWidth: {
+		type: String,
+		default: undefined,
+	},
+	imgSrc: {
+		type: String,
+		default: undefined,
+	},
+	imgWidth: {
+		type: String,
+		default: '100px',
+	},
+	tileTitle: {
+		type: String,
+		default: undefined,
+	},
+	tileWidth: {
+		type: String,
+		default: '100%',
+	},
+	to: {
+		type: Object as PropType<RouteLocationRaw>,
+		default: undefined,
+	},
+	uniqueId: {
+		type: String,
+		default: undefined,
+	},
+	onlyIconIsClickable: {
+		type: Boolean,
+		default: false,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproClickableTile> => ({
+	icon: 'utilisateur',
+	tileTitle: 'titre de la tuile',
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproClickableTile> => ({
+	icon: 'document',
+	tileTitle: 'titre modifié',
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproClickableTile)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
 
 describe('AmeliproClickableTile', () => {
-	it('render correctly', async () => {
-		const wrapper = mount(AmeliproClickableTile, {
-			props: {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Main container', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproClickableTile>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Test',
+					uniqueId: 'test-tile',
+				},
+				global: { stubs: { VBtn: VBtnStub } },
+			})
+		})
+
+		it('prop uniqueId sets attribute id on container', async () => {
+			expect(vueWrapper.attributes('id')).toBe('test-tile')
+			await vueWrapper.setProps({ uniqueId: 'new-id' })
+			expect(vueWrapper.attributes('id')).toBe('new-id')
+		})
+
+		it('prop tileWidth sets width attribute', async () => {
+			expect(vueWrapper.find('button').attributes('width')).toBe('100%')
+			await vueWrapper.setProps({ tileWidth: '50%' })
+			expect(vueWrapper.find('button').attributes('width')).toBe('50%')
+		})
+
+		it('prop disabled disables the button', async () => {
+			expect(vueWrapper.find('button').attributes('disabled')).toBeUndefined()
+			await vueWrapper.setProps({ disabled: true })
+			expect(vueWrapper.find('button').attributes('disabled')).toBeDefined()
+		})
+
+		it('prop href sets href attribute', async () => {
+			expect(vueWrapper.find('button').attributes('href')).toBeUndefined()
+			await vueWrapper.setProps({ href: 'https://example.com' })
+			expect(vueWrapper.find('button').attributes('href')).toBe('https://example.com')
+		})
+
+		it('prop to sets to attribute', async () => {
+			expect(vueWrapper.find('button').attributes('to')).toBeUndefined()
+			await vueWrapper.setProps({ to: '/dashboard' })
+			expect(vueWrapper.find('button').attributes('to')).toBe('/dashboard')
+		})
+	})
+
+	describe('Icon or Image display', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproClickableTile>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Test',
+				},
+				global: { stubs: { VBtn: VBtnStub } },
+			})
+		})
+
+		it('displays icon when icon prop is provided', async () => {
+			expect(vueWrapper.findComponent({ name: 'AmeliproIcon' }).exists()).toBe(true)
+		})
+
+		it('displays image when imgSrc prop is provided', async () => {
+			await vueWrapper.setProps({ icon: undefined, imgSrc: 'https://example.com/image.png' })
+			expect(vueWrapper.find('img').exists()).toBe(true)
+			expect(vueWrapper.find('img').attributes('src')).toBe('https://example.com/image.png')
+		})
+
+		it('prop imgWidth sets image width style', async () => {
+			await vueWrapper.setProps({ icon: undefined, imgSrc: 'https://example.com/image.png' })
+			expect(vueWrapper.find('img').attributes('style')).toContain('width: 100px')
+			await vueWrapper.setProps({ imgWidth: '150px' })
+			expect(vueWrapper.find('img').attributes('style')).toContain('width: 150px')
+		})
+
+		it('prop imgMaxWidth sets image maxWidth style', async () => {
+			await vueWrapper.setProps({
+				icon: undefined,
+				imgSrc: 'https://example.com/image.png',
+				imgMaxWidth: '200px',
+			})
+			expect(vueWrapper.find('img').attributes('style')).toContain('max-width: 200px')
+		})
+
+		it('prop imgMinWidth sets image minWidth style', async () => {
+			await vueWrapper.setProps({
+				icon: undefined,
+				imgSrc: 'https://example.com/image.png',
+				imgMinWidth: '50px',
+			})
+			expect(vueWrapper.find('img').attributes('style')).toContain('min-width: 50px')
+		})
+
+		it('does not display both icon and image', async () => {
+			await vueWrapper.setProps({
 				icon: 'utilisateur',
-				tileTitle: 'titre de la tuile',
-				uniqueId: 'my-clickable-tile-id',
-			},
+				imgSrc: 'https://example.com/image.png',
+			})
+			const images = vueWrapper.findAll('img')
+			const icons = vueWrapper.findAllComponents({ name: 'AmeliproIcon' })
+			expect(images.length === 0 || icons.length === 0).toBe(true)
+		})
+	})
+
+	describe('Title display', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproClickableTile>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'titre de la tuile',
+				},
+				global: { stubs: { VBtn: VBtnStub } },
+			})
+		})
+
+		it('prop tileTitle displays title text', async () => {
+			expect(vueWrapper.text()).toContain('titre de la tuile')
+			await vueWrapper.setProps({ tileTitle: 'nouveau titre' })
+			expect(vueWrapper.text()).toContain('nouveau titre')
+		})
+
+		it('displays slot content when provided', async () => {
+			const slotWrapper = mount(AmeliproClickableTile, {
+				props: { icon: 'utilisateur' },
+				slots: {
+					default: 'Slot content',
+				},
+				global: { stubs: { VBtn: VBtnStub } },
+			})
+			expect(slotWrapper.text()).toContain('Slot content')
+		})
+	})
+
+	describe('Icon styling', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproClickableTile>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Test',
+				},
+				global: { stubs: { VBtn: VBtnStub } },
+			})
+		})
+
+		it('prop borderedIcon changes icon style', async () => {
+			let icons = vueWrapper.findAllComponents({ name: 'AmeliproIcon' })
+			expect(icons.length).toBeGreaterThan(0)
+			expect(icons[0]?.props('bordered')).toBe(false)
+
+			await vueWrapper.setProps({ borderedIcon: true })
+			icons = vueWrapper.findAllComponents({ name: 'AmeliproIcon' })
+			expect(icons[0]?.props('bordered')).toBe(true)
+		})
+
+		it('icon has correct size', async () => {
+			const icons = vueWrapper.findAllComponents({ name: 'AmeliproIcon' })
+			expect(icons.length).toBeGreaterThan(0)
+			expect(icons[0]?.props('size')).toBe('32px')
 		})
 
-		expect(wrapper.html()).toMatchSnapshot()
+		it('arrow icon has correct size', async () => {
+			const icons = vueWrapper.findAllComponents({ name: 'AmeliproIcon' })
+			expect(icons.length).toBeGreaterThan(0)
+			const arrowIcon = icons[icons.length - 1]
+			expect(arrowIcon?.props('size')).toBe('16px')
+			expect(arrowIcon?.props('icon')).toBe('chevronRight')
+		})
+	})
+
+	describe('onlyIconIsClickable mode', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproClickableTile>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Test',
+					uniqueId: 'test-tile',
+					onlyIconIsClickable: true,
+				},
+				global: { stubs: { VBtn: VBtnStub } },
+			})
+		})
+
+		it('renders span wrapper instead of VBtn when onlyIconIsClickable is true', () => {
+			expect(vueWrapper.find('span.amelipro-clickable-tile').exists()).toBe(true)
+		})
+
+		it('prop uniqueId sets attribute id on span wrapper', async () => {
+			expect(vueWrapper.find('span.amelipro-clickable-tile').attributes('id')).toBe('test-tile')
+			await vueWrapper.setProps({ uniqueId: 'new-id' })
+			expect(vueWrapper.find('span.amelipro-clickable-tile').attributes('id')).toBe('new-id')
+		})
+
+		it('contains a VBtn for icon button only', () => {
+			const buttons = vueWrapper.findAll('button')
+			expect(buttons.length > 0).toBe(true)
+		})
+
+		it('icon button has uniqueId suffix', async () => {
+			const buttons = vueWrapper.findAll('button')
+			expect(buttons.length).toBeGreaterThan(0)
+			expect(buttons[0]?.attributes('id')).toBe('test-tile-icon-button')
+		})
+
+		it('content is not clickable, only icon button is', () => {
+			const span = vueWrapper.find('span.amelipro-clickable-tile')
+			// Span should not have onclick handler
+			expect(span.attributes('onclick')).toBeUndefined()
+		})
+	})
+
+	describe('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproClickableTile>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Test',
+					uniqueId: 'test-id',
+				},
+			})
+		})
+
+		it('emits click event when clicked in normal mode', async () => {
+			expect(vueWrapper.emitted('click')).toBeUndefined()
+			await vueWrapper.trigger('click')
+			expect(vueWrapper.emitted('click')).toBeTruthy()
+			expect(vueWrapper.emitted('click')?.[0]).toEqual(['test-id'])
+		})
+
+		it('emits click event with uniqueId', async () => {
+			await vueWrapper.setProps({ uniqueId: 'new-id' })
+			await vueWrapper.trigger('click')
+			expect(vueWrapper.emitted('click')?.[0]).toEqual(['new-id'])
+		})
+
+		it('does not emit click when disabled', async () => {
+			await vueWrapper.setProps({ disabled: true })
+			// VBtn with disabled prop should not emit click
+		})
+	})
+
+	describe('Hover and Focus states', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproClickableTile>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Test',
+				},
+				global: { stubs: { VBtn: VBtnStub } },
+			})
+		})
+
+		it('applies hover class on hover', async () => {
+			const btn = vueWrapper.find('button')
+			await btn.trigger('mouseenter')
+			// Check that the hover class is applied to the container
+			expect(vueWrapper.classes()).toContain('amelipro-clickable-tile--hover')
+		})
+
+		it('applies focus class on focus', async () => {
+			const btn = vueWrapper.find('button')
+			await btn.trigger('focus')
+			// Check that the hover/focus class is applied to the container
+			expect(vueWrapper.classes()).toContain('amelipro-clickable-tile--hover')
+		})
+
+		it('removes hover state on mouseleave', async () => {
+			const btn = vueWrapper.find('button')
+			await btn.trigger('mouseenter')
+			expect(vueWrapper.classes()).toContain('amelipro-clickable-tile--hover')
+			await btn.trigger('mouseleave')
+			// State should be reset
+			expect(vueWrapper.classes()).not.toContain('amelipro-clickable-tile--hover')
+		})
+
+		it('removes focus state on blur', async () => {
+			const btn = vueWrapper.find('button')
+			await btn.trigger('focus')
+			expect(vueWrapper.classes()).toContain('amelipro-clickable-tile--hover')
+			await btn.trigger('blur')
+			// State should be reset
+			expect(vueWrapper.classes()).not.toContain('amelipro-clickable-tile--hover')
+		})
+	})
+
+	describe('Disabled state styling', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproClickableTile>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Test',
+					disabled: true,
+				},
+				global: { stubs: { VBtn: VBtnStub } },
+			})
+		})
+
+		it('applies disabled styling to button', () => {
+			expect(vueWrapper.find('button').attributes('disabled')).toBeDefined()
+		})
+
+		it('button has disabled attribute when disabled prop is true', async () => {
+			expect(vueWrapper.find('button').attributes('disabled')).toBeDefined()
+			await vueWrapper.setProps({ disabled: false })
+			expect(vueWrapper.find('button').attributes('disabled')).toBeUndefined()
+		})
+	})
+
+	describe('ID generation', () => {
+		it('generates proper IDs for all elements when uniqueId is provided', () => {
+			const vueWrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Test',
+					uniqueId: 'test-tile',
+				},
+				global: { stubs: { VBtn: VBtnStub } },
+			})
+
+			expect(vueWrapper.attributes('id')).toBe('test-tile')
+			expect(vueWrapper.find('#test-tile-icon').exists()).toBe(true)
+			expect(vueWrapper.find('#test-tile-icon-arrow').exists()).toBe(true)
+		})
+
+		it('works without uniqueId', () => {
+			const vueWrapper = mount(AmeliproClickableTile, {
+				props: {
+					icon: 'utilisateur',
+					tileTitle: 'Test',
+				},
+				global: { stubs: { VBtn: VBtnStub } },
+			})
+
+			expect(vueWrapper.attributes('id')).toBeUndefined()
+			expect(vueWrapper.find('[id*="-icon"]').exists()).toBe(false)
+		})
 	})
 })

package/src/components/Amelipro/AmeliproClickableTile/tests/__snapshots__/AmeliproClickableTile.spec.ts.snap

@@ -1,5 +1,65 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`AmeliproClickableTile > Snapshots > renders the component with all properties filled in 1`] = `
+<v-btn-stub
+  block="false"
+  border="false"
+  class="
+    amelipro-clickable-tile
+    text-none
+  "
+  density="default"
+  disabled="false"
+  elevation="0"
+  exact="false"
+  flat="false"
+  height="auto"
+  icon="false"
+  id="modified-unique-id"
+  loading="false"
+  replace="false"
+  ripple="false"
+  size="default"
+  slim="false"
+  stacked="false"
+  symbol="Symbol(vuetify:v-btn-toggle)"
+  tag="button"
+  tile="false"
+  variant="elevated"
+  width="100%"
+></v-btn-stub>
+`;
+
+exports[`AmeliproClickableTile > Snapshots > renders the component with only required properties filled in 1`] = `
+<v-btn-stub
+  block="false"
+  border="false"
+  class="
+    amelipro-clickable-tile
+    text-none
+  "
+  density="default"
+  disabled="false"
+  elevation="0"
+  exact="false"
+  flat="false"
+  height="auto"
+  icon="false"
+  id="required-unique-id"
+  loading="false"
+  replace="false"
+  ripple="false"
+  size="default"
+  slim="false"
+  stacked="false"
+  symbol="Symbol(vuetify:v-btn-toggle)"
+  tag="button"
+  tile="false"
+  variant="elevated"
+  width="100%"
+></v-btn-stub>
+`;
+
 exports[`AmeliproClickableTile > render correctly 1`] = `
 <button
   class="

package/src/components/Amelipro/AmeliproIcon/__tests__/AmeliproIcon.spec.ts

@@ -348,7 +348,7 @@ describe('AmeliproIcon', () => {
 		})
 
 		it('themeIcon returns the good values', () => {
-			const expectedResult = `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 1823 1823" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd">
+			const expectedResult = `<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 1823 1823">
   <circle class="circle-color" cx="912" cy="912" r="912"></circle>
   <path class="shape-color" d="M962 454c117 0 125 154 125 154v145s1 111-73 152c-2 10-3 20-1 30 4-2-21 146 106 165 92 15 178 57 247 120 23 23 40 186 40 186H418s-2-132 40-186c73-62 162-104 257-120 128-19 85-160 89-158 2-10 1-21-1-31 0 0-69-89-68-169 1-81 0-134 0-134s-4-190 126-190l101 36z"></path>
 </svg>`

package/src/components/Amelipro/AmeliproIcon/iconList.ts

@@ -110,6 +110,8 @@ export const iconList: IconItem[] = [
 	{ name: 'shieldPlus' },
 	{ name: 'delegation' },
 	{ name: 'attele' },
+	{ name: 'cookie' },
+	{ name: 'parametres' },
 	{
 		name: 'chevronLeft',
 		noBackground: true,

package/src/components/BackBtn/BackBtn.vue

@@ -2,6 +2,7 @@
 	import { mdiArrowLeft } from '@mdi/js'
 	import { computed } from 'vue'
 	import { locales } from './locales'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<{
 		hideBackIcon?: boolean
@@ -35,14 +36,14 @@
 		:style="{ backgroundColor: buttonBgColor }"
 	>
 		<slot name="icon">
-			<VIcon
+			<SyIcon
 				v-if="!props.hideBackIcon"
+				:icon="mdiArrowLeft"
+				decorative
 				:color="iconColor"
 				:class="{ 'ml-n1': isDark }"
 				class="mr-1"
-			>
-				{{ mdiArrowLeft }}
-			</VIcon>
+			/>
 		</slot>
 
 		<slot>

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../BackBtn.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/BackBtn.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/4006" target="_blank" style={{color:'#0C41BD'}}>issue #4006</a>)</p>
+</div>

package/src/components/BackToTopBtn/BackToTopBtn.vue

@@ -8,6 +8,7 @@
 
 	import { locales } from './locales'
 	import { config } from './config'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	import { type VBtn } from 'vuetify/components'
 
@@ -116,9 +117,11 @@
 			</span>
 
 			<slot name="icon">
-				<VIcon v-bind="options.icon">
-					{{ mdiArrowUp }}
-				</VIcon>
+				<SyIcon
+					v-bind="options.icon"
+					:icon="mdiArrowUp"
+					decorative
+				/>
 			</slot>
 		</VBtn>
 	</VFadeTransition>

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../BackToTopBtn.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/BackToTopBtn.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/4022" target="_blank" style={{color:'#0C41BD'}}>issue #4022</a>)</p>
+</div>

package/src/components/Captcha/Captcha.vue

@@ -11,6 +11,7 @@
 	import volumeUp from './icons/volumeUp.vue'
 	import { locales as defaultLocales } from './locales'
 	import { type CaptchaType, type StateType } from './types'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<{
 		urlCreate: string
@@ -202,7 +203,10 @@
 					@click="toggleAudio"
 				>
 					<span v-if="isPlaying">
-						<VIcon>{{ mdiPause }}</VIcon>
+						<SyIcon
+							:icon="mdiPause"
+							decorative
+						/>
 						{{ locales.pause }}
 					</span>
 

package/src/components/Captcha/CaptchaAlert.vue

@@ -2,6 +2,7 @@
 	import { mdiAlertCircleOutline, mdiAutorenew } from '@mdi/js'
 	import { useAttrs } from 'vue'
 	import type { locales as defaultLocales } from './locales'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	defineProps<{
 		locales: typeof defaultLocales
@@ -22,12 +23,12 @@
 			v-bind="attrs"
 		>
 			<template #prepend>
-				<VIcon
+				<SyIcon
 					color="error"
 					class="mr-2"
-				>
-					{{ errorIcon }}
-				</VIcon>
+					:icon="errorIcon"
+					decorative
+				/>
 			</template>
 
 			<span>
@@ -44,9 +45,10 @@
 					<p class="d-sr-only">
 						{{ locales.renew }}
 					</p>
-					<VIcon>
-						{{ renewIcon }}
-					</VIcon>
+					<SyIcon
+						:icon="renewIcon"
+						decorative
+					/>
 				</VBtn>
 			</template>
 		</VAlert>

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

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as CaptchaStorie from '../Captcha.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={CaptchaStorie} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>