@cnamts/synapse 1.0.5 → 1.0.7

package/src/assets/overrides/_typography.scss

@@ -0,0 +1,196 @@
+/* Typography styles for CNAM and PA themes */
+@use '@/assets/tokens.scss' as *;
+
+.theme-cnam,
+.theme-pa {
+	/* Headings with Vuetify classes */
+	.text-h1 {
+		font-size: var(--v-typography-h1-font-size);
+		font-weight: var(--v-typography-h1-font-weight);
+		line-height: var(--v-typography-h1-line-height);
+		letter-spacing: var(--v-typography-h1-letter-spacing);
+	}
+
+	.text-h2 {
+		font-size: var(--v-typography-h2-font-size);
+		font-weight: var(--v-typography-h2-font-weight);
+		line-height: var(--v-typography-h2-line-height);
+		letter-spacing: var(--v-typography-h2-letter-spacing);
+	}
+
+	.text-h3 {
+		font-size: var(--v-typography-h3-font-size);
+		font-weight: var(--v-typography-h3-font-weight);
+		line-height: var(--v-typography-h3-line-height);
+		letter-spacing: var(--v-typography-h3-letter-spacing);
+	}
+
+	.text-h4 {
+		font-size: var(--v-typography-h4-font-size);
+		font-weight: var(--v-typography-h4-font-weight);
+		line-height: var(--v-typography-h4-line-height);
+		letter-spacing: var(--v-typography-h4-letter-spacing);
+	}
+
+	.text-h5 {
+		font-size: var(--v-typography-h5-font-size);
+		font-weight: var(--v-typography-h5-font-weight);
+		line-height: var(--v-typography-h5-line-height);
+		letter-spacing: var(--v-typography-h5-letter-spacing);
+	}
+
+	.text-h6 {
+		font-size: var(--v-typography-h6-font-size);
+		font-weight: var(--v-typography-h6-font-weight);
+		line-height: var(--v-typography-h6-line-height);
+		letter-spacing: var(--v-typography-h6-letter-spacing);
+	}
+
+	/* Native HTML heading elements */
+	h1 {
+		font-size: var(--v-typography-h1-font-size);
+		font-weight: var(--v-typography-h1-font-weight);
+		line-height: var(--v-typography-h1-line-height);
+		letter-spacing: var(--v-typography-h1-letter-spacing);
+		margin-bottom: 0.5rem;
+	}
+
+	h2 {
+		font-size: var(--v-typography-h2-font-size);
+		font-weight: var(--v-typography-h2-font-weight);
+		line-height: var(--v-typography-h2-line-height);
+		letter-spacing: var(--v-typography-h2-letter-spacing);
+		margin-bottom: 0.5rem;
+	}
+
+	h3 {
+		font-size: var(--v-typography-h3-font-size);
+		font-weight: var(--v-typography-h3-font-weight);
+		line-height: var(--v-typography-h3-line-height);
+		letter-spacing: var(--v-typography-h3-letter-spacing);
+		margin-bottom: 0.5rem;
+	}
+
+	h4 {
+		font-size: var(--v-typography-h4-font-size);
+		font-weight: var(--v-typography-h4-font-weight);
+		line-height: var(--v-typography-h4-line-height);
+		letter-spacing: var(--v-typography-h4-letter-spacing);
+		margin-bottom: 0.5rem;
+	}
+
+	h5 {
+		font-size: var(--v-typography-h5-font-size);
+		font-weight: var(--v-typography-h5-font-weight);
+		line-height: var(--v-typography-h5-line-height);
+		letter-spacing: var(--v-typography-h5-letter-spacing);
+		margin-bottom: 0.5rem;
+	}
+
+	h6 {
+		font-size: var(--v-typography-h6-font-size);
+		font-weight: var(--v-typography-h6-font-weight);
+		line-height: var(--v-typography-h6-line-height);
+		letter-spacing: var(--v-typography-h6-letter-spacing);
+		margin-bottom: 0.5rem;
+	}
+
+	/* Body text */
+	.text-body-1 {
+		font-size: var(--v-typography-body1-font-size);
+		font-weight: var(--v-typography-body1-font-weight);
+		line-height: var(--v-typography-body1-line-height);
+		letter-spacing: var(--v-typography-body1-letter-spacing);
+	}
+
+	.text-body-2 {
+		font-size: var(--v-typography-body2-font-size);
+		font-weight: var(--v-typography-body2-font-weight);
+		line-height: var(--v-typography-body2-line-height);
+		letter-spacing: var(--v-typography-body2-letter-spacing);
+	}
+
+	/* Subtitle text */
+	.text-subtitle-1 {
+		font-size: var(--v-typography-subtitle1-font-size);
+		font-weight: var(--v-typography-subtitle1-font-weight);
+		line-height: var(--v-typography-subtitle1-line-height);
+		letter-spacing: var(--v-typography-subtitle1-letter-spacing);
+	}
+
+	.text-subtitle-2 {
+		font-size: var(--v-typography-subtitle2-font-size);
+		font-weight: var(--v-typography-subtitle2-font-weight);
+		line-height: var(--v-typography-subtitle2-line-height);
+		letter-spacing: var(--v-typography-subtitle2-letter-spacing);
+	}
+
+	/* Other typography */
+	.text-caption {
+		font-size: var(--v-typography-caption-font-size);
+		font-weight: var(--v-typography-caption-font-weight);
+		line-height: var(--v-typography-caption-line-height);
+		letter-spacing: var(--v-typography-caption-letter-spacing);
+	}
+
+	.text-overline {
+		font-size: var(--v-typography-overline-font-size);
+		font-weight: var(--v-typography-overline-font-weight);
+		line-height: var(--v-typography-overline-line-height);
+		letter-spacing: var(--v-typography-overline-letter-spacing);
+		text-transform: var(--v-typography-overline-text-transform, uppercase);
+	}
+
+	/* Display text */
+	.text-display-1 {
+		font-size: var(--v-typography-display1-font-size);
+		font-weight: var(--v-typography-display1-font-weight);
+		line-height: var(--v-typography-display1-line-height);
+		letter-spacing: var(--v-typography-display1-letter-spacing);
+	}
+
+	.text-display-2 {
+		font-size: var(--v-typography-display2-font-size);
+		font-weight: var(--v-typography-display2-font-weight);
+		line-height: var(--v-typography-display2-line-height);
+		letter-spacing: var(--v-typography-display2-letter-spacing);
+	}
+
+	.display-1 {
+		font-size: 40px;
+		line-height: 130%;
+	}
+
+	.display-1-bold {
+		font-size: 40px;
+		font-weight: bold;
+		line-height: 130%;
+	}
+
+	.display-2 {
+		font-size: 30px;
+		line-height: 130%;
+	}
+
+	.display-2-bold {
+		font-size: 30px;
+		font-weight: bold;
+		line-height: 130%;
+	}
+
+	.title {
+		font-size: $font-size-title;
+	}
+
+	.alt-title {
+		font-size: $font-size-alt-title;
+	}
+
+	.body-text {
+		font-size: $font-size-body-text;
+	}
+
+	.link-label {
+		font-size: $font-size-link-label;
+	}
+}

package/src/assets/settings.scss

@@ -1,51 +1,11 @@
-@use 'fonts';
-@use 'spacers';
-@use 'radius';
-@use '@/assets/tokens';
-@use '@/assets/amelipro/apTokens';
-
-.v-btn {
-	text-transform: inherit !important;
-	font-weight: 700 !important;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-.v-btn.v-tab {
-	text-transform: uppercase !important;
-}
-
-.v-tooltip .v-overlay__content {
-	background-color: rgb(0 0 0 / 70%) !important;
-}
-
-.v-tooltip.v-theme--ap .v-overlay__content {
-	background-color: apTokens.$ap-white !important;
-	border: 1px solid apTokens.$ap-parme-darken1 !important;
-}
-
-.v-messages {
-	font-size: 14px !important;
-
-	.v-messages__message {
-		line-height: 16px !important;
-	}
-}
-
-// Common table styles
-.v-data-table thead th .v-data-table-header__content {
-	opacity: 0.65;
-	font-size: 0.875rem;
-	font-weight: 700 !important;
-}
-
-.v-data-table-progress {
-	.v-progress-linear {
-		height: 4px !important;
-	}
-
-	.v-progress-linear__background,
-	.v-progress-linear__indeterminate {
-		background: tokens.$primary-base !important;
-	}
-}
+/**
+ * ! Do not put any style here or il will be duplicated many times
+ * https://vuetifyjs.com/en/features/sass-variables/#duplicated-css
+ */
+@forward 'vuetify/settings' with (
+	$layers: true,
+	$body-font-family: Arial,
+	$utilities: (
+		'typography': false,
+	),
+);

package/src/assets/themes.scss

@@ -0,0 +1,10 @@
+@use 'settings';
+@use 'overrides/elevations';
+@use 'overrides/radius';
+@use 'overrides/typography';
+@use 'overrides/spacers';
+@use 'overrides/btns';
+@use 'overrides/forms';
+@use 'overrides/tables';
+@use 'overrides/tooltips';
+@use 'amelipro/apTheme';

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} />