@cnamts/synapse 0.0.4-alpha → 0.0.6-alpha

package/src/components/CookieBanner/CookieBanner.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+	import type { CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import useCustomizableOptions from '@/composables/useCustomizableOptions'
+	import { mdiClose, mdiArrowULeftBottom } from '@mdi/js'
+	import { computed, ref } from 'vue'
+	import { useDisplay } from 'vuetify'
+	import type { CookiesItems } from '../CookiesSelection/types'
+	import { config } from './config'
+	import { locales } from './locales'
+	import CookiesSelection from '../CookiesSelection/CookiesSelection.vue'
+
+	const props = defineProps<CustomizableOptions & {
+		items?: CookiesItems
+	}>()
+
+	const options = useCustomizableOptions(config, props)
+
+	const emits = defineEmits(['reject', 'accept', 'customize', 'submit'])
+
+	const active = defineModel({
+		type: Boolean,
+		default: true,
+	})
+
+	const showCookiesSelection = ref(false)
+
+	const display = useDisplay()
+	const btnWidth = computed(() => {
+		return display.smAndDown.value ? '100%' : 'auto'
+	})
+
+	function reject(): void {
+		active.value = false
+		emits('reject')
+	}
+
+	function accept(): void {
+		active.value = false
+		emits('accept')
+	}
+
+	function customize(): void {
+		if (props.items) {
+			showCookiesSelection.value = true
+		}
+		emits('customize')
+	}
+
+	function personalizeCookies(e: Record<string, unknown>) {
+		emits('submit', e)
+		showCookiesSelection.value = false
+		active.value = false
+	}
+</script>
+
+<template>
+	<Teleport
+		v-if="active"
+		to="body"
+	>
+		<VSheet
+			v-bind="options.banner"
+			:aria-label="locales.label"
+			class="vd-cookie-banner"
+		>
+			<div class="vd-cookie-banner__inner">
+				<div class="d-flex align-start flex-nowrap pa-0 mb-6">
+					<h2 class="text-h5 font-weight-bold">
+						{{ locales.title }}
+					</h2>
+
+					<VSpacer v-bind="options.spacer" />
+
+					<VBtn
+						v-if="showCookiesSelection"
+						v-bind="options.backBtn"
+						:aria-label="locales.backBtn"
+						@click="showCookiesSelection = false"
+					>
+						<VIcon v-bind="options.icon">
+							{{ mdiArrowULeftBottom }}
+						</VIcon>
+					</VBtn>
+					<VBtn
+						v-else
+						v-bind="options.closeBtn"
+						:aria-label="locales.closeBtn"
+						@click="reject"
+					>
+						<VIcon v-bind="options.icon">
+							{{ mdiClose }}
+						</VIcon>
+					</VBtn>
+				</div>
+				<div class="vd-cookie-banner-content">
+					<Transition name="height">
+						<div v-if="showCookiesSelection && items">
+							<CookiesSelection
+								:items
+								@submit="personalizeCookies"
+							>
+								<template
+									v-for="(_, slotName) in $slots"
+									#[slotName]="slotProps"
+								>
+									<slot
+										:name="slotName"
+										v-bind="slotProps || {}"
+									/>
+								</template>
+							</CookiesSelection>
+						</div>
+						<div v-else>
+							<slot>
+								<p>
+									{{ locales.description }}
+								</p>
+							</slot>
+
+							<div
+								class="vd-cookie-banner-action-ctn d-flex align-center flex-wrap max-width-none mt-6 ga-4"
+							>
+								<VSpacer v-bind="options.actionsSpacer" />
+
+								<VBtn
+									v-bind="options.customizeBtn"
+									data-test-id="customize"
+									:width="btnWidth"
+									@click="customize"
+								>
+									{{ locales.customizeBtnText }}
+								</VBtn>
+
+								<VBtn
+									v-bind="options.rejectBtn"
+									data-test-id="reject"
+									:width="btnWidth"
+									@click="reject"
+								>
+									{{ locales.rejectBtnText }}
+								</VBtn>
+
+								<VBtn
+									v-bind="options.acceptBtn"
+									data-test-id="accept"
+									:width="btnWidth"
+									@click="accept"
+								>
+									{{ locales.acceptBtnText }}
+								</VBtn>
+							</div>
+						</div>
+					</Transition>
+				</div>
+			</div>
+		</VSheet>
+	</Teleport>
+</template>
+
+<style lang="scss" scoped>
+
+.vd-cookie-banner {
+	position: fixed;
+	left: 50%;
+	bottom: 0;
+	display: flex;
+	transform: translateX(-50%);
+	z-index: 20;
+	max-height: calc(100dvh - 64px);
+	width: calc(100% - 64px);
+	max-width: 1200px;
+	margin-bottom: 32px;
+}
+
+.vd-cookie-banner__inner {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+  background: transparent;
+}
+
+.vd-cookie-banner-content {
+	overflow-y: auto;
+	padding-right: 8px;
+  background: transparent;
+  div {
+    background: transparent;
+  }
+}
+
+.vd-cookie-banner-action-ctn .v-btn {
+	flex: 1 1 auto;
+}
+
+.v-btn--icon {
+	color: rgba(0, 0, 0, 0.54);
+	position: absolute;
+	right: 24px;
+}
+
+.height-enter-active, .height-leave-active {
+	box-sizing: border-box;
+	transition: height 2s ease;
+	interpolate-size: allow-keywords;
+	overflow: hidden;
+	background-color: white;
+}
+
+.height-enter-active {
+	transition: height 0.5s ease;
+}
+
+.height-leave-active {
+	transition: height 0.1s ease;
+}
+
+.height-enter-from, .height-leave-to {
+	height: 0;
+}
+
+.height-enter-to, .height-leave-from {
+	height: auto;
+}
+
+</style>

package/src/components/CookieBanner/config.ts

@@ -0,0 +1,38 @@
+const commonBtnConfig = {
+	color: 'primary',
+	height: 'auto',
+	minHeight: '44px',
+	class: 'text-wrap',
+} as const
+
+export const config = {
+	banner: {
+		rounded: true,
+		elevation: 2,
+		class: 'pa-8',
+	},
+	closeBtn: {
+		icon: true,
+		variant: 'text',
+		width: '32px',
+		height: '32px',
+		class: 'ml-4',
+	},
+	backBtn: {
+		icon: true,
+		variant: 'text',
+		width: '32px',
+		height: '32px',
+		class: 'ml-4',
+	},
+	customizeBtn: {
+		...commonBtnConfig,
+		variant: 'outlined',
+	},
+	rejectBtn: {
+		...commonBtnConfig,
+	},
+	acceptBtn: {
+		...commonBtnConfig,
+	},
+} as const

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

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

package/src/components/CookieBanner/locales.ts

@@ -0,0 +1,12 @@
+export const locales = {
+	label: 'Gestion des cookies',
+	title: 'À propos des cookies',
+	closeBtn: 'Continuer sans accepter',
+	backBtn: 'Précédent',
+	description:
+		'Ce site utilise des cookies qui nous permettent de vous proposer une expérience en ligne optimale en enregistrant certaines informations lors de votre navigation.',
+	moreInformationLabel: 'En savoir plus',
+	customizeBtnText: 'Personnaliser mes choix',
+	rejectBtnText: 'Continuer sans accepter',
+	acceptBtnText: 'Tout accepter',
+}

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

@@ -0,0 +1,129 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import CookieBanner from '../CookieBanner.vue'
+import { vuetify } from '@tests/unit/setup'
+describe('CookieBanner', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(CookieBanner, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly on small screens', async () => {
+		// @ts-expect-error  - Property 'happyDOM' does not exist on type 'Window & typeof globalThis'.
+		window.happyDOM.setInnerWidth(600)
+
+		const wrapper = mount(CookieBanner, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
+			},
+		})
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.find('[data-test-id="customize"]').attributes('style')).toContain('100%')
+	})
+
+	it('emit a reject event when the reject btn is clicked', async () => {
+		const wrapper = mount(CookieBanner, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
+			},
+		})
+
+		await wrapper.find('[data-test-id="reject"]').trigger('click')
+
+		expect(wrapper.emitted()).toHaveProperty('reject')
+	})
+
+	it('emit a accept event when the accept btn is clicked', async () => {
+		const wrapper = mount(CookieBanner, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
+			},
+		})
+
+		await wrapper.find('[data-test-id="accept"]').trigger('click')
+
+		expect(wrapper.emitted()).toHaveProperty('accept')
+	})
+
+	it('does not close the dialog when the customize button is clicked and do not show the cookie form', async () => {
+		const wrapper = mount(CookieBanner, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
+			},
+		})
+
+		expect(wrapper.find('.vd-cookie-banner').exists()).toBe(true)
+		await wrapper.find('[data-test-id="customize"]').trigger('click')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('.vd-cookie-banner').exists()).toBe(true)
+		expect(wrapper.find('.vd-cookies-card').exists()).toBe(false)
+		expect(wrapper.emitted()).toHaveProperty('customize')
+	})
+
+	it('does not close the dialog when the customize button is clicked and show the cookie form', async () => {
+		const wrapper = mount(CookieBanner, {
+			props: {
+				items: {
+					essentials: [
+						{
+							name: 'session',
+							description: 'Sauvegarde la session pour rester connecté.',
+							conservation: '20 heures',
+						},
+						{
+							name: 'cookie_policy',
+							description: 'Sauvegarde les préférences de cookies.',
+							conservation: '1 an',
+						},
+					],
+					functional: [
+						{
+							name: 'contrast',
+							description: 'Sauvegarde la personnalisation de l’affichage.',
+							conservation: '1 an',
+						},
+					],
+					analytics: [
+						{
+							name: 'user_id',
+							description: 'Sauvegarde l’identifiant unique de visiteur.',
+							conservation: '6 mois',
+						},
+					],
+				},
+			},
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					Teleport: true,
+				},
+			},
+		})
+
+		expect(wrapper.find('.vd-cookie-banner').exists()).toBe(true)
+		await wrapper.find('[data-test-id="customize"]').trigger('click')
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('.vd-cookie-banner').exists()).toBe(true)
+		expect(wrapper.find('.vd-cookies-card').exists()).toBe(true)
+		expect(wrapper.find('.vd-cookies-card').html()).toMatchSnapshot()
+		expect(wrapper.emitted()).toHaveProperty('customize')
+	})
+})

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

@@ -0,0 +1,197 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CookieBanner > does not close the dialog when the customize button is clicked and show the cookie form 1`] = `
+"<div data-v-f92e5352="" class="v-card v-theme--light bg-transparent v-card--density-default elevation-0 v-card--variant-elevated vd-cookies-card">
+  <!---->
+  <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>
+  <!---->
+  <!---->
+  <form class="v-form" novalidate="">
+    <p class="mb-4">Définissez vos préférences de collecte et de traitement de vos données sur ce site.</p>
+    <p class="mb-4">Un cookie est un petit fichier texte déposé sur votre terminal (ordinateur, tablette ou mobile) lors de la visite d’un site ou lors de la consultation d’une publicité. Il contient plusieurs données&nbsp;: le nom du service qui l’a déposé, un identifiant sous forme de numéro unique, une valeur et éventuellement une date d’expiration.</p>
+    <div class="d-flex flex-wrap justify-end mx-n2 mt-n2 mb-6"><button type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined ma-2" data-test-id="reject-all"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator="">Tout refuser</span>
+        <!---->
+        <!---->
+      </button><button type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined ma-2" data-test-id="accept-all"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator="">Tout accepter</span>
+        <!---->
+        <!---->
+      </button></div>
+    <div data-v-2ca04413="" class="vd-cookies-information mb-6">
+      <h2 data-v-2ca04413="" class="text-subtitle-1 font-weight-bold mb-2">Cookies requis</h2>
+      <p data-v-2ca04413="" class="mb-4">Ces cookies sont indispensables au fonctionnement du site et ne peuvent être désactivés.</p>
+      <details data-v-2ca04413="">
+        <summary data-v-2ca04413="" class="mb-1">Afficher les cookies <i data-v-2ca04413="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-default mr-2" aria-hidden="true" data-test="chevron"></i></summary>
+        <div data-v-d0e8c396="" data-v-2ca04413="" class="v-table v-theme--light v-table--density-default vd-cookie-table bg-transparent mb-2">
+          <!---->
+          <div class="v-table__wrapper">
+            <table>
+              <thead data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                </tr>
+              </thead>
+              <tbody data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <td data-v-d0e8c396="">session</td>
+                  <td data-v-d0e8c396="">Sauvegarde la session pour rester connecté.</td>
+                  <td data-v-d0e8c396="">20 heures</td>
+                </tr>
+                <tr data-v-d0e8c396="">
+                  <td data-v-d0e8c396="">cookie_policy</td>
+                  <td data-v-d0e8c396="">Sauvegarde les préférences de cookies.</td>
+                  <td data-v-d0e8c396="">1 an</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!---->
+        </div>
+      </details>
+      <!--v-if-->
+    </div>
+    <div data-v-2ca04413="" class="vd-cookies-information mb-6">
+      <h2 data-v-2ca04413="" class="text-subtitle-1 font-weight-bold mb-2">Cookies fonctionnels</h2>
+      <p data-v-2ca04413="" class="mb-4">Ces cookies sont utilisés pour capturer vos préférences sur notre site. Ils permettent de vous assurer un confort dans votre navigation.</p>
+      <details data-v-2ca04413="">
+        <summary data-v-2ca04413="" class="mb-1">Afficher les cookies <i data-v-2ca04413="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-default mr-2" aria-hidden="true" data-test="chevron"></i></summary>
+        <div data-v-d0e8c396="" data-v-2ca04413="" class="v-table v-theme--light v-table--density-default vd-cookie-table bg-transparent mb-2">
+          <!---->
+          <div class="v-table__wrapper">
+            <table>
+              <thead data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                </tr>
+              </thead>
+              <tbody data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <td data-v-d0e8c396="">contrast</td>
+                  <td data-v-d0e8c396="">Sauvegarde la personnalisation de l’affichage.</td>
+                  <td data-v-d0e8c396="">1 an</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!---->
+        </div>
+      </details>
+      <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
+        <!---->
+        <div class="v-input__control">
+          <!---->
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-7-messages">
+            <div data-v-2ca04413="" class="v-spacer"></div>
+            <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
+              <div class="v-selection-control__wrapper">
+                <!---->
+                <div class="v-selection-control__input"><i class="mdi-radiobox-blank mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><input id="input-10" aria-disabled="false" aria-label="Refuser" type="radio" name="radio-group-7" value="reject"></div>
+              </div><label class="v-label v-label--clickable" for="input-10">
+                <!---->Refuser
+              </label>
+            </div>
+            <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio mr-0">
+              <div class="v-selection-control__wrapper">
+                <!---->
+                <div class="v-selection-control__input"><i class="mdi-radiobox-blank mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><input id="input-11" aria-disabled="false" aria-label="Accepter" type="radio" name="radio-group-7" value="accept"></div>
+              </div><label class="v-label v-label--clickable" for="input-11">
+                <!---->Accepter
+              </label>
+            </div>
+          </div>
+        </div>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div data-v-2ca04413="" class="vd-cookies-information mb-6">
+      <h2 data-v-2ca04413="" class="text-subtitle-1 font-weight-bold mb-2">Cookies d’analyse</h2>
+      <p data-v-2ca04413="" class="mb-4">Ces cookies sont dédiés à l’amélioration de notre site en analysant votre expérience d’utilisation. Ils nous sont très utiles pour vous proposer un site de bonne qualité.</p>
+      <details data-v-2ca04413="">
+        <summary data-v-2ca04413="" class="mb-1">Afficher les cookies <i data-v-2ca04413="" class="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z mdi v-icon notranslate v-theme--light v-icon--size-default mr-2" aria-hidden="true" data-test="chevron"></i></summary>
+        <div data-v-d0e8c396="" data-v-2ca04413="" class="v-table v-theme--light v-table--density-default vd-cookie-table bg-transparent mb-2">
+          <!---->
+          <div class="v-table__wrapper">
+            <table>
+              <thead data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Dénomination du cookie</th>
+                  <th data-v-d0e8c396="" style="width: 328px;" class="text-left">Finalité</th>
+                  <th data-v-d0e8c396="" style="width: 180px;" class="text-left">Durée de conservation</th>
+                </tr>
+              </thead>
+              <tbody data-v-d0e8c396="">
+                <tr data-v-d0e8c396="">
+                  <td data-v-d0e8c396="">user_id</td>
+                  <td data-v-d0e8c396="">Sauvegarde l’identifiant unique de visiteur.</td>
+                  <td data-v-d0e8c396="">6 mois</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <!---->
+        </div>
+      </details>
+      <div data-v-2ca04413="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-radio-group vd-cookies-information__radio-group" data-test-id="radio-group">
+        <!---->
+        <div class="v-input__control">
+          <!---->
+          <div class="v-selection-control-group v-selection-control-group--inline" role="radiogroup" aria-describedby="radio-group-12-messages">
+            <div data-v-2ca04413="" class="v-spacer"></div>
+            <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio">
+              <div class="v-selection-control__wrapper">
+                <!---->
+                <div class="v-selection-control__input"><i class="mdi-radiobox-blank mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><input id="input-15" aria-disabled="false" aria-label="Refuser" type="radio" name="radio-group-12" value="reject"></div>
+              </div><label class="v-label v-label--clickable" for="input-15">
+                <!---->Refuser
+              </label>
+            </div>
+            <div data-v-2ca04413="" class="v-selection-control v-selection-control--inline v-selection-control--density-default v-radio mr-0">
+              <div class="v-selection-control__wrapper">
+                <!---->
+                <div class="v-selection-control__input"><i class="mdi-radiobox-blank mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><input id="input-16" aria-disabled="false" aria-label="Accepter" type="radio" name="radio-group-12" value="accept"></div>
+              </div><label class="v-label v-label--clickable" for="input-16">
+                <!---->Accepter
+              </label>
+            </div>
+          </div>
+        </div>
+        <!---->
+        <!---->
+      </div>
+    </div>
+    <div class="d-flex mt-16">
+      <div class="v-spacer"></div><button 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="submit"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator="">Enregistrer mes choix</span>
+        <!---->
+        <!---->
+      </button>
+    </div>
+  </form>
+  <!---->
+  <!----><span class="v-card__underlay"></span>
+</div>"
+`;
+
+exports[`CookieBanner > renders correctly 1`] = `
+"<!--teleport start-->
+<!--teleport end-->"
+`;