@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

package/src/components/DataListGroup/DataListGroup.vue

@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+	import type { PropType } from 'vue'
+	import type { DataListIcons } from '../DataList/types'
+	import type { DataListGroupItems, DataListActionEvent } from './types'
+	import DataList from '../DataList/DataList.vue'
+
+	const props = defineProps({
+		items: {
+			type: Array as PropType<DataListGroupItems>,
+			required: true,
+		},
+		icons: {
+			type: Object as PropType<DataListIcons | undefined>,
+			default: undefined,
+		},
+		itemWidth: {
+			type: String,
+			default: '200px',
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		renderHtmlValue: {
+			type: Boolean,
+			default: false,
+		},
+	})
+
+	const emit = defineEmits(['click:list-item'])
+
+	const emitItemAction = (dataListIndex: number, itemIndex: number): void => {
+		const eventValue: DataListActionEvent = {
+			dataListIndex,
+			itemIndex,
+		}
+
+		emit('click:list-item', eventValue)
+	}
+</script>
+
+<template>
+	<div class="vd-data-list-group d-flex flex-wrap max-width-none ma-n4">
+		<DataList
+			v-for="(dataList, index) in props.items"
+			:key="`vd-data-list-${index}`"
+			:loading="props.loading"
+			:render-html-value="props.renderHtmlValue"
+			:list-title="dataList.title"
+			:items="dataList.items"
+			:items-number-loading="dataList.itemsNumberLoading"
+			:heading-loading="dataList.headingLoading"
+			:width="props.itemWidth"
+			:icons="props.icons"
+			class="ma-4"
+			@click:item-action="emitItemAction(index, $event)"
+		/>
+	</div>
+</template>

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

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import DataListGroup from '../DataListGroup.vue'
+
+import { dataListGroupItems } from './data/dataListGroupItems'
+import { vuetify } from '@tests/unit/setup'
+
+describe('DataListGroup', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(DataListGroup, {
+			props: {
+				items: dataListGroupItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('h4').text()).toBe('Catégorie 1')
+	})
+
+	it('renders loading state correctly', async () => {
+		const wrapper = mount(DataListGroup, {
+			props: {
+				loading: true,
+				items: dataListGroupItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.vd-data-list-loading').exists()).toBe(true)
+	})
+
+	it('emit the right event when clicking on a item button', async () => {
+		const wrapper = mount(DataListGroup, {
+			props: {
+				items: dataListGroupItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const button = wrapper.find('button')
+		await button.trigger('click')
+
+		expect(wrapper.emitted('click:list-item')).toEqual([
+			[{ dataListIndex: 1, itemIndex: 0 }],
+		])
+	})
+})

package/src/components/DataListGroup/tests/data/dataListGroupItems.ts

@@ -0,0 +1,41 @@
+import type { DataList } from '../../../DataList/types'
+import type { DataListGroupItems } from '../../types'
+
+export const dataListItems: DataList = [
+	{
+		key: 'Libellé',
+		value: 'Texte saisi',
+	},
+	{
+		key: 'Libellé',
+		value: 'Texte saisi',
+	},
+]
+
+export const dataListItemsActions: DataList = [
+	{
+		key: 'Libellé',
+		value: 'Texte à modifier',
+		action: 'Modifier',
+	},
+	{
+		key: 'Libellé',
+		value: 'Texte à modifier',
+		action: 'Modifier',
+	},
+]
+
+export const dataListGroupItems: DataListGroupItems = [
+	{
+		title: 'Catégorie 1',
+		items: dataListItems,
+		itemsNumberLoading: 2,
+		headingLoading: true,
+	},
+	{
+		title: 'Catégorie 2',
+		items: dataListItemsActions,
+		itemsNumberLoading: 2,
+		headingLoading: true,
+	},
+]

package/src/components/DataListGroup/types.d.ts

@@ -0,0 +1,15 @@
+import type { DataList } from '../DataList/types'
+
+export interface DataListActionEvent {
+	dataListIndex: number
+	itemIndex: number
+}
+
+export interface DataListGroupItem {
+	title?: string
+	items: DataList
+	headingLoading?: boolean
+	itemsNumberLoading?: number
+}
+
+export type DataListGroupItems = DataListGroupItem[]

package/src/components/DataListItem/DataListItem.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+	import { computed } from 'vue'
+	import { useTheme } from 'vuetify'
+
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+
+	import { config } from './config'
+	import { locales } from './locales'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		label: string
+		value?: string | number
+		action?: string
+		placeholder?: string
+		chip?: boolean
+		icon?: string
+		row?: boolean
+		renderHtmlValue?: boolean
+	}>(), {
+		label: '',
+		value: undefined,
+		action: undefined,
+		placeholder: locales.placeholder,
+		chip: false,
+		icon: undefined,
+		row: false,
+		renderHtmlValue: false,
+	})
+
+	const emits = defineEmits(['click:action'])
+
+	const options = useCustomizableOptions(config, props)
+	const theme = useTheme()
+
+	const labelColor = computed(() => {
+		return theme.current.value.dark
+			? 'rgba(255, 255, 255, .7)'
+			: 'rgba(0, 0, 0, .6)'
+	})
+
+	const itemValue = computed(() => {
+		if (typeof props.value === 'number') {
+			return isNaN(props.value)
+				? props.placeholder
+				: props.value.toString()
+		}
+		return props.value || props.placeholder
+	})
+</script>
+
+<template>
+	<li class="vd-data-list-item d-flex flex-wrap">
+		<slot name="icon">
+			<VIcon
+				v-if="icon"
+				v-bind="options.icon"
+			>
+				{{ icon }}
+			</VIcon>
+		</slot>
+
+		<div class="vd-data-list-item-content">
+			<div :class="{ 'vd-row': row }">
+				<div
+					class="vd-data-list-item-label text-caption"
+					:style="{ color: labelColor }"
+				>
+					{{ label }}
+				</div>
+
+				<div class="vd-data-list-item-value">
+					<slot
+						name="value"
+						v-bind="{ itemValue }"
+					>
+						<VChip
+							v-if="chip"
+							v-bind="options.chip"
+						>
+							{{ itemValue }}
+						</VChip>
+
+						<span
+							v-else-if="renderHtmlValue"
+							class="text-body-1"
+							v-html="itemValue"
+						/>
+
+						<span
+							v-else
+							class="text-body-1"
+							v-text="itemValue"
+						/>
+					</slot>
+				</div>
+			</div>
+
+			<slot name="action">
+				<VBtn
+					v-if="action"
+					v-bind="options.actionBtn"
+					class="vd-data-list-item-action-btn"
+					@click="emits('click:action')"
+				>
+					{{ action }}
+				</VBtn>
+			</slot>
+		</div>
+	</li>
+</template>
+
+<style lang="scss" scoped>
+.vd-row {
+  display: flex;
+  flex-wrap: wrap;
+
+  .vd-data-list-item-label {
+    align-self: center;
+
+    &::after {
+      content: ':';
+      margin: 0 4px;
+    }
+  }
+}
+
+.vd-data-list-item-action-btn.v-btn {
+  min-width: 0;
+  margin: 0 -1px;
+}
+
+.v-icon.v-theme--light {
+  color: rgba(0, 0, 0, 0.54);
+}
+</style>

package/src/components/DataListItem/config.ts

@@ -0,0 +1,17 @@
+import type { VariantType } from '@/types/vuetifyTypes'
+
+export const config = {
+	icon: {
+		size: 24,
+		class: 'mr-4 mt-2',
+	},
+	chip: {
+		class: 'mt-1',
+	},
+	actionBtn: {
+		variant: 'text' as VariantType,
+		size: 'small',
+		color: 'secondary',
+		class: 'text-body-1 pa-0',
+	},
+}

package/src/components/DataListItem/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	placeholder: '…',
+}

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

@@ -0,0 +1,156 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+
+import DataListItem from '../DataListItem.vue'
+
+describe('DataListItem', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: 'Sample Value',
+				action: 'Click Me',
+				chip: false,
+				row: true,
+			},
+			slots: {
+				icon: '<VIcon>mdi-home</VIcon>',
+				value: '<span>Custom Value</span>',
+				action: '<VBtn>Custom Action</VBtn>',
+			},
+		})
+
+		expect(wrapper.vm.value).toBe('Sample Value')
+	})
+
+	it('renders correctly with a number value', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: 123,
+			},
+		})
+
+		expect(wrapper.vm.value).toBe(123)
+	})
+
+	it('renders correctly with a NaN value', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: parseInt('test', 10),
+			},
+		})
+
+		expect(wrapper.vm.value).toBe(NaN)
+	})
+
+	it('renders correctly a value with HTML as text', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: '<span>Custom Value</span>',
+			},
+		})
+
+		const elValue = wrapper.find('.vd-data-list-item-value span')
+
+		expect(elValue.text()).toBe('<span>Custom Value</span>')
+	})
+
+	it('renders correctly a value as plain HTML', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: 'Paul<br> Dupont',
+				renderHtmlValue: true,
+			},
+		})
+
+		const elValue = wrapper.find('.vd-data-list-item-value span')
+
+		expect(elValue.text()).toBe('Paul Dupont')
+	})
+
+	it('renders correctly value in a chip', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: 'Chip Value',
+				chip: true,
+			},
+		})
+
+		const elChip = wrapper.find('.v-chip__content')
+		expect(elChip.text()).toBe('Chip Value')
+	})
+
+	it('renders correctly with an action', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				action: 'Click Me',
+			},
+		})
+
+		const elAction = wrapper.find('.vd-data-list-item-action-btn')
+		expect(elAction.text()).toBe('Click Me')
+	})
+
+	it('emits click:action event on button click', async () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				action: 'Click Me',
+			},
+		})
+
+		const button = wrapper.find('.vd-data-list-item-action-btn')
+		await button.trigger('click')
+
+		expect(wrapper.emitted('click:action')).toBeTruthy()
+	})
+
+	it('renders correctly in row mode', () => {
+		const wrapper = mount(DataListItem, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'Test',
+				value: 'Sample Value',
+				action: 'Click Me',
+				chip: false,
+				row: true,
+			},
+		})
+
+		const elRow = wrapper.find('.vd-row')
+		expect(elRow.exists()).toBe(true)
+	})
+})

package/src/components/DataListItem/types.d.ts

@@ -0,0 +1,23 @@
+import { useCustomizableOptions } from '@/composables/useCustomizableOptions'
+
+export interface IndexedObject<Type = string> {
+	[key: string]: Type
+}
+
+export interface DataListItem {
+	key: string
+	value?: string | number
+	action?: string
+	chip?: boolean
+	icon?: string
+	options?: useCustomizableOptions
+	class?: string
+}
+
+export type DataList = DataListItem[]
+
+export interface DataListIcons {
+	[iconName: string]: string
+}
+
+export type ItemClass = (string | undefined | IndexedObject<boolean>)[]

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 />

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

@@ -0,0 +1,166 @@
+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/Boutons/DownloadBtn/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-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-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'],
+}