@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

package/src/components/DialogBox/DialogBox.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { mdiClose } from '@mdi/js'
+	import { ref } from 'vue'
+	import type { VDialog } from 'vuetify/components'
+	import { config } from './config'
+	import { locales } from './locales'
+
+	const props = withDefaults(defineProps<{
+		title?: string
+		width?: string
+		cancelBtnText?: string
+		confirmBtnText?: string
+		hideActions?: boolean
+		persistent?: boolean
+	} & CustomizableOptions>(), {
+		title: undefined,
+		width: '800px',
+		cancelBtnText: locales.cancelBtn,
+		confirmBtnText: locales.confirmBtn,
+		hideActions: false,
+		persistent: false,
+	})
+
+	defineEmits(['cancel', 'confirm', 'update:modelValue'])
+	defineSlots<{
+		default?: () => undefined
+		title?: () => undefined
+		actions?: () => undefined
+	}>()
+
+	const dialog = defineModel<boolean>({
+		default: false,
+	})
+
+	const dialogContent = ref<VDialog | undefined>(undefined)
+
+	const options = useCustomizableOptions(config, props)
+
+	const closeIcon = mdiClose
+
+	async function getSelectableElements(): Promise<HTMLElement[]> {
+		const parentNode = dialogContent?.value?.$el // Is undefined when dialog is closed
+
+		if (!parentNode) {
+			return []
+		}
+
+		const elements = Array.from<HTMLElement>(parentNode.querySelectorAll(
+			'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+		))
+
+		const filteredElements = elements.filter(element => (
+			!element.hasAttribute('disabled')
+			&& !element.getAttribute('aria-hidden')
+		))
+
+		return filteredElements
+	}
+
+	async function handleFocus(e: KeyboardEvent): Promise<void> {
+		const selectableElements = await getSelectableElements()
+
+		const focused = selectableElements.findIndex(
+			(el: HTMLElement) => el === e.target,
+		)
+
+		const isOutside = focused === -1
+		const lastElement = selectableElements.length - 1
+
+		if (!e.shiftKey && (isOutside || focused === lastElement)) {
+			e.preventDefault()
+			selectableElements[0].focus()
+		}
+		else if (e.shiftKey && (isOutside || focused === 0)) {
+			e.preventDefault()
+			selectableElements[lastElement].focus()
+		}
+	}
+</script>
+
+<template>
+	<VDialog
+		v-model="dialog"
+		v-bind="$attrs"
+		:width="props.width"
+		:persistent="props.persistent"
+		:retain-focus="false"
+		aria-modal="true"
+		class="vd-dialog-box"
+		@keydown.tab="handleFocus"
+	>
+		<VCard
+			v-bind="options.card"
+			id="dialogContent"
+			ref="dialogContent"
+			:aria-labelledby="props.title ? props.title : 'dialogContent'"
+		>
+			<VCardTitle v-bind="options.cardTitle">
+				<slot name="title">
+					<h2
+						v-if="title"
+						class="text-h6 font-weight-bold"
+					>
+						{{ props.title }}
+					</h2>
+				</slot>
+
+				<VSpacer v-bind="options.spacer" />
+
+				<VBtn
+					v-if="!props.persistent"
+					v-bind="options.closeBtn"
+					:aria-label="locales.closeBtn"
+					@click="dialog = false"
+				>
+					<VIcon v-bind="options.icon">
+						{{ closeIcon }}
+					</VIcon>
+				</VBtn>
+			</VCardTitle>
+			<slot />
+
+			<div
+				v-if="!props.hideActions"
+				v-bind="options.actionsCtn"
+				class="vd-dialog-box-actions-ctn"
+			>
+				<VSpacer v-bind="options.actionsSpacer" />
+
+				<slot name="actions">
+					<VBtn
+						v-bind="options.cancelBtn"
+						@click="$emit('cancel')"
+					>
+						{{ props.cancelBtnText }}
+					</VBtn>
+
+					<VBtn
+						v-bind="options.confirmBtn"
+						data-test-id="confirm-btn"
+						@click="$emit('confirm')"
+					>
+						{{ props.confirmBtnText }}
+					</VBtn>
+				</slot>
+			</div>
+		</VCard>
+	</VDialog>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens' as *;
+.v-card__title > * {
+	line-height: 1em;
+}
+
+.v-btn--icon {
+	color: $colors-icon-base;
+	position: absolute;
+	right: 24px;
+}
+
+h2 {
+	word-break: break-word;
+	text-wrap: balance;
+}
+
+.vd-dialog-box-actions-ctn  {
+	display: flex;
+	flex-direction: column-reverse;
+	justify-content: stretch;
+	gap: $spacing-small;
+}
+
+@media screen and (min-width: $container-mobile-max-width) {
+	.vd-dialog-box-actions-ctn  {
+		flex-direction: row;
+	}
+}
+</style>

package/src/components/DialogBox/config.ts

@@ -0,0 +1,25 @@
+export const config = {
+	card: {
+		class: 'pa-6',
+	},
+	cardTitle: {
+		class: 'd-flex align-start flex-nowrap pa-0 mb-6 mr-6',
+	},
+	closeBtn: {
+		icon: true,
+		elevation: 0,
+		width: '32px',
+		height: '32px',
+		class: 'mt-n2 mr-n2 ml-4',
+	},
+	actionsCtn: {
+		class: 'd-flex flex-wrap mt-6',
+	},
+	cancelBtn: {
+		color: 'primary',
+		variant: 'text',
+	},
+	confirmBtn: {
+		color: 'primary',
+	},
+} as const

package/src/components/DialogBox/locales.ts

@@ -0,0 +1,5 @@
+export const locales = {
+	closeBtn: 'Fermer la boîte de dialogue',
+	cancelBtn: 'Annuler',
+	confirmBtn: 'Valider',
+}

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

@@ -0,0 +1,329 @@
+/* eslint-disable vue/one-component-per-file */
+import { describe, it, expect } from 'vitest'
+import { mount, shallowMount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import { VCard } from 'vuetify/components'
+import { defineComponent } from 'vue'
+import DialogBox from '../DialogBox.vue'
+
+const defaultProps = {
+	modelValue: true,
+	title: 'Test title',
+	width: '600px',
+	cancelBtnText: 'Cancel',
+	confirmBtnText: 'Confirm',
+	hideActions: false,
+	persistent: false,
+}
+
+describe('DialogBox', () => {
+	describe('rendering and props', () => {
+		it('renders correctly with props', () => {
+			const wrapper = mount(DialogBox, {
+				props: defaultProps,
+				global: {
+					plugins: [vuetify],
+					stubs: {
+						VDialog: {
+							template: '<div><slot></slot></div>',
+						},
+					},
+				},
+			})
+
+			expect(wrapper.html()).toMatchSnapshot()
+		})
+
+		it('is closed when model value is false', async () => {
+			const wrapper = mount(DialogBox, {
+				props: {
+					...defaultProps,
+					modelValue: false,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			expect(wrapper.html()).toBe('')
+		})
+
+		it('becomes visible when the model value is updated', async () => {
+			const wrapper = mount(DialogBox, {
+				props: defaultProps,
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const card = wrapper.getComponent(VCard)
+			expect(card.isVisible()).toBe(true)
+
+			await wrapper.setProps({ modelValue: false })
+			expect(card.isVisible()).toBe(false)
+
+			await wrapper.setProps({ modelValue: true })
+			expect(card.isVisible()).toBe(true)
+		})
+
+		it('renders the title slot', async () => {
+			const wrapper = mount(DialogBox, {
+				slots: {
+					title: '<h2>Test title</h2>',
+				},
+				props: defaultProps,
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const modal = wrapper.getComponent(VCard)
+			const title = modal.find<HTMLElement>('h2').text()
+
+			await modal.vm.$nextTick()
+
+			expect(title).toBe('Test title')
+		})
+	})
+
+	describe('focusable elements and tab navigation', () => {
+		it('gets the correct focusable elements', async () => {
+			const wrapper = mount(DialogBox, {
+				slots: {
+					default: `
+						<button id="first">First</button>
+						<button id="second" disabled>Second</button>
+						<button id="third">third</button>
+						<a href="https://www.ameli.fr/" id="link">ameli.fr</a>
+					`,
+				},
+				props: {
+					...defaultProps,
+					hideActions: true,
+					persistent: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const modal = wrapper.getComponent(VCard)
+
+			const firstBtn = modal.find<HTMLElement>('#first')
+			const thirdBtn = modal.find<HTMLElement>('#third')
+			const theLink = modal.find<HTMLElement>('#link')
+
+			await modal.vm.$nextTick()
+
+			// @ts-expect-error - Testing private method
+			expect(await wrapper.vm.getSelectableElements()).toEqual([
+				firstBtn.element,
+				thirdBtn.element,
+				theLink.element,
+			])
+		})
+
+		it('handles the internal tab navigation', async () => {
+			const wrapper = mount(DialogBox, {
+				slots: {
+					default: `
+						<button id="first">First</button>
+						<button id="second" disabled>Second</button>
+						<button id="third">third</button>
+						<a href="https://www.ameli.fr/" id="link">ameli.fr</a>
+					`,
+				},
+				props: {
+					...defaultProps,
+					hideActions: true,
+					persistent: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			async function triggerTab() {
+				await modal.find(':focus').trigger('keydown', {
+					keyCode: 9,
+					key: 'Tab',
+					code: 'Tab',
+				})
+			}
+
+			async function triggerShiftTab() {
+				await modal.find(':focus').trigger('keydown', {
+					keyCode: 9,
+					key: 'Tab',
+					code: 'Tab',
+					shiftKey: true,
+				})
+			}
+
+			const modal = wrapper.getComponent(VCard)
+
+			const firstBtn = modal.find<HTMLElement>('#first')
+			const link = modal.find<HTMLElement>('#link')
+			await modal.vm.$nextTick()
+
+			firstBtn.element.focus()
+			await modal.vm.$nextTick()
+
+			await triggerShiftTab()
+			expect(link.element).toEqual(document.activeElement)
+
+			await triggerTab()
+			expect(firstBtn.element).toEqual(document.activeElement)
+		})
+
+		it('return to the first focusable element', async () => {
+			const testComponent = defineComponent({
+				components: { DialogBox },
+				setup() {
+					return {
+						dialog: true,
+
+					}
+				},
+				template: `
+				<DialogBox v-model="dialog" title="Test title" :hide-actions="true">
+					<button id="first">First</button>
+					<button id="second" disabled>Second</button>
+					<button id="third">third</button>
+					<a href="https://www.ameli.fr/" id="link">ameli.fr</a>
+				</DialogBox>
+				<button id="external">External</button>
+				`,
+			})
+			const wrapper = mount(testComponent, {
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const externalBtn = wrapper.find<HTMLButtonElement>('#external')
+			externalBtn.element.focus()
+			await wrapper.vm.$nextTick()
+
+			await externalBtn.trigger('keydown', {
+				keyCode: 9,
+				key: 'Tab',
+				code: 'Tab',
+			})
+
+			const modal = wrapper.getComponent(VCard)
+
+			const firstBtn = modal.find<HTMLElement>('#first')
+			expect(firstBtn.element).toEqual(document.activeElement)
+		})
+
+		it('return the last focusable element', async () => {
+			const testComponent = defineComponent({
+				components: { DialogBox },
+				setup() {
+					return {
+						dialog: true,
+					}
+				},
+				template: `
+				<button id="external">External</button>
+				<DialogBox v-model="dialog" title="Test title" :hide-actions="true">
+					<button id="first">First</button>
+					<button id="second" disabled>Second</button>
+					<button id="third">third</button>
+					<a href="https://www.ameli.fr/" id="link">ameli.fr</a>
+				</DialogBox>
+				`,
+			})
+			const wrapper = mount(testComponent, {
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const external = wrapper.find<HTMLElement>('#external')
+			const modal = wrapper.getComponent(VCard)
+			external.element.focus()
+			await wrapper.vm.$nextTick()
+
+			await modal.trigger('keydown', {
+				keyCode: 9,
+				key: 'Tab',
+				code: 'Tab',
+				shiftKey: true,
+			})
+
+			const link = modal.find<HTMLButtonElement>('#link')
+			expect(link.element).toEqual(document.activeElement)
+		})
+	})
+
+	describe('event emissions', () => {
+		it('emits an event when close button is clicked', async () => {
+			const wrapper = mount(DialogBox, {
+				props: {
+					modelValue: true,
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const modal = wrapper.getComponent(VCard)
+
+			expect(modal.isVisible()).toBe(true)
+
+			const closeBtn = modal.find('button')
+			await closeBtn.trigger('click')
+
+			expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		})
+
+		it('emits a cancel event when cancel button is clicked', async () => {
+			const wrapper = mount(DialogBox, {
+				props: defaultProps,
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const modal = wrapper.getComponent(VCard)
+
+			const cancelBtn = modal.find('.vd-dialog-box-actions-ctn button')
+			await cancelBtn.trigger('click')
+
+			expect(wrapper.emitted('cancel')).toBeTruthy()
+		})
+
+		it('emits a confirm event when confirm button is clicked', async () => {
+			const wrapper = mount(DialogBox, {
+				props: defaultProps,
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			const modal = wrapper.getComponent(VCard)
+
+			const confirmBtn = modal.find('[data-test-id="confirm-btn"]')
+			await confirmBtn.trigger('click')
+
+			expect(wrapper.emitted('confirm')).toBeTruthy()
+		})
+	})
+
+	describe('Test methods', () => {
+		it('getSelectableElements if this.$refs.dialogContent.$el is undefined', async () => {
+			const wrapper = shallowMount(DialogBox, {
+				props: defaultProps,
+				global: {
+					plugins: [vuetify],
+				},
+			})
+			// @ts-expect-error - Testing private method
+			const result = await wrapper.vm.getSelectableElements()
+			expect(result).toEqual([])
+		})
+	})
+})

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

@@ -0,0 +1,46 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
+"<div data-v-e77b7070="" modelvalue="true" width="600px" persistent="false" retain-focus="false" aria-modal="true" class="vd-dialog-box">
+  <div data-v-e77b7070="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6" id="dialogContent" aria-labelledby="Test title">
+    <!---->
+    <div class="v-card__loader">
+      <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+        <!---->
+        <div class="v-progress-linear__background" style="opacity: NaN;"></div>
+        <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+        <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+          <div class="v-progress-linear__indeterminate">
+            <div class="v-progress-linear__indeterminate long"></div>
+            <div class="v-progress-linear__indeterminate short"></div>
+          </div>
+        </transition-stub>
+        <!---->
+      </div>
+    </div>
+    <!---->
+    <!---->
+    <div data-v-e77b7070="" class="v-card-title d-flex align-start flex-nowrap pa-0 mb-6 mr-6">
+      <h2 data-v-e77b7070="" class="text-h6 font-weight-bold">Test title</h2>
+      <div data-v-e77b7070="" class="v-spacer"></div><button data-v-e77b7070="" type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-elevated mt-n2 mr-n2 ml-4" style="height: 32px; width: 32px;" aria-label="Fermer la boîte de dialogue"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><i data-v-e77b7070="" class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+        <!---->
+        <!---->
+      </button>
+    </div>
+    <div data-v-e77b7070="" class="d-flex flex-wrap mt-6 vd-dialog-box-actions-ctn">
+      <div data-v-e77b7070="" class="v-spacer"></div><button data-v-e77b7070="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator="">Cancel</span>
+        <!---->
+        <!---->
+      </button><button data-v-e77b7070="" type="button" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated" data-test-id="confirm-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator="">Confirm</span>
+        <!---->
+        <!---->
+      </button>
+    </div>
+    <!---->
+    <!----><span class="v-card__underlay"></span>
+  </div>
+</div>"
+`;

package/src/components/DownloadBtn/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />