@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

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

@@ -0,0 +1,365 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import LogoBrandSection from '../LogoBrandSection.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('LogoBrandSection', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+				mobileVersion: false,
+				reduceLogo: false,
+				homeLink: {
+					href: '/',
+				},
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with service computed', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Service Title')
+	})
+
+	it('renders correctly with service computed', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'compte-entreprise',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Compte entreprise')
+	})
+
+	it('renders correctly with height', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+				mobileVersion: false,
+				reduceLogo: false,
+				homeLink: {
+					href: '/',
+				},
+			},
+		})
+
+		const mainDiv = wrapper.find('.vd-logo-brand-section')
+		expect(mainDiv.attributes('height')).toBe('64px')
+	})
+
+	it('renders correctly with showServiceSubTitle', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Service Sub Title')
+	})
+
+	it('renders correctly with no showServiceSubTitle', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: '',
+			},
+		})
+
+		expect(wrapper.find('.vd-title').text()).toBe('Service Title')
+	})
+
+	it('renders correctly with default theme', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+			},
+		})
+
+		const divider = wrapper.find('.vd-divider')
+		expect(divider.attributes('fill')).toBe('#0c419a')
+	})
+
+	it('renders correctly with cnam theme', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'cnam',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+			},
+		})
+
+		const divider = wrapper.find('.vd-divider')
+		expect(divider.attributes('fill')).toBe('#006386')
+	})
+
+	it('renders correctly with compte entreprise theme', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'compte-entreprise',
+				serviceTitle: 'Service Title',
+				serviceSubTitle: 'Service Sub Title',
+			},
+		})
+
+		const divider = wrapper.find('.vd-divider')
+		expect(divider.attributes('fill')).toBe('#cd545b')
+	})
+
+	it('renders correctly with risquePro if no reduceLogo', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'risque-pro',
+				reduceLogo: false,
+			},
+		})
+
+		expect(wrapper.find('logo-stub').attributes('risquepro')).toBe('true')
+		expect(wrapper.find('logo-stub').attributes('hidesignature')).toBe('false')
+	})
+
+	it('renders correctly with risquePro', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'risque-pro',
+				reduceLogo: true,
+			},
+		})
+
+		expect(wrapper.find('logo-stub').attributes('hidesignature')).toBe('true')
+	})
+
+	it('renders correctly with isCompteEntreprise', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'compte-entreprise',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Compte entreprise')
+	})
+
+	it('renders correctly with isCompteAmeliMobile', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'compte-ameli',
+				mobileVersion: true,
+			},
+		})
+
+		const img = wrapper.find('.vd-home-link img')
+		expect(img.attributes('alt')).toBe('Compte ameli')
+	})
+
+	it('renders correctly without signature', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				reduceLogo: true,
+			},
+		})
+
+		expect(wrapper.find('logo-stub').attributes('hidesignature')).toBe('true')
+	})
+
+	it('renders correctly without hideSignature', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				reduceLogo: false,
+			},
+		})
+
+		expect(wrapper.find('logo-stub').attributes('hidesignature')).toBe('false')
+	})
+
+	it('renders correctly with secondaryLogo', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				stubs: ['RouterLink', 'Logo'],
+				plugins: [vuetify],
+			},
+			props: {
+				theme: 'compte-ameli',
+			},
+		})
+
+		expect(wrapper.find('[alt="Compte ameli"]').exists()).toBe(true)
+	})
+
+	it('renders correctly with logoContainerComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				homeLink: {
+					href: '#',
+				},
+			},
+		})
+
+		expect(wrapper.find('a').attributes('href')).toBe('#')
+	})
+
+	it('renders correctly RouterLink with logoContainerComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				homeLink: {
+					to: '/',
+				},
+			},
+		})
+
+		expect(wrapper.find('router-link-stub').attributes('to')).toBe('/')
+	})
+
+	it('renders correctly with logoContainerComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+				homeLink: {
+					href: undefined,
+					to: undefined,
+				},
+			},
+		})
+
+		expect(wrapper.find('.vd-home-link').element.tagName).toBe('DIV')
+	})
+
+	it('renders correctly with secondaryLogoCtnComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'default',
+			},
+		})
+
+		expect(wrapper.findAll('.vd-home-link').length).toBe(1)
+	})
+
+	it('renders correctly with secondaryLogoCtnComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'ameli-pro',
+			},
+		})
+
+		expect(wrapper.findAll('.vd-home-link').length).toBe(2)
+	})
+
+	it('renders correctly with secondaryLogoCtnComponent', () => {
+		const wrapper = mount(LogoBrandSection, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink', 'Logo'],
+			},
+			props: {
+				theme: 'ameli',
+				homeLink: {
+					href: undefined,
+					to: undefined,
+				},
+			},
+		})
+
+		expect(wrapper.findAll('.vd-home-link')[1].element.tagName).toBe('DIV')
+	})
+})

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

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LogoBrandSection > renders correctly 1`] = `
+"<div data-v-7f5c1754="" height="64px" class="vd-logo-brand-section d-flex"><a data-v-7f5c1754="" href="/" class="vd-home-link">
+    <logo-stub data-v-7f5c1754="" hidesignature="false" hideorganism="false" risquepro="false" avatar="false" dark="false" size="normal" class=""></logo-stub>
+  </a><svg data-v-7f5c1754="" width="22" height="64" fill="#0c419a" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 64" class="vd-divider">
+    <path data-v-7f5c1754="" d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z"></path>
+  </svg>
+  <div data-v-7f5c1754="" class="vd-title-container d-flex justify-center flex-column text-primary">
+    <h1 data-v-7f5c1754="" class="vd-title text-caption text-md-subtitle-1 font-weight-medium">Service Title</h1>
+    <h2 data-v-7f5c1754="" class="vd-title text-caption">Service Sub Title</h2>
+  </div>
+</div>"
+`;

package/src/components/LogoBrandSection/types.ts

@@ -0,0 +1,8 @@
+export type Theme =
+	| 'ameli'
+	| 'ameli-pro'
+	| 'cnam'
+	| 'compte-ameli'
+	| 'compte-entreprise'
+	| 'default'
+	| 'risque-pro'

package/src/components/NotificationBar/NotificationBar.mdx

@@ -30,9 +30,9 @@ import * as NotificationBarStories from './NotificationBar.stories';
 <Source dark code={`
 <script setup lang="ts">
 	import { VBtn } from 'vuetify/components'
-	import NotificationBar from '@/components/NotificationBar/NotificationBar.vue'
-	import { useNotificationService } from '@/services/NotificationService'
-	import type { Notification } from '@/components/NotificationBar/types'
+	import NotificationBar from '@cnamts/synapse'
+	import { useNotificationService } from '@cnamts/synapse/src/services/NotificationService'
+	import type { Notification } from '@cnamts/synapse/src/components/NotificationBar/types'
 
 	const { addNotification } = useNotificationService()
 
@@ -83,12 +83,12 @@ import * as NotificationBarStories from './NotificationBar.stories';
 	</div>
 </template>
 
-    <style scoped>
+<style scoped>
     .button-group {
       display: flex;
       flex-direction: column;
       gap: 16px;
       margin-top: 20px;
     }
-    </style>
-    `} />
+</style>
+`} />

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -13,7 +13,7 @@ interface StoryArgs {
 }
 
 const meta: Meta<typeof NotificationBar> = {
-	title: 'Components/NotificationBar',
+	title: 'Composants/Feedback/NotificationBar',
 	parameters: {
 		layout: 'fullscreen',
 	},

package/src/components/NotificationBar/NotificationBar.vue

@@ -50,8 +50,8 @@
 		if (currentNotification.value) {
 			const typeColor: Record<string, string> = {
 				info: 'info',
-				success: 'success',
-				warning: 'warning',
+				success: '#56C271',
+				warning: '#F0B323',
 				error: 'error',
 			}
 			return typeColor[currentNotification.value.type] || 'info'

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

@@ -64,7 +64,7 @@ describe('NotificationBar.vue', () => {
 		wrapper.vm.openNotification(notification)
 
 		await nextTick()
-		expect(wrapper.vm.color).toBe('success')
+		expect(wrapper.vm.color).toBe('#56C271')
 	})
 
 	it('should close notification when handleClearNotification is called', async () => {

package/src/components/PageContainer/PageContainer.mdx

@@ -18,7 +18,7 @@ Le composant `PageContainer` est un conteneur transparent utilisé pour afficher
 
 <Source dark code={`
 <script setup lang="ts">
-import PageContainer from '@/components/PageContainer/PageContainer.vue'
+import PageContainer from '@cnamts/synapse'
 </script>
 
 <template>

package/src/components/PageContainer/PageContainer.stories.ts

@@ -3,7 +3,7 @@ import PageContainer from './PageContainer.vue'
 import { VCard } from 'vuetify/components'
 
 const meta = {
-	title: 'Components/PageContainer',
+	title: 'Composants/Layout/PageContainer',
 	component: PageContainer,
 	parameters: {
 		layout: 'fullscreen',
@@ -33,6 +33,26 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<PageContainer>
+		Contenu de la page
+	</PageContainer>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import PageContainer from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		default: 'Contenu de la page',
 	},
@@ -52,6 +72,26 @@ export const Default: Story = {
 }
 
 export const Size: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<PageContainer size="s">
+		Contenu de la page
+	</PageContainer>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import PageContainer from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		default: 'Contenu de la page',
 		size: 's',
@@ -72,6 +112,28 @@ export const Size: Story = {
 }
 
 export const Color: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<PageContainer color="primary">
+		<div class="pa-8">
+			Contenu de la page
+		</div>
+	</PageContainer>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import PageContainer from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		default: 'Contenu de la page',
 		color: 'primary',
@@ -94,6 +156,29 @@ export const Color: Story = {
 }
 
 export const Card: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<PageContainer>
+		<VCard class="pa-8">
+			Contenu de la page
+		</VCard>
+	</PageContainer>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import PageContainer from '@cnamts/synapse'
+	import { VCard } from 'vuetify/components'
+</script>
+				`,
+			},
+		],
+	},
 	args: {
 		default: 'Contenu de la page',
 	},

package/src/components/PhoneField/PhoneField.mdx

@@ -0,0 +1,49 @@
+import { Meta, Canvas, Controls, Source } from '@storybook/addon-docs'
+import * as PhoneFieldStories from './PhoneField.stories.ts';
+import PhoneField from './PhoneField.vue'
+
+<Meta title="Composants/Formulaires/PhoneField" component={PhoneField} />
+
+# PhoneField
+
+The `PhoneField` component is used to input phone numbers with various formatting options.
+
+<Canvas of={PhoneFieldStories.Default} />
+
+# API
+
+<Controls of={PhoneFieldStories.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+import PhoneField from '@cnamts/synapse'
+import { ref } from 'vue'
+
+const value = ref('')
+
+const handleChange = (newValue) => {
+    console.log('Value changed:', newValue)
+}
+const customIndicatifs = ref([
+    { code: '+99', country: 'Utopia', abbreviation: 'UT', mask: '## ## ## ##', phoneLength: 8 },
+    { code: '+98', country: 'Paradise', abbreviation: 'PA', mask: '## ## ## ##', phoneLength: 18 },
+])
+</script>
+
+<template>
+    <PhoneField
+        v-model="value"
+        required
+        with-country-code
+        country-code-required
+        display-format="code-abbreviation"
+        :custom-indicatifs="customIndicatifs"
+        :use-custom-indicatifs-only="true"
+        outlined
+        outlined-indicatif
+        @change="handleChange"
+    />
+</template>
+`} />