@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

package/src/components/index.ts

@@ -1,14 +1,40 @@
-export { default as PageContainer } from './PageContainer/PageContainer.vue'
 export { default as Alert } from './Alert/Alert.vue'
-export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
-export { default as SkipLink } from './SkipLink/SkipLink.vue'
-export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.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 SyBtnSelect } from './Customs/SyBtnSelect/SyBtnSelect.vue'
+export { default as SyInputSelect } from '@/components/Customs/SyInputSelect/SyInputSelect.vue'
+export { default as SySelect } from '@/components/Customs/SySelect/SySelect.vue'
+export { default as SyTextField } from '@/components/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 NotificationBar } from './NotificationBar/NotificationBar.vue'
+export { default as HeaderBar } from './HeaderBar/HeaderBar.vue'
+export { default as HeaderBurgerMenu } from './HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.vue'
+export { default as HeaderMenuItem } from './HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue'
+export { default as HeaderMenuSection } from './HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.vue'
+export { default as HeaderSubMenu } from './HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue'
+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 CollapsibleList } from './CollapsibleList/CollapsibleList.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 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 FooterBar } from './FooterBar/FooterBar.vue'
+export { default as SubHeader } from './SubHeader/SubHeader.vue'
+export { default as UserMenuBtn } from './UserMenuBtn/UserMenuBtn.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,82 @@
+import { useFieldValidation } from '../useFieldValidation'
+import { describe, it, expect } from 'vitest'
+
+describe('useFieldValidation', () => {
+	const { generateRules } = useFieldValidation()
+
+	describe('createRule', () => {
+		it('should validate required rule', () => {
+			const rules = generateRules([{ type: 'required', options: { fieldName: 'Nom' } }])
+			const requiredRule = rules[0]
+
+			expect(requiredRule('')).toBe('Vous devez renseigner Nom.')
+			expect(requiredRule('Test')).toBe(true)
+		})
+
+		it('should validate min rule', () => {
+			const rules = generateRules([{ type: 'min', options: { value: 5 } }])
+			const minRule = rules[0]
+
+			expect(minRule(3)).toBe('La valeur doit être supérieure ou égale à 5.')
+			expect(minRule(5)).toBe(true)
+			expect(minRule(10)).toBe(true)
+		})
+
+		it('should validate minLength rule', () => {
+			const rules = generateRules([{ type: 'minLength', options: { length: 3 } }])
+			const minLengthRule = rules[0]
+
+			expect(minLengthRule('ab')).toBe('Ce champ doit avoir au moins 3 caractères.')
+			expect(minLengthRule('abc')).toBe(true)
+		})
+
+		it('should validate max rule', () => {
+			const rules = generateRules([{ type: 'max', options: { value: 10 } }])
+			const maxRule = rules[0]
+
+			expect(maxRule(15)).toBe('La valeur doit être inférieure ou égale à 10.')
+			expect(maxRule(10)).toBe(true)
+			expect(maxRule(5)).toBe(true)
+		})
+
+		it('should validate maxLength rule', () => {
+			const rules = generateRules([{ type: 'maxLength', options: { length: 5 } }])
+			const maxLengthRule = rules[0]
+
+			expect(maxLengthRule('abcdef')).toBe('Ce champ ne doit pas dépasser 5 caractères.')
+			expect(maxLengthRule('abc')).toBe(true)
+		})
+
+		it('should validate exactLength rule', () => {
+			const rules = generateRules([{ type: 'exactLength', options: { length: 4 } }])
+			const exactLengthRule = rules[0]
+
+			expect(exactLengthRule('abc')).toBe('Ce champ doit avoir exactement 4 caractères.')
+			expect(exactLengthRule('abcd')).toBe(true)
+		})
+
+		it('should validate email rule', () => {
+			const rules = generateRules([{ type: 'email' }])
+			const emailRule = rules[0]
+
+			expect(emailRule('invalid-email')).toBe('Veuillez entrer un email valide.')
+			expect(emailRule('test@example.com')).toBe(true)
+		})
+
+		it('should validate matchPattern rule', () => {
+			const rules = generateRules([{ type: 'matchPattern', options: { pattern: /^[a-z]+$/ } }])
+			const matchPatternRule = rules[0]
+
+			expect(matchPatternRule('123')).toBe('Format invalide.')
+			expect(matchPatternRule('abc')).toBe(true)
+		})
+
+		it('should handle ignoreSpace option in length rules', () => {
+			const rules = generateRules([{ type: 'minLength', options: { length: 3, ignoreSpace: true } }])
+			const minLengthRule = rules[0]
+
+			expect(minLengthRule('a b')).toBe('Ce champ doit avoir au moins 3 caractères.')
+			expect(minLengthRule('ab c')).toBe(true)
+		})
+	})
+})

package/src/composables/rules/useFieldValidation.ts

@@ -0,0 +1,53 @@
+type RuleOptions = {
+	fieldName?: string
+	message?: string
+	length?: number
+	value?: number
+	pattern?: RegExp
+	ignoreSpace?: boolean
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+type ValidationRule = (value: any) => string | boolean
+
+export function useFieldValidation() {
+	const createRule = (type: string, options: RuleOptions = {}): ValidationRule => {
+		const getValueLength = (value: string) => {
+			return options.ignoreSpace ? value.replace(/\s/g, '').length : value.length
+		}
+
+		switch (type) {
+			case 'required':
+				return (value: string) =>
+					!!value || options.message || `Vous devez renseigner ${options.fieldName || 'ce champ'}.`
+			case 'min':
+				return (value: number) =>
+					value >= (options.value ?? 0) || options.message || `La valeur doit être supérieure ou égale à ${options.value}.`
+			case 'minLength':
+				return (value: string) =>
+					getValueLength(value) >= (options.length ?? 0) || options.message || `Ce champ doit avoir au moins ${options.length} caractères.`
+			case 'max':
+				return (value: number) =>
+					value <= (options.value ?? Infinity) || options.message || `La valeur doit être inférieure ou égale à ${options.value}.`
+			case 'maxLength':
+				return (value: string) =>
+					getValueLength(value) <= (options.length ?? Infinity) || options.message || `Ce champ ne doit pas dépasser ${options.length} caractères.`
+			case 'exactLength':
+				return (value: string) =>
+					getValueLength(value) === (options.length ?? 0) || options.message || `Ce champ doit avoir exactement ${options.length} caractères.`
+			case 'email':
+				return (value: string) =>
+					/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) || options.message || `Veuillez entrer un email valide.`
+			case 'matchPattern':
+				return (value: string) =>
+					options.pattern ? options.pattern.test(value) || options.message || `Format invalide.` : `Format invalide.`
+			default:
+				return () => `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/composables/widthable/index.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue'
+import { convertToUnit } from '@/utils/convertToUnit'
+
+export type NumberOrNumberString = string | number | undefined
+
+export function useWidthable(props: {
+	maxWidth?: NumberOrNumberString
+	minWidth?: NumberOrNumberString
+	width?: NumberOrNumberString
+}) {
+	// Computed style properties
+	const widthStyles = computed<Record<string, string | undefined>>(() => {
+		return {
+			maxWidth: convertToUnit(props.maxWidth),
+			minWidth: convertToUnit(props.minWidth),
+			width: convertToUnit(props.width ?? '100%'),
+		}
+	})
+
+	return {
+		widthStyles,
+	}
+}
+
+export interface Widthable {
+	maxWidth?: NumberOrNumberString
+	minWidth?: NumberOrNumberString
+	width?: NumberOrNumberString
+}

package/src/composables/widthable/tests/widthable.spec.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { useWidthable } from '../'
+
+describe('useWidthable', () => {
+	it('returns correct styles for default props', () => {
+		const props = {
+			maxWidth: undefined,
+			minWidth: undefined,
+			width: undefined,
+		}
+
+		const { widthStyles } = useWidthable(props)
+
+		expect(widthStyles.value).toEqual({
+			maxWidth: undefined,
+			minWidth: undefined,
+			width: '100%',
+		})
+	})
+
+	it('returns correct styles for specific width values', () => {
+		const props = {
+			maxWidth: '500px',
+			minWidth: '200px',
+			width: 300,
+		}
+
+		const { widthStyles } = useWidthable(props)
+
+		expect(widthStyles.value).toEqual({
+			maxWidth: '500px',
+			minWidth: '200px',
+			width: '300px',
+		})
+	})
+
+	it('handles numeric and string values correctly', () => {
+		const props = {
+			maxWidth: 600,
+			minWidth: '50%',
+			width: '75%',
+		}
+
+		const { widthStyles } = useWidthable(props)
+
+		expect(widthStyles.value).toEqual({
+			maxWidth: '600px',
+			minWidth: '50%',
+			width: '75%',
+		})
+	})
+})

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,8 +7,9 @@ export const cnamLightTheme = {
 	accent: cnamColorsTokens.cyan.base,
 	error: cnamColorsTokens.orange.darken20,
 	info: cnamColorsTokens.blue.base,
-	success: cnamColorsTokens.green.base,
-	warning: cnamColorsTokens.yellow.base,
+	avatar: cnamColorsTokens.cyan.darken20,
+	success: cnamColorsTokens.turquoise.darken60,
+	warning: cnamColorsTokens.yellow.darken60,
 	risquePro: cnamColorsTokens.brick.base,
 	onBackground: cnamSemanticTokens.colors.background.surface,
 	onSurfaceAlt: cnamSemanticTokens.colors.background.surfaceAlt,

package/src/main.ts

@@ -1,2 +1,5 @@
 import '../src/assets/tokens.scss'
+
 export * from './components'
+export * from './services'
+export * from './composables'

package/src/modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+	const content: string
+	export default content
+}

package/src/services/index.ts

@@ -0,0 +1 @@
+export * as NotificationService from './NotificationService'

package/src/stories/Demarrer/Accueil.mdx

@@ -0,0 +1,10 @@
+import {Story, Meta} from '@storybook/blocks';
+import * as AccueilStories from './Accueil.stories';
+
+<Meta of={AccueilStories} />
+
+<Story of={AccueilStories.Header}  />
+
+<p>Au service des équipes-produits de la Caisse Nationale de l’Assurance Maladie, cette boîte à outil met à disposition un ensemble de principes et de composants d’interfaces pour harmoniser et accélérer la fabrication des produits.</p>
+
+<Story of={AccueilStories.List}  />

package/src/stories/Demarrer/Accueil.stories.ts

@@ -0,0 +1,76 @@
+import { VBtn, VIcon, VRow, VCol } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+
+import { mdiGithub } from '@mdi/js'
+
+import { version } from '../../../package.json'
+
+export default {
+	title: 'Démarrer/Accueil',
+}
+
+export const Header: StoryObj = {
+	render: () => {
+		return {
+			components: { VBtn, VIcon },
+			setup() {
+				return {
+					githubIcon: mdiGithub,
+					version,
+				}
+			},
+			template: `
+              <div class="d-flex justify-space-between align-center">
+                  <h1 class="title font-weight-medium">Un Design System<br/>pour l’Assurance Maladie</h1>
+                  <VBtn
+                      :icon="githubIcon"
+                      aria-label="GitHub"
+                      href="https://github.com/assurance-maladie-digital/design-system-v3"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="d-xs-none d-sm-flex"
+                  />
+              </div>
+              <p class="mt-4 mb-8">
+                <b>v{{ version }}</b>
+              </p>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const List: StoryObj = {
+	render: () => {
+		return {
+			components: { VRow, VCol },
+			setup() {
+				return {
+					githubIcon: mdiGithub,
+					version,
+				}
+			},
+			template: `
+              <VRow class="mt-8">
+                <VCol cols="12" sm="6" class="m-2 p-2 v-col-auto background-list">
+                  <p class="font-weight-bold mb-2">Qui sont nos principaux utilisateurs ?</p>
+                  <p>Respectant les règles graphiques de la charte graphique de la CNAM, ce design system couvre prioritairement les produits à destination des assurés, des entreprises et des agents.</p>
+                </VCol>
+                <VCol cols="12" sm="6" class="m-2 p-2 v-col-auto background-list">
+                  <p class="font-weight-bold mb-2">Comment accéder au design system ?</p>
+                  <p>Afin d’améliorer la collaboration, il est disponible pour les développeurs depuis GitHub (accès open source) et pour les designers depuis Figma (accès sur demande).</p>
+                </VCol>
+                <VCol cols="12" sm="6" class="m-2 p-2 v-col-auto background-list">
+                  <p class="font-weight-bold mb-2">Est-ce que le design system est complet ?</p>
+                  <p>Face à l’ampleur des composants et des fonctionnalités nécessaires au bon fonctionnement d’un produit, le design system ne suffit pas seul. Vous devez composer avec la librairie vuetify et le framework vue.js.</p>
+                </VCol>
+                <VCol cols="12" sm="6" class="m-2 p-2 v-col-auto background-list">
+                  <p class="font-weight-bold mb-2">Quels sont les bénéfices du design system ?</p>
+                  <p>Utiliser un design system permet d’accélérer la fabrication, la collaboration et la prise de décision puisqu’il suffit à l’équipe-produit de piocher directement dans une collection de composants déjà adaptés aux besoins de CNAM.</p>
+                </VCol>
+              </VRow>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/Demarrer/PolitiqueDeConfidentialite.mdx

@@ -0,0 +1,9 @@
+import {Story, Meta} from '@storybook/blocks';
+import * as PolitiqueDeConfidentialiteStories from './PolitiqueDeConfidentialite.stories';
+
+<Meta of={PolitiqueDeConfidentialiteStories} />
+
+# Politique de confidentialité
+
+<Story of={PolitiqueDeConfidentialiteStories.Default}  />
+

package/src/stories/Demarrer/PolitiqueDeConfidentialite.stories.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VCard } from 'vuetify/components'
+
+export default {
+	title: 'Démarrer/Politique de confidentialité',
+}
+
+export const Default: StoryObj = {
+	render: () => {
+		return {
+			components: { VCard },
+			template: `
+               <VCard class="mt-4 pa-2">
+                <iframe src="https://assurancemaladiesec.github.io/abuse/reporting/" width="100%" height="800px" frameBorder="0"></iframe>
+               </VCard>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

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