@cnamts/synapse 0.0.7-alpha → 0.0.8-alpha

package/src/components/ContextualMenu/ContextualMenu.stories.ts

@@ -0,0 +1,430 @@
+import { fn } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import ContextualMenu from './ContextualMenu.vue'
+import { ref, watch } from 'vue'
+
+const meta = {
+	title: 'Composants/Navigation/ContextualMenu',
+	component: ContextualMenu,
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		'items': {
+			control: 'object',
+			description: 'Les éléments du menu',
+			table: {
+				type: {
+					summary: 'Array<{ text: string, hash: string, level?: 1 | 2 | 3 | 4 | 5 | 6 }>',
+				},
+			},
+		},
+		'modelValue': {
+			description: 'Le hash de l’élément actif',
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				category: 'props',
+			},
+		},
+		'onUpdate:modelValue': {
+			description: 'Événement émis lorsqu’un élément est cliqué',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				category: 'events',
+			},
+		},
+	},
+} satisfies Meta<typeof ContextualMenu>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		'items': [
+			{
+				text: 'Titre 1',
+				hash: '#example-1',
+			},
+			{
+				text: 'Titre 2',
+				hash: '#example-2',
+			},
+			{
+				text: 'Titre 3',
+				hash: '#example-3',
+			},
+		],
+		'modelValue': '#example-1',
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { ContextualMenu },
+			setup() {
+				const hash = ref<string | null | undefined>()
+				watch(() => args.modelValue, (value) => {
+					hash.value = value
+				}, { immediate: true })
+				return { args, hash }
+			},
+			template: `
+				<ContextualMenu
+					v-bind="args"
+					v-model="hash"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+		<ContextualMenu 
+			:items="items" 
+		/>
+	</template>
+	`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { ContextualMenu } from '@cnamts/synapse'
+
+	const items = [
+		{
+			text: 'Titre 1',
+			hash: '#example-1',
+		},
+		{
+			text: 'Titre 2',
+			hash: '#example-2',
+		},
+		{
+			text: 'Titre 3,
+			hash: '#example-3',
+		},
+	]
+</script>
+	`,
+			},
+		],
+	},
+}
+
+export const WithAnchors: Story = {
+	args: {
+		'items': [{
+			text: 'section 1',
+			hash: '#section-1',
+		}, {
+			text: 'section 2',
+			hash: '#section-2',
+		}, {
+			text: 'section 3',
+			hash: '#section-3',
+		}, {
+			text: 'section 4',
+			hash: '#section-4',
+		}, {
+			text: 'section 5',
+			hash: '#section-5',
+		}],
+		'modelValue': '#section-1',
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { ContextualMenu },
+			setup() {
+				const hash = ref<string | null | undefined>()
+				watch(() => args.modelValue, (value) => {
+					hash.value = value
+				}, { immediate: true })
+				return { args, hash }
+			},
+			template: `
+	<div style="display: flex; flex-direction: row; justify-content: space-evenly; padding-top: 20px; padding-bottom: 20px; place-items: center; width: 500px;">
+		<div style="width: 200px">
+			<ContextualMenu
+				v-bind="args"
+				v-model="hash"
+			/>
+		</div>
+		<div style="border: 1px solid black; max-height: 500px; overflow-y: auto; scroll-behavior: smooth;">
+			<section id="section-1" style="padding: 20px">
+				<h2>section 1</h2>
+				<p style="max-width: 300px">
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
+					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
+				</p>
+			</section>
+			<section id="section-2" style="padding: 20px">
+				<h2>section 2</h2>
+				<p style="max-width: 300px">
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
+					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
+				</p>
+			</section>
+			<section id="section-3" style="padding: 20px">
+				<h2>section 3</h2>
+				<p style="max-width: 300px">
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
+					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
+				</p>
+			</section>
+			<section id="section-4" style="padding: 20px">
+				<h2>section 4</h2>
+				<p style="max-width: 300px">
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
+					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
+				</p>
+			</section>
+			<section id="section-5" style="padding: 20px">
+				<h2>section 5</h2>
+				<p style="max-width: 300px">
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
+					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
+				</p>
+			</section>
+		</div>
+	</div>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<div class="wrapper">
+		<div class="menu">
+			<ContextualMenu
+				v-model="hash"
+				:items
+			/>
+		</div>
+		<div class="content">
+			<section id="section-1">
+				<h2>section 1</h2>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
+					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
+				</p>
+			</section>
+			<section id="section-2">
+				<h2>section 2</h2>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
+					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
+				</p>
+			</section>
+			<section id="section-3">
+				<h2>section 3</h2>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
+					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
+				</p>
+			</section>
+			<section id="section-4">
+				<h2>section 4</h2>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
+					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
+				</p>
+			</section>
+			<section id="section-5">
+				<h2>section 5</h2>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
+					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
+				</p>
+			</section>
+		</div>
+	</div>
+</template>
+	`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { ContextualMenu } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const items = [{
+		text: 'section 1',
+		hash: '#section-1',
+	}, {
+		text: 'section 2',
+		hash: '#section-2',
+	}, {
+		text: 'section 3',
+		hash: '#section-3',
+	}, {
+		text: 'section 4',
+		hash: '#section-4',
+	}, {
+		text: 'section 5',
+		hash: '#section-5',
+	}]
+
+	const hash = ref<string | null>(null)
+</script>
+	`,
+			},
+			{
+				name: 'Style',
+				code: `<style lang="scss" scoped>
+.wrapper {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-evenly;
+	place-items: center;
+	height: 100dvh;
+	width: 500px;
+}
+.menu {
+	width: 200px;
+}
+.content {
+	border: 1px solid black;
+	height: 500px;
+	overflow-y: auto;
+	scroll-behavior: smooth;
+}
+
+section {
+	padding: 20px;
+}
+
+section p {
+	max-width: 300px;
+}
+
+</style>
+	`,
+			},
+		],
+	},
+}
+
+export const levels: Story = {
+	args: {
+		'items': [
+			{
+				text: 'Level 1',
+				hash: '#example-1',
+			},
+			{
+				text: 'Level 2',
+				hash: '#example-2',
+				level: 2,
+			},
+			{
+				text: 'Level 3',
+				hash: '#example-3',
+				level: 3,
+			},
+			{
+				text: 'Level 4',
+				hash: '#example-4',
+				level: 4,
+			},
+			{
+				text: 'Level 5',
+				hash: '#example-5',
+				level: 5,
+			},
+			{
+				text: 'Level 6',
+				hash: '#example-6',
+				level: 6,
+			},
+		],
+		'modelValue': '#example-1',
+		'onUpdate:modelValue': fn(),
+	},
+	render: (args) => {
+		return {
+			components: { ContextualMenu },
+			setup() {
+				const hash = ref<string | null | undefined>()
+				watch(() => args.modelValue, (value) => {
+					hash.value = value
+				}, { immediate: true })
+				return { args, hash }
+			},
+			template: `
+				<ContextualMenu
+					v-bind="args"
+					v-model="hash"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+		<ContextualMenu 
+			:items="items" 
+		/>
+	</template>
+	`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { ContextualMenu } from '@cnamts/synapse'
+
+	const items = [
+			{
+				text: 'Level 1',
+				hash: '#example-1',
+			},
+			{
+				text: 'Level 2',
+				hash: '#example-2',
+				level: 2,
+			},
+			{
+				text: 'Level 3',
+				hash: '#example-3',
+				level: 3,
+			},
+			{
+				text: 'Level 4',
+				hash: '#example-4',
+				level: 4,
+			},
+			{
+				text: 'Level 5',
+				hash: '#example-5',
+				level: 5,
+			},
+			{
+				text: 'Level 6',
+				hash: '#example-6',
+				level: 6,
+			},
+		]
+</script>
+	`,
+			},
+		],
+	},
+}

package/src/components/ContextualMenu/ContextualMenu.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+	import { type MenuItem } from './types'
+	import { onMounted, watch } from 'vue'
+
+	const model = defineModel<string | null>()
+
+	defineProps<{
+		items: MenuItem[]
+	}>()
+
+	onMounted(() => {
+		if (!model.value && window.location.hash) {
+			model.value = window.location.hash
+		}
+		addEventListener('hashchange', () => {
+			model.value = window.location.hash
+		})
+	})
+
+	watch(
+		model,
+		(newValue, oldValue) => {
+			if (newValue && newValue !== oldValue) {
+				setHash(newValue)
+			}
+		},
+		{ immediate: true },
+	)
+
+	function setHash(hash: string) {
+		if (window.location.hash === hash) {
+			return
+		}
+
+		window.location.hash = hash
+		model.value = hash
+	}
+</script>
+
+<template>
+	<ul
+		v-if="items.length"
+		class="vd-contextual-menu"
+	>
+		<li
+			v-for="{ text, hash, level } in items"
+			:key="hash"
+		>
+			<a
+				:href="hash"
+				:class="{
+					'text-primary active': model === hash,
+					'text-medium-emphasis': model !== hash,
+					'ps-4': level === 2,
+					'ps-6': level === 3,
+					'ps-9': level === 4,
+					'ps-12': level === 5,
+					'ps-14': level === 6,
+				}"
+				class="d-flex align-center text-decoration-none text-body-1 px-4 py-2"
+				@click.prevent.stop="setHash(hash)"
+				v-text="text"
+			/>
+		</li>
+	</ul>
+</template>
+
+<style lang="scss" scoped>
+ul {
+	list-style: none;
+}
+
+a {
+	position: relative;
+	transition: none;
+
+	&::before {
+		content: '';
+		width: 2px;
+		background: rgb(0 0 0 / 60%);
+		position: absolute;
+		left: 0;
+		height: 100%;
+	}
+
+	&::after {
+		content: '';
+		width: 4px;
+		border-radius: 0 2px 2px 0;
+		background: currentcolor;
+		position: absolute;
+		left: 0;
+		height: 100%;
+		opacity: 0;
+	}
+
+	&.active::after {
+		opacity: 1;
+	}
+}
+</style>

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

@@ -0,0 +1,115 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import ContextualMenu from '../ContextualMenu.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('ContextualMenu', () => {
+	it('renders correctly with items', () => {
+		const wrapper = mount(ContextualMenu, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [
+					{
+						text: 'Titre 1',
+						hash: '#example-1',
+					},
+					{
+						text: 'Titre 2',
+						hash: '#example-2',
+					},
+				],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly without items', () => {
+		const wrapper = mount(ContextualMenu, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('emit an update:modelValue event when an item is updated', async () => {
+		const wrapper = mount(ContextualMenu, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [
+					{
+						text: 'Titre 1',
+						hash: '#example-1',
+					},
+					{
+						text: 'Titre 2',
+						hash: '#example-2',
+					},
+				],
+			},
+		})
+
+		await wrapper.find('a').trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#example-1'])
+	})
+
+	it('update the highlighted item when the modelValue is updated', async () => {
+		const wrapper = mount(ContextualMenu, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [
+					{
+						text: 'Titre 1',
+						hash: '#example-1',
+					},
+					{
+						text: 'Titre 2',
+						hash: '#example-2',
+					},
+				],
+				modelValue: '#example-2',
+			},
+		})
+
+		expect(wrapper.find('[href="#example-2"]').classes()).toContain('active')
+	})
+
+	it('initialize with the content of location.href', async () => {
+		window.location.hash = '#example-2'
+
+		const wrapper = mount(ContextualMenu, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [
+					{
+						text: 'Titre 1',
+						hash: '#example-1',
+					},
+					{
+						text: 'Titre 2',
+						hash: '#example-2',
+					},
+				],
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		expect(wrapper.find('[href="#example-2"]').classes()).toContain('active')
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['#example-2'])
+	})
+})

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

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ContextualMenu > renders correctly with items 1`] = `
+"<ul data-v-b65f24a2="" class="vd-contextual-menu">
+  <li data-v-b65f24a2=""><a data-v-b65f24a2="" href="#example-1" class="text-medium-emphasis d-flex align-center text-decoration-none text-body-1 px-4 py-2">Titre 1</a></li>
+  <li data-v-b65f24a2=""><a data-v-b65f24a2="" href="#example-2" class="text-medium-emphasis d-flex align-center text-decoration-none text-body-1 px-4 py-2">Titre 2</a></li>
+</ul>"
+`;
+
+exports[`ContextualMenu > renders correctly without items 1`] = `"<!--v-if-->"`;

package/src/components/ContextualMenu/types.ts

@@ -0,0 +1,5 @@
+export interface MenuItem {
+	text: string
+	hash: string
+	level?: number
+}

package/src/components/CookieBanner/CookieBanner.stories.ts

@@ -617,7 +617,6 @@ export const Customization: Story = {
 		@reject="onReject"
 		@customize="onCustomize"
 		v-model="modelValue"
-		:cookiesRoute="cookiesRoute"
 		:vuetifyOptions="vuetifyOptions"
 	/>
 </template>`,
@@ -659,7 +658,7 @@ export const Customization: Story = {
 	}
 
 	const vuetifyOptions = {
-		sheet: {
+		banner: {
 			color: '#ced9eb',
 		},
 		customizeBtn: {