@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/ExternalLinks/ExternalLinks.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+	import {
+		mdiChevronRight as rightArrowIcon,
+		mdiChevronLeft as leftArrowIcon,
+		mdiOpenInNew as linkIcon,
+	} from '@mdi/js'
+
+	import { locales } from './locales'
+	import { computed, ref, type CSSProperties } from 'vue'
+	import { convertToUnit } from '@/utils/convertToUnit'
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { config } from './config'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		items: Array<{
+			text: string
+			href: string
+		}>
+		position?: 'top right' | 'top left' | 'bottom right' | 'bottom left'
+		btnText?: string
+		nudgeTop?: number | string
+		nudgeBottom?: number | string
+		fixed?: boolean
+		ariaLabel?: string
+		ariaOwns?: string
+	}>(), {
+		position: 'top left',
+		btnText: locales.btnText,
+		nudgeTop: 0,
+		nudgeBottom: 0,
+		fixed: false,
+		ariaLabel: 'external-link-btn',
+		ariaOwns: 'external-link-btn',
+	})
+
+	const options = useCustomizableOptions(config, props)
+
+	const menu = ref(false)
+	const hover = ref(false)
+	const open = computed(() => menu.value || hover.value)
+
+	const left = computed(() => props.position.includes('left'))
+	const top = computed(() => props.position.includes('top'))
+
+	const btnStyle = computed<CSSProperties>(() => {
+		const minBtnWidth = '48px'
+		const translate = left.value
+			? `translateX(calc(-100% + ${minBtnWidth}))`
+			: `translateX(calc(100% - ${minBtnWidth}))`
+
+		return {
+			transform: open.value ? 'translateX(0)' : translate,
+			position: props.fixed ? 'fixed' : 'absolute',
+			flexDirection: left.value ? 'row' : 'row-reverse',
+			top: top.value ? convertToUnit(props.nudgeTop) : 'auto',
+			bottom: !top.value ? convertToUnit(props.nudgeBottom) : 'auto',
+			left: left.value ? 0 : 'auto',
+			right: !left.value ? 0 : 'auto',
+			// Change z-index to avoid shadow bleeding (VMenu is set to 4)
+			zIndex: top.value ? '4' : '5',
+		}
+	})
+
+	const arrowIcon = computed(() => {
+		if (open.value) {
+			return left.value ? leftArrowIcon : rightArrowIcon
+		}
+		return left.value ? rightArrowIcon : leftArrowIcon
+	})
+</script>
+
+<template>
+	<div
+		:id="props.ariaOwns"
+	>
+		<VMenu
+			v-bind="options.menu"
+			:id="props.ariaOwns"
+			v-model="menu"
+			:location="top ? 'bottom' : 'top'"
+			attach
+			transition="fade-transition"
+			class="vd-external-links"
+			:class="{
+				'vd-external-links--left': left,
+				'vd-external-links--right': !left,
+			}"
+		>
+			<template #activator="{ props: vMenuProps }">
+				<VBtn
+					v-bind="{
+						...vMenuProps,
+						...options.btn,
+					}"
+					:aria-label="props.ariaLabel"
+					:aria-owns="props.ariaOwns"
+					:style="btnStyle"
+					class="vd-external-links-btn"
+					@mouseenter="hover = true"
+					@mouseleave="hover = false"
+					@focusin="hover = true"
+					@focusout="hover = false"
+				>
+					<span
+						:class="{
+							'ml-3': !left,
+							'mr-3': left,
+						}"
+						class="vd-external-links-btn-text white--text"
+					>
+						{{ btnText }}
+					</span>
+
+					<VIcon v-bind="options.btnIcon">
+						{{ arrowIcon }}
+					</VIcon>
+				</VBtn>
+			</template>
+
+			<VList
+				v-if="items.length"
+				v-bind="options.list"
+				class="vd-external-links-list"
+			>
+				<VListItem
+					v-for="(item, index) in items"
+					:key="index"
+					:href="item.href"
+					v-bind="options.listItem"
+				>
+					<div class="d-flex flex-row justify-space-between">
+						<VListItemTitle v-bind="options.listItemTitle">
+							{{ item.text }}
+						</VListItemTitle>
+
+						<slot name="link-icon">
+							<VIcon v-bind="options.linkIcon">
+								{{ linkIcon }}
+							</VIcon>
+						</slot>
+					</div>
+				</VListItem>
+			</VList>
+
+			<VSheet
+				v-else
+				v-bind="options.sheet"
+			>
+				<p class="mb-0">
+					{{ locales.noData }}
+				</p>
+			</VSheet>
+		</VMenu>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+$list-max-height: 248px;
+
+.vd-external-links-btn {
+	// Allow overgrow on mobile
+	max-width: none;
+
+	:deep(.v-btn__content) {
+		flex-direction: inherit;
+		justify-content: space-between;
+		width: 100%;
+	}
+
+	.v-icon {
+		font-size: 1.5rem;
+	}
+}
+
+.vd-external-links--left :deep(.v-overlay__content) {
+	left: 0 !important;
+	right: auto !important;
+}
+
+.vd-external-links--right :deep(.v-overlay__content) {
+	right: 0 !important;
+	left: auto !important;
+}
+
+.vd-external-links > :deep(.v-overlay__content) {
+	border-radius: 0;
+}
+
+.vd-external-links-list {
+	max-height: $list-max-height;
+	overflow-y: auto;
+	border-radius: 0;
+}
+
+@media only screen and (height <= 340px) {
+	.vd-external-links-btn {
+		z-index: 4 !important;
+	}
+}
+</style>

package/src/components/ExternalLinks/config.ts

@@ -0,0 +1,34 @@
+import { cnamColorsTokens } from '@/designTokens/tokens/cnam/cnamColors'
+
+export const config = {
+	menu: {
+		tile: true,
+		zIndex: 4,
+		offset: 0,
+	},
+	btn: {
+		tile: true,
+		minHeight: '48px',
+		minWidth: '328px',
+		color: cnamColorsTokens.blue.lighten20,
+		class: 'd-flex px-3',
+	},
+	btnIcon: {
+		color: 'white',
+	},
+	linkIcon: {
+		color: 'rgba(0, 0, 0, .54)',
+	},
+	list: {
+		border: false,
+		elevation: 3,
+		class: 'py-0',
+	},
+	listItem: {
+		target: '_blank',
+		rel: 'noopener noreferrer',
+	},
+	sheet: {
+		class: 'px-4 py-3',
+	},
+}

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

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

package/src/components/ExternalLinks/locales.ts

@@ -0,0 +1,4 @@
+export const locales = {
+	noData: 'Pas de données.',
+	btnText: 'Consulter les données externes',
+}

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

@@ -0,0 +1,154 @@
+import { describe, it, expect } from 'vitest'
+import { shallowMount, mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import { locales } from '../locales'
+
+import ExternalLinks from '../ExternalLinks.vue'
+
+describe('ExternalLinks', () => {
+	it('renders correctly', () => {
+		const wrapper = shallowMount(ExternalLinks, {
+			props: {
+				position: 'top left',
+				items: [
+					{
+						text: 'ameli.fr',
+						href: 'https://www.ameli.fr',
+					},
+					{
+						text: 'Github',
+						href: 'https://www.github.com',
+					},
+					{
+						text: 'Twitter',
+						href: 'https://www.twitter.com',
+					},
+				],
+				btnText: 'External Links',
+				nudgeTop: '0px',
+				nudgeBottom: '0px',
+				fixed: true,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('opens the menu when the button is clicked', async () => {
+		const wrapper = mount(ExternalLinks, {
+			props: {
+				position: 'top left',
+				items: [
+					{
+						text: 'ameli.fr',
+						href: 'https://www.ameli.fr',
+					},
+					{
+						text: 'Github',
+						href: 'https://www.github.com',
+					},
+					{
+						text: 'Twitter',
+						href: 'https://www.twitter.com',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const button = wrapper.find('button')
+		expect(wrapper.find('.vd-external-links-list').exists()).toBe(false)
+		await button.trigger('click')
+		expect(wrapper.find('.vd-external-links-list').exists()).toBe(true)
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly without items', async () => {
+		const wrapper = mount(ExternalLinks, {
+			props: {
+				position: 'top left',
+				items: [],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const button = wrapper.find('button')
+		await button.trigger('click')
+
+		expect(wrapper.text()).toContain(locales.noData)
+	})
+
+	it('renders correctly with fixed prop', async () => {
+		const wrapper = mount(ExternalLinks, {
+			props: {
+				position: 'bottom right',
+				items: [
+					{
+						text: 'ameli.fr',
+						href: 'https://www.ameli.fr',
+					},
+					{
+						text: 'Github',
+						href: 'https://www.github.com',
+					},
+					{
+						text: 'Twitter',
+						href: 'https://www.twitter.com',
+					},
+				],
+				fixed: true,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const button = wrapper.find('button')
+		await button.trigger('click')
+
+		expect(wrapper.html()).toMatchSnapshot()
+		expect(wrapper.find('.vd-external-links-btn').attributes('style')).toContain('position: fixed;')
+	})
+
+	it('slides on hover or focus', async () => {
+		const wrapper = mount(ExternalLinks, {
+			props: {
+				position: 'bottom right',
+				items: [],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const button = wrapper.find('button')
+		expect(button.attributes('style')).toContain('transform: translateX(calc(100% - 48px));')
+		expect(wrapper.html()).toMatchSnapshot()
+
+		// set hover in mouseenter
+		await button.trigger('mouseenter')
+		expect(button.attributes('style')).toContain('transform: translateX(0);')
+		expect(wrapper.html()).toMatchSnapshot()
+
+		// remove hover mouseleave
+		await button.trigger('mouseleave')
+		expect(button.attributes('style')).toContain('transform: translateX(calc(100% - 48px));')
+		expect(wrapper.html()).toMatchSnapshot()
+
+		// set hover in focusin
+		await button.trigger('focusin')
+		expect(button.attributes('style')).toContain('transform: translateX(0);')
+		expect(wrapper.html()).toMatchSnapshot()
+
+		// remove hover focusout
+		await button.trigger('focusout')
+		expect(button.attributes('style')).toContain('transform: translateX(calc(100% - 48px));')
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

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

@@ -0,0 +1,159 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;" aria-haspopup="menu" aria-expanded="true" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="mr-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div class="v-overlay v-overlay--absolute v-overlay--active v-theme--light v-locale--is-ltr v-menu vd-external-links vd-external-links--left" style="z-index: 4;" id="external-link-btn" data-v-353763df="" tile="true">
+    <transition-stub name="fade-transition" appear="true" persisted="false" css="true">
+      <!---->
+    </transition-stub>
+    <transition-stub name="fade-transition" appear="true" persisted="true" css="true" target="<button data-v-353763df=&quot;&quot; type=&quot;button&quot; class=&quot;v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn&quot; style=&quot;background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;external-link-btn&quot; aria-label=&quot;external-link-btn&quot; aria-owns=&quot;external-link-btn&quot;><span class=&quot;v-btn__overlay&quot;></span><span class=&quot;v-btn__underlay&quot;></span><!----><span class=&quot;v-btn__content&quot; data-no-activator=&quot;&quot;><span data-v-353763df=&quot;&quot; class=&quot;mr-3 vd-external-links-btn-text white--text&quot;>Consulter les données externes</span><i data-v-353763df=&quot;&quot; class=&quot;M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white&quot; aria-hidden=&quot;true&quot;></i></span><!----><!----></button>">
+      <div class="v-overlay__content" style="--v-overlay-anchor-origin: top right; transform-origin: bottom right; top: 12px; left: 12px; min-width: 0px; max-width: 0px; max-height: 0px;">
+        <div data-v-353763df="" class="v-list v-theme--light v-list--density-default elevation-3 v-list--one-line py-0 vd-external-links-list" tabindex="0" role="listbox"><a data-v-353763df="" class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line rounded-0 v-list-item--variant-text" tabindex="-2" href="https://www.ameli.fr" target="_blank" rel="noopener noreferrer"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
+            <!---->
+            <div class="v-list-item__content" data-no-activator="">
+              <!---->
+              <!---->
+              <div data-v-353763df="" class="d-flex flex-row justify-space-between">
+                <div data-v-353763df="" class="v-list-item-title">ameli.fr</div><i data-v-353763df="" class="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z mdi v-icon notranslate v-theme--light v-icon--size-default" style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);" aria-hidden="true"></i>
+              </div>
+            </div>
+            <!---->
+          </a><a data-v-353763df="" class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line rounded-0 v-list-item--variant-text" tabindex="-2" href="https://www.github.com" target="_blank" rel="noopener noreferrer"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
+            <!---->
+            <div class="v-list-item__content" data-no-activator="">
+              <!---->
+              <!---->
+              <div data-v-353763df="" class="d-flex flex-row justify-space-between">
+                <div data-v-353763df="" class="v-list-item-title">Github</div><i data-v-353763df="" class="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z mdi v-icon notranslate v-theme--light v-icon--size-default" style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);" aria-hidden="true"></i>
+              </div>
+            </div>
+            <!---->
+          </a><a data-v-353763df="" class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line rounded-0 v-list-item--variant-text" tabindex="-2" href="https://www.twitter.com" target="_blank" rel="noopener noreferrer"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
+            <!---->
+            <div class="v-list-item__content" data-no-activator="">
+              <!---->
+              <!---->
+              <div data-v-353763df="" class="d-flex flex-row justify-space-between">
+                <div data-v-353763df="" class="v-list-item-title">Twitter</div><i data-v-353763df="" class="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z mdi v-icon notranslate v-theme--light v-icon--size-default" style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);" aria-hidden="true"></i>
+              </div>
+            </div>
+            <!---->
+          </a></div>
+      </div>
+    </transition-stub>
+  </div>
+  <!--teleport end-->
+</div>"
+`;
+
+exports[`ExternalLinks > renders correctly 1`] = `
+"<div data-v-353763df="" id="external-link-btn">
+  <v-menu-stub data-v-353763df="" offset="0" id="external-link-btn" class="vd-external-links vd-external-links--left" submenu="false" attach="true" closeonback="true" contained="false" disabled="false" noclickanimation="false" modelvalue="false" persistent="false" scrim="false" zindex="4" activatorprops="[object Object]" openonhover="false" closeoncontentclick="true" closedelay="250" opendelay="300" eager="false" locationstrategy="connected" location="bottom" origin="auto" scrollstrategy="reposition" transition="fade-transition" tile="true"></v-menu-stub>
+</div>"
+`;
+
+exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="true" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div class="v-overlay v-overlay--absolute v-overlay--active v-theme--light v-locale--is-ltr v-menu vd-external-links vd-external-links--right" style="z-index: 24;" id="external-link-btn" data-v-353763df="" tile="true">
+    <transition-stub name="fade-transition" appear="true" persisted="false" css="true">
+      <!---->
+    </transition-stub>
+    <transition-stub name="fade-transition" appear="true" persisted="true" css="true" target="<button data-v-353763df=&quot;&quot; type=&quot;button&quot; class=&quot;v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn&quot; style=&quot;background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;external-link-btn&quot; aria-label=&quot;external-link-btn&quot; aria-owns=&quot;external-link-btn&quot;><span class=&quot;v-btn__overlay&quot;></span><span class=&quot;v-btn__underlay&quot;></span><!----><span class=&quot;v-btn__content&quot; data-no-activator=&quot;&quot;><span data-v-353763df=&quot;&quot; class=&quot;ml-3 vd-external-links-btn-text white--text&quot;>Consulter les données externes</span><i data-v-353763df=&quot;&quot; class=&quot;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white&quot; aria-hidden=&quot;true&quot;></i></span><!----><!----></button>">
+      <div class="v-overlay__content" style="--v-overlay-anchor-origin: bottom right; transform-origin: top right; top: 12px; left: 12px; min-width: 0px; max-width: 0px; max-height: 0px;">
+        <div data-v-353763df="" class="v-list v-theme--light v-list--density-default elevation-3 v-list--one-line py-0 vd-external-links-list" tabindex="0" role="listbox"><a data-v-353763df="" class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line rounded-0 v-list-item--variant-text" tabindex="-2" href="https://www.ameli.fr" target="_blank" rel="noopener noreferrer"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
+            <!---->
+            <div class="v-list-item__content" data-no-activator="">
+              <!---->
+              <!---->
+              <div data-v-353763df="" class="d-flex flex-row justify-space-between">
+                <div data-v-353763df="" class="v-list-item-title">ameli.fr</div><i data-v-353763df="" class="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z mdi v-icon notranslate v-theme--light v-icon--size-default" style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);" aria-hidden="true"></i>
+              </div>
+            </div>
+            <!---->
+          </a><a data-v-353763df="" class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line rounded-0 v-list-item--variant-text" tabindex="-2" href="https://www.github.com" target="_blank" rel="noopener noreferrer"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
+            <!---->
+            <div class="v-list-item__content" data-no-activator="">
+              <!---->
+              <!---->
+              <div data-v-353763df="" class="d-flex flex-row justify-space-between">
+                <div data-v-353763df="" class="v-list-item-title">Github</div><i data-v-353763df="" class="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z mdi v-icon notranslate v-theme--light v-icon--size-default" style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);" aria-hidden="true"></i>
+              </div>
+            </div>
+            <!---->
+          </a><a data-v-353763df="" class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line rounded-0 v-list-item--variant-text" tabindex="-2" href="https://www.twitter.com" target="_blank" rel="noopener noreferrer"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
+            <!---->
+            <div class="v-list-item__content" data-no-activator="">
+              <!---->
+              <!---->
+              <div data-v-353763df="" class="d-flex flex-row justify-space-between">
+                <div data-v-353763df="" class="v-list-item-title">Twitter</div><i data-v-353763df="" class="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z mdi v-icon notranslate v-theme--light v-icon--size-default" style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);" aria-hidden="true"></i>
+              </div>
+            </div>
+            <!---->
+          </a></div>
+      </div>
+    </transition-stub>
+  </div>
+  <!--teleport end-->
+</div>"
+`;
+
+exports[`ExternalLinks > slides on hover or focus 1`] = `
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button>
+  <!---->
+</div>"
+`;
+
+exports[`ExternalLinks > slides on hover or focus 2`] = `
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button>
+  <!---->
+</div>"
+`;
+
+exports[`ExternalLinks > slides on hover or focus 3`] = `
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button>
+  <!---->
+</div>"
+`;
+
+exports[`ExternalLinks > slides on hover or focus 4`] = `
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button>
+  <!---->
+</div>"
+`;
+
+exports[`ExternalLinks > slides on hover or focus 5`] = `
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+    <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
+    <!---->
+    <!---->
+  </button>
+  <!---->
+</div>"
+`;