@cnamts/synapse 0.0.4-alpha → 0.0.6-alpha

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

@@ -0,0 +1,125 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import UserMenuBtn from '../UserMenuBtn.vue'
+import { vuetify } from '@tests/unit/setup'
+import { nextTick } from 'vue'
+
+describe('UserMenuBtn', () => {
+	it('renders the component', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				menuItems: [{ text: 'Item 1', value: 'item1' }],
+				additionalInformation: 'Additional Info',
+				fullName: 'John Doe',
+				hideLogoutBtn: false,
+				isMobileView: false,
+				hideUserIcon: false,
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('displays the full name', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				fullName: 'John Doe',
+			},
+		})
+		expect(wrapper.text()).toContain('John Doe')
+	})
+
+	it('does not render logout button when hidden', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				hideLogoutBtn: true,
+			},
+		})
+		expect(wrapper.find('.logout').exists()).toBe(false)
+	})
+
+	it('renders user icon when not hidden', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				hideUserIcon: false,
+			},
+		})
+		expect(wrapper.find('.vd-user-icon').exists()).toBe(true)
+	})
+
+	it('does not render user icon when hidden', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				hideUserIcon: true,
+			},
+		})
+		expect(wrapper.find('.vd-user-icon').exists()).toBe(false)
+	})
+
+	it('emits "update:modelValue" when selected changes', async () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+			},
+		})
+		wrapper.vm.$emit('update:modelValue', 'item1')
+		await nextTick()
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		if (emitted && emitted[0]) {
+			expect(emitted[0]).toEqual(['item1'])
+		}
+	})
+
+	it('computes mobile view correctly based on props and display', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				isMobileView: true,
+			},
+		})
+		expect(wrapper.vm.isMobileView).toBe(true)
+	})
+	it('emits "update:modelValue" when updateModelValue is called via event', async () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				menuItems: [{ text: 'Item 1', value: 'item1' }],
+			},
+		})
+
+		const SyBtnSelect = wrapper.findComponent({ name: 'SyBtnSelect' })
+		await SyBtnSelect.vm.$emit('update:model-value', 'test-value')
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')![0]).toEqual(['test-value'])
+	})
+})

package/src/components/index.ts

@@ -1,14 +1,18 @@
-export { default as Alert } from './Alert/Alert.vue'
+export { default as SyAlert } from './SyAlert/SyAlert.vue'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
 export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
-export { default as CustomInputSelect } from './Customs/CustomInputSelect/CustomInputSelect.vue'
-export { default as CustomSelect } from './Customs/CustomSelect/CustomSelect.vue'
-export { default as CustomTextField } from './Customs/CustomTextField/CustomTextField.vue'
+export { default as SyBtnSelect } from './Customs/SyBtnSelect/SyBtnSelect.vue'
+export { default as SyInputSelect } from './Customs/SyInputSelect/SyInputSelect.vue'
+export { default as SySelect } from './Customs/SySelect/SySelect.vue'
+export { default as SyTextField } from './Customs/SyTextField/SyTextField.vue'
 export { default as DataList } from './DataList/DataList.vue'
 export { default as DataListGroup } from './DataListGroup/DataListGroup.vue'
+export { default as DataListItem } from './DataListItem/DataListItem.vue'
+export { default as DialogBox } from './DialogBox/DialogBox.vue'
 export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
+export { default as ErrorPage } from './ErrorPage/ErrorPage.vue'
 export { default as FooterBar } from './FooterBar/FooterBar.vue'
 export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
 export { default as HeaderBar } from './HeaderBar/HeaderBar.vue'
@@ -20,12 +24,23 @@ export { default as HeaderLogo } from './HeaderBar/HeaderLogo/HeaderLogo.vue'
 export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue'
 export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
 export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavigationBar.vue'
+export { default as HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
 export { default as LangBtn } from './LangBtn/LangBtn.vue'
 export { default as Logo } from './Logo/Logo.vue'
 export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'
+export { default as MaintenancePage } from './MaintenancePage/MaintenancePage.vue'
+export { default as NotFoundPage } from './NotFoundPage/NotFoundPage.vue'
+export { default as NirField } from './NirField/NirField.vue'
+export * from './NirField/nirValidation'
 export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
 export * from './NotificationBar/types'
 export { default as PageContainer } from './PageContainer/PageContainer.vue'
+export { default as PhoneField } from './PhoneField/PhoneField.vue'
 export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
 export { default as SubHeader } from './SubHeader/SubHeader.vue'
+export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.vue'
+export { default as CookieBanner } from './CookieBanner/CookieBanner.vue'
+export { default as CookiesSelection } from './CookiesSelection/CookiesSelection.vue'
+export { default as CookiesInformation } from './CookiesSelection/CookiesInformation/CookiesInformation.vue'
+export { default as CookiesTable } from './CookiesSelection/CookiesTable/CookiesTable.vue'

package/src/composables/index.ts

@@ -0,0 +1,8 @@
+// rules
+export * from './rules/useFieldValidation'
+
+// vuetifyOptions
+export * from './useCustomizableOptions'
+
+// withable
+export * from './widthable'

package/src/composables/rules/tests/useFieldValidation.spec.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest'
+import { useFieldValidation } from '../useFieldValidation'
+
+describe('useFieldValidation', () => {
+	const { generateRules } = useFieldValidation()
+
+	it('should validate required rule', () => {
+		const rules = generateRules([{ type: 'required', options: { message: 'This field is required.' } }])
+		const rule = rules[0]
+
+		expect(rule('')).toEqual({ error: 'This field is required.' })
+		expect(rule('value')).toEqual({ success: 'Le champ est valide.' })
+	})
+
+	it('should validate min rule', () => {
+		const rules = generateRules([{ type: 'min', options: { value: 5, message: 'Value must be at least 5.' } }])
+		const rule = rules[0]
+
+		expect(rule(3)).toEqual({ error: 'Value must be at least 5.' })
+		expect(rule(5)).toEqual({ success: 'Le champ est valide.' })
+	})
+
+	it('should validate max rule', () => {
+		const rules = generateRules([{ type: 'max', options: { value: 10, message: 'Value must be at most 10.' } }])
+		const rule = rules[0]
+
+		expect(rule(15)).toEqual({ error: 'Value must be at most 10.' })
+		expect(rule(10)).toEqual({ success: 'Le champ est valide.' })
+	})
+
+	it('should validate minLength rule', () => {
+		const rules = generateRules([{ type: 'minLength', options: { length: 5, message: 'Minimum length is 5.' } }])
+		const rule = rules[0]
+
+		expect(rule('1234')).toEqual({ error: 'Minimum length is 5.' })
+		expect(rule('12345')).toEqual({ success: 'Le champ est valide.' })
+	})
+
+	it('should validate maxLength rule', () => {
+		const rules = generateRules([{ type: 'maxLength', options: { length: 5, message: 'Maximum length is 5.' } }])
+		const rule = rules[0]
+
+		expect(rule('123456')).toEqual({ error: 'Maximum length is 5.' })
+		expect(rule('12345')).toEqual({ success: 'Le champ est valide.' })
+	})
+
+	it('should validate exactLength rule', () => {
+		const rules = generateRules([{ type: 'exactLength', options: { length: 5, message: 'Length must be exactly 5.' } }])
+		const rule = rules[0]
+
+		expect(rule('1234')).toEqual({ error: 'Length must be exactly 5.' })
+		expect(rule('12345')).toEqual({ success: 'Le champ est valide.' })
+	})
+
+	it('should validate email rule', () => {
+		const rules = generateRules([{ type: 'email', options: { message: 'Invalid email address.' } }])
+		const rule = rules[0]
+
+		expect(rule('invalid-email')).toEqual({ error: 'Invalid email address.' })
+		expect(rule('test@example.com')).toEqual({ success: 'Le champ est valide.' })
+	})
+
+	it('should validate matchPattern rule', () => {
+		const rules = generateRules([{
+			type: 'matchPattern',
+			options: { pattern: /^[a-z]+$/, message: 'Invalid format.' },
+		}])
+		const rule = rules[0]
+
+		expect(rule('123')).toEqual({ error: 'Invalid format.' })
+		expect(rule('abc')).toEqual({ success: 'Le champ est valide.' })
+	})
+
+	it('should validate custom rule', () => {
+		const rules = generateRules([{
+			type: 'custom',
+			options: { validate: value => value === 'valid', message: 'Custom validation failed.' },
+		}])
+		const rule = rules[0]
+
+		expect(rule('invalid')).toEqual({ error: 'Custom validation failed.' })
+		expect(rule('valid')).toEqual({ success: 'Le champ est valide.' })
+	})
+})

package/src/composables/rules/useFieldValidation.ts

@@ -0,0 +1,90 @@
+type RuleOptions = {
+	fieldName?: string
+	message?: string
+	successMessage?: string
+	length?: number
+	value?: number
+	pattern?: RegExp
+	ignoreSpace?: boolean
+	fieldIdentifier?: string
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	validate?: (value: any) => boolean | string
+}
+
+type ValidationResult = {
+	success?: string
+	error?: string
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+type ValidationRule = (value: any) => ValidationResult
+
+export function useFieldValidation() {
+	const createRule = (type: string, options: RuleOptions = {}): ValidationRule => {
+		const getValueLength = (value: string) => {
+			return options.ignoreSpace ? value.replace(/\s/g, '').length : value.length
+		}
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		return (value: any) => {
+			if (type !== 'required' && typeof value === 'string' && value.trim() === '') {
+				return {}
+			}
+			switch (type) {
+				case 'required':
+					return typeof value === 'string' && value.trim()
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Vous devez renseigner ${options.fieldName || 'ce champ'}.` }
+
+				case 'min':
+					return typeof value === 'number' && value >= (options.value ?? 0)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `La valeur doit être supérieure ou égale à ${options.value}.` }
+
+				case 'minLength':
+					return typeof value === 'string' && getValueLength(value) >= (options.length ?? 0)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Ce champ doit avoir au moins ${options.length} caractères.` }
+
+				case 'max':
+					return typeof value === 'number' && value <= (options.value ?? Infinity)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `La valeur doit être inférieure ou égale à ${options.value}.` }
+
+				case 'maxLength':
+					return typeof value === 'string' && getValueLength(value) <= (options.length ?? Infinity)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Ce champ ne doit pas dépasser ${options.length} caractères.` }
+
+				case 'exactLength':
+					return typeof value === 'string' && getValueLength(value) === (options.length ?? 0)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Ce champ doit avoir exactement ${options.length} caractères.` }
+
+				case 'email':
+					return typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Veuillez entrer un email valide.` }
+
+				case 'matchPattern':
+					return typeof value === 'string' && options.pattern?.test(value)
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: options.message || `Format invalide.` }
+
+				case 'custom': {
+					const result = options.validate?.(value)
+					return result === true
+						? { success: options.successMessage || 'Le champ est valide.' }
+						: { error: typeof result === 'string' ? result : options.message || `Validation échouée.` }
+				}
+
+				default:
+					return { error: `La règle spécifiée n'existe pas.` }
+			}
+		}
+	}
+
+	const generateRules = (fieldRules: Array<{ type: string, options?: RuleOptions }>) => {
+		return fieldRules.map(rule => createRule(rule.type, rule.options))
+	}
+
+	return { generateRules }
+}

package/src/designTokens/index.ts

@@ -2,6 +2,7 @@ import { cnamSemanticTokens } from './tokens/cnam/cnamSemantic'
 import { cnamContextualTokens } from './tokens/cnam/cnamContextual'
 import { cnamColorsTokens } from './tokens/cnam/cnamColors'
 import { cnamLightTheme } from './tokens/cnam/cnamLightTheme'
+import { cnamDarkTheme } from './tokens/cnam/cnamDarkTheme'
 import { bootstrapColorsTokens } from './tokens/bootstrap/bootstrapColors'
 import { bootstrapLightTheme } from './tokens/bootstrap/bootstrapLightTheme'
 
@@ -10,6 +11,7 @@ export {
 	cnamSemanticTokens,
 	cnamContextualTokens,
 	cnamLightTheme,
+	cnamDarkTheme,
 	bootstrapColorsTokens,
 	bootstrapLightTheme,
 }

package/src/designTokens/tokens/cnam/cnamDarkTheme.ts

@@ -0,0 +1,5 @@
+import { cnamColorsTokens } from './cnamColors'
+
+export const cnamDarkTheme = {
+	backgroundSurface: cnamColorsTokens.parma.darken60,
+}

package/src/designTokens/tokens/cnam/cnamLightTheme.ts

@@ -7,6 +7,7 @@ export const cnamLightTheme = {
 	accent: cnamColorsTokens.cyan.base,
 	error: cnamColorsTokens.orange.darken20,
 	info: cnamColorsTokens.blue.base,
+	avatar: cnamColorsTokens.cyan.darken20,
 	success: cnamColorsTokens.turquoise.darken60,
 	warning: cnamColorsTokens.yellow.darken60,
 	risquePro: cnamColorsTokens.brick.base,

package/src/main.ts

@@ -1,3 +1,6 @@
 import '../src/assets/tokens.scss'
+import '../src/assets/settings.scss'
+
 export * from './components'
 export * from './services'
+export * from './composables'

package/src/stories/Fondamentaux/Arrondis.mdx

@@ -0,0 +1,24 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Fondamentaux/Arrondis" />
+
+# Arrondis
+
+Les angles des éléments permettent de créer du contraste entre les formes et de suggérer l’utilisation des composants
+
+Il existe 4 radius disponibles :
+
+- <b>rounded-0 : 0px</b><br/>
+Dès lors que l’on ne souhaite pas utiliser de radius
+
+- <b>rounded : 4px</b><br/>
+Ce radius peut être utilisé sur des éléments interactifs tels que les boutons, les inputs, les alerts,
+
+- <b>rounded-lg : 8px</b><br/>
+Ce radius peut être utilisé sur des blocs de structure (cards, tableaux...)
+
+- <b>rounded-pill : 96px</b><br/>
+Ce radius peut être utilisé sur des éléments (intéractifs ou non) présentant de la donnée, comme des tags, des filtres, des status...
+
+<br />
+<img alt="Radius" src={'/radius.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

package/src/stories/{Guidelines → Fondamentaux}/Colors.mdx

@@ -2,7 +2,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
 import { cnamLightTheme } from "@/designTokens/tokens/cnam/cnamLightTheme.ts";
 import { cnamColorsTokens } from '@/designTokens/tokens/cnam/cnamColors.ts'
 
-<Meta title="Guidelines/Couleurs" />
+<Meta title="Fondamentaux/Couleurs" />
 
 # Couleurs
 

package/src/stories/Fondamentaux/Conteneurs.mdx

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Fondamentaux/Conteneurs de page" />
+
+# Conteneurs de page
+
+Maquettes à mettre à jour

package/src/stories/Fondamentaux/CustomisationEtThemes.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fondamentaux/Customisation et thèmes" />
+
+# Customisation et thèmes
+
+Contenu à définir

package/src/stories/Fondamentaux/Elevations.mdx

@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Fondamentaux/Elévations" />
+
+# Elévations
+
+<b>Les plateformes de l’Assurance Maladie n’utilisent pas d’élévations à but esthétiques.</b><br/>
+L’élévation est à utiliser pour représenter des interactions avec superposition, comme un élément fixe se positionnant au-dessus d’un élément scrollable, un bouton flottant...
+
+<b>Le style d’élévation est issu de la librairie Vuetify.</b><br/>
+Pour des raisons de cohérence et d’esthétique, des 24 élévations différentes, nous avons retenue la <b>02</b> qui sera la seule et unique utilisée sur les plateformes.
+
+<br />
+<img alt="Elevation" src={'/elevation.jpg'} style={{marginLeft: '-5px'}} />

package/src/stories/Fondamentaux/Espacements.mdx

@@ -0,0 +1,29 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Fondamentaux/Espacements" />
+
+# Espacements
+
+Le design système de la CNAM est basé sur des multiples de 4 pour définir la taille des éléments, placer des espacements et disposer des composants.<br/>
+Ce système d’espacement permet de garantir une homogénéité, cohérence et consistance des interfaces conçues. Cela dans le but d'améliorer l’UX et de faciliter la conception et le développement.
+
+Chaque partie de l'interface utilisateur doit être intentionnellement conçue, y compris l'espace vide entre les éléments. Les espacements permettent de :
+
+- <b>Créer des relations</b>
+Utilisez des espacements faibles entre plusieurs composants pour signaler qu’ils sont liés, ou font partie d’un même groupe (exemple : champs de formulaire) ;
+Utilisez des espacements importants pour mettre en évidence un élément indépendant du reste de la page (exemple : call to action).
+
+- <b>Créer des hiérarchies</b>
+Augmentez les espacements autour d’un composant clé de votre page permet d’améliorer sa visibilité.
+
+## Les espacements verticaux
+<br />
+<img alt="Les espacements verticaux" src={'/espacements-verticaux.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+## Les espacements horizontaux
+<br />
+<img alt="Les espacements horizontaux" src={'/espacements-horizontaux.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+## Mise en situation
+<br />
+<img alt="Mise en situation" src={'/espacements-situation.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

package/src/stories/{Guidelines → Fondamentaux}/Introduction.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Guidelines/Introduction" />
+<Meta title="Fondamentaux/Introduction" />
 
 Principes de design
 ===================

package/src/stories/Fondamentaux/StylesTypographiques.mdx

@@ -0,0 +1,33 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Fondamentaux/Styles typographiques" />
+
+# Styles typographiques
+
+## Styles de titres
+
+Les titres sont utilisés pour créer une hiérarchie visuelle dans la page, et permettent de trouver facilement une information.
+
+<img alt="Styles de titres" src={'/font-titres.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+
+## Styles de titres alternatifs
+
+Pour donner une plus grande liberté éditoriale et graphique, sans nuire à la hiérarchie de l’information et au référencement nous vous proposons plusieurs niveaux de titres alternatifs (display). Vous pourrez les utiliser pour les mise en avant, les bannières, etc..
+Les titres alternatifs peuvent être associés selon votre besoin à un h1, un h2, un h3 ou un h4.
+
+<img alt="Styles de titres alternatifs" src={'/font-titres-alt.jpg'} style={{ padding: '10px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+
+## Corps de texte
+
+Les styles de texte sont là pour vous aider à concevoir vos interfaces efficacement et assurer l’homogénéité entre les différents sites.
+
+<img alt="Corps de texte" src={'/font-corps.jpg'} style={{ padding: '10px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+
+## Liens et libellés
+
+<br />
+
+<img alt="Liens et libellés" src={'/font-liens.jpg'} style={{ padding: '10px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />

package/src/stories/Fondamentaux/Typographie.mdx

@@ -0,0 +1,58 @@
+import { Meta, Typeset } from '@storybook/addon-docs';
+
+<Meta title="Fondamentaux/Typographie" />
+
+export const typography = {
+    type: {
+        primary: 'Arial',
+    },
+    weight: {
+        regular: '400',
+        bold: '700',
+        extrabold: '800',
+        black: '900',
+    },
+    size: {
+        s1: 12,
+        s2: 14,
+        s3: 16,
+        m1: 18,
+        m2: 20,
+        m3: 24,
+        l1: 28,
+        l2: 30,
+        l3: 32,
+        l4:40,
+    },
+};
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+# Typographie
+
+<img alt="Arial" src={'/font-arial.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+**Weights:** 400(regular), 700(bold), 900(black)
+
+<Typeset
+    fontSizes={[
+        Number(typography.size.s1),
+        Number(typography.size.s2),
+        Number(typography.size.s3),
+        Number(typography.size.m1),
+        Number(typography.size.m2),
+        Number(typography.size.m3),
+        Number(typography.size.l1),
+        Number(typography.size.l2),
+        Number(typography.size.l3),
+        Number(typography.size.l4),
+    ]}
+    fontWeight={typography.weight.regular}
+    sampleText={SampleText}
+    fontFamily={typography.type.primary}
+/>
+
+**Interlignage:** 2 ratio de line-height :
+
+- 130% quand le `font-size` est supérieur à 18px
+- 150% quand le `font-size` est inférieur ou égal à 18px