@cnamts/synapse 1.0.1 → 1.0.2

package/src/stories/DesignTokens/StylesTypographiques.stories.ts

@@ -0,0 +1,397 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { computed } from 'vue'
+// Import Vue component with proper type declaration from vue-shims.d.ts
+import TypographyDisplay from './TypographyDisplay.vue'
+import { cnamFontsTokens } from '@/designTokens/tokens/cnam/cnamFonts'
+import { paFontsTokens } from '@/designTokens/tokens/pa/paFonts'
+
+const meta: Meta = {
+	title: 'Design Tokens/Styles typographiques',
+	component: TypographyDisplay,
+}
+
+export default meta
+
+export const Introduction: StoryObj = {
+	render: () => {
+		return {
+			setup() {
+				const theme = computed(() => typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam')
+				return {
+					theme,
+					cnamFontFamily: cnamFontsTokens.family.primary,
+					paFontFamily: paFontsTokens.family.primary,
+				}
+			},
+			template: `
+				<p style="font-size: 14px; margin: 16px 0; line-height: 24px; color: rgb(46, 52, 56);">
+					Les styles typographiques sont un élément essentiel de notre système de design. Ils permettent de créer une hiérarchie visuelle claire et cohérente dans nos interfaces.
+				</p>
+				<p style="font-size: 14px; margin: 16px 0; line-height: 24px; color: rgb(46, 52, 56);">
+					Notre système typographique utilise la police {{ theme === 'cnam' ? cnamFontFamily : paFontFamily }} pour tous les éléments textuels, avec différentes tailles et graisses pour créer une hiérarchie visuelle claire.
+				</p>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const HeadingStyles: StoryObj = {
+	render: () => {
+		return {
+			components: { TypographyDisplay },
+			setup() {
+				const cnamTypography = {
+					h1: {
+						fontFamily: cnamFontsTokens.heading.h1.fontFamily,
+						fontSize: cnamFontsTokens.heading.h1.fontSize,
+						fontWeight: cnamFontsTokens.heading.h1.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h1.lineHeight}`,
+						sample: 'Titre de niveau 1',
+						description: 'Utilisé pour les titres principaux de page',
+					},
+					h2: {
+						fontFamily: cnamFontsTokens.heading.h2.fontFamily,
+						fontSize: cnamFontsTokens.heading.h2.fontSize,
+						fontWeight: cnamFontsTokens.heading.h2.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h2.lineHeight}`,
+						sample: 'Titre de niveau 2',
+						description: 'Utilisé pour les sections principales',
+					},
+					h3: {
+						fontFamily: cnamFontsTokens.heading.h3.fontFamily,
+						fontSize: cnamFontsTokens.heading.h3.fontSize,
+						fontWeight: cnamFontsTokens.heading.h3.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h3.lineHeight}`,
+						sample: 'Titre de niveau 3',
+						description: 'Utilisé pour les sous-sections',
+					},
+					h4: {
+						fontFamily: cnamFontsTokens.heading.h4.fontFamily,
+						fontSize: cnamFontsTokens.heading.h4.fontSize,
+						fontWeight: cnamFontsTokens.heading.h4.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h4.lineHeight}`,
+						sample: 'Titre de niveau 4',
+						description: 'Utilisé pour les composants importants',
+					},
+					h5: {
+						fontFamily: cnamFontsTokens.heading.h5.fontFamily,
+						fontSize: cnamFontsTokens.heading.h5.fontSize,
+						fontWeight: cnamFontsTokens.heading.h5.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h5.lineHeight}`,
+						sample: 'Titre de niveau 5',
+						description: 'Utilisé pour les éléments secondaires',
+					},
+					h6: {
+						fontFamily: cnamFontsTokens.heading.h6.fontFamily,
+						fontSize: cnamFontsTokens.heading.h6.fontSize,
+						fontWeight: cnamFontsTokens.heading.h6.fontWeight,
+						lineHeight: `${cnamFontsTokens.heading.h6.lineHeight}`,
+						sample: 'Titre de niveau 6',
+						description: 'Utilisé pour les éléments tertiaires',
+					},
+				}
+				const paTypography = {
+					h1: {
+						fontFamily: paFontsTokens.heading.h1.fontFamily,
+						fontSize: paFontsTokens.heading.h1.fontSize,
+						fontWeight: paFontsTokens.heading.h1.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h1.lineHeight}`,
+						sample: 'Titre de niveau 1',
+						description: 'Utilisé pour les titres principaux de page',
+					},
+					h2: {
+						fontFamily: paFontsTokens.heading.h2.fontFamily,
+						fontSize: paFontsTokens.heading.h2.fontSize,
+						fontWeight: paFontsTokens.heading.h2.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h2.lineHeight}`,
+						sample: 'Titre de niveau 2',
+						description: 'Utilisé pour les sections principales',
+					},
+					h3: {
+						fontFamily: paFontsTokens.heading.h3.fontFamily,
+						fontSize: paFontsTokens.heading.h3.fontSize,
+						fontWeight: paFontsTokens.heading.h3.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h3.lineHeight}`,
+						sample: 'Titre de niveau 3',
+						description: 'Utilisé pour les sous-sections',
+					},
+					h4: {
+						fontFamily: paFontsTokens.heading.h4.fontFamily,
+						fontSize: paFontsTokens.heading.h4.fontSize,
+						fontWeight: paFontsTokens.heading.h4.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h4.lineHeight}`,
+						sample: 'Titre de niveau 4',
+						description: 'Utilisé pour les composants importants',
+					},
+					h5: {
+						fontFamily: paFontsTokens.heading.h5.fontFamily,
+						fontSize: paFontsTokens.heading.h5.fontSize,
+						fontWeight: paFontsTokens.heading.h5.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h5.lineHeight}`,
+						sample: 'Titre de niveau 5',
+						description: 'Utilisé pour les éléments secondaires',
+					},
+					h6: {
+						fontFamily: paFontsTokens.heading.h6.fontFamily,
+						fontSize: paFontsTokens.heading.h6.fontSize,
+						fontWeight: paFontsTokens.heading.h6.fontWeight,
+						lineHeight: `${paFontsTokens.heading.h6.lineHeight}`,
+						sample: 'Titre de niveau 6',
+						description: 'Utilisé pour les éléments tertiaires',
+					},
+				}
+				return {
+					cnamTypography,
+					paTypography,
+				}
+			},
+			template: `
+				<TypographyDisplay 
+					typographyCategory="headings" 
+					:cnamTypography="cnamTypography" 
+					:paTypography="paTypography" 
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const DisplayHeadingStyles: StoryObj = {
+	render: () => {
+		return {
+			components: { TypographyDisplay },
+			setup() {
+				const cnamTypography = {
+					'display-1': {
+						fontFamily: cnamFontsTokens.display.display1.fontFamily,
+						fontSize: cnamFontsTokens.display.display1.fontSize,
+						fontWeight: cnamFontsTokens.display.display1.fontWeight,
+						lineHeight: `${cnamFontsTokens.display.display1.lineHeight}`,
+						sample: 'Display 1',
+						description: 'Pour les mises en avant principales',
+					},
+					'display-2': {
+						fontFamily: cnamFontsTokens.display.display2.fontFamily,
+						fontSize: cnamFontsTokens.display.display2.fontSize,
+						fontWeight: cnamFontsTokens.display.display2.fontWeight,
+						lineHeight: `${cnamFontsTokens.display.display2.lineHeight}`,
+						sample: 'Display 2',
+						description: 'Pour les bannières et sections importantes',
+					},
+				}
+				const paTypography = {
+					'display-1': {
+						fontFamily: paFontsTokens.display?.display1?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.display?.display1?.fontSize || '2.5rem',
+						fontWeight: paFontsTokens.display?.display1?.fontWeight || 300,
+						lineHeight: `${paFontsTokens.display?.display1?.lineHeight || 1.2}`,
+						sample: 'Display 1',
+						description: 'Pour les mises en avant principales',
+					},
+					'display-2': {
+						fontFamily: paFontsTokens.display?.display2?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.display?.display2?.fontSize || '1.875rem',
+						fontWeight: paFontsTokens.display?.display2?.fontWeight || 300,
+						lineHeight: `${paFontsTokens.display?.display2?.lineHeight || 1.1}`,
+						sample: 'Display 2',
+						description: 'Pour les bannières et sections importantes',
+					},
+				}
+				return {
+					cnamTypography,
+					paTypography,
+				}
+			},
+			template: `
+				<TypographyDisplay 
+					typographyCategory="display-headings" 
+					:cnamTypography="cnamTypography" 
+					:paTypography="paTypography" 
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const BodyTextStyles: StoryObj = {
+	render: () => {
+		return {
+			components: { TypographyDisplay },
+			setup() {
+				const cnamTypography = {
+					'body-lg': {
+						fontFamily: cnamFontsTokens.body.body1.fontFamily,
+						fontSize: cnamFontsTokens.body.body1.fontSize,
+						fontWeight: cnamFontsTokens.body.body1.fontWeight,
+						lineHeight: `${cnamFontsTokens.body.body1.lineHeight}`,
+						sample: 'Texte corps large',
+						description: 'Pour les paragraphes importants et introductions',
+					},
+					'body': {
+						fontFamily: cnamFontsTokens.body.body2.fontFamily,
+						fontSize: cnamFontsTokens.body.body2.fontSize,
+						fontWeight: cnamFontsTokens.body.body2.fontWeight,
+						lineHeight: `${cnamFontsTokens.body.body2.lineHeight}`,
+						sample: 'Texte corps standard',
+						description: 'Pour le contenu principal des pages',
+					},
+					'body-sm': {
+						fontFamily: cnamFontsTokens.caption.fontFamily,
+						fontSize: cnamFontsTokens.caption.fontSize,
+						fontWeight: cnamFontsTokens.caption.fontWeight,
+						lineHeight: `${cnamFontsTokens.caption.lineHeight}`,
+						sample: 'Texte corps petit',
+						description: 'Pour les informations secondaires',
+					},
+					'body-xs': {
+						fontFamily: cnamFontsTokens.family.primary,
+						fontSize: cnamFontsTokens.size.xs,
+						fontWeight: cnamFontsTokens.weight.regular,
+						lineHeight: `${cnamFontsTokens.lineHeight.normal}`,
+						sample: 'Texte corps très petit',
+						description: 'Pour les mentions légales et notes de bas de page',
+					},
+				}
+				const paTypography = {
+					'body-lg': {
+						fontFamily: paFontsTokens.body?.body1?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.body?.body1?.fontSize || '1.125rem',
+						fontWeight: paFontsTokens.body?.body1?.fontWeight || 400,
+						lineHeight: `${paFontsTokens.body?.body1?.lineHeight || 1.5}`,
+						sample: 'Texte corps large',
+						description: 'Pour les paragraphes importants et introductions',
+					},
+					'body': {
+						fontFamily: paFontsTokens.body?.body2?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.body?.body2?.fontSize || '1rem',
+						fontWeight: paFontsTokens.body?.body2?.fontWeight || 400,
+						lineHeight: `${paFontsTokens.body?.body2?.lineHeight || 1.5}`,
+						sample: 'Texte corps standard',
+						description: 'Pour le contenu principal des pages',
+					},
+					'body-sm': {
+						fontFamily: paFontsTokens.caption?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.caption?.fontSize || '0.875rem',
+						fontWeight: paFontsTokens.caption?.fontWeight || 400,
+						lineHeight: `${paFontsTokens.caption?.lineHeight || 1.5}`,
+						sample: 'Texte corps petit',
+						description: 'Pour les informations secondaires',
+					},
+					'body-xs': {
+						fontFamily: paFontsTokens.family.primary,
+						fontSize: paFontsTokens.size.xs,
+						fontWeight: paFontsTokens.weight.regular,
+						lineHeight: `${paFontsTokens.lineHeight.normal}`,
+						sample: 'Texte corps très petit',
+						description: 'Pour les mentions légales et notes de bas de page',
+					},
+				}
+				return {
+					cnamTypography,
+					paTypography,
+				}
+			},
+			template: `
+				<TypographyDisplay 
+					typographyCategory="body-text" 
+					:cnamTypography="cnamTypography" 
+					:paTypography="paTypography" 
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const LinksAndLabels: StoryObj = {
+	render: () => {
+		return {
+			components: { TypographyDisplay },
+			setup() {
+				const cnamTypography = {
+					link: {
+						fontFamily: cnamFontsTokens.family.primary,
+						fontSize: cnamFontsTokens.size.base,
+						fontWeight: cnamFontsTokens.weight.medium,
+						lineHeight: `${cnamFontsTokens.lineHeight.normal}`,
+						sample: 'Lien textuel',
+						description: 'Pour les liens dans le texte',
+					},
+					label: {
+						fontFamily: cnamFontsTokens.family.primary,
+						fontSize: cnamFontsTokens.size.sm,
+						fontWeight: cnamFontsTokens.weight.medium,
+						lineHeight: `${cnamFontsTokens.lineHeight.normal}`,
+						sample: 'Label',
+						description: 'Pour les étiquettes et badges',
+					},
+					button: {
+						fontFamily: cnamFontsTokens.family.primary,
+						fontSize: cnamFontsTokens.size.base,
+						fontWeight: cnamFontsTokens.weight.medium,
+						lineHeight: `${cnamFontsTokens.lineHeight.normal}`,
+						sample: 'Bouton',
+						description: 'Pour le texte des boutons',
+					},
+					caption: {
+						fontFamily: cnamFontsTokens.caption.fontFamily,
+						fontSize: cnamFontsTokens.caption.fontSize,
+						fontWeight: cnamFontsTokens.caption.fontWeight,
+						lineHeight: `${cnamFontsTokens.caption.lineHeight}`,
+						sample: 'Légende',
+						description: 'Pour les légendes et notes en petit',
+					},
+				}
+				const paTypography = {
+					link: {
+						fontFamily: paFontsTokens.family.primary,
+						fontSize: paFontsTokens.size.base,
+						fontWeight: paFontsTokens.weight.medium,
+						lineHeight: `${paFontsTokens.lineHeight.normal}`,
+						sample: 'Lien textuel',
+						description: 'Pour les liens dans le texte',
+					},
+					label: {
+						fontFamily: paFontsTokens.family.primary,
+						fontSize: paFontsTokens.size.sm,
+						fontWeight: paFontsTokens.weight.medium,
+						lineHeight: `${paFontsTokens.lineHeight.normal}`,
+						sample: 'Label',
+						description: 'Pour les étiquettes et badges',
+					},
+					button: {
+						fontFamily: paFontsTokens.family.primary,
+						fontSize: paFontsTokens.size.base,
+						fontWeight: paFontsTokens.weight.medium,
+						lineHeight: `${paFontsTokens.lineHeight.normal}`,
+						sample: 'Bouton',
+						description: 'Pour le texte des boutons',
+					},
+					caption: {
+						fontFamily: paFontsTokens.caption?.fontFamily || paFontsTokens.family.primary,
+						fontSize: paFontsTokens.caption?.fontSize || '0.75rem',
+						fontWeight: paFontsTokens.caption?.fontWeight || 400,
+						lineHeight: `${paFontsTokens.caption?.lineHeight || 1.5}`,
+						sample: 'Légende',
+						description: 'Pour les légendes et notes en petit',
+					},
+				}
+				return {
+					cnamTypography,
+					paTypography,
+				}
+			},
+			template: `
+				<TypographyDisplay 
+					typographyCategory="links-and-labels" 
+					:cnamTypography="cnamTypography" 
+					:paTypography="paTypography" 
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/DesignTokens/TypographyDisplay.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+
+	defineProps({
+		typographyCategory: {
+			type: String,
+			required: true,
+		},
+		cnamTypography: {
+			type: Object,
+			required: true,
+		},
+		paTypography: {
+			type: Object,
+			required: true,
+		},
+	})
+
+	const theme = computed(() => typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam')
+</script>
+
+<template>
+	<div class="typography-display">
+		<div
+			v-if="theme === 'cnam'"
+			class="typography-section"
+		>
+			<div
+				v-for="(style, key) in cnamTypography"
+				:key="`cnam-${key}`"
+				class="typography-item"
+			>
+				<div
+					class="typography-sample"
+					:style="{
+						fontFamily: style.fontFamily,
+						fontSize: style.fontSize,
+						fontWeight: style.fontWeight,
+						lineHeight: style.lineHeight
+					}"
+				>
+					{{ style.sample }}
+				</div>
+				<div class="typography-details">
+					<div class="typography-name">
+						{{ key }}
+					</div>
+					<div class="typography-description">
+						{{ style.description }}
+					</div>
+					<div class="typography-specs">
+						<span>Font: {{ style.fontFamily }}</span>
+						<span>Size: {{ style.fontSize }}</span>
+						<span>Weight: {{ style.fontWeight }}</span>
+						<span>Line height: {{ style.lineHeight }}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div
+			v-if="theme === 'pa'"
+			class="typography-section"
+		>
+			<div
+				v-for="(style, key) in paTypography"
+				:key="`pa-${key}`"
+				class="typography-item"
+			>
+				<div
+					class="typography-sample"
+					:style="{
+						fontFamily: style.fontFamily,
+						fontSize: style.fontSize,
+						fontWeight: style.fontWeight,
+						lineHeight: style.lineHeight
+					}"
+				>
+					{{ style.sample }}
+				</div>
+				<div class="typography-details">
+					<div class="typography-name">
+						{{ key }}
+					</div>
+					<div class="typography-description">
+						{{ style.description }}
+					</div>
+					<div class="typography-specs">
+						<span>Font: {{ style.fontFamily }}</span>
+						<span>Size: {{ style.fontSize }}</span>
+						<span>Weight: {{ style.fontWeight }}</span>
+						<span>Line height: {{ style.lineHeight }}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.typography-display {
+	margin: 20px 0;
+}
+
+.typography-section {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+}
+
+.typography-item {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	padding: 16px;
+	border: 1px solid rgb(0 0 0 / 5%);
+	border-radius: 4px;
+	box-shadow: rgb(0 0 0 / 5%) 0 1px 3px 0;
+}
+
+.typography-sample {
+	margin-bottom: 12px;
+}
+
+.typography-details {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.typography-name {
+	font-weight: 600;
+	font-size: 14px;
+}
+
+.typography-description {
+	font-size: 14px;
+	color: #666;
+	margin-bottom: 8px;
+}
+
+.typography-specs {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	font-size: 12px;
+	color: #666;
+}
+
+.typography-specs span {
+	background-color: #f5f5f5;
+	padding: 4px 8px;
+	border-radius: 4px;
+}
+</style>

package/src/stories/DesignTokens/vue-shims.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+	import { DefineComponent } from 'vue'
+
+	const component: DefineComponent<object, object, unknown>
+	export default component
+}

package/src/stories/GuideDuDev/LesBreackingChanges.mdx

@@ -56,10 +56,8 @@ La props `locales` a été ajoutée afin de gérer la localisation des messages
 Des changements sont encore susceptibles d'avoir lieu sur ce composant.
 
  - Le variant utilisé par défaut est maintenant 'outlined'.
- - Le composant en mode calendrier ne permet plus la saisie manuelle de la date.
  - Les props `no-prepend-icon` et `append-icon` ont été remplacés par les props `displayIcon` et `displayAppendIcon`.
  - La props `mask` a été retirée.
- - Les modes `birthdate` et `picker-date` ont été retirés.
  - Les slots `prepend` et `append` ont été retirées.
 
 [Voir l'API du composant](https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-nirfield--docs#api)

package/src/stories/GuideDuDev/MigrationDepuisBridge.mdx

@@ -6,7 +6,7 @@ import {Meta, Source} from '@storybook/addon-docs/blocks';
 
 ## 1 - Commencer la migration
 
-- Téléchargez la stack de migration [Starter Kit Synapse](https://gitlab.cnqd.cnamts.fr/human/developpement/SKV3_X).
+- Téléchargez la stack de migration [Starter Kit Synapse](https://gitlab.cnqd.cnamts.fr/human/developpement/sksn_x).
 
 - Transférez les pages de votre projet du Starter Kit Bridge dans le dossier pages du projet Starter Kit Synapse, les composants peuvent être placés dans le dossier components.
 

package/src/stories/GuideDuDev/MigrationDepuisVue2.mdx

@@ -8,7 +8,7 @@ import {Meta, Source} from '@storybook/addon-docs/blocks';
 
 Pour réaliser la migration d'un produit VueJS 2 vers VueJS 3, vous pouvez suivre les étapes suivantes :
 
-- Téléchargez la stack de migration [Starter Kit Synapse](https://gitlab.cnqd.cnamts.fr/human/developpement/SKV3_X).
+- Téléchargez la stack de migration [Starter Kit Synapse](https://gitlab.cnqd.cnamts.fr/human/developpement/sksn_x).
 
 - Copier les pages de votre projet VueJS 2 dans le dossier pages du projet Starter Kit, les composants peuvent être placés dans le dossier components.
 

package/src/stories/GuideDuDev/PortailAgent.mdx

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as PortailAgentStories from './PortailAgent.stories';
+
+<Meta of={PortailAgentStories} />
+
+# Equivalence des composants Portail Agent avec la stack front VueJs 3
+
+Suite au besoin de migration de l'ensemble des applications du parc de la CNAM vers Vue.js 3, les composants graphiques ont été unifiés. Voici les composants du Portail Agent et leur équivalence dans la stack front Vue.js 3.
+
+<Story of={PortailAgentStories.PAgComponents}  />