✨ vue-dot: Add CookiePage template

packages/vue-dot/dev/App.vue

@@ -12,9 +12,7 @@
 		</VAppBar>
 
 		<VMain>
-			<PageContainer>
-				<Playground />
-			</PageContainer>
+			<Playground />
 		</VMain>
 	</VApp>
 </template>
@@ -32,3 +30,41 @@
 	})
 	export default class App extends Vue {}
 </script>
+
+<style lang="scss">
+	@import '../src/styles/index.scss';
+
+	/* Default, global styles */
+	* {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		max-width: 100%;
+		box-sizing: border-box;
+		scroll-behavior: smooth;
+		font-family: 'Open Sans', sans-serif;
+	}
+
+	html,
+	body {
+		/* Font size defined by the browser */
+		font-size: 100%;
+	}
+
+	/* Hide the application while Vue.js is loading */
+	[v-cloak] {
+		display: none;
+	}
+
+	#app {
+		width: 100%;
+		display: flex;
+		min-height: 100vh;
+		background: #f8f9fc;
+	}
+
+	/* Apply default transition to links */
+	a {
+		transition: .25s;
+	}
+</style>

packages/vue-dot/src/templates/CookiesPage/CookieTable/CookieTable.vue

@@ -0,0 +1,58 @@
+<template>
+	<VSimpleTable class="vd-cookie-table">
+		<thead>
+			<tr>
+				<th
+					v-for="(item, index) in headers"
+					:key="index"
+					:style="{ width: item.width }"
+					class="text-left"
+				>
+					{{ item.label }}
+				</th>
+			</tr>
+		</thead>
+
+		<tbody>
+			<tr
+				v-for="(cookie, index) in items"
+				:key="index"
+			>
+				<td>{{ cookie.name }}</td>
+				<td>{{ cookie.description }}</td>
+				<td>{{ cookie.conservation }}</td>
+			</tr>
+		</tbody>
+	</VSimpleTable>
+</template>
+
+<script lang="ts">
+	import Vue, { PropType } from 'vue';
+	import Component, { mixins } from 'vue-class-component';
+
+	import { headers } from './headers';
+
+	import { CookiesList } from './types';
+
+	const Props = Vue.extend({
+		props: {
+			items: {
+				type: Array as PropType<CookiesList[]>,
+				required: true
+			}
+		}
+	});
+
+	const MixinsDeclaration = mixins(Props);
+
+	@Component
+	export default class CookiesPage extends MixinsDeclaration {
+		headers = headers;
+	}
+</script>
+
+<style lang="scss" scoped>
+	.vd-cookie-table ::v-deep table {
+		table-layout: fixed;
+	}
+</style>

packages/vue-dot/src/templates/CookiesPage/CookieTable/headers.ts

@@ -0,0 +1,14 @@
+export const headers = [
+	{
+		label: 'Dénomination du cookie',
+		width: '180px'
+	},
+	{
+		label: 'Finalité',
+		width: '328px'
+	},
+	{
+		label: 'Durée de conservation',
+		width: '180px'
+	}
+];

packages/vue-dot/src/templates/CookiesPage/CookieTable/index.ts

@@ -0,0 +1,3 @@
+import CookieTable from './CookieTable.vue';
+
+export default CookieTable;

packages/vue-dot/src/templates/CookiesPage/CookieTable/types.d.ts

@@ -0,0 +1,5 @@
+export interface CookiesList {
+	name: string;
+	description: string;
+	conservation: string;
+}

packages/vue-dot/src/templates/CookiesPage/CookiesInformation/CookiesInformation.vue

@@ -0,0 +1,155 @@
+<template>
+	<div class="vd-cookies-information">
+		<h2 class="text-subtitle-1 font-weight-bold mb-2">
+			{{ locales[type].title }}
+		</h2>
+
+		<p>
+			{{ locales[type].description }}
+		</p>
+
+		<details @toggle="toggleDetails">
+			<summary class="mb-1">
+				{{ detailsLabel }}
+
+				<VIcon class="mr-2">
+					{{ arrowIcon }}
+				</VIcon>
+			</summary>
+
+			<CookieTable
+				:items="cookies"
+				class="mb-2"
+			/>
+		</details>
+
+		<VRadioGroup
+			v-if="showRadios"
+			:value="parsedValue"
+			:rules="rules"
+			row
+			hide-details="auto"
+			class="mt-0"
+			@change="emitChangeEvent"
+		>
+			<VSpacer />
+
+			<VRadio
+				:label="locales.reject"
+				:value="RadioValuesEnum.REJECT"
+			/>
+
+			<VRadio
+				:label="locales.accept"
+				:value="RadioValuesEnum.ACCEPT"
+				class="mr-0"
+			/>
+		</VRadioGroup>
+	</div>
+</template>
+
+<script lang="ts">
+	import Vue, { PropType } from 'vue';
+	import Component, { mixins } from 'vue-class-component';
+
+	import { locales } from './locales';
+
+	import { TypeEnum, TYPE_ENUM_VALUES } from './TypeEnum';
+	import { RadioValuesEnum } from './RadioValuesEnum';
+
+	import CookieTable from '../CookieTable';
+	import { CookiesList } from '../CookieTable/types';
+
+	import { propValidator } from '../../../helpers/propValidator';
+
+	import { required } from '../../../rules/required';
+
+	import { mdiChevronDown, mdiChevronUp } from '@mdi/js';
+
+	const Props = Vue.extend({
+		props: {
+			type: {
+				type: String as PropType<TypeEnum>,
+				required: true,
+				validator: (value: string) => propValidator('type', TYPE_ENUM_VALUES, value)
+			},
+			cookies: {
+				type: Array as PropType<CookiesList[]>,
+				required: true
+			},
+			value: {
+				type: Boolean as PropType<boolean | null>,
+				default: null
+			}
+		}
+	});
+
+	const MixinsDeclaration = mixins(Props);
+
+	@Component({
+		components: {
+			CookieTable
+		},
+		model: {
+			prop: 'value',
+			event: 'change'
+		}
+	})
+	export default class CookiesInformation extends MixinsDeclaration {
+		RadioValuesEnum = RadioValuesEnum;
+		locales = locales;
+
+		rules = [
+			required
+		];
+
+		open = false;
+
+		get parsedValue(): string | null {
+			if (this.value === null) {
+				return null;
+			}
+
+			return this.value ? RadioValuesEnum.ACCEPT : RadioValuesEnum.REJECT;
+		}
+
+		get showRadios(): boolean {
+			return this.type !== TypeEnum.ESSENTIALS;
+		}
+
+		get detailsLabel(): string {
+			return this.open ? locales.hideInformation : locales.showInformation;
+		}
+
+		get arrowIcon(): string {
+			return this.open ? mdiChevronUp : mdiChevronDown;
+		}
+
+		toggleDetails(event: Event): void {
+			const { open } = event.target as HTMLDetailsElement;
+			this.open = open;
+		}
+
+		emitChangeEvent(value: string): void {
+			const parsedValue = value === RadioValuesEnum.ACCEPT;
+			this.$emit('change', parsedValue);
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	details > summary {
+		cursor: pointer;
+		list-style: none;
+		user-select: none;
+
+		&::marker,
+		&::-webkit-details-marker {
+			display: none;
+		}
+	}
+
+	.v-input--radio-group ::v-deep .v-messages {
+		text-align: right;
+	}
+</style>

packages/vue-dot/src/templates/CookiesPage/CookiesInformation/RadioValuesEnum.ts

@@ -0,0 +1,4 @@
+export enum RadioValuesEnum {
+	ACCEPT = 'accept',
+	REJECT = 'reject'
+}

packages/vue-dot/src/templates/CookiesPage/CookiesInformation/TypeEnum.ts

@@ -0,0 +1,7 @@
+export enum TypeEnum {
+	ESSENTIALS = 'essentials',
+	FUNCTIONAL = 'functional',
+	ANALYTICS = 'analytics'
+}
+
+export const TYPE_ENUM_VALUES = Object.values(TypeEnum);

packages/vue-dot/src/templates/CookiesPage/CookiesInformation/index.ts

@@ -0,0 +1,3 @@
+import CookiesInformation from './CookiesInformation.vue';
+
+export default CookiesInformation;

packages/vue-dot/src/templates/CookiesPage/CookiesInformation/locales.ts

@@ -0,0 +1,18 @@
+export const locales = {
+	essentials: {
+		title: 'Cookies requis',
+		description: 'Ces cookies sont indispensables au fonctionnement du site et ne peuvent être désactivés.'
+	},
+	functional: {
+		title: 'Cookies fonctionnels',
+		description: 'Ces cookies sont utilisés pour capturer vos préférences sur notre site. Ils permettent de vous assurer un confort dans votre navigation.'
+	},
+	analytics: {
+		title: 'Cookies d’analyse',
+		description: '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é.'
+	},
+	showInformation: 'Afficher les cookies',
+	hideInformation: 'Masquer les cookies',
+	reject: 'Refuser',
+	accept: 'Accepter'
+};