@cnamts/synapse 1.0.4 → 1.0.6

package/src/assets/tokens.scss

@@ -1,3 +1,9 @@
+/*
+ * CNAM Design System
+ * Tokens and settings for the CNAM and PA themes.
+ * This file must not contain any styles as it will be duplicated many times.
+ */
+
 // Primitives
 $orange-darken-80: #2d100b;
 $orange-darken-60: #5a2017;
@@ -311,89 +317,7 @@ $heading-2-font-size: 20px;
 $heading-3-font-size: 16px;
 $heading-4-font-size: 14px;
 
-.title {
-	font-size: $font-size-title !important;
-}
-
-.alt-title {
-	font-size: $font-size-alt-title !important;
-}
-
-.body-text {
-	font-size: $font-size-body-text !important;
-}
-
-.link-label {
-	font-size: $font-size-link-label !important;
-}
-
-h1 {
-	font-size: 32px !important;
-	line-height: 130% !important;
-}
-
-.h1-bold {
-	font-size: 32px !important;
-	font-weight: bold !important;
-	line-height: 130% !important;
-}
-
-h2 {
-	font-size: 28px !important;
-	line-height: 130% !important;
-}
-
-.h2-bold {
-	font-size: 28px !important;
-	font-weight: bold !important;
-	line-height: 130% !important;
-}
-
-h3 {
-	font-size: 24px !important;
-	line-height: 130% !important;
-}
-
-.h3-bold {
-	font-size: 24px !important;
-	font-weight: bold !important;
-	line-height: 130% !important;
-}
-
-h4 {
-	font-size: 20px !important;
-	line-height: 130% !important;
-}
-
-.h4-bold {
-	font-size: 20px !important;
-	font-weight: bold !important;
-	line-height: 130% !important;
-}
-
-.display-1 {
-	font-size: 40px !important;
-	line-height: 130% !important;
-}
-
-.display-1-bold {
-	font-size: 40px !important;
-	font-weight: bold !important;
-	line-height: 130% !important;
-}
-
-.display-2 {
-	font-size: 30px !important;
-	line-height: 130% !important;
-}
-
-.display-2-bold {
-	font-size: 30px !important;
-	font-weight: bold !important;
-	line-height: 130% !important;
-}
-
-// espacement verticaux des elements
+// vertical spacing
 
 $spacing-none: 0;
 $spacing-xx-small: 4px;
@@ -406,7 +330,7 @@ $spacing-xx-large: 56px;
 $spacing-xxx-large: 64px;
 $spacing-huge: 80px;
 
-// espacement horizontaux des elements
+// horizontal spacing
 
 $spacing-horizontal-none: 0;
 $spacing-horizontal-xx-small: 4px;
@@ -419,79 +343,8 @@ $spacing-horizontal-xx-large: 56px;
 $spacing-horizontal-xxx-large: 64px;
 $spacing-horizontal-huge: 80px;
 
-.theme-cnam,
-.theme-pa {
-	// Surcharger toutes les élévations pour utiliser uniquement l'élévation 02
-	.elevation-1,
-	.elevation-2,
-	.elevation-3,
-	.elevation-4,
-	.elevation-5,
-	.elevation-6,
-	.elevation-7,
-	.elevation-8,
-	.elevation-9,
-	.elevation-10,
-	.elevation-11,
-	.elevation-12,
-	.elevation-13,
-	.elevation-14,
-	.elevation-15,
-	.elevation-16,
-	.elevation-17,
-	.elevation-18,
-	.elevation-19,
-	.elevation-20,
-	.elevation-21,
-	.elevation-22,
-	.elevation-23,
-	.elevation-24 {
-		box-shadow:
-			0 3px 1px -2px rgb(0 0 0 / 20%),
-			0 2px 2px 0 rgb(0 0 0 / 14%),
-			0 1px 5px 0 rgb(0 0 0 / 12%) !important;
-	}
-}
+// container
 
-// global.scss
-
-// Variables pour les largeurs des conteneurs
 $container-mobile-max-width: 600px;
 $container-tablet-max-width: 960px;
 $container-desktop-max-width: 960px;
-
-// Conteneur général
-.page-container {
-	text-align: center;
-	margin: 0 auto; // Centrer les conteneurs
-	padding: 40px 40px 56px 56px;
-	width: 1160px;
-
-	// Mobile Styles
-	@media (width <= 600px) {
-		max-width: $container-mobile-max-width;
-		padding: 40px 24px 80px;
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		grid-gap: 24px;
-		width: 80%;
-	}
-
-	// Tablet Styles
-	@media (width >= 601px) and (width <= 960px) {
-		max-width: $container-tablet-max-width;
-		width: 80%;
-		display: grid;
-		grid-template-columns: repeat(6, 1fr);
-		grid-gap: 24px;
-	}
-
-	// Desktop Styles
-	@media (width >= 960px) {
-		max-width: $container-desktop-max-width;
-		width: 100%;
-		display: grid;
-		grid-template-columns: repeat(12, 1fr);
-		grid-gap: 24px;
-	}
-}

package/src/components/Accordion/composables/__tests__/useAccordionGroupCommunication.spec.ts

@@ -1,10 +1,35 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import useAccordionGroupCommunication from '../useAccordionGroupCommunication'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+// Composant vide qui servira de contexte pour les hooks Vue
+const TestComponent = defineComponent({
+	setup() {
+		const instanceId = 'test-instance'
+		const groupId = 'test-group'
+		const onFocusChange = vi.fn()
+
+		const accordion = useAccordionGroupCommunication(instanceId, groupId, onFocusChange)
+
+		return {
+			instanceId,
+			groupId,
+			onFocusChange,
+			emitFocusChange: accordion.emitFocusChange,
+			handleFocusChange: accordion.handleFocusChange,
+		}
+	},
+	template: '<div></div>',
+})
 
 describe('useAccordionGroupCommunication', () => {
 	const instanceId = 'test-instance'
 	const groupId = 'test-group'
 	const mockOnFocusChange = vi.fn()
+	// Wrapper pour le composant de test
+	/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+	let wrapper: any
 
 	// Espionner les méthodes addEventListener et removeEventListener de window
 	beforeEach(() => {
@@ -21,29 +46,43 @@ describe('useAccordionGroupCommunication', () => {
 	})
 
 	describe('initialization', () => {
+		beforeEach(() => {
+			// Monter le composant de test pour fournir un contexte aux hooks Vue
+			wrapper = mount(TestComponent)
+		})
+
+		afterEach(() => {
+			// Démonter le composant après chaque test
+			wrapper.unmount()
+		})
+
 		it('adds event listener on mount', () => {
-			// Utiliser le composable pour tester son initialisation
-			useAccordionGroupCommunication(
-				instanceId,
-				groupId,
-				mockOnFocusChange,
-			)
+			// Le composable est maintenant utilisé via le composant de test,
+			// ce qui fournit un contexte valide pour les hooks de cycle de vie
 
-			// Vérifier que le composable a bien ajouté l'écouteur d'événements
-			// Note: Nous ne pouvons pas vérifier directement l'appel à addEventListener car
-			// il est appelé dans le hook onMounted qui n'est pas exécuté dans le contexte de test
-			// Nous vérifions donc simplement que le test s'exécute sans erreur
-			expect(true).toBe(true)
+			// Vérifier que le composant est bien monté
+			expect(wrapper.vm).toBeDefined()
+
+			// Si addEventListener a été appelé sur window, cela signifie que
+			// le hook onMounted a été correctement exécuté
+			expect(window.addEventListener).toHaveBeenCalled()
 		})
 	})
 
 	describe('emitFocusChange', () => {
+		beforeEach(() => {
+			// Monter le composant de test pour fournir un contexte aux hooks Vue
+			wrapper = mount(TestComponent)
+		})
+
+		afterEach(() => {
+			// Démonter le composant après chaque test
+			wrapper.unmount()
+		})
+
 		it('dispatches a custom event with the correct details', () => {
-			const { emitFocusChange } = useAccordionGroupCommunication(
-				instanceId,
-				groupId,
-				mockOnFocusChange,
-			)
+			// Utiliser les méthodes exposées par le composant
+			const { emitFocusChange } = wrapper.vm
 
 			const itemId = 'test-item'
 			emitFocusChange(itemId)
@@ -61,11 +100,8 @@ describe('useAccordionGroupCommunication', () => {
 		})
 
 		it('dispatches a custom event with null itemId', () => {
-			const { emitFocusChange } = useAccordionGroupCommunication(
-				instanceId,
-				groupId,
-				mockOnFocusChange,
-			)
+			// Utiliser les méthodes exposées par le composant
+			const { emitFocusChange } = wrapper.vm
 
 			emitFocusChange(null)
 
@@ -83,12 +119,19 @@ describe('useAccordionGroupCommunication', () => {
 	})
 
 	describe('handleFocusChange', () => {
+		beforeEach(() => {
+			// Monter le composant de test pour fournir un contexte aux hooks Vue
+			wrapper = mount(TestComponent)
+		})
+
+		afterEach(() => {
+			// Démonter le composant après chaque test
+			wrapper.unmount()
+		})
+
 		it('ignores events from the same instance', () => {
-			const { handleFocusChange } = useAccordionGroupCommunication(
-				instanceId,
-				groupId,
-				mockOnFocusChange,
-			)
+			// Utiliser les méthodes exposées par le composant
+			const { handleFocusChange } = wrapper.vm
 
 			const event = new CustomEvent('accordion-focus-changed', {
 				detail: {
@@ -104,11 +147,8 @@ describe('useAccordionGroupCommunication', () => {
 		})
 
 		it('ignores events from different groups', () => {
-			const { handleFocusChange } = useAccordionGroupCommunication(
-				instanceId,
-				groupId,
-				mockOnFocusChange,
-			)
+			// Utiliser les méthodes exposées par le composant
+			const { handleFocusChange } = wrapper.vm
 
 			const event = new CustomEvent('accordion-focus-changed', {
 				detail: {
@@ -124,23 +164,23 @@ describe('useAccordionGroupCommunication', () => {
 		})
 
 		it('calls onFocusChange with null when receiving a valid event', () => {
-			const { handleFocusChange } = useAccordionGroupCommunication(
-				instanceId,
-				groupId,
-				mockOnFocusChange,
-			)
+			// Utiliser les méthodes exposées par le composant
+			const { handleFocusChange, onFocusChange } = wrapper.vm
+
+			// Réinitialiser le mock avant ce test
+			onFocusChange.mockReset()
 
 			const event = new CustomEvent('accordion-focus-changed', {
 				detail: {
-					sourceInstanceId: 'other-instance', // Instance différente
-					groupId, // Même groupe
-					itemId: 'test-item',
+					sourceInstanceId: 'other-instance',
+					groupId,
+					itemId: null,
 				},
 			})
 
 			handleFocusChange(event)
 
-			expect(mockOnFocusChange).toHaveBeenCalledWith(null)
+			expect(onFocusChange).toHaveBeenCalledWith(null)
 		})
 	})
 })

package/src/components/Amelipro/AmeliproAccordion/AmeliproAccordion.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproAccordionStories from './AmeliproAccordion.stories';
+
+<Meta of={AmeliproAccordionStories} />
+
+# AmeliproAccordion
+
+L’élément `AmeliproAccordion` est utilisé pour créer des cartes dépliables.
+
+<Canvas of={AmeliproAccordionStories.Default}  />
+
+## API
+
+<Controls of={AmeliproAccordionStories.Default} />

package/src/components/Amelipro/AmeliproAccordion/AmeliproAccordion.stories.ts

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproAccordion from './AmeliproAccordion.vue'
+
+const meta = {
+	argTypes: {
+		accordionTitle: { description: 'Titre du panneau dépliant' },
+		borderColor: { description: 'Couleur de bordure du panneau dépliant' },
+		bordered: { description: 'Défini une bordure au panneau dépliant' },
+		cardColor: { description: 'Couleur de fond du panneau dépliant' },
+		default: { description: 'Contenu du panneau dépliant' },
+		headerRight: { description: 'Partie droite du header du panneau dépliant' },
+		headerRightWidth: { description: 'Défini la largeur de la partie droite du header de la carte. Cette props est utile seulement si le slot headerRight est utilisé' },
+		hideSeparator: { description: 'Masque le séparateur entre le titre et le contenu des panneaux dépliants' },
+		isOpen: { description: 'Défini si le panneau dépliant est ouvert au chargement du composant' },
+		openClose: { description: 'Fonction permettant d’ouvrir ou fermer l’accordéon', type: 'void' },
+		titleLevel: { description: 'Niveau du titre du panneau dépliant' },
+		titleUppercase: { description: 'Transforme le titre du panneau dépliant en lettres capitales' },
+		uniqueId: { description: 'Identifiant unique du panneau dépliant' },
+	},
+	component: AmeliproAccordion,
+	title: 'Composants/Amelipro/Blocs dépliants/AmeliproAccordion',
+} as Meta<typeof AmeliproAccordion>
+export default meta
+
+type Story = StoryObj<typeof AmeliproAccordion>
+
+export const Default: Story = {
+	args: {
+		accordionTitle: 'Mon titre',
+		default: '[Slot: default]',
+		headerRight: '[Slot: headerRight]',
+		uniqueId: 'amelipro-accordion-unique-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproAccordion
+		accordion-title="Mon titre"
+		class="w-100"
+		unique-id="amelipro-accordion-unique-id"
+	>
+		<template #default>
+			[Slot: default]
+		</template>
+
+		<template #headerRight>
+			[Slot: headerRight]
+		</template>
+	</AmeliproAccordion>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproAccordion } from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordion },
+		setup() {
+			return { args }
+		},
+		template: `
+<AmeliproAccordion
+	class="w-100"
+	v-bind="args"
+>
+	<template #default>
+		{{ args.default }}
+	</template>
+
+	<template #headerRight>
+		{{ args.headerRight }}
+	</template>
+</AmeliproAccordion>
+`,
+	}),
+}

package/src/components/Amelipro/AmeliproAccordion/AmeliproAccordion.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+	import AmeliproAccordionTemplate from './AmeliproAccordionTemplate/AmeliproAccordionTemplate.vue'
+	import { ref } from 'vue'
+
+	const props = defineProps({
+		accordionTitle: {
+			type: String,
+			required: true,
+		},
+		borderColor: {
+			type: String,
+			default: 'ap-grey-lighten-2',
+		},
+		bordered: {
+			type: Boolean,
+			default: true,
+		},
+		cardColor: {
+			type: String,
+			default: 'ap-white',
+		},
+		headerRightWidth: {
+			type: String,
+			default: '50%',
+		},
+		hideSeparator: {
+			type: Boolean,
+			default: false,
+		},
+		isOpen: {
+			type: Boolean,
+			default: false,
+		},
+		titleLevel: {
+			type: Number,
+			default: 2,
+		},
+		titleUppercase: {
+			type: Boolean,
+			default: false,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const opened = ref(props.isOpen)
+
+	const openClose = (): void => {
+		opened.value = !opened.value
+	}
+
+	// Rendre publique la méthode openClose permet à un bouton ou à un composant externe de fermer/ouvrir l'accordéon
+	defineExpose({ openClose })
+</script>
+
+<template>
+	<AmeliproAccordionTemplate
+		:accordion-title="accordionTitle"
+		:border-color="borderColor"
+		:bordered="bordered"
+		:card-color="cardColor"
+		:header-right-width="headerRightWidth"
+		:hide-separator="hideSeparator"
+		:is-open="opened"
+		:title-level="titleLevel"
+		:title-uppercase="titleUppercase"
+		:unique-id="uniqueId"
+		@open-close="openClose"
+	>
+		<template
+			v-if="$slots.default"
+			#default
+		>
+			<slot />
+		</template>
+
+		<template
+			v-if="$slots.headerRight"
+			#headerRight
+		>
+			<slot name="headerRight" />
+		</template>
+	</AmeliproAccordionTemplate>
+</template>