@cnamts/synapse 0.0.0-alpha.0 → 0.0.2-alpha

package/src/components/FooterBar/FooterBar.vue

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+	import { computed, useSlots } from 'vue'
+	import { type RouteLocationRaw } from 'vue-router'
+
+	import Logo from '@/components/Logo/Logo.vue'
+	import { LogoSize } from '@/components/Logo/LogoSize'
+	import SocialMediaLinks from '@/components/SocialMediaLinks/SocialMediaLinks.vue'
+	import type { SocialMediaLink } from '@/components/SocialMediaLinks/types'
+	import { A11yComplianceEnum } from './A11yCompliance'
+	import { defaultSocialMediaLinks } from './defaultSocialMediaLinks'
+	import type { LinkItem } from './types'
+
+	import { mdiArrowUp } from '@mdi/js'
+	import { useDisplay } from 'vuetify'
+	import { config } from './config'
+	import { locales } from './locales'
+
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		a11yCompliance?: string
+		linkItems?: LinkItem[] | null
+		items?: LinkItem[] | null
+		sitemapRoute?: RouteLocationRaw
+		cguRoute?: RouteLocationRaw
+		cookiesRoute?: RouteLocationRaw
+		legalNoticeRoute?: RouteLocationRaw
+		a11yStatementRoute?: RouteLocationRaw
+		hideSitemapLink?: boolean
+		hideCguLink?: boolean
+		hideCookiesLink?: boolean
+		hideLegalNoticeLink?: boolean
+		hideA11yLink?: boolean
+		version?: string | undefined
+		hideLogo?: boolean
+		hideSocialMediaLinks?: boolean
+		socialMediaLinks?: SocialMediaLink[]
+		light?: boolean
+	}>(), {
+		a11yCompliance: 'non-compliant',
+		linkItems: null,
+		items: null,
+		sitemapRoute: () => ({ name: 'sitemap' }),
+		cguRoute: () => ({ name: 'cgu' }),
+		cookiesRoute: () => ({ name: 'cookies' }),
+		legalNoticeRoute: () => ({ name: 'legalNotice' }),
+		a11yStatementRoute: () => ({ name: 'a11yStatement' }),
+		hideSitemapLink: false,
+		hideCguLink: false,
+		hideCookiesLink: false,
+		hideLegalNoticeLink: false,
+		hideA11yLink: false,
+		version: undefined,
+		hideLogo: false,
+		hideSocialMediaLinks: false,
+		socialMediaLinks: () => defaultSocialMediaLinks as SocialMediaLink[],
+		light: false,
+	})
+
+	const arrowTopIcon = mdiArrowUp
+	const logoSizeEnum = LogoSize
+	const slots = useSlots()
+	const display = useDisplay()
+	const options = useCustomizableOptions(config, props)
+
+	const getLinkComponent = (item: LinkItem): string => {
+		return item.href ? 'a' : 'RouterLink'
+	}
+
+	const scrollToTop = () => {
+		window.scrollTo({
+			top: 0,
+			behavior: 'smooth',
+		})
+	}
+
+	const A11yComplianceLabel = computed(() => {
+		const complianceLabel = locales[props.a11yCompliance as keyof typeof A11yComplianceEnum]
+		return typeof complianceLabel === 'string' ? locales.a11yLabel(complianceLabel) : ''
+	})
+
+	const extendedMode = computed(() => {
+		return Boolean(slots.default)
+	})
+
+	const logoSize = computed(() => {
+		return display.smAndDown.value
+			? logoSizeEnum.SMALL
+			: logoSizeEnum.NORMAL
+	})
+
+	const footerLinksMapping = computed(() => {
+		if (props.linkItems) {
+			return props.linkItems as LinkItem[]
+		}
+
+		const linksMapping: LinkItem[] = [
+			{
+				text: locales.sitemapLabel,
+				to: props.sitemapRoute,
+				hidden: props.hideSitemapLink,
+			},
+			{
+				text: locales.cguLabel,
+				to: props.cguRoute,
+				hidden: props.hideCguLink,
+			},
+			{
+				text: locales.cookiesLabel,
+				to: props.cookiesRoute,
+				hidden: props.hideCookiesLink,
+			},
+			{
+				text: locales.legalNoticeLabel,
+				to: props.legalNoticeRoute,
+				hidden: props.hideLegalNoticeLink,
+			},
+			{
+				text: A11yComplianceLabel.value,
+				to: props.a11yStatementRoute,
+				hidden: props.hideA11yLink,
+			},
+		] as LinkItem[]
+
+		return linksMapping.filter(item => !item.hidden)
+	})
+
+	defineExpose({
+		logoSize,
+	})
+</script>
+
+<template>
+	<VFooter
+		v-bind="{
+			...options.footer,
+			...$attrs,
+		}"
+		:color="props.light ? 'white' : options.footer.color"
+		class="vd-footer-bar flex-column align-stretch pa-3 w-100"
+		:class="{
+			'py-4 py-sm-7 px-4 px-md-14': extendedMode,
+			'v-theme--light': props.light,
+			'v-theme--dark': !props.light,
+		}"
+		role="contentinfo"
+	>
+		<div
+			v-if="extendedMode"
+			class="d-flex align-start align-sm-center mb-6"
+		>
+			<div class="d-flex flex-grow-1 flex-column flex-sm-row">
+				<slot name="logo">
+					<Logo
+						v-if="!props.hideLogo"
+						:size="logoSize"
+						:class="{ 'mb-2 mb-sm-0': !props.hideSocialMediaLinks }"
+						class="logo"
+					/>
+				</slot>
+
+				<VSpacer v-bind="options.spacer" />
+
+				<SocialMediaLinks
+					v-if="!props.hideSocialMediaLinks"
+					:links="props.socialMediaLinks"
+					class="mr-8 social"
+				/>
+			</div>
+
+			<VBtn
+				id="scroll-btn"
+				v-bind="options.goTopBtn"
+				:aria-label="locales.goTopBtnLabel"
+				@click="scrollToTop"
+			>
+				<VIcon
+					v-bind="options.goTopBtnIcon"
+					class="scroll"
+				>
+					{{ arrowTopIcon }}
+				</VIcon>
+			</VBtn>
+		</div>
+
+		<VDivider
+			v-if="extendedMode"
+			v-bind="options.divider"
+			class="mb-3"
+		/>
+
+		<slot />
+
+		<VDivider
+			v-if="extendedMode"
+			v-bind="options.divider"
+			class="mt-3 mb-6"
+		/>
+
+		<ul
+			:class="{ 'py-2 py-sm-0': !extendedMode }"
+			class="vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3"
+		>
+			<slot name="prepend" />
+
+			<li
+				v-for="(item, index) in footerLinksMapping"
+				:key="index"
+			>
+				<component
+					:is="getLinkComponent(item)"
+					:href="item.href"
+					:to="item.to"
+					:aria-label="item.ariaLabel"
+					:target="item.openInNewTab ? '_blank' : undefined"
+					:tabindex="index"
+					:rel="item.openInNewTab ? 'noopener noreferrer' : undefined"
+					class="my-3 mx-4"
+				>
+					{{ item.text }}
+				</component>
+			</li>
+
+			<li
+				v-if="props.version"
+				class="text-primary my-3 mx-4"
+			>
+				{{ locales.versionLabel }} {{ props.version }}
+			</li>
+
+			<slot name="append" />
+		</ul>
+	</VFooter>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens.scss';
+$white: #fff;
+
+a {
+  cursor: pointer;
+}
+.v-btn--icon {
+  border: 0;
+}
+// Fix footer bar height in SK
+.v-footer {
+  flex-grow: 0 !important;
+  justify-content: center;
+}
+.vd-footer-bar :deep() {
+  .vd-footer-bar-links a {
+    color: rgba(0, 0, 0, .87);
+  }
+  p,
+  .text--primary {
+    color: rgba(0, 0, 0, .87);
+  }
+  .text--secondary {
+    color: rgba(0, 0, 0, .6);
+  }
+  .social {
+    .text--primary {
+      color: tokens.$primary-base;
+    }
+    a.v-btn:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+  }
+  button.v-btn:hover {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  a.text--primary {
+    color: tokens.$primary-base;
+  }
+  .v-divider {
+    border-color: rgba(tokens.$parma-darken-60, 1);
+  }
+  svg.logo {
+    fill: tokens.$primary-base;
+  }
+  .scroll {
+    color: tokens.$primary-base !important;
+  }
+}
+// Use deep selector to style user content as well
+.vd-footer-bar.v-theme--dark :deep() {
+  .vd-footer-bar-links a {
+    color: $white;
+  }
+  p,
+  .text--primary {
+    color: rgba($white, 0.87);
+  }
+  .text--secondary {
+    color: rgba($white, 0.6);
+  }
+  a.text--primary {
+    color: $white;
+  }
+  .v-divider {
+    border-color: rgba($white, 1);
+  }
+  svg {
+    fill: $white;
+  }
+}
+.vd-footer-bar-links :deep() {
+  li {
+    list-style: none;
+    display: flex;
+  }
+  a {
+    transition: 0.15s;
+    text-decoration: none;
+    padding-top: 1px; // Add top padding to account for bottom border
+    border-bottom: 1px solid transparent;
+    &:hover,
+    &:focus {
+      border-color: currentColor;
+    }
+  }
+  p {
+    padding: 1px 0;
+  }
+}
+.v-theme--dark button.v-btn:hover :deep() {
+  background: rgba(white, 0.1);
+}
+</style>

package/src/components/FooterBar/config.ts

@@ -0,0 +1,20 @@
+import type { VariantType, DensityType } from '@/types/vuetifyTypes'
+import { cnamColorsTokens } from '@/designTokens'
+
+export const config = {
+	footer: {
+		elevation: 3,
+		color: cnamColorsTokens.parma.darken60,
+		height: 'auto',
+	},
+	goTopBtn: {
+		elevation: 0,
+		density: 'compact' as DensityType,
+		icon: 'true',
+		variant: 'text' as VariantType,
+		color: cnamColorsTokens.parma.darken60,
+	},
+	goTopBtnIcon: {
+		color: 'white',
+	},
+}

package/src/components/FooterBar/defaultSocialMediaLinks.ts

@@ -0,0 +1,21 @@
+import { mdiTwitter, mdiLinkedin, mdiFacebook } from '@mdi/js'
+
+import type { SocialMediaLink } from '@/components/SocialMediaLinks/types'
+
+export const defaultSocialMediaLinks: SocialMediaLink[] = [
+	{
+		icon: mdiLinkedin,
+		name: 'LinkedIn',
+		href: 'https://www.linkedin.com/company/assurance-maladie/',
+	},
+	{
+		icon: mdiFacebook,
+		name: 'Facebook',
+		href: 'https://www.facebook.com/AssurMaladie/',
+	},
+	{
+		icon: mdiTwitter,
+		name: 'Twitter',
+		href: 'https://twitter.com/Assur_Maladie',
+	},
+]

package/src/components/FooterBar/locales.ts

@@ -0,0 +1,16 @@
+import { A11yComplianceEnum } from './A11yCompliance'
+
+export const locales = {
+	goTopBtnLabel: 'Retour en haut de la page',
+	sitemapLabel: 'Plan du site',
+	cguLabel: 'Conditions générales d’utilisation',
+	cookiesLabel: 'Gestion des cookies',
+	legalNoticeLabel: 'Mentions légales',
+	versionLabel: 'Version',
+	followUs: 'Suivez-nous',
+	[A11yComplianceEnum['non-compliant']]: 'non conforme',
+	[A11yComplianceEnum['partially-compliant']]: 'partiellement conforme',
+	[A11yComplianceEnum['fully-compliant']]: 'totalement conforme',
+	a11yLabel: (complianceLabel: string): string =>
+		`Accessibilité\xa0: ${complianceLabel}`,
+}

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

@@ -0,0 +1,167 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import FooterBar from '@/components/FooterBar/FooterBar.vue'
+import { locales } from '@/components/FooterBar/locales'
+import { A11yComplianceEnum } from '@/components/FooterBar/A11yCompliance'
+import { vuetify } from '@tests/unit/setup'
+import { LogoSize } from '@/components/Logo/LogoSize'
+import { nextTick } from 'vue'
+
+describe('FooterBar.vue', () => {
+	const getComponentType = (item: { href: unknown }) => {
+		return item.href ? 'a' : 'RouterLink'
+	}
+
+	const testFunction = (complianceLabel: unknown) => {
+		return typeof complianceLabel === 'string' ? locales.a11yLabel(complianceLabel) : ''
+	}
+
+	it('renders correctly', async () => {
+		const wrapper = mount(FooterBar, { global: { plugins: [vuetify] } })
+		expect(FooterBar).toBeTruthy()
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders default props correctly', () => {
+		const wrapper = mount(FooterBar, { global: { plugins: [vuetify] } })
+		expect(wrapper.props().a11yCompliance).toBe('non-compliant')
+		expect(wrapper.props().linkItems).toBeNull()
+		expect(wrapper.props().sitemapRoute).toEqual({ name: 'sitemap' })
+		expect(wrapper.props().hideSitemapLink).toBe(false)
+	})
+
+	it('renders custom props correctly', () => {
+		const customProps = {
+			a11yCompliance: A11yComplianceEnum['fully-compliant'],
+			linkItems: [{ text: 'Custom Link', to: '/custom' }],
+			hideSitemapLink: true,
+		}
+		const wrapper = mount(FooterBar, { props: customProps, global: { plugins: [vuetify] } })
+		expect(wrapper.props().a11yCompliance).toBe(A11yComplianceEnum['fully-compliant'])
+		expect(wrapper.props().linkItems).toEqual(customProps.linkItems)
+		expect(wrapper.props().hideSitemapLink).toBe(true)
+	})
+
+	it('renders footer links correctly', () => {
+		const wrapper = mount(FooterBar, { global: { plugins: [vuetify] } })
+		const links = wrapper.findAll('.vd-footer-bar-links li')
+		expect(links.length).toBeGreaterThan(0)
+	})
+
+	it('hides links based on props', () => {
+		const wrapper = mount(FooterBar, {
+			props: {
+				hideSitemapLink: true,
+				hideCguLink: true,
+				hideCookiesLink: true,
+				hideLegalNoticeLink: true,
+				hideA11yLink: true,
+			},
+			global: { plugins: [vuetify] },
+		})
+		const links = wrapper.findAll('.vd-footer-bar-links li')
+		expect(links.length).toBe(0)
+	})
+
+	it('renders version if provided', () => {
+		const version = '1.0.0'
+		const wrapper = mount(FooterBar, { props: { version }, global: { plugins: [vuetify] } })
+		expect(wrapper.text()).toContain(`${locales.versionLabel} ${version}`)
+	})
+
+	it('computes logoSize correctly for desktop screens', () => {
+		const wrapper = mount(FooterBar, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.vm.$.exposed?.logoSize.value).toBe(LogoSize.NORMAL)
+	})
+
+	it('computes logoSize correctly for small screens', async () => {
+		const wrapper = mount(FooterBar, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		Object.defineProperty(window, 'innerWidth', {
+			writable: true,
+			configurable: true,
+			value: 400,
+		})
+		window.dispatchEvent(new Event('resize'))
+		await nextTick()
+		expect(wrapper.vm.$.exposed?.logoSize.value).toBe(LogoSize.SMALL)
+	})
+
+	it('renders the scroll to top button and triggers scrollToTop', async () => {
+		// Passer un slot ou forcer une condition pour activer le mode étendu
+		const wrapper = mount(FooterBar, {
+			global: { plugins: [vuetify] },
+			slots: {
+				default: '<div>Extended mode content</div>', // Slot pour forcer le mode étendu
+			},
+		})
+
+		// Vérifier si le bouton est bien présent dans le DOM
+		const button = wrapper.find('#scroll-btn')
+		expect(button.exists()).toBe(true)
+
+		// Simuler le clic si le bouton existe
+		const scrollToSpy = vi.spyOn(window, 'scrollTo')
+		await button.trigger('click')
+
+		expect(scrollToSpy).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' })
+	})
+
+	it('returns "a" when href is defined', () => {
+		const item = { href: 'https://example.com' }
+		expect(getComponentType(item)).toBe('a')
+	})
+
+	it('returns "RouterLink" when href is undefined', () => {
+		const item = { href: undefined }
+		expect(getComponentType(item)).toBe('RouterLink')
+	})
+
+	it('returns "RouterLink" when href is null', () => {
+		const item = { href: null }
+		expect(getComponentType(item)).toBe('RouterLink')
+	})
+
+	it('returns "RouterLink" when href is null', () => {
+		const item = { href: null }
+		expect(getComponentType(item)).toBe('RouterLink')
+	})
+
+	it('sets target attribute correctly based on openInNewTab', () => {
+		const linkItems = [
+			{ text: 'Link 1', href: 'https://example.com', openInNewTab: true },
+			{ text: 'Link 2', href: 'https://example.com', openInNewTab: false },
+		]
+		const wrapper = mount(FooterBar, {
+			props: { linkItems },
+			global: { plugins: [vuetify] },
+		})
+
+		const links = wrapper.findAll('.vd-footer-bar-links a')
+		expect(links[0].attributes('target')).toBe('_blank')
+		expect(links[1].attributes('target')).toBeUndefined()
+	})
+
+	it('returns locales.a11yLabel when complianceLabel is a string', () => {
+		const complianceLabel = 'compliant'
+		const a11yLabelMock = vi.fn().mockReturnValue('Accessibility Label')
+		locales.a11yLabel = a11yLabelMock
+
+		const result = testFunction(complianceLabel)
+		expect(a11yLabelMock).toHaveBeenCalledWith(complianceLabel)
+		expect(result).toBe('Accessibility Label')
+	})
+
+	it('returns an empty string when complianceLabel is not a string', () => {
+		const complianceLabel = null
+		const result = testFunction(complianceLabel)
+		expect(result).toBe('')
+	})
+})

package/src/components/FooterBar/tests/FooterBarConfig.spec.ts

@@ -0,0 +1,36 @@
+import { config } from '../config'
+import { describe, it, expect } from 'vitest'
+
+describe('FooterBar config', () => {
+	it('should have correct footer elevation', () => {
+		expect(config.footer.elevation).toBe(3)
+	})
+
+	it('should have correct footer color', () => {
+		expect(config.footer.color).toBe('#2f384d')
+	})
+
+	it('should have correct footer minHeight', () => {
+		expect(config.footer.height).toBe('auto')
+	})
+
+	it('should have correct goTopBtn density', () => {
+		expect(config.goTopBtn.density).toBe('compact')
+	})
+
+	it('should have correct goTopBtn icon', () => {
+		expect(config.goTopBtn.icon).toBe('true')
+	})
+
+	it('should have correct goTopBtn variant', () => {
+		expect(config.goTopBtn.variant).toBe('text')
+	})
+
+	it('should have correct goTopBtn elevation', () => {
+		expect(config.goTopBtn.elevation).toBe(0)
+	})
+
+	it('should have correct goTopBtnIcon color', () => {
+		expect(config.goTopBtnIcon.color).toBe('white')
+	})
+})

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

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FooterBar.vue > renders correctly 1`] = `
+"<footer data-v-a13c4e60="" class="v-footer v-theme--light elevation-3 vd-footer-bar flex-column align-stretch pa-3 w-100 v-theme--dark" style="background-color: #2f384d; color: #fff; caret-color: #fff; height: auto;" role="contentinfo">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+  <ul data-v-a13c4e60="" class="py-2 py-sm-0 vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3">
+    <li data-v-a13c4e60="">
+      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="0" class="my-3 mx-4">Plan du site</routerlink>
+    </li>
+    <li data-v-a13c4e60="">
+      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="1" class="my-3 mx-4">Conditions générales d’utilisation</routerlink>
+    </li>
+    <li data-v-a13c4e60="">
+      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="2" class="my-3 mx-4">Gestion des cookies</routerlink>
+    </li>
+    <li data-v-a13c4e60="">
+      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="3" class="my-3 mx-4">Mentions légales</routerlink>
+    </li>
+    <li data-v-a13c4e60="">
+      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="4" class="my-3 mx-4">Accessibilité&nbsp;: non conforme</routerlink>
+    </li>
+    <!--v-if-->
+  </ul>
+</footer>"
+`;

package/src/components/FooterBar/types.d.ts

@@ -0,0 +1,10 @@
+import { RawLocation } from 'vue-router'
+
+export interface LinkItem {
+	hidden?: unknown
+	text: string
+	to?: RawLocation
+	href?: string
+	ariaLabel?: string
+	openInNewTab?: boolean
+}

package/src/components/LangBtn/LangBtn.mdx

@@ -1,4 +1,5 @@
-import { Controls, Canvas, Meta, Source } from '@storybook/blocks';import * as LangBtnStories from './LangBtn.stories';
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import * as LangBtnStories from './LangBtn.stories';
 
 <Meta of={LangBtnStories} />
 

package/src/components/LangBtn/LangBtn.vue

@@ -153,15 +153,15 @@
 	</div>
 </template>
 <style lang="scss" scoped>
-@import '../../assets/tokens';
+@use '@/assets/tokens.scss';
 
 .v-list-item:hover {
-  background-color: rgba($colors-overlay, 0.005)
+  background-color: rgba(tokens.$colors-overlay, 0.005)
 }
 
 .vd-lang-btn {
   font-weight: 700;
-  --hoverColor: rgba($colors-overlay, 0.5);
+  --hoverColor: rgba(tokens.$colors-overlay, 0.5);
   text-transform: capitalize;
 }
 </style>

package/src/components/Logo/Logo.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Controls, Source } from '@storybook/blocks';
+import * as LogoStories from './Logo.stories.ts';
+import Logo from './Logo.vue';
+
+<Meta title="Components/Logo" component={Logo} />
+
+# Logo
+
+Le composant `Logo` est utilisé pour afficher le logo de l'application avec différentes options de personnalisation.
+
+<Canvas of={LogoStories.Default} />
+
+# API
+
+<Controls of={LogoStories.Default} />
+
+## Utilisation
+
+<Source dark code={`
+<script setup lang='ts'>
+    import Logo from '@/components/Logo/Logo.vue'
+</script>
+<template>
+  <Logo :hideSignature="false" :hideOrganism="false" :risquePro="false" ariaLabel="" :avatar="false" :dark="false" />
+</template>
+`} />