@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+	import {
+		mdiFile,
+		mdiTrayArrowUp,
+		mdiDeleteOutline,
+		mdiEyeOutline,
+		mdiAlertCircle,
+		mdiCheckCircle,
+	} from '@mdi/js'
+	import { cnamContextualTokens } from '@/designTokens/tokens/cnam/cnamContextual'
+	import { locales as defaultLocales } from './locales'
+
+	type FileState = 'initial' | 'success' | 'error' | 'loading'
+
+	defineEmits<{
+		(e: 'upload', item: string): void
+		(e: 'preview', item: string): void
+		(e: 'delete', item: string): void
+	}>()
+
+	withDefaults(defineProps<{
+		itemId: string
+		title: string
+		fileName?: string
+		message?: string
+		optional?: boolean
+		state?: FileState
+		progress?: number
+		showUploadBtn?: boolean
+		showDeleteBtn?: boolean
+		showPreviewBtn?: boolean
+		tag?: string
+		locales?: typeof defaultLocales
+	}>(), {
+		fileName: undefined,
+		message: undefined,
+		optional: false,
+		state: 'initial',
+		progress: undefined,
+		showUploadBtn: true,
+		showDeleteBtn: true,
+		showPreviewBtn: false,
+		tag: 'div',
+		locales: () => defaultLocales,
+	})
+
+	defineSlots<{
+		'file-icon'(props: { state: FileState }): void
+	}>()
+
+</script>
+
+<template>
+	<component
+		:is="tag"
+		class="file-item"
+	>
+		<div class="file-item__description">
+			<div class="file-item__content">
+				<span
+					class="file-item__icon"
+				>
+					<slot
+						name="file-icon"
+						:state
+					>
+						<span
+							v-if="state === 'success'"
+							class="d-sr-only"
+						>
+							{{ locales.success }}
+						</span>
+
+						<span
+							v-else-if="state === 'error'"
+							class="d-sr-only"
+						>
+							{{ locales.error }}
+						</span>
+
+						<VIcon
+							v-if="state === 'error'"
+							:size="cnamContextualTokens.iconSize.default"
+							:aria-label="locales.error"
+							color="error"
+						>{{ mdiAlertCircle }}</VIcon>
+
+						<VIcon
+							v-else-if="state === 'success'"
+							:size="cnamContextualTokens.iconSize.default"
+							:aria-label="locales.success"
+							color="success"
+						>{{ mdiCheckCircle }}</VIcon>
+
+						<VIcon
+							v-else
+							:size="cnamContextualTokens.iconSize.default"
+							color="primary"
+						>{{ mdiFile }}</VIcon>
+					</slot>
+				</span>
+				<div>
+					<div class="file-item__title">
+						{{ title }}
+					</div>
+					<div class="file-item__name text-base">
+						{{ fileName }}
+					</div>
+					<div
+						v-if="message || optional"
+						class="file-item__message text-base"
+					>
+						{{ message ?? locales.optionalDocument }}
+					</div>
+				</div>
+			</div>
+			<div class="file-item__actions">
+				<VBtn
+					v-if="(state === 'initial' || state == 'error') && showUploadBtn"
+					class="file-item__action file-item__action-upload text-primary"
+					variant="text"
+					@click="$emit('upload', itemId)"
+				>
+					<span>Importer</span>
+					<template #prepend>
+						<VIcon
+							color="primary"
+						>
+							{{ mdiTrayArrowUp }}
+						</VIcon>
+					</template>
+				</VBtn>
+				<VBtn
+					v-if="state === 'success' && showPreviewBtn"
+					class="file-item__action file-item__action-preview text-primary"
+					variant="text"
+					@click="$emit('preview', itemId)"
+				>
+					<span>{{ locales.see }}</span>
+					<template #prepend>
+						<VIcon
+							color="primary"
+						>
+							{{ mdiEyeOutline }}
+						</VIcon>
+					</template>
+				</VBtn>
+				<VBtn
+					v-if="state === 'success' && showDeleteBtn"
+					class="file-item__action file-item__action-delete text-error"
+					variant="text"
+					@click="$emit('delete', itemId)"
+				>
+					<span>{{ locales.delete }}</span>
+					<template #prepend>
+						<VIcon
+							color="error"
+						>
+							{{ mdiDeleteOutline }}
+						</VIcon>
+					</template>
+				</VBtn>
+			</div>
+		</div>
+
+		<div
+			v-if="state === 'loading'"
+			class="file-item__message-progress"
+		>
+			<p class="d-sr-only">
+				{{ locales.uploading }}
+			</p>
+			<VProgressLinear
+				:indeterminate="progress === undefined"
+				:model-value="progress"
+				:progress="progress"
+				height="7"
+				color="primary"
+				rounded="true"
+			/>
+		</div>
+	</component>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.file-item {
+	display: flex;
+	flex-direction: column;
+	gap: tokens.$gap-3;
+	padding-block: tokens.$padding-4;
+	border-bottom: 1px solid tokens.$colors-border-subdued;
+}
+
+.file-item__title {
+	font-size: tokens.$font-size-body-text;
+}
+
+.file-item__name {
+	font-size: 0.875rem;
+	color: tokens.$colors-text-base;
+}
+
+.file-item__description {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+
+	> * {
+		grid-column: 1 / -1;
+	}
+
+	> *:nth-child(1),
+	> *:nth-child(2) {
+		grid-column: 1 / 2;
+	}
+
+	> .file-item__actions {
+		grid-column-start: 2;
+		grid-row: span 2;
+	}
+}
+
+.file-item__content {
+	display: flex;
+	gap: tokens.$gap-4;
+	align-items: center;
+}
+
+.file-item__actions {
+	display: flex;
+	flex-direction: column;
+	align-items: end;
+	justify-content: center;
+	margin-left: auto;
+	height: 100%;
+	gap: tokens.$gap-1;
+
+	@media screen and (min-width: tokens.$container-tablet-max-width) {
+		flex-direction: row;
+	}
+}
+
+.file-item__action {
+	display: flex;
+	justify-content: end;
+	text-transform: unset;
+	padding: 0.625rem 1.25rem;
+	font-weight: bold;
+}
+
+.file-item__message {
+	font-size: 0.875rem;
+	color: tokens.$colors-text-subdued;
+}
+
+.file-item__message-success,
+.file-item__message-error {
+	margin-top: tokens.$gap-3;
+}
+
+.file-item__message-error {
+	display: flex;
+	align-items: center;
+	gap: tokens.$gap-4;
+}
+
+</style>

package/src/components/FileList/UploadItem/locales.ts

@@ -0,0 +1,9 @@
+export const locales = {
+	optionalDocument: 'Document facultatif',
+	see: 'Voir',
+	delete: 'Supprimer',
+	uploading: 'En cours',
+	success: 'Téléchargé',
+	error: 'Erreur',
+	errorOccurred: 'Une erreur est survenue pendant le téléchargement.',
+}

package/src/components/FileList/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

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

@@ -0,0 +1,176 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FileList from '../FileList.vue'
+import { vuetify } from '@tests/unit/setup'
+import { locales } from '../UploadItem/locales'
+
+describe('FileList', () => {
+	it('renders many file items', () => {
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{
+						id: 'residenceCertificate',
+						title: 'Attestation de domicile',
+						state: 'initial',
+					},
+					{
+						id: 'identityCard',
+						title: 'Carte d\'identité',
+						state: 'initial',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.findAll('.file-item').length).toBe(2)
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.text()).toContain('Attestation de domicile')
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.text()).toContain('Carte d\'identité')
+	})
+
+	it('shows the right action for each state and item preference', async () => {
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{
+						id: 'file1',
+						title: 'file1',
+						state: 'initial',
+					},
+					{
+						id: 'file2',
+						title: 'file2',
+						state: 'initial',
+						showUploadBtn: false,
+					},
+					{
+						id: 'file3',
+						title: 'file3',
+						state: 'success',
+						showDeleteBtn: true,
+						showPreviewBtn: true,
+					},
+					{
+						id: 'file4',
+						title: 'file4',
+						state: 'success',
+						showDeleteBtn: false,
+						showPreviewBtn: false,
+					},
+					{
+						id: 'file5',
+						title: 'file5',
+						state: 'error',
+					},
+					{
+						id: 'file6',
+						title: 'file6',
+						state: 'error',
+						showUploadBtn: false,
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.findAll('button').length).toBe(1)
+		const item1UploadBtn = item1!.find('.file-item__action-upload')
+		expect(item1UploadBtn.exists()).toBe(true)
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.findAll('button').length).toBe(0)
+
+		const item3 = wrapper.findAll('.file-item').at(2)
+		expect(item3!.findAll('button').length).toBe(2)
+		const item3DeleteBtn = item3!.find('.file-item__action-delete')
+		expect(item3DeleteBtn.exists()).toBe(true)
+		const item3PreviewBtn = item3!.find('.file-item__action-preview')
+		expect(item3PreviewBtn.exists()).toBe(true)
+
+		const item4 = wrapper.findAll('.file-item').at(3)
+		expect(item4!.findAll('button').length).toBe(0)
+
+		const item5 = wrapper.findAll('.file-item').at(4)
+		expect(item5!.findAll('button').length).toBe(1)
+		const item5UploadBtn = item5!.find('.file-item__action-upload')
+		expect(item5UploadBtn.exists()).toBe(true)
+
+		const item6 = wrapper.findAll('.file-item').at(5)
+		expect(item6!.findAll('button').length).toBe(0)
+	})
+
+	it('emits the right event when clicking on an action button', async () => {
+		const fileItem1 = {
+			id: 'file1',
+			title: 'file1',
+			state: 'initial',
+		}
+
+		const fileItem2 = {
+			id: 'file2',
+			title: 'file2',
+			state: 'success',
+			showDeleteBtn: true,
+			showPreviewBtn: true,
+		}
+
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [fileItem1, fileItem2],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		const item1UploadBtn = item1!.find('.file-item__action-upload')
+		await item1UploadBtn!.trigger('click')
+		expect(wrapper.emitted('upload')?.[0][0]).toEqual(fileItem1)
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		const item2DeleteBtn = item2!.find('.file-item__action-delete')
+		await item2DeleteBtn!.trigger('click')
+		expect(wrapper.emitted('delete')?.[0][0]).toEqual(fileItem2)
+
+		const item2PreviewBtn = item2!.find('.file-item__action-preview')
+		await item2PreviewBtn!.trigger('click')
+		expect(wrapper.emitted('preview')?.[0][0]).toEqual(fileItem2)
+	})
+
+	it('shows when a file is optional', () => {
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{
+						id: 'file1',
+						title: 'file1',
+						state: 'initial',
+						optional: true,
+					},
+					{
+						id: 'file2',
+						title: 'file2',
+						state: 'initial',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.text()).toContain(locales.optionalDocument)
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.text()).not.toContain(locales.optionalDocument)
+	})
+})

package/src/components/FilePreview/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 />

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

@@ -0,0 +1,216 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Données/FilePreview/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<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;">
+						<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+						<div style="display: flex; align-items: center;">
+							<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+								   rounded>Tanaguru
+							</v-btn>
+						</div>
+					</div>
+
+					<v-expansion-panels value="opened" multiple>
+						<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+							<v-expansion-panel-title>
+								<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+								{{ item.title }}
+							</v-expansion-panel-title>
+							<v-expansion-panel-text>
+								<v-expansion-panels>
+								
+								<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ i.subtitle}}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div>
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ i.precision }}
+												</p>
+												<div v-for="(value, index) in i.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="{{i.link}}" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ value.info1 }}</p>
+													<p>{{ value.info2 }}</p>
+													<p>{{ value.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+									<v-expansion-panel>
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ item.subtitle }}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div v-for="(value, i) in item.items" :key="i">
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ value.precision }}
+												</p>
+												<div v-for="element in value.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="value.link" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ element.info1 }}</p>
+													<p>{{ element.info2 }}</p>
+													<p>{{ element.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+								</v-expansion-panels>
+							</v-expansion-panel-text>
+						</v-expansion-panel>
+					</v-expansion-panels>
+				</v-col>
+				<v-col cols="6">
+					<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+						<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+						<div style="display: flex; align-items: center;">
+							<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+								   rounded>Tanaguru
+							</v-btn>
+						</div>
+					</div>
+					<v-expansion-panels value="opened" multiple>
+						<v-expansion-panel
+							v-for="(item, index) in AccessibiliteItemsValidated"
+							:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+							<v-expansion-panel-title>
+								<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+								{{ item.title }}
+							</v-expansion-panel-title>
+							<v-expansion-panel-text>
+								<v-expansion-panels>
+								
+								<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ i.subtitle}}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div>
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ i.precision }}
+												</p>
+												<div v-for="(value, index) in i.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="{{i.link}}" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ value.info1 }}</p>
+													<p>{{ value.info2 }}</p>
+													<p>{{ value.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+									
+									<v-expansion-panel>
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ item.subtitle }}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div v-for="(value, i) in item.items" :key="i">
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ value.precision }}
+												</p>
+												<div v-for="element in value.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="value.link" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ element.info1 }}</p>
+													<p>{{ element.info2 }}</p>
+													<p>{{ element.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+								</v-expansion-panels>
+							</v-expansion-panel-text>
+						</v-expansion-panel>
+					</v-expansion-panels>
+				</v-col>
+			</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				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>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}