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

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

@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import Logo from '../Logo.vue'
+import { describe, it, expect } from 'vitest'
+
+import { cnamLightTheme } from '@/designTokens/tokens/cnam/cnamLightTheme'
+import { locales } from '@/components/Logo/locales'
+import { LogoSize } from '@/components/Logo/LogoSize'
+import { logoDimensionsMapping } from '@/components/Logo/logoDimensionsMapping'
+
+describe('Logo.vue', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(Logo)
+		expect(wrapper.find('svg').exists()).toBe(true)
+		expect(wrapper.find('svg').attributes('fill')).toBe(cnamLightTheme.primary)
+		expect(wrapper.find('svg').attributes('aria-label')).toBe('Sécurité sociale, l’Assurance Maladie : Agir ensemble, protéger chacun')
+	})
+
+	it('renders correctly with dark prop', () => {
+		const wrapper = mount(Logo, {
+			props: { dark: true },
+		})
+		expect(wrapper.find('svg').attributes('fill')).toBe('#fff')
+	})
+
+	it('renders correctly with avatar prop', () => {
+		const wrapper = mount(Logo, {
+			props: { avatar: true },
+		})
+		expect(wrapper.find('svg').attributes('aria-hidden')).toBe('true')
+		expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 64 64')
+	})
+
+	it('renders correctly with hideSignature prop', () => {
+		const wrapper = mount(Logo, {
+			props: { hideSignature: true },
+		})
+		expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 206 64')
+	})
+
+	it('renders correctly with hideOrganism prop', () => {
+		const wrapper = mount(Logo, {
+			props: { hideOrganism: true },
+		})
+		expect(wrapper.find('svg').attributes('aria-label')).toBe('l’Assurance Maladie : Agir ensemble, protéger chacun')
+	})
+
+	it('renders correctly with risquePro prop', () => {
+		const wrapper = mount(Logo, {
+			props: { risquePro: true },
+		})
+		expect(wrapper.find('svg').attributes('aria-label')).toBe(`${locales.assuranceMaladie}: ${locales.risquePro}`)
+		expect(wrapper.find('path').attributes('fill')).toBe(cnamLightTheme.risquePro)
+	})
+
+	it('renders correctly with custom ariaLabel', () => {
+		const customLabel = 'Custom Aria Label'
+		const wrapper = mount(Logo, {
+			props: { ariaLabel: customLabel },
+		})
+		expect(wrapper.find('svg').attributes('aria-label')).toBe(customLabel)
+	})
+
+	it('renders correctly with size prop', () => {
+		const wrapper = mount(Logo, {
+			props: { size: LogoSize.SMALL },
+		})
+		expect(wrapper.find('svg').attributes('width')).toBe(logoDimensionsMapping[LogoSize.SMALL].width)
+		expect(wrapper.find('svg').attributes('height')).toBe(logoDimensionsMapping[LogoSize.SMALL].height)
+	})
+
+	it('validates size prop correctly', () => {
+		const validator = Logo.props.size.validator
+		expect(validator(LogoSize.SMALL)).toBe(true)
+	})
+})

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

@@ -0,0 +1,8 @@
+export interface IndexedObject<T = string> {
+	[key: string]: T
+}
+
+export interface Dimensions {
+	width: string
+	height: string
+}

package/src/components/SocialMediaLinks/DefaultSocialMediaLinks.ts

@@ -0,0 +1,21 @@
+import { mdiTwitter, mdiFacebook, mdiLinkedin } from '@mdi/js'
+
+import type { SocialMediaLink } from './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/SocialMediaLinks/SocialMediaLinks.mdx

@@ -0,0 +1,15 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+
+import * as SocialMediaLinksStories from './SocialMediaLinks.stories.ts';
+
+<Meta of={SocialMediaLinksStories} />
+
+# SocialMediaLinks
+
+Le composant `SocialMediaLinks` est utilisé pour afficher des liens de reseaux sociaux dans le componant `Footer`.
+
+<Canvas of={SocialMediaLinksStories.Default}  />
+
+# API
+
+<Controls of={SocialMediaLinksStories.Default} />

package/src/components/SocialMediaLinks/SocialMediaLinks.stories.ts

@@ -0,0 +1,72 @@
+import SocialMediaLinks from './SocialMediaLinks.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { mdiFacebook, mdiLinkedin, mdiTwitter } from '@mdi/js'
+
+const meta = {
+	title: 'Components/SocialMediaLinks',
+	component: SocialMediaLinks,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['socialMediaLinks'] },
+	},
+	args: {
+		socialMediaLinks: [
+			{
+				icon: mdiLinkedin,
+				href: 'https://www.linkedin.com/company/assurance-maladie/',
+			},
+			{
+				icon: mdiFacebook,
+				href: 'https://twitter.com/Assur_Maladie',
+			},
+			{
+				icon: mdiTwitter,
+				href: 'https://twitter.com/Assur_Maladie',
+			},
+		],
+	},
+	argTypes: {
+		socialMediaLinks: {
+			control: { type: 'object' },
+		},
+	},
+} as Meta<typeof SocialMediaLinks>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		links: [
+			{
+				icon: mdiLinkedin,
+				name: 'LinkedIn',
+				href: 'https://www.linkedin.com/company/assurance-maladie/',
+			},
+			{
+				icon: mdiFacebook,
+				name: 'Facebook',
+				href: 'https://twitter.com/Assur_Maladie',
+			},
+			{
+				icon: mdiTwitter,
+				name: 'Twitter',
+				href: 'https://twitter.com/Assur_Maladie',
+			},
+		],
+	},
+	render: (args) => {
+		return {
+			components: { SocialMediaLinks },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+                	<SocialMediaLinks :links="args.links" />
+				</div>
+            `,
+		}
+	},
+}

package/src/components/SocialMediaLinks/SocialMediaLinks.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+	import type { PropType } from 'vue'
+	import { locales } from './locales'
+	import type { SocialMediaLink } from './types'
+
+	const props = defineProps({
+		links: {
+			type: Array as PropType<SocialMediaLink[]>,
+			default: null,
+		},
+	})
+</script>
+
+<template>
+	<div class="d-flex flex-column">
+		<span class="vd-social-media-links-label text-subtitle-2 text--primary">
+			{{ locales.followUs }}
+		</span>
+
+		<ul class="d-flex max-width-none">
+			<li
+				v-for="(social, index) in props.links"
+				:key="index"
+			>
+				<VBtn
+					:id="`social-btn-${index}`"
+					:href="social.href"
+					target="_blank"
+					rel="noopener noreferrer"
+					:icon="true"
+					:aria-label="`Lien vers ${social.name}`"
+					variant="text"
+				>
+					<VIcon
+						size="30px"
+						class="vd-social-media-links-icon"
+					>
+						{{ social.icon }}
+					</VIcon>
+				</VBtn>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens.scss';
+
+.vd-social-media-links {
+  display: flex;
+  flex-direction: column;
+}
+
+li {
+  list-style: none;
+}
+
+.vd-social-media-links-label.text--primary {
+  color: tokens.$blue-base;
+  font-weight: 600;
+}
+
+.v-theme--dark .vd-social-media-links-label.text--primary {
+  color: white;
+}
+
+.vd-social-media-links-icon {
+  color: tokens.$grey-base;
+}
+
+.v-btn--icon {
+  width: calc(var(--v-btn-height) + 5px);
+  height: calc(var(--v-btn-height) + 5px);
+  border: 0;
+}
+
+.v-theme--dark .v-btn--variant-text:hover :deep() {
+  background: rgba(white, 0.1);
+}
+
+@media (min-width: 768px) {
+  .vd-social-media-links-label {
+    text-align: right;
+  }
+}
+
+@media (max-width: 767px) {
+  .vd-social-media-links-label {
+    text-align: left;
+  }
+}
+</style>

package/src/components/SocialMediaLinks/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	followUs: 'Suivez-nous :',
+}

package/src/components/SocialMediaLinks/tests/DefaultSocialMediaLinks.spec.ts

@@ -0,0 +1,21 @@
+import { defaultSocialMediaLinks } from '../DefaultSocialMediaLinks'
+import { describe, it, expect } from 'vitest'
+import { mdiLinkedin, mdiTwitter } from '@mdi/js'
+
+describe('defaultSocialMediaLinks', () => {
+	it('contains the correct number of links', () => {
+		expect(defaultSocialMediaLinks.length).toBe(3)
+	})
+
+	it('contains the correct LinkedIn link', () => {
+		const linkedinLink = defaultSocialMediaLinks.find(link => link.href === 'https://www.linkedin.com/company/assurance-maladie/')
+		expect(linkedinLink).toBeDefined()
+		expect(linkedinLink?.icon).toBe(mdiLinkedin)
+	})
+
+	it('contains the correct Twitter link', () => {
+		const twitterLink = defaultSocialMediaLinks.find(link => link.href === 'https://twitter.com/Assur_Maladie')
+		expect(twitterLink).toBeDefined()
+		expect(twitterLink?.icon).toBe(mdiTwitter)
+	})
+})

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

@@ -0,0 +1,89 @@
+import { mount, VueWrapper } from '@vue/test-utils'
+import SocialMediaLinks from '../SocialMediaLinks.vue'
+import { describe, it, expect, afterEach } from 'vitest'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('SocialMediaLinks.vue', () => {
+	let wrapper: VueWrapper
+
+	afterEach(() => {
+		if (wrapper) {
+			wrapper.unmount()
+		}
+	})
+
+	it('renders correctly with default props', () => {
+		wrapper = mount(SocialMediaLinks, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				links: undefined,
+			},
+		})
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with provided links', () => {
+		const links = [
+			{ href: 'https://twitter.com', name: 'Twitter', icon: 'mdi-twitter' },
+			{ href: 'https://facebook.com', name: 'Facebook', icon: 'mdi-facebook' },
+		]
+		wrapper = mount(SocialMediaLinks, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				links,
+			},
+		})
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders the correct number of social media links', () => {
+		const links = [
+			{ href: 'https://twitter.com', name: 'Twitter', icon: 'mdi-twitter' },
+			{ href: 'https://facebook.com', name: 'Facebook', icon: 'mdi-facebook' },
+		]
+		wrapper = mount(SocialMediaLinks, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				links,
+			},
+		})
+		expect(wrapper.findAll('li').length).toBe(links.length)
+	})
+
+	it('renders no links when links prop is empty array', () => {
+		wrapper = mount(SocialMediaLinks, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				links: [],
+			},
+		})
+		expect(wrapper.findAll('li').length).toBe(0)
+	})
+
+	it('renders no links when links prop is null', () => {
+		wrapper = mount(SocialMediaLinks, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				links: undefined,
+			},
+		})
+		expect(wrapper.findAll('li').length).toBe(0)
+	})
+})

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

@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SocialMediaLinks.vue > renders correctly with default props 1`] = `
+"<div data-v-9d3df26f="" class="d-flex flex-column"><span data-v-9d3df26f="" class="vd-social-media-links-label text-subtitle-2 text--primary">Suivez-nous :</span>
+  <ul data-v-9d3df26f="" class="d-flex max-width-none"></ul>
+</div>"
+`;
+
+exports[`SocialMediaLinks.vue > renders correctly with provided links 1`] = `
+"<div data-v-9d3df26f="" class="d-flex flex-column"><span data-v-9d3df26f="" class="vd-social-media-links-label text-subtitle-2 text--primary">Suivez-nous :</span>
+  <ul data-v-9d3df26f="" class="d-flex max-width-none">
+    <li data-v-9d3df26f=""><a data-v-9d3df26f="" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text" href="https://twitter.com" id="social-btn-0" target="_blank" rel="noopener noreferrer" aria-label="Lien vers Twitter"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><i data-v-9d3df26f="" class="mdi-twitter mdi v-icon notranslate v-theme--light vd-social-media-links-icon" style="font-size: 30px; height: 30px; width: 30px;" aria-hidden="true"></i></span>
+        <!---->
+        <!---->
+      </a></li>
+    <li data-v-9d3df26f=""><a data-v-9d3df26f="" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text" href="https://facebook.com" id="social-btn-1" target="_blank" rel="noopener noreferrer" aria-label="Lien vers Facebook"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        <!----><span class="v-btn__content" data-no-activator=""><i data-v-9d3df26f="" class="mdi-facebook mdi v-icon notranslate v-theme--light vd-social-media-links-icon" style="font-size: 30px; height: 30px; width: 30px;" aria-hidden="true"></i></span>
+        <!---->
+        <!---->
+      </a></li>
+  </ul>
+</div>"
+`;

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

@@ -0,0 +1,5 @@
+export interface SocialMediaLink {
+	icon: string
+	name: string
+	href: string
+}

package/src/components/index.ts

@@ -3,6 +3,12 @@ export { default as Alert } from './Alert/Alert.vue'
 export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
 export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
+export { default as BackBtn } from './BackBtn/BackBtn.vue'
+export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
 export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
 export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
 export { default as LangBtn } from './LangBtn/LangBtn.vue'
+export { default as Logo } from './Logo/Logo.vue'
+export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
+export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
+export { default as FooterBar } from './FooterBar/FooterBar.vue'

package/src/directives/clickOutside.ts

@@ -0,0 +1,24 @@
+import { createApp } from 'vue'
+
+const app = createApp({})
+
+// Click Outside Directive
+app.directive('click-outside', {
+	beforeMount(el, binding) {
+		el.clickOutsideEvent = function (event: Event) {
+			// Check if the click is outside the element
+			if (!(el === event.target || el.contains(event.target))) {
+				// If so, call the method provided in the binding
+				binding.value(event)
+			}
+		}
+		// Attach the event listener
+		document.addEventListener('click', el.clickOutsideEvent)
+	},
+	unmounted(el) {
+		// Clean up the event listener
+		document.removeEventListener('click', el.clickOutsideEvent)
+	},
+})
+
+app.mount('#app')

package/src/temp/TestDTComponent.vue

@@ -74,20 +74,16 @@
 </template>
 
 <style lang="scss" scoped>
-<<<<<<<< HEAD:src/temp/TestDTComponent.vue
-@import '../assets/tokens';
-========
-@import '../../../assets/tokens';
->>>>>>>> 82f4bcd (chore(deps): update dependency vue to v3.5.2 (#66)):src/components/Temp/TestDesignTokensComponent/TestDTComponent.vue
+@use '@/assets/tokens.scss';
 
 h1 {
-  color: $orange-base;
+  color: tokens.$orange-base;
 }
 
 button {
-  background-color: $blue-base;
-  color: $white-base;
-  border-radius: $radius-rounded;
-  //padding: $padding-10 $padding-4;
+  background-color: tokens.$blue-base;
+  color: tokens.$white-base;
+  border-radius: tokens.$radius-rounded;
+  //padding: tokens.$padding-10 tokens.$padding-4;
 }
 </style>

package/src/temp/gridsTests.vue

@@ -48,7 +48,3 @@
 		</v-col>
 	</v-container>
 </template>
-
-<style lang="scss" scoped>
-@import '@/assets/tokens';
-</style>

package/src/utils/propValidator/index.ts

@@ -0,0 +1,20 @@
+/** Validate a prop against a set of values */
+export function propValidator(
+	propName: string,
+	acceptedValues: string[],
+	value: string,
+): boolean {
+	const stringValues = acceptedValues.join('|')
+	const formattedValues = `(${stringValues})`
+	const valuesRegexp = new RegExp(`^${formattedValues}$`)
+
+	const isValid = value.match(valuesRegexp) !== null
+
+	if (!isValid) {
+		console.error(
+			`Invalid value for the \`${propName}\` prop. Received: "${value}", expected one of: [${acceptedValues.join(', ')}].`,
+		)
+	}
+
+	return true
+}

package/src/utils/propValidator/tests/propValidator.spec.ts

@@ -0,0 +1,40 @@
+import {
+	describe,
+	it,
+	expect,
+	afterEach,
+	vi,
+	beforeEach,
+} from 'vitest'
+import { propValidator } from '../index'
+
+const PROP_NAME = 'test'
+const ACCEPTED_VALUES = ['value1', 'value2']
+
+describe('propValidator', () => {
+	let consoleErrorSpy: unknown
+
+	beforeEach(() => {
+		consoleErrorSpy = vi
+			.spyOn(console, 'error')
+			.mockImplementation(() => {})
+	})
+
+	it('does not log anything if the prop is valid', () => {
+		const result = propValidator(PROP_NAME, ACCEPTED_VALUES, 'value1')
+
+		expect(result).toBeTruthy()
+		expect(consoleErrorSpy).not.toHaveBeenCalled()
+	})
+
+	it('logs an error if the prop is not valid', () => {
+		const result = propValidator(PROP_NAME, ACCEPTED_VALUES, 'wrongValue')
+
+		expect(result).toBeTruthy()
+		expect(consoleErrorSpy).toHaveBeenCalled()
+	})
+
+	afterEach(() => {
+		vi.restoreAllMocks()
+	})
+})