@cnamts/synapse 0.0.14-alpha → 0.0.15-alpha

package/src/components/DownloadBtn/DownloadBtn.vue

@@ -19,6 +19,7 @@
 		filePromise: () => Promise<AxiosResponse<Blob>>
 		fallbackFilename?: string
 		backgroundColor?: string
+		dark?: boolean
 		locales?: typeof defaultLocales
 	}
 
@@ -29,13 +30,19 @@
 	const props = withDefaults(defineProps<Props & CustomizableOptions>(), {
 		fallbackFilename: undefined,
 		backgroundColor: 'white',
+		dark: false,
 		locales: () => defaultLocales,
 	})
+
 	const emits = defineEmits(['error', 'success'])
 	const attrs = useAttrs()
 	const state = ref<State>('idle')
 	const options = useCustomizableOptions(config, props)
 	const btnOptions = computed(() => deepmerge(options.value.btn, attrs))
+	const isDark = computed(() => props.dark ?? false)
+	const buttonColor = computed(() => isDark.value ? 'white' : options.value.btn.color)
+	const buttonBgColor = computed(() => isDark.value ? 'transparent' : props.backgroundColor)
+	const iconColor = computed(() => isDark.value ? 'white' : options.value.icon.color)
 
 	/**
 	 * Get filename and content type from headers
@@ -88,12 +95,16 @@
 		v-bind="btnOptions"
 		:loading="state === 'loading'"
 		class="sy-download-btn"
-		:class="[`bg-${backgroundColor}`, btnOptions.variant === 'outlined' ? 'outlined-style' : '']"
+		:color="buttonColor"
+		:class="`bg-${buttonBgColor}`"
 		data-testid="download-btn"
 		@click="download"
 	>
 		<slot name="icon">
-			<VIcon v-bind="options.icon">
+			<VIcon
+				v-bind="options.icon"
+				:color="iconColor"
+			>
 				{{ mdiDownload }}
 			</VIcon>
 		</slot>
@@ -141,8 +152,4 @@
 .sy-download-btn:focus-visible::after {
 	opacity: 1;
 }
-
-.outlined-style {
-	border: 1px solid currentcolor;
-}
 </style>

package/src/components/DownloadBtn/tests/__snapshots__/DownloadBtn.spec.ts.snap

@@ -4,7 +4,6 @@ exports[`DownloadBtn > renders correctly 1`] = `
 <button
   class="
     bg-white
-    outlined-style
     sy-download-btn
     text-primary
     text-wrap
@@ -47,7 +46,6 @@ exports[`DownloadBtn > with slots 1`] = `
 <button
   class="
     bg-white
-    outlined-style
     sy-download-btn
     text-primary
     text-wrap

package/src/components/FranceConnectBtn/Accessibilite.stories.ts

@@ -187,6 +187,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/FranceConnectBtn.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4005" target="_blank" style="color:#0C41BD;">issue #4005</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue

@@ -10,6 +10,7 @@
 
 <style lang="scss" scoped>
 	@use '@/assets/tokens.scss' as *;
+	@use '../menu';
 
 	.header-menu-item {
 		color: rgb(var(--v-theme-primary));
@@ -37,6 +38,8 @@
 			&::first-letter {
 				text-transform: uppercase;
 			}
+
+			@include menu.item-focused;
 		}
 	}
 

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue

@@ -63,6 +63,7 @@
 <style lang="scss" scoped>
 	@use '@/assets/tokens.scss' as *;
 	@use '../../consts' as *;
+	@use '../menu';
 
 	.sub-menu-btn {
 		display: flex;
@@ -83,6 +84,8 @@
 			}
 		}
 
+		@include menu.item-focused;
+
 		&::first-letter {
 			text-transform: uppercase;
 		}

package/src/components/HeaderBar/HeaderBurgerMenu/menu.scss

@@ -0,0 +1,19 @@
+@use 'sass:color';
+@use '@/assets/tokens';
+
+$red: color.channel(tokens.$primary-base, 'red');
+$green: color.channel(tokens.$primary-base, 'green');
+$blue: color.channel(tokens.$primary-base, 'blue');
+$primary: $red, $green, $blue;
+
+@mixin item-focused() {
+	border-top: 2px solid transparent;
+	border-bottom: 2px solid transparent;
+	transition: border-color 0.1s ease;
+
+	&:focus-visible {
+		outline: 0;
+		border-top: 2px solid rgb(var(--v-theme-primary, $primary));
+		border-bottom: 2px solid rgb(var(--v-theme-primary, $primary));
+	}
+}

package/src/components/HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue

@@ -48,12 +48,22 @@
 	font-weight: 700;
 	background-color: rgb(var(--v-theme-primary));
 	color: tokens.$neutral-white;
-	border-bottom: solid 1px tokens.$blue-lighten-80;
-	transition: color 0.15s 0.1s, background-color 0.15s 0.1s, border-bottom 0.15s 0.1s;
+	border: 2px solid transparent;
+	border-bottom:
+		solid 2px linear-gradient(
+			180deg,
+			transparent 0%,
+			transparent 50%,
+			tokens.$blue-lighten-80 50%,
+			tokens.$blue-lighten-80 100%
+		);
+	transition: color 0.15s 0.1s, background-color 0.15s 0.1s, border 0.15s 0.1s;
 
 	&:focus-visible {
 		background-color: tokens.$neutral-white;
 		color: rgb(var(--v-theme-primary));
+		outline: none;
+		border: 2px solid rgb(var(--v-theme-primary));
 	}
 }
 

package/src/components/LangBtn/Accessibilite.stories.ts

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 					</v-btn>
 					Problèmes relevés par Tanaguru
 				  </div>
+				</div>
+					<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/LangBtn.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+					<p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4009" target="_blank" style="color:#0C41BD;">issue #4009</a>)</p>
 				</div>
 			  </div>
             `,

package/src/components/LangBtn/LangBtn.stories.ts

@@ -13,13 +13,11 @@ const meta: Meta<typeof LangBtn> = {
 		modelValue: { control: 'text' },
 		hideDownArrow: { control: 'boolean' },
 		ariaLabel: { control: 'text' },
-		// @ts-expect-error Type '"array"' is not assignable to type 'Control | undefined'.
-		availableLanguages: { control: { type: 'array' } },
+		availableLanguages: { control: { type: 'object' } },
 		vuetifyOptions: {
 			control: { type: 'object' },
 			default: () => ({
 				menu: {
-					offsetY: true,
 				},
 				btn: {
 					color: 'primary',
@@ -73,7 +71,6 @@ export const Default: Story = {
 		availableLanguages: ['fr', 'en', 'es'],
 		vuetifyOptions: {
 			menu: {
-				offsetY: true,
 			},
 			btn: {
 				color: 'primary',

package/src/components/LangBtn/LangBtn.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-	import { computed, ref, watch } from 'vue'
+	import { computed, nextTick, ref, watch } from 'vue'
 	import type { AllLanguagesChar } from '@/components/LangBtn/types'
 	import { mdiMenuDown } from '@mdi/js'
 	import { locales } from './locales'
 	import ISO6391 from 'iso-639-1'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import defaultOptions from './config'
+	import type { VBtn, VListItem } from 'vuetify/components'
 
 	const props = withDefaults(defineProps<CustomizableOptions & {
 		modelValue?: string
@@ -90,6 +91,30 @@
 		}
 	})
 
+	const itemRef = ref<Array<VListItem>>([])
+	const btnRef = ref<VBtn | null>(null)
+	watch(
+		menu,
+		(newVal) => {
+			setTimeout(async () => {
+				if (newVal) {
+					setTimeout(() => {
+						requestAnimationFrame(() => {
+							const inputElement = itemRef.value[0]?.$el
+							if (inputElement) {
+								inputElement.focus()
+							}
+						})
+					}, 0)
+				}
+				else {
+					await nextTick()
+					btnRef.value?.$el.focus()
+				}
+			}, 0)
+		},
+	)
+
 	defineExpose({
 		currentLangData,
 		updateLang,
@@ -101,7 +126,7 @@
 	<div :id="menuId">
 		<VMenu
 			v-bind="options.menu"
-			:id="isMenuOpen ? 'lang-menu' : menuId "
+			id="lang-menu"
 			v-model="menu"
 			scroll-strategy="none"
 			role="menu"
@@ -110,15 +135,16 @@
 			<template #activator="{ props: activatorProps }">
 				<VBtn
 					id="lang-menu-btn"
+					v-bind="{
+						...options.btn,
+						...activatorProps,
+					}"
+					ref="btnRef"
 					:aria-label="`${props.ariaLabel} ${currentLangData.name}`"
 					aria-haspopup="menu"
 					:aria-controls="menuId"
 					:aria-owns="menuId"
 					:aria-expanded="isMenuOpen"
-					v-bind="{
-						...options.btn,
-						...activatorProps,
-					}"
 					class="vd-lang-btn"
 				>
 					{{ currentLangData.name }}
@@ -134,15 +160,22 @@
 			<VList
 				v-bind="options.list"
 				aria-labelledby="lang-menu-btn"
+				color="secondary"
+				:aria-activedescendant="`lang-item-${selectedLanguage}`"
+				role="menu"
 			>
 				<VListItem
-					v-for="(langData, code, index) in languagesData"
+					v-for="(langData, code) in languagesData"
 					v-bind="options.listTile"
+					:id="`lang-item-${code}`"
 					:key="code"
+					ref="itemRef"
+					:active="selectedLanguage === code"
 					role="menuitem"
-					:tabindex="index + 1"
+					:lang="code"
+					color="primary"
+					tabindex="0"
 					:aria-label="`${props.ariaLabel} ${langData.nativeName}`"
-					:aria-labelledby="`${menuId} ${langData.nativeName}`"
 					@click="updateLang(code)"
 				>
 					<VListItemTitle v-bind="options.listTileTitle">
@@ -160,6 +193,17 @@
 	background-color: rgba(tokens.$colors-overlay, 0.005);
 }
 
+.v-list-item:focus-visible {
+	&::after {
+		color: rgb(var(--v-theme-primary));
+		opacity: 1;
+	}
+
+	:deep(.v-list-item__overlay) {
+		display: none;
+	}
+}
+
 .vd-lang-btn {
 	font-size: 16px;
 
@@ -167,5 +211,20 @@
 
 	text-transform: none;
 	letter-spacing: inherit;
+
+	&:deep() {
+		.v-btn__underlay,
+		.v-btn__overlay {
+			display: none;
+		}
+	}
+}
+
+.vd-lang-btn:focus-visible {
+	outline: 0;
+}
+
+.vd-lang-btn:focus-visible::after {
+	opacity: 1;
 }
 </style>

package/src/components/LangBtn/config.ts

@@ -2,7 +2,6 @@ import type { VariantType } from '@/types/vuetifyTypes'
 
 const defaultOptions = {
 	menu: {
-		offsetY: true,
 	},
 	btn: {
 		color: 'primary',

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

@@ -78,6 +78,28 @@ describe('LangBtn', () => {
 	})
 
 	it('updates language when a language is selected', async () => {
+		wrapper = mount(LangBtn, {
+			props: {
+				availableLanguages: ['fr', 'co', 'es'],
+				modelValue: 'es',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			attachTo: document.body,
+		})
+
+		const activatorButton = wrapper.find('.vd-lang-btn')
+		await activatorButton.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		const languageItem = document.body.querySelectorAll('.v-list-item')[1] as HTMLElement
+		languageItem.click()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.find('.vd-lang-btn').text()).toBe('corsu')
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['co'])
 	})
 
 	it('opens the menu when clicked', async () => {
@@ -103,7 +125,10 @@ describe('LangBtn', () => {
 
 	it('hides down arrow when hideDownArrow is true', () => {
 		wrapper = mount(LangBtn, {
-			props: { hideDownArrow: true },
+			props: {
+				hideDownArrow: true,
+				availableLanguages: ['fr', 'co', 'es'],
+			},
 			global: {
 				plugins: [vuetify],
 			},
@@ -113,7 +138,10 @@ describe('LangBtn', () => {
 
 	it('shows down arrow when hideDownArrow is false', () => {
 		wrapper = mount(LangBtn, {
-			props: { hideDownArrow: false },
+			props: {
+				hideDownArrow: false,
+				availableLanguages: ['fr', 'co', 'es'],
+			},
 			global: {
 				plugins: [vuetify],
 			},

package/src/components/PageContainer/Accessibilite.stories.ts

@@ -2,6 +2,7 @@ import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPane
 import type { StoryObj } from '@storybook/vue3'
 import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
 import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 
 const checkIcon = mdiCheckboxMarkedCircle
 const iconEye = mdiEye
@@ -15,14 +16,22 @@ export const AccessibilitePanel: StoryObj = {
 
 	render: () => {
 		return {
-			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, SyAlert },
 
 			setup() {
 				const icon = checkIcon
 
-				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye, SyAlert }
 			},
 			template: `
+				<div class="mt-6 mb-6">
+					<SyAlert
+						title="Attention au contraste"
+						:closable="false"
+					>
+						<p> Le composant étant libre dans son implémentation, l'utilisateur doit veiller à la conformité de ce critère au regard de son intégration.</p>
+					</SyAlert>
+				</div>
 				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
 					<v-col cols="6">
 						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
@@ -138,28 +147,32 @@ export const Legende: StoryObj = {
 				return { args }
 			},
 			template: `
-			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
-			  <div>
-				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
-				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
-				  l'accessibilité du site.</p>
-				<div style="font-size: 14px">
-				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
-				  <div>
-					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Audit
-					</v-btn>
-					Problèmes relevés par le projet
-				  </div>
-				  <div>
-					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Tanaguru
-					</v-btn>
-					Problèmes relevés par Tanaguru
-				  </div>
+				<p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+				<div>
+					<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+					<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+						l'accessibilité du site.</p>
+					<div style="font-size: 14px">
+						<p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+						<div>
+							<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+								Audit
+							</v-btn>
+							Problèmes relevés par le projet
+						</div>
+						<div>
+							<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+								Tanaguru
+							</v-btn>
+							Problèmes relevés par Tanaguru
+						</div>
+					</div>
 				</div>
-			  </div>
-            `,
+				<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/PageContainer.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+					<p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4011" target="_blank" style="color:#0C41BD;">issue #4011</a>)</p>
+				</div>
+			`,
 		}
 	},
 	tags: ['!dev'],