@cnamts/synapse 0.0.4-alpha → 0.0.6-alpha

package/src/components/Customs/SyBtnSelect/SyBtnSelect.vue

@@ -0,0 +1,254 @@
+<script lang="ts" setup>
+	import { ref, watch, computed, onMounted, useSlots, type PropType } from 'vue'
+	import { useDisplay } from 'vuetify'
+
+	type Item = string | Record<string, unknown>
+
+	const props = defineProps({
+		modelValue: {
+			type: [Object, String, null],
+			default: null,
+		},
+		menuItems: {
+			type: Array as PropType<Item[]>,
+			default: () => [],
+		},
+		label: {
+			type: String,
+			default: 'Sélectionnez une option',
+		},
+		required: {
+			type: Boolean,
+			default: false,
+		},
+		menuId: {
+			type: String,
+			default: 'custom-btn-select-menu',
+		},
+		textKey: {
+			type: String,
+			default: 'text',
+		},
+		valueKey: {
+			type: String,
+			default: 'value',
+		},
+		primaryInfo: {
+			type: String,
+			default: 'Information principale',
+		},
+		secondaryInfo: {
+			type: String,
+			default: undefined,
+		},
+		hideIcon: {
+			type: Boolean,
+			default: false,
+		},
+		hideLogoutBtn: {
+			type: Boolean,
+			default: false,
+		},
+		isMobileView: {
+			type: Boolean,
+			default: false,
+		},
+		iconOnly: {
+			type: Boolean,
+			default: false,
+		},
+		options: {
+			type: Object,
+			default: () => ({ menu: {}, btn: {}, list: {} }),
+		},
+	})
+
+	const emit = defineEmits(['update:modelValue', 'logout'])
+	const slots = useSlots()
+	const { smAndDown } = useDisplay()
+
+	const isOpen = ref(false)
+	const selectedItem = ref<Record<string, unknown> | string | null>(props.modelValue as Record<string, unknown> | string | null)
+	const toggleMenu = () => {
+		isOpen.value = !isOpen.value
+	}
+
+	const buttonRef = ref<HTMLElement | null>(null)
+	const buttonWidth = ref('')
+
+	onMounted(() => {
+		if (buttonRef.value && !isMobileVersion.value) {
+			buttonWidth.value = `${buttonRef.value.getBoundingClientRect().width}px`
+		}
+	})
+
+	const selectItem = (item: Item | null) => {
+		selectedItem.value = item
+		emit('update:modelValue', item)
+		isOpen.value = false
+	}
+
+	const formattedItems = computed(() => {
+		return props.menuItems.map((item) => {
+			if (typeof item === 'string') {
+				return { [props.textKey]: item, [props.valueKey]: item }
+			}
+			return item
+		})
+	})
+
+	const btnPadding = computed(() => {
+		if (props.hideIcon) {
+			return 'pa-1 pa-sm-2'
+		}
+		return isMobileVersion.value ? 'pa-0' : 'pa-1 pa-sm-3'
+	})
+
+	const hasListContent = computed(() => {
+		return Boolean(slots.default || !props.hideLogoutBtn)
+	})
+
+	const isMobileVersion = computed(() => {
+		return props.isMobileView || smAndDown.value || props.iconOnly
+	})
+
+	watch(() => props.modelValue, (newValue) => {
+		selectedItem.value = newValue
+	})
+
+	const generatedId = ref(`custom-btn-select-${Math.random().toString(36).substring(7)}`)
+
+	defineExpose({
+		isOpen,
+		formattedItems,
+		selectedItem,
+	})
+</script>
+
+<template>
+	<div
+		ref="buttonRef"
+		class="vd-user-menu-btn-ctn d-inline-block"
+	>
+		<VMenu
+			:id="generatedId"
+			:disabled="!hasListContent"
+			location="bottom end"
+			transition="fade-transition"
+			v-bind="props.options['menu']"
+			z-index="9999"
+		>
+			<template #activator="{ props: menuProps }">
+				<VBtn
+					:id="generatedId"
+					:class="btnPadding"
+					:height="iconOnly ? 'auto' : undefined"
+					:icon="iconOnly"
+					:size="iconOnly ? 'x-large' : 'default'"
+					:width="iconOnly ? 'auto' : undefined"
+					class="vd-user-menu-btn"
+					v-bind="{
+						...menuProps,
+						...props.options['btn'],
+					}"
+					@click="toggleMenu"
+				>
+					<div
+						:class="['text-'+props?.options['btn']?.color]"
+						class="d-flex align-center"
+					>
+						<slot name="prepend-icon" />
+						<span class="d-sr-only">{{ props.label }}</span>
+						<span
+							v-if="!isMobileVersion && !iconOnly"
+							class="d-flex flex-column align-end py-1 mr-1"
+						>
+							<span
+								:class="`text-${props?.options['btn']?.textColor}`"
+								class="font-weight-bold"
+							>
+								{{ props.primaryInfo }}
+							</span>
+							<span
+								:class="`text-${props?.options['btn']?.textColor}`"
+								class="text-grey text-darken-2 font-weight-medium"
+							>
+								{{ props.secondaryInfo }}
+							</span>
+						</span>
+						<span
+							v-if="isMobileVersion && !iconOnly"
+							:class="`text-${props?.options['btn']?.textColor}`"
+							class="font-weight-bold text-caption"
+						>
+							{{ props.primaryInfo }}
+						</span>
+						<slot name="append-icon" />
+					</div>
+				</VBtn>
+			</template>
+			<slot name="content">
+				<VList
+					v-if="hasListContent"
+					v-bind="props.options['list']"
+				>
+					<VListItem
+						v-for="(item, index) in formattedItems"
+						:key="index"
+						:class="`text-${props?.options['list']?.textColor}`"
+						v-bind="props.options['list']"
+						:href="item.link"
+						@click="selectItem(item)"
+					>
+						<VListItemTitle v-bind="props.options['list']">
+							{{ item[props.textKey] }}
+						</VListItemTitle>
+					</VListItem>
+					<slot />
+					<slot name="footer-list-item" />
+				</VList>
+			</slot>
+		</VMenu>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens.scss';
+@use '@/assets/tokens' as *;
+
+.vd-user-menu-btn-ctn {
+  position: relative;
+  z-index: 1;
+
+  .v-btn.v-btn--density-default {
+    height: auto !important;
+  }
+
+  .v-btn {
+    text-transform: none !important;
+  }
+}
+
+.vd-user-menu-btn {
+  outline: none;
+  padding: 12px !important;
+
+  &:hover:before {
+    background: #000;
+    opacity: 0.05;
+  }
+
+  &:focus:before {
+    background: tokens.$blue-base;
+    opacity: 0.08;
+  }
+
+  &:focus {
+    background: rgba(tokens.$blue-base, 0.08) !important;
+  }
+}
+
+:deep(.vd-user-menu-btn:focus > .v-btn__overlay) {
+  opacity: 0 !important;
+}
+</style>

package/src/components/Customs/SyBtnSelect/constants/ExpertiseLevelEnum.ts

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

package/src/components/Customs/SyBtnSelect/tests/SyBtnSelect.spec.ts

@@ -0,0 +1,168 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SyBtnSelect from '../SyBtnSelect.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('SyBtnSelect', () => {
+	it('renders the component with default props', () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+			},
+		})
+
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.text()).toContain('John Doe')
+	})
+
+	it('shows secondaryInfo if provided', () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+				secondaryInfo: 'Additional Info',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Additional Info')
+	})
+
+	it('emits "update:modelValue" when an item is selected', async () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				menuItems: [
+					{ text: 'Option 1', value: 'option1' },
+					{ text: 'Option 2', value: 'option2' },
+				],
+				primaryInfo: 'John Doe',
+			},
+		})
+
+		const button = wrapper.find('.vd-user-menu-btn')
+		await button.trigger('click')
+
+		expect(wrapper.vm.isOpen).toBe(true)
+
+		const listItem = wrapper.findAllComponents({ name: 'VListItem' }).at(0)
+		expect(listItem).toBeTruthy()
+		await listItem?.trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')![0]).toEqual([
+			{ text: 'Option 1', value: 'option1' },
+		])
+	})
+
+	it('toggles the menu open and closed', async () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+			},
+		})
+
+		const button = wrapper.find('.vd-user-menu-btn')
+		expect(wrapper.vm.isOpen).toBe(false)
+
+		await button.trigger('click')
+		expect(wrapper.vm.isOpen).toBe(true)
+
+		await button.trigger('click')
+		expect(wrapper.vm.isOpen).toBe(false)
+	})
+
+	it('formats menu items correctly', () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+				menuItems: ['Option 1', 'Option 2'],
+			},
+		})
+
+		const formattedItems = wrapper.vm.formattedItems
+		expect(formattedItems).toEqual([
+			{ text: 'Option 1', value: 'Option 1' },
+			{ text: 'Option 2', value: 'Option 2' },
+		])
+	})
+
+	it('updates selectedItem when modelValue changes', async () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: 'initial-value',
+				primaryInfo: 'John Doe',
+			},
+		})
+
+		expect(wrapper.vm.selectedItem).toBe('initial-value')
+
+		await wrapper.setProps({ modelValue: 'new-value' })
+		expect(wrapper.vm.selectedItem).toBe('new-value')
+	})
+
+	it('renders the primaryInfo in a span when isMobileVersion and hideIcon are true', async () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+				isMobileView: true,
+				hideIcon: true,
+			},
+		})
+
+		const span = wrapper.find('span.font-weight-bold.text-caption')
+
+		expect(span.text()).toBe('John Doe')
+	})
+
+	it('does not render the span if isMobileVersion is false', () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+				isMobileView: false,
+				hideIcon: true,
+			},
+		})
+
+		const span = wrapper.find('span.font-weight-bold.text-sm-caption')
+		expect(span.exists()).toBe(false)
+	})
+
+	it('does not render the span if hideIcon is false', () => {
+		const wrapper = mount(SyBtnSelect, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				primaryInfo: 'John Doe',
+				isMobileView: true,
+				hideIcon: false,
+			},
+		})
+
+		const span = wrapper.find('span.font-weight-bold.text-sm-caption')
+		expect(span.exists()).toBe(false)
+	})
+})

package/src/components/Customs/SyInputSelect/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/Customs/SyInputSelect/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/Formulaires/SyInputSelect/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'],
+}